{"version":3,"file":"framer-motion-DqOKasEs.js","sources":["../../node_modules/framer-motion/dist/es/render/components/create-proxy.mjs","../../node_modules/framer-motion/dist/es/animation/utils/is-animation-controls.mjs","../../node_modules/framer-motion/dist/es/animation/utils/is-keyframes-target.mjs","../../node_modules/framer-motion/dist/es/utils/shallow-compare.mjs","../../node_modules/framer-motion/dist/es/render/utils/is-variant-label.mjs","../../node_modules/framer-motion/dist/es/render/utils/resolve-variants.mjs","../../node_modules/framer-motion/dist/es/render/utils/resolve-dynamic-variants.mjs","../../node_modules/framer-motion/dist/es/render/utils/variant-props.mjs","../../node_modules/framer-motion/dist/es/render/html/utils/transform.mjs","../../node_modules/framer-motion/dist/es/utils/time-conversion.mjs","../../node_modules/framer-motion/dist/es/animation/utils/default-transitions.mjs","../../node_modules/framer-motion/dist/es/animation/utils/get-value-transition.mjs","../../node_modules/framer-motion/dist/es/utils/GlobalConfig.mjs","../../node_modules/framer-motion/dist/es/animation/animators/waapi/utils/get-final-keyframe.mjs","../../node_modules/framer-motion/dist/es/utils/noop.mjs","../../node_modules/framer-motion/dist/es/frameloop/render-step.mjs","../../node_modules/framer-motion/dist/es/frameloop/batcher.mjs","../../node_modules/framer-motion/dist/es/frameloop/frame.mjs","../../node_modules/framer-motion/dist/es/easing/cubic-bezier.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/back.mjs","../../node_modules/framer-motion/dist/es/easing/anticipate.mjs","../../node_modules/framer-motion/dist/es/easing/circ.mjs","../../node_modules/framer-motion/dist/es/utils/is-zero-value-string.mjs","../../node_modules/framer-motion/dist/es/animation/utils/is-none.mjs","../../node_modules/framer-motion/dist/es/utils/errors.mjs","../../node_modules/framer-motion/dist/es/utils/is-numerical-string.mjs","../../node_modules/framer-motion/dist/es/render/dom/utils/is-css-variable.mjs","../../node_modules/framer-motion/dist/es/render/dom/utils/css-variables-conversion.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/numbers/units.mjs","../../node_modules/framer-motion/dist/es/render/dom/utils/unit-conversion.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/utils/KeyframesResolver.mjs","../../node_modules/framer-motion/dist/es/value/types/utils/sanitize.mjs","../../node_modules/framer-motion/dist/es/value/types/utils/float-regex.mjs","../../node_modules/framer-motion/dist/es/value/types/utils/is-nullish.mjs","../../node_modules/framer-motion/dist/es/value/types/utils/single-color-regex.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/utils/color-regex.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/number-browser.mjs","../../node_modules/framer-motion/dist/es/render/dom/value-types/transform.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/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/html/utils/make-none-animatable.mjs","../../node_modules/framer-motion/dist/es/render/dom/DOMKeyframesResolver.mjs","../../node_modules/framer-motion/dist/es/animation/generators/utils/is-generator.mjs","../../node_modules/framer-motion/dist/es/frameloop/sync-time.mjs","../../node_modules/framer-motion/dist/es/animation/utils/is-animatable.mjs","../../node_modules/framer-motion/dist/es/animation/animators/utils/can-animate.mjs","../../node_modules/framer-motion/dist/es/animation/animators/BaseAnimation.mjs","../../node_modules/framer-motion/dist/es/utils/velocity-per-second.mjs","../../node_modules/framer-motion/dist/es/animation/generators/utils/velocity.mjs","../../node_modules/framer-motion/dist/es/animation/generators/spring/find.mjs","../../node_modules/framer-motion/dist/es/animation/generators/spring/index.mjs","../../node_modules/framer-motion/dist/es/animation/generators/inertia.mjs","../../node_modules/framer-motion/dist/es/easing/ease.mjs","../../node_modules/framer-motion/dist/es/easing/utils/is-easing-array.mjs","../../node_modules/framer-motion/dist/es/easing/utils/is-bezier-definition.mjs","../../node_modules/framer-motion/dist/es/easing/utils/map.mjs","../../node_modules/framer-motion/dist/es/utils/pipe.mjs","../../node_modules/framer-motion/dist/es/utils/progress.mjs","../../node_modules/framer-motion/dist/es/utils/mix/number.mjs","../../node_modules/framer-motion/dist/es/utils/hsla-to-rgba.mjs","../../node_modules/framer-motion/dist/es/utils/mix/immediate.mjs","../../node_modules/framer-motion/dist/es/utils/mix/color.mjs","../../node_modules/framer-motion/dist/es/utils/mix/visibility.mjs","../../node_modules/framer-motion/dist/es/utils/mix/complex.mjs","../../node_modules/framer-motion/dist/es/utils/mix/index.mjs","../../node_modules/framer-motion/dist/es/utils/interpolate.mjs","../../node_modules/framer-motion/dist/es/utils/offsets/fill.mjs","../../node_modules/framer-motion/dist/es/utils/offsets/default.mjs","../../node_modules/framer-motion/dist/es/utils/offsets/time.mjs","../../node_modules/framer-motion/dist/es/animation/generators/keyframes.mjs","../../node_modules/framer-motion/dist/es/animation/generators/utils/calc-duration.mjs","../../node_modules/framer-motion/dist/es/animation/animators/drivers/driver-frameloop.mjs","../../node_modules/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs","../../node_modules/framer-motion/dist/es/animation/animators/utils/accelerated-values.mjs","../../node_modules/framer-motion/dist/es/animation/animators/waapi/utils/linear.mjs","../../node_modules/framer-motion/dist/es/utils/memo.mjs","../../node_modules/framer-motion/dist/es/animation/animators/waapi/utils/supports-flags.mjs","../../node_modules/framer-motion/dist/es/animation/animators/waapi/utils/memo-supports.mjs","../../node_modules/framer-motion/dist/es/animation/animators/waapi/utils/supports-linear-easing.mjs","../../node_modules/framer-motion/dist/es/animation/animators/waapi/easing.mjs","../../node_modules/framer-motion/dist/es/animation/animators/waapi/index.mjs","../../node_modules/framer-motion/dist/es/animation/animators/waapi/utils/attach-timeline.mjs","../../node_modules/framer-motion/dist/es/animation/animators/waapi/utils/supports-waapi.mjs","../../node_modules/framer-motion/dist/es/animation/animators/AcceleratedAnimation.mjs","../../node_modules/framer-motion/dist/es/render/dom/scroll/supports.mjs","../../node_modules/framer-motion/dist/es/animation/GroupPlaybackControls.mjs","../../node_modules/framer-motion/dist/es/animation/utils/is-transition-defined.mjs","../../node_modules/framer-motion/dist/es/animation/interfaces/motion-value.mjs","../../node_modules/framer-motion/dist/es/utils/resolve-value.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/value/index.mjs","../../node_modules/framer-motion/dist/es/render/utils/setters.mjs","../../node_modules/framer-motion/dist/es/render/dom/utils/camel-to-dash.mjs","../../node_modules/framer-motion/dist/es/animation/optimized-appear/data-id.mjs","../../node_modules/framer-motion/dist/es/animation/optimized-appear/get-appear-id.mjs","../../node_modules/framer-motion/dist/es/value/utils/is-motion-value.mjs","../../node_modules/framer-motion/dist/es/value/use-will-change/is.mjs","../../node_modules/framer-motion/dist/es/value/use-will-change/add-will-change.mjs","../../node_modules/framer-motion/dist/es/animation/interfaces/visual-element-target.mjs","../../node_modules/framer-motion/dist/es/animation/interfaces/visual-element-variant.mjs","../../node_modules/framer-motion/dist/es/animation/interfaces/visual-element.mjs","../../node_modules/framer-motion/dist/es/render/utils/get-variant-context.mjs","../../node_modules/framer-motion/dist/es/render/utils/animation-state.mjs","../../node_modules/framer-motion/dist/es/motion/features/Feature.mjs","../../node_modules/framer-motion/dist/es/motion/features/animation/index.mjs","../../node_modules/framer-motion/dist/es/motion/features/animation/exit.mjs","../../node_modules/framer-motion/dist/es/motion/features/animations.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/add-dom-event.mjs","../../node_modules/framer-motion/dist/es/events/add-pointer-event.mjs","../../node_modules/framer-motion/dist/es/utils/distance.mjs","../../node_modules/framer-motion/dist/es/gestures/pan/PanSession.mjs","../../node_modules/framer-motion/dist/es/gestures/drag/utils/lock.mjs","../../node_modules/framer-motion/dist/es/utils/is-ref-object.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/utils/get-context-window.mjs","../../node_modules/framer-motion/dist/es/gestures/drag/VisualElementDragControls.mjs","../../node_modules/framer-motion/dist/es/gestures/drag/index.mjs","../../node_modules/framer-motion/dist/es/gestures/pan/index.mjs","../../node_modules/framer-motion/dist/es/context/PresenceContext.mjs","../../node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs","../../node_modules/framer-motion/dist/es/context/LayoutGroupContext.mjs","../../node_modules/framer-motion/dist/es/context/SwitchLayoutGroupContext.mjs","../../node_modules/framer-motion/dist/es/projection/node/state.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/projection/styles/scale-correction.mjs","../../node_modules/framer-motion/dist/es/frameloop/microtask.mjs","../../node_modules/framer-motion/dist/es/motion/features/layout/MeasureLayout.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/value/utils/resolve-motion-value.mjs","../../node_modules/framer-motion/dist/es/utils/delay.mjs","../../node_modules/framer-motion/dist/es/render/dom/utils/is-svg-element.mjs","../../node_modules/framer-motion/dist/es/animation/animate/single-value.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/motion/features/drag.mjs","../../node_modules/framer-motion/dist/es/gestures/hover.mjs","../../node_modules/framer-motion/dist/es/gestures/focus.mjs","../../node_modules/framer-motion/dist/es/gestures/utils/is-node-or-child.mjs","../../node_modules/framer-motion/dist/es/gestures/press.mjs","../../node_modules/framer-motion/dist/es/motion/features/viewport/observers.mjs","../../node_modules/framer-motion/dist/es/motion/features/viewport/index.mjs","../../node_modules/framer-motion/dist/es/motion/features/gestures.mjs","../../node_modules/framer-motion/dist/es/motion/features/layout.mjs","../../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/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/motion/utils/use-motion-ref.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/motion/utils/symbol.mjs","../../node_modules/framer-motion/dist/es/motion/index.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/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/motion/utils/is-forced-motion-value.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/utils/use-constant.mjs","../../node_modules/framer-motion/dist/es/motion/utils/use-visual-state.mjs","../../node_modules/framer-motion/dist/es/render/html/utils/create-render-state.mjs","../../node_modules/framer-motion/dist/es/render/svg/utils/create-render-state.mjs","../../node_modules/framer-motion/dist/es/render/dom/value-types/get-as-type.mjs","../../node_modules/framer-motion/dist/es/render/html/utils/build-transform.mjs","../../node_modules/framer-motion/dist/es/render/html/utils/build-styles.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/is-svg-tag.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/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/use-props.mjs","../../node_modules/framer-motion/dist/es/render/dom/use-render.mjs","../../node_modules/framer-motion/dist/es/render/components/create-factory.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/store.mjs","../../node_modules/framer-motion/dist/es/render/dom/value-types/find.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/render/components/motion/create.mjs","../../node_modules/framer-motion/dist/es/render/components/motion/proxy.mjs","../../node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs","../../node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs","../../node_modules/framer-motion/dist/es/components/AnimatePresence/utils.mjs","../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs"],"sourcesContent":["import { warnOnce } from '../../utils/warn-once.mjs';\n\nfunction createDOMMotionComponentProxy(componentFactory) {\n if (typeof Proxy === \"undefined\") {\n return componentFactory;\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 const deprecatedFactoryFunction = (...args) => {\n if (process.env.NODE_ENV !== \"production\") {\n warnOnce(false, \"motion() is deprecated. Use motion.create() instead.\");\n }\n return componentFactory(...args);\n };\n return new Proxy(deprecatedFactoryFunction, {\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 if (key === \"create\")\n return componentFactory;\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, componentFactory(key));\n }\n return componentCache.get(key);\n },\n });\n}\n\nexport { createDOMMotionComponentProxy };\n","function isAnimationControls(v) {\n return (v !== null &&\n typeof v === \"object\" &&\n typeof v.start === \"function\");\n}\n\nexport { isAnimationControls };\n","const isKeyframesTarget = (v) => {\n return Array.isArray(v);\n};\n\nexport { isKeyframesTarget };\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 * 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 getValueState(visualElement) {\n const state = [{}, {}];\n visualElement === null || visualElement === void 0 ? void 0 : visualElement.values.forEach((value, key) => {\n state[0][key] = value.get();\n state[1][key] = value.getVelocity();\n });\n return state;\n}\nfunction resolveVariantFromProps(props, definition, custom, visualElement) {\n /**\n * If the variant definition is a function, resolve.\n */\n if (typeof definition === \"function\") {\n const [current, velocity] = getValueState(visualElement);\n definition = definition(custom !== undefined ? custom : props.custom, current, velocity);\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 const [current, velocity] = getValueState(visualElement);\n definition = definition(custom !== undefined ? custom : props.custom, current, velocity);\n }\n return definition;\n}\n\nexport { resolveVariantFromProps };\n","import { resolveVariantFromProps } from './resolve-variants.mjs';\n\nfunction resolveVariant(visualElement, definition, custom) {\n const props = visualElement.getProps();\n return resolveVariantFromProps(props, definition, custom !== undefined ? custom : props.custom, visualElement);\n}\n\nexport { resolveVariant };\n","const variantPriorityOrder = [\n \"animate\",\n \"whileInView\",\n \"whileFocus\",\n \"whileHover\",\n \"whileTap\",\n \"whileDrag\",\n \"exit\",\n];\nconst variantProps = [\"initial\", ...variantPriorityOrder];\n\nexport { variantPriorityOrder, variantProps };\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","/**\n * Converts seconds to milliseconds\n *\n * @param seconds - Time in seconds.\n * @return milliseconds - Converted time in milliseconds.\n */\nconst secondsToMilliseconds = (seconds) => seconds * 1000;\nconst millisecondsToSeconds = (milliseconds) => milliseconds / 1000;\n\nexport { millisecondsToSeconds, secondsToMilliseconds };\n","import { transformProps } from '../../render/html/utils/transform.mjs';\n\nconst underDampedSpring = {\n type: \"spring\",\n stiffness: 500,\n damping: 25,\n restSpeed: 10,\n};\nconst criticallyDampedSpring = (target) => ({\n type: \"spring\",\n stiffness: 550,\n damping: target === 0 ? 2 * Math.sqrt(550) : 30,\n restSpeed: 10,\n});\nconst keyframesTransition = {\n type: \"keyframes\",\n duration: 0.8,\n};\n/**\n * Default easing curve is a slightly shallower version of\n * the default browser easing curve.\n */\nconst ease = {\n type: \"keyframes\",\n ease: [0.25, 0.1, 0.35, 1],\n duration: 0.3,\n};\nconst getDefaultTransition = (valueKey, { keyframes }) => {\n if (keyframes.length > 2) {\n return keyframesTransition;\n }\n else if (transformProps.has(valueKey)) {\n return valueKey.startsWith(\"scale\")\n ? criticallyDampedSpring(keyframes[1])\n : underDampedSpring;\n }\n return ease;\n};\n\nexport { getDefaultTransition };\n","function getValueTransition(transition, key) {\n return transition\n ? transition[key] ||\n transition[\"default\"] ||\n transition\n : undefined;\n}\n\nexport { getValueTransition };\n","const MotionGlobalConfig = {\n skipAnimations: false,\n useManualTiming: false,\n};\n\nexport { MotionGlobalConfig };\n","const isNotNull = (value) => value !== null;\nfunction getFinalKeyframe(keyframes, { repeat, repeatType = \"loop\" }, finalKeyframe) {\n const resolvedKeyframes = keyframes.filter(isNotNull);\n const index = repeat && repeatType !== \"loop\" && repeat % 2 === 1\n ? 0\n : resolvedKeyframes.length - 1;\n return !index || finalKeyframe === undefined\n ? resolvedKeyframes[index]\n : finalKeyframe;\n}\n\nexport { getFinalKeyframe };\n","const noop = (any) => any;\n\nexport { noop };\n","function createRenderStep(runNextFrame) {\n /**\n * We create and reuse two queues, 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 thisFrame = new Set();\n let nextFrame = new Set();\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 let latestFrameData = {\n delta: 0.0,\n timestamp: 0.0,\n isProcessing: false,\n };\n function triggerCallback(callback) {\n if (toKeepAlive.has(callback)) {\n step.schedule(callback);\n runNextFrame();\n }\n callback(latestFrameData);\n }\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 queue = addToCurrentFrame ? thisFrame : nextFrame;\n if (keepAlive)\n toKeepAlive.add(callback);\n if (!queue.has(callback))\n queue.add(callback);\n return callback;\n },\n /**\n * Cancel the provided callback from running on the next frame.\n */\n cancel: (callback) => {\n nextFrame.delete(callback);\n toKeepAlive.delete(callback);\n },\n /**\n * Execute all schedule callbacks.\n */\n process: (frameData) => {\n latestFrameData = 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 [thisFrame, nextFrame] = [nextFrame, thisFrame];\n // Clear the next frame queue\n nextFrame.clear();\n // Execute this frame\n thisFrame.forEach(triggerCallback);\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 { MotionGlobalConfig } from '../utils/GlobalConfig.mjs';\nimport { createRenderStep } from './render-step.mjs';\n\nconst stepsOrder = [\n \"read\", // Read\n \"resolveKeyframes\", // Write/Read/Write/Read\n \"update\", // Compute\n \"preRender\", // Compute\n \"render\", // Write\n \"postRender\", // Compute\n];\nconst maxElapsed = 40;\nfunction createRenderBatcher(scheduleNextBatch, allowKeepAlive) {\n let runNextFrame = false;\n let useDefaultElapsed = true;\n const state = {\n delta: 0.0,\n timestamp: 0.0,\n isProcessing: false,\n };\n const flagRunNextFrame = () => (runNextFrame = true);\n const steps = stepsOrder.reduce((acc, key) => {\n acc[key] = createRenderStep(flagRunNextFrame);\n return acc;\n }, {});\n const { read, resolveKeyframes, update, preRender, render, postRender } = steps;\n const processBatch = () => {\n const timestamp = MotionGlobalConfig.useManualTiming\n ? state.timestamp\n : performance.now();\n runNextFrame = false;\n state.delta = useDefaultElapsed\n ? 1000 / 60\n : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);\n state.timestamp = timestamp;\n state.isProcessing = true;\n // Unrolled render loop for better per-frame performance\n read.process(state);\n resolveKeyframes.process(state);\n update.process(state);\n preRender.process(state);\n render.process(state);\n postRender.process(state);\n state.isProcessing = false;\n if (runNextFrame && allowKeepAlive) {\n useDefaultElapsed = false;\n scheduleNextBatch(processBatch);\n }\n };\n const wake = () => {\n runNextFrame = true;\n useDefaultElapsed = true;\n if (!state.isProcessing) {\n scheduleNextBatch(processBatch);\n }\n };\n const schedule = stepsOrder.reduce((acc, key) => {\n const step = steps[key];\n acc[key] = (process, keepAlive = false, immediate = false) => {\n if (!runNextFrame)\n wake();\n return step.schedule(process, keepAlive, immediate);\n };\n return acc;\n }, {});\n const cancel = (process) => {\n for (let i = 0; i < stepsOrder.length; i++) {\n steps[stepsOrder[i]].cancel(process);\n }\n };\n return { schedule, cancel, state, steps };\n}\n\nexport { createRenderBatcher, stepsOrder };\n","import { noop } from '../utils/noop.mjs';\nimport { createRenderBatcher } from './batcher.mjs';\n\nconst { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = createRenderBatcher(typeof requestAnimationFrame !== \"undefined\" ? requestAnimationFrame : noop, true);\n\nexport { cancelFrame, frame, frameData, frameSteps };\n","import { noop } from '../utils/noop.mjs';\n\n/*\n Bezier function generator\n This has been modified from GaĆ«tan Renaudeau's BezierEasing\n https://github.com/gre/bezier-easing/blob/master/src/index.js\n https://github.com/gre/bezier-easing/blob/master/LICENSE\n \n I've removed the newtonRaphsonIterate algo because in benchmarking it\n wasn't noticiably faster than binarySubdivision, indeed removing it\n usually improved times, depending on the curve.\n I also removed the lookup table, as for the added bundle size and loop we're\n only cutting ~4 or so subdivision iterations. I bumped the max iterations up\n to 12 to compensate and this still tended to be faster for no perceivable\n loss in accuracy.\n Usage\n const easeOut = cubicBezier(.17,.67,.83,.67);\n const x = easeOut(0.5); // returns 0.627...\n*/\n// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.\nconst calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) *\n t;\nconst subdivisionPrecision = 0.0000001;\nconst subdivisionMaxIterations = 12;\nfunction binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {\n let currentX;\n let currentT;\n let i = 0;\n do {\n currentT = lowerBound + (upperBound - lowerBound) / 2.0;\n currentX = calcBezier(currentT, mX1, mX2) - x;\n if (currentX > 0.0) {\n upperBound = currentT;\n }\n else {\n lowerBound = currentT;\n }\n } while (Math.abs(currentX) > subdivisionPrecision &&\n ++i < subdivisionMaxIterations);\n return currentT;\n}\nfunction cubicBezier(mX1, mY1, mX2, mY2) {\n // If this is a linear gradient, return linear easing\n if (mX1 === mY1 && mX2 === mY2)\n return noop;\n const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);\n // If animation is at start/end, return t without easing\n return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);\n}\n\nexport { cubicBezier };\n","// Accepts an easing function and returns a new one that outputs mirrored values for\n// the second half of the animation. Turns easeIn into easeInOut.\nconst mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;\n\nexport { mirrorEasing };\n","// Accepts an easing function and returns a new one that outputs reversed values.\n// Turns easeIn into easeOut.\nconst reverseEasing = (easing) => (p) => 1 - easing(1 - p);\n\nexport { reverseEasing };\n","import { cubicBezier } from './cubic-bezier.mjs';\nimport { mirrorEasing } from './modifiers/mirror.mjs';\nimport { reverseEasing } from './modifiers/reverse.mjs';\n\nconst backOut = /*@__PURE__*/ cubicBezier(0.33, 1.53, 0.69, 0.99);\nconst backIn = /*@__PURE__*/ reverseEasing(backOut);\nconst backInOut = /*@__PURE__*/ mirrorEasing(backIn);\n\nexport { backIn, backInOut, backOut };\n","import { backIn } from './back.mjs';\n\nconst anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));\n\nexport { anticipate };\n","import { mirrorEasing } from './modifiers/mirror.mjs';\nimport { reverseEasing } from './modifiers/reverse.mjs';\n\nconst circIn = (p) => 1 - Math.sin(Math.acos(p));\nconst circOut = reverseEasing(circIn);\nconst circInOut = mirrorEasing(circIn);\n\nexport { circIn, circInOut, circOut };\n","/**\n * Check if the value is a zero value string like \"0px\" or \"0%\"\n */\nconst isZeroValueString = (v) => /^0[^.\\s]+$/u.test(v);\n\nexport { isZeroValueString };\n","import { isZeroValueString } from '../../utils/is-zero-value-string.mjs';\n\nfunction isNone(value) {\n if (typeof value === \"number\") {\n return value === 0;\n }\n else if (value !== null) {\n return value === \"none\" || value === \"0\" || isZeroValueString(value);\n }\n else {\n return true;\n }\n}\n\nexport { isNone };\n","import { noop } from './noop.mjs';\n\nlet warning = noop;\nlet invariant = noop;\nif (process.env.NODE_ENV !== \"production\") {\n warning = (check, message) => {\n if (!check && typeof console !== \"undefined\") {\n console.warn(message);\n }\n };\n invariant = (check, message) => {\n if (!check) {\n throw new Error(message);\n }\n };\n}\n\nexport { invariant, warning };\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+)?|\\.\\d+)$/u.test(v);\n\nexport { isNumericalString };\n","const checkStringStartsWith = (token) => (key) => typeof key === \"string\" && key.startsWith(token);\nconst isCSSVariableName = \n/*@__PURE__*/ checkStringStartsWith(\"--\");\nconst startsAsVariableToken = \n/*@__PURE__*/ checkStringStartsWith(\"var(--\");\nconst isCSSVariableToken = (value) => {\n const startsWithToken = startsAsVariableToken(value);\n if (!startsWithToken)\n return false;\n // Ensure any comments are stripped from the value as this can harm performance of the regex.\n return singleCssVariableRegex.test(value.split(\"/*\")[0].trim());\n};\nconst singleCssVariableRegex = /var\\(--(?:[\\w-]+\\s*|[\\w-]+\\s*,(?:\\s*[^)(\\s]|\\s*\\((?:[^)(]|\\([^)(]*\\))*\\))+\\s*)\\)$/iu;\n\nexport { isCSSVariableName, isCSSVariableToken };\n","import { invariant } from '../../../utils/errors.mjs';\nimport { isNumericalString } from '../../../utils/is-numerical-string.mjs';\nimport { isCSSVariableToken } from './is-css-variable.mjs';\n\n/**\n * Parse Framer's special CSS variable format into a CSS token and a fallback.\n *\n * ```\n * `var(--foo, #fff)` => [`--foo`, '#fff']\n * ```\n *\n * @param current\n */\nconst splitCSSVariableRegex = \n// eslint-disable-next-line redos-detector/no-unsafe-regex -- false positive, as it can match a lot of words\n/^var\\(--(?:([\\w-]+)|([\\w-]+), ?([a-zA-Z\\d ()%#.,-]+))\\)/u;\nfunction parseCSSVariable(current) {\n const match = splitCSSVariableRegex.exec(current);\n if (!match)\n return [,];\n const [, token1, token2, fallback] = match;\n return [`--${token1 !== null && token1 !== void 0 ? token1 : token2}`, fallback];\n}\nconst maxDepth = 4;\nfunction getVariableValue(current, element, depth = 1) {\n invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property \"${current}\". This may indicate a circular fallback dependency.`);\n const [token, fallback] = parseCSSVariable(current);\n // No CSS variable detected\n if (!token)\n return;\n // Attempt to read this CSS variable off the element\n const resolved = window.getComputedStyle(element).getPropertyValue(token);\n if (resolved) {\n const trimmed = resolved.trim();\n return isNumericalString(trimmed) ? parseFloat(trimmed) : trimmed;\n }\n return isCSSVariableToken(fallback)\n ? getVariableValue(fallback, element, depth + 1)\n : fallback;\n}\n\nexport { getVariableValue, parseCSSVariable };\n","const clamp = (min, max, v) => {\n if (v > max)\n return max;\n if (v < min)\n return min;\n return v;\n};\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","const createUnitType = (unit) => ({\n test: (v) => typeof v === \"string\" && v.endsWith(unit) && v.split(\" \").length === 1,\n parse: parseFloat,\n transform: (v) => `${v}${unit}`,\n});\nconst degrees = /*@__PURE__*/ createUnitType(\"deg\");\nconst percent = /*@__PURE__*/ createUnitType(\"%\");\nconst px = /*@__PURE__*/ createUnitType(\"px\");\nconst vh = /*@__PURE__*/ createUnitType(\"vh\");\nconst vw = /*@__PURE__*/ 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 { transformPropOrder } from '../../html/utils/transform.mjs';\nimport { number } from '../../../value/types/numbers/index.mjs';\nimport { px } from '../../../value/types/numbers/units.mjs';\n\nconst positionalKeys = new Set([\n \"width\",\n \"height\",\n \"top\",\n \"left\",\n \"right\",\n \"bottom\",\n \"x\",\n \"y\",\n \"translateX\",\n \"translateY\",\n]);\nconst isNumOrPxType = (v) => v === number || v === px;\nconst getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(\", \")[pos]);\nconst getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {\n if (transform === \"none\" || !transform)\n return 0;\n const matrix3d = transform.match(/^matrix3d\\((.+)\\)$/u);\n if (matrix3d) {\n return getPosFromMatrix(matrix3d[1], pos3);\n }\n else {\n const matrix = transform.match(/^matrix\\((.+)\\)$/u);\n if (matrix) {\n return getPosFromMatrix(matrix[1], pos2);\n }\n else {\n return 0;\n }\n }\n};\nconst transformKeys = new Set([\"x\", \"y\", \"z\"]);\nconst nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));\nfunction removeNonTranslationalTransform(visualElement) {\n const removedTransforms = [];\n nonTranslationalTransformKeys.forEach((key) => {\n const value = visualElement.getValue(key);\n if (value !== undefined) {\n removedTransforms.push([key, value.get()]);\n value.set(key.startsWith(\"scale\") ? 1 : 0);\n }\n });\n return removedTransforms;\n}\nconst positionalValues = {\n // Dimensions\n width: ({ x }, { paddingLeft = \"0\", paddingRight = \"0\" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight),\n height: ({ y }, { paddingTop = \"0\", paddingBottom = \"0\" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom),\n top: (_bbox, { top }) => parseFloat(top),\n left: (_bbox, { left }) => parseFloat(left),\n bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),\n right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min),\n // Transform\n x: getTranslateFromMatrix(4, 13),\n y: getTranslateFromMatrix(5, 14),\n};\n// Alias translate longform names\npositionalValues.translateX = positionalValues.x;\npositionalValues.translateY = positionalValues.y;\n\nexport { isNumOrPxType, positionalKeys, positionalValues, removeNonTranslationalTransform };\n","/**\n * Tests a provided value against a ValueType\n */\nconst testValueType = (v) => (type) => type.test(v);\n\nexport { testValueType };\n","/**\n * ValueType for \"auto\"\n */\nconst auto = {\n test: (v) => v === \"auto\",\n parse: (v) => v,\n};\n\nexport { auto };\n","import { number } from '../../../value/types/numbers/index.mjs';\nimport { px, percent, degrees, vw, vh } from '../../../value/types/numbers/units.mjs';\nimport { testValueType } from './test.mjs';\nimport { auto } from './type-auto.mjs';\n\n/**\n * A list of value types commonly used for dimensions\n */\nconst dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];\n/**\n * Tests a dimensional value against the list of dimension ValueTypes\n */\nconst findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v));\n\nexport { dimensionValueTypes, findDimensionValueType };\n","import { removeNonTranslationalTransform } from '../dom/utils/unit-conversion.mjs';\nimport { frame } from '../../frameloop/frame.mjs';\n\nconst toResolve = new Set();\nlet isScheduled = false;\nlet anyNeedsMeasurement = false;\nfunction measureAllKeyframes() {\n if (anyNeedsMeasurement) {\n const resolversToMeasure = Array.from(toResolve).filter((resolver) => resolver.needsMeasurement);\n const elementsToMeasure = new Set(resolversToMeasure.map((resolver) => resolver.element));\n const transformsToRestore = new Map();\n /**\n * Write pass\n * If we're measuring elements we want to remove bounding box-changing transforms.\n */\n elementsToMeasure.forEach((element) => {\n const removedTransforms = removeNonTranslationalTransform(element);\n if (!removedTransforms.length)\n return;\n transformsToRestore.set(element, removedTransforms);\n element.render();\n });\n // Read\n resolversToMeasure.forEach((resolver) => resolver.measureInitialState());\n // Write\n elementsToMeasure.forEach((element) => {\n element.render();\n const restore = transformsToRestore.get(element);\n if (restore) {\n restore.forEach(([key, value]) => {\n var _a;\n (_a = element.getValue(key)) === null || _a === void 0 ? void 0 : _a.set(value);\n });\n }\n });\n // Read\n resolversToMeasure.forEach((resolver) => resolver.measureEndState());\n // Write\n resolversToMeasure.forEach((resolver) => {\n if (resolver.suspendedScrollY !== undefined) {\n window.scrollTo(0, resolver.suspendedScrollY);\n }\n });\n }\n anyNeedsMeasurement = false;\n isScheduled = false;\n toResolve.forEach((resolver) => resolver.complete());\n toResolve.clear();\n}\nfunction readAllKeyframes() {\n toResolve.forEach((resolver) => {\n resolver.readKeyframes();\n if (resolver.needsMeasurement) {\n anyNeedsMeasurement = true;\n }\n });\n}\nfunction flushKeyframeResolvers() {\n readAllKeyframes();\n measureAllKeyframes();\n}\nclass KeyframeResolver {\n constructor(unresolvedKeyframes, onComplete, name, motionValue, element, isAsync = false) {\n /**\n * Track whether this resolver has completed. Once complete, it never\n * needs to attempt keyframe resolution again.\n */\n this.isComplete = false;\n /**\n * Track whether this resolver is async. If it is, it'll be added to the\n * resolver queue and flushed in the next frame. Resolvers that aren't going\n * to trigger read/write thrashing don't need to be async.\n */\n this.isAsync = false;\n /**\n * Track whether this resolver needs to perform a measurement\n * to resolve its keyframes.\n */\n this.needsMeasurement = false;\n /**\n * Track whether this resolver is currently scheduled to resolve\n * to allow it to be cancelled and resumed externally.\n */\n this.isScheduled = false;\n this.unresolvedKeyframes = [...unresolvedKeyframes];\n this.onComplete = onComplete;\n this.name = name;\n this.motionValue = motionValue;\n this.element = element;\n this.isAsync = isAsync;\n }\n scheduleResolve() {\n this.isScheduled = true;\n if (this.isAsync) {\n toResolve.add(this);\n if (!isScheduled) {\n isScheduled = true;\n frame.read(readAllKeyframes);\n frame.resolveKeyframes(measureAllKeyframes);\n }\n }\n else {\n this.readKeyframes();\n this.complete();\n }\n }\n readKeyframes() {\n const { unresolvedKeyframes, name, element, motionValue } = this;\n /**\n * If a keyframe is null, we hydrate it either by reading it from\n * the instance, or propagating from previous keyframes.\n */\n for (let i = 0; i < unresolvedKeyframes.length; i++) {\n if (unresolvedKeyframes[i] === null) {\n /**\n * If the first keyframe is null, we need to find its value by sampling the element\n */\n if (i === 0) {\n const currentValue = motionValue === null || motionValue === void 0 ? void 0 : motionValue.get();\n const finalKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];\n if (currentValue !== undefined) {\n unresolvedKeyframes[0] = currentValue;\n }\n else if (element && name) {\n const valueAsRead = element.readValue(name, finalKeyframe);\n if (valueAsRead !== undefined && valueAsRead !== null) {\n unresolvedKeyframes[0] = valueAsRead;\n }\n }\n if (unresolvedKeyframes[0] === undefined) {\n unresolvedKeyframes[0] = finalKeyframe;\n }\n if (motionValue && currentValue === undefined) {\n motionValue.set(unresolvedKeyframes[0]);\n }\n }\n else {\n unresolvedKeyframes[i] = unresolvedKeyframes[i - 1];\n }\n }\n }\n }\n setFinalKeyframe() { }\n measureInitialState() { }\n renderEndStyles() { }\n measureEndState() { }\n complete() {\n this.isComplete = true;\n this.onComplete(this.unresolvedKeyframes, this.finalKeyframe);\n toResolve.delete(this);\n }\n cancel() {\n if (!this.isComplete) {\n this.isScheduled = false;\n toResolve.delete(this);\n }\n }\n resume() {\n if (!this.isComplete)\n this.scheduleResolve();\n }\n}\n\nexport { KeyframeResolver, flushKeyframeResolvers };\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;\n\nexport { sanitize };\n","const floatRegex = /-?(?:\\d+(?:\\.\\d+)?|\\.\\d+)/gu;\n\nexport { floatRegex };\n","function isNullish(v) {\n return v == null;\n}\n\nexport { isNullish };\n","const singleColorRegex = /^(?:#[\\da-f]{3,8}|(?:rgb|hsl)a?\\((?:-?[\\d.]+%?[,\\s]+){2}-?[\\d.]+%?\\s*(?:[,/]\\s*)?(?:\\b\\d+(?:\\.\\d+)?|\\.\\d+)?%?\\))$/iu;\n\nexport { singleColorRegex };\n","import { floatRegex } from '../utils/float-regex.mjs';\nimport { isNullish } from '../utils/is-nullish.mjs';\nimport { singleColorRegex } from '../utils/single-color-regex.mjs';\n\n/**\n * Returns true if the provided string is a color, ie rgba(0,0,0,0) or #000,\n * but false if a number or multiple colors\n */\nconst isColorString = (type, testProp) => (v) => {\n return Boolean((typeof v === \"string\" &&\n singleColorRegex.test(v) &&\n v.startsWith(type)) ||\n (testProp &&\n !isNullish(v) &&\n Object.prototype.hasOwnProperty.call(v, testProp)));\n};\nconst splitColor = (aName, bName, cName) => (v) => {\n if (typeof v !== \"string\")\n return v;\n const [a, b, c, alpha] = v.match(floatRegex);\n return {\n [aName]: parseFloat(a),\n [bName]: parseFloat(b),\n [cName]: parseFloat(c),\n alpha: alpha !== undefined ? parseFloat(alpha) : 1,\n };\n};\n\nexport { isColorString, splitColor };\n","import { clamp } from '../../../utils/clamp.mjs';\nimport { alpha, number } from '../numbers/index.mjs';\nimport { sanitize } from '../utils/sanitize.mjs';\nimport { isColorString, splitColor } from './utils.mjs';\n\nconst clampRgbUnit = (v) => clamp(0, 255, v);\nconst rgbUnit = {\n ...number,\n transform: (v) => Math.round(clampRgbUnit(v)),\n};\nconst rgba = {\n test: /*@__PURE__*/ isColorString(\"rgb\", \"red\"),\n parse: /*@__PURE__*/ splitColor(\"red\", \"green\", \"blue\"),\n transform: ({ red, green, blue, alpha: alpha$1 = 1 }) => \"rgba(\" +\n rgbUnit.transform(red) +\n \", \" +\n rgbUnit.transform(green) +\n \", \" +\n rgbUnit.transform(blue) +\n \", \" +\n sanitize(alpha.transform(alpha$1)) +\n \")\",\n};\n\nexport { rgbUnit, rgba };\n","import { rgba } from './rgba.mjs';\nimport { isColorString } from './utils.mjs';\n\nfunction parseHex(v) {\n let r = \"\";\n let g = \"\";\n let b = \"\";\n let a = \"\";\n // If we have 6 characters, ie #FF0000\n if (v.length > 5) {\n r = v.substring(1, 3);\n g = v.substring(3, 5);\n b = v.substring(5, 7);\n a = v.substring(7, 9);\n // Or we have 3 characters, ie #F00\n }\n else {\n r = v.substring(1, 2);\n g = v.substring(2, 3);\n b = v.substring(3, 4);\n a = v.substring(4, 5);\n r += r;\n g += g;\n b += b;\n a += a;\n }\n return {\n red: parseInt(r, 16),\n green: parseInt(g, 16),\n blue: parseInt(b, 16),\n alpha: a ? parseInt(a, 16) / 255 : 1,\n };\n}\nconst hex = {\n test: /*@__PURE__*/ isColorString(\"#\"),\n parse: parseHex,\n transform: rgba.transform,\n};\n\nexport { hex };\n","import { alpha } from '../numbers/index.mjs';\nimport { percent } from '../numbers/units.mjs';\nimport { sanitize } from '../utils/sanitize.mjs';\nimport { isColorString, splitColor } from './utils.mjs';\n\nconst hsla = {\n test: /*@__PURE__*/ isColorString(\"hsl\", \"hue\"),\n parse: /*@__PURE__*/ splitColor(\"hue\", \"saturation\", \"lightness\"),\n transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {\n return (\"hsla(\" +\n Math.round(hue) +\n \", \" +\n percent.transform(sanitize(saturation)) +\n \", \" +\n percent.transform(sanitize(lightness)) +\n \", \" +\n sanitize(alpha.transform(alpha$1)) +\n \")\");\n },\n};\n\nexport { hsla };\n","import { hex } from './hex.mjs';\nimport { hsla } from './hsla.mjs';\nimport { rgba } from './rgba.mjs';\n\nconst color = {\n test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),\n parse: (v) => {\n if (rgba.test(v)) {\n return rgba.parse(v);\n }\n else if (hsla.test(v)) {\n return hsla.parse(v);\n }\n else {\n return hex.parse(v);\n }\n },\n transform: (v) => {\n return typeof v === \"string\"\n ? v\n : v.hasOwnProperty(\"red\")\n ? rgba.transform(v)\n : hsla.transform(v);\n },\n};\n\nexport { color };\n","const colorRegex = /(?:#[\\da-f]{3,8}|(?:rgb|hsl)a?\\((?:-?[\\d.]+%?[,\\s]+){2}-?[\\d.]+%?\\s*(?:[,/]\\s*)?(?:\\b\\d+(?:\\.\\d+)?|\\.\\d+)?%?\\))/giu;\n\nexport { colorRegex };\n","import { color } from '../color/index.mjs';\nimport { colorRegex } from '../utils/color-regex.mjs';\nimport { floatRegex } from '../utils/float-regex.mjs';\nimport { sanitize } from '../utils/sanitize.mjs';\n\nfunction test(v) {\n var _a, _b;\n return (isNaN(v) &&\n typeof v === \"string\" &&\n (((_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) || 0) +\n (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) >\n 0);\n}\nconst NUMBER_TOKEN = \"number\";\nconst COLOR_TOKEN = \"color\";\nconst VAR_TOKEN = \"var\";\nconst VAR_FUNCTION_TOKEN = \"var(\";\nconst SPLIT_TOKEN = \"${}\";\n// this regex consists of the `singleCssVariableRegex|rgbHSLValueRegex|digitRegex`\nconst complexRegex = /var\\s*\\(\\s*--(?:[\\w-]+\\s*|[\\w-]+\\s*,(?:\\s*[^)(\\s]|\\s*\\((?:[^)(]|\\([^)(]*\\))*\\))+\\s*)\\)|#[\\da-f]{3,8}|(?:rgb|hsl)a?\\((?:-?[\\d.]+%?[,\\s]+){2}-?[\\d.]+%?\\s*(?:[,/]\\s*)?(?:\\b\\d+(?:\\.\\d+)?|\\.\\d+)?%?\\)|-?(?:\\d+(?:\\.\\d+)?|\\.\\d+)/giu;\nfunction analyseComplexValue(value) {\n const originalValue = value.toString();\n const values = [];\n const indexes = {\n color: [],\n number: [],\n var: [],\n };\n const types = [];\n let i = 0;\n const tokenised = originalValue.replace(complexRegex, (parsedValue) => {\n if (color.test(parsedValue)) {\n indexes.color.push(i);\n types.push(COLOR_TOKEN);\n values.push(color.parse(parsedValue));\n }\n else if (parsedValue.startsWith(VAR_FUNCTION_TOKEN)) {\n indexes.var.push(i);\n types.push(VAR_TOKEN);\n values.push(parsedValue);\n }\n else {\n indexes.number.push(i);\n types.push(NUMBER_TOKEN);\n values.push(parseFloat(parsedValue));\n }\n ++i;\n return SPLIT_TOKEN;\n });\n const split = tokenised.split(SPLIT_TOKEN);\n return { values, split, indexes, types };\n}\nfunction parseComplexValue(v) {\n return analyseComplexValue(v).values;\n}\nfunction createTransformer(source) {\n const { split, types } = analyseComplexValue(source);\n const numSections = split.length;\n return (v) => {\n let output = \"\";\n for (let i = 0; i < numSections; i++) {\n output += split[i];\n if (v[i] !== undefined) {\n const type = types[i];\n if (type === NUMBER_TOKEN) {\n output += sanitize(v[i]);\n }\n else if (type === COLOR_TOKEN) {\n output += color.transform(v[i]);\n }\n else {\n output += v[i];\n }\n }\n }\n return output;\n };\n}\nconst convertNumbersToZero = (v) => typeof v === \"number\" ? 0 : v;\nfunction getAnimatableNone(v) {\n const parsed = parseComplexValue(v);\n const transformer = createTransformer(v);\n return transformer(parsed.map(convertNumbersToZero));\n}\nconst complex = {\n test,\n parse: parseComplexValue,\n createTransformer,\n getAnimatableNone,\n};\n\nexport { analyseComplexValue, complex };\n","import { complex } from './index.mjs';\nimport { floatRegex } from '../utils/float-regex.mjs';\n\n/**\n * Properties that should default to 1 or 100%\n */\nconst maxDefaults = new Set([\"brightness\", \"contrast\", \"saturate\", \"opacity\"]);\nfunction applyDefaultFilter(v) {\n const [name, value] = v.slice(0, -1).split(\"(\");\n if (name === \"drop-shadow\")\n return v;\n const [number] = value.match(floatRegex) || [];\n if (!number)\n return v;\n const unit = value.replace(number, \"\");\n let defaultValue = maxDefaults.has(name) ? 1 : 0;\n if (number !== value)\n defaultValue *= 100;\n return name + \"(\" + defaultValue + unit + \")\";\n}\nconst functionRegex = /\\b([a-z-]*)\\(.*?\\)/gu;\nconst filter = {\n ...complex,\n getAnimatableNone: (v) => {\n const functions = v.match(functionRegex);\n return functions ? functions.map(applyDefaultFilter).join(\" \") : v;\n },\n};\n\nexport { filter };\n","import { px } from '../../../value/types/numbers/units.mjs';\n\nconst browserNumberValueTypes = {\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 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 // Misc\n backgroundPositionX: px,\n backgroundPositionY: px,\n};\n\nexport { browserNumberValueTypes };\n","import { scale, alpha } from '../../../value/types/numbers/index.mjs';\nimport { degrees, px, progressPercentage } from '../../../value/types/numbers/units.mjs';\n\nconst transformValueTypes = {\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};\n\nexport { transformValueTypes };\n","import { number } from '../../../value/types/numbers/index.mjs';\n\nconst int = {\n ...number,\n transform: Math.round,\n};\n\nexport { int };\n","import { alpha } from '../../../value/types/numbers/index.mjs';\nimport { px } from '../../../value/types/numbers/units.mjs';\nimport { browserNumberValueTypes } from './number-browser.mjs';\nimport { transformValueTypes } from './transform.mjs';\nimport { int } from './type-int.mjs';\n\nconst numberValueTypes = {\n ...browserNumberValueTypes,\n ...transformValueTypes,\n zIndex: int,\n size: px,\n // SVG\n fillOpacity: alpha,\n strokeOpacity: alpha,\n numOctaves: int,\n};\n\nexport { numberValueTypes };\n","import { color } from '../../../value/types/color/index.mjs';\nimport { filter } from '../../../value/types/complex/filter.mjs';\nimport { numberValueTypes } from './number.mjs';\n\n/**\n * A map of default value types for common values\n */\nconst defaultValueTypes = {\n ...numberValueTypes,\n // Color props\n color,\n backgroundColor: color,\n outlineColor: color,\n fill: color,\n stroke: color,\n // Border props\n borderColor: color,\n borderTopColor: color,\n borderRightColor: color,\n borderBottomColor: color,\n borderLeftColor: color,\n filter,\n WebkitFilter: filter,\n};\n/**\n * Gets the default ValueType for the provided value key\n */\nconst getDefaultValueType = (key) => defaultValueTypes[key];\n\nexport { defaultValueTypes, getDefaultValueType };\n","import { complex } from '../../../value/types/complex/index.mjs';\nimport { filter } from '../../../value/types/complex/filter.mjs';\nimport { getDefaultValueType } from './defaults.mjs';\n\nfunction getAnimatableNone(key, value) {\n let defaultValueType = getDefaultValueType(key);\n if (defaultValueType !== filter)\n defaultValueType = complex;\n // If value is not recognised as animatable, ie \"none\", create an animatable version origin based on the target\n return defaultValueType.getAnimatableNone\n ? defaultValueType.getAnimatableNone(value)\n : undefined;\n}\n\nexport { getAnimatableNone };\n","import { analyseComplexValue } from '../../../value/types/complex/index.mjs';\nimport { getAnimatableNone } from '../../dom/value-types/animatable-none.mjs';\n\n/**\n * If we encounter keyframes like \"none\" or \"0\" and we also have keyframes like\n * \"#fff\" or \"200px 200px\" we want to find a keyframe to serve as a template for\n * the \"none\" keyframes. In this case \"#fff\" or \"200px 200px\" - then these get turned into\n * zero equivalents, i.e. \"#fff0\" or \"0px 0px\".\n */\nconst invalidTemplates = new Set([\"auto\", \"none\", \"0\"]);\nfunction makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name) {\n let i = 0;\n let animatableTemplate = undefined;\n while (i < unresolvedKeyframes.length && !animatableTemplate) {\n const keyframe = unresolvedKeyframes[i];\n if (typeof keyframe === \"string\" &&\n !invalidTemplates.has(keyframe) &&\n analyseComplexValue(keyframe).values.length) {\n animatableTemplate = unresolvedKeyframes[i];\n }\n i++;\n }\n if (animatableTemplate && name) {\n for (const noneIndex of noneKeyframeIndexes) {\n unresolvedKeyframes[noneIndex] = getAnimatableNone(name, animatableTemplate);\n }\n }\n}\n\nexport { makeNoneKeyframesAnimatable };\n","import { isNone } from '../../animation/utils/is-none.mjs';\nimport { getVariableValue } from './utils/css-variables-conversion.mjs';\nimport { isCSSVariableToken } from './utils/is-css-variable.mjs';\nimport { positionalKeys, isNumOrPxType, positionalValues } from './utils/unit-conversion.mjs';\nimport { findDimensionValueType } from './value-types/dimensions.mjs';\nimport { KeyframeResolver } from '../utils/KeyframesResolver.mjs';\nimport { makeNoneKeyframesAnimatable } from '../html/utils/make-none-animatable.mjs';\n\nclass DOMKeyframesResolver extends KeyframeResolver {\n constructor(unresolvedKeyframes, onComplete, name, motionValue, element) {\n super(unresolvedKeyframes, onComplete, name, motionValue, element, true);\n }\n readKeyframes() {\n const { unresolvedKeyframes, element, name } = this;\n if (!element || !element.current)\n return;\n super.readKeyframes();\n /**\n * If any keyframe is a CSS variable, we need to find its value by sampling the element\n */\n for (let i = 0; i < unresolvedKeyframes.length; i++) {\n let keyframe = unresolvedKeyframes[i];\n if (typeof keyframe === \"string\") {\n keyframe = keyframe.trim();\n if (isCSSVariableToken(keyframe)) {\n const resolved = getVariableValue(keyframe, element.current);\n if (resolved !== undefined) {\n unresolvedKeyframes[i] = resolved;\n }\n if (i === unresolvedKeyframes.length - 1) {\n this.finalKeyframe = keyframe;\n }\n }\n }\n }\n /**\n * Resolve \"none\" values. We do this potentially twice - once before and once after measuring keyframes.\n * This could be seen as inefficient but it's a trade-off to avoid measurements in more situations, which\n * have a far bigger performance impact.\n */\n this.resolveNoneKeyframes();\n /**\n * Check to see if unit type has changed. If so schedule jobs that will\n * temporarily set styles to the destination keyframes.\n * Skip if we have more than two keyframes or this isn't a positional value.\n * TODO: We can throw if there are multiple keyframes and the value type changes.\n */\n if (!positionalKeys.has(name) || unresolvedKeyframes.length !== 2) {\n return;\n }\n const [origin, target] = unresolvedKeyframes;\n const originType = findDimensionValueType(origin);\n const targetType = findDimensionValueType(target);\n /**\n * Either we don't recognise these value types or we can animate between them.\n */\n if (originType === targetType)\n return;\n /**\n * If both values are numbers or pixels, we can animate between them by\n * converting them to numbers.\n */\n if (isNumOrPxType(originType) && isNumOrPxType(targetType)) {\n for (let i = 0; i < unresolvedKeyframes.length; i++) {\n const value = unresolvedKeyframes[i];\n if (typeof value === \"string\") {\n unresolvedKeyframes[i] = parseFloat(value);\n }\n }\n }\n else {\n /**\n * Else, the only way to resolve this is by measuring the element.\n */\n this.needsMeasurement = true;\n }\n }\n resolveNoneKeyframes() {\n const { unresolvedKeyframes, name } = this;\n const noneKeyframeIndexes = [];\n for (let i = 0; i < unresolvedKeyframes.length; i++) {\n if (isNone(unresolvedKeyframes[i])) {\n noneKeyframeIndexes.push(i);\n }\n }\n if (noneKeyframeIndexes.length) {\n makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name);\n }\n }\n measureInitialState() {\n const { element, unresolvedKeyframes, name } = this;\n if (!element || !element.current)\n return;\n if (name === \"height\") {\n this.suspendedScrollY = window.pageYOffset;\n }\n this.measuredOrigin = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current));\n unresolvedKeyframes[0] = this.measuredOrigin;\n // Set final key frame to measure after next render\n const measureKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];\n if (measureKeyframe !== undefined) {\n element.getValue(name, measureKeyframe).jump(measureKeyframe, false);\n }\n }\n measureEndState() {\n var _a;\n const { element, name, unresolvedKeyframes } = this;\n if (!element || !element.current)\n return;\n const value = element.getValue(name);\n value && value.jump(this.measuredOrigin, false);\n const finalKeyframeIndex = unresolvedKeyframes.length - 1;\n const finalKeyframe = unresolvedKeyframes[finalKeyframeIndex];\n unresolvedKeyframes[finalKeyframeIndex] = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current));\n if (finalKeyframe !== null && this.finalKeyframe === undefined) {\n this.finalKeyframe = finalKeyframe;\n }\n // If we removed transform values, reapply them before the next render\n if ((_a = this.removedTransforms) === null || _a === void 0 ? void 0 : _a.length) {\n this.removedTransforms.forEach(([unsetTransformName, unsetTransformValue]) => {\n element\n .getValue(unsetTransformName)\n .set(unsetTransformValue);\n });\n }\n this.resolveNoneKeyframes();\n }\n}\n\nexport { DOMKeyframesResolver };\n","function isGenerator(type) {\n return typeof type === \"function\";\n}\n\nexport { isGenerator };\n","import { MotionGlobalConfig } from '../utils/GlobalConfig.mjs';\nimport { frameData } from './frame.mjs';\n\nlet now;\nfunction clearTime() {\n now = undefined;\n}\n/**\n * An eventloop-synchronous alternative to performance.now().\n *\n * Ensures that time measurements remain consistent within a synchronous context.\n * Usually calling performance.now() twice within the same synchronous context\n * will return different values which isn't useful for animations when we're usually\n * trying to sync animations to the same frame.\n */\nconst time = {\n now: () => {\n if (now === undefined) {\n time.set(frameData.isProcessing || MotionGlobalConfig.useManualTiming\n ? frameData.timestamp\n : performance.now());\n }\n return now;\n },\n set: (newTime) => {\n now = newTime;\n queueMicrotask(clearTime);\n },\n};\n\nexport { time };\n","import { complex } from '../../value/types/complex/index.mjs';\n\n/**\n * Check if a value is animatable. Examples:\n *\n * ā
: 100, \"100px\", \"#fff\"\n * ā: \"block\", \"url(2.jpg)\"\n * @param value\n *\n * @internal\n */\nconst isAnimatable = (value, name) => {\n // If the list of keys tat might be non-animatable grows, replace with Set\n if (name === \"zIndex\")\n return false;\n // If it's a number or a keyframes array, we can animate it. We might at some point\n // need to do a deep isAnimatable check of keyframes, or let Popmotion handle this,\n // but for now lets leave it like this for performance reasons\n if (typeof value === \"number\" || Array.isArray(value))\n return true;\n if (typeof value === \"string\" && // It's animatable if we have a string\n (complex.test(value) || value === \"0\") && // And it contains numbers and/or colors\n !value.startsWith(\"url(\") // Unless it starts with \"url(\"\n ) {\n return true;\n }\n return false;\n};\n\nexport { isAnimatable };\n","import { warning } from '../../../utils/errors.mjs';\nimport { isGenerator } from '../../generators/utils/is-generator.mjs';\nimport { isAnimatable } from '../../utils/is-animatable.mjs';\n\nfunction hasKeyframesChanged(keyframes) {\n const current = keyframes[0];\n if (keyframes.length === 1)\n return true;\n for (let i = 0; i < keyframes.length; i++) {\n if (keyframes[i] !== current)\n return true;\n }\n}\nfunction canAnimate(keyframes, name, type, velocity) {\n /**\n * Check if we're able to animate between the start and end keyframes,\n * and throw a warning if we're attempting to animate between one that's\n * animatable and another that isn't.\n */\n const originKeyframe = keyframes[0];\n if (originKeyframe === null)\n return false;\n /**\n * These aren't traditionally animatable but we do support them.\n * In future we could look into making this more generic or replacing\n * this function with mix() === mixImmediate\n */\n if (name === \"display\" || name === \"visibility\")\n return true;\n const targetKeyframe = keyframes[keyframes.length - 1];\n const isOriginAnimatable = isAnimatable(originKeyframe, name);\n const isTargetAnimatable = isAnimatable(targetKeyframe, name);\n warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${name} from \"${originKeyframe}\" to \"${targetKeyframe}\". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \\`style\\` property.`);\n // Always skip if any of these are true\n if (!isOriginAnimatable || !isTargetAnimatable) {\n return false;\n }\n return (hasKeyframesChanged(keyframes) ||\n ((type === \"spring\" || isGenerator(type)) && velocity));\n}\n\nexport { canAnimate };\n","import { time } from '../../frameloop/sync-time.mjs';\nimport { flushKeyframeResolvers } from '../../render/utils/KeyframesResolver.mjs';\nimport { instantAnimationState } from '../../utils/use-instant-transition-state.mjs';\nimport { canAnimate } from './utils/can-animate.mjs';\nimport { getFinalKeyframe } from './waapi/utils/get-final-keyframe.mjs';\n\n/**\n * Maximum time allowed between an animation being created and it being\n * resolved for us to use the latter as the start time.\n *\n * This is to ensure that while we prefer to \"start\" an animation as soon\n * as it's triggered, we also want to avoid a visual jump if there's a big delay\n * between these two moments.\n */\nconst MAX_RESOLVE_DELAY = 40;\nclass BaseAnimation {\n constructor({ autoplay = true, delay = 0, type = \"keyframes\", repeat = 0, repeatDelay = 0, repeatType = \"loop\", ...options }) {\n // Track whether the animation has been stopped. Stopped animations won't restart.\n this.isStopped = false;\n this.hasAttemptedResolve = false;\n this.createdAt = time.now();\n this.options = {\n autoplay,\n delay,\n type,\n repeat,\n repeatDelay,\n repeatType,\n ...options,\n };\n this.updateFinishedPromise();\n }\n /**\n * This method uses the createdAt and resolvedAt to calculate the\n * animation startTime. *Ideally*, we would use the createdAt time as t=0\n * as the following frame would then be the first frame of the animation in\n * progress, which would feel snappier.\n *\n * However, if there's a delay (main thread work) between the creation of\n * the animation and the first commited frame, we prefer to use resolvedAt\n * to avoid a sudden jump into the animation.\n */\n calcStartTime() {\n if (!this.resolvedAt)\n return this.createdAt;\n return this.resolvedAt - this.createdAt > MAX_RESOLVE_DELAY\n ? this.resolvedAt\n : this.createdAt;\n }\n /**\n * A getter for resolved data. If keyframes are not yet resolved, accessing\n * this.resolved will synchronously flush all pending keyframe resolvers.\n * This is a deoptimisation, but at its worst still batches read/writes.\n */\n get resolved() {\n if (!this._resolved && !this.hasAttemptedResolve) {\n flushKeyframeResolvers();\n }\n return this._resolved;\n }\n /**\n * A method to be called when the keyframes resolver completes. This method\n * will check if its possible to run the animation and, if not, skip it.\n * Otherwise, it will call initPlayback on the implementing class.\n */\n onKeyframesResolved(keyframes, finalKeyframe) {\n this.resolvedAt = time.now();\n this.hasAttemptedResolve = true;\n const { name, type, velocity, delay, onComplete, onUpdate, isGenerator, } = this.options;\n /**\n * If we can't animate this value with the resolved keyframes\n * then we should complete it immediately.\n */\n if (!isGenerator && !canAnimate(keyframes, name, type, velocity)) {\n // Finish immediately\n if (instantAnimationState.current || !delay) {\n onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(getFinalKeyframe(keyframes, this.options, finalKeyframe));\n onComplete === null || onComplete === void 0 ? void 0 : onComplete();\n this.resolveFinishedPromise();\n return;\n }\n // Finish after a delay\n else {\n this.options.duration = 0;\n }\n }\n const resolvedAnimation = this.initPlayback(keyframes, finalKeyframe);\n if (resolvedAnimation === false)\n return;\n this._resolved = {\n keyframes,\n finalKeyframe,\n ...resolvedAnimation,\n };\n this.onPostResolved();\n }\n onPostResolved() { }\n /**\n * Allows the returned animation to be awaited or promise-chained. Currently\n * resolves when the animation finishes at all but in a future update could/should\n * reject if its cancels.\n */\n then(resolve, reject) {\n return this.currentFinishedPromise.then(resolve, reject);\n }\n flatten() {\n this.options.type = \"keyframes\";\n this.options.ease = \"linear\";\n }\n updateFinishedPromise() {\n this.currentFinishedPromise = new Promise((resolve) => {\n this.resolveFinishedPromise = resolve;\n });\n }\n}\n\nexport { BaseAnimation };\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 { velocityPerSecond } from '../../../utils/velocity-per-second.mjs';\n\nconst velocitySampleDuration = 5; // ms\nfunction calcGeneratorVelocity(resolveValue, t, current) {\n const prevT = Math.max(t - velocitySampleDuration, 0);\n return velocityPerSecond(current - resolveValue(prevT), t - prevT);\n}\n\nexport { calcGeneratorVelocity };\n","import { warning } from '../../../utils/errors.mjs';\nimport { clamp } from '../../../utils/clamp.mjs';\nimport { secondsToMilliseconds, millisecondsToSeconds } from '../../../utils/time-conversion.mjs';\n\nconst safeMin = 0.001;\nconst minDuration = 0.01;\nconst maxDuration = 10.0;\nconst minDamping = 0.05;\nconst maxDamping = 1;\nfunction findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, }) {\n let envelope;\n let derivative;\n warning(duration <= secondsToMilliseconds(maxDuration), \"Spring duration must be 10 seconds or less\");\n let dampingRatio = 1 - bounce;\n /**\n * Restrict dampingRatio and duration to within acceptable ranges.\n */\n dampingRatio = clamp(minDamping, maxDamping, dampingRatio);\n duration = clamp(minDuration, maxDuration, millisecondsToSeconds(duration));\n if (dampingRatio < 1) {\n /**\n * Underdamped spring\n */\n envelope = (undampedFreq) => {\n const exponentialDecay = undampedFreq * dampingRatio;\n const delta = exponentialDecay * duration;\n const a = exponentialDecay - velocity;\n const b = calcAngularFreq(undampedFreq, dampingRatio);\n const c = Math.exp(-delta);\n return safeMin - (a / b) * c;\n };\n derivative = (undampedFreq) => {\n const exponentialDecay = undampedFreq * dampingRatio;\n const delta = exponentialDecay * duration;\n const d = delta * velocity + velocity;\n const e = Math.pow(dampingRatio, 2) * Math.pow(undampedFreq, 2) * duration;\n const f = Math.exp(-delta);\n const g = calcAngularFreq(Math.pow(undampedFreq, 2), dampingRatio);\n const factor = -envelope(undampedFreq) + safeMin > 0 ? -1 : 1;\n return (factor * ((d - e) * f)) / g;\n };\n }\n else {\n /**\n * Critically-damped spring\n */\n envelope = (undampedFreq) => {\n const a = Math.exp(-undampedFreq * duration);\n const b = (undampedFreq - velocity) * duration + 1;\n return -safeMin + a * b;\n };\n derivative = (undampedFreq) => {\n const a = Math.exp(-undampedFreq * duration);\n const b = (velocity - undampedFreq) * (duration * duration);\n return a * b;\n };\n }\n const initialGuess = 5 / duration;\n const undampedFreq = approximateRoot(envelope, derivative, initialGuess);\n duration = secondsToMilliseconds(duration);\n if (isNaN(undampedFreq)) {\n return {\n stiffness: 100,\n damping: 10,\n duration,\n };\n }\n else {\n const stiffness = Math.pow(undampedFreq, 2) * mass;\n return {\n stiffness,\n damping: dampingRatio * 2 * Math.sqrt(mass * stiffness),\n duration,\n };\n }\n}\nconst rootIterations = 12;\nfunction approximateRoot(envelope, derivative, initialGuess) {\n let result = initialGuess;\n for (let i = 1; i < rootIterations; i++) {\n result = result - envelope(result) / derivative(result);\n }\n return result;\n}\nfunction calcAngularFreq(undampedFreq, dampingRatio) {\n return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);\n}\n\nexport { calcAngularFreq, findSpring, maxDamping, maxDuration, minDamping, minDuration };\n","import { millisecondsToSeconds, secondsToMilliseconds } from '../../../utils/time-conversion.mjs';\nimport { calcGeneratorVelocity } from '../utils/velocity.mjs';\nimport { findSpring, calcAngularFreq } from './find.mjs';\n\nconst durationKeys = [\"duration\", \"bounce\"];\nconst physicsKeys = [\"stiffness\", \"damping\", \"mass\"];\nfunction isSpringType(options, keys) {\n return keys.some((key) => options[key] !== undefined);\n}\nfunction getSpringOptions(options) {\n let springOptions = {\n velocity: 0.0,\n stiffness: 100,\n damping: 10,\n mass: 1.0,\n isResolvedFromDuration: false,\n ...options,\n };\n // stiffness/damping/mass overrides duration/bounce\n if (!isSpringType(options, physicsKeys) &&\n isSpringType(options, durationKeys)) {\n const derived = findSpring(options);\n springOptions = {\n ...springOptions,\n ...derived,\n mass: 1.0,\n };\n springOptions.isResolvedFromDuration = true;\n }\n return springOptions;\n}\nfunction spring({ keyframes, restDelta, restSpeed, ...options }) {\n const origin = keyframes[0];\n const target = keyframes[keyframes.length - 1];\n /**\n * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator\n * to reduce GC during animation.\n */\n const state = { done: false, value: origin };\n const { stiffness, damping, mass, duration, velocity, isResolvedFromDuration, } = getSpringOptions({\n ...options,\n velocity: -millisecondsToSeconds(options.velocity || 0),\n });\n const initialVelocity = velocity || 0.0;\n const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));\n const initialDelta = target - origin;\n const undampedAngularFreq = millisecondsToSeconds(Math.sqrt(stiffness / mass));\n /**\n * If we're working on a granular scale, use smaller defaults for determining\n * when the spring is finished.\n *\n * These defaults have been selected emprically based on what strikes a good\n * ratio between feeling good and finishing as soon as changes are imperceptible.\n */\n const isGranularScale = Math.abs(initialDelta) < 5;\n restSpeed || (restSpeed = isGranularScale ? 0.01 : 2);\n restDelta || (restDelta = isGranularScale ? 0.005 : 0.5);\n let resolveSpring;\n if (dampingRatio < 1) {\n const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);\n // Underdamped spring\n resolveSpring = (t) => {\n const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);\n return (target -\n envelope *\n (((initialVelocity +\n dampingRatio * undampedAngularFreq * initialDelta) /\n angularFreq) *\n Math.sin(angularFreq * t) +\n initialDelta * Math.cos(angularFreq * t)));\n };\n }\n else if (dampingRatio === 1) {\n // Critically damped spring\n resolveSpring = (t) => target -\n Math.exp(-undampedAngularFreq * t) *\n (initialDelta +\n (initialVelocity + undampedAngularFreq * initialDelta) * t);\n }\n else {\n // Overdamped spring\n const dampedAngularFreq = undampedAngularFreq * Math.sqrt(dampingRatio * dampingRatio - 1);\n resolveSpring = (t) => {\n const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);\n // When performing sinh or cosh values can hit Infinity so we cap them here\n const freqForT = Math.min(dampedAngularFreq * t, 300);\n return (target -\n (envelope *\n ((initialVelocity +\n dampingRatio * undampedAngularFreq * initialDelta) *\n Math.sinh(freqForT) +\n dampedAngularFreq *\n initialDelta *\n Math.cosh(freqForT))) /\n dampedAngularFreq);\n };\n }\n return {\n calculatedDuration: isResolvedFromDuration ? duration || null : null,\n next: (t) => {\n const current = resolveSpring(t);\n if (!isResolvedFromDuration) {\n let currentVelocity = 0.0;\n /**\n * We only need to calculate velocity for under-damped springs\n * as over- and critically-damped springs can't overshoot, so\n * checking only for displacement is enough.\n */\n if (dampingRatio < 1) {\n currentVelocity =\n t === 0\n ? secondsToMilliseconds(initialVelocity)\n : calcGeneratorVelocity(resolveSpring, t, current);\n }\n const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;\n const isBelowDisplacementThreshold = Math.abs(target - current) <= restDelta;\n state.done =\n isBelowVelocityThreshold && isBelowDisplacementThreshold;\n }\n else {\n state.done = t >= duration;\n }\n state.value = state.done ? target : current;\n return state;\n },\n };\n}\n\nexport { spring };\n","import { spring } from './spring/index.mjs';\nimport { calcGeneratorVelocity } from './utils/velocity.mjs';\n\nfunction inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min, max, restDelta = 0.5, restSpeed, }) {\n const origin = keyframes[0];\n const state = {\n done: false,\n value: origin,\n };\n const isOutOfBounds = (v) => (min !== undefined && v < min) || (max !== undefined && v > max);\n const nearestBoundary = (v) => {\n if (min === undefined)\n return max;\n if (max === undefined)\n return min;\n return Math.abs(min - v) < Math.abs(max - v) ? min : max;\n };\n let amplitude = power * velocity;\n const ideal = origin + amplitude;\n const target = modifyTarget === undefined ? ideal : modifyTarget(ideal);\n /**\n * If the target has changed we need to re-calculate the amplitude, otherwise\n * the animation will start from the wrong position.\n */\n if (target !== ideal)\n amplitude = target - origin;\n const calcDelta = (t) => -amplitude * Math.exp(-t / timeConstant);\n const calcLatest = (t) => target + calcDelta(t);\n const applyFriction = (t) => {\n const delta = calcDelta(t);\n const latest = calcLatest(t);\n state.done = Math.abs(delta) <= restDelta;\n state.value = state.done ? target : latest;\n };\n /**\n * Ideally this would resolve for t in a stateless way, we could\n * do that by always precalculating the animation but as we know\n * this will be done anyway we can assume that spring will\n * be discovered during that.\n */\n let timeReachedBoundary;\n let spring$1;\n const checkCatchBoundary = (t) => {\n if (!isOutOfBounds(state.value))\n return;\n timeReachedBoundary = t;\n spring$1 = spring({\n keyframes: [state.value, nearestBoundary(state.value)],\n velocity: calcGeneratorVelocity(calcLatest, t, state.value), // TODO: This should be passing * 1000\n damping: bounceDamping,\n stiffness: bounceStiffness,\n restDelta,\n restSpeed,\n });\n };\n checkCatchBoundary(0);\n return {\n calculatedDuration: null,\n next: (t) => {\n /**\n * We need to resolve the friction to figure out if we need a\n * spring but we don't want to do this twice per frame. So here\n * we flag if we updated for this frame and later if we did\n * we can skip doing it again.\n */\n let hasUpdatedFrame = false;\n if (!spring$1 && timeReachedBoundary === undefined) {\n hasUpdatedFrame = true;\n applyFriction(t);\n checkCatchBoundary(t);\n }\n /**\n * If we have a spring and the provided t is beyond the moment the friction\n * animation crossed the min/max boundary, use the spring.\n */\n if (timeReachedBoundary !== undefined && t >= timeReachedBoundary) {\n return spring$1.next(t - timeReachedBoundary);\n }\n else {\n !hasUpdatedFrame && applyFriction(t);\n return state;\n }\n },\n };\n}\n\nexport { inertia };\n","import { cubicBezier } from './cubic-bezier.mjs';\n\nconst easeIn = /*@__PURE__*/ cubicBezier(0.42, 0, 1, 1);\nconst easeOut = /*@__PURE__*/ cubicBezier(0, 0, 0.58, 1);\nconst easeInOut = /*@__PURE__*/ cubicBezier(0.42, 0, 0.58, 1);\n\nexport { easeIn, easeInOut, easeOut };\n","const isEasingArray = (ease) => {\n return Array.isArray(ease) && typeof ease[0] !== \"number\";\n};\n\nexport { isEasingArray };\n","const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === \"number\";\n\nexport { isBezierDefinition };\n","import { invariant } from '../../utils/errors.mjs';\nimport { cubicBezier } from '../cubic-bezier.mjs';\nimport { noop } from '../../utils/noop.mjs';\nimport { easeIn, easeInOut, easeOut } from '../ease.mjs';\nimport { circIn, circInOut, circOut } from '../circ.mjs';\nimport { backIn, backInOut, backOut } from '../back.mjs';\nimport { anticipate } from '../anticipate.mjs';\nimport { isBezierDefinition } from './is-bezier-definition.mjs';\n\nconst easingLookup = {\n linear: noop,\n easeIn,\n easeInOut,\n easeOut,\n circIn,\n circInOut,\n circOut,\n backIn,\n backInOut,\n backOut,\n anticipate,\n};\nconst easingDefinitionToFunction = (definition) => {\n if (isBezierDefinition(definition)) {\n // If cubic bezier definition, create bezier curve\n invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);\n const [x1, y1, x2, y2] = definition;\n return cubicBezier(x1, y1, x2, y2);\n }\n else if (typeof definition === \"string\") {\n // Else lookup from table\n invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`);\n return easingLookup[definition];\n }\n return definition;\n};\n\nexport { easingDefinitionToFunction };\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","/*\n Progress within given range\n\n Given a lower limit and an upper limit, we return the progress\n (expressed as a number 0-1) represented by the given value, and\n limit that progress to within 0-1.\n\n @param [number]: Lower limit\n @param [number]: Upper limit\n @param [number]: Value to find progress within given range\n @return [number]: Progress of value within range as expressed 0-1\n*/\nconst progress = (from, to, value) => {\n const toFromDifference = to - from;\n return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;\n};\n\nexport { progress };\n","/*\n Value in range from progress\n\n Given a lower limit and an upper limit, we return the value within\n that range as expressed by progress (usually a number from 0 to 1)\n\n So progress = 0.5 would change\n\n from -------- to\n\n to\n\n from ---- to\n\n E.g. from = 10, to = 20, progress = 0.5 => 15\n\n @param [number]: Lower limit of range\n @param [number]: Upper limit of range\n @param [number]: The progress between lower and upper limits expressed 0-1\n @return [number]: Value as calculated from progress within range (not limited within range)\n*/\nconst mixNumber = (from, to, progress) => {\n return from + (to - from) * progress;\n};\n\nexport { mixNumber };\n","// Adapted from https://gist.github.com/mjackson/5311256\nfunction hueToRgb(p, q, t) {\n if (t < 0)\n t += 1;\n if (t > 1)\n t -= 1;\n if (t < 1 / 6)\n return p + (q - p) * 6 * t;\n if (t < 1 / 2)\n return q;\n if (t < 2 / 3)\n return p + (q - p) * (2 / 3 - t) * 6;\n return p;\n}\nfunction hslaToRgba({ hue, saturation, lightness, alpha }) {\n hue /= 360;\n saturation /= 100;\n lightness /= 100;\n let red = 0;\n let green = 0;\n let blue = 0;\n if (!saturation) {\n red = green = blue = lightness;\n }\n else {\n const q = lightness < 0.5\n ? lightness * (1 + saturation)\n : lightness + saturation - lightness * saturation;\n const p = 2 * lightness - q;\n red = hueToRgb(p, q, hue + 1 / 3);\n green = hueToRgb(p, q, hue);\n blue = hueToRgb(p, q, hue - 1 / 3);\n }\n return {\n red: Math.round(red * 255),\n green: Math.round(green * 255),\n blue: Math.round(blue * 255),\n alpha,\n };\n}\n\nexport { hslaToRgba };\n","function mixImmediate(a, b) {\n return (p) => (p > 0 ? b : a);\n}\n\nexport { mixImmediate };\n","import { mixNumber } from './number.mjs';\nimport { warning } from '../errors.mjs';\nimport { hslaToRgba } from '../hsla-to-rgba.mjs';\nimport { hex } from '../../value/types/color/hex.mjs';\nimport { rgba } from '../../value/types/color/rgba.mjs';\nimport { hsla } from '../../value/types/color/hsla.mjs';\nimport { mixImmediate } from './immediate.mjs';\n\n// Linear color space blending\n// Explained https://www.youtube.com/watch?v=LKnqECcg6Gw\n// Demonstrated http://codepen.io/osublake/pen/xGVVaN\nconst mixLinearColor = (from, to, v) => {\n const fromExpo = from * from;\n const expo = v * (to * to - fromExpo) + fromExpo;\n return expo < 0 ? 0 : Math.sqrt(expo);\n};\nconst colorTypes = [hex, rgba, hsla];\nconst getColorType = (v) => colorTypes.find((type) => type.test(v));\nfunction asRGBA(color) {\n const type = getColorType(color);\n warning(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);\n if (!Boolean(type))\n return false;\n let model = type.parse(color);\n if (type === hsla) {\n // TODO Remove this cast - needed since Motion's stricter typing\n model = hslaToRgba(model);\n }\n return model;\n}\nconst mixColor = (from, to) => {\n const fromRGBA = asRGBA(from);\n const toRGBA = asRGBA(to);\n if (!fromRGBA || !toRGBA) {\n return mixImmediate(from, to);\n }\n const blended = { ...fromRGBA };\n return (v) => {\n blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v);\n blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v);\n blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v);\n blended.alpha = mixNumber(fromRGBA.alpha, toRGBA.alpha, v);\n return rgba.transform(blended);\n };\n};\n\nexport { mixColor, mixLinearColor };\n","const invisibleValues = new Set([\"none\", \"hidden\"]);\n/**\n * Returns a function that, when provided a progress value between 0 and 1,\n * will return the \"none\" or \"hidden\" string only when the progress is that of\n * the origin or target.\n */\nfunction mixVisibility(origin, target) {\n if (invisibleValues.has(origin)) {\n return (p) => (p <= 0 ? origin : target);\n }\n else {\n return (p) => (p >= 1 ? target : origin);\n }\n}\n\nexport { invisibleValues, mixVisibility };\n","import { mixNumber as mixNumber$1 } from './number.mjs';\nimport { mixColor } from './color.mjs';\nimport { pipe } from '../pipe.mjs';\nimport { warning } from '../errors.mjs';\nimport { color } from '../../value/types/color/index.mjs';\nimport { complex, analyseComplexValue } from '../../value/types/complex/index.mjs';\nimport { isCSSVariableToken } from '../../render/dom/utils/is-css-variable.mjs';\nimport { invisibleValues, mixVisibility } from './visibility.mjs';\nimport { mixImmediate } from './immediate.mjs';\n\nfunction mixNumber(a, b) {\n return (p) => mixNumber$1(a, b, p);\n}\nfunction getMixer(a) {\n if (typeof a === \"number\") {\n return mixNumber;\n }\n else if (typeof a === \"string\") {\n return isCSSVariableToken(a)\n ? mixImmediate\n : color.test(a)\n ? mixColor\n : mixComplex;\n }\n else if (Array.isArray(a)) {\n return mixArray;\n }\n else if (typeof a === \"object\") {\n return color.test(a) ? mixColor : mixObject;\n }\n return mixImmediate;\n}\nfunction mixArray(a, b) {\n const output = [...a];\n const numValues = output.length;\n const blendValue = a.map((v, i) => getMixer(v)(v, b[i]));\n return (p) => {\n for (let i = 0; i < numValues; i++) {\n output[i] = blendValue[i](p);\n }\n return output;\n };\n}\nfunction mixObject(a, b) {\n const output = { ...a, ...b };\n const blendValue = {};\n for (const key in output) {\n if (a[key] !== undefined && b[key] !== undefined) {\n blendValue[key] = getMixer(a[key])(a[key], b[key]);\n }\n }\n return (v) => {\n for (const key in blendValue) {\n output[key] = blendValue[key](v);\n }\n return output;\n };\n}\nfunction matchOrder(origin, target) {\n var _a;\n const orderedOrigin = [];\n const pointers = { color: 0, var: 0, number: 0 };\n for (let i = 0; i < target.values.length; i++) {\n const type = target.types[i];\n const originIndex = origin.indexes[type][pointers[type]];\n const originValue = (_a = origin.values[originIndex]) !== null && _a !== void 0 ? _a : 0;\n orderedOrigin[i] = originValue;\n pointers[type]++;\n }\n return orderedOrigin;\n}\nconst mixComplex = (origin, target) => {\n const template = complex.createTransformer(target);\n const originStats = analyseComplexValue(origin);\n const targetStats = analyseComplexValue(target);\n const canInterpolate = originStats.indexes.var.length === targetStats.indexes.var.length &&\n originStats.indexes.color.length === targetStats.indexes.color.length &&\n originStats.indexes.number.length >= targetStats.indexes.number.length;\n if (canInterpolate) {\n if ((invisibleValues.has(origin) &&\n !targetStats.values.length) ||\n (invisibleValues.has(target) &&\n !originStats.values.length)) {\n return mixVisibility(origin, target);\n }\n return pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), template);\n }\n else {\n warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);\n return mixImmediate(origin, target);\n }\n};\n\nexport { getMixer, mixArray, mixComplex, mixObject };\n","import { getMixer } from './complex.mjs';\nimport { mixNumber } from './number.mjs';\n\nfunction mix(from, to, p) {\n if (typeof from === \"number\" &&\n typeof to === \"number\" &&\n typeof p === \"number\") {\n return mixNumber(from, to, p);\n }\n const mixer = getMixer(from);\n return mixer(from, to);\n}\n\nexport { mix };\n","import { invariant } from './errors.mjs';\nimport { clamp } from './clamp.mjs';\nimport { pipe } from './pipe.mjs';\nimport { progress } from './progress.mjs';\nimport { noop } from './noop.mjs';\nimport { mix } from './mix/index.mjs';\n\nfunction createMixers(output, ease, customMixer) {\n const mixers = [];\n const mixerFactory = customMixer || mix;\n const numMixers = output.length - 1;\n for (let i = 0; i < numMixers; i++) {\n let mixer = mixerFactory(output[i], output[i + 1]);\n if (ease) {\n const easingFunction = Array.isArray(ease) ? ease[i] || noop : ease;\n mixer = pipe(easingFunction, mixer);\n }\n mixers.push(mixer);\n }\n return mixers;\n}\n/**\n * Create a function that maps from a numerical input array to a generic output array.\n *\n * Accepts:\n * - Numbers\n * - Colors (hex, hsl, hsla, rgb, rgba)\n * - Complex (combinations of one or more numbers or strings)\n *\n * ```jsx\n * const mixColor = interpolate([0, 1], ['#fff', '#000'])\n *\n * mixColor(0.5) // 'rgba(128, 128, 128, 1)'\n * ```\n *\n * TODO Revist this approach once we've moved to data models for values,\n * probably not needed to pregenerate mixer functions.\n *\n * @public\n */\nfunction interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) {\n const inputLength = input.length;\n invariant(inputLength === output.length, \"Both input and output ranges must be the same length\");\n /**\n * If we're only provided a single input, we can just make a function\n * that returns the output.\n */\n if (inputLength === 1)\n return () => output[0];\n if (inputLength === 2 && input[0] === input[1])\n return () => output[1];\n // If input runs highest -> lowest, reverse both arrays\n if (input[0] > input[inputLength - 1]) {\n input = [...input].reverse();\n output = [...output].reverse();\n }\n const mixers = createMixers(output, ease, mixer);\n const numMixers = mixers.length;\n const interpolator = (v) => {\n let i = 0;\n if (numMixers > 1) {\n for (; i < input.length - 2; i++) {\n if (v < input[i + 1])\n break;\n }\n }\n const progressInRange = progress(input[i], input[i + 1], v);\n return mixers[i](progressInRange);\n };\n return isClamp\n ? (v) => interpolator(clamp(input[0], input[inputLength - 1], v))\n : interpolator;\n}\n\nexport { interpolate };\n","import { mixNumber } from '../mix/number.mjs';\nimport { progress } from '../progress.mjs';\n\nfunction fillOffset(offset, remaining) {\n const min = offset[offset.length - 1];\n for (let i = 1; i <= remaining; i++) {\n const offsetProgress = progress(0, remaining, i);\n offset.push(mixNumber(min, 1, offsetProgress));\n }\n}\n\nexport { fillOffset };\n","import { fillOffset } from './fill.mjs';\n\nfunction defaultOffset(arr) {\n const offset = [0];\n fillOffset(offset, arr.length - 1);\n return offset;\n}\n\nexport { defaultOffset };\n","function convertOffsetToTimes(offset, duration) {\n return offset.map((o) => o * duration);\n}\n\nexport { convertOffsetToTimes };\n","import { easeInOut } from '../../easing/ease.mjs';\nimport { isEasingArray } from '../../easing/utils/is-easing-array.mjs';\nimport { easingDefinitionToFunction } from '../../easing/utils/map.mjs';\nimport { interpolate } from '../../utils/interpolate.mjs';\nimport { defaultOffset } from '../../utils/offsets/default.mjs';\nimport { convertOffsetToTimes } from '../../utils/offsets/time.mjs';\n\nfunction defaultEasing(values, easing) {\n return values.map(() => easing || easeInOut).splice(0, values.length - 1);\n}\nfunction keyframes({ duration = 300, keyframes: keyframeValues, times, ease = \"easeInOut\", }) {\n /**\n * Easing functions can be externally defined as strings. Here we convert them\n * into actual functions.\n */\n const easingFunctions = isEasingArray(ease)\n ? ease.map(easingDefinitionToFunction)\n : easingDefinitionToFunction(ease);\n /**\n * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator\n * to reduce GC during animation.\n */\n const state = {\n done: false,\n value: keyframeValues[0],\n };\n /**\n * Create a times array based on the provided 0-1 offsets\n */\n const absoluteTimes = convertOffsetToTimes(\n // Only use the provided offsets if they're the correct length\n // TODO Maybe we should warn here if there's a length mismatch\n times && times.length === keyframeValues.length\n ? times\n : defaultOffset(keyframeValues), duration);\n const mapTimeToKeyframe = interpolate(absoluteTimes, keyframeValues, {\n ease: Array.isArray(easingFunctions)\n ? easingFunctions\n : defaultEasing(keyframeValues, easingFunctions),\n });\n return {\n calculatedDuration: duration,\n next: (t) => {\n state.value = mapTimeToKeyframe(t);\n state.done = t >= duration;\n return state;\n },\n };\n}\n\nexport { defaultEasing, keyframes };\n","/**\n * Implement a practical max duration for keyframe generation\n * to prevent infinite loops\n */\nconst maxGeneratorDuration = 20000;\nfunction calcGeneratorDuration(generator) {\n let duration = 0;\n const timeStep = 50;\n let state = generator.next(duration);\n while (!state.done && duration < maxGeneratorDuration) {\n duration += timeStep;\n state = generator.next(duration);\n }\n return duration >= maxGeneratorDuration ? Infinity : duration;\n}\n\nexport { calcGeneratorDuration, maxGeneratorDuration };\n","import { time } from '../../../frameloop/sync-time.mjs';\nimport { frame, cancelFrame, frameData } from '../../../frameloop/frame.mjs';\n\nconst frameloopDriver = (update) => {\n const passTimestamp = ({ timestamp }) => update(timestamp);\n return {\n start: () => frame.update(passTimestamp, true),\n stop: () => cancelFrame(passTimestamp),\n /**\n * If we're processing this frame we can use the\n * framelocked timestamp to keep things in sync.\n */\n now: () => (frameData.isProcessing ? frameData.timestamp : time.now()),\n };\n};\n\nexport { frameloopDriver };\n","import { KeyframeResolver } from '../../render/utils/KeyframesResolver.mjs';\nimport { spring } from '../generators/spring/index.mjs';\nimport { inertia } from '../generators/inertia.mjs';\nimport { keyframes } from '../generators/keyframes.mjs';\nimport { BaseAnimation } from './BaseAnimation.mjs';\nimport { pipe } from '../../utils/pipe.mjs';\nimport { mix } from '../../utils/mix/index.mjs';\nimport { calcGeneratorDuration } from '../generators/utils/calc-duration.mjs';\nimport { millisecondsToSeconds, secondsToMilliseconds } from '../../utils/time-conversion.mjs';\nimport { clamp } from '../../utils/clamp.mjs';\nimport { invariant } from '../../utils/errors.mjs';\nimport { frameloopDriver } from './drivers/driver-frameloop.mjs';\nimport { getFinalKeyframe } from './waapi/utils/get-final-keyframe.mjs';\nimport { isGenerator } from '../generators/utils/is-generator.mjs';\n\nconst generators = {\n decay: inertia,\n inertia,\n tween: keyframes,\n keyframes: keyframes,\n spring,\n};\nconst percentToProgress = (percent) => percent / 100;\n/**\n * Animation that runs on the main thread. Designed to be WAAPI-spec in the subset of\n * features we expose publically. Mostly the compatibility is to ensure visual identity\n * between both WAAPI and main thread animations.\n */\nclass MainThreadAnimation extends BaseAnimation {\n constructor(options) {\n super(options);\n /**\n * The time at which the animation was paused.\n */\n this.holdTime = null;\n /**\n * The time at which the animation was cancelled.\n */\n this.cancelTime = null;\n /**\n * The current time of the animation.\n */\n this.currentTime = 0;\n /**\n * Playback speed as a factor. 0 would be stopped, -1 reverse and 2 double speed.\n */\n this.playbackSpeed = 1;\n /**\n * The state of the animation to apply when the animation is resolved. This\n * allows calls to the public API to control the animation before it is resolved,\n * without us having to resolve it first.\n */\n this.pendingPlayState = \"running\";\n /**\n * The time at which the animation was started.\n */\n this.startTime = null;\n this.state = \"idle\";\n /**\n * This method is bound to the instance to fix a pattern where\n * animation.stop is returned as a reference from a useEffect.\n */\n this.stop = () => {\n this.resolver.cancel();\n this.isStopped = true;\n if (this.state === \"idle\")\n return;\n this.teardown();\n const { onStop } = this.options;\n onStop && onStop();\n };\n const { name, motionValue, element, keyframes } = this.options;\n const KeyframeResolver$1 = (element === null || element === void 0 ? void 0 : element.KeyframeResolver) || KeyframeResolver;\n const onResolved = (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe);\n this.resolver = new KeyframeResolver$1(keyframes, onResolved, name, motionValue, element);\n this.resolver.scheduleResolve();\n }\n flatten() {\n super.flatten();\n // If we've already resolved the animation, re-initialise it\n if (this._resolved) {\n Object.assign(this._resolved, this.initPlayback(this._resolved.keyframes));\n }\n }\n initPlayback(keyframes$1) {\n const { type = \"keyframes\", repeat = 0, repeatDelay = 0, repeatType, velocity = 0, } = this.options;\n const generatorFactory = isGenerator(type)\n ? type\n : generators[type] || keyframes;\n /**\n * If our generator doesn't support mixing numbers, we need to replace keyframes with\n * [0, 100] and then make a function that maps that to the actual keyframes.\n *\n * 100 is chosen instead of 1 as it works nicer with spring animations.\n */\n let mapPercentToKeyframes;\n let mirroredGenerator;\n if (generatorFactory !== keyframes &&\n typeof keyframes$1[0] !== \"number\") {\n if (process.env.NODE_ENV !== \"production\") {\n invariant(keyframes$1.length === 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes$1}`);\n }\n mapPercentToKeyframes = pipe(percentToProgress, mix(keyframes$1[0], keyframes$1[1]));\n keyframes$1 = [0, 100];\n }\n const generator = generatorFactory({ ...this.options, keyframes: keyframes$1 });\n /**\n * If we have a mirror repeat type we need to create a second generator that outputs the\n * mirrored (not reversed) animation and later ping pong between the two generators.\n */\n if (repeatType === \"mirror\") {\n mirroredGenerator = generatorFactory({\n ...this.options,\n keyframes: [...keyframes$1].reverse(),\n velocity: -velocity,\n });\n }\n /**\n * If duration is undefined and we have repeat options,\n * we need to calculate a duration from the generator.\n *\n * We set it to the generator itself to cache the duration.\n * Any timeline resolver will need to have already precalculated\n * the duration by this step.\n */\n if (generator.calculatedDuration === null) {\n generator.calculatedDuration = calcGeneratorDuration(generator);\n }\n const { calculatedDuration } = generator;\n const resolvedDuration = calculatedDuration + repeatDelay;\n const totalDuration = resolvedDuration * (repeat + 1) - repeatDelay;\n return {\n generator,\n mirroredGenerator,\n mapPercentToKeyframes,\n calculatedDuration,\n resolvedDuration,\n totalDuration,\n };\n }\n onPostResolved() {\n const { autoplay = true } = this.options;\n this.play();\n if (this.pendingPlayState === \"paused\" || !autoplay) {\n this.pause();\n }\n else {\n this.state = this.pendingPlayState;\n }\n }\n tick(timestamp, sample = false) {\n const { resolved } = this;\n // If the animations has failed to resolve, return the final keyframe.\n if (!resolved) {\n const { keyframes } = this.options;\n return { done: true, value: keyframes[keyframes.length - 1] };\n }\n const { finalKeyframe, generator, mirroredGenerator, mapPercentToKeyframes, keyframes, calculatedDuration, totalDuration, resolvedDuration, } = resolved;\n if (this.startTime === null)\n return generator.next(0);\n const { delay, repeat, repeatType, repeatDelay, onUpdate } = this.options;\n /**\n * requestAnimationFrame timestamps can come through as lower than\n * the startTime as set by performance.now(). Here we prevent this,\n * though in the future it could be possible to make setting startTime\n * a pending operation that gets resolved here.\n */\n if (this.speed > 0) {\n this.startTime = Math.min(this.startTime, timestamp);\n }\n else if (this.speed < 0) {\n this.startTime = Math.min(timestamp - totalDuration / this.speed, this.startTime);\n }\n // Update currentTime\n if (sample) {\n this.currentTime = timestamp;\n }\n else if (this.holdTime !== null) {\n this.currentTime = this.holdTime;\n }\n else {\n // Rounding the time because floating point arithmetic is not always accurate, e.g. 3000.367 - 1000.367 =\n // 2000.0000000000002. This is a problem when we are comparing the currentTime with the duration, for\n // example.\n this.currentTime =\n Math.round(timestamp - this.startTime) * this.speed;\n }\n // Rebase on delay\n const timeWithoutDelay = this.currentTime - delay * (this.speed >= 0 ? 1 : -1);\n const isInDelayPhase = this.speed >= 0\n ? timeWithoutDelay < 0\n : timeWithoutDelay > totalDuration;\n this.currentTime = Math.max(timeWithoutDelay, 0);\n // If this animation has finished, set the current time to the total duration.\n if (this.state === \"finished\" && this.holdTime === null) {\n this.currentTime = totalDuration;\n }\n let elapsed = this.currentTime;\n let frameGenerator = generator;\n if (repeat) {\n /**\n * Get the current progress (0-1) of the animation. If t is >\n * than duration we'll get values like 2.5 (midway through the\n * third iteration)\n */\n const progress = Math.min(this.currentTime, totalDuration) / resolvedDuration;\n /**\n * Get the current iteration (0 indexed). For instance the floor of\n * 2.5 is 2.\n */\n let currentIteration = Math.floor(progress);\n /**\n * Get the current progress of the iteration by taking the remainder\n * so 2.5 is 0.5 through iteration 2\n */\n let iterationProgress = progress % 1.0;\n /**\n * If iteration progress is 1 we count that as the end\n * of the previous iteration.\n */\n if (!iterationProgress && progress >= 1) {\n iterationProgress = 1;\n }\n iterationProgress === 1 && currentIteration--;\n currentIteration = Math.min(currentIteration, repeat + 1);\n /**\n * Reverse progress if we're not running in \"normal\" direction\n */\n const isOddIteration = Boolean(currentIteration % 2);\n if (isOddIteration) {\n if (repeatType === \"reverse\") {\n iterationProgress = 1 - iterationProgress;\n if (repeatDelay) {\n iterationProgress -= repeatDelay / resolvedDuration;\n }\n }\n else if (repeatType === \"mirror\") {\n frameGenerator = mirroredGenerator;\n }\n }\n elapsed = clamp(0, 1, iterationProgress) * resolvedDuration;\n }\n /**\n * If we're in negative time, set state as the initial keyframe.\n * This prevents delay: x, duration: 0 animations from finishing\n * instantly.\n */\n const state = isInDelayPhase\n ? { done: false, value: keyframes[0] }\n : frameGenerator.next(elapsed);\n if (mapPercentToKeyframes) {\n state.value = mapPercentToKeyframes(state.value);\n }\n let { done } = state;\n if (!isInDelayPhase && calculatedDuration !== null) {\n done =\n this.speed >= 0\n ? this.currentTime >= totalDuration\n : this.currentTime <= 0;\n }\n const isAnimationFinished = this.holdTime === null &&\n (this.state === \"finished\" || (this.state === \"running\" && done));\n if (isAnimationFinished && finalKeyframe !== undefined) {\n state.value = getFinalKeyframe(keyframes, this.options, finalKeyframe);\n }\n if (onUpdate) {\n onUpdate(state.value);\n }\n if (isAnimationFinished) {\n this.finish();\n }\n return state;\n }\n get duration() {\n const { resolved } = this;\n return resolved ? millisecondsToSeconds(resolved.calculatedDuration) : 0;\n }\n get time() {\n return millisecondsToSeconds(this.currentTime);\n }\n set time(newTime) {\n newTime = secondsToMilliseconds(newTime);\n this.currentTime = newTime;\n if (this.holdTime !== null || this.speed === 0) {\n this.holdTime = newTime;\n }\n else if (this.driver) {\n this.startTime = this.driver.now() - newTime / this.speed;\n }\n }\n get speed() {\n return this.playbackSpeed;\n }\n set speed(newSpeed) {\n const hasChanged = this.playbackSpeed !== newSpeed;\n this.playbackSpeed = newSpeed;\n if (hasChanged) {\n this.time = millisecondsToSeconds(this.currentTime);\n }\n }\n play() {\n if (!this.resolver.isScheduled) {\n this.resolver.resume();\n }\n if (!this._resolved) {\n this.pendingPlayState = \"running\";\n return;\n }\n if (this.isStopped)\n return;\n const { driver = frameloopDriver, onPlay, startTime } = this.options;\n if (!this.driver) {\n this.driver = driver((timestamp) => this.tick(timestamp));\n }\n onPlay && onPlay();\n const now = this.driver.now();\n if (this.holdTime !== null) {\n this.startTime = now - this.holdTime;\n }\n else if (!this.startTime) {\n this.startTime = startTime !== null && startTime !== void 0 ? startTime : this.calcStartTime();\n }\n else if (this.state === \"finished\") {\n this.startTime = now;\n }\n if (this.state === \"finished\") {\n this.updateFinishedPromise();\n }\n this.cancelTime = this.startTime;\n this.holdTime = null;\n /**\n * Set playState to running only after we've used it in\n * the previous logic.\n */\n this.state = \"running\";\n this.driver.start();\n }\n pause() {\n var _a;\n if (!this._resolved) {\n this.pendingPlayState = \"paused\";\n return;\n }\n this.state = \"paused\";\n this.holdTime = (_a = this.currentTime) !== null && _a !== void 0 ? _a : 0;\n }\n complete() {\n if (this.state !== \"running\") {\n this.play();\n }\n this.pendingPlayState = this.state = \"finished\";\n this.holdTime = null;\n }\n finish() {\n this.teardown();\n this.state = \"finished\";\n const { onComplete } = this.options;\n onComplete && onComplete();\n }\n cancel() {\n if (this.cancelTime !== null) {\n this.tick(this.cancelTime);\n }\n this.teardown();\n this.updateFinishedPromise();\n }\n teardown() {\n this.state = \"idle\";\n this.stopDriver();\n this.resolveFinishedPromise();\n this.updateFinishedPromise();\n this.startTime = this.cancelTime = null;\n this.resolver.cancel();\n }\n stopDriver() {\n if (!this.driver)\n return;\n this.driver.stop();\n this.driver = undefined;\n }\n sample(time) {\n this.startTime = 0;\n return this.tick(time, true);\n }\n}\n// Legacy interface\nfunction animateValue(options) {\n return new MainThreadAnimation(options);\n}\n\nexport { MainThreadAnimation, animateValue };\n","/**\n * A list of values that can be hardware-accelerated.\n */\nconst acceleratedValues = new Set([\n \"opacity\",\n \"clipPath\",\n \"filter\",\n \"transform\",\n // TODO: Can be accelerated but currently disabled until https://issues.chromium.org/issues/41491098 is resolved\n // or until we implement support for linear() easing.\n // \"background-color\"\n]);\n\nexport { acceleratedValues };\n","import { progress } from '../../../../utils/progress.mjs';\n\n// Create a linear easing point for every 10 ms\nconst resolution = 10;\nconst generateLinearEasing = (easing, duration // as milliseconds\n) => {\n let points = \"\";\n const numPoints = Math.max(Math.round(duration / resolution), 2);\n for (let i = 0; i < numPoints; i++) {\n points += easing(progress(0, numPoints - 1, i)) + \", \";\n }\n return `linear(${points.substring(0, points.length - 2)})`;\n};\n\nexport { generateLinearEasing };\n","function memo(callback) {\n let result;\n return () => {\n if (result === undefined)\n result = callback();\n return result;\n };\n}\n\nexport { memo };\n","/**\n * Add the ability for test suites to manually set support flags\n * to better test more environments.\n */\nconst supportsFlags = {\n linearEasing: undefined,\n};\n\nexport { supportsFlags };\n","import { memo } from '../../../../utils/memo.mjs';\nimport { supportsFlags } from './supports-flags.mjs';\n\nfunction memoSupports(callback, supportsFlag) {\n const memoized = memo(callback);\n return () => { var _a; return (_a = supportsFlags[supportsFlag]) !== null && _a !== void 0 ? _a : memoized(); };\n}\n\nexport { memoSupports };\n","import { memoSupports } from './memo-supports.mjs';\n\nconst supportsLinearEasing = /*@__PURE__*/ memoSupports(() => {\n try {\n document\n .createElement(\"div\")\n .animate({ opacity: 0 }, { easing: \"linear(0, 1)\" });\n }\n catch (e) {\n return false;\n }\n return true;\n}, \"linearEasing\");\n\nexport { supportsLinearEasing };\n","import { isBezierDefinition } from '../../../easing/utils/is-bezier-definition.mjs';\nimport { generateLinearEasing } from './utils/linear.mjs';\nimport { supportsLinearEasing } from './utils/supports-linear-easing.mjs';\n\nfunction isWaapiSupportedEasing(easing) {\n return Boolean((typeof easing === \"function\" && supportsLinearEasing()) ||\n !easing ||\n (typeof easing === \"string\" &&\n (easing in supportedWaapiEasing || supportsLinearEasing())) ||\n isBezierDefinition(easing) ||\n (Array.isArray(easing) && easing.every(isWaapiSupportedEasing)));\n}\nconst cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;\nconst supportedWaapiEasing = {\n linear: \"linear\",\n ease: \"ease\",\n easeIn: \"ease-in\",\n easeOut: \"ease-out\",\n easeInOut: \"ease-in-out\",\n circIn: /*@__PURE__*/ cubicBezierAsString([0, 0.65, 0.55, 1]),\n circOut: /*@__PURE__*/ cubicBezierAsString([0.55, 0, 1, 0.45]),\n backIn: /*@__PURE__*/ cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),\n backOut: /*@__PURE__*/ cubicBezierAsString([0.33, 1.53, 0.69, 0.99]),\n};\nfunction mapEasingToNativeEasing(easing, duration) {\n if (!easing) {\n return undefined;\n }\n else if (typeof easing === \"function\" && supportsLinearEasing()) {\n return generateLinearEasing(easing, duration);\n }\n else if (isBezierDefinition(easing)) {\n return cubicBezierAsString(easing);\n }\n else if (Array.isArray(easing)) {\n return easing.map((segmentEasing) => mapEasingToNativeEasing(segmentEasing, duration) ||\n supportedWaapiEasing.easeOut);\n }\n else {\n return supportedWaapiEasing[easing];\n }\n}\n\nexport { cubicBezierAsString, isWaapiSupportedEasing, mapEasingToNativeEasing, supportedWaapiEasing };\n","import { mapEasingToNativeEasing } from './easing.mjs';\n\nfunction startWaapiAnimation(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = \"loop\", ease = \"easeInOut\", times, } = {}) {\n const keyframeOptions = { [valueName]: keyframes };\n if (times)\n keyframeOptions.offset = times;\n const easing = mapEasingToNativeEasing(ease, duration);\n /**\n * If this is an easing array, apply to keyframes, not animation as a whole\n */\n if (Array.isArray(easing))\n keyframeOptions.easing = easing;\n return element.animate(keyframeOptions, {\n delay,\n duration,\n easing: !Array.isArray(easing) ? easing : \"linear\",\n fill: \"both\",\n iterations: repeat + 1,\n direction: repeatType === \"reverse\" ? \"alternate\" : \"normal\",\n });\n}\n\nexport { startWaapiAnimation };\n","function attachTimeline(animation, timeline) {\n animation.timeline = timeline;\n animation.onfinish = null;\n}\n\nexport { attachTimeline };\n","import { memo } from '../../../../utils/memo.mjs';\n\nconst supportsWaapi = /*@__PURE__*/ memo(() => Object.hasOwnProperty.call(Element.prototype, \"animate\"));\n\nexport { supportsWaapi };\n","import { anticipate } from '../../easing/anticipate.mjs';\nimport { backInOut } from '../../easing/back.mjs';\nimport { circInOut } from '../../easing/circ.mjs';\nimport { DOMKeyframesResolver } from '../../render/dom/DOMKeyframesResolver.mjs';\nimport { noop } from '../../utils/noop.mjs';\nimport { millisecondsToSeconds, secondsToMilliseconds } from '../../utils/time-conversion.mjs';\nimport { isGenerator } from '../generators/utils/is-generator.mjs';\nimport { BaseAnimation } from './BaseAnimation.mjs';\nimport { MainThreadAnimation } from './MainThreadAnimation.mjs';\nimport { acceleratedValues } from './utils/accelerated-values.mjs';\nimport { startWaapiAnimation } from './waapi/index.mjs';\nimport { isWaapiSupportedEasing } from './waapi/easing.mjs';\nimport { attachTimeline } from './waapi/utils/attach-timeline.mjs';\nimport { getFinalKeyframe } from './waapi/utils/get-final-keyframe.mjs';\nimport { supportsLinearEasing } from './waapi/utils/supports-linear-easing.mjs';\nimport { supportsWaapi } from './waapi/utils/supports-waapi.mjs';\n\n/**\n * 10ms is chosen here as it strikes a balance between smooth\n * results (more than one keyframe per frame at 60fps) and\n * keyframe quantity.\n */\nconst sampleDelta = 10; //ms\n/**\n * Implement a practical max duration for keyframe generation\n * to prevent infinite loops\n */\nconst maxDuration = 20000;\n/**\n * Check if an animation can run natively via WAAPI or requires pregenerated keyframes.\n * WAAPI doesn't support spring or function easings so we run these as JS animation before\n * handing off.\n */\nfunction requiresPregeneratedKeyframes(options) {\n return (isGenerator(options.type) ||\n options.type === \"spring\" ||\n !isWaapiSupportedEasing(options.ease));\n}\nfunction pregenerateKeyframes(keyframes, options) {\n /**\n * Create a main-thread animation to pregenerate keyframes.\n * We sample this at regular intervals to generate keyframes that we then\n * linearly interpolate between.\n */\n const sampleAnimation = new MainThreadAnimation({\n ...options,\n keyframes,\n repeat: 0,\n delay: 0,\n isGenerator: true,\n });\n let state = { done: false, value: keyframes[0] };\n const pregeneratedKeyframes = [];\n /**\n * Bail after 20 seconds of pre-generated keyframes as it's likely\n * we're heading for an infinite loop.\n */\n let t = 0;\n while (!state.done && t < maxDuration) {\n state = sampleAnimation.sample(t);\n pregeneratedKeyframes.push(state.value);\n t += sampleDelta;\n }\n return {\n times: undefined,\n keyframes: pregeneratedKeyframes,\n duration: t - sampleDelta,\n ease: \"linear\",\n };\n}\nconst unsupportedEasingFunctions = {\n anticipate,\n backInOut,\n circInOut,\n};\nfunction isUnsupportedEase(key) {\n return key in unsupportedEasingFunctions;\n}\nclass AcceleratedAnimation extends BaseAnimation {\n constructor(options) {\n super(options);\n const { name, motionValue, element, keyframes } = this.options;\n this.resolver = new DOMKeyframesResolver(keyframes, (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe), name, motionValue, element);\n this.resolver.scheduleResolve();\n }\n initPlayback(keyframes, finalKeyframe) {\n var _a;\n let { duration = 300, times, ease, type, motionValue, name, startTime, } = this.options;\n /**\n * If element has since been unmounted, return false to indicate\n * the animation failed to initialised.\n */\n if (!((_a = motionValue.owner) === null || _a === void 0 ? void 0 : _a.current)) {\n return false;\n }\n /**\n * If the user has provided an easing function name that isn't supported\n * by WAAPI (like \"anticipate\"), we need to provide the corressponding\n * function. This will later get converted to a linear() easing function.\n */\n if (typeof ease === \"string\" &&\n supportsLinearEasing() &&\n isUnsupportedEase(ease)) {\n ease = unsupportedEasingFunctions[ease];\n }\n /**\n * If this animation needs pre-generated keyframes then generate.\n */\n if (requiresPregeneratedKeyframes(this.options)) {\n const { onComplete, onUpdate, motionValue, element, ...options } = this.options;\n const pregeneratedAnimation = pregenerateKeyframes(keyframes, options);\n keyframes = pregeneratedAnimation.keyframes;\n // If this is a very short animation, ensure we have\n // at least two keyframes to animate between as older browsers\n // can't animate between a single keyframe.\n if (keyframes.length === 1) {\n keyframes[1] = keyframes[0];\n }\n duration = pregeneratedAnimation.duration;\n times = pregeneratedAnimation.times;\n ease = pregeneratedAnimation.ease;\n type = \"keyframes\";\n }\n const animation = startWaapiAnimation(motionValue.owner.current, name, keyframes, { ...this.options, duration, times, ease });\n // Override the browser calculated startTime with one synchronised to other JS\n // and WAAPI animations starting this event loop.\n animation.startTime = startTime !== null && startTime !== void 0 ? startTime : this.calcStartTime();\n if (this.pendingTimeline) {\n attachTimeline(animation, this.pendingTimeline);\n this.pendingTimeline = undefined;\n }\n else {\n /**\n * Prefer the `onfinish` prop as it's more widely supported than\n * the `finished` promise.\n *\n * Here, we synchronously set the provided MotionValue to the end\n * keyframe. If we didn't, when the WAAPI animation is finished it would\n * be removed from the element which would then revert to its old styles.\n */\n animation.onfinish = () => {\n const { onComplete } = this.options;\n motionValue.set(getFinalKeyframe(keyframes, this.options, finalKeyframe));\n onComplete && onComplete();\n this.cancel();\n this.resolveFinishedPromise();\n };\n }\n return {\n animation,\n duration,\n times,\n type,\n ease,\n keyframes: keyframes,\n };\n }\n get duration() {\n const { resolved } = this;\n if (!resolved)\n return 0;\n const { duration } = resolved;\n return millisecondsToSeconds(duration);\n }\n get time() {\n const { resolved } = this;\n if (!resolved)\n return 0;\n const { animation } = resolved;\n return millisecondsToSeconds(animation.currentTime || 0);\n }\n set time(newTime) {\n const { resolved } = this;\n if (!resolved)\n return;\n const { animation } = resolved;\n animation.currentTime = secondsToMilliseconds(newTime);\n }\n get speed() {\n const { resolved } = this;\n if (!resolved)\n return 1;\n const { animation } = resolved;\n return animation.playbackRate;\n }\n set speed(newSpeed) {\n const { resolved } = this;\n if (!resolved)\n return;\n const { animation } = resolved;\n animation.playbackRate = newSpeed;\n }\n get state() {\n const { resolved } = this;\n if (!resolved)\n return \"idle\";\n const { animation } = resolved;\n return animation.playState;\n }\n get startTime() {\n const { resolved } = this;\n if (!resolved)\n return null;\n const { animation } = resolved;\n // Coerce to number as TypeScript incorrectly types this\n // as CSSNumberish\n return animation.startTime;\n }\n /**\n * Replace the default DocumentTimeline with another AnimationTimeline.\n * Currently used for scroll animations.\n */\n attachTimeline(timeline) {\n if (!this._resolved) {\n this.pendingTimeline = timeline;\n }\n else {\n const { resolved } = this;\n if (!resolved)\n return noop;\n const { animation } = resolved;\n attachTimeline(animation, timeline);\n }\n return noop;\n }\n play() {\n if (this.isStopped)\n return;\n const { resolved } = this;\n if (!resolved)\n return;\n const { animation } = resolved;\n if (animation.playState === \"finished\") {\n this.updateFinishedPromise();\n }\n animation.play();\n }\n pause() {\n const { resolved } = this;\n if (!resolved)\n return;\n const { animation } = resolved;\n animation.pause();\n }\n stop() {\n this.resolver.cancel();\n this.isStopped = true;\n if (this.state === \"idle\")\n return;\n this.resolveFinishedPromise();\n this.updateFinishedPromise();\n const { resolved } = this;\n if (!resolved)\n return;\n const { animation, keyframes, duration, type, ease, times } = resolved;\n if (animation.playState === \"idle\" ||\n animation.playState === \"finished\") {\n return;\n }\n /**\n * WAAPI doesn't natively have any interruption capabilities.\n *\n * Rather than read commited styles back out of the DOM, we can\n * create a renderless JS animation and sample it twice to calculate\n * its current value, \"previous\" value, and therefore allow\n * Motion to calculate velocity for any subsequent animation.\n */\n if (this.time) {\n const { motionValue, onUpdate, onComplete, element, ...options } = this.options;\n const sampleAnimation = new MainThreadAnimation({\n ...options,\n keyframes,\n duration,\n type,\n ease,\n times,\n isGenerator: true,\n });\n const sampleTime = secondsToMilliseconds(this.time);\n motionValue.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta);\n }\n const { onStop } = this.options;\n onStop && onStop();\n this.cancel();\n }\n complete() {\n const { resolved } = this;\n if (!resolved)\n return;\n resolved.animation.finish();\n }\n cancel() {\n const { resolved } = this;\n if (!resolved)\n return;\n resolved.animation.cancel();\n }\n static supports(options) {\n const { motionValue, name, repeatDelay, repeatType, damping, type } = options;\n return (supportsWaapi() &&\n name &&\n acceleratedValues.has(name) &&\n motionValue &&\n motionValue.owner &&\n motionValue.owner.current instanceof HTMLElement &&\n /**\n * If we're outputting values to onUpdate then we can't use WAAPI as there's\n * no way to read the value from WAAPI every frame.\n */\n !motionValue.owner.getProps().onUpdate &&\n !repeatDelay &&\n repeatType !== \"mirror\" &&\n damping !== 0 &&\n type !== \"inertia\");\n }\n}\n\nexport { AcceleratedAnimation };\n","import { memo } from '../../../utils/memo.mjs';\n\nconst supportsScrollTimeline = memo(() => window.ScrollTimeline !== undefined);\n\nexport { supportsScrollTimeline };\n","import { supportsScrollTimeline } from '../render/dom/scroll/supports.mjs';\n\nclass GroupPlaybackControls {\n constructor(animations) {\n // Bound to accomodate common `return animation.stop` pattern\n this.stop = () => this.runAll(\"stop\");\n this.animations = animations.filter(Boolean);\n }\n then(onResolve, onReject) {\n return Promise.all(this.animations).then(onResolve).catch(onReject);\n }\n /**\n * TODO: Filter out cancelled or stopped animations before returning\n */\n getAll(propName) {\n return this.animations[0][propName];\n }\n setAll(propName, newValue) {\n for (let i = 0; i < this.animations.length; i++) {\n this.animations[i][propName] = newValue;\n }\n }\n attachTimeline(timeline, fallback) {\n const subscriptions = this.animations.map((animation) => {\n if (supportsScrollTimeline() && animation.attachTimeline) {\n return animation.attachTimeline(timeline);\n }\n else {\n return fallback(animation);\n }\n });\n return () => {\n subscriptions.forEach((cancel, i) => {\n cancel && cancel();\n this.animations[i].stop();\n });\n };\n }\n get time() {\n return this.getAll(\"time\");\n }\n set time(time) {\n this.setAll(\"time\", time);\n }\n get speed() {\n return this.getAll(\"speed\");\n }\n set speed(speed) {\n this.setAll(\"speed\", speed);\n }\n get startTime() {\n return this.getAll(\"startTime\");\n }\n get duration() {\n let max = 0;\n for (let i = 0; i < this.animations.length; i++) {\n max = Math.max(max, this.animations[i].duration);\n }\n return max;\n }\n runAll(methodName) {\n this.animations.forEach((controls) => controls[methodName]());\n }\n flatten() {\n this.runAll(\"flatten\");\n }\n play() {\n this.runAll(\"play\");\n }\n pause() {\n this.runAll(\"pause\");\n }\n cancel() {\n this.runAll(\"cancel\");\n }\n complete() {\n this.runAll(\"complete\");\n }\n}\n\nexport { GroupPlaybackControls };\n","/**\n * Decide whether a transition is defined on a given Transition.\n * This filters out orchestration options and returns true\n * if any options are left.\n */\nfunction isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {\n return !!Object.keys(transition).length;\n}\n\nexport { isTransitionDefined };\n","import { secondsToMilliseconds } from '../../utils/time-conversion.mjs';\nimport { getDefaultTransition } from '../utils/default-transitions.mjs';\nimport { getValueTransition } from '../utils/get-value-transition.mjs';\nimport { MotionGlobalConfig } from '../../utils/GlobalConfig.mjs';\nimport { instantAnimationState } from '../../utils/use-instant-transition-state.mjs';\nimport { getFinalKeyframe } from '../animators/waapi/utils/get-final-keyframe.mjs';\nimport { frame } from '../../frameloop/frame.mjs';\nimport { AcceleratedAnimation } from '../animators/AcceleratedAnimation.mjs';\nimport { MainThreadAnimation } from '../animators/MainThreadAnimation.mjs';\nimport { GroupPlaybackControls } from '../GroupPlaybackControls.mjs';\nimport { isTransitionDefined } from '../utils/is-transition-defined.mjs';\n\nconst animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {\n const valueTransition = getValueTransition(transition, name) || {};\n /**\n * Most transition values are currently completely overwritten by value-specific\n * transitions. In the future it'd be nicer to blend these transitions. But for now\n * delay actually does inherit from the root transition if not value-specific.\n */\n const delay = valueTransition.delay || transition.delay || 0;\n /**\n * Elapsed isn't a public transition option but can be passed through from\n * optimized appear effects in milliseconds.\n */\n let { elapsed = 0 } = transition;\n elapsed = elapsed - secondsToMilliseconds(delay);\n let options = {\n keyframes: Array.isArray(target) ? target : [null, target],\n ease: \"easeOut\",\n velocity: value.getVelocity(),\n ...valueTransition,\n delay: -elapsed,\n onUpdate: (v) => {\n value.set(v);\n valueTransition.onUpdate && valueTransition.onUpdate(v);\n },\n onComplete: () => {\n onComplete();\n valueTransition.onComplete && valueTransition.onComplete();\n },\n name,\n motionValue: value,\n element: isHandoff ? undefined : element,\n };\n /**\n * If there's no transition defined for this value, we can generate\n * unqiue transition settings for this value.\n */\n if (!isTransitionDefined(valueTransition)) {\n options = {\n ...options,\n ...getDefaultTransition(name, options),\n };\n }\n /**\n * Both WAAPI and our internal animation functions use durations\n * as defined by milliseconds, while our external API defines them\n * as seconds.\n */\n if (options.duration) {\n options.duration = secondsToMilliseconds(options.duration);\n }\n if (options.repeatDelay) {\n options.repeatDelay = secondsToMilliseconds(options.repeatDelay);\n }\n if (options.from !== undefined) {\n options.keyframes[0] = options.from;\n }\n let shouldSkip = false;\n if (options.type === false ||\n (options.duration === 0 && !options.repeatDelay)) {\n options.duration = 0;\n if (options.delay === 0) {\n shouldSkip = true;\n }\n }\n if (instantAnimationState.current ||\n MotionGlobalConfig.skipAnimations) {\n shouldSkip = true;\n options.duration = 0;\n options.delay = 0;\n }\n /**\n * If we can or must skip creating the animation, and apply only\n * the final keyframe, do so. We also check once keyframes are resolved but\n * this early check prevents the need to create an animation at all.\n */\n if (shouldSkip && !isHandoff && value.get() !== undefined) {\n const finalKeyframe = getFinalKeyframe(options.keyframes, valueTransition);\n if (finalKeyframe !== undefined) {\n frame.update(() => {\n options.onUpdate(finalKeyframe);\n options.onComplete();\n });\n // We still want to return some animation controls here rather\n // than returning undefined\n return new GroupPlaybackControls([]);\n }\n }\n /**\n * Animate via WAAPI if possible. If this is a handoff animation, the optimised animation will be running via\n * WAAPI. Therefore, this animation must be JS to ensure it runs \"under\" the\n * optimised animation.\n */\n if (!isHandoff && AcceleratedAnimation.supports(options)) {\n return new AcceleratedAnimation(options);\n }\n else {\n return new MainThreadAnimation(options);\n }\n};\n\nexport { animateMotionValue };\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","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","import { SubscriptionManager } from '../utils/subscription-manager.mjs';\nimport { velocityPerSecond } from '../utils/velocity-per-second.mjs';\nimport { warnOnce } from '../utils/warn-once.mjs';\nimport { time } from '../frameloop/sync-time.mjs';\nimport { frame } from '../frameloop/frame.mjs';\n\n/**\n * Maximum time between the value of two frames, beyond which we\n * assume the velocity has since been 0.\n */\nconst MAX_VELOCITY_DELTA = 30;\nconst isFloat = (value) => {\n return !isNaN(parseFloat(value));\n};\nconst collectMotionValues = {\n current: undefined,\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 = \"11.11.17\";\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 = null;\n /**\n * An object containing a SubscriptionManager for each active event.\n */\n this.events = {};\n this.updateAndNotify = (v, render = true) => {\n const currentTime = time.now();\n /**\n * If we're updating the value during another frame or eventloop\n * than the previous frame, then the we set the previous frame value\n * to current.\n */\n if (this.updatedAt !== currentTime) {\n this.setPrevFrameValue();\n }\n this.prev = this.current;\n this.setCurrent(v);\n // Update update subscribers\n if (this.current !== this.prev && this.events.change) {\n this.events.change.notify(this.current);\n }\n // Update render subscribers\n if (render && this.events.renderRequest) {\n this.events.renderRequest.notify(this.current);\n }\n };\n this.hasAnimated = false;\n this.setCurrent(init);\n this.owner = options.owner;\n }\n setCurrent(current) {\n this.current = current;\n this.updatedAt = time.now();\n if (this.canTrackVelocity === null && current !== undefined) {\n this.canTrackVelocity = isFloat(this.current);\n }\n }\n setPrevFrameValue(prevFrameValue = this.current) {\n this.prevFrameValue = prevFrameValue;\n this.prevUpdatedAt = this.updatedAt;\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