{"version":3,"file":"framer-motion-CGpvBWU0.js","sources":["../../node_modules/framer-motion/dist/es/context/MotionConfigContext.mjs","../../node_modules/framer-motion/dist/es/context/MotionContext/index.mjs","../../node_modules/framer-motion/dist/es/context/PresenceContext.mjs","../../node_modules/framer-motion/dist/es/utils/is-browser.mjs","../../node_modules/framer-motion/dist/es/utils/use-isomorphic-effect.mjs","../../node_modules/framer-motion/dist/es/context/LazyContext.mjs","../../node_modules/framer-motion/dist/es/motion/utils/use-visual-element.mjs","../../node_modules/framer-motion/dist/es/utils/is-ref-object.mjs","../../node_modules/framer-motion/dist/es/motion/utils/use-motion-ref.mjs","../../node_modules/framer-motion/dist/es/render/utils/is-variant-label.mjs","../../node_modules/framer-motion/dist/es/animation/utils/is-animation-controls.mjs","../../node_modules/framer-motion/dist/es/render/utils/is-controlling-variants.mjs","../../node_modules/framer-motion/dist/es/context/MotionContext/utils.mjs","../../node_modules/framer-motion/dist/es/context/MotionContext/create.mjs","../../node_modules/framer-motion/dist/es/motion/features/definitions.mjs","../../node_modules/framer-motion/dist/es/motion/features/load-features.mjs","../../node_modules/framer-motion/dist/es/utils/use-constant.mjs","../../node_modules/framer-motion/dist/es/projection/node/state.mjs","../../node_modules/framer-motion/dist/es/projection/node/id.mjs","../../node_modules/framer-motion/dist/es/context/LayoutGroupContext.mjs","../../node_modules/framer-motion/dist/es/motion/utils/VisualElementHandler.mjs","../../node_modules/framer-motion/dist/es/context/SwitchLayoutGroupContext.mjs","../../node_modules/framer-motion/dist/es/motion/utils/symbol.mjs","../../node_modules/framer-motion/dist/es/motion/index.mjs","../../node_modules/framer-motion/dist/es/render/dom/motion-proxy.mjs","../../node_modules/framer-motion/dist/es/render/svg/lowercase-elements.mjs","../../node_modules/framer-motion/dist/es/render/dom/utils/is-svg-component.mjs","../../node_modules/framer-motion/dist/es/projection/styles/scale-correction.mjs","../../node_modules/framer-motion/dist/es/render/html/utils/transform.mjs","../../node_modules/framer-motion/dist/es/motion/utils/is-forced-motion-value.mjs","../../node_modules/framer-motion/dist/es/value/utils/is-motion-value.mjs","../../node_modules/framer-motion/dist/es/render/html/utils/build-transform.mjs","../../node_modules/framer-motion/dist/es/render/dom/utils/is-css-variable.mjs","../../node_modules/framer-motion/dist/es/render/dom/value-types/get-as-type.mjs","../../node_modules/framer-motion/dist/es/utils/clamp.mjs","../../node_modules/framer-motion/dist/es/value/types/numbers/index.mjs","../../node_modules/framer-motion/dist/es/value/types/utils.mjs","../../node_modules/framer-motion/dist/es/value/types/numbers/units.mjs","../../node_modules/framer-motion/dist/es/render/dom/value-types/type-int.mjs","../../node_modules/framer-motion/dist/es/render/dom/value-types/number.mjs","../../node_modules/framer-motion/dist/es/render/html/utils/build-styles.mjs","../../node_modules/framer-motion/dist/es/render/html/utils/create-render-state.mjs","../../node_modules/framer-motion/dist/es/render/html/use-props.mjs","../../node_modules/framer-motion/dist/es/motion/utils/valid-prop.mjs","../../node_modules/framer-motion/dist/es/render/dom/utils/filter-props.mjs","../../node_modules/framer-motion/dist/es/render/svg/utils/transform-origin.mjs","../../node_modules/framer-motion/dist/es/render/svg/utils/path.mjs","../../node_modules/framer-motion/dist/es/render/svg/utils/build-attrs.mjs","../../node_modules/framer-motion/dist/es/render/svg/utils/create-render-state.mjs","../../node_modules/framer-motion/dist/es/render/svg/utils/is-svg-tag.mjs","../../node_modules/framer-motion/dist/es/render/svg/use-props.mjs","../../node_modules/framer-motion/dist/es/render/dom/use-render.mjs","../../node_modules/framer-motion/dist/es/render/dom/utils/camel-to-dash.mjs","../../node_modules/framer-motion/dist/es/render/html/utils/render.mjs","../../node_modules/framer-motion/dist/es/render/svg/utils/camel-case-attrs.mjs","../../node_modules/framer-motion/dist/es/render/svg/utils/render.mjs","../../node_modules/framer-motion/dist/es/render/html/utils/scrape-motion-values.mjs","../../node_modules/framer-motion/dist/es/render/svg/utils/scrape-motion-values.mjs","../../node_modules/framer-motion/dist/es/render/utils/resolve-variants.mjs","../../node_modules/framer-motion/dist/es/animation/utils/is-keyframes-target.mjs","../../node_modules/framer-motion/dist/es/utils/resolve-value.mjs","../../node_modules/framer-motion/dist/es/value/utils/resolve-motion-value.mjs","../../node_modules/framer-motion/dist/es/motion/utils/use-visual-state.mjs","../../node_modules/framer-motion/dist/es/render/svg/config-motion.mjs","../../node_modules/framer-motion/dist/es/render/html/config-motion.mjs","../../node_modules/framer-motion/dist/es/render/dom/utils/create-config.mjs","../../node_modules/framer-motion/dist/es/render/utils/types.mjs","../../node_modules/framer-motion/dist/es/events/use-dom-event.mjs","../../node_modules/framer-motion/dist/es/gestures/use-focus-gesture.mjs","../../node_modules/framer-motion/dist/es/events/utils/is-primary-pointer.mjs","../../node_modules/framer-motion/dist/es/events/event-info.mjs","../../node_modules/framer-motion/dist/es/events/use-pointer-event.mjs","../../node_modules/framer-motion/dist/es/gestures/drag/utils/lock.mjs","../../node_modules/framer-motion/dist/es/gestures/use-hover-gesture.mjs","../../node_modules/framer-motion/dist/es/gestures/utils/is-node-or-child.mjs","../../node_modules/framer-motion/dist/es/utils/use-unmount-effect.mjs","../../node_modules/framer-motion/dist/es/utils/pipe.mjs","../../node_modules/framer-motion/dist/es/gestures/use-tap-gesture.mjs","../../node_modules/framer-motion/dist/es/motion/features/viewport/observers.mjs","../../node_modules/framer-motion/dist/es/motion/features/viewport/use-viewport.mjs","../../node_modules/framer-motion/dist/es/motion/utils/make-renderless-component.mjs","../../node_modules/framer-motion/dist/es/motion/features/gestures.mjs","../../node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs","../../node_modules/framer-motion/dist/es/utils/shallow-compare.mjs","../../node_modules/framer-motion/dist/es/utils/is-numerical-string.mjs","../../node_modules/framer-motion/dist/es/utils/is-zero-value-string.mjs","../../node_modules/framer-motion/dist/es/frameloop/data.mjs","../../node_modules/framer-motion/dist/es/frameloop/on-next-frame.mjs","../../node_modules/framer-motion/dist/es/frameloop/create-render-step.mjs","../../node_modules/framer-motion/dist/es/frameloop/index.mjs","../../node_modules/framer-motion/dist/es/utils/array.mjs","../../node_modules/framer-motion/dist/es/utils/subscription-manager.mjs","../../node_modules/framer-motion/dist/es/utils/velocity-per-second.mjs","../../node_modules/framer-motion/dist/es/value/index.mjs","../../node_modules/framer-motion/dist/es/value/types/color/utils.mjs","../../node_modules/framer-motion/dist/es/value/types/color/rgba.mjs","../../node_modules/framer-motion/dist/es/value/types/color/hex.mjs","../../node_modules/framer-motion/dist/es/value/types/color/hsla.mjs","../../node_modules/framer-motion/dist/es/value/types/color/index.mjs","../../node_modules/framer-motion/dist/es/value/types/complex/index.mjs","../../node_modules/framer-motion/dist/es/value/types/complex/filter.mjs","../../node_modules/framer-motion/dist/es/render/dom/value-types/defaults.mjs","../../node_modules/framer-motion/dist/es/render/dom/value-types/animatable-none.mjs","../../node_modules/framer-motion/dist/es/render/dom/value-types/test.mjs","../../node_modules/framer-motion/dist/es/render/dom/value-types/type-auto.mjs","../../node_modules/framer-motion/dist/es/render/dom/value-types/dimensions.mjs","../../node_modules/framer-motion/dist/es/render/dom/value-types/find.mjs","../../node_modules/framer-motion/dist/es/render/utils/resolve-dynamic-variants.mjs","../../node_modules/framer-motion/dist/es/render/utils/setters.mjs","../../node_modules/framer-motion/dist/es/value/use-will-change/is.mjs","../../node_modules/framer-motion/dist/es/animation/optimized-appear/data-id.mjs","../../node_modules/framer-motion/dist/es/utils/time-conversion.mjs","../../node_modules/framer-motion/dist/es/utils/use-instant-transition-state.mjs","../../node_modules/framer-motion/dist/es/easing/modifiers/mirror.mjs","../../node_modules/framer-motion/dist/es/easing/modifiers/reverse.mjs","../../node_modules/framer-motion/dist/es/easing/ease.mjs","../../node_modules/framer-motion/dist/es/utils/mix.mjs","../../node_modules/framer-motion/dist/es/utils/hsla-to-rgba.mjs","../../node_modules/framer-motion/dist/es/utils/mix-color.mjs","../../node_modules/framer-motion/dist/es/utils/mix-complex.mjs","../../node_modules/framer-motion/dist/es/utils/progress.mjs","../../node_modules/framer-motion/dist/es/utils/interpolate.mjs","../../node_modules/framer-motion/dist/es/utils/noop.mjs","../../node_modules/framer-motion/dist/es/easing/cubic-bezier.mjs","../../node_modules/framer-motion/dist/es/easing/circ.mjs","../../node_modules/framer-motion/dist/es/easing/back.mjs","../../node_modules/framer-motion/dist/es/easing/anticipate.mjs","../../node_modules/framer-motion/dist/es/animation/utils/easing.mjs","../../node_modules/framer-motion/dist/es/animation/legacy-popmotion/keyframes.mjs","../../node_modules/framer-motion/dist/es/animation/legacy-popmotion/find-spring.mjs","../../node_modules/framer-motion/dist/es/animation/legacy-popmotion/spring.mjs","../../node_modules/framer-motion/dist/es/animation/legacy-popmotion/decay.mjs","../../node_modules/framer-motion/dist/es/animation/legacy-popmotion/index.mjs","../../node_modules/framer-motion/dist/es/animation/waapi/easing.mjs","../../node_modules/framer-motion/dist/es/animation/waapi/index.mjs","../../node_modules/framer-motion/dist/es/animation/waapi/supports.mjs","../../node_modules/framer-motion/dist/es/animation/waapi/utils/get-final-keyframe.mjs","../../node_modules/framer-motion/dist/es/animation/waapi/create-accelerated-animation.mjs","../../node_modules/framer-motion/dist/es/utils/delay.mjs","../../node_modules/framer-motion/dist/es/animation/create-instant-animation.mjs","../../node_modules/framer-motion/dist/es/animation/legacy-popmotion/inertia.mjs","../../node_modules/framer-motion/dist/es/animation/utils/default-transitions.mjs","../../node_modules/framer-motion/dist/es/animation/utils/is-animatable.mjs","../../node_modules/framer-motion/dist/es/animation/utils/transitions.mjs","../../node_modules/framer-motion/dist/es/animation/utils/keyframes.mjs","../../node_modules/framer-motion/dist/es/animation/index.mjs","../../node_modules/framer-motion/dist/es/render/utils/animation.mjs","../../node_modules/framer-motion/dist/es/render/utils/animation-state.mjs","../../node_modules/framer-motion/dist/es/motion/features/animations.mjs","../../node_modules/framer-motion/dist/es/utils/distance.mjs","../../node_modules/framer-motion/dist/es/gestures/PanSession.mjs","../../node_modules/framer-motion/dist/es/projection/geometry/delta-calc.mjs","../../node_modules/framer-motion/dist/es/gestures/drag/utils/constraints.mjs","../../node_modules/framer-motion/dist/es/projection/geometry/models.mjs","../../node_modules/framer-motion/dist/es/projection/utils/each-axis.mjs","../../node_modules/framer-motion/dist/es/projection/geometry/conversion.mjs","../../node_modules/framer-motion/dist/es/projection/utils/has-transform.mjs","../../node_modules/framer-motion/dist/es/projection/geometry/delta-apply.mjs","../../node_modules/framer-motion/dist/es/projection/utils/measure.mjs","../../node_modules/framer-motion/dist/es/gestures/drag/VisualElementDragControls.mjs","../../node_modules/framer-motion/dist/es/gestures/drag/use-drag.mjs","../../node_modules/framer-motion/dist/es/gestures/use-pan-gesture.mjs","../../node_modules/framer-motion/dist/es/motion/features/drag.mjs","../../node_modules/framer-motion/dist/es/render/dom/utils/css-variables-conversion.mjs","../../node_modules/framer-motion/dist/es/render/dom/utils/unit-conversion.mjs","../../node_modules/framer-motion/dist/es/render/dom/utils/parse-dom-variant.mjs","../../node_modules/framer-motion/dist/es/utils/reduced-motion/state.mjs","../../node_modules/framer-motion/dist/es/utils/reduced-motion/index.mjs","../../node_modules/framer-motion/dist/es/render/utils/motion-values.mjs","../../node_modules/framer-motion/dist/es/render/VisualElement.mjs","../../node_modules/framer-motion/dist/es/render/dom/DOMVisualElement.mjs","../../node_modules/framer-motion/dist/es/render/html/HTMLVisualElement.mjs","../../node_modules/framer-motion/dist/es/render/svg/SVGVisualElement.mjs","../../node_modules/framer-motion/dist/es/render/dom/create-visual-element.mjs","../../node_modules/framer-motion/dist/es/projection/styles/scale-border-radius.mjs","../../node_modules/framer-motion/dist/es/projection/styles/scale-box-shadow.mjs","../../node_modules/framer-motion/dist/es/motion/features/layout/MeasureLayout.mjs","../../node_modules/framer-motion/dist/es/motion/features/layout/index.mjs","../../node_modules/framer-motion/dist/es/animation/animate.mjs","../../node_modules/framer-motion/dist/es/projection/animation/mix-values.mjs","../../node_modules/framer-motion/dist/es/projection/geometry/copy.mjs","../../node_modules/framer-motion/dist/es/projection/geometry/delta-remove.mjs","../../node_modules/framer-motion/dist/es/projection/geometry/utils.mjs","../../node_modules/framer-motion/dist/es/projection/shared/stack.mjs","../../node_modules/framer-motion/dist/es/projection/styles/transform.mjs","../../node_modules/framer-motion/dist/es/render/utils/compare-by-depth.mjs","../../node_modules/framer-motion/dist/es/render/utils/flat-tree.mjs","../../node_modules/framer-motion/dist/es/projection/node/create-projection-node.mjs","../../node_modules/framer-motion/dist/es/projection/node/DocumentProjectionNode.mjs","../../node_modules/framer-motion/dist/es/projection/node/HTMLProjectionNode.mjs","../../node_modules/framer-motion/dist/es/render/dom/motion.mjs"],"sourcesContent":["import { createContext } from 'react';\n\n/**\n * @public\n */\nconst MotionConfigContext = createContext({\n transformPagePoint: (p) => p,\n isStatic: false,\n reducedMotion: \"never\",\n});\n\nexport { MotionConfigContext };\n","import { createContext, useContext } from 'react';\n\nconst MotionContext = createContext({});\nfunction useVisualElementContext() {\n return useContext(MotionContext).visualElement;\n}\n\nexport { MotionContext, useVisualElementContext };\n","import { createContext } from 'react';\n\n/**\n * @public\n */\nconst PresenceContext = createContext(null);\n\nexport { PresenceContext };\n","const isBrowser = typeof document !== \"undefined\";\n\nexport { isBrowser };\n","import { useLayoutEffect, useEffect } from 'react';\nimport { isBrowser } from './is-browser.mjs';\n\nconst useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;\n\nexport { useIsomorphicLayoutEffect };\n","import { createContext } from 'react';\n\nconst LazyContext = createContext({ strict: false });\n\nexport { LazyContext };\n","import { useContext, useRef, useEffect } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\nimport { useVisualElementContext } from '../../context/MotionContext/index.mjs';\nimport { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';\nimport { LazyContext } from '../../context/LazyContext.mjs';\nimport { MotionConfigContext } from '../../context/MotionConfigContext.mjs';\n\nfunction useVisualElement(Component, visualState, props, createVisualElement) {\n const parent = useVisualElementContext();\n const lazyContext = useContext(LazyContext);\n const presenceContext = useContext(PresenceContext);\n const reducedMotionConfig = useContext(MotionConfigContext).reducedMotion;\n const visualElementRef = useRef();\n /**\n * If we haven't preloaded a renderer, check to see if we have one lazy-loaded\n */\n createVisualElement = createVisualElement || lazyContext.renderer;\n if (!visualElementRef.current && createVisualElement) {\n visualElementRef.current = createVisualElement(Component, {\n visualState,\n parent,\n props,\n presenceId: presenceContext ? presenceContext.id : undefined,\n blockInitialAnimation: presenceContext\n ? presenceContext.initial === false\n : false,\n reducedMotionConfig,\n });\n }\n const visualElement = visualElementRef.current;\n useIsomorphicLayoutEffect(() => {\n visualElement && visualElement.render();\n });\n /**\n * Ideally this function would always run in a useEffect.\n *\n * However, if we have optimised appear animations to handoff from,\n * it needs to happen synchronously to ensure there's no flash of\n * incorrect styles in the event of a hydration error.\n *\n * So if we detect a situtation where optimised appear animations\n * are running, we use useLayoutEffect to trigger animations.\n */\n const useAnimateChangesEffect = window.HandoffAppearAnimations\n ? useIsomorphicLayoutEffect\n : useEffect;\n useAnimateChangesEffect(() => {\n if (visualElement && visualElement.animationState) {\n visualElement.animationState.animateChanges();\n }\n });\n return visualElement;\n}\n\nexport { useVisualElement };\n","function isRefObject(ref) {\n return (typeof ref === \"object\" &&\n Object.prototype.hasOwnProperty.call(ref, \"current\"));\n}\n\nexport { isRefObject };\n","import { useCallback } from 'react';\nimport { isRefObject } from '../../utils/is-ref-object.mjs';\n\n/**\n * Creates a ref function that, when called, hydrates the provided\n * external ref and VisualElement.\n */\nfunction useMotionRef(visualState, visualElement, externalRef) {\n return useCallback((instance) => {\n instance && visualState.mount && visualState.mount(instance);\n if (visualElement) {\n instance\n ? visualElement.mount(instance)\n : visualElement.unmount();\n }\n if (externalRef) {\n if (typeof externalRef === \"function\") {\n externalRef(instance);\n }\n else if (isRefObject(externalRef)) {\n externalRef.current = instance;\n }\n }\n }, \n /**\n * Only pass a new ref callback to React if we've received a visual element\n * factory. Otherwise we'll be mounting/remounting every time externalRef\n * or other dependencies change.\n */\n [visualElement]);\n}\n\nexport { useMotionRef };\n","/**\n * Decides if the supplied variable is variant label\n */\nfunction isVariantLabel(v) {\n return typeof v === \"string\" || Array.isArray(v);\n}\n\nexport { isVariantLabel };\n","function isAnimationControls(v) {\n return typeof v === \"object\" && typeof v.start === \"function\";\n}\n\nexport { isAnimationControls };\n","import { isAnimationControls } from '../../animation/utils/is-animation-controls.mjs';\nimport { isVariantLabel } from './is-variant-label.mjs';\n\nconst variantProps = [\n \"initial\",\n \"animate\",\n \"exit\",\n \"whileHover\",\n \"whileDrag\",\n \"whileTap\",\n \"whileFocus\",\n \"whileInView\",\n];\nfunction isControllingVariants(props) {\n return (isAnimationControls(props.animate) ||\n variantProps.some((name) => isVariantLabel(props[name])));\n}\nfunction isVariantNode(props) {\n return Boolean(isControllingVariants(props) || props.variants);\n}\n\nexport { isControllingVariants, isVariantNode };\n","import { isVariantLabel } from '../../render/utils/is-variant-label.mjs';\nimport { isControllingVariants } from '../../render/utils/is-controlling-variants.mjs';\n\nfunction getCurrentTreeVariants(props, context) {\n if (isControllingVariants(props)) {\n const { initial, animate } = props;\n return {\n initial: initial === false || isVariantLabel(initial)\n ? initial\n : undefined,\n animate: isVariantLabel(animate) ? animate : undefined,\n };\n }\n return props.inherit !== false ? context : {};\n}\n\nexport { getCurrentTreeVariants };\n","import { useContext, useMemo } from 'react';\nimport { MotionContext } from './index.mjs';\nimport { getCurrentTreeVariants } from './utils.mjs';\n\nfunction useCreateMotionContext(props) {\n const { initial, animate } = getCurrentTreeVariants(props, useContext(MotionContext));\n return useMemo(() => ({ initial, animate }), [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]);\n}\nfunction variantLabelsAsDependency(prop) {\n return Array.isArray(prop) ? prop.join(\" \") : prop;\n}\n\nexport { useCreateMotionContext };\n","const createDefinition = (propNames) => ({\n isEnabled: (props) => propNames.some((name) => !!props[name]),\n});\nconst featureDefinitions = {\n measureLayout: createDefinition([\"layout\", \"layoutId\", \"drag\"]),\n animation: createDefinition([\n \"animate\",\n \"exit\",\n \"variants\",\n \"whileHover\",\n \"whileTap\",\n \"whileFocus\",\n \"whileDrag\",\n \"whileInView\",\n ]),\n exit: createDefinition([\"exit\"]),\n drag: createDefinition([\"drag\", \"dragControls\"]),\n focus: createDefinition([\"whileFocus\"]),\n hover: createDefinition([\"whileHover\", \"onHoverStart\", \"onHoverEnd\"]),\n tap: createDefinition([\"whileTap\", \"onTap\", \"onTapStart\", \"onTapCancel\"]),\n pan: createDefinition([\n \"onPan\",\n \"onPanStart\",\n \"onPanSessionStart\",\n \"onPanEnd\",\n ]),\n inView: createDefinition([\n \"whileInView\",\n \"onViewportEnter\",\n \"onViewportLeave\",\n ]),\n};\n\nexport { featureDefinitions };\n","import { featureDefinitions } from './definitions.mjs';\n\nfunction loadFeatures(features) {\n for (const key in features) {\n if (key === \"projectionNodeConstructor\") {\n featureDefinitions.projectionNodeConstructor = features[key];\n }\n else {\n featureDefinitions[key].Component = features[key];\n }\n }\n}\n\nexport { loadFeatures };\n","import { useRef } from 'react';\n\n/**\n * Creates a constant value over the lifecycle of a component.\n *\n * Even if `useMemo` is provided an empty array as its final argument, it doesn't offer\n * a guarantee that it won't re-run for performance reasons later on. By using `useConstant`\n * you can ensure that initialisers don't execute twice or more.\n */\nfunction useConstant(init) {\n const ref = useRef(null);\n if (ref.current === null) {\n ref.current = init();\n }\n return ref.current;\n}\n\nexport { useConstant };\n","/**\n * This should only ever be modified on the client otherwise it'll\n * persist through server requests. If we need instanced states we\n * could lazy-init via root.\n */\nconst globalProjectionState = {\n /**\n * Global flag as to whether the tree has animated since the last time\n * we resized the window\n */\n hasAnimatedSinceResize: true,\n /**\n * We set this to true once, on the first update. Any nodes added to the tree beyond that\n * update will be given a `data-projection-id` attribute.\n */\n hasEverUpdated: false,\n};\n\nexport { globalProjectionState };\n","import { useConstant } from '../../utils/use-constant.mjs';\nimport { globalProjectionState } from './state.mjs';\n\nlet id = 1;\nfunction useProjectionId() {\n return useConstant(() => {\n if (globalProjectionState.hasEverUpdated) {\n return id++;\n }\n });\n}\n\nexport { useProjectionId };\n","import { createContext } from 'react';\n\nconst LayoutGroupContext = createContext({});\n\nexport { LayoutGroupContext };\n","import React__default from 'react';\n\nclass VisualElementHandler extends React__default.Component {\n /**\n * Update visual element props as soon as we know this update is going to be commited.\n */\n getSnapshotBeforeUpdate() {\n const { visualElement, props } = this.props;\n if (visualElement)\n visualElement.setProps(props);\n return null;\n }\n componentDidUpdate() { }\n render() {\n return this.props.children;\n }\n}\n\nexport { VisualElementHandler };\n","import { createContext } from 'react';\n\n/**\n * Internal, exported only for usage in Framer\n */\nconst SwitchLayoutGroupContext = createContext({});\n\nexport { SwitchLayoutGroupContext };\n","const motionComponentSymbol = Symbol.for(\"motionComponentSymbol\");\n\nexport { motionComponentSymbol };\n","import * as React from 'react';\nimport { forwardRef, useContext } from 'react';\nimport { MotionConfigContext } from '../context/MotionConfigContext.mjs';\nimport { MotionContext } from '../context/MotionContext/index.mjs';\nimport { useVisualElement } from './utils/use-visual-element.mjs';\nimport { useMotionRef } from './utils/use-motion-ref.mjs';\nimport { useCreateMotionContext } from '../context/MotionContext/create.mjs';\nimport { featureDefinitions } from './features/definitions.mjs';\nimport { loadFeatures } from './features/load-features.mjs';\nimport { isBrowser } from '../utils/is-browser.mjs';\nimport { useProjectionId } from '../projection/node/id.mjs';\nimport { LayoutGroupContext } from '../context/LayoutGroupContext.mjs';\nimport { VisualElementHandler } from './utils/VisualElementHandler.mjs';\nimport { LazyContext } from '../context/LazyContext.mjs';\nimport { SwitchLayoutGroupContext } from '../context/SwitchLayoutGroupContext.mjs';\nimport { motionComponentSymbol } from './utils/symbol.mjs';\n\n/**\n * Create a `motion` component.\n *\n * This function accepts a Component argument, which can be either a string (ie \"div\"\n * for `motion.div`), or an actual React component.\n *\n * Alongside this is a config option which provides a way of rendering the provided\n * component \"offline\", or outside the React render cycle.\n */\nfunction createMotionComponent({ preloadedFeatures, createVisualElement, projectionNodeConstructor, useRender, useVisualState, Component, }) {\n preloadedFeatures && loadFeatures(preloadedFeatures);\n function MotionComponent(props, externalRef) {\n const configAndProps = {\n ...useContext(MotionConfigContext),\n ...props,\n layoutId: useLayoutId(props),\n };\n const { isStatic } = configAndProps;\n let features = null;\n const context = useCreateMotionContext(props);\n /**\n * Create a unique projection ID for this component. If a new component is added\n * during a layout animation we'll use this to query the DOM and hydrate its ref early, allowing\n * us to measure it as soon as any layout effect flushes pending layout animations.\n *\n * Performance note: It'd be better not to have to search the DOM for these elements.\n * For newly-entering components it could be enough to only correct treeScale, in which\n * case we could mount in a scale-correction mode. This wouldn't be enough for\n * shared element transitions however. Perhaps for those we could revert to a root node\n * that gets forceRendered and layout animations are triggered on its layout effect.\n */\n const projectionId = isStatic ? undefined : useProjectionId();\n /**\n *\n */\n const visualState = useVisualState(props, isStatic);\n if (!isStatic && isBrowser) {\n /**\n * Create a VisualElement for this component. A VisualElement provides a common\n * interface to renderer-specific APIs (ie DOM/Three.js etc) as well as\n * providing a way of rendering to these APIs outside of the React render loop\n * for more performant animations and interactions\n */\n context.visualElement = useVisualElement(Component, visualState, configAndProps, createVisualElement);\n /**\n * Load Motion gesture and animation features. These are rendered as renderless\n * components so each feature can optionally make use of React lifecycle methods.\n */\n const lazyStrictMode = useContext(LazyContext).strict;\n const initialLayoutGroupConfig = useContext(SwitchLayoutGroupContext);\n if (context.visualElement) {\n features = context.visualElement.loadFeatures(\n // Note: Pass the full new combined props to correctly re-render dynamic feature components.\n configAndProps, lazyStrictMode, preloadedFeatures, projectionId, projectionNodeConstructor ||\n featureDefinitions.projectionNodeConstructor, initialLayoutGroupConfig);\n }\n }\n /**\n * The mount order and hierarchy is specific to ensure our element ref\n * is hydrated by the time features fire their effects.\n */\n return (React.createElement(VisualElementHandler, { visualElement: context.visualElement, props: configAndProps },\n features,\n React.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement))));\n }\n const ForwardRefComponent = forwardRef(MotionComponent);\n ForwardRefComponent[motionComponentSymbol] = Component;\n return ForwardRefComponent;\n}\nfunction useLayoutId({ layoutId }) {\n const layoutGroupId = useContext(LayoutGroupContext).id;\n return layoutGroupId && layoutId !== undefined\n ? layoutGroupId + \"-\" + layoutId\n : layoutId;\n}\n\nexport { createMotionComponent };\n","import { createMotionComponent } from '../../motion/index.mjs';\n\n/**\n * Convert any React component into a `motion` component. The provided component\n * **must** use `React.forwardRef` to the underlying DOM component you want to animate.\n *\n * ```jsx\n * const Component = React.forwardRef((props, ref) => {\n * return
\n * })\n *\n * const MotionComponent = motion(Component)\n * ```\n *\n * @public\n */\nfunction createMotionProxy(createConfig) {\n function custom(Component, customMotionComponentConfig = {}) {\n return createMotionComponent(createConfig(Component, customMotionComponentConfig));\n }\n if (typeof Proxy === \"undefined\") {\n return custom;\n }\n /**\n * A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc.\n * Rather than generating them anew every render.\n */\n const componentCache = new Map();\n return new Proxy(custom, {\n /**\n * Called when `motion` is referenced with a prop: `motion.div`, `motion.input` etc.\n * The prop name is passed through as `key` and we can use that to generate a `motion`\n * DOM component with that name.\n */\n get: (_target, key) => {\n /**\n * If this element doesn't exist in the component cache, create it and cache.\n */\n if (!componentCache.has(key)) {\n componentCache.set(key, custom(key));\n }\n return componentCache.get(key);\n },\n });\n}\n\nexport { createMotionProxy };\n","/**\n * We keep these listed seperately as we use the lowercase tag names as part\n * of the runtime bundle to detect SVG components\n */\nconst lowercaseSVGElements = [\n \"animate\",\n \"circle\",\n \"defs\",\n \"desc\",\n \"ellipse\",\n \"g\",\n \"image\",\n \"line\",\n \"filter\",\n \"marker\",\n \"mask\",\n \"metadata\",\n \"path\",\n \"pattern\",\n \"polygon\",\n \"polyline\",\n \"rect\",\n \"stop\",\n \"switch\",\n \"symbol\",\n \"svg\",\n \"text\",\n \"tspan\",\n \"use\",\n \"view\",\n];\n\nexport { lowercaseSVGElements };\n","import { lowercaseSVGElements } from '../../svg/lowercase-elements.mjs';\n\nfunction isSVGComponent(Component) {\n if (\n /**\n * If it's not a string, it's a custom React component. Currently we only support\n * HTML custom React components.\n */\n typeof Component !== \"string\" ||\n /**\n * If it contains a dash, the element is a custom HTML webcomponent.\n */\n Component.includes(\"-\")) {\n return false;\n }\n else if (\n /**\n * If it's in our list of lowercase SVG tags, it's an SVG component\n */\n lowercaseSVGElements.indexOf(Component) > -1 ||\n /**\n * If it contains a capital letter, it's an SVG component\n */\n /[A-Z]/.test(Component)) {\n return true;\n }\n return false;\n}\n\nexport { isSVGComponent };\n","const scaleCorrectors = {};\nfunction addScaleCorrector(correctors) {\n Object.assign(scaleCorrectors, correctors);\n}\n\nexport { addScaleCorrector, scaleCorrectors };\n","/**\n * Generate a list of every possible transform key.\n */\nconst transformPropOrder = [\n \"transformPerspective\",\n \"x\",\n \"y\",\n \"z\",\n \"translateX\",\n \"translateY\",\n \"translateZ\",\n \"scale\",\n \"scaleX\",\n \"scaleY\",\n \"rotate\",\n \"rotateX\",\n \"rotateY\",\n \"rotateZ\",\n \"skew\",\n \"skewX\",\n \"skewY\",\n];\n/**\n * A quick lookup for transform props.\n */\nconst transformProps = new Set(transformPropOrder);\n\nexport { transformPropOrder, transformProps };\n","import { scaleCorrectors } from '../../projection/styles/scale-correction.mjs';\nimport { transformProps } from '../../render/html/utils/transform.mjs';\n\nfunction isForcedMotionValue(key, { layout, layoutId }) {\n return (transformProps.has(key) ||\n key.startsWith(\"origin\") ||\n ((layout || layoutId !== undefined) &&\n (!!scaleCorrectors[key] || key === \"opacity\")));\n}\n\nexport { isForcedMotionValue };\n","const isMotionValue = (value) => !!(value === null || value === void 0 ? void 0 : value.getVelocity);\n\nexport { isMotionValue };\n","import { transformPropOrder } from './transform.mjs';\n\nconst translateAlias = {\n x: \"translateX\",\n y: \"translateY\",\n z: \"translateZ\",\n transformPerspective: \"perspective\",\n};\n/**\n * A function to use with Array.sort to sort transform keys by their default order.\n */\nconst sortTransformProps = (a, b) => transformPropOrder.indexOf(a) - transformPropOrder.indexOf(b);\n/**\n * Build a CSS transform style from individual x/y/scale etc properties.\n *\n * This outputs with a default order of transforms/scales/rotations, this can be customised by\n * providing a transformTemplate function.\n */\nfunction buildTransform({ transform, transformKeys, }, { enableHardwareAcceleration = true, allowTransformNone = true, }, transformIsDefault, transformTemplate) {\n // The transform string we're going to build into.\n let transformString = \"\";\n // Transform keys into their default order - this will determine the output order.\n transformKeys.sort(sortTransformProps);\n // Loop over each transform and build them into transformString\n for (const key of transformKeys) {\n transformString += `${translateAlias[key] || key}(${transform[key]}) `;\n }\n if (enableHardwareAcceleration && !transform.z) {\n transformString += \"translateZ(0)\";\n }\n transformString = transformString.trim();\n // If we have a custom `transform` template, pass our transform values and\n // generated transformString to that before returning\n if (transformTemplate) {\n transformString = transformTemplate(transform, transformIsDefault ? \"\" : transformString);\n }\n else if (allowTransformNone && transformIsDefault) {\n transformString = \"none\";\n }\n return transformString;\n}\n\nexport { buildTransform };\n","/**\n * Returns true if the provided key is a CSS variable\n */\nfunction isCSSVariable(key) {\n return key.startsWith(\"--\");\n}\n\nexport { isCSSVariable };\n","/**\n * Provided a value and a ValueType, returns the value as that value type.\n */\nconst getValueAsType = (value, type) => {\n return type && typeof value === \"number\"\n ? type.transform(value)\n : value;\n};\n\nexport { getValueAsType };\n","const clamp = (min, max, v) => Math.min(Math.max(v, min), max);\n\nexport { clamp };\n","import { clamp } from '../../../utils/clamp.mjs';\n\nconst number = {\n test: (v) => typeof v === \"number\",\n parse: parseFloat,\n transform: (v) => v,\n};\nconst alpha = {\n ...number,\n transform: (v) => clamp(0, 1, v),\n};\nconst scale = {\n ...number,\n default: 1,\n};\n\nexport { alpha, number, scale };\n","/**\n * TODO: When we move from string as a source of truth to data models\n * everything in this folder should probably be referred to as models vs types\n */\n// If this number is a decimal, make it just five decimal places\n// to avoid exponents\nconst sanitize = (v) => Math.round(v * 100000) / 100000;\nconst floatRegex = /(-)?([\\d]*\\.?[\\d])+/g;\nconst colorRegex = /(#[0-9a-f]{3,8}|(rgb|hsl)a?\\((-?[\\d\\.]+%?[,\\s]+){2}(-?[\\d\\.]+%?)\\s*[\\,\\/]?\\s*[\\d\\.]*%?\\))/gi;\nconst singleColorRegex = /^(#[0-9a-f]{3,8}|(rgb|hsl)a?\\((-?[\\d\\.]+%?[,\\s]+){2}(-?[\\d\\.]+%?)\\s*[\\,\\/]?\\s*[\\d\\.]*%?\\))$/i;\nfunction isString(v) {\n return typeof v === \"string\";\n}\n\nexport { colorRegex, floatRegex, isString, sanitize, singleColorRegex };\n","import { isString } from '../utils.mjs';\n\nconst createUnitType = (unit) => ({\n test: (v) => isString(v) && v.endsWith(unit) && v.split(\" \").length === 1,\n parse: parseFloat,\n transform: (v) => `${v}${unit}`,\n});\nconst degrees = createUnitType(\"deg\");\nconst percent = createUnitType(\"%\");\nconst px = createUnitType(\"px\");\nconst vh = createUnitType(\"vh\");\nconst vw = createUnitType(\"vw\");\nconst progressPercentage = {\n ...percent,\n parse: (v) => percent.parse(v) / 100,\n transform: (v) => percent.transform(v * 100),\n};\n\nexport { degrees, percent, progressPercentage, px, vh, vw };\n","import { number } from '../../../value/types/numbers/index.mjs';\n\nconst int = {\n ...number,\n transform: Math.round,\n};\n\nexport { int };\n","import { scale, alpha } from '../../../value/types/numbers/index.mjs';\nimport { px, degrees, progressPercentage } from '../../../value/types/numbers/units.mjs';\nimport { int } from './type-int.mjs';\n\nconst numberValueTypes = {\n // Border props\n borderWidth: px,\n borderTopWidth: px,\n borderRightWidth: px,\n borderBottomWidth: px,\n borderLeftWidth: px,\n borderRadius: px,\n radius: px,\n borderTopLeftRadius: px,\n borderTopRightRadius: px,\n borderBottomRightRadius: px,\n borderBottomLeftRadius: px,\n // Positioning props\n width: px,\n maxWidth: px,\n height: px,\n maxHeight: px,\n size: px,\n top: px,\n right: px,\n bottom: px,\n left: px,\n // Spacing props\n padding: px,\n paddingTop: px,\n paddingRight: px,\n paddingBottom: px,\n paddingLeft: px,\n margin: px,\n marginTop: px,\n marginRight: px,\n marginBottom: px,\n marginLeft: px,\n // Transform props\n rotate: degrees,\n rotateX: degrees,\n rotateY: degrees,\n rotateZ: degrees,\n scale,\n scaleX: scale,\n scaleY: scale,\n scaleZ: scale,\n skew: degrees,\n skewX: degrees,\n skewY: degrees,\n distance: px,\n translateX: px,\n translateY: px,\n translateZ: px,\n x: px,\n y: px,\n z: px,\n perspective: px,\n transformPerspective: px,\n opacity: alpha,\n originX: progressPercentage,\n originY: progressPercentage,\n originZ: px,\n // Misc\n zIndex: int,\n // SVG\n fillOpacity: alpha,\n strokeOpacity: alpha,\n numOctaves: int,\n};\n\nexport { numberValueTypes };\n","import { buildTransform } from './build-transform.mjs';\nimport { isCSSVariable } from '../../dom/utils/is-css-variable.mjs';\nimport { transformProps } from './transform.mjs';\nimport { getValueAsType } from '../../dom/value-types/get-as-type.mjs';\nimport { numberValueTypes } from '../../dom/value-types/number.mjs';\n\nfunction buildHTMLStyles(state, latestValues, options, transformTemplate) {\n const { style, vars, transform, transformKeys, transformOrigin } = state;\n transformKeys.length = 0;\n // Track whether we encounter any transform or transformOrigin values.\n let hasTransform = false;\n let hasTransformOrigin = false;\n // Does the calculated transform essentially equal \"none\"?\n let transformIsNone = true;\n /**\n * Loop over all our latest animated values and decide whether to handle them\n * as a style or CSS variable.\n *\n * Transforms and transform origins are kept seperately for further processing.\n */\n for (const key in latestValues) {\n const value = latestValues[key];\n /**\n * If this is a CSS variable we don't do any further processing.\n */\n if (isCSSVariable(key)) {\n vars[key] = value;\n continue;\n }\n // Convert the value to its default value type, ie 0 -> \"0px\"\n const valueType = numberValueTypes[key];\n const valueAsType = getValueAsType(value, valueType);\n if (transformProps.has(key)) {\n // If this is a transform, flag to enable further transform processing\n hasTransform = true;\n transform[key] = valueAsType;\n transformKeys.push(key);\n // If we already know we have a non-default transform, early return\n if (!transformIsNone)\n continue;\n // Otherwise check to see if this is a default transform\n if (value !== (valueType.default || 0))\n transformIsNone = false;\n }\n else if (key.startsWith(\"origin\")) {\n // If this is a transform origin, flag and enable further transform-origin processing\n hasTransformOrigin = true;\n transformOrigin[key] = valueAsType;\n }\n else {\n style[key] = valueAsType;\n }\n }\n if (!latestValues.transform) {\n if (hasTransform || transformTemplate) {\n style.transform = buildTransform(state, options, transformIsNone, transformTemplate);\n }\n else if (style.transform) {\n /**\n * If we have previously created a transform but currently don't have any,\n * reset transform style to none.\n */\n style.transform = \"none\";\n }\n }\n /**\n * Build a transformOrigin style. Uses the same defaults as the browser for\n * undefined origins.\n */\n if (hasTransformOrigin) {\n const { originX = \"50%\", originY = \"50%\", originZ = 0, } = transformOrigin;\n style.transformOrigin = `${originX} ${originY} ${originZ}`;\n }\n}\n\nexport { buildHTMLStyles };\n","const createHtmlRenderState = () => ({\n style: {},\n transform: {},\n transformKeys: [],\n transformOrigin: {},\n vars: {},\n});\n\nexport { createHtmlRenderState };\n","import { useMemo } from 'react';\nimport { isForcedMotionValue } from '../../motion/utils/is-forced-motion-value.mjs';\nimport { isMotionValue } from '../../value/utils/is-motion-value.mjs';\nimport { buildHTMLStyles } from './utils/build-styles.mjs';\nimport { createHtmlRenderState } from './utils/create-render-state.mjs';\n\nfunction copyRawValuesOnly(target, source, props) {\n for (const key in source) {\n if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {\n target[key] = source[key];\n }\n }\n}\nfunction useInitialMotionValues({ transformTemplate }, visualState, isStatic) {\n return useMemo(() => {\n const state = createHtmlRenderState();\n buildHTMLStyles(state, visualState, { enableHardwareAcceleration: !isStatic }, transformTemplate);\n return Object.assign({}, state.vars, state.style);\n }, [visualState]);\n}\nfunction useStyle(props, visualState, isStatic) {\n const styleProp = props.style || {};\n const style = {};\n /**\n * Copy non-Motion Values straight into style\n */\n copyRawValuesOnly(style, styleProp, props);\n Object.assign(style, useInitialMotionValues(props, visualState, isStatic));\n return props.transformValues ? props.transformValues(style) : style;\n}\nfunction useHTMLProps(props, visualState, isStatic) {\n // The `any` isn't ideal but it is the type of createElement props argument\n const htmlProps = {};\n const style = useStyle(props, visualState, isStatic);\n if (props.drag && props.dragListener !== false) {\n // Disable the ghost element when a user drags\n htmlProps.draggable = false;\n // Disable text selection\n style.userSelect =\n style.WebkitUserSelect =\n style.WebkitTouchCallout =\n \"none\";\n // Disable scrolling on the draggable direction\n style.touchAction =\n props.drag === true\n ? \"none\"\n : `pan-${props.drag === \"x\" ? \"y\" : \"x\"}`;\n }\n htmlProps.style = style;\n return htmlProps;\n}\n\nexport { copyRawValuesOnly, useHTMLProps };\n","/**\n * A list of all valid MotionProps.\n *\n * @privateRemarks\n * This doesn't throw if a `MotionProp` name is missing - it should.\n */\nconst validMotionProps = new Set([\n \"animate\",\n \"exit\",\n \"variants\",\n \"initial\",\n \"style\",\n \"values\",\n \"variants\",\n \"transition\",\n \"transformTemplate\",\n \"transformValues\",\n \"custom\",\n \"inherit\",\n \"onLayoutAnimationStart\",\n \"onLayoutAnimationComplete\",\n \"onLayoutMeasure\",\n \"onBeforeLayoutMeasure\",\n \"onAnimationStart\",\n \"onAnimationComplete\",\n \"onUpdate\",\n \"onDragStart\",\n \"onDrag\",\n \"onDragEnd\",\n \"onMeasureDragConstraints\",\n \"onDirectionLock\",\n \"onDragTransitionEnd\",\n \"_dragX\",\n \"_dragY\",\n \"onHoverStart\",\n \"onHoverEnd\",\n \"onViewportEnter\",\n \"onViewportLeave\",\n \"viewport\",\n]);\n/**\n * Check whether a prop name is a valid `MotionProp` key.\n *\n * @param key - Name of the property to check\n * @returns `true` is key is a valid `MotionProp`.\n *\n * @public\n */\nfunction isValidMotionProp(key) {\n return (key.startsWith(\"while\") ||\n (key.startsWith(\"drag\") && key !== \"draggable\") ||\n key.startsWith(\"layout\") ||\n key.startsWith(\"onTap\") ||\n key.startsWith(\"onPan\") ||\n validMotionProps.has(key));\n}\n\nexport { isValidMotionProp };\n","import { isValidMotionProp } from '../../../motion/utils/valid-prop.mjs';\n\nlet shouldForward = (key) => !isValidMotionProp(key);\nfunction loadExternalIsValidProp(isValidProp) {\n if (!isValidProp)\n return;\n // Explicitly filter our events\n shouldForward = (key) => key.startsWith(\"on\") ? !isValidMotionProp(key) : isValidProp(key);\n}\n/**\n * Emotion and Styled Components both allow users to pass through arbitrary props to their components\n * to dynamically generate CSS. They both use the `@emotion/is-prop-valid` package to determine which\n * of these should be passed to the underlying DOM node.\n *\n * However, when styling a Motion component `styled(motion.div)`, both packages pass through *all* props\n * as it's seen as an arbitrary component rather than a DOM node. Motion only allows arbitrary props\n * passed through the `custom` prop so it doesn't *need* the payload or computational overhead of\n * `@emotion/is-prop-valid`, however to fix this problem we need to use it.\n *\n * By making it an optionalDependency we can offer this functionality only in the situations where it's\n * actually required.\n */\ntry {\n /**\n * We attempt to import this package but require won't be defined in esm environments, in that case\n * isPropValid will have to be provided via `MotionContext`. In a 6.0.0 this should probably be removed\n * in favour of explicit injection.\n */\n loadExternalIsValidProp(require(\"@emotion/is-prop-valid\").default);\n}\ncatch (_a) {\n // We don't need to actually do anything here - the fallback is the existing `isPropValid`.\n}\nfunction filterProps(props, isDom, forwardMotionProps) {\n const filteredProps = {};\n for (const key in props) {\n /**\n * values is considered a valid prop by Emotion, so if it's present\n * this will be rendered out to the DOM unless explicitly filtered.\n *\n * We check the type as it could be used with the `feColorMatrix`\n * element, which we support.\n */\n if (key === \"values\" && typeof props.values === \"object\")\n continue;\n if (shouldForward(key) ||\n (forwardMotionProps === true && isValidMotionProp(key)) ||\n (!isDom && !isValidMotionProp(key)) ||\n // If trying to use native HTML drag events, forward drag listeners\n (props[\"draggable\"] && key.startsWith(\"onDrag\"))) {\n filteredProps[key] = props[key];\n }\n }\n return filteredProps;\n}\n\nexport { filterProps, loadExternalIsValidProp };\n","import { px } from '../../../value/types/numbers/units.mjs';\n\nfunction calcOrigin(origin, offset, size) {\n return typeof origin === \"string\"\n ? origin\n : px.transform(offset + size * origin);\n}\n/**\n * The SVG transform origin defaults are different to CSS and is less intuitive,\n * so we use the measured dimensions of the SVG to reconcile these.\n */\nfunction calcSVGTransformOrigin(dimensions, originX, originY) {\n const pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width);\n const pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height);\n return `${pxOriginX} ${pxOriginY}`;\n}\n\nexport { calcSVGTransformOrigin };\n","import { px } from '../../../value/types/numbers/units.mjs';\n\nconst dashKeys = {\n offset: \"stroke-dashoffset\",\n array: \"stroke-dasharray\",\n};\nconst camelKeys = {\n offset: \"strokeDashoffset\",\n array: \"strokeDasharray\",\n};\n/**\n * Build SVG path properties. Uses the path's measured length to convert\n * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset\n * and stroke-dasharray attributes.\n *\n * This function is mutative to reduce per-frame GC.\n */\nfunction buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true) {\n // Normalise path length by setting SVG attribute pathLength to 1\n attrs.pathLength = 1;\n // We use dash case when setting attributes directly to the DOM node and camel case\n // when defining props on a React component.\n const keys = useDashCase ? dashKeys : camelKeys;\n // Build the dash offset\n attrs[keys.offset] = px.transform(-offset);\n // Build the dash array\n const pathLength = px.transform(length);\n const pathSpacing = px.transform(spacing);\n attrs[keys.array] = `${pathLength} ${pathSpacing}`;\n}\n\nexport { buildSVGPath };\n","import { buildHTMLStyles } from '../../html/utils/build-styles.mjs';\nimport { calcSVGTransformOrigin } from './transform-origin.mjs';\nimport { buildSVGPath } from './path.mjs';\n\n/**\n * Build SVG visual attrbutes, like cx and style.transform\n */\nfunction buildSVGAttrs(state, { attrX, attrY, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0, \n// This is object creation, which we try to avoid per-frame.\n...latest }, options, isSVGTag, transformTemplate) {\n buildHTMLStyles(state, latest, options, transformTemplate);\n /**\n * For svg tags we just want to make sure viewBox is animatable and treat all the styles\n * as normal HTML tags.\n */\n if (isSVGTag) {\n if (state.style.viewBox) {\n state.attrs.viewBox = state.style.viewBox;\n }\n return;\n }\n state.attrs = state.style;\n state.style = {};\n const { attrs, style, dimensions } = state;\n /**\n * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs\n * and copy it into style.\n */\n if (attrs.transform) {\n if (dimensions)\n style.transform = attrs.transform;\n delete attrs.transform;\n }\n // Parse transformOrigin\n if (dimensions &&\n (originX !== undefined || originY !== undefined || style.transform)) {\n style.transformOrigin = calcSVGTransformOrigin(dimensions, originX !== undefined ? originX : 0.5, originY !== undefined ? originY : 0.5);\n }\n // Treat x/y not as shortcuts but as actual attributes\n if (attrX !== undefined)\n attrs.x = attrX;\n if (attrY !== undefined)\n attrs.y = attrY;\n // Build SVG path if one has been defined\n if (pathLength !== undefined) {\n buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false);\n }\n}\n\nexport { buildSVGAttrs };\n","import { createHtmlRenderState } from '../../html/utils/create-render-state.mjs';\n\nconst createSvgRenderState = () => ({\n ...createHtmlRenderState(),\n attrs: {},\n});\n\nexport { createSvgRenderState };\n","const isSVGTag = (tag) => typeof tag === \"string\" && tag.toLowerCase() === \"svg\";\n\nexport { isSVGTag };\n","import { useMemo } from 'react';\nimport { copyRawValuesOnly } from '../html/use-props.mjs';\nimport { buildSVGAttrs } from './utils/build-attrs.mjs';\nimport { createSvgRenderState } from './utils/create-render-state.mjs';\nimport { isSVGTag } from './utils/is-svg-tag.mjs';\n\nfunction useSVGProps(props, visualState, _isStatic, Component) {\n const visualProps = useMemo(() => {\n const state = createSvgRenderState();\n buildSVGAttrs(state, visualState, { enableHardwareAcceleration: false }, isSVGTag(Component), props.transformTemplate);\n return {\n ...state.attrs,\n style: { ...state.style },\n };\n }, [visualState]);\n if (props.style) {\n const rawStyles = {};\n copyRawValuesOnly(rawStyles, props.style, props);\n visualProps.style = { ...rawStyles, ...visualProps.style };\n }\n return visualProps;\n}\n\nexport { useSVGProps };\n","import { useMemo, createElement } from 'react';\nimport { useHTMLProps } from '../html/use-props.mjs';\nimport { filterProps } from './utils/filter-props.mjs';\nimport { isSVGComponent } from './utils/is-svg-component.mjs';\nimport { useSVGProps } from '../svg/use-props.mjs';\nimport { isMotionValue } from '../../value/utils/is-motion-value.mjs';\n\nfunction createUseRender(forwardMotionProps = false) {\n const useRender = (Component, props, projectionId, ref, { latestValues }, isStatic) => {\n const useVisualProps = isSVGComponent(Component)\n ? useSVGProps\n : useHTMLProps;\n const visualProps = useVisualProps(props, latestValues, isStatic, Component);\n const filteredProps = filterProps(props, typeof Component === \"string\", forwardMotionProps);\n const elementProps = {\n ...filteredProps,\n ...visualProps,\n ref,\n };\n /**\n * If component has been handed a motion value as its child,\n * memoise its initial value and render that. Subsequent updates\n * will be handled by the onChange handler\n */\n const { children } = props;\n const renderedChildren = useMemo(() => (isMotionValue(children) ? children.get() : children), [children]);\n if (projectionId) {\n elementProps[\"data-projection-id\"] = projectionId;\n }\n return createElement(Component, {\n ...elementProps,\n children: renderedChildren,\n });\n };\n return useRender;\n}\n\nexport { createUseRender };\n","/**\n * Convert camelCase to dash-case properties.\n */\nconst camelToDash = (str) => str.replace(/([a-z])([A-Z])/g, \"$1-$2\").toLowerCase();\n\nexport { camelToDash };\n","function renderHTML(element, { style, vars }, styleProp, projection) {\n Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));\n // Loop over any CSS variables and assign those.\n for (const key in vars) {\n element.style.setProperty(key, vars[key]);\n }\n}\n\nexport { renderHTML };\n","/**\n * A set of attribute names that are always read/written as camel case.\n */\nconst camelCaseAttributes = new Set([\n \"baseFrequency\",\n \"diffuseConstant\",\n \"kernelMatrix\",\n \"kernelUnitLength\",\n \"keySplines\",\n \"keyTimes\",\n \"limitingConeAngle\",\n \"markerHeight\",\n \"markerWidth\",\n \"numOctaves\",\n \"targetX\",\n \"targetY\",\n \"surfaceScale\",\n \"specularConstant\",\n \"specularExponent\",\n \"stdDeviation\",\n \"tableValues\",\n \"viewBox\",\n \"gradientTransform\",\n \"pathLength\",\n \"startOffset\",\n \"textLength\",\n \"lengthAdjust\",\n]);\n\nexport { camelCaseAttributes };\n","import { camelToDash } from '../../dom/utils/camel-to-dash.mjs';\nimport { renderHTML } from '../../html/utils/render.mjs';\nimport { camelCaseAttributes } from './camel-case-attrs.mjs';\n\nfunction renderSVG(element, renderState, _styleProp, projection) {\n renderHTML(element, renderState, undefined, projection);\n for (const key in renderState.attrs) {\n element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);\n }\n}\n\nexport { renderSVG };\n","import { isForcedMotionValue } from '../../../motion/utils/is-forced-motion-value.mjs';\nimport { isMotionValue } from '../../../value/utils/is-motion-value.mjs';\n\nfunction scrapeMotionValuesFromProps(props, prevProps) {\n const { style } = props;\n const newValues = {};\n for (const key in style) {\n if (isMotionValue(style[key]) ||\n (prevProps.style && isMotionValue(prevProps.style[key])) ||\n isForcedMotionValue(key, props)) {\n newValues[key] = style[key];\n }\n }\n return newValues;\n}\n\nexport { scrapeMotionValuesFromProps };\n","import { isMotionValue } from '../../../value/utils/is-motion-value.mjs';\nimport { scrapeMotionValuesFromProps as scrapeMotionValuesFromProps$1 } from '../../html/utils/scrape-motion-values.mjs';\n\nfunction scrapeMotionValuesFromProps(props, prevProps) {\n const newValues = scrapeMotionValuesFromProps$1(props, prevProps);\n for (const key in props) {\n if (isMotionValue(props[key]) || isMotionValue(prevProps[key])) {\n const targetKey = key === \"x\" || key === \"y\" ? \"attr\" + key.toUpperCase() : key;\n newValues[targetKey] = props[key];\n }\n }\n return newValues;\n}\n\nexport { scrapeMotionValuesFromProps };\n","function resolveVariantFromProps(props, definition, custom, currentValues = {}, currentVelocity = {}) {\n /**\n * If the variant definition is a function, resolve.\n */\n if (typeof definition === \"function\") {\n definition = definition(custom !== undefined ? custom : props.custom, currentValues, currentVelocity);\n }\n /**\n * If the variant definition is a variant label, or\n * the function returned a variant label, resolve.\n */\n if (typeof definition === \"string\") {\n definition = props.variants && props.variants[definition];\n }\n /**\n * At this point we've resolved both functions and variant labels,\n * but the resolved variant label might itself have been a function.\n * If so, resolve. This can only have returned a valid target object.\n */\n if (typeof definition === \"function\") {\n definition = definition(custom !== undefined ? custom : props.custom, currentValues, currentVelocity);\n }\n return definition;\n}\n\nexport { resolveVariantFromProps };\n","const isKeyframesTarget = (v) => {\n return Array.isArray(v);\n};\n\nexport { isKeyframesTarget };\n","import { isKeyframesTarget } from '../animation/utils/is-keyframes-target.mjs';\n\nconst isCustomValue = (v) => {\n return Boolean(v && typeof v === \"object\" && v.mix && v.toValue);\n};\nconst resolveFinalValueInKeyframes = (v) => {\n // TODO maybe throw if v.length - 1 is placeholder token?\n return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;\n};\n\nexport { isCustomValue, resolveFinalValueInKeyframes };\n","import { isCustomValue } from '../../utils/resolve-value.mjs';\nimport { isMotionValue } from './is-motion-value.mjs';\n\n/**\n * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself\n *\n * TODO: Remove and move to library\n */\nfunction resolveMotionValue(value) {\n const unwrappedValue = isMotionValue(value) ? value.get() : value;\n return isCustomValue(unwrappedValue)\n ? unwrappedValue.toValue()\n : unwrappedValue;\n}\n\nexport { resolveMotionValue };\n","import { useContext } from 'react';\nimport { isAnimationControls } from '../../animation/utils/is-animation-controls.mjs';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\nimport { resolveVariantFromProps } from '../../render/utils/resolve-variants.mjs';\nimport { useConstant } from '../../utils/use-constant.mjs';\nimport { resolveMotionValue } from '../../value/utils/resolve-motion-value.mjs';\nimport { MotionContext } from '../../context/MotionContext/index.mjs';\nimport { isControllingVariants, isVariantNode } from '../../render/utils/is-controlling-variants.mjs';\n\nfunction makeState({ scrapeMotionValuesFromProps, createRenderState, onMount, }, props, context, presenceContext) {\n const state = {\n latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),\n renderState: createRenderState(),\n };\n if (onMount) {\n state.mount = (instance) => onMount(props, instance, state);\n }\n return state;\n}\nconst makeUseVisualState = (config) => (props, isStatic) => {\n const context = useContext(MotionContext);\n const presenceContext = useContext(PresenceContext);\n const make = () => makeState(config, props, context, presenceContext);\n return isStatic ? make() : useConstant(make);\n};\nfunction makeLatestValues(props, context, presenceContext, scrapeMotionValues) {\n const values = {};\n const motionValues = scrapeMotionValues(props, {});\n for (const key in motionValues) {\n values[key] = resolveMotionValue(motionValues[key]);\n }\n let { initial, animate } = props;\n const isControllingVariants$1 = isControllingVariants(props);\n const isVariantNode$1 = isVariantNode(props);\n if (context &&\n isVariantNode$1 &&\n !isControllingVariants$1 &&\n props.inherit !== false) {\n if (initial === undefined)\n initial = context.initial;\n if (animate === undefined)\n animate = context.animate;\n }\n let isInitialAnimationBlocked = presenceContext\n ? presenceContext.initial === false\n : false;\n isInitialAnimationBlocked = isInitialAnimationBlocked || initial === false;\n const variantToSet = isInitialAnimationBlocked ? animate : initial;\n if (variantToSet &&\n typeof variantToSet !== \"boolean\" &&\n !isAnimationControls(variantToSet)) {\n const list = Array.isArray(variantToSet) ? variantToSet : [variantToSet];\n list.forEach((definition) => {\n const resolved = resolveVariantFromProps(props, definition);\n if (!resolved)\n return;\n const { transitionEnd, transition, ...target } = resolved;\n for (const key in target) {\n let valueTarget = target[key];\n if (Array.isArray(valueTarget)) {\n /**\n * Take final keyframe if the initial animation is blocked because\n * we want to initialise at the end of that blocked animation.\n */\n const index = isInitialAnimationBlocked\n ? valueTarget.length - 1\n : 0;\n valueTarget = valueTarget[index];\n }\n if (valueTarget !== null) {\n values[key] = valueTarget;\n }\n }\n for (const key in transitionEnd)\n values[key] = transitionEnd[key];\n });\n }\n return values;\n}\n\nexport { makeUseVisualState };\n","import { renderSVG } from './utils/render.mjs';\nimport { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';\nimport { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';\nimport { createSvgRenderState } from './utils/create-render-state.mjs';\nimport { buildSVGAttrs } from './utils/build-attrs.mjs';\nimport { isSVGTag } from './utils/is-svg-tag.mjs';\n\nconst svgMotionConfig = {\n useVisualState: makeUseVisualState({\n scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,\n createRenderState: createSvgRenderState,\n onMount: (props, instance, { renderState, latestValues }) => {\n try {\n renderState.dimensions =\n typeof instance.getBBox ===\n \"function\"\n ? instance.getBBox()\n : instance.getBoundingClientRect();\n }\n catch (e) {\n // Most likely trying to measure an unrendered element under Firefox\n renderState.dimensions = {\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n };\n }\n buildSVGAttrs(renderState, latestValues, { enableHardwareAcceleration: false }, isSVGTag(instance.tagName), props.transformTemplate);\n renderSVG(instance, renderState);\n },\n }),\n};\n\nexport { svgMotionConfig };\n","import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';\nimport { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';\nimport { createHtmlRenderState } from './utils/create-render-state.mjs';\n\nconst htmlMotionConfig = {\n useVisualState: makeUseVisualState({\n scrapeMotionValuesFromProps,\n createRenderState: createHtmlRenderState,\n }),\n};\n\nexport { htmlMotionConfig };\n","import { isSVGComponent } from './is-svg-component.mjs';\nimport { createUseRender } from '../use-render.mjs';\nimport { svgMotionConfig } from '../../svg/config-motion.mjs';\nimport { htmlMotionConfig } from '../../html/config-motion.mjs';\n\nfunction createDomMotionConfig(Component, { forwardMotionProps = false }, preloadedFeatures, createVisualElement, projectionNodeConstructor) {\n const baseConfig = isSVGComponent(Component)\n ? svgMotionConfig\n : htmlMotionConfig;\n return {\n ...baseConfig,\n preloadedFeatures,\n useRender: createUseRender(forwardMotionProps),\n createVisualElement,\n projectionNodeConstructor,\n Component,\n };\n}\n\nexport { createDomMotionConfig };\n","var AnimationType;\n(function (AnimationType) {\n AnimationType[\"Animate\"] = \"animate\";\n AnimationType[\"Hover\"] = \"whileHover\";\n AnimationType[\"Tap\"] = \"whileTap\";\n AnimationType[\"Drag\"] = \"whileDrag\";\n AnimationType[\"Focus\"] = \"whileFocus\";\n AnimationType[\"InView\"] = \"whileInView\";\n AnimationType[\"Exit\"] = \"exit\";\n})(AnimationType || (AnimationType = {}));\n\nexport { AnimationType };\n","import { useEffect } from 'react';\n\nfunction addDomEvent(target, eventName, handler, options = { passive: true }) {\n target.addEventListener(eventName, handler, options);\n return () => target.removeEventListener(eventName, handler);\n}\n/**\n * Attaches an event listener directly to the provided DOM element.\n *\n * Bypassing React's event system can be desirable, for instance when attaching non-passive\n * event handlers.\n *\n * ```jsx\n * const ref = useRef(null)\n *\n * useDomEvent(ref, 'wheel', onWheel, { passive: false })\n *\n * return \n * ```\n *\n * @param ref - React.RefObject that's been provided to the element you want to bind the listener to.\n * @param eventName - Name of the event you want listen for.\n * @param handler - Function to fire when receiving the event.\n * @param options - Options to pass to `Event.addEventListener`.\n *\n * @public\n */\nfunction useDomEvent(ref, eventName, handler, options) {\n useEffect(() => {\n const element = ref.current;\n if (handler && element) {\n return addDomEvent(element, eventName, handler, options);\n }\n }, [ref, eventName, handler, options]);\n}\n\nexport { addDomEvent, useDomEvent };\n","import { AnimationType } from '../render/utils/types.mjs';\nimport { useDomEvent } from '../events/use-dom-event.mjs';\nimport { useCallback } from 'react';\n\n/**\n *\n * @param props\n * @param ref\n * @internal\n */\nfunction useFocusGesture({ whileFocus, visualElement, }) {\n const { animationState } = visualElement;\n const onFocus = useCallback(() => {\n animationState && animationState.setActive(AnimationType.Focus, true);\n }, [animationState]);\n const onBlur = useCallback(() => {\n animationState && animationState.setActive(AnimationType.Focus, false);\n }, [animationState]);\n useDomEvent(visualElement, \"focus\", whileFocus ? onFocus : undefined);\n useDomEvent(visualElement, \"blur\", whileFocus ? onBlur : undefined);\n}\n\nexport { useFocusGesture };\n","const isPrimaryPointer = (event) => {\n if (event.pointerType === \"mouse\") {\n return typeof event.button !== \"number\" || event.button <= 0;\n }\n else {\n /**\n * isPrimary is true for all mice buttons, whereas every touch point\n * is regarded as its own input. So subsequent concurrent touch points\n * will be false.\n *\n * Specifically match against false here as incomplete versions of\n * PointerEvents in very old browser might have it set as undefined.\n */\n return event.isPrimary !== false;\n }\n};\n\nexport { isPrimaryPointer };\n","import { isPrimaryPointer } from './utils/is-primary-pointer.mjs';\n\nfunction extractEventInfo(event, pointType = \"page\") {\n return {\n point: {\n x: event[pointType + \"X\"],\n y: event[pointType + \"Y\"],\n },\n };\n}\nconst addPointerInfo = (handler) => {\n return (event) => isPrimaryPointer(event) && handler(event, extractEventInfo(event));\n};\n\nexport { addPointerInfo, extractEventInfo };\n","import { addDomEvent, useDomEvent } from './use-dom-event.mjs';\nimport { addPointerInfo } from './event-info.mjs';\n\nfunction addPointerEvent(target, eventName, handler, options) {\n return addDomEvent(target, eventName, addPointerInfo(handler), options);\n}\nfunction usePointerEvent(ref, eventName, handler, options) {\n return useDomEvent(ref, eventName, handler && addPointerInfo(handler), options);\n}\n\nexport { addPointerEvent, usePointerEvent };\n","function createLock(name) {\n let lock = null;\n return () => {\n const openLock = () => {\n lock = null;\n };\n if (lock === null) {\n lock = name;\n return openLock;\n }\n return false;\n };\n}\nconst globalHorizontalLock = createLock(\"dragHorizontal\");\nconst globalVerticalLock = createLock(\"dragVertical\");\nfunction getGlobalLock(drag) {\n let lock = false;\n if (drag === \"y\") {\n lock = globalVerticalLock();\n }\n else if (drag === \"x\") {\n lock = globalHorizontalLock();\n }\n else {\n const openHorizontal = globalHorizontalLock();\n const openVertical = globalVerticalLock();\n if (openHorizontal && openVertical) {\n lock = () => {\n openHorizontal();\n openVertical();\n };\n }\n else {\n // Release the locks because we don't use them\n if (openHorizontal)\n openHorizontal();\n if (openVertical)\n openVertical();\n }\n }\n return lock;\n}\nfunction isDragActive() {\n // Check the gesture lock - if we get it, it means no drag gesture is active\n // and we can safely fire the tap gesture.\n const openGestureLock = getGlobalLock(true);\n if (!openGestureLock)\n return true;\n openGestureLock();\n return false;\n}\n\nexport { createLock, getGlobalLock, isDragActive };\n","import { AnimationType } from '../render/utils/types.mjs';\nimport { usePointerEvent } from '../events/use-pointer-event.mjs';\nimport { isDragActive } from './drag/utils/lock.mjs';\nimport { useMemo } from 'react';\n\nfunction createHoverEvent(visualElement, isActive, applyVariants, callback) {\n return (event, info) => {\n if (event.type === \"touch\" || isDragActive())\n return;\n /**\n * Ensure we trigger animations before firing event callback\n */\n if (applyVariants && visualElement.animationState) {\n visualElement.animationState.setActive(AnimationType.Hover, isActive);\n }\n callback && callback(event, info);\n };\n}\nfunction useHoverGesture({ onHoverStart, onHoverEnd, whileHover, visualElement, }) {\n usePointerEvent(visualElement, \"pointerenter\", useMemo(() => {\n return onHoverStart || whileHover\n ? createHoverEvent(visualElement, true, Boolean(whileHover), onHoverStart)\n : undefined;\n }, [onHoverStart, Boolean(whileHover), visualElement]), { passive: !onHoverStart });\n usePointerEvent(visualElement, \"pointerleave\", useMemo(() => {\n return onHoverEnd || whileHover\n ? createHoverEvent(visualElement, false, Boolean(whileHover), onHoverEnd)\n : undefined;\n }, [onHoverStart, Boolean(whileHover), visualElement]), { passive: !onHoverEnd });\n}\n\nexport { useHoverGesture };\n","/**\n * Recursively traverse up the tree to check whether the provided child node\n * is the parent or a descendant of it.\n *\n * @param parent - Element to find\n * @param child - Element to test against parent\n */\nconst isNodeOrChild = (parent, child) => {\n if (!child) {\n return false;\n }\n else if (parent === child) {\n return true;\n }\n else {\n return isNodeOrChild(parent, child.parentElement);\n }\n};\n\nexport { isNodeOrChild };\n","import { useEffect } from 'react';\n\nfunction useUnmountEffect(callback) {\n return useEffect(() => () => callback(), []);\n}\n\nexport { useUnmountEffect };\n","/**\n * Pipe\n * Compose other transformers to run linearily\n * pipe(min(20), max(40))\n * @param {...functions} transformers\n * @return {function}\n */\nconst combineFunctions = (a, b) => (v) => b(a(v));\nconst pipe = (...transformers) => transformers.reduce(combineFunctions);\n\nexport { pipe };\n","import { useRef, useCallback } from 'react';\nimport { isNodeOrChild } from './utils/is-node-or-child.mjs';\nimport { addPointerEvent, usePointerEvent } from '../events/use-pointer-event.mjs';\nimport { useUnmountEffect } from '../utils/use-unmount-effect.mjs';\nimport { AnimationType } from '../render/utils/types.mjs';\nimport { isDragActive } from './drag/utils/lock.mjs';\nimport { pipe } from '../utils/pipe.mjs';\n\n/**\n * @param handlers -\n * @internal\n */\nfunction useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement, ...props }) {\n const hasPressListeners = onTap || onTapStart || onTapCancel || whileTap;\n const isPressing = useRef(false);\n const cancelPointerEndListeners = useRef(null);\n /**\n * Only set listener to passive if there are no external listeners.\n */\n const eventOptions = {\n passive: !(onTapStart ||\n onTap ||\n onTapCancel ||\n props[\"onPointerDown\"]),\n };\n function removePointerEndListener() {\n cancelPointerEndListeners.current && cancelPointerEndListeners.current();\n cancelPointerEndListeners.current = null;\n }\n function checkPointerEnd() {\n removePointerEndListener();\n isPressing.current = false;\n const latestProps = visualElement.getProps();\n if (latestProps.whileTap && visualElement.animationState) {\n visualElement.animationState.setActive(AnimationType.Tap, false);\n }\n return !isDragActive();\n }\n function onPointerUp(event, info) {\n var _a, _b, _c, _d;\n if (!checkPointerEnd())\n return;\n /**\n * We only count this as a tap gesture if the event.target is the same\n * as, or a child of, this component's element\n */\n !isNodeOrChild(visualElement.current, event.target)\n ? (_b = (_a = visualElement.getProps()).onTapCancel) === null || _b === void 0 ? void 0 : _b.call(_a, event, info)\n : (_d = (_c = visualElement.getProps()).onTap) === null || _d === void 0 ? void 0 : _d.call(_c, event, info);\n }\n function onPointerCancel(event, info) {\n var _a, _b;\n if (!checkPointerEnd())\n return;\n (_b = (_a = visualElement.getProps()).onTapCancel) === null || _b === void 0 ? void 0 : _b.call(_a, event, info);\n }\n const startPress = useCallback((event, info) => {\n var _a;\n removePointerEndListener();\n if (isPressing.current)\n return;\n isPressing.current = true;\n cancelPointerEndListeners.current = pipe(addPointerEvent(window, \"pointerup\", onPointerUp, eventOptions), addPointerEvent(window, \"pointercancel\", onPointerCancel, eventOptions));\n const latestProps = visualElement.getProps();\n /**\n * Ensure we trigger animations before firing event callback\n */\n if (latestProps.whileTap && visualElement.animationState) {\n visualElement.animationState.setActive(AnimationType.Tap, true);\n }\n (_a = latestProps.onTapStart) === null || _a === void 0 ? void 0 : _a.call(latestProps, event, info);\n }, [Boolean(onTapStart), visualElement]);\n usePointerEvent(visualElement, \"pointerdown\", hasPressListeners ? startPress : undefined, eventOptions);\n useUnmountEffect(removePointerEndListener);\n}\n\nexport { useTapGesture };\n","/**\n * Map an IntersectionHandler callback to an element. We only ever make one handler for one\n * element, so even though these handlers might all be triggered by different\n * observers, we can keep them in the same map.\n */\nconst observerCallbacks = new WeakMap();\n/**\n * Multiple observers can be created for multiple element/document roots. Each with\n * different settings. So here we store dictionaries of observers to each root,\n * using serialised settings (threshold/margin) as lookup keys.\n */\nconst observers = new WeakMap();\nconst fireObserverCallback = (entry) => {\n const callback = observerCallbacks.get(entry.target);\n callback && callback(entry);\n};\nconst fireAllObserverCallbacks = (entries) => {\n entries.forEach(fireObserverCallback);\n};\nfunction initIntersectionObserver({ root, ...options }) {\n const lookupRoot = root || document;\n /**\n * If we don't have an observer lookup map for this root, create one.\n */\n if (!observers.has(lookupRoot)) {\n observers.set(lookupRoot, {});\n }\n const rootObservers = observers.get(lookupRoot);\n const key = JSON.stringify(options);\n /**\n * If we don't have an observer for this combination of root and settings,\n * create one.\n */\n if (!rootObservers[key]) {\n rootObservers[key] = new IntersectionObserver(fireAllObserverCallbacks, { root, ...options });\n }\n return rootObservers[key];\n}\nfunction observeIntersection(element, options, callback) {\n const rootInteresectionObserver = initIntersectionObserver(options);\n observerCallbacks.set(element, callback);\n rootInteresectionObserver.observe(element);\n return () => {\n observerCallbacks.delete(element);\n rootInteresectionObserver.unobserve(element);\n };\n}\n\nexport { observeIntersection };\n","import { useRef, useEffect } from 'react';\nimport { AnimationType } from '../../../render/utils/types.mjs';\nimport { warnOnce } from '../../../utils/warn-once.mjs';\nimport { observeIntersection } from './observers.mjs';\n\nfunction useViewport({ visualElement, whileInView, onViewportEnter, onViewportLeave, viewport = {}, }) {\n const state = useRef({\n hasEnteredView: false,\n isInView: false,\n });\n let shouldObserve = Boolean(whileInView || onViewportEnter || onViewportLeave);\n if (viewport.once && state.current.hasEnteredView)\n shouldObserve = false;\n const useObserver = typeof IntersectionObserver === \"undefined\"\n ? useMissingIntersectionObserver\n : useIntersectionObserver;\n useObserver(shouldObserve, state.current, visualElement, viewport);\n}\nconst thresholdNames = {\n some: 0,\n all: 1,\n};\nfunction useIntersectionObserver(shouldObserve, state, visualElement, { root, margin: rootMargin, amount = \"some\", once }) {\n useEffect(() => {\n if (!shouldObserve || !visualElement.current)\n return;\n const options = {\n root: root === null || root === void 0 ? void 0 : root.current,\n rootMargin,\n threshold: typeof amount === \"number\" ? amount : thresholdNames[amount],\n };\n const intersectionCallback = (entry) => {\n const { isIntersecting } = entry;\n /**\n * If there's been no change in the viewport state, early return.\n */\n if (state.isInView === isIntersecting)\n return;\n state.isInView = isIntersecting;\n /**\n * Handle hasEnteredView. If this is only meant to run once, and\n * element isn't visible, early return. Otherwise set hasEnteredView to true.\n */\n if (once && !isIntersecting && state.hasEnteredView) {\n return;\n }\n else if (isIntersecting) {\n state.hasEnteredView = true;\n }\n if (visualElement.animationState) {\n visualElement.animationState.setActive(AnimationType.InView, isIntersecting);\n }\n /**\n * Use the latest committed props rather than the ones in scope\n * when this observer is created\n */\n const props = visualElement.getProps();\n const callback = isIntersecting\n ? props.onViewportEnter\n : props.onViewportLeave;\n callback && callback(entry);\n };\n return observeIntersection(visualElement.current, options, intersectionCallback);\n }, [shouldObserve, root, rootMargin, amount]);\n}\n/**\n * If IntersectionObserver is missing, we activate inView and fire onViewportEnter\n * on mount. This way, the page will be in the state the author expects users\n * to see it in for everyone.\n */\nfunction useMissingIntersectionObserver(shouldObserve, state, visualElement, { fallback = true }) {\n useEffect(() => {\n if (!shouldObserve || !fallback)\n return;\n if (process.env.NODE_ENV !== \"production\") {\n warnOnce(false, \"IntersectionObserver not available on this device. whileInView animations will trigger on mount.\");\n }\n /**\n * Fire this in an rAF because, at this point, the animation state\n * won't have flushed for the first time and there's certain logic in\n * there that behaves differently on the initial animation.\n *\n * This hook should be quite rarely called so setting this in an rAF\n * is preferred to changing the behaviour of the animation state.\n */\n requestAnimationFrame(() => {\n state.hasEnteredView = true;\n const { onViewportEnter } = visualElement.getProps();\n onViewportEnter && onViewportEnter(null);\n if (visualElement.animationState) {\n visualElement.animationState.setActive(AnimationType.InView, true);\n }\n });\n }, [shouldObserve]);\n}\n\nexport { useViewport };\n","const makeRenderlessComponent = (hook) => (props) => {\n hook(props);\n return null;\n};\n\nexport { makeRenderlessComponent };\n","import { useFocusGesture } from '../../gestures/use-focus-gesture.mjs';\nimport { useHoverGesture } from '../../gestures/use-hover-gesture.mjs';\nimport { useTapGesture } from '../../gestures/use-tap-gesture.mjs';\nimport { useViewport } from './viewport/use-viewport.mjs';\nimport { makeRenderlessComponent } from '../utils/make-renderless-component.mjs';\n\nconst gestureAnimations = {\n inView: makeRenderlessComponent(useViewport),\n tap: makeRenderlessComponent(useTapGesture),\n focus: makeRenderlessComponent(useFocusGesture),\n hover: makeRenderlessComponent(useHoverGesture),\n};\n\nexport { gestureAnimations };\n","import { useContext, useId, useEffect } from 'react';\nimport { PresenceContext } from '../../context/PresenceContext.mjs';\n\n/**\n * When a component is the child of `AnimatePresence`, it can use `usePresence`\n * to access information about whether it's still present in the React tree.\n *\n * ```jsx\n * import { usePresence } from \"framer-motion\"\n *\n * export const Component = () => {\n * const [isPresent, safeToRemove] = usePresence()\n *\n * useEffect(() => {\n * !isPresent && setTimeout(safeToRemove, 1000)\n * }, [isPresent])\n *\n * return \n * }\n * ```\n *\n * If `isPresent` is `false`, it means that a component has been removed the tree, but\n * `AnimatePresence` won't really remove it until `safeToRemove` has been called.\n *\n * @public\n */\nfunction usePresence() {\n const context = useContext(PresenceContext);\n if (context === null)\n return [true, null];\n const { isPresent, onExitComplete, register } = context;\n // It's safe to call the following hooks conditionally (after an early return) because the context will always\n // either be null or non-null for the lifespan of the component.\n // Replace with useId when released in React\n const id = useId();\n useEffect(() => register(id), []);\n const safeToRemove = () => onExitComplete && onExitComplete(id);\n return !isPresent && onExitComplete ? [false, safeToRemove] : [true];\n}\n/**\n * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present.\n * There is no `safeToRemove` function.\n *\n * ```jsx\n * import { useIsPresent } from \"framer-motion\"\n *\n * export const Component = () => {\n * const isPresent = useIsPresent()\n *\n * useEffect(() => {\n * !isPresent && console.log(\"I've been removed!\")\n * }, [isPresent])\n *\n * return \n * }\n * ```\n *\n * @public\n */\nfunction useIsPresent() {\n return isPresent(useContext(PresenceContext));\n}\nfunction isPresent(context) {\n return context === null ? true : context.isPresent;\n}\n\nexport { isPresent, useIsPresent, usePresence };\n","function shallowCompare(next, prev) {\n if (!Array.isArray(prev))\n return false;\n const prevLength = prev.length;\n if (prevLength !== next.length)\n return false;\n for (let i = 0; i < prevLength; i++) {\n if (prev[i] !== next[i])\n return false;\n }\n return true;\n}\n\nexport { shallowCompare };\n","/**\n * Check if value is a numerical string, ie a string that is purely a number eg \"100\" or \"-100.1\"\n */\nconst isNumericalString = (v) => /^\\-?\\d*\\.?\\d+$/.test(v);\n\nexport { isNumericalString };\n","/**\n * Check if the value is a zero value string like \"0px\" or \"0%\"\n */\nconst isZeroValueString = (v) => /^0[^.\\s]+$/.test(v);\n\nexport { isZeroValueString };\n","const frameData = {\n delta: 0,\n timestamp: 0,\n};\n\nexport { frameData };\n","/*\n Detect and load appropriate clock setting for the execution environment\n */\nconst defaultTimestep = (1 / 60) * 1000;\nconst getCurrentTime = typeof performance !== \"undefined\"\n ? () => performance.now()\n : () => Date.now();\nconst onNextFrame = typeof window !== \"undefined\"\n ? (callback) => window.requestAnimationFrame(callback)\n : (callback) => setTimeout(() => callback(getCurrentTime()), defaultTimestep);\n\nexport { defaultTimestep, onNextFrame };\n","function createRenderStep(runNextFrame) {\n /**\n * We create and reuse two arrays, one to queue jobs for the current frame\n * and one for the next. We reuse to avoid triggering GC after x frames.\n */\n let toRun = [];\n let toRunNextFrame = [];\n /**\n *\n */\n let numToRun = 0;\n /**\n * Track whether we're currently processing jobs in this step. This way\n * we can decide whether to schedule new jobs for this frame or next.\n */\n let isProcessing = false;\n let flushNextFrame = false;\n /**\n * A set of processes which were marked keepAlive when scheduled.\n */\n const toKeepAlive = new WeakSet();\n const step = {\n /**\n * Schedule a process to run on the next frame.\n */\n schedule: (callback, keepAlive = false, immediate = false) => {\n const addToCurrentFrame = immediate && isProcessing;\n const buffer = addToCurrentFrame ? toRun : toRunNextFrame;\n if (keepAlive)\n toKeepAlive.add(callback);\n // If the buffer doesn't already contain this callback, add it\n if (buffer.indexOf(callback) === -1) {\n buffer.push(callback);\n // If we're adding it to the currently running buffer, update its measured size\n if (addToCurrentFrame && isProcessing)\n numToRun = toRun.length;\n }\n return callback;\n },\n /**\n * Cancel the provided callback from running on the next frame.\n */\n cancel: (callback) => {\n const index = toRunNextFrame.indexOf(callback);\n if (index !== -1)\n toRunNextFrame.splice(index, 1);\n toKeepAlive.delete(callback);\n },\n /**\n * Execute all schedule callbacks.\n */\n process: (frameData) => {\n /**\n * If we're already processing we've probably been triggered by a flushSync\n * inside an existing process. Instead of executing, mark flushNextFrame\n * as true and ensure we flush the following frame at the end of this one.\n */\n if (isProcessing) {\n flushNextFrame = true;\n return;\n }\n isProcessing = true;\n [toRun, toRunNextFrame] = [toRunNextFrame, toRun];\n // Clear the next frame list\n toRunNextFrame.length = 0;\n // Execute this frame\n numToRun = toRun.length;\n if (numToRun) {\n for (let i = 0; i < numToRun; i++) {\n const callback = toRun[i];\n callback(frameData);\n if (toKeepAlive.has(callback)) {\n step.schedule(callback);\n runNextFrame();\n }\n }\n }\n isProcessing = false;\n if (flushNextFrame) {\n flushNextFrame = false;\n step.process(frameData);\n }\n },\n };\n return step;\n}\n\nexport { createRenderStep };\n","import { onNextFrame, defaultTimestep } from './on-next-frame.mjs';\nimport { createRenderStep } from './create-render-step.mjs';\nimport { frameData } from './data.mjs';\n\nconst maxElapsed = 40;\nlet useDefaultElapsed = true;\nlet runNextFrame = false;\nlet isProcessing = false;\nconst stepsOrder = [\n \"read\",\n \"update\",\n \"preRender\",\n \"render\",\n \"postRender\",\n];\nconst steps = stepsOrder.reduce((acc, key) => {\n acc[key] = createRenderStep(() => (runNextFrame = true));\n return acc;\n}, {});\nconst sync = stepsOrder.reduce((acc, key) => {\n const step = steps[key];\n acc[key] = (process, keepAlive = false, immediate = false) => {\n if (!runNextFrame)\n startLoop();\n return step.schedule(process, keepAlive, immediate);\n };\n return acc;\n}, {});\nconst cancelSync = stepsOrder.reduce((acc, key) => {\n acc[key] = steps[key].cancel;\n return acc;\n}, {});\nconst flushSync = stepsOrder.reduce((acc, key) => {\n acc[key] = () => steps[key].process(frameData);\n return acc;\n}, {});\nconst processStep = (stepId) => steps[stepId].process(frameData);\nconst processFrame = (timestamp) => {\n runNextFrame = false;\n frameData.delta = useDefaultElapsed\n ? defaultTimestep\n : Math.max(Math.min(timestamp - frameData.timestamp, maxElapsed), 1);\n frameData.timestamp = timestamp;\n isProcessing = true;\n stepsOrder.forEach(processStep);\n isProcessing = false;\n if (runNextFrame) {\n useDefaultElapsed = false;\n onNextFrame(processFrame);\n }\n};\nconst startLoop = () => {\n runNextFrame = true;\n useDefaultElapsed = true;\n if (!isProcessing)\n onNextFrame(processFrame);\n};\n\nexport { cancelSync, flushSync, sync };\n","function addUniqueItem(arr, item) {\n if (arr.indexOf(item) === -1)\n arr.push(item);\n}\nfunction removeItem(arr, item) {\n const index = arr.indexOf(item);\n if (index > -1)\n arr.splice(index, 1);\n}\n// Adapted from array-move\nfunction moveItem([...arr], fromIndex, toIndex) {\n const startIndex = fromIndex < 0 ? arr.length + fromIndex : fromIndex;\n if (startIndex >= 0 && startIndex < arr.length) {\n const endIndex = toIndex < 0 ? arr.length + toIndex : toIndex;\n const [item] = arr.splice(fromIndex, 1);\n arr.splice(endIndex, 0, item);\n }\n return arr;\n}\n\nexport { addUniqueItem, moveItem, removeItem };\n","import { addUniqueItem, removeItem } from './array.mjs';\n\nclass SubscriptionManager {\n constructor() {\n this.subscriptions = [];\n }\n add(handler) {\n addUniqueItem(this.subscriptions, handler);\n return () => removeItem(this.subscriptions, handler);\n }\n notify(a, b, c) {\n const numSubscriptions = this.subscriptions.length;\n if (!numSubscriptions)\n return;\n if (numSubscriptions === 1) {\n /**\n * If there's only a single handler we can just call it without invoking a loop.\n */\n this.subscriptions[0](a, b, c);\n }\n else {\n for (let i = 0; i < numSubscriptions; i++) {\n /**\n * Check whether the handler exists before firing as it's possible\n * the subscriptions were modified during this loop running.\n */\n const handler = this.subscriptions[i];\n handler && handler(a, b, c);\n }\n }\n }\n getSize() {\n return this.subscriptions.length;\n }\n clear() {\n this.subscriptions.length = 0;\n }\n}\n\nexport { SubscriptionManager };\n","/*\n Convert velocity into velocity per second\n\n @param [number]: Unit per frame\n @param [number]: Frame duration in ms\n*/\nfunction velocityPerSecond(velocity, frameDuration) {\n return frameDuration ? velocity * (1000 / frameDuration) : 0;\n}\n\nexport { velocityPerSecond };\n","import { frameData } from '../frameloop/data.mjs';\nimport { sync } from '../frameloop/index.mjs';\nimport { SubscriptionManager } from '../utils/subscription-manager.mjs';\nimport { velocityPerSecond } from '../utils/velocity-per-second.mjs';\n\nconst isFloat = (value) => {\n return !isNaN(parseFloat(value));\n};\n/**\n * `MotionValue` is used to track the state and velocity of motion values.\n *\n * @public\n */\nclass MotionValue {\n /**\n * @param init - The initiating value\n * @param config - Optional configuration options\n *\n * - `transformer`: A function to transform incoming values with.\n *\n * @internal\n */\n constructor(init, options = {}) {\n /**\n * This will be replaced by the build step with the latest version number.\n * When MotionValues are provided to motion components, warn if versions are mixed.\n */\n this.version = \"8.5.5\";\n /**\n * Duration, in milliseconds, since last updating frame.\n *\n * @internal\n */\n this.timeDelta = 0;\n /**\n * Timestamp of the last time this `MotionValue` was updated.\n *\n * @internal\n */\n this.lastUpdated = 0;\n /**\n * Tracks whether this value can output a velocity. Currently this is only true\n * if the value is numerical, but we might be able to widen the scope here and support\n * other value types.\n *\n * @internal\n */\n this.canTrackVelocity = false;\n /**\n * An object containing a SubscriptionManager for each active event.\n */\n this.events = {};\n this.updateAndNotify = (v, render = true) => {\n this.prev = this.current;\n this.current = v;\n // Update timestamp\n const { delta, timestamp } = frameData;\n if (this.lastUpdated !== timestamp) {\n this.timeDelta = delta;\n this.lastUpdated = timestamp;\n sync.postRender(this.scheduleVelocityCheck);\n }\n // Update update subscribers\n if (this.prev !== this.current && this.events.change) {\n this.events.change.notify(this.current);\n }\n // Update velocity subscribers\n if (this.events.velocityChange) {\n this.events.velocityChange.notify(this.getVelocity());\n }\n // Update render subscribers\n if (render && this.events.renderRequest) {\n this.events.renderRequest.notify(this.current);\n }\n };\n /**\n * Schedule a velocity check for the next frame.\n *\n * This is an instanced and bound function to prevent generating a new\n * function once per frame.\n *\n * @internal\n */\n this.scheduleVelocityCheck = () => sync.postRender(this.velocityCheck);\n /**\n * Updates `prev` with `current` if the value hasn't been updated this frame.\n * This ensures velocity calculations return `0`.\n *\n * This is an instanced and bound function to prevent generating a new\n * function once per frame.\n *\n * @internal\n */\n this.velocityCheck = ({ timestamp }) => {\n if (timestamp !== this.lastUpdated) {\n this.prev = this.current;\n if (this.events.velocityChange) {\n this.events.velocityChange.notify(this.getVelocity());\n }\n }\n };\n this.hasAnimated = false;\n this.prev = this.current = init;\n this.canTrackVelocity = isFloat(this.current);\n this.owner = options.owner;\n }\n /**\n * Adds a function that will be notified when the `MotionValue` is updated.\n *\n * It returns a function that, when called, will cancel the subscription.\n *\n * When calling `onChange` inside a React component, it should be wrapped with the\n * `useEffect` hook. As it returns an unsubscribe function, this should be returned\n * from the `useEffect` function to ensure you don't add duplicate subscribers..\n *\n * ```jsx\n * export const MyComponent = () => {\n * const x = useMotionValue(0)\n * const y = useMotionValue(0)\n * const opacity = useMotionValue(1)\n *\n * useEffect(() => {\n * function updateOpacity() {\n * const maxXY = Math.max(x.get(), y.get())\n * const newOpacity = transform(maxXY, [0, 100], [1, 0])\n * opacity.set(newOpacity)\n * }\n *\n * const unsubscribeX = x.on(\"change\", updateOpacity)\n * const unsubscribeY = y.on(\"change\", updateOpacity)\n *\n * return () => {\n * unsubscribeX()\n * unsubscribeY()\n * }\n * }, [])\n *\n * return