{"version":3,"file":"size-rollup-motion.js","sources":["../../motion-utils/dist/es/array.mjs","../../motion-utils/dist/es/clamp.mjs","../../motion-utils/dist/es/format-error-message.mjs","../../motion-utils/dist/es/errors.mjs","../../motion-utils/dist/es/global-config.mjs","../../motion-utils/dist/es/is-numerical-string.mjs","../../motion-utils/dist/es/is-object.mjs","../../motion-utils/dist/es/is-zero-value-string.mjs","../../motion-utils/dist/es/memo.mjs","../../motion-utils/dist/es/noop.mjs","../../motion-utils/dist/es/pipe.mjs","../../motion-utils/dist/es/progress.mjs","../../motion-utils/dist/es/subscription-manager.mjs","../../motion-utils/dist/es/time-conversion.mjs","../../motion-utils/dist/es/velocity-per-second.mjs","../../motion-utils/dist/es/easing/cubic-bezier.mjs","../../motion-utils/dist/es/easing/modifiers/mirror.mjs","../../motion-utils/dist/es/easing/modifiers/reverse.mjs","../../motion-utils/dist/es/easing/back.mjs","../../motion-utils/dist/es/easing/anticipate.mjs","../../motion-utils/dist/es/easing/circ.mjs","../../motion-utils/dist/es/easing/ease.mjs","../../motion-utils/dist/es/easing/utils/is-bezier-definition.mjs","../../motion-utils/dist/es/easing/utils/map.mjs","../lib/context/LayoutGroupContext.js","../lib/context/LazyContext.js","../lib/context/MotionConfigContext.js","../lib/context/MotionContext/index.js","../../motion-dom/dist/es/frameloop/order.mjs","../../motion-dom/dist/es/frameloop/batcher.mjs","../../motion-dom/dist/es/frameloop/render-step.mjs","../../motion-dom/dist/es/frameloop/frame.mjs","../../motion-dom/dist/es/frameloop/sync-time.mjs","../../motion-dom/dist/es/animation/utils/is-css-variable.mjs","../../motion-dom/dist/es/value/types/numbers/index.mjs","../../motion-dom/dist/es/value/types/utils/sanitize.mjs","../../motion-dom/dist/es/value/types/utils/float-regex.mjs","../../motion-dom/dist/es/value/types/utils/single-color-regex.mjs","../../motion-dom/dist/es/value/types/color/utils.mjs","../../motion-dom/dist/es/value/types/utils/is-nullish.mjs","../../motion-dom/dist/es/value/types/color/rgba.mjs","../../motion-dom/dist/es/value/types/color/hex.mjs","../../motion-dom/dist/es/value/types/numbers/units.mjs","../../motion-dom/dist/es/value/types/color/hsla.mjs","../../motion-dom/dist/es/value/types/color/index.mjs","../../motion-dom/dist/es/value/types/utils/color-regex.mjs","../../motion-dom/dist/es/value/types/complex/index.mjs","../../motion-dom/dist/es/value/types/color/hsla-to-rgba.mjs","../../motion-dom/dist/es/utils/mix/immediate.mjs","../../motion-dom/dist/es/utils/mix/number.mjs","../../motion-dom/dist/es/utils/mix/color.mjs","../../motion-dom/dist/es/utils/mix/visibility.mjs","../../motion-dom/dist/es/utils/mix/complex.mjs","../../motion-dom/dist/es/utils/mix/index.mjs","../../motion-dom/dist/es/animation/drivers/frame.mjs","../../motion-dom/dist/es/animation/waapi/utils/linear.mjs","../../motion-dom/dist/es/animation/generators/utils/calc-duration.mjs","../../motion-dom/dist/es/animation/generators/spring.mjs","../../motion-dom/dist/es/animation/generators/utils/create-generator-easing.mjs","../../motion-dom/dist/es/animation/generators/utils/velocity.mjs","../../motion-dom/dist/es/animation/generators/inertia.mjs","../../motion-dom/dist/es/utils/interpolate.mjs","../../motion-dom/dist/es/animation/keyframes/offsets/default.mjs","../../motion-dom/dist/es/animation/keyframes/offsets/fill.mjs","../../motion-dom/dist/es/animation/generators/keyframes.mjs","../../motion-utils/dist/es/easing/utils/is-easing-array.mjs","../../motion-dom/dist/es/animation/keyframes/offsets/time.mjs","../../motion-dom/dist/es/animation/keyframes/get-final.mjs","../../motion-dom/dist/es/animation/utils/replace-transition-type.mjs","../../motion-dom/dist/es/animation/utils/WithPromise.mjs","../../motion-dom/dist/es/animation/JSAnimation.mjs","../../motion-dom/dist/es/render/dom/parse-transform.mjs","../../motion-dom/dist/es/render/utils/keys-transform.mjs","../../motion-dom/dist/es/animation/keyframes/utils/unit-conversion.mjs","../../motion-dom/dist/es/animation/keyframes/KeyframesResolver.mjs","../../motion-dom/dist/es/animation/keyframes/utils/fill-wildcards.mjs","../../motion-dom/dist/es/render/dom/style-set.mjs","../../motion-dom/dist/es/render/dom/is-css-var.mjs","../../motion-dom/dist/es/utils/supports/flags.mjs","../../motion-dom/dist/es/utils/supports/memo.mjs","../../motion-dom/dist/es/utils/supports/scroll-timeline.mjs","../../motion-dom/dist/es/utils/supports/linear-easing.mjs","../../motion-dom/dist/es/animation/waapi/easing/cubic-bezier.mjs","../../motion-dom/dist/es/animation/waapi/easing/supported.mjs","../../motion-dom/dist/es/animation/waapi/easing/map-easing.mjs","../../motion-dom/dist/es/animation/waapi/start-waapi-animation.mjs","../../motion-dom/dist/es/animation/generators/utils/is-generator.mjs","../../motion-dom/dist/es/animation/NativeAnimation.mjs","../../motion-dom/dist/es/animation/waapi/utils/apply-generator.mjs","../../motion-dom/dist/es/animation/waapi/utils/unsupported-easing.mjs","../../motion-dom/dist/es/animation/NativeAnimationExtended.mjs","../../motion-dom/dist/es/animation/utils/is-animatable.mjs","../../motion-dom/dist/es/animation/utils/make-animation-instant.mjs","../../motion-dom/dist/es/animation/waapi/utils/accelerated-values.mjs","../../motion-dom/dist/es/animation/waapi/utils/is-browser-color.mjs","../../motion-dom/dist/es/animation/waapi/supports/waapi.mjs","../../motion-dom/dist/es/animation/AsyncMotionValueAnimation.mjs","../../motion-dom/dist/es/animation/utils/can-animate.mjs","../../motion-dom/dist/es/animation/utils/calc-child-stagger.mjs","../../motion-dom/dist/es/value/index.mjs","../../motion-dom/dist/es/animation/utils/resolve-transition.mjs","../../motion-dom/dist/es/animation/utils/get-value-transition.mjs","../../motion-dom/dist/es/animation/utils/default-transitions.mjs","../../motion-dom/dist/es/animation/utils/is-transition-defined.mjs","../../motion-dom/dist/es/animation/interfaces/motion-value.mjs","../../motion-dom/dist/es/animation/utils/css-variables-conversion.mjs","../../motion-dom/dist/es/render/utils/resolve-variants.mjs","../../motion-dom/dist/es/render/utils/resolve-dynamic-variants.mjs","../../motion-dom/dist/es/render/utils/keys-position.mjs","../../motion-dom/dist/es/render/utils/is-keyframes-target.mjs","../../motion-dom/dist/es/render/utils/setters.mjs","../../motion-dom/dist/es/value/utils/is-motion-value.mjs","../../motion-dom/dist/es/value/will-change/add-will-change.mjs","../../motion-dom/dist/es/value/will-change/is.mjs","../../motion-dom/dist/es/render/dom/utils/camel-to-dash.mjs","../../motion-dom/dist/es/animation/optimized-appear/data-id.mjs","../../motion-dom/dist/es/animation/optimized-appear/get-appear-id.mjs","../../motion-dom/dist/es/animation/interfaces/visual-element-target.mjs","../../motion-dom/dist/es/animation/interfaces/visual-element-variant.mjs","../../motion-dom/dist/es/value/types/auto.mjs","../../motion-dom/dist/es/value/types/test.mjs","../../motion-dom/dist/es/value/types/dimensions.mjs","../../motion-dom/dist/es/animation/keyframes/utils/is-none.mjs","../../motion-dom/dist/es/value/types/complex/filter.mjs","../../motion-dom/dist/es/value/types/complex/mask.mjs","../../motion-dom/dist/es/value/types/int.mjs","../../motion-dom/dist/es/value/types/maps/number.mjs","../../motion-dom/dist/es/value/types/maps/transform.mjs","../../motion-dom/dist/es/value/types/maps/defaults.mjs","../../motion-dom/dist/es/value/types/utils/animatable-none.mjs","../../motion-dom/dist/es/animation/keyframes/utils/make-none-animatable.mjs","../../motion-dom/dist/es/animation/keyframes/DOMKeyframesResolver.mjs","../../motion-dom/dist/es/utils/resolve-elements.mjs","../../motion-dom/dist/es/value/types/utils/get-as-type.mjs","../../motion-dom/dist/es/frameloop/microtask.mjs","../../motion-dom/dist/es/gestures/drag/state/is-active.mjs","../../motion-dom/dist/es/gestures/utils/setup.mjs","../../motion-dom/dist/es/gestures/hover.mjs","../../motion-dom/dist/es/gestures/utils/is-node-or-child.mjs","../../motion-dom/dist/es/gestures/utils/is-primary-pointer.mjs","../../motion-dom/dist/es/gestures/press/utils/is-keyboard-accessible.mjs","../../motion-dom/dist/es/gestures/press/utils/state.mjs","../../motion-dom/dist/es/gestures/press/utils/keyboard.mjs","../../motion-dom/dist/es/gestures/press/index.mjs","../../motion-dom/dist/es/utils/is-html-element.mjs","../../motion-dom/dist/es/utils/is-svg-element.mjs","../../motion-dom/dist/es/resize/handle-element.mjs","../../motion-dom/dist/es/resize/handle-window.mjs","../../motion-dom/dist/es/resize/index.mjs","../../motion-dom/dist/es/value/types/utils/find.mjs","../../motion-dom/dist/es/projection/geometry/models.mjs","../../motion-dom/dist/es/render/store.mjs","../../motion-dom/dist/es/render/utils/is-animation-controls.mjs","../../motion-dom/dist/es/render/utils/is-variant-label.mjs","../../motion-dom/dist/es/render/utils/variant-props.mjs","../../motion-dom/dist/es/render/utils/is-controlling-variants.mjs","../../motion-dom/dist/es/render/utils/reduced-motion/state.mjs","../../motion-dom/dist/es/render/utils/reduced-motion/index.mjs","../../motion-dom/dist/es/render/VisualElement.mjs","../../motion-dom/dist/es/render/utils/motion-values.mjs","../../motion-dom/dist/es/render/dom/DOMVisualElement.mjs","../../motion-dom/dist/es/render/Feature.mjs","../../motion-dom/dist/es/projection/geometry/conversion.mjs","../../motion-dom/dist/es/projection/utils/has-transform.mjs","../../motion-dom/dist/es/projection/geometry/delta-apply.mjs","../../motion-dom/dist/es/projection/utils/measure.mjs","../../motion-dom/dist/es/render/html/utils/build-transform.mjs","../../motion-dom/dist/es/render/html/utils/build-styles.mjs","../../motion-dom/dist/es/render/html/utils/render.mjs","../../motion-dom/dist/es/projection/styles/scale-border-radius.mjs","../../motion-dom/dist/es/projection/styles/scale-box-shadow.mjs","../../motion-dom/dist/es/projection/styles/scale-correction.mjs","../../motion-dom/dist/es/render/utils/is-forced-motion-value.mjs","../../motion-dom/dist/es/render/html/utils/scrape-motion-values.mjs","../../motion-dom/dist/es/render/html/HTMLVisualElement.mjs","../../motion-dom/dist/es/render/svg/utils/path.mjs","../../motion-dom/dist/es/render/svg/utils/build-attrs.mjs","../../motion-dom/dist/es/render/svg/utils/camel-case-attrs.mjs","../../motion-dom/dist/es/render/svg/utils/is-svg-tag.mjs","../../motion-dom/dist/es/render/svg/utils/scrape-motion-values.mjs","../../motion-dom/dist/es/render/svg/SVGVisualElement.mjs","../../motion-dom/dist/es/render/svg/utils/render.mjs","../../motion-dom/dist/es/render/utils/get-variant-context.mjs","../../motion-dom/dist/es/render/utils/shallow-compare.mjs","../../motion-dom/dist/es/render/utils/animation-state.mjs","../../motion-dom/dist/es/animation/interfaces/visual-element.mjs","../../motion-dom/dist/es/projection/geometry/copy.mjs","../../motion-dom/dist/es/projection/geometry/delta-calc.mjs","../../motion-dom/dist/es/projection/geometry/delta-remove.mjs","../../motion-dom/dist/es/projection/geometry/utils.mjs","../../motion-dom/dist/es/projection/utils/each-axis.mjs","../../motion-dom/dist/es/projection/animation/mix-values.mjs","../../motion-dom/dist/es/events/add-dom-event.mjs","../../motion-dom/dist/es/projection/utils/compare-by-depth.mjs","../../motion-dom/dist/es/projection/utils/flat-tree.mjs","../../motion-dom/dist/es/value/utils/resolve-motion-value.mjs","../../motion-dom/dist/es/projection/shared/stack.mjs","../../motion-dom/dist/es/projection/node/state.mjs","../../motion-dom/dist/es/projection/node/create-projection-node.mjs","../../motion-dom/dist/es/utils/is-svg-svg-element.mjs","../../motion-dom/dist/es/utils/delay.mjs","../../motion-dom/dist/es/animation/animate/single-value.mjs","../../motion-dom/dist/es/projection/styles/transform.mjs","../../motion-dom/dist/es/projection/node/DocumentProjectionNode.mjs","../../motion-dom/dist/es/projection/node/HTMLProjectionNode.mjs","../lib/context/MotionContext/create.js","../lib/context/MotionContext/utils.js","../lib/render/html/utils/create-render-state.js","../lib/render/html/use-props.js","../lib/render/svg/utils/create-render-state.js","../lib/render/svg/use-props.js","../lib/motion/utils/valid-prop.js","../lib/render/dom/utils/filter-props.js","../lib/render/svg/lowercase-elements.js","../lib/render/dom/utils/is-svg-component.js","../lib/render/dom/use-render.js","../lib/context/PresenceContext.js","../lib/motion/utils/use-visual-state.js","../lib/utils/use-constant.js","../lib/render/html/use-html-visual-state.js","../lib/render/svg/use-svg-visual-state.js","../lib/motion/features/definitions.js","../lib/motion/utils/symbol.js","../lib/motion/utils/use-motion-ref.js","../lib/context/SwitchLayoutGroupContext.js","../lib/utils/is-ref-object.js","../lib/utils/is-browser.js","../lib/utils/use-isomorphic-effect.js","../lib/motion/utils/use-visual-element.js","../lib/motion/index.js","../lib/motion/features/load-features.js","../lib/render/dom/create-visual-element.js","../lib/motion/features/animation/exit.js","../lib/motion/features/animations.js","../lib/motion/features/animation/index.js","../lib/events/event-info.js","../lib/events/add-pointer-event.js","../lib/utils/get-context-window.js","../lib/utils/distance.js","../lib/gestures/pan/PanSession.js","../lib/gestures/drag/utils/constraints.js","../lib/gestures/drag/VisualElementDragControls.js","../../motion-dom/dist/es/gestures/drag/state/set-active.mjs","../lib/gestures/pan/index.js","../lib/motion/features/layout/MeasureLayout.js","../lib/components/AnimatePresence/use-presence.js","../lib/motion/features/drag.js","../lib/gestures/drag/index.js","../lib/gestures/hover.js","../lib/gestures/press.js","../lib/motion/features/viewport/observers.js","../lib/motion/features/viewport/index.js","../lib/motion/features/gestures.js","../lib/render/components/motion/feature-bundle.js","../lib/gestures/focus.js","../lib/motion/features/layout.js","../lib/render/components/motion/create.js","../lib/render/components/motion/elements.js","../lib/render/components/motion/size.js"],"sourcesContent":["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//# sourceMappingURL=array.mjs.map\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//# sourceMappingURL=clamp.mjs.map\n","function formatErrorMessage(message, errorCode) {\n return errorCode\n ? `${message}. For more information and steps for solving, visit https://motion.dev/troubleshooting/${errorCode}`\n : message;\n}\n\nexport { formatErrorMessage };\n//# sourceMappingURL=format-error-message.mjs.map\n","import { formatErrorMessage } from './format-error-message.mjs';\n\nlet warning = () => { };\nlet invariant = () => { };\nif (typeof process !== \"undefined\" &&\n process.env?.NODE_ENV !== \"production\") {\n warning = (check, message, errorCode) => {\n if (!check && typeof console !== \"undefined\") {\n console.warn(formatErrorMessage(message, errorCode));\n }\n };\n invariant = (check, message, errorCode) => {\n if (!check) {\n throw new Error(formatErrorMessage(message, errorCode));\n }\n };\n}\n\nexport { invariant, warning };\n//# sourceMappingURL=errors.mjs.map\n","const MotionGlobalConfig = {};\n\nexport { MotionGlobalConfig };\n//# sourceMappingURL=global-config.mjs.map\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//# sourceMappingURL=is-numerical-string.mjs.map\n","const isObject = (value) => typeof value === \"object\" && value !== null;\n\nexport { isObject };\n//# sourceMappingURL=is-object.mjs.map\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//# sourceMappingURL=is-zero-value-string.mjs.map\n","/*#__NO_SIDE_EFFECTS__*/\nfunction memo(callback) {\n let result;\n return () => {\n if (result === undefined)\n result = callback();\n return result;\n };\n}\n\nexport { memo };\n//# sourceMappingURL=memo.mjs.map\n","/*#__NO_SIDE_EFFECTS__*/\nconst noop = (any) => any;\n\nexport { noop };\n//# sourceMappingURL=noop.mjs.map\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 pipe = (...transformers) => transformers.reduce((a, b) => (v) => b(a(v)));\n\nexport { pipe };\n//# sourceMappingURL=pipe.mjs.map\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/*#__NO_SIDE_EFFECTS__*/\nconst progress = (from, to, value) => {\n const range = to - from;\n return range ? (value - from) / range : 1;\n};\n\nexport { progress };\n//# sourceMappingURL=progress.mjs.map\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//# sourceMappingURL=subscription-manager.mjs.map\n","/**\n * Converts seconds to milliseconds\n *\n * @param seconds - Time in seconds.\n * @return milliseconds - Converted time in milliseconds.\n */\n/*#__NO_SIDE_EFFECTS__*/\nconst secondsToMilliseconds = (seconds) => seconds * 1000;\n/*#__NO_SIDE_EFFECTS__*/\nconst millisecondsToSeconds = (milliseconds) => milliseconds / 1000;\n\nexport { millisecondsToSeconds, secondsToMilliseconds };\n//# sourceMappingURL=time-conversion.mjs.map\n","/*\n Convert velocity into velocity per second\n*/\n/*#__NO_SIDE_EFFECTS__*/\nconst velocityPerSecond = (velocity, frameDuration) => frameDuration ? velocity * (1000 / frameDuration) : 0;\n\nexport { velocityPerSecond };\n//# sourceMappingURL=velocity-per-second.mjs.map\n","import { noop } from '../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 noticeably 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}\n/*#__NO_SIDE_EFFECTS__*/\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//# sourceMappingURL=cubic-bezier.mjs.map\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.\n/*#__NO_SIDE_EFFECTS__*/\nconst mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;\n\nexport { mirrorEasing };\n//# sourceMappingURL=mirror.mjs.map\n","// Accepts an easing function and returns a new one that outputs reversed values.\n// Turns easeIn into easeOut.\n/*#__NO_SIDE_EFFECTS__*/\nconst reverseEasing = (easing) => (p) => 1 - easing(1 - p);\n\nexport { reverseEasing };\n//# sourceMappingURL=reverse.mjs.map\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//# sourceMappingURL=back.mjs.map\n","import { backIn } from './back.mjs';\n\nconst anticipate = (p) => p >= 1\n ? 1\n : (p *= 2) < 1\n ? 0.5 * backIn(p)\n : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));\n\nexport { anticipate };\n//# sourceMappingURL=anticipate.mjs.map\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//# sourceMappingURL=circ.mjs.map\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//# sourceMappingURL=ease.mjs.map\n","/*#__NO_SIDE_EFFECTS__*/\nconst isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === \"number\";\n\nexport { isBezierDefinition };\n//# sourceMappingURL=is-bezier-definition.mjs.map\n","import { invariant } from '../../errors.mjs';\nimport { noop } from '../../noop.mjs';\nimport { anticipate } from '../anticipate.mjs';\nimport { backOut, backInOut, backIn } from '../back.mjs';\nimport { circOut, circInOut, circIn } from '../circ.mjs';\nimport { cubicBezier } from '../cubic-bezier.mjs';\nimport { easeOut, easeInOut, easeIn } from '../ease.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 isValidEasing = (easing) => {\n return typeof easing === \"string\";\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.`, \"cubic-bezier-length\");\n const [x1, y1, x2, y2] = definition;\n return cubicBezier(x1, y1, x2, y2);\n }\n else if (isValidEasing(definition)) {\n // Else lookup from table\n invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`, \"invalid-easing-type\");\n return easingLookup[definition];\n }\n return definition;\n};\n\nexport { easingDefinitionToFunction };\n//# sourceMappingURL=map.mjs.map\n","\"use client\";\nimport { createContext } from \"react\";\nexport const LayoutGroupContext = createContext({});\n//# sourceMappingURL=LayoutGroupContext.js.map","\"use client\";\nimport { createContext } from \"react\";\nexport const LazyContext = createContext({ strict: false });\n//# sourceMappingURL=LazyContext.js.map","\"use client\";\nimport { createContext } from \"react\";\n/**\n * @public\n */\nexport const MotionConfigContext = createContext({\n transformPagePoint: (p) => p,\n isStatic: false,\n reducedMotion: \"never\",\n});\n//# sourceMappingURL=MotionConfigContext.js.map","\"use client\";\nimport { createContext } from \"react\";\nexport const MotionContext = /* @__PURE__ */ createContext({});\n//# sourceMappingURL=index.js.map","const stepsOrder = [\n \"setup\", // Compute\n \"read\", // Read\n \"resolveKeyframes\", // Write/Read/Write/Read\n \"preUpdate\", // Compute\n \"update\", // Compute\n \"preRender\", // Compute\n \"render\", // Write\n \"postRender\", // Compute\n];\n\nexport { stepsOrder };\n//# sourceMappingURL=order.mjs.map\n","import { MotionGlobalConfig } from 'motion-utils';\nimport { stepsOrder } from './order.mjs';\nimport { createRenderStep } from './render-step.mjs';\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, allowKeepAlive ? key : undefined);\n return acc;\n }, {});\n const { setup, read, resolveKeyframes, preUpdate, update, preRender, render, postRender, } = steps;\n const processBatch = () => {\n const useManualTiming = MotionGlobalConfig.useManualTiming;\n const timestamp = useManualTiming\n ? state.timestamp\n : performance.now();\n runNextFrame = false;\n if (!useManualTiming) {\n state.delta = useDefaultElapsed\n ? 1000 / 60\n : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);\n }\n state.timestamp = timestamp;\n state.isProcessing = true;\n // Unrolled render loop for better per-frame performance\n setup.process(state);\n read.process(state);\n resolveKeyframes.process(state);\n preUpdate.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 };\n//# sourceMappingURL=batcher.mjs.map\n","import { statsBuffer } from '../stats/buffer.mjs';\n\nfunction createRenderStep(runNextFrame, stepName) {\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 let numCalls = 0;\n function triggerCallback(callback) {\n if (toKeepAlive.has(callback)) {\n step.schedule(callback);\n runNextFrame();\n }\n numCalls++;\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 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 // Swap this frame and the next to avoid GC\n const prevFrame = thisFrame;\n thisFrame = nextFrame;\n nextFrame = prevFrame;\n // Execute this frame\n thisFrame.forEach(triggerCallback);\n /**\n * If we're recording stats then\n */\n if (stepName && statsBuffer.value) {\n statsBuffer.value.frameloop[stepName].push(numCalls);\n }\n numCalls = 0;\n // Clear the frame so no callbacks remain. This is to avoid\n // memory leaks should this render step not run for a while.\n thisFrame.clear();\n isProcessing = false;\n if (flushNextFrame) {\n flushNextFrame = false;\n step.process(frameData);\n }\n },\n };\n return step;\n}\n\nexport { createRenderStep };\n//# sourceMappingURL=render-step.mjs.map\n","import { noop } from 'motion-utils';\nimport { createRenderBatcher } from './batcher.mjs';\n\nconst { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps, } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== \"undefined\" ? requestAnimationFrame : noop, true);\n\nexport { cancelFrame, frame, frameData, frameSteps };\n//# sourceMappingURL=frame.mjs.map\n","import { MotionGlobalConfig } from 'motion-utils';\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//# sourceMappingURL=sync-time.mjs.map\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/**\n * Check if a value contains a CSS variable anywhere (e.g. inside calc()).\n * Unlike isCSSVariableToken which checks if the value IS a var() token,\n * this checks if the value CONTAINS var() somewhere in the string.\n */\nfunction containsCSSVariable(value) {\n if (typeof value !== \"string\")\n return false;\n // Strip comments to avoid false positives\n return value.split(\"/*\")[0].includes(\"var(--\");\n}\n\nexport { containsCSSVariable, isCSSVariableName, isCSSVariableToken };\n//# sourceMappingURL=is-css-variable.mjs.map\n","import { clamp } from 'motion-utils';\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//# sourceMappingURL=index.mjs.map\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//# sourceMappingURL=sanitize.mjs.map\n","const floatRegex = /-?(?:\\d+(?:\\.\\d+)?|\\.\\d+)/gu;\n\nexport { floatRegex };\n//# sourceMappingURL=float-regex.mjs.map\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//# sourceMappingURL=single-color-regex.mjs.map\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//# sourceMappingURL=utils.mjs.map\n","function isNullish(v) {\n return v == null;\n}\n\nexport { isNullish };\n//# sourceMappingURL=is-nullish.mjs.map\n","import { clamp } from 'motion-utils';\nimport { number, alpha } from '../numbers/index.mjs';\nimport { sanitize } from '../utils/sanitize.mjs';\nimport { splitColor, isColorString } 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//# sourceMappingURL=rgba.mjs.map\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//# sourceMappingURL=hex.mjs.map\n","/*#__NO_SIDE_EFFECTS__*/\nconst 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 = /*@__PURE__*/ (() => ({\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//# sourceMappingURL=units.mjs.map\n","import { alpha } from '../numbers/index.mjs';\nimport { percent } from '../numbers/units.mjs';\nimport { sanitize } from '../utils/sanitize.mjs';\nimport { splitColor, isColorString } 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//# sourceMappingURL=hsla.mjs.map\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 getAnimatableNone: (v) => {\n const parsed = color.parse(v);\n parsed.alpha = 0;\n return color.transform(parsed);\n },\n};\n\nexport { color };\n//# sourceMappingURL=index.mjs.map\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//# sourceMappingURL=color-regex.mjs.map\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 return (isNaN(v) &&\n typeof v === \"string\" &&\n (v.match(floatRegex)?.length || 0) +\n (v.match(colorRegex)?.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 buildTransformer({ split, types }) {\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}\nfunction createTransformer(source) {\n return buildTransformer(analyseComplexValue(source));\n}\nconst convertNumbersToZero = (v) => typeof v === \"number\" ? 0 : color.test(v) ? color.getAnimatableNone(v) : v;\n/**\n * Convert a parsed value to its zero equivalent, but preserve numbers\n * that act as divisors in CSS calc() expressions.\n *\n * analyseComplexValue extracts numbers from CSS strings and puts the\n * surrounding text into a `split` template array. For example:\n * \"calc(var(--gap) / 5)\" → values: [var(--gap), 5]\n * split: [\"calc(\", \" / \", \")\"]\n *\n * When building a zero-equivalent for animation, naively zeroing all\n * numbers turns the divisor into 0 → \"calc(var(--gap) / 0)\" → NaN.\n * We detect this by checking whether the text preceding a number\n * (split[i]) ends with \"/\" — the CSS calc division operator.\n */\nconst convertToZero = (value, splitBefore) => {\n if (typeof value === \"number\") {\n return splitBefore?.trim().endsWith(\"/\") ? value : 0;\n }\n return convertNumbersToZero(value);\n};\nfunction getAnimatableNone(v) {\n const info = analyseComplexValue(v);\n const transformer = buildTransformer(info);\n return transformer(info.values.map((value, i) => convertToZero(value, info.split[i])));\n}\nconst complex = {\n test,\n parse: parseComplexValue,\n createTransformer,\n getAnimatableNone,\n};\n\nexport { analyseComplexValue, complex };\n//# sourceMappingURL=index.mjs.map\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//# sourceMappingURL=hsla-to-rgba.mjs.map\n","function mixImmediate(a, b) {\n return (p) => (p > 0 ? b : a);\n}\n\nexport { mixImmediate };\n//# sourceMappingURL=immediate.mjs.map\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//# sourceMappingURL=number.mjs.map\n","import { warning } from 'motion-utils';\nimport { hex } from '../../value/types/color/hex.mjs';\nimport { hsla } from '../../value/types/color/hsla.mjs';\nimport { hslaToRgba } from '../../value/types/color/hsla-to-rgba.mjs';\nimport { rgba } from '../../value/types/color/rgba.mjs';\nimport { mixImmediate } from './immediate.mjs';\nimport { mixNumber } from './number.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.`, \"color-not-animatable\");\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//# sourceMappingURL=color.mjs.map\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//# sourceMappingURL=visibility.mjs.map\n","import { pipe, warning } from 'motion-utils';\nimport { isCSSVariableToken } from '../../animation/utils/is-css-variable.mjs';\nimport { color } from '../../value/types/color/index.mjs';\nimport { complex, analyseComplexValue } from '../../value/types/complex/index.mjs';\nimport { mixColor } from './color.mjs';\nimport { mixImmediate } from './immediate.mjs';\nimport { mixNumber as mixNumber$1 } from './number.mjs';\nimport { invisibleValues, mixVisibility } from './visibility.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 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 = origin.values[originIndex] ?? 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.`, \"complex-values-different\");\n return mixImmediate(origin, target);\n }\n};\n\nexport { getMixer, mixArray, mixComplex, mixObject };\n//# sourceMappingURL=complex.mjs.map\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//# sourceMappingURL=index.mjs.map\n","import { time } from '../../frameloop/sync-time.mjs';\nimport { frameData, cancelFrame, frame } from '../../frameloop/frame.mjs';\n\nconst frameloopDriver = (update) => {\n const passTimestamp = ({ timestamp }) => update(timestamp);\n return {\n start: (keepAlive = true) => frame.update(passTimestamp, keepAlive),\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//# sourceMappingURL=frame.mjs.map\n","const generateLinearEasing = (easing, duration, // as milliseconds\nresolution = 10 // 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 += Math.round(easing(i / (numPoints - 1)) * 10000) / 10000 + \", \";\n }\n return `linear(${points.substring(0, points.length - 2)})`;\n};\n\nexport { generateLinearEasing };\n//# sourceMappingURL=linear.mjs.map\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//# sourceMappingURL=calc-duration.mjs.map\n","import { millisecondsToSeconds, clamp, secondsToMilliseconds, warning } from 'motion-utils';\nimport { generateLinearEasing } from '../waapi/utils/linear.mjs';\nimport { calcGeneratorDuration, maxGeneratorDuration } from './utils/calc-duration.mjs';\nimport { createGeneratorEasing } from './utils/create-generator-easing.mjs';\n\nconst springDefaults = {\n // Default spring physics\n stiffness: 100,\n damping: 10,\n mass: 1.0,\n velocity: 0.0,\n // Default duration/bounce-based options\n duration: 800, // in ms\n bounce: 0.3,\n visualDuration: 0.3, // in seconds\n // Rest thresholds\n restSpeed: {\n granular: 0.01,\n default: 2,\n },\n restDelta: {\n granular: 0.005,\n default: 0.5,\n },\n // Limits\n minDuration: 0.01, // in seconds\n maxDuration: 10.0, // in seconds\n minDamping: 0.05,\n maxDamping: 1,\n};\nfunction calcAngularFreq(undampedFreq, dampingRatio) {\n return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);\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}\n/**\n * This is ported from the Framer implementation of duration-based spring resolution.\n */\nconst safeMin = 0.001;\nfunction findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, velocity = springDefaults.velocity, mass = springDefaults.mass, }) {\n let envelope;\n let derivative;\n warning(duration <= secondsToMilliseconds(springDefaults.maxDuration), \"Spring duration must be 10 seconds or less\", \"spring-duration-limit\");\n let dampingRatio = 1 - bounce;\n /**\n * Restrict dampingRatio and duration to within acceptable ranges.\n */\n dampingRatio = clamp(springDefaults.minDamping, springDefaults.maxDamping, dampingRatio);\n duration = clamp(springDefaults.minDuration, springDefaults.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: springDefaults.stiffness,\n damping: springDefaults.damping,\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 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: springDefaults.velocity,\n stiffness: springDefaults.stiffness,\n damping: springDefaults.damping,\n mass: springDefaults.mass,\n isResolvedFromDuration: false,\n ...options,\n };\n // stiffness/damping/mass overrides duration/bounce\n if (!isSpringType(options, physicsKeys) &&\n isSpringType(options, durationKeys)) {\n // Time-defined springs should ignore inherited velocity.\n // Velocity from interrupted animations can cause findSpring()\n // to compute wildly different spring parameters, leading to\n // massive oscillation on small-range animations.\n springOptions.velocity = 0;\n if (options.visualDuration) {\n const visualDuration = options.visualDuration;\n const root = (2 * Math.PI) / (visualDuration * 1.2);\n const stiffness = root * root;\n const damping = 2 *\n clamp(0.05, 1, 1 - (options.bounce || 0)) *\n Math.sqrt(stiffness);\n springOptions = {\n ...springOptions,\n mass: springDefaults.mass,\n stiffness,\n damping,\n };\n }\n else {\n const derived = findSpring({ ...options, velocity: 0 });\n springOptions = {\n ...springOptions,\n ...derived,\n mass: springDefaults.mass,\n };\n springOptions.isResolvedFromDuration = true;\n }\n }\n return springOptions;\n}\nfunction spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce = springDefaults.bounce) {\n const options = typeof optionsOrVisualDuration !== \"object\"\n ? {\n visualDuration: optionsOrVisualDuration,\n keyframes: [0, 1],\n bounce,\n }\n : optionsOrVisualDuration;\n let { restSpeed, restDelta } = options;\n const origin = options.keyframes[0];\n const target = options.keyframes[options.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\n ? springDefaults.restSpeed.granular\n : springDefaults.restSpeed.default);\n restDelta || (restDelta = isGranularScale\n ? springDefaults.restDelta.granular\n : springDefaults.restDelta.default);\n let resolveSpring;\n let resolveVelocity;\n // Underdamped coefficients, hoisted for use in the inlined next() hot path\n let angularFreq;\n let A;\n let sinCoeff;\n let cosCoeff;\n if (dampingRatio < 1) {\n angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);\n A =\n (initialVelocity +\n dampingRatio * undampedAngularFreq * initialDelta) /\n angularFreq;\n // Underdamped spring\n resolveSpring = (t) => {\n const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);\n return (target -\n envelope *\n (A * Math.sin(angularFreq * t) +\n initialDelta * Math.cos(angularFreq * t)));\n };\n // Analytical derivative of underdamped spring (px/ms)\n sinCoeff =\n dampingRatio * undampedAngularFreq * A + initialDelta * angularFreq;\n cosCoeff =\n dampingRatio * undampedAngularFreq * initialDelta - A * angularFreq;\n resolveVelocity = (t) => {\n const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);\n return envelope *\n (sinCoeff * Math.sin(angularFreq * t) +\n cosCoeff * 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 // Analytical derivative of critically damped spring (px/ms)\n const C = initialVelocity + undampedAngularFreq * initialDelta;\n resolveVelocity = (t) => Math.exp(-undampedAngularFreq * t) *\n (undampedAngularFreq * C * t - initialVelocity);\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 // Analytical derivative of overdamped spring (px/ms)\n const P = (initialVelocity +\n dampingRatio * undampedAngularFreq * initialDelta) /\n dampedAngularFreq;\n const sinhCoeff = dampingRatio * undampedAngularFreq * P - initialDelta * dampedAngularFreq;\n const coshCoeff = dampingRatio * undampedAngularFreq * initialDelta - P * dampedAngularFreq;\n resolveVelocity = (t) => {\n const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);\n const freqForT = Math.min(dampedAngularFreq * t, 300);\n return envelope *\n (sinhCoeff * Math.sinh(freqForT) +\n coshCoeff * Math.cosh(freqForT));\n };\n }\n const generator = {\n calculatedDuration: isResolvedFromDuration ? duration || null : null,\n velocity: (t) => secondsToMilliseconds(resolveVelocity(t)),\n next: (t) => {\n /**\n * For underdamped physics springs we need both position and\n * velocity each tick. Compute shared trig values once to avoid\n * duplicate Math.exp/sin/cos calls on the hot path.\n */\n if (!isResolvedFromDuration && dampingRatio < 1) {\n const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);\n const sin = Math.sin(angularFreq * t);\n const cos = Math.cos(angularFreq * t);\n const current = target -\n envelope *\n (A * sin + initialDelta * cos);\n const currentVelocity = secondsToMilliseconds(envelope *\n (sinCoeff * sin + cosCoeff * cos));\n state.done =\n Math.abs(currentVelocity) <= restSpeed &&\n Math.abs(target - current) <= restDelta;\n state.value = state.done ? target : current;\n return state;\n }\n const current = resolveSpring(t);\n if (!isResolvedFromDuration) {\n const currentVelocity = secondsToMilliseconds(resolveVelocity(t));\n state.done =\n Math.abs(currentVelocity) <= restSpeed &&\n Math.abs(target - current) <= restDelta;\n }\n else {\n state.done = t >= duration;\n }\n state.value = state.done ? target : current;\n return state;\n },\n toString: () => {\n const calculatedDuration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);\n const easing = generateLinearEasing((progress) => generator.next(calculatedDuration * progress).value, calculatedDuration, 30);\n return calculatedDuration + \"ms \" + easing;\n },\n toTransition: () => { },\n };\n return generator;\n}\nspring.applyToOptions = (options) => {\n const generatorOptions = createGeneratorEasing(options, 100, spring);\n options.ease = generatorOptions.ease;\n options.duration = secondsToMilliseconds(generatorOptions.duration);\n options.type = \"keyframes\";\n return options;\n};\n\nexport { spring };\n//# sourceMappingURL=spring.mjs.map\n","import { millisecondsToSeconds } from 'motion-utils';\nimport { calcGeneratorDuration, maxGeneratorDuration } from './calc-duration.mjs';\n\n/**\n * Create a progress => progress easing function from a generator.\n */\nfunction createGeneratorEasing(options, scale = 100, createGenerator) {\n const generator = createGenerator({ ...options, keyframes: [0, scale] });\n const duration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);\n return {\n type: \"keyframes\",\n ease: (progress) => {\n return generator.next(duration * progress).value / scale;\n },\n duration: millisecondsToSeconds(duration),\n };\n}\n\nexport { createGeneratorEasing };\n//# sourceMappingURL=create-generator-easing.mjs.map\n","import { velocityPerSecond } from 'motion-utils';\n\nconst velocitySampleDuration = 5; // ms\nfunction getGeneratorVelocity(resolveValue, t, current) {\n const prevT = Math.max(t - velocitySampleDuration, 0);\n return velocityPerSecond(current - resolveValue(prevT), t - prevT);\n}\n\nexport { getGeneratorVelocity };\n//# sourceMappingURL=velocity.mjs.map\n","import { spring } from './spring.mjs';\nimport { getGeneratorVelocity } 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: getGeneratorVelocity(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//# sourceMappingURL=inertia.mjs.map\n","import { invariant, clamp, MotionGlobalConfig, noop, pipe, progress } from 'motion-utils';\nimport { mix } from './mix/index.mjs';\n\nfunction createMixers(output, ease, customMixer) {\n const mixers = [];\n const mixerFactory = customMixer || MotionGlobalConfig.mix || 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 Revisit 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\", \"range-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 && output[0] === output[1])\n return () => output[1];\n const isZeroDeltaRange = input[0] === input[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 if (isZeroDeltaRange && v < input[0])\n return output[0];\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//# sourceMappingURL=interpolate.mjs.map\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//# sourceMappingURL=default.mjs.map\n","import { progress } from 'motion-utils';\nimport { mixNumber } from '../../../utils/mix/number.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//# sourceMappingURL=fill.mjs.map\n","import { easeInOut, isEasingArray, easingDefinitionToFunction } from 'motion-utils';\nimport { interpolate } from '../../utils/interpolate.mjs';\nimport { defaultOffset } from '../keyframes/offsets/default.mjs';\nimport { convertOffsetToTimes } from '../keyframes/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//# sourceMappingURL=keyframes.mjs.map\n","/*#__NO_SIDE_EFFECTS__*/\nconst isEasingArray = (ease) => {\n return Array.isArray(ease) && typeof ease[0] !== \"number\";\n};\n\nexport { isEasingArray };\n//# sourceMappingURL=is-easing-array.mjs.map\n","function convertOffsetToTimes(offset, duration) {\n return offset.map((o) => o * duration);\n}\n\nexport { convertOffsetToTimes };\n//# sourceMappingURL=time.mjs.map\n","const isNotNull = (value) => value !== null;\nfunction getFinalKeyframe(keyframes, { repeat, repeatType = \"loop\" }, finalKeyframe, speed = 1) {\n const resolvedKeyframes = keyframes.filter(isNotNull);\n const useFirstKeyframe = speed < 0 || (repeat && repeatType !== \"loop\" && repeat % 2 === 1);\n const index = useFirstKeyframe ? 0 : resolvedKeyframes.length - 1;\n return !index || finalKeyframe === undefined\n ? resolvedKeyframes[index]\n : finalKeyframe;\n}\n\nexport { getFinalKeyframe };\n//# sourceMappingURL=get-final.mjs.map\n","import { inertia } from '../generators/inertia.mjs';\nimport { keyframes } from '../generators/keyframes.mjs';\nimport { spring } from '../generators/spring.mjs';\n\nconst transitionTypeMap = {\n decay: inertia,\n inertia,\n tween: keyframes,\n keyframes: keyframes,\n spring,\n};\nfunction replaceTransitionType(transition) {\n if (typeof transition.type === \"string\") {\n transition.type = transitionTypeMap[transition.type];\n }\n}\n\nexport { replaceTransitionType };\n//# sourceMappingURL=replace-transition-type.mjs.map\n","class WithPromise {\n constructor() {\n this.updateFinished();\n }\n get finished() {\n return this._finished;\n }\n updateFinished() {\n this._finished = new Promise((resolve) => {\n this.resolve = resolve;\n });\n }\n notifyFinished() {\n this.resolve();\n }\n /**\n * Allows the animation to be awaited.\n *\n * @deprecated Use `finished` instead.\n */\n then(onResolve, onReject) {\n return this.finished.then(onResolve, onReject);\n }\n}\n\nexport { WithPromise };\n//# sourceMappingURL=WithPromise.mjs.map\n","import { invariant, pipe, clamp, millisecondsToSeconds, secondsToMilliseconds } from 'motion-utils';\nimport { time } from '../frameloop/sync-time.mjs';\nimport { activeAnimations } from '../stats/animation-count.mjs';\nimport { mix } from '../utils/mix/index.mjs';\nimport { frameloopDriver } from './drivers/frame.mjs';\nimport { inertia } from './generators/inertia.mjs';\nimport { keyframes } from './generators/keyframes.mjs';\nimport { calcGeneratorDuration } from './generators/utils/calc-duration.mjs';\nimport { getGeneratorVelocity } from './generators/utils/velocity.mjs';\nimport { getFinalKeyframe } from './keyframes/get-final.mjs';\nimport { replaceTransitionType } from './utils/replace-transition-type.mjs';\nimport { WithPromise } from './utils/WithPromise.mjs';\n\nconst percentToProgress = (percent) => percent / 100;\nclass JSAnimation extends WithPromise {\n constructor(options) {\n super();\n this.state = \"idle\";\n this.startTime = null;\n this.isStopped = false;\n /**\n * The current time of the animation.\n */\n this.currentTime = 0;\n /**\n * The time at which the animation was paused.\n */\n this.holdTime = null;\n /**\n * Playback speed as a factor. 0 would be stopped, -1 reverse and 2 double speed.\n */\n this.playbackSpeed = 1;\n /**\n * Reusable state object for the delay phase to avoid\n * allocating a new object every frame.\n */\n this.delayState = {\n done: false,\n value: undefined,\n };\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 const { motionValue } = this.options;\n if (motionValue && motionValue.updatedAt !== time.now()) {\n this.tick(time.now());\n }\n this.isStopped = true;\n if (this.state === \"idle\")\n return;\n this.teardown();\n this.options.onStop?.();\n };\n activeAnimations.mainThread++;\n this.options = options;\n this.initAnimation();\n this.play();\n if (options.autoplay === false)\n this.pause();\n }\n initAnimation() {\n const { options } = this;\n replaceTransitionType(options);\n const { type = keyframes, repeat = 0, repeatDelay = 0, repeatType, velocity = 0, } = options;\n let { keyframes: keyframes$1 } = options;\n const generatorFactory = type || keyframes;\n if (process.env.NODE_ENV !== \"production\" &&\n generatorFactory !== keyframes) {\n invariant(keyframes$1.length <= 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes$1}`, \"spring-two-frames\");\n }\n if (generatorFactory !== keyframes &&\n typeof keyframes$1[0] !== \"number\") {\n this.mixKeyframes = pipe(percentToProgress, mix(keyframes$1[0], keyframes$1[1]));\n keyframes$1 = [0, 100];\n }\n const generator = generatorFactory({ ...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 this.mirroredGenerator = generatorFactory({\n ...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 this.calculatedDuration = calculatedDuration;\n this.resolvedDuration = calculatedDuration + repeatDelay;\n this.totalDuration = this.resolvedDuration * (repeat + 1) - repeatDelay;\n this.generator = generator;\n }\n updateTime(timestamp) {\n const animationTime = Math.round(timestamp - this.startTime) * this.playbackSpeed;\n // Update currentTime\n 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 = animationTime;\n }\n }\n tick(timestamp, sample = false) {\n const { generator, totalDuration, mixKeyframes, mirroredGenerator, resolvedDuration, calculatedDuration, } = this;\n if (this.startTime === null)\n return generator.next(0);\n const { delay = 0, keyframes, repeat, repeatType, repeatDelay, type, onUpdate, finalKeyframe, } = 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 if (sample) {\n this.currentTime = timestamp;\n }\n else {\n this.updateTime(timestamp);\n }\n // Rebase on delay\n const timeWithoutDelay = this.currentTime - delay * (this.playbackSpeed >= 0 ? 1 : -1);\n const isInDelayPhase = this.playbackSpeed >= 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 let state;\n if (isInDelayPhase) {\n this.delayState.value = keyframes[0];\n state = this.delayState;\n }\n else {\n state = frameGenerator.next(elapsed);\n }\n if (mixKeyframes && !isInDelayPhase) {\n state.value = mixKeyframes(state.value);\n }\n let { done } = state;\n if (!isInDelayPhase && calculatedDuration !== null) {\n done =\n this.playbackSpeed >= 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 // TODO: The exception for inertia could be cleaner here\n if (isAnimationFinished && type !== inertia) {\n state.value = getFinalKeyframe(keyframes, this.options, finalKeyframe, this.speed);\n }\n if (onUpdate) {\n onUpdate(state.value);\n }\n if (isAnimationFinished) {\n this.finish();\n }\n return state;\n }\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.finished.then(resolve, reject);\n }\n get duration() {\n return millisecondsToSeconds(this.calculatedDuration);\n }\n get iterationDuration() {\n const { delay = 0 } = this.options || {};\n return this.duration + millisecondsToSeconds(delay);\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.startTime === null ||\n this.holdTime !== null ||\n this.playbackSpeed === 0) {\n this.holdTime = newTime;\n }\n else if (this.driver) {\n this.startTime = this.driver.now() - newTime / this.playbackSpeed;\n }\n if (this.driver) {\n this.driver.start(false);\n }\n else {\n this.startTime = 0;\n this.state = \"paused\";\n this.holdTime = newTime;\n this.tick(newTime);\n }\n }\n /**\n * Returns the generator's velocity at the current time in units/second.\n * Uses the analytical derivative when available (springs), avoiding\n * the MotionValue's frame-dependent velocity estimation.\n */\n getGeneratorVelocity() {\n const t = this.currentTime;\n if (t <= 0)\n return this.options.velocity || 0;\n if (this.generator.velocity) {\n return this.generator.velocity(t);\n }\n // Fallback: finite difference\n const current = this.generator.next(t).value;\n return getGeneratorVelocity((s) => this.generator.next(s).value, t, current);\n }\n get speed() {\n return this.playbackSpeed;\n }\n set speed(newSpeed) {\n const hasChanged = this.playbackSpeed !== newSpeed;\n if (hasChanged && this.driver) {\n this.updateTime(time.now());\n }\n this.playbackSpeed = newSpeed;\n if (hasChanged && this.driver) {\n this.time = millisecondsToSeconds(this.currentTime);\n }\n }\n play() {\n if (this.isStopped)\n return;\n const { driver = frameloopDriver, startTime } = this.options;\n if (!this.driver) {\n this.driver = driver((timestamp) => this.tick(timestamp));\n }\n this.options.onPlay?.();\n const now = this.driver.now();\n if (this.state === \"finished\") {\n this.updateFinished();\n this.startTime = now;\n }\n else if (this.holdTime !== null) {\n this.startTime = now - this.holdTime;\n }\n else if (!this.startTime) {\n this.startTime = startTime ?? now;\n }\n if (this.state === \"finished\" && this.speed < 0) {\n this.startTime += this.calculatedDuration;\n }\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 this.state = \"paused\";\n this.updateTime(time.now());\n this.holdTime = this.currentTime;\n }\n complete() {\n if (this.state !== \"running\") {\n this.play();\n }\n this.state = \"finished\";\n this.holdTime = null;\n }\n finish() {\n this.notifyFinished();\n this.teardown();\n this.state = \"finished\";\n this.options.onComplete?.();\n }\n cancel() {\n this.holdTime = null;\n this.startTime = 0;\n this.tick(0);\n this.teardown();\n this.options.onCancel?.();\n }\n teardown() {\n this.state = \"idle\";\n this.stopDriver();\n this.startTime = this.holdTime = null;\n activeAnimations.mainThread--;\n }\n stopDriver() {\n if (!this.driver)\n return;\n this.driver.stop();\n this.driver = undefined;\n }\n sample(sampleTime) {\n this.startTime = 0;\n return this.tick(sampleTime, true);\n }\n attachTimeline(timeline) {\n if (this.options.allowFlatten) {\n this.options.type = \"keyframes\";\n this.options.ease = \"linear\";\n this.initAnimation();\n }\n this.driver?.stop();\n return timeline.observe(this);\n }\n}\n// Legacy function support\nfunction animateValue(options) {\n return new JSAnimation(options);\n}\n\nexport { JSAnimation, animateValue };\n//# sourceMappingURL=JSAnimation.mjs.map\n","const radToDeg = (rad) => (rad * 180) / Math.PI;\nconst rotate = (v) => {\n const angle = radToDeg(Math.atan2(v[1], v[0]));\n return rebaseAngle(angle);\n};\nconst matrix2dParsers = {\n x: 4,\n y: 5,\n translateX: 4,\n translateY: 5,\n scaleX: 0,\n scaleY: 3,\n scale: (v) => (Math.abs(v[0]) + Math.abs(v[3])) / 2,\n rotate,\n rotateZ: rotate,\n skewX: (v) => radToDeg(Math.atan(v[1])),\n skewY: (v) => radToDeg(Math.atan(v[2])),\n skew: (v) => (Math.abs(v[1]) + Math.abs(v[2])) / 2,\n};\nconst rebaseAngle = (angle) => {\n angle = angle % 360;\n if (angle < 0)\n angle += 360;\n return angle;\n};\nconst rotateZ = rotate;\nconst scaleX = (v) => Math.sqrt(v[0] * v[0] + v[1] * v[1]);\nconst scaleY = (v) => Math.sqrt(v[4] * v[4] + v[5] * v[5]);\nconst matrix3dParsers = {\n x: 12,\n y: 13,\n z: 14,\n translateX: 12,\n translateY: 13,\n translateZ: 14,\n scaleX,\n scaleY,\n scale: (v) => (scaleX(v) + scaleY(v)) / 2,\n rotateX: (v) => rebaseAngle(radToDeg(Math.atan2(v[6], v[5]))),\n rotateY: (v) => rebaseAngle(radToDeg(Math.atan2(-v[2], v[0]))),\n rotateZ,\n rotate: rotateZ,\n skewX: (v) => radToDeg(Math.atan(v[4])),\n skewY: (v) => radToDeg(Math.atan(v[1])),\n skew: (v) => (Math.abs(v[1]) + Math.abs(v[4])) / 2,\n};\nfunction defaultTransformValue(name) {\n return name.includes(\"scale\") ? 1 : 0;\n}\nfunction parseValueFromTransform(transform, name) {\n if (!transform || transform === \"none\") {\n return defaultTransformValue(name);\n }\n const matrix3dMatch = transform.match(/^matrix3d\\(([-\\d.e\\s,]+)\\)$/u);\n let parsers;\n let match;\n if (matrix3dMatch) {\n parsers = matrix3dParsers;\n match = matrix3dMatch;\n }\n else {\n const matrix2dMatch = transform.match(/^matrix\\(([-\\d.e\\s,]+)\\)$/u);\n parsers = matrix2dParsers;\n match = matrix2dMatch;\n }\n if (!match) {\n return defaultTransformValue(name);\n }\n const valueParser = parsers[name];\n const values = match[1].split(\",\").map(convertTransformToNumber);\n return typeof valueParser === \"function\"\n ? valueParser(values)\n : values[valueParser];\n}\nconst readTransformValue = (instance, name) => {\n const { transform = \"none\" } = getComputedStyle(instance);\n return parseValueFromTransform(transform, name);\n};\nfunction convertTransformToNumber(value) {\n return parseFloat(value.trim());\n}\n\nexport { defaultTransformValue, parseValueFromTransform, readTransformValue };\n//# sourceMappingURL=parse-transform.mjs.map\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 *\n * `pathRotation` is a transform for routing purposes (skipped from raw\n * style application, wired to the transform composite, flags transform\n * dirty) but is intentionally NOT in `transformPropOrder` — it is\n * composed onto `rotate` at the build sites, not serialized in its own\n * slot, and must stay out of the order-array consumers (parse-transform,\n * unit-conversion, keys-position).\n */\nconst transformProps = /*@__PURE__*/ (() => new Set([...transformPropOrder, \"pathRotation\"]))();\n\nexport { transformPropOrder, transformProps };\n//# sourceMappingURL=keys-transform.mjs.map\n","import { parseValueFromTransform } from '../../../render/dom/parse-transform.mjs';\nimport { transformPropOrder } from '../../../render/utils/keys-transform.mjs';\nimport { number } from '../../../value/types/numbers/index.mjs';\nimport { px } from '../../../value/types/numbers/units.mjs';\n\nconst isNumOrPxType = (v) => v === number || v === px;\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\", boxSizing }) => {\n const width = x.max - x.min;\n return boxSizing === \"border-box\"\n ? width\n : width - parseFloat(paddingLeft) - parseFloat(paddingRight);\n },\n height: ({ y }, { paddingTop = \"0\", paddingBottom = \"0\", boxSizing }) => {\n const height = y.max - y.min;\n return boxSizing === \"border-box\"\n ? height\n : height - parseFloat(paddingTop) - parseFloat(paddingBottom);\n },\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: (_bbox, { transform }) => parseValueFromTransform(transform, \"x\"),\n y: (_bbox, { transform }) => parseValueFromTransform(transform, \"y\"),\n};\n// Alias translate longform names\npositionalValues.translateX = positionalValues.x;\npositionalValues.translateY = positionalValues.y;\n\nexport { isNumOrPxType, positionalValues, removeNonTranslationalTransform };\n//# sourceMappingURL=unit-conversion.mjs.map\n","import { fillWildcards } from './utils/fill-wildcards.mjs';\nimport { removeNonTranslationalTransform } from './utils/unit-conversion.mjs';\nimport { frame } from '../../frameloop/frame.mjs';\n\nconst toResolve = new Set();\nlet isScheduled = false;\nlet anyNeedsMeasurement = false;\nlet isForced = 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 element.getValue(key)?.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(isForced));\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 isForced = true;\n readAllKeyframes();\n measureAllKeyframes();\n isForced = false;\n}\nclass KeyframeResolver {\n constructor(unresolvedKeyframes, onComplete, name, motionValue, element, isAsync = false) {\n this.state = \"pending\";\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 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.state = \"scheduled\";\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 // If initial keyframe is null we need to read it from the DOM\n if (unresolvedKeyframes[0] === null) {\n const currentValue = motionValue?.get();\n // TODO: This doesn't work if the final keyframe is a wildcard\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 fillWildcards(unresolvedKeyframes);\n }\n setFinalKeyframe() { }\n measureInitialState() { }\n renderEndStyles() { }\n measureEndState() { }\n complete(isForcedComplete = false) {\n this.state = \"complete\";\n this.onComplete(this.unresolvedKeyframes, this.finalKeyframe, isForcedComplete);\n toResolve.delete(this);\n }\n cancel() {\n if (this.state === \"scheduled\") {\n toResolve.delete(this);\n this.state = \"pending\";\n }\n }\n resume() {\n if (this.state === \"pending\")\n this.scheduleResolve();\n }\n}\n\nexport { KeyframeResolver, flushKeyframeResolvers };\n//# sourceMappingURL=KeyframesResolver.mjs.map\n","function fillWildcards(keyframes) {\n for (let i = 1; i < keyframes.length; i++) {\n keyframes[i] ?? (keyframes[i] = keyframes[i - 1]);\n }\n}\n\nexport { fillWildcards };\n//# sourceMappingURL=fill-wildcards.mjs.map\n","import { isCSSVar } from './is-css-var.mjs';\n\nfunction setStyle(element, name, value) {\n isCSSVar(name)\n ? element.style.setProperty(name, value)\n : (element.style[name] = value);\n}\n\nexport { setStyle };\n//# sourceMappingURL=style-set.mjs.map\n","const isCSSVar = (name) => name.startsWith(\"--\");\n\nexport { isCSSVar };\n//# sourceMappingURL=is-css-var.mjs.map\n","/**\n * Add the ability for test suites to manually set support flags\n * to better test more environments.\n */\nconst supportsFlags = {};\n\nexport { supportsFlags };\n//# sourceMappingURL=flags.mjs.map\n","import { memo } from 'motion-utils';\nimport { supportsFlags } from './flags.mjs';\n\nfunction memoSupports(callback, supportsFlag) {\n const memoized = memo(callback);\n return () => supportsFlags[supportsFlag] ?? memoized();\n}\n\nexport { memoSupports };\n//# sourceMappingURL=memo.mjs.map\n","import { memoSupports } from './memo.mjs';\n\nconst supportsScrollTimeline = /* @__PURE__ */ memoSupports(() => window.ScrollTimeline !== undefined, \"scrollTimeline\");\nconst supportsViewTimeline = /* @__PURE__ */ memoSupports(() => window.ViewTimeline !== undefined, \"viewTimeline\");\n\nexport { supportsScrollTimeline, supportsViewTimeline };\n//# sourceMappingURL=scroll-timeline.mjs.map\n","import { memoSupports } from './memo.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//# sourceMappingURL=linear-easing.mjs.map\n","const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;\n\nexport { cubicBezierAsString };\n//# sourceMappingURL=cubic-bezier.mjs.map\n","import { cubicBezierAsString } from './cubic-bezier.mjs';\n\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};\n\nexport { supportedWaapiEasing };\n//# sourceMappingURL=supported.mjs.map\n","import { isBezierDefinition } from 'motion-utils';\nimport { supportsLinearEasing } from '../../../utils/supports/linear-easing.mjs';\nimport { generateLinearEasing } from '../utils/linear.mjs';\nimport { cubicBezierAsString } from './cubic-bezier.mjs';\nimport { supportedWaapiEasing } from './supported.mjs';\n\nfunction mapEasingToNativeEasing(easing, duration) {\n if (!easing) {\n return undefined;\n }\n else if (typeof easing === \"function\") {\n return supportsLinearEasing()\n ? generateLinearEasing(easing, duration)\n : \"ease-out\";\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 { mapEasingToNativeEasing };\n//# sourceMappingURL=map-easing.mjs.map\n","import { activeAnimations } from '../../stats/animation-count.mjs';\nimport { statsBuffer } from '../../stats/buffer.mjs';\nimport { mapEasingToNativeEasing } from './easing/map-easing.mjs';\n\nfunction startWaapiAnimation(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = \"loop\", ease = \"easeOut\", times, } = {}, pseudoElement = undefined) {\n const keyframeOptions = {\n [valueName]: keyframes,\n };\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 if (statsBuffer.value) {\n activeAnimations.waapi++;\n }\n const options = {\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 if (pseudoElement)\n options.pseudoElement = pseudoElement;\n const animation = element.animate(keyframeOptions, options);\n if (statsBuffer.value) {\n animation.finished.finally(() => {\n activeAnimations.waapi--;\n });\n }\n return animation;\n}\n\nexport { startWaapiAnimation };\n//# sourceMappingURL=start-waapi-animation.mjs.map\n","function isGenerator(type) {\n return typeof type === \"function\" && \"applyToOptions\" in type;\n}\n\nexport { isGenerator };\n//# sourceMappingURL=is-generator.mjs.map\n","import { invariant, millisecondsToSeconds, secondsToMilliseconds, noop } from 'motion-utils';\nimport { setStyle } from '../render/dom/style-set.mjs';\nimport { supportsScrollTimeline } from '../utils/supports/scroll-timeline.mjs';\nimport { getFinalKeyframe } from './keyframes/get-final.mjs';\nimport { WithPromise } from './utils/WithPromise.mjs';\nimport { startWaapiAnimation } from './waapi/start-waapi-animation.mjs';\nimport { applyGeneratorOptions } from './waapi/utils/apply-generator.mjs';\n\n/**\n * NativeAnimation implements AnimationPlaybackControls for the browser's Web Animations API.\n */\nclass NativeAnimation extends WithPromise {\n constructor(options) {\n super();\n this.finishedTime = null;\n this.isStopped = false;\n /**\n * Tracks a manually-set start time that takes precedence over WAAPI's\n * dynamic startTime. This is cleared when play() or time setter is called,\n * allowing WAAPI to take over timing.\n */\n this.manualStartTime = null;\n if (!options)\n return;\n const { element, name, keyframes, pseudoElement, allowFlatten = false, finalKeyframe, onComplete, } = options;\n this.isPseudoElement = Boolean(pseudoElement);\n this.allowFlatten = allowFlatten;\n this.options = options;\n invariant(typeof options.type !== \"string\", `Mini animate() doesn't support \"type\" as a string.`, \"mini-spring\");\n const transition = applyGeneratorOptions(options);\n this.animation = startWaapiAnimation(element, name, keyframes, transition, pseudoElement);\n if (transition.autoplay === false) {\n this.animation.pause();\n }\n this.animation.onfinish = () => {\n this.finishedTime = this.time;\n if (!pseudoElement) {\n const keyframe = getFinalKeyframe(keyframes, this.options, finalKeyframe, this.speed);\n if (this.updateMotionValue) {\n this.updateMotionValue(keyframe);\n }\n /**\n * If we can, we want to commit the final style as set by the user,\n * rather than the computed keyframe value supplied by the animation.\n * We always do this, even when a motion value is present, to prevent\n * a visual flash in Firefox where the WAAPI animation's fill is removed\n * during cancel() before the scheduled render can apply the correct value.\n */\n setStyle(element, name, keyframe);\n this.animation.cancel();\n }\n onComplete?.();\n this.notifyFinished();\n };\n }\n play() {\n if (this.isStopped)\n return;\n this.manualStartTime = null;\n this.animation.play();\n if (this.state === \"finished\") {\n this.updateFinished();\n }\n }\n pause() {\n this.animation.pause();\n }\n complete() {\n this.animation.finish?.();\n }\n cancel() {\n try {\n this.animation.cancel();\n }\n catch (e) { }\n }\n stop() {\n if (this.isStopped)\n return;\n this.isStopped = true;\n const { state } = this;\n if (state === \"idle\" || state === \"finished\") {\n return;\n }\n if (this.updateMotionValue) {\n this.updateMotionValue();\n }\n else {\n this.commitStyles();\n }\n if (!this.isPseudoElement)\n this.cancel();\n }\n /**\n * WAAPI doesn't natively have any interruption capabilities.\n *\n * In this method, we commit styles back to the DOM before cancelling\n * the animation.\n *\n * This is designed to be overridden by NativeAnimationExtended, which\n * will create a renderless JS animation and sample it twice to calculate\n * its current value, \"previous\" value, and therefore allow\n * Motion to also correctly calculate velocity for any subsequent animation\n * while deferring the commit until the next animation frame.\n */\n commitStyles() {\n const element = this.options?.element;\n if (!this.isPseudoElement && element?.isConnected) {\n this.animation.commitStyles?.();\n }\n }\n get duration() {\n const duration = this.animation.effect?.getComputedTiming?.().duration || 0;\n return millisecondsToSeconds(Number(duration));\n }\n get iterationDuration() {\n const { delay = 0 } = this.options || {};\n return this.duration + millisecondsToSeconds(delay);\n }\n get time() {\n return millisecondsToSeconds(Number(this.animation.currentTime) || 0);\n }\n set time(newTime) {\n const wasFinished = this.finishedTime !== null;\n this.manualStartTime = null;\n this.finishedTime = null;\n this.animation.currentTime = secondsToMilliseconds(newTime);\n if (wasFinished) {\n this.animation.pause();\n }\n }\n /**\n * The playback speed of the animation.\n * 1 = normal speed, 2 = double speed, 0.5 = half speed.\n */\n get speed() {\n return this.animation.playbackRate;\n }\n set speed(newSpeed) {\n // Allow backwards playback after finishing\n if (newSpeed < 0)\n this.finishedTime = null;\n this.animation.playbackRate = newSpeed;\n }\n get state() {\n return this.finishedTime !== null\n ? \"finished\"\n : this.animation.playState;\n }\n get startTime() {\n return this.manualStartTime ?? Number(this.animation.startTime);\n }\n set startTime(newStartTime) {\n this.manualStartTime = this.animation.startTime = newStartTime;\n }\n /**\n * Attaches a timeline to the animation, for instance the `ScrollTimeline`.\n */\n attachTimeline({ timeline, rangeStart, rangeEnd, observe, }) {\n if (this.allowFlatten) {\n this.animation.effect?.updateTiming({ easing: \"linear\" });\n }\n this.animation.onfinish = null;\n if (timeline && supportsScrollTimeline()) {\n this.animation.timeline = timeline;\n if (rangeStart)\n this.animation.rangeStart = rangeStart;\n if (rangeEnd)\n this.animation.rangeEnd = rangeEnd;\n return noop;\n }\n else {\n return observe(this);\n }\n }\n}\n\nexport { NativeAnimation };\n//# sourceMappingURL=NativeAnimation.mjs.map\n","import { supportsLinearEasing } from '../../../utils/supports/linear-easing.mjs';\nimport { isGenerator } from '../../generators/utils/is-generator.mjs';\n\nfunction applyGeneratorOptions({ type, ...options }) {\n if (isGenerator(type) && supportsLinearEasing()) {\n return type.applyToOptions(options);\n }\n else {\n options.duration ?? (options.duration = 300);\n options.ease ?? (options.ease = \"easeOut\");\n }\n return options;\n}\n\nexport { applyGeneratorOptions };\n//# sourceMappingURL=apply-generator.mjs.map\n","import { circInOut, backInOut, anticipate } from 'motion-utils';\n\nconst unsupportedEasingFunctions = {\n anticipate,\n backInOut,\n circInOut,\n};\nfunction isUnsupportedEase(key) {\n return key in unsupportedEasingFunctions;\n}\nfunction replaceStringEasing(transition) {\n if (typeof transition.ease === \"string\" &&\n isUnsupportedEase(transition.ease)) {\n transition.ease = unsupportedEasingFunctions[transition.ease];\n }\n}\n\nexport { replaceStringEasing };\n//# sourceMappingURL=unsupported-easing.mjs.map\n","import { clamp } from 'motion-utils';\nimport { time } from '../frameloop/sync-time.mjs';\nimport { setStyle } from '../render/dom/style-set.mjs';\nimport { JSAnimation } from './JSAnimation.mjs';\nimport { NativeAnimation } from './NativeAnimation.mjs';\nimport { replaceTransitionType } from './utils/replace-transition-type.mjs';\nimport { replaceStringEasing } from './waapi/utils/unsupported-easing.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\nclass NativeAnimationExtended extends NativeAnimation {\n constructor(options) {\n /**\n * The base NativeAnimation function only supports a subset\n * of Motion easings, and WAAPI also only supports some\n * easing functions via string/cubic-bezier definitions.\n *\n * This function replaces those unsupported easing functions\n * with a JS easing function. This will later get compiled\n * to a linear() easing function.\n */\n replaceStringEasing(options);\n /**\n * Ensure we replace the transition type with a generator function\n * before passing to WAAPI.\n *\n * TODO: Does this have a better home? It could be shared with\n * JSAnimation.\n */\n replaceTransitionType(options);\n super(options);\n /**\n * Only set startTime when the animation should autoplay.\n * Setting startTime on a paused WAAPI animation unpauses it\n * (per the WAAPI spec), which breaks autoplay: false.\n */\n if (options.startTime !== undefined && options.autoplay !== false) {\n this.startTime = options.startTime;\n }\n this.options = options;\n }\n /**\n * WAAPI doesn't natively have any interruption capabilities.\n *\n * Rather than read committed 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 updateMotionValue(value) {\n const { motionValue, onUpdate, onComplete, element, ...options } = this.options;\n if (!motionValue)\n return;\n if (value !== undefined) {\n motionValue.set(value);\n return;\n }\n const sampleAnimation = new JSAnimation({\n ...options,\n autoplay: false,\n });\n /**\n * Use wall-clock elapsed time for sampling.\n * Under CPU load, WAAPI's currentTime may not reflect actual\n * elapsed time, causing incorrect sampling and visual jumps.\n */\n const sampleTime = Math.max(sampleDelta, time.now() - this.startTime);\n const delta = clamp(0, sampleDelta, sampleTime - sampleDelta);\n const current = sampleAnimation.sample(sampleTime).value;\n /**\n * Write the estimated value to inline style so it persists\n * after cancel(), covering the async gap before the next\n * animation starts.\n */\n const { name } = this.options;\n if (element && name)\n setStyle(element, name, current);\n motionValue.setWithVelocity(sampleAnimation.sample(Math.max(0, sampleTime - delta)).value, current, delta);\n sampleAnimation.stop();\n }\n}\n\nexport { NativeAnimationExtended };\n//# sourceMappingURL=NativeAnimationExtended.mjs.map\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 that 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//# sourceMappingURL=is-animatable.mjs.map\n","function makeAnimationInstant(options) {\n options.duration = 0;\n options.type = \"keyframes\";\n}\n\nexport { makeAnimationInstant };\n//# sourceMappingURL=make-animation-instant.mjs.map\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//# sourceMappingURL=accelerated-values.mjs.map\n","const browserColorFunctions = /^(?:oklch|oklab|lab|lch|color|color-mix|light-dark)\\(/;\nfunction hasBrowserOnlyColors(keyframes) {\n for (let i = 0; i < keyframes.length; i++) {\n if (typeof keyframes[i] === \"string\" &&\n browserColorFunctions.test(keyframes[i])) {\n return true;\n }\n }\n return false;\n}\n\nexport { hasBrowserOnlyColors };\n//# sourceMappingURL=is-browser-color.mjs.map\n","import { memo } from 'motion-utils';\nimport { acceleratedValues } from '../utils/accelerated-values.mjs';\nimport { hasBrowserOnlyColors } from '../utils/is-browser-color.mjs';\n\nconst colorProperties = new Set([\n \"color\",\n \"backgroundColor\",\n \"outlineColor\",\n \"fill\",\n \"stroke\",\n \"borderColor\",\n \"borderTopColor\",\n \"borderRightColor\",\n \"borderBottomColor\",\n \"borderLeftColor\",\n]);\nconst supportsWaapi = /*@__PURE__*/ memo(() => Object.hasOwnProperty.call(Element.prototype, \"animate\"));\nfunction supportsBrowserAnimation(options) {\n const { motionValue, name, repeatDelay, repeatType, damping, type, keyframes, } = options;\n const subject = motionValue?.owner?.current;\n /**\n * We use this check instead of isHTMLElement() because we explicitly\n * **don't** want elements in different timing contexts (i.e. popups)\n * to be accelerated, as it's not possible to sync these animations\n * properly with those driven from the main window frameloop.\n */\n if (!(subject instanceof HTMLElement)) {\n return false;\n }\n const { onUpdate, transformTemplate } = motionValue.owner.getProps();\n return (supportsWaapi() &&\n name &&\n /**\n * Force WAAPI for color properties with browser-only color formats\n * (oklch, oklab, lab, lch, etc.) that the JS animation path can't parse.\n */\n (acceleratedValues.has(name) ||\n (colorProperties.has(name) &&\n hasBrowserOnlyColors(keyframes))) &&\n (name !== \"transform\" || !transformTemplate) &&\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 !onUpdate &&\n !repeatDelay &&\n repeatType !== \"mirror\" &&\n damping !== 0 &&\n type !== \"inertia\");\n}\n\nexport { supportsBrowserAnimation };\n//# sourceMappingURL=waapi.mjs.map\n","import { MotionGlobalConfig, noop } from 'motion-utils';\nimport { time } from '../frameloop/sync-time.mjs';\nimport { JSAnimation } from './JSAnimation.mjs';\nimport { getFinalKeyframe } from './keyframes/get-final.mjs';\nimport { KeyframeResolver, flushKeyframeResolvers } from './keyframes/KeyframesResolver.mjs';\nimport { NativeAnimationExtended } from './NativeAnimationExtended.mjs';\nimport { canAnimate } from './utils/can-animate.mjs';\nimport { makeAnimationInstant } from './utils/make-animation-instant.mjs';\nimport { WithPromise } from './utils/WithPromise.mjs';\nimport { supportsBrowserAnimation } from './waapi/supports/waapi.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 AsyncMotionValueAnimation extends WithPromise {\n constructor({ autoplay = true, delay = 0, type = \"keyframes\", repeat = 0, repeatDelay = 0, repeatType = \"loop\", keyframes, name, motionValue, element, ...options }) {\n super();\n /**\n * Bound to support return animation.stop pattern\n */\n this.stop = () => {\n if (this._animation) {\n this._animation.stop();\n this.stopTimeline?.();\n }\n this.keyframeResolver?.cancel();\n };\n this.createdAt = time.now();\n const optionsWithDefaults = {\n autoplay,\n delay,\n type,\n repeat,\n repeatDelay,\n repeatType,\n name,\n motionValue,\n element,\n ...options,\n };\n const KeyframeResolver$1 = element?.KeyframeResolver || KeyframeResolver;\n this.keyframeResolver = new KeyframeResolver$1(keyframes, (resolvedKeyframes, finalKeyframe, forced) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe, optionsWithDefaults, !forced), name, motionValue, element);\n this.keyframeResolver?.scheduleResolve();\n }\n onKeyframesResolved(keyframes, finalKeyframe, options, sync) {\n this.keyframeResolver = undefined;\n const { name, type, velocity, delay, isHandoff, onUpdate } = options;\n this.resolvedAt = time.now();\n /**\n * If we can't animate this value with the resolved keyframes\n * then we should complete it immediately.\n */\n let canAnimateValue = true;\n if (!canAnimate(keyframes, name, type, velocity)) {\n canAnimateValue = false;\n if (MotionGlobalConfig.instantAnimations || !delay) {\n onUpdate?.(getFinalKeyframe(keyframes, options, finalKeyframe));\n }\n keyframes[0] = keyframes[keyframes.length - 1];\n makeAnimationInstant(options);\n options.repeat = 0;\n }\n /**\n * Resolve startTime for the animation.\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 committed frame, we prefer to use resolvedAt\n * to avoid a sudden jump into the animation.\n */\n const startTime = sync\n ? !this.resolvedAt\n ? this.createdAt\n : this.resolvedAt - this.createdAt > MAX_RESOLVE_DELAY\n ? this.resolvedAt\n : this.createdAt\n : undefined;\n const resolvedOptions = {\n startTime,\n finalKeyframe,\n ...options,\n keyframes,\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 * Also skip WAAPI when keyframes aren't animatable, as the resolved\n * values may not be valid CSS and would trigger browser warnings.\n */\n const useWaapi = canAnimateValue &&\n !isHandoff &&\n supportsBrowserAnimation(resolvedOptions);\n const element = resolvedOptions.motionValue?.owner?.current;\n let animation;\n if (useWaapi) {\n try {\n animation = new NativeAnimationExtended({\n ...resolvedOptions,\n element,\n });\n }\n catch {\n animation = new JSAnimation(resolvedOptions);\n }\n }\n else {\n animation = new JSAnimation(resolvedOptions);\n }\n animation.finished.then(() => {\n this.notifyFinished();\n }).catch(noop);\n if (this.pendingTimeline) {\n this.stopTimeline = animation.attachTimeline(this.pendingTimeline);\n this.pendingTimeline = undefined;\n }\n this._animation = animation;\n }\n get finished() {\n if (!this._animation) {\n return this._finished;\n }\n else {\n return this.animation.finished;\n }\n }\n then(onResolve, _onReject) {\n return this.finished.finally(onResolve).then(() => { });\n }\n get animation() {\n if (!this._animation) {\n this.keyframeResolver?.resume();\n flushKeyframeResolvers();\n }\n return this._animation;\n }\n get duration() {\n return this.animation.duration;\n }\n get iterationDuration() {\n return this.animation.iterationDuration;\n }\n get time() {\n return this.animation.time;\n }\n set time(newTime) {\n this.animation.time = newTime;\n }\n get speed() {\n return this.animation.speed;\n }\n get state() {\n return this.animation.state;\n }\n set speed(newSpeed) {\n this.animation.speed = newSpeed;\n }\n get startTime() {\n return this.animation.startTime;\n }\n attachTimeline(timeline) {\n if (this._animation) {\n this.stopTimeline = this.animation.attachTimeline(timeline);\n }\n else {\n this.pendingTimeline = timeline;\n }\n return () => this.stop();\n }\n play() {\n this.animation.play();\n }\n pause() {\n this.animation.pause();\n }\n complete() {\n this.animation.complete();\n }\n cancel() {\n if (this._animation) {\n this.animation.cancel();\n }\n this.keyframeResolver?.cancel();\n }\n}\n\nexport { AsyncMotionValueAnimation };\n//# sourceMappingURL=AsyncMotionValueAnimation.mjs.map\n","import { warning } from 'motion-utils';\nimport { isGenerator } from '../generators/utils/is-generator.mjs';\nimport { isAnimatable } from './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 /**\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}\". \"${isOriginAnimatable ? targetKeyframe : originKeyframe}\" is not an animatable value.`, \"value-not-animatable\");\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//# sourceMappingURL=can-animate.mjs.map\n","function calcChildStagger(children, child, delayChildren, staggerChildren = 0, staggerDirection = 1) {\n const index = Array.from(children)\n .sort((a, b) => a.sortNodePosition(b))\n .indexOf(child);\n const numChildren = children.size;\n const maxStaggerDuration = (numChildren - 1) * staggerChildren;\n const delayIsFunction = typeof delayChildren === \"function\";\n return delayIsFunction\n ? delayChildren(index, numChildren)\n : staggerDirection === 1\n ? index * staggerChildren\n : maxStaggerDuration - index * staggerChildren;\n}\n\nexport { calcChildStagger };\n//# sourceMappingURL=calc-child-stagger.mjs.map\n","import { warnOnce, SubscriptionManager, velocityPerSecond } from 'motion-utils';\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 constructor(init, options = {}) {\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) => {\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) {\n this.events.change?.notify(this.current);\n if (this.dependents) {\n for (const dependent of this.dependents) {\n dependent.dirty();\n }\n }\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