@betterstore/react 0.2.43 → 0.2.45

package/dist/index.cjs.js

@@ -3943,8 +3943,10 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, pre
 };
 
 const stepsOrder = [
+    "setup", // Compute
     "read", // Read
     "resolveKeyframes", // Write/Read/Write/Read
+    "preUpdate", // Compute
     "update", // Compute
     "preRender", // Compute
     "render", // Write
@@ -4043,9 +4045,7 @@ function createRenderStep(runNextFrame, stepName) {
     return step;
 }
 
-const MotionGlobalConfig = {
-    useManualTiming: false,
-};
+const MotionGlobalConfig = {};
 
 const maxElapsed = 40;
 function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
@@ -4061,11 +4061,13 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
         acc[key] = createRenderStep(flagRunNextFrame, allowKeepAlive ? key : undefined);
         return acc;
     }, {});
-    const { read, resolveKeyframes, update, preRender, render, postRender } = steps;
+    const { setup, read, resolveKeyframes, preUpdate, update, preRender, render, postRender, } = steps;
     const processBatch = () => {
-        const timestamp = performance.now();
+        const timestamp = MotionGlobalConfig.useManualTiming
+            ? state.timestamp
+            : performance.now();
         runNextFrame = false;
-        {
+        if (!MotionGlobalConfig.useManualTiming) {
             state.delta = useDefaultElapsed
                 ? 1000 / 60
                 : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
@@ -4073,8 +4075,10 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
         state.timestamp = timestamp;
         state.isProcessing = true;
         // Unrolled render loop for better per-frame performance
+        setup.process(state);
         read.process(state);
         resolveKeyframes.process(state);
+        preUpdate.process(state);
         update.process(state);
         preRender.process(state);
         render.process(state);
@@ -4689,7 +4693,7 @@ const transformPropOrder = [
 /**
  * A quick lookup for transform props.
  */
-const transformProps = new Set(transformPropOrder);
+const transformProps = /*@__PURE__*/ (() => new Set(transformPropOrder))();
 
 function isForcedMotionValue(key, { layout, layoutId }) {
     return (transformProps.has(key) ||
@@ -4731,6 +4735,12 @@ const scale = {
     default: 1,
 };
 
+const int = {
+    ...number,
+    transform: Math.round,
+};
+
+/*#__NO_SIDE_EFFECTS__*/
 const createUnitType = (unit) => ({
     test: (v) => typeof v === "string" && v.endsWith(unit) && v.split(" ").length === 1,
     parse: parseFloat,
@@ -4741,13 +4751,40 @@ const percent = /*@__PURE__*/ createUnitType("%");
 const px = /*@__PURE__*/ createUnitType("px");
 const vh = /*@__PURE__*/ createUnitType("vh");
 const vw = /*@__PURE__*/ createUnitType("vw");
-const progressPercentage = {
+const progressPercentage = /*@__PURE__*/ (() => ({
     ...percent,
     parse: (v) => percent.parse(v) / 100,
     transform: (v) => percent.transform(v * 100),
+}))();
+
+const transformValueTypes = {
+    rotate: degrees,
+    rotateX: degrees,
+    rotateY: degrees,
+    rotateZ: degrees,
+    scale,
+    scaleX: scale,
+    scaleY: scale,
+    scaleZ: scale,
+    skew: degrees,
+    skewX: degrees,
+    skewY: degrees,
+    distance: px,
+    translateX: px,
+    translateY: px,
+    translateZ: px,
+    x: px,
+    y: px,
+    z: px,
+    perspective: px,
+    transformPerspective: px,
+    opacity: alpha,
+    originX: progressPercentage,
+    originY: progressPercentage,
+    originZ: px,
 };
 
-const browserNumberValueTypes = {
+const numberValueTypes = {
     // Border props
     borderWidth: px,
     borderTopWidth: px,
@@ -4783,45 +4820,8 @@ const browserNumberValueTypes = {
     // Misc
     backgroundPositionX: px,
     backgroundPositionY: px,
-};
-
-const transformValueTypes = {
-    rotate: degrees,
-    rotateX: degrees,
-    rotateY: degrees,
-    rotateZ: degrees,
-    scale,
-    scaleX: scale,
-    scaleY: scale,
-    scaleZ: scale,
-    skew: degrees,
-    skewX: degrees,
-    skewY: degrees,
-    distance: px,
-    translateX: px,
-    translateY: px,
-    translateZ: px,
-    x: px,
-    y: px,
-    z: px,
-    perspective: px,
-    transformPerspective: px,
-    opacity: alpha,
-    originX: progressPercentage,
-    originY: progressPercentage,
-    originZ: px,
-};
-
-const int = {
-    ...number,
-    transform: Math.round,
-};
-
-const numberValueTypes = {
-    ...browserNumberValueTypes,
     ...transformValueTypes,
     zIndex: int,
-    size: px,
     // SVG
     fillOpacity: alpha,
     strokeOpacity: alpha,
@@ -5088,25 +5088,10 @@ function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true
     attrs[keys.array] = `${pathLength} ${pathSpacing}`;
 }
 
-function calcOrigin$1(origin, offset, size) {
-    return typeof origin === "string"
-        ? origin
-        : px.transform(offset + size * origin);
-}
-/**
- * The SVG transform origin defaults are different to CSS and is less intuitive,
- * so we use the measured dimensions of the SVG to reconcile these.
- */
-function calcSVGTransformOrigin(dimensions, originX, originY) {
-    const pxOriginX = calcOrigin$1(originX, dimensions.x, dimensions.width);
-    const pxOriginY = calcOrigin$1(originY, dimensions.y, dimensions.height);
-    return `${pxOriginX} ${pxOriginY}`;
-}
-
 /**
  * Build SVG visual attrbutes, like cx and style.transform
  */
-function buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0, 
+function buildSVGAttrs(state, { attrX, attrY, attrScale, pathLength, pathSpacing = 1, pathOffset = 0, 
 // This is object creation, which we try to avoid per-frame.
 ...latest }, isSVGTag, transformTemplate) {
     buildHTMLStyles(state, latest, transformTemplate);
@@ -5122,20 +5107,26 @@ function buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathL
     }
     state.attrs = state.style;
     state.style = {};
-    const { attrs, style, dimensions } = state;
+    const { attrs, style } = state;
     /**
-     * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs
-     * and copy it into style.
+     * However, we apply transforms as CSS transforms.
+     * So if we detect a transform, transformOrigin we take it from attrs and copy it into style.
      */
     if (attrs.transform) {
-        if (dimensions)
-            style.transform = attrs.transform;
+        style.transform = attrs.transform;
         delete attrs.transform;
     }
-    // Parse transformOrigin
-    if (dimensions &&
-        (originX !== undefined || originY !== undefined || style.transform)) {
-        style.transformOrigin = calcSVGTransformOrigin(dimensions, originX !== undefined ? originX : 0.5, originY !== undefined ? originY : 0.5);
+    if (style.transform || attrs.transformOrigin) {
+        style.transformOrigin = attrs.transformOrigin ?? "50% 50%";
+        delete attrs.transformOrigin;
+    }
+    if (style.transform) {
+        /**
+         * SVG's element transform-origin uses its own median as a reference.
+         * Therefore, transformBox becomes a fill-box
+         */
+        style.transformBox = "fill-box";
+        delete attrs.transformBox;
     }
     // Render attrX/attrY/attrScale as attributes
     if (attrX !== undefined)
@@ -5234,44 +5225,20 @@ function resolveVariantFromProps(props, definition, custom, visualElement) {
     return definition;
 }
 
-const isKeyframesTarget = (v) => {
-    return Array.isArray(v);
-};
-
-const isCustomValue = (v) => {
-    return Boolean(v && typeof v === "object" && v.mix && v.toValue);
-};
-const resolveFinalValueInKeyframes = (v) => {
-    // TODO maybe throw if v.length - 1 is placeholder token?
-    return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
-};
-
 /**
  * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself
  *
  * TODO: Remove and move to library
  */
 function resolveMotionValue(value) {
-    const unwrappedValue = isMotionValue(value) ? value.get() : value;
-    return isCustomValue(unwrappedValue)
-        ? unwrappedValue.toValue()
-        : unwrappedValue;
+    return isMotionValue(value) ? value.get() : value;
 }
 
-function makeState({ scrapeMotionValuesFromProps, createRenderState, onUpdate, }, props, context, presenceContext) {
+function makeState({ scrapeMotionValuesFromProps, createRenderState, }, props, context, presenceContext) {
     const state = {
         latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps),
         renderState: createRenderState(),
     };
-    if (onUpdate) {
-        /**
-         * onMount works without the VisualElement because it could be
-         * called before the VisualElement payload has been hydrated.
-         * (e.g. if someone is using m components <m.circle />)
-         */
-        state.onMount = (instance) => onUpdate({ props, current: instance, ...state });
-        state.onUpdate = (visualElement) => onUpdate(visualElement);
-    }
     return state;
 }
 const makeUseVisualState = (config) => (props, isStatic) => {
@@ -5358,68 +5325,6 @@ const htmlMotionConfig = {
     }),
 };
 
-function updateSVGDimensions(instance, renderState) {
-    try {
-        renderState.dimensions =
-            typeof instance.getBBox === "function"
-                ? instance.getBBox()
-                : instance.getBoundingClientRect();
-    }
-    catch (e) {
-        // Most likely trying to measure an unrendered element under Firefox
-        renderState.dimensions = {
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0,
-        };
-    }
-}
-
-function renderHTML(element, { style, vars }, styleProp, projection) {
-    Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
-    // Loop over any CSS variables and assign those.
-    for (const key in vars) {
-        element.style.setProperty(key, vars[key]);
-    }
-}
-
-/**
- * A set of attribute names that are always read/written as camel case.
- */
-const camelCaseAttributes = new Set([
-    "baseFrequency",
-    "diffuseConstant",
-    "kernelMatrix",
-    "kernelUnitLength",
-    "keySplines",
-    "keyTimes",
-    "limitingConeAngle",
-    "markerHeight",
-    "markerWidth",
-    "numOctaves",
-    "targetX",
-    "targetY",
-    "surfaceScale",
-    "specularConstant",
-    "specularExponent",
-    "stdDeviation",
-    "tableValues",
-    "viewBox",
-    "gradientTransform",
-    "pathLength",
-    "startOffset",
-    "textLength",
-    "lengthAdjust",
-]);
-
-function renderSVG(element, renderState, _styleProp, projection) {
-    renderHTML(element, renderState, undefined, projection);
-    for (const key in renderState.attrs) {
-        element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
-    }
-}
-
 function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
     for (const key in props) {
@@ -5434,49 +5339,10 @@ function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     return newValues;
 }
 
-const layoutProps = ["x", "y", "width", "height", "cx", "cy", "r"];
 const svgMotionConfig = {
     useVisualState: makeUseVisualState({
         scrapeMotionValuesFromProps: scrapeMotionValuesFromProps,
         createRenderState: createSvgRenderState,
-        onUpdate: ({ props, prevProps, current, renderState, latestValues, }) => {
-            if (!current)
-                return;
-            let hasTransform = !!props.drag;
-            if (!hasTransform) {
-                for (const key in latestValues) {
-                    if (transformProps.has(key)) {
-                        hasTransform = true;
-                        break;
-                    }
-                }
-            }
-            if (!hasTransform)
-                return;
-            let needsMeasure = !prevProps;
-            if (prevProps) {
-                /**
-                 * Check the layout props for changes, if any are found we need to
-                 * measure the element again.
-                 */
-                for (let i = 0; i < layoutProps.length; i++) {
-                    const key = layoutProps[i];
-                    if (props[key] !==
-                        prevProps[key]) {
-                        needsMeasure = true;
-                    }
-                }
-            }
-            if (!needsMeasure)
-                return;
-            frame.read(() => {
-                updateSVGDimensions(current, renderState);
-                frame.render(() => {
-                    buildSVGAttrs(renderState, latestValues, isSVGTag(current.tagName), props.transformTemplate);
-                    renderSVG(current, renderState);
-                });
-            });
-        },
     }),
 };
 
@@ -5501,15 +5367,9 @@ function resolveVariant(visualElement, definition, custom) {
     return resolveVariantFromProps(props, definition, custom !== undefined ? custom : props.custom, visualElement);
 }
 
-const positionalKeys = new Set([
-    "width",
-    "height",
-    "top",
-    "left",
-    "right",
-    "bottom",
-    ...transformPropOrder,
-]);
+const isKeyframesTarget = (v) => {
+    return Array.isArray(v);
+};
 
 let now;
 function clearTime() {
@@ -5620,7 +5480,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "12.7.4";
+        this.version = "12.9.0";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -5646,12 +5506,12 @@ class MotionValue {
             this.prev = this.current;
             this.setCurrent(v);
             // Update update subscribers
-            if (this.current !== this.prev && this.events.change) {
-                this.events.change.notify(this.current);
+            if (this.current !== this.prev) {
+                this.events.change?.notify(this.current);
             }
             // Update render subscribers
-            if (render && this.events.renderRequest) {
-                this.events.renderRequest.notify(this.current);
+            if (render) {
+                this.events.renderRequest?.notify(this.current);
             }
         };
         this.hasAnimated = false;
@@ -5884,6 +5744,7 @@ class MotionValue {
      * @public
      */
     destroy() {
+        this.events.destroy?.notify();
         this.clearListeners();
         this.stop();
         if (this.stopPassiveEffect) {
@@ -5907,6 +5768,10 @@ function setMotionValue(visualElement, key, value) {
         visualElement.addValue(key, motionValue(value));
     }
 }
+function resolveFinalValueInKeyframes(v) {
+    // TODO maybe throw if v.length - 1 is placeholder token?
+    return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
+}
 function setTarget(visualElement, definition) {
     const resolved = resolveVariant(visualElement, definition);
     let { transitionEnd = {}, transition = {}, ...target } = resolved || {};
@@ -5941,89 +5806,79 @@ function getOptimisedAppearId(visualElement) {
     return visualElement.props[optimizedAppearDataAttribute];
 }
 
-/*
-  Bezier function generator
-  This has been modified from Gaëtan Renaudeau's BezierEasing
-  https://github.com/gre/bezier-easing/blob/master/src/index.js
-  https://github.com/gre/bezier-easing/blob/master/LICENSE
-  
-  I've removed the newtonRaphsonIterate algo because in benchmarking it
-  wasn't noticiably faster than binarySubdivision, indeed removing it
-  usually improved times, depending on the curve.
-  I also removed the lookup table, as for the added bundle size and loop we're
-  only cutting ~4 or so subdivision iterations. I bumped the max iterations up
-  to 12 to compensate and this still tended to be faster for no perceivable
-  loss in accuracy.
-  Usage
-    const easeOut = cubicBezier(.17,.67,.83,.67);
-    const x = easeOut(0.5); // returns 0.627...
-*/
-// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
-const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) *
-    t;
-const subdivisionPrecision = 0.0000001;
-const subdivisionMaxIterations = 12;
-function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
-    let currentX;
-    let currentT;
-    let i = 0;
-    do {
-        currentT = lowerBound + (upperBound - lowerBound) / 2.0;
-        currentX = calcBezier(currentT, mX1, mX2) - x;
-        if (currentX > 0.0) {
-            upperBound = currentT;
-        }
-        else {
-            lowerBound = currentT;
-        }
-    } while (Math.abs(currentX) > subdivisionPrecision &&
-        ++i < subdivisionMaxIterations);
-    return currentT;
-}
-function cubicBezier(mX1, mY1, mX2, mY2) {
-    // If this is a linear gradient, return linear easing
-    if (mX1 === mY1 && mX2 === mY2)
-        return noop;
-    const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
-    // If animation is at start/end, return t without easing
-    return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
+const isNotNull$1 = (value) => value !== null;
+function getFinalKeyframe$1(keyframes, { repeat, repeatType = "loop" }, finalKeyframe) {
+    const resolvedKeyframes = keyframes.filter(isNotNull$1);
+    const index = repeat && repeatType !== "loop" && repeat % 2 === 1
+        ? 0
+        : resolvedKeyframes.length - 1;
+    return resolvedKeyframes[index]
+        ;
 }
 
-// Accepts an easing function and returns a new one that outputs mirrored values for
-// the second half of the animation. Turns easeIn into easeInOut.
-const mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;
-
-// Accepts an easing function and returns a new one that outputs reversed values.
-// Turns easeIn into easeOut.
-const reverseEasing = (easing) => (p) => 1 - easing(1 - p);
-
-const backOut = /*@__PURE__*/ cubicBezier(0.33, 1.53, 0.69, 0.99);
-const backIn = /*@__PURE__*/ reverseEasing(backOut);
-const backInOut = /*@__PURE__*/ mirrorEasing(backIn);
-
-const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
-
-const circIn = (p) => 1 - Math.sin(Math.acos(p));
-const circOut = reverseEasing(circIn);
-const circInOut = mirrorEasing(circIn);
-
+const underDampedSpring = {
+    type: "spring",
+    stiffness: 500,
+    damping: 25,
+    restSpeed: 10,
+};
+const criticallyDampedSpring = (target) => ({
+    type: "spring",
+    stiffness: 550,
+    damping: target === 0 ? 2 * Math.sqrt(550) : 30,
+    restSpeed: 10,
+});
+const keyframesTransition = {
+    type: "keyframes",
+    duration: 0.8,
+};
 /**
- * Check if the value is a zero value string like "0px" or "0%"
- */
-const isZeroValueString = (v) => /^0[^.\s]+$/u.test(v);
-
-function isNone(value) {
-    if (typeof value === "number") {
-        return value === 0;
-    }
-    else if (value !== null) {
-        return value === "none" || value === "0" || isZeroValueString(value);
+ * Default easing curve is a slightly shallower version of
+ * the default browser easing curve.
+ */
+const ease = {
+    type: "keyframes",
+    ease: [0.25, 0.1, 0.35, 1],
+    duration: 0.3,
+};
+const getDefaultTransition = (valueKey, { keyframes }) => {
+    if (keyframes.length > 2) {
+        return keyframesTransition;
     }
-    else {
-        return true;
+    else if (transformProps.has(valueKey)) {
+        return valueKey.startsWith("scale")
+            ? criticallyDampedSpring(keyframes[1])
+            : underDampedSpring;
     }
+    return ease;
+};
+
+/**
+ * Decide whether a transition is defined on a given Transition.
+ * This filters out orchestration options and returns true
+ * if any options are left.
+ */
+function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {
+    return !!Object.keys(transition).length;
+}
+
+function getValueTransition(transition, key) {
+    return (transition?.[key] ??
+        transition?.["default"] ??
+        transition);
 }
 
+/**
+ * Converts seconds to milliseconds
+ *
+ * @param seconds - Time in seconds.
+ * @return milliseconds - Converted time in milliseconds.
+ */
+/*#__NO_SIDE_EFFECTS__*/
+const secondsToMilliseconds = (seconds) => seconds * 1000;
+/*#__NO_SIDE_EFFECTS__*/
+const millisecondsToSeconds = (milliseconds) => milliseconds / 1000;
+
 // If this number is a decimal, make it just five decimal places
 // to avoid exponents
 const sanitize = (v) => Math.round(v * 100000) / 100000;
@@ -6240,848 +6095,129 @@ const complex = {
     getAnimatableNone: getAnimatableNone$1,
 };
 
-/**
- * Properties that should default to 1 or 100%
- */
-const maxDefaults = new Set(["brightness", "contrast", "saturate", "opacity"]);
-function applyDefaultFilter(v) {
-    const [name, value] = v.slice(0, -1).split("(");
-    if (name === "drop-shadow")
-        return v;
-    const [number] = value.match(floatRegex) || [];
-    if (!number)
-        return v;
-    const unit = value.replace(number, "");
-    let defaultValue = maxDefaults.has(name) ? 1 : 0;
-    if (number !== value)
-        defaultValue *= 100;
-    return name + "(" + defaultValue + unit + ")";
+// Adapted from https://gist.github.com/mjackson/5311256
+function hueToRgb(p, q, t) {
+    if (t < 0)
+        t += 1;
+    if (t > 1)
+        t -= 1;
+    if (t < 1 / 6)
+        return p + (q - p) * 6 * t;
+    if (t < 1 / 2)
+        return q;
+    if (t < 2 / 3)
+        return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+}
+function hslaToRgba({ hue, saturation, lightness, alpha }) {
+    hue /= 360;
+    saturation /= 100;
+    lightness /= 100;
+    let red = 0;
+    let green = 0;
+    let blue = 0;
+    if (!saturation) {
+        red = green = blue = lightness;
+    }
+    else {
+        const q = lightness < 0.5
+            ? lightness * (1 + saturation)
+            : lightness + saturation - lightness * saturation;
+        const p = 2 * lightness - q;
+        red = hueToRgb(p, q, hue + 1 / 3);
+        green = hueToRgb(p, q, hue);
+        blue = hueToRgb(p, q, hue - 1 / 3);
+    }
+    return {
+        red: Math.round(red * 255),
+        green: Math.round(green * 255),
+        blue: Math.round(blue * 255),
+        alpha,
+    };
 }
-const functionRegex = /\b([a-z-]*)\(.*?\)/gu;
-const filter = {
-    ...complex,
-    getAnimatableNone: (v) => {
-        const functions = v.match(functionRegex);
-        return functions ? functions.map(applyDefaultFilter).join(" ") : v;
-    },
-};
 
-/**
- * A map of default value types for common values
- */
-const defaultValueTypes = {
-    ...numberValueTypes,
-    // Color props
-    color,
-    backgroundColor: color,
-    outlineColor: color,
-    fill: color,
-    stroke: color,
-    // Border props
-    borderColor: color,
-    borderTopColor: color,
-    borderRightColor: color,
-    borderBottomColor: color,
-    borderLeftColor: color,
-    filter,
-    WebkitFilter: filter,
+function mixImmediate(a, b) {
+    return (p) => (p > 0 ? b : a);
+}
+
+/*
+  Value in range from progress
+
+  Given a lower limit and an upper limit, we return the value within
+  that range as expressed by progress (usually a number from 0 to 1)
+
+  So progress = 0.5 would change
+
+  from -------- to
+
+  to
+
+  from ---- to
+
+  E.g. from = 10, to = 20, progress = 0.5 => 15
+
+  @param [number]: Lower limit of range
+  @param [number]: Upper limit of range
+  @param [number]: The progress between lower and upper limits expressed 0-1
+  @return [number]: Value as calculated from progress within range (not limited within range)
+*/
+const mixNumber$1 = (from, to, progress) => {
+    return from + (to - from) * progress;
 };
-/**
- * Gets the default ValueType for the provided value key
- */
-const getDefaultValueType = (key) => defaultValueTypes[key];
 
-function getAnimatableNone(key, value) {
-    let defaultValueType = getDefaultValueType(key);
-    if (defaultValueType !== filter)
-        defaultValueType = complex;
-    // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target
-    return defaultValueType.getAnimatableNone
-        ? defaultValueType.getAnimatableNone(value)
-        : undefined;
+// Linear color space blending
+// Explained https://www.youtube.com/watch?v=LKnqECcg6Gw
+// Demonstrated http://codepen.io/osublake/pen/xGVVaN
+const mixLinearColor = (from, to, v) => {
+    const fromExpo = from * from;
+    const expo = v * (to * to - fromExpo) + fromExpo;
+    return expo < 0 ? 0 : Math.sqrt(expo);
+};
+const colorTypes = [hex, rgba, hsla];
+const getColorType = (v) => colorTypes.find((type) => type.test(v));
+function asRGBA(color) {
+    const type = getColorType(color);
+    warning(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);
+    if (!Boolean(type))
+        return false;
+    let model = type.parse(color);
+    if (type === hsla) {
+        // TODO Remove this cast - needed since Motion's stricter typing
+        model = hslaToRgba(model);
+    }
+    return model;
 }
+const mixColor = (from, to) => {
+    const fromRGBA = asRGBA(from);
+    const toRGBA = asRGBA(to);
+    if (!fromRGBA || !toRGBA) {
+        return mixImmediate(from, to);
+    }
+    const blended = { ...fromRGBA };
+    return (v) => {
+        blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v);
+        blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v);
+        blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v);
+        blended.alpha = mixNumber$1(fromRGBA.alpha, toRGBA.alpha, v);
+        return rgba.transform(blended);
+    };
+};
 
+const invisibleValues = new Set(["none", "hidden"]);
 /**
- * If we encounter keyframes like "none" or "0" and we also have keyframes like
- * "#fff" or "200px 200px" we want to find a keyframe to serve as a template for
- * the "none" keyframes. In this case "#fff" or "200px 200px" - then these get turned into
- * zero equivalents, i.e. "#fff0" or "0px 0px".
+ * Returns a function that, when provided a progress value between 0 and 1,
+ * will return the "none" or "hidden" string only when the progress is that of
+ * the origin or target.
  */
-const invalidTemplates = new Set(["auto", "none", "0"]);
-function makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name) {
-    let i = 0;
-    let animatableTemplate = undefined;
-    while (i < unresolvedKeyframes.length && !animatableTemplate) {
-        const keyframe = unresolvedKeyframes[i];
-        if (typeof keyframe === "string" &&
-            !invalidTemplates.has(keyframe) &&
-            analyseComplexValue(keyframe).values.length) {
-            animatableTemplate = unresolvedKeyframes[i];
-        }
-        i++;
+function mixVisibility(origin, target) {
+    if (invisibleValues.has(origin)) {
+        return (p) => (p <= 0 ? origin : target);
     }
-    if (animatableTemplate && name) {
-        for (const noneIndex of noneKeyframeIndexes) {
-            unresolvedKeyframes[noneIndex] = getAnimatableNone(name, animatableTemplate);
-        }
+    else {
+        return (p) => (p >= 1 ? target : origin);
     }
 }
 
-const radToDeg = (rad) => (rad * 180) / Math.PI;
-const rotate = (v) => {
-    const angle = radToDeg(Math.atan2(v[1], v[0]));
-    return rebaseAngle(angle);
-};
-const matrix2dParsers = {
-    x: 4,
-    y: 5,
-    translateX: 4,
-    translateY: 5,
-    scaleX: 0,
-    scaleY: 3,
-    scale: (v) => (Math.abs(v[0]) + Math.abs(v[3])) / 2,
-    rotate,
-    rotateZ: rotate,
-    skewX: (v) => radToDeg(Math.atan(v[1])),
-    skewY: (v) => radToDeg(Math.atan(v[2])),
-    skew: (v) => (Math.abs(v[1]) + Math.abs(v[2])) / 2,
-};
-const rebaseAngle = (angle) => {
-    angle = angle % 360;
-    if (angle < 0)
-        angle += 360;
-    return angle;
-};
-const rotateZ = rotate;
-const scaleX = (v) => Math.sqrt(v[0] * v[0] + v[1] * v[1]);
-const scaleY = (v) => Math.sqrt(v[4] * v[4] + v[5] * v[5]);
-const matrix3dParsers = {
-    x: 12,
-    y: 13,
-    z: 14,
-    translateX: 12,
-    translateY: 13,
-    translateZ: 14,
-    scaleX,
-    scaleY,
-    scale: (v) => (scaleX(v) + scaleY(v)) / 2,
-    rotateX: (v) => rebaseAngle(radToDeg(Math.atan2(v[6], v[5]))),
-    rotateY: (v) => rebaseAngle(radToDeg(Math.atan2(-v[2], v[0]))),
-    rotateZ,
-    rotate: rotateZ,
-    skewX: (v) => radToDeg(Math.atan(v[4])),
-    skewY: (v) => radToDeg(Math.atan(v[1])),
-    skew: (v) => (Math.abs(v[1]) + Math.abs(v[4])) / 2,
-};
-function defaultTransformValue(name) {
-    return name.includes("scale") ? 1 : 0;
-}
-function parseValueFromTransform(transform, name) {
-    if (!transform || transform === "none") {
-        return defaultTransformValue(name);
-    }
-    const matrix3dMatch = transform.match(/^matrix3d\(([-\d.e\s,]+)\)$/u);
-    let parsers;
-    let match;
-    if (matrix3dMatch) {
-        parsers = matrix3dParsers;
-        match = matrix3dMatch;
-    }
-    else {
-        const matrix2dMatch = transform.match(/^matrix\(([-\d.e\s,]+)\)$/u);
-        parsers = matrix2dParsers;
-        match = matrix2dMatch;
-    }
-    if (!match) {
-        return defaultTransformValue(name);
-    }
-    const valueParser = parsers[name];
-    const values = match[1].split(",").map(convertTransformToNumber);
-    return typeof valueParser === "function"
-        ? valueParser(values)
-        : values[valueParser];
-}
-const readTransformValue = (instance, name) => {
-    const { transform = "none" } = getComputedStyle(instance);
-    return parseValueFromTransform(transform, name);
-};
-function convertTransformToNumber(value) {
-    return parseFloat(value.trim());
-}
-
-const isNumOrPxType = (v) => v === number || v === px;
-const transformKeys = new Set(["x", "y", "z"]);
-const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
-function removeNonTranslationalTransform(visualElement) {
-    const removedTransforms = [];
-    nonTranslationalTransformKeys.forEach((key) => {
-        const value = visualElement.getValue(key);
-        if (value !== undefined) {
-            removedTransforms.push([key, value.get()]);
-            value.set(key.startsWith("scale") ? 1 : 0);
-        }
-    });
-    return removedTransforms;
-}
-const positionalValues = {
-    // Dimensions
-    width: ({ x }, { paddingLeft = "0", paddingRight = "0" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight),
-    height: ({ y }, { paddingTop = "0", paddingBottom = "0" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom),
-    top: (_bbox, { top }) => parseFloat(top),
-    left: (_bbox, { left }) => parseFloat(left),
-    bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),
-    right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min),
-    // Transform
-    x: (_bbox, { transform }) => parseValueFromTransform(transform, "x"),
-    y: (_bbox, { transform }) => parseValueFromTransform(transform, "y"),
-};
-// Alias translate longform names
-positionalValues.translateX = positionalValues.x;
-positionalValues.translateY = positionalValues.y;
-
-const toResolve = new Set();
-let isScheduled = false;
-let anyNeedsMeasurement = false;
-function measureAllKeyframes() {
-    if (anyNeedsMeasurement) {
-        const resolversToMeasure = Array.from(toResolve).filter((resolver) => resolver.needsMeasurement);
-        const elementsToMeasure = new Set(resolversToMeasure.map((resolver) => resolver.element));
-        const transformsToRestore = new Map();
-        /**
-         * Write pass
-         * If we're measuring elements we want to remove bounding box-changing transforms.
-         */
-        elementsToMeasure.forEach((element) => {
-            const removedTransforms = removeNonTranslationalTransform(element);
-            if (!removedTransforms.length)
-                return;
-            transformsToRestore.set(element, removedTransforms);
-            element.render();
-        });
-        // Read
-        resolversToMeasure.forEach((resolver) => resolver.measureInitialState());
-        // Write
-        elementsToMeasure.forEach((element) => {
-            element.render();
-            const restore = transformsToRestore.get(element);
-            if (restore) {
-                restore.forEach(([key, value]) => {
-                    element.getValue(key)?.set(value);
-                });
-            }
-        });
-        // Read
-        resolversToMeasure.forEach((resolver) => resolver.measureEndState());
-        // Write
-        resolversToMeasure.forEach((resolver) => {
-            if (resolver.suspendedScrollY !== undefined) {
-                window.scrollTo(0, resolver.suspendedScrollY);
-            }
-        });
-    }
-    anyNeedsMeasurement = false;
-    isScheduled = false;
-    toResolve.forEach((resolver) => resolver.complete());
-    toResolve.clear();
-}
-function readAllKeyframes() {
-    toResolve.forEach((resolver) => {
-        resolver.readKeyframes();
-        if (resolver.needsMeasurement) {
-            anyNeedsMeasurement = true;
-        }
-    });
-}
-function flushKeyframeResolvers() {
-    readAllKeyframes();
-    measureAllKeyframes();
-}
-class KeyframeResolver {
-    constructor(unresolvedKeyframes, onComplete, name, motionValue, element, isAsync = false) {
-        /**
-         * Track whether this resolver has completed. Once complete, it never
-         * needs to attempt keyframe resolution again.
-         */
-        this.isComplete = false;
-        /**
-         * Track whether this resolver is async. If it is, it'll be added to the
-         * resolver queue and flushed in the next frame. Resolvers that aren't going
-         * to trigger read/write thrashing don't need to be async.
-         */
-        this.isAsync = false;
-        /**
-         * Track whether this resolver needs to perform a measurement
-         * to resolve its keyframes.
-         */
-        this.needsMeasurement = false;
-        /**
-         * Track whether this resolver is currently scheduled to resolve
-         * to allow it to be cancelled and resumed externally.
-         */
-        this.isScheduled = false;
-        this.unresolvedKeyframes = [...unresolvedKeyframes];
-        this.onComplete = onComplete;
-        this.name = name;
-        this.motionValue = motionValue;
-        this.element = element;
-        this.isAsync = isAsync;
-    }
-    scheduleResolve() {
-        this.isScheduled = true;
-        if (this.isAsync) {
-            toResolve.add(this);
-            if (!isScheduled) {
-                isScheduled = true;
-                frame.read(readAllKeyframes);
-                frame.resolveKeyframes(measureAllKeyframes);
-            }
-        }
-        else {
-            this.readKeyframes();
-            this.complete();
-        }
-    }
-    readKeyframes() {
-        const { unresolvedKeyframes, name, element, motionValue } = this;
-        /**
-         * If a keyframe is null, we hydrate it either by reading it from
-         * the instance, or propagating from previous keyframes.
-         */
-        for (let i = 0; i < unresolvedKeyframes.length; i++) {
-            if (unresolvedKeyframes[i] === null) {
-                /**
-                 * If the first keyframe is null, we need to find its value by sampling the element
-                 */
-                if (i === 0) {
-                    const currentValue = motionValue?.get();
-                    const finalKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
-                    if (currentValue !== undefined) {
-                        unresolvedKeyframes[0] = currentValue;
-                    }
-                    else if (element && name) {
-                        const valueAsRead = element.readValue(name, finalKeyframe);
-                        if (valueAsRead !== undefined && valueAsRead !== null) {
-                            unresolvedKeyframes[0] = valueAsRead;
-                        }
-                    }
-                    if (unresolvedKeyframes[0] === undefined) {
-                        unresolvedKeyframes[0] = finalKeyframe;
-                    }
-                    if (motionValue && currentValue === undefined) {
-                        motionValue.set(unresolvedKeyframes[0]);
-                    }
-                }
-                else {
-                    unresolvedKeyframes[i] = unresolvedKeyframes[i - 1];
-                }
-            }
-        }
-    }
-    setFinalKeyframe() { }
-    measureInitialState() { }
-    renderEndStyles() { }
-    measureEndState() { }
-    complete() {
-        this.isComplete = true;
-        this.onComplete(this.unresolvedKeyframes, this.finalKeyframe);
-        toResolve.delete(this);
-    }
-    cancel() {
-        if (!this.isComplete) {
-            this.isScheduled = false;
-            toResolve.delete(this);
-        }
-    }
-    resume() {
-        if (!this.isComplete)
-            this.scheduleResolve();
-    }
-}
-
-/**
- * Check if value is a numerical string, ie a string that is purely a number eg "100" or "-100.1"
- */
-const isNumericalString = (v) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(v);
-
-/**
- * Parse Framer's special CSS variable format into a CSS token and a fallback.
- *
- * ```
- * `var(--foo, #fff)` => [`--foo`, '#fff']
- * ```
- *
- * @param current
- */
-const splitCSSVariableRegex = 
-// eslint-disable-next-line redos-detector/no-unsafe-regex -- false positive, as it can match a lot of words
-/^var\(--(?:([\w-]+)|([\w-]+), ?([a-zA-Z\d ()%#.,-]+))\)/u;
-function parseCSSVariable(current) {
-    const match = splitCSSVariableRegex.exec(current);
-    if (!match)
-        return [,];
-    const [, token1, token2, fallback] = match;
-    return [`--${token1 ?? token2}`, fallback];
-}
-const maxDepth = 4;
-function getVariableValue(current, element, depth = 1) {
-    invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`);
-    const [token, fallback] = parseCSSVariable(current);
-    // No CSS variable detected
-    if (!token)
-        return;
-    // Attempt to read this CSS variable off the element
-    const resolved = window.getComputedStyle(element).getPropertyValue(token);
-    if (resolved) {
-        const trimmed = resolved.trim();
-        return isNumericalString(trimmed) ? parseFloat(trimmed) : trimmed;
-    }
-    return isCSSVariableToken(fallback)
-        ? getVariableValue(fallback, element, depth + 1)
-        : fallback;
-}
-
-/**
- * Tests a provided value against a ValueType
- */
-const testValueType = (v) => (type) => type.test(v);
-
-/**
- * ValueType for "auto"
- */
-const auto = {
-    test: (v) => v === "auto",
-    parse: (v) => v,
-};
-
-/**
- * A list of value types commonly used for dimensions
- */
-const dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
-/**
- * Tests a dimensional value against the list of dimension ValueTypes
- */
-const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v));
-
-class DOMKeyframesResolver extends KeyframeResolver {
-    constructor(unresolvedKeyframes, onComplete, name, motionValue, element) {
-        super(unresolvedKeyframes, onComplete, name, motionValue, element, true);
-    }
-    readKeyframes() {
-        const { unresolvedKeyframes, element, name } = this;
-        if (!element || !element.current)
-            return;
-        super.readKeyframes();
-        /**
-         * If any keyframe is a CSS variable, we need to find its value by sampling the element
-         */
-        for (let i = 0; i < unresolvedKeyframes.length; i++) {
-            let keyframe = unresolvedKeyframes[i];
-            if (typeof keyframe === "string") {
-                keyframe = keyframe.trim();
-                if (isCSSVariableToken(keyframe)) {
-                    const resolved = getVariableValue(keyframe, element.current);
-                    if (resolved !== undefined) {
-                        unresolvedKeyframes[i] = resolved;
-                    }
-                    if (i === unresolvedKeyframes.length - 1) {
-                        this.finalKeyframe = keyframe;
-                    }
-                }
-            }
-        }
-        /**
-         * Resolve "none" values. We do this potentially twice - once before and once after measuring keyframes.
-         * This could be seen as inefficient but it's a trade-off to avoid measurements in more situations, which
-         * have a far bigger performance impact.
-         */
-        this.resolveNoneKeyframes();
-        /**
-         * Check to see if unit type has changed. If so schedule jobs that will
-         * temporarily set styles to the destination keyframes.
-         * Skip if we have more than two keyframes or this isn't a positional value.
-         * TODO: We can throw if there are multiple keyframes and the value type changes.
-         */
-        if (!positionalKeys.has(name) || unresolvedKeyframes.length !== 2) {
-            return;
-        }
-        const [origin, target] = unresolvedKeyframes;
-        const originType = findDimensionValueType(origin);
-        const targetType = findDimensionValueType(target);
-        /**
-         * Either we don't recognise these value types or we can animate between them.
-         */
-        if (originType === targetType)
-            return;
-        /**
-         * If both values are numbers or pixels, we can animate between them by
-         * converting them to numbers.
-         */
-        if (isNumOrPxType(originType) && isNumOrPxType(targetType)) {
-            for (let i = 0; i < unresolvedKeyframes.length; i++) {
-                const value = unresolvedKeyframes[i];
-                if (typeof value === "string") {
-                    unresolvedKeyframes[i] = parseFloat(value);
-                }
-            }
-        }
-        else {
-            /**
-             * Else, the only way to resolve this is by measuring the element.
-             */
-            this.needsMeasurement = true;
-        }
-    }
-    resolveNoneKeyframes() {
-        const { unresolvedKeyframes, name } = this;
-        const noneKeyframeIndexes = [];
-        for (let i = 0; i < unresolvedKeyframes.length; i++) {
-            if (isNone(unresolvedKeyframes[i])) {
-                noneKeyframeIndexes.push(i);
-            }
-        }
-        if (noneKeyframeIndexes.length) {
-            makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name);
-        }
-    }
-    measureInitialState() {
-        const { element, unresolvedKeyframes, name } = this;
-        if (!element || !element.current)
-            return;
-        if (name === "height") {
-            this.suspendedScrollY = window.pageYOffset;
-        }
-        this.measuredOrigin = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current));
-        unresolvedKeyframes[0] = this.measuredOrigin;
-        // Set final key frame to measure after next render
-        const measureKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
-        if (measureKeyframe !== undefined) {
-            element.getValue(name, measureKeyframe).jump(measureKeyframe, false);
-        }
-    }
-    measureEndState() {
-        const { element, name, unresolvedKeyframes } = this;
-        if (!element || !element.current)
-            return;
-        const value = element.getValue(name);
-        value && value.jump(this.measuredOrigin, false);
-        const finalKeyframeIndex = unresolvedKeyframes.length - 1;
-        const finalKeyframe = unresolvedKeyframes[finalKeyframeIndex];
-        unresolvedKeyframes[finalKeyframeIndex] = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current));
-        if (finalKeyframe !== null && this.finalKeyframe === undefined) {
-            this.finalKeyframe = finalKeyframe;
-        }
-        // If we removed transform values, reapply them before the next render
-        if (this.removedTransforms?.length) {
-            this.removedTransforms.forEach(([unsetTransformName, unsetTransformValue]) => {
-                element
-                    .getValue(unsetTransformName)
-                    .set(unsetTransformValue);
-            });
-        }
-        this.resolveNoneKeyframes();
-    }
-}
-
-/**
- * Check if a value is animatable. Examples:
- *
- * ✅: 100, "100px", "#fff"
- * ❌: "block", "url(2.jpg)"
- * @param value
- *
- * @internal
- */
-const isAnimatable = (value, name) => {
-    // If the list of keys tat might be non-animatable grows, replace with Set
-    if (name === "zIndex")
-        return false;
-    // If it's a number or a keyframes array, we can animate it. We might at some point
-    // need to do a deep isAnimatable check of keyframes, or let Popmotion handle this,
-    // but for now lets leave it like this for performance reasons
-    if (typeof value === "number" || Array.isArray(value))
-        return true;
-    if (typeof value === "string" && // It's animatable if we have a string
-        (complex.test(value) || value === "0") && // And it contains numbers and/or colors
-        !value.startsWith("url(") // Unless it starts with "url("
-    ) {
-        return true;
-    }
-    return false;
-};
-
-function isGenerator(type) {
-    return typeof type === "function" && "applyToOptions" in type;
-}
-
-function hasKeyframesChanged(keyframes) {
-    const current = keyframes[0];
-    if (keyframes.length === 1)
-        return true;
-    for (let i = 0; i < keyframes.length; i++) {
-        if (keyframes[i] !== current)
-            return true;
-    }
-}
-function canAnimate(keyframes, name, type, velocity) {
-    /**
-     * Check if we're able to animate between the start and end keyframes,
-     * and throw a warning if we're attempting to animate between one that's
-     * animatable and another that isn't.
-     */
-    const originKeyframe = keyframes[0];
-    if (originKeyframe === null)
-        return false;
-    /**
-     * These aren't traditionally animatable but we do support them.
-     * In future we could look into making this more generic or replacing
-     * this function with mix() === mixImmediate
-     */
-    if (name === "display" || name === "visibility")
-        return true;
-    const targetKeyframe = keyframes[keyframes.length - 1];
-    const isOriginAnimatable = isAnimatable(originKeyframe, name);
-    const isTargetAnimatable = isAnimatable(targetKeyframe, name);
-    warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${name} from "${originKeyframe}" to "${targetKeyframe}". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \`style\` property.`);
-    // Always skip if any of these are true
-    if (!isOriginAnimatable || !isTargetAnimatable) {
-        return false;
-    }
-    return (hasKeyframesChanged(keyframes) ||
-        ((type === "spring" || isGenerator(type)) && velocity));
-}
-
-const isNotNull = (value) => value !== null;
-function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe) {
-    const resolvedKeyframes = keyframes.filter(isNotNull);
-    const index = repeat && repeatType !== "loop" && repeat % 2 === 1
-        ? 0
-        : resolvedKeyframes.length - 1;
-    return !index || finalKeyframe === undefined
-        ? resolvedKeyframes[index]
-        : finalKeyframe;
-}
-
-/**
- * Maximum time allowed between an animation being created and it being
- * resolved for us to use the latter as the start time.
- *
- * This is to ensure that while we prefer to "start" an animation as soon
- * as it's triggered, we also want to avoid a visual jump if there's a big delay
- * between these two moments.
- */
-const MAX_RESOLVE_DELAY = 40;
-class BaseAnimation {
-    constructor({ autoplay = true, delay = 0, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop", ...options }) {
-        // Track whether the animation has been stopped. Stopped animations won't restart.
-        this.isStopped = false;
-        this.hasAttemptedResolve = false;
-        this.createdAt = time.now();
-        this.options = {
-            autoplay,
-            delay,
-            type,
-            repeat,
-            repeatDelay,
-            repeatType,
-            ...options,
-        };
-        this.updateFinishedPromise();
-    }
-    /**
-     * This method uses the createdAt and resolvedAt to calculate the
-     * animation startTime. *Ideally*, we would use the createdAt time as t=0
-     * as the following frame would then be the first frame of the animation in
-     * progress, which would feel snappier.
-     *
-     * However, if there's a delay (main thread work) between the creation of
-     * the animation and the first commited frame, we prefer to use resolvedAt
-     * to avoid a sudden jump into the animation.
-     */
-    calcStartTime() {
-        if (!this.resolvedAt)
-            return this.createdAt;
-        return this.resolvedAt - this.createdAt > MAX_RESOLVE_DELAY
-            ? this.resolvedAt
-            : this.createdAt;
-    }
-    /**
-     * A getter for resolved data. If keyframes are not yet resolved, accessing
-     * this.resolved will synchronously flush all pending keyframe resolvers.
-     * This is a deoptimisation, but at its worst still batches read/writes.
-     */
-    get resolved() {
-        if (!this._resolved && !this.hasAttemptedResolve) {
-            flushKeyframeResolvers();
-        }
-        return this._resolved;
-    }
-    /**
-     * A method to be called when the keyframes resolver completes. This method
-     * will check if its possible to run the animation and, if not, skip it.
-     * Otherwise, it will call initPlayback on the implementing class.
-     */
-    onKeyframesResolved(keyframes, finalKeyframe) {
-        this.resolvedAt = time.now();
-        this.hasAttemptedResolve = true;
-        const { name, type, velocity, delay, onComplete, onUpdate, isGenerator, } = this.options;
-        /**
-         * If we can't animate this value with the resolved keyframes
-         * then we should complete it immediately.
-         */
-        if (!isGenerator && !canAnimate(keyframes, name, type, velocity)) {
-            // Finish immediately
-            if (!delay) {
-                onUpdate &&
-                    onUpdate(getFinalKeyframe(keyframes, this.options, finalKeyframe));
-                onComplete && onComplete();
-                this.resolveFinishedPromise();
-                return;
-            }
-            // Finish after a delay
-            else {
-                this.options.duration = 0;
-            }
-        }
-        const resolvedAnimation = this.initPlayback(keyframes, finalKeyframe);
-        if (resolvedAnimation === false)
-            return;
-        this._resolved = {
-            keyframes,
-            finalKeyframe,
-            ...resolvedAnimation,
-        };
-        this.onPostResolved();
-    }
-    onPostResolved() { }
-    /**
-     * Allows the returned animation to be awaited or promise-chained. Currently
-     * resolves when the animation finishes at all but in a future update could/should
-     * reject if its cancels.
-     */
-    then(resolve, reject) {
-        return this.currentFinishedPromise.then(resolve, reject);
-    }
-    flatten() {
-        if (!this.options.allowFlatten)
-            return;
-        this.options.type = "keyframes";
-        this.options.ease = "linear";
-    }
-    updateFinishedPromise() {
-        this.currentFinishedPromise = new Promise((resolve) => {
-            this.resolveFinishedPromise = resolve;
-        });
-    }
-}
-
-/*
-  Value in range from progress
-
-  Given a lower limit and an upper limit, we return the value within
-  that range as expressed by progress (usually a number from 0 to 1)
-
-  So progress = 0.5 would change
-
-  from -------- to
-
-  to
-
-  from ---- to
-
-  E.g. from = 10, to = 20, progress = 0.5 => 15
-
-  @param [number]: Lower limit of range
-  @param [number]: Upper limit of range
-  @param [number]: The progress between lower and upper limits expressed 0-1
-  @return [number]: Value as calculated from progress within range (not limited within range)
-*/
-const mixNumber$1 = (from, to, progress) => {
-    return from + (to - from) * progress;
-};
-
-// Adapted from https://gist.github.com/mjackson/5311256
-function hueToRgb(p, q, t) {
-    if (t < 0)
-        t += 1;
-    if (t > 1)
-        t -= 1;
-    if (t < 1 / 6)
-        return p + (q - p) * 6 * t;
-    if (t < 1 / 2)
-        return q;
-    if (t < 2 / 3)
-        return p + (q - p) * (2 / 3 - t) * 6;
-    return p;
-}
-function hslaToRgba({ hue, saturation, lightness, alpha }) {
-    hue /= 360;
-    saturation /= 100;
-    lightness /= 100;
-    let red = 0;
-    let green = 0;
-    let blue = 0;
-    if (!saturation) {
-        red = green = blue = lightness;
-    }
-    else {
-        const q = lightness < 0.5
-            ? lightness * (1 + saturation)
-            : lightness + saturation - lightness * saturation;
-        const p = 2 * lightness - q;
-        red = hueToRgb(p, q, hue + 1 / 3);
-        green = hueToRgb(p, q, hue);
-        blue = hueToRgb(p, q, hue - 1 / 3);
-    }
-    return {
-        red: Math.round(red * 255),
-        green: Math.round(green * 255),
-        blue: Math.round(blue * 255),
-        alpha,
-    };
-}
-
-function mixImmediate(a, b) {
-    return (p) => (p > 0 ? b : a);
-}
-
-// Linear color space blending
-// Explained https://www.youtube.com/watch?v=LKnqECcg6Gw
-// Demonstrated http://codepen.io/osublake/pen/xGVVaN
-const mixLinearColor = (from, to, v) => {
-    const fromExpo = from * from;
-    const expo = v * (to * to - fromExpo) + fromExpo;
-    return expo < 0 ? 0 : Math.sqrt(expo);
-};
-const colorTypes = [hex, rgba, hsla];
-const getColorType = (v) => colorTypes.find((type) => type.test(v));
-function asRGBA(color) {
-    const type = getColorType(color);
-    warning(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`);
-    if (!Boolean(type))
-        return false;
-    let model = type.parse(color);
-    if (type === hsla) {
-        // TODO Remove this cast - needed since Motion's stricter typing
-        model = hslaToRgba(model);
-    }
-    return model;
-}
-const mixColor = (from, to) => {
-    const fromRGBA = asRGBA(from);
-    const toRGBA = asRGBA(to);
-    if (!fromRGBA || !toRGBA) {
-        return mixImmediate(from, to);
-    }
-    const blended = { ...fromRGBA };
-    return (v) => {
-        blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v);
-        blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v);
-        blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v);
-        blended.alpha = mixNumber$1(fromRGBA.alpha, toRGBA.alpha, v);
-        return rgba.transform(blended);
-    };
-};
-
 /**
  * Pipe
  * Compose other transformers to run linearily
@@ -7092,21 +6228,6 @@ const mixColor = (from, to) => {
 const combineFunctions = (a, b) => (v) => b(a(v));
 const pipe = (...transformers) => transformers.reduce(combineFunctions);
 
-const invisibleValues = new Set(["none", "hidden"]);
-/**
- * Returns a function that, when provided a progress value between 0 and 1,
- * will return the "none" or "hidden" string only when the progress is that of
- * the origin or target.
- */
-function mixVisibility(origin, target) {
-    if (invisibleValues.has(origin)) {
-        return (p) => (p <= 0 ? origin : target);
-    }
-    else {
-        return (p) => (p >= 1 ? target : origin);
-    }
-}
-
 function mixNumber(a, b) {
     return (p) => mixNumber$1(a, b, p);
 }
@@ -7187,16 +6308,71 @@ const mixComplex = (origin, target) => {
         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.`);
         return mixImmediate(origin, target);
     }
-};
+};
+
+function mix(from, to, p) {
+    if (typeof from === "number" &&
+        typeof to === "number" &&
+        typeof p === "number") {
+        return mixNumber$1(from, to, p);
+    }
+    const mixer = getMixer(from);
+    return mixer(from, to);
+}
+
+const frameloopDriver = (update) => {
+    const passTimestamp = ({ timestamp }) => update(timestamp);
+    return {
+        start: () => frame.update(passTimestamp, true),
+        stop: () => cancelFrame(passTimestamp),
+        /**
+         * If we're processing this frame we can use the
+         * framelocked timestamp to keep things in sync.
+         */
+        now: () => (frameData.isProcessing ? frameData.timestamp : time.now()),
+    };
+};
+
+const generateLinearEasing = (easing, duration, // as milliseconds
+resolution = 10 // as milliseconds
+) => {
+    let points = "";
+    const numPoints = Math.max(Math.round(duration / resolution), 2);
+    for (let i = 0; i < numPoints; i++) {
+        points += easing(i / (numPoints - 1)) + ", ";
+    }
+    return `linear(${points.substring(0, points.length - 2)})`;
+};
+
+/**
+ * Implement a practical max duration for keyframe generation
+ * to prevent infinite loops
+ */
+const maxGeneratorDuration = 20000;
+function calcGeneratorDuration(generator) {
+    let duration = 0;
+    const timeStep = 50;
+    let state = generator.next(duration);
+    while (!state.done && duration < maxGeneratorDuration) {
+        duration += timeStep;
+        state = generator.next(duration);
+    }
+    return duration >= maxGeneratorDuration ? Infinity : duration;
+}
 
-function mix(from, to, p) {
-    if (typeof from === "number" &&
-        typeof to === "number" &&
-        typeof p === "number") {
-        return mixNumber$1(from, to, p);
-    }
-    const mixer = getMixer(from);
-    return mixer(from, to);
+/**
+ * Create a progress => progress easing function from a generator.
+ */
+function createGeneratorEasing(options, scale = 100, createGenerator) {
+    const generator = createGenerator({ ...options, keyframes: [0, scale] });
+    const duration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
+    return {
+        type: "keyframes",
+        ease: (progress) => {
+            return generator.next(duration * progress).value / scale;
+        },
+        duration: millisecondsToSeconds(duration),
+    };
 }
 
 const velocitySampleDuration = 5; // ms
@@ -7231,17 +6407,6 @@ const springDefaults = {
     maxDamping: 1,
 };
 
-/**
- * Converts seconds to milliseconds
- *
- * @param seconds - Time in seconds.
- * @return milliseconds - Converted time in milliseconds.
- */
-/*#__NO_SIDE_EFFECTS__*/
-const secondsToMilliseconds = (seconds) => seconds * 1000;
-/*#__NO_SIDE_EFFECTS__*/
-const millisecondsToSeconds = (milliseconds) => milliseconds / 1000;
-
 const safeMin = 0.001;
 function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, velocity = springDefaults.velocity, mass = springDefaults.mass, }) {
     let envelope;
@@ -7322,81 +6487,6 @@ function calcAngularFreq(undampedFreq, dampingRatio) {
     return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
 }
 
-/**
- * Implement a practical max duration for keyframe generation
- * to prevent infinite loops
- */
-const maxGeneratorDuration = 20000;
-function calcGeneratorDuration(generator) {
-    let duration = 0;
-    const timeStep = 50;
-    let state = generator.next(duration);
-    while (!state.done && duration < maxGeneratorDuration) {
-        duration += timeStep;
-        state = generator.next(duration);
-    }
-    return duration >= maxGeneratorDuration ? Infinity : duration;
-}
-
-/**
- * Create a progress => progress easing function from a generator.
- */
-function createGeneratorEasing(options, scale = 100, createGenerator) {
-    const generator = createGenerator({ ...options, keyframes: [0, scale] });
-    const duration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
-    return {
-        type: "keyframes",
-        ease: (progress) => {
-            return generator.next(duration * progress).value / scale;
-        },
-        duration: millisecondsToSeconds(duration),
-    };
-}
-
-/**
- * Add the ability for test suites to manually set support flags
- * to better test more environments.
- */
-const supportsFlags = {};
-
-/*#__NO_SIDE_EFFECTS__*/
-function memo(callback) {
-    let result;
-    return () => {
-        if (result === undefined)
-            result = callback();
-        return result;
-    };
-}
-
-function memoSupports(callback, supportsFlag) {
-    const memoized = memo(callback);
-    return () => supportsFlags[supportsFlag] ?? memoized();
-}
-
-const supportsLinearEasing = /*@__PURE__*/ memoSupports(() => {
-    try {
-        document
-            .createElement("div")
-            .animate({ opacity: 0 }, { easing: "linear(0, 1)" });
-    }
-    catch (e) {
-        return false;
-    }
-    return true;
-}, "linearEasing");
-
-const generateLinearEasing = (easing, duration, // as milliseconds
-resolution = 10 // as milliseconds
-) => {
-    let points = "";
-    const numPoints = Math.max(Math.round(duration / resolution), 2);
-    for (let i = 0; i < numPoints; i++) {
-        points += easing(i / (numPoints - 1)) + ", ";
-    }
-    return `linear(${points.substring(0, points.length - 2)})`;
-};
-
 const durationKeys = ["duration", "bounce"];
 const physicsKeys = ["stiffness", "damping", "mass"];
 function isSpringType(options, keys) {
@@ -7523,7 +6613,7 @@ function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce
         next: (t) => {
             const current = resolveSpring(t);
             if (!isResolvedFromDuration) {
-                let currentVelocity = 0.0;
+                let currentVelocity = t === 0 ? initialVelocity : 0.0;
                 /**
                  * We only need to calculate velocity for under-damped springs
                  * as over- and critically-damped springs can't overshoot, so
@@ -7557,7 +6647,7 @@ function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce
 }
 spring.applyToOptions = (options) => {
     const generatorOptions = createGeneratorEasing(options, 100, spring);
-    options.ease = supportsLinearEasing() ? generatorOptions.ease : "easeOut";
+    options.ease = generatorOptions.ease;
     options.duration = secondsToMilliseconds(generatorOptions.duration);
     options.type = "keyframes";
     return options;
@@ -7646,44 +6736,6 @@ function inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, b
     };
 }
 
-const easeIn = /*@__PURE__*/ cubicBezier(0.42, 0, 1, 1);
-const easeOut = /*@__PURE__*/ cubicBezier(0, 0, 0.58, 1);
-const easeInOut = /*@__PURE__*/ cubicBezier(0.42, 0, 0.58, 1);
-
-const isEasingArray = (ease) => {
-    return Array.isArray(ease) && typeof ease[0] !== "number";
-};
-
-const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
-
-const easingLookup = {
-    linear: noop,
-    easeIn,
-    easeInOut,
-    easeOut,
-    circIn,
-    circInOut,
-    circOut,
-    backIn,
-    backInOut,
-    backOut,
-    anticipate,
-};
-const easingDefinitionToFunction = (definition) => {
-    if (isBezierDefinition(definition)) {
-        // If cubic bezier definition, create bezier curve
-        invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);
-        const [x1, y1, x2, y2] = definition;
-        return cubicBezier(x1, y1, x2, y2);
-    }
-    else if (typeof definition === "string") {
-        // Else lookup from table
-        invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`);
-        return easingLookup[definition];
-    }
-    return definition;
-};
-
 /*
   Progress within given range
 
@@ -7704,7 +6756,7 @@ const progress = (from, to, value) => {
 
 function createMixers(output, ease, customMixer) {
     const mixers = [];
-    const mixerFactory = customMixer || mix;
+    const mixerFactory = customMixer || MotionGlobalConfig.mix || mix;
     const numMixers = output.length - 1;
     for (let i = 0; i < numMixers; i++) {
         let mixer = mixerFactory(output[i], output[i + 1]);
@@ -7778,17 +6830,124 @@ function fillOffset(offset, remaining) {
         const offsetProgress = progress(0, remaining, i);
         offset.push(mixNumber$1(min, 1, offsetProgress));
     }
-}
-
-function defaultOffset(arr) {
-    const offset = [0];
-    fillOffset(offset, arr.length - 1);
-    return offset;
-}
-
-function convertOffsetToTimes(offset, duration) {
-    return offset.map((o) => o * duration);
-}
+}
+
+function defaultOffset(arr) {
+    const offset = [0];
+    fillOffset(offset, arr.length - 1);
+    return offset;
+}
+
+function convertOffsetToTimes(offset, duration) {
+    return offset.map((o) => o * duration);
+}
+
+/*
+  Bezier function generator
+  This has been modified from Gaëtan Renaudeau's BezierEasing
+  https://github.com/gre/bezier-easing/blob/master/src/index.js
+  https://github.com/gre/bezier-easing/blob/master/LICENSE
+  
+  I've removed the newtonRaphsonIterate algo because in benchmarking it
+  wasn't noticiably faster than binarySubdivision, indeed removing it
+  usually improved times, depending on the curve.
+  I also removed the lookup table, as for the added bundle size and loop we're
+  only cutting ~4 or so subdivision iterations. I bumped the max iterations up
+  to 12 to compensate and this still tended to be faster for no perceivable
+  loss in accuracy.
+  Usage
+    const easeOut = cubicBezier(.17,.67,.83,.67);
+    const x = easeOut(0.5); // returns 0.627...
+*/
+// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
+const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) *
+    t;
+const subdivisionPrecision = 0.0000001;
+const subdivisionMaxIterations = 12;
+function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
+    let currentX;
+    let currentT;
+    let i = 0;
+    do {
+        currentT = lowerBound + (upperBound - lowerBound) / 2.0;
+        currentX = calcBezier(currentT, mX1, mX2) - x;
+        if (currentX > 0.0) {
+            upperBound = currentT;
+        }
+        else {
+            lowerBound = currentT;
+        }
+    } while (Math.abs(currentX) > subdivisionPrecision &&
+        ++i < subdivisionMaxIterations);
+    return currentT;
+}
+function cubicBezier(mX1, mY1, mX2, mY2) {
+    // If this is a linear gradient, return linear easing
+    if (mX1 === mY1 && mX2 === mY2)
+        return noop;
+    const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
+    // If animation is at start/end, return t without easing
+    return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
+}
+
+const easeIn = /*@__PURE__*/ cubicBezier(0.42, 0, 1, 1);
+const easeOut = /*@__PURE__*/ cubicBezier(0, 0, 0.58, 1);
+const easeInOut = /*@__PURE__*/ cubicBezier(0.42, 0, 0.58, 1);
+
+const isEasingArray = (ease) => {
+    return Array.isArray(ease) && typeof ease[0] !== "number";
+};
+
+// Accepts an easing function and returns a new one that outputs mirrored values for
+// the second half of the animation. Turns easeIn into easeInOut.
+const mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;
+
+// Accepts an easing function and returns a new one that outputs reversed values.
+// Turns easeIn into easeOut.
+const reverseEasing = (easing) => (p) => 1 - easing(1 - p);
+
+const backOut = /*@__PURE__*/ cubicBezier(0.33, 1.53, 0.69, 0.99);
+const backIn = /*@__PURE__*/ reverseEasing(backOut);
+const backInOut = /*@__PURE__*/ mirrorEasing(backIn);
+
+const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
+
+const circIn = (p) => 1 - Math.sin(Math.acos(p));
+const circOut = reverseEasing(circIn);
+const circInOut = mirrorEasing(circIn);
+
+const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
+
+const easingLookup = {
+    linear: noop,
+    easeIn,
+    easeInOut,
+    easeOut,
+    circIn,
+    circInOut,
+    circOut,
+    backIn,
+    backInOut,
+    backOut,
+    anticipate,
+};
+const isValidEasing = (easing) => {
+    return typeof easing === "string";
+};
+const easingDefinitionToFunction = (definition) => {
+    if (isBezierDefinition(definition)) {
+        // If cubic bezier definition, create bezier curve
+        invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);
+        const [x1, y1, x2, y2] = definition;
+        return cubicBezier(x1, y1, x2, y2);
+    }
+    else if (isValidEasing(definition)) {
+        // Else lookup from table
+        invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`);
+        return easingLookup[definition];
+    }
+    return definition;
+};
 
 function defaultEasing(values, easing) {
     return values.map(() => easing || easeInOut).splice(0, values.length - 1);
@@ -7833,68 +6992,84 @@ function keyframes({ duration = 300, keyframes: keyframeValues, times, ease = "e
     };
 }
 
-const frameloopDriver = (update) => {
-    const passTimestamp = ({ timestamp }) => update(timestamp);
-    return {
-        start: () => frame.update(passTimestamp, true),
-        stop: () => cancelFrame(passTimestamp),
-        /**
-         * If we're processing this frame we can use the
-         * framelocked timestamp to keep things in sync.
-         */
-        now: () => (frameData.isProcessing ? frameData.timestamp : time.now()),
-    };
-};
+const isNotNull = (value) => value !== null;
+function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }, finalKeyframe, speed = 1) {
+    const resolvedKeyframes = keyframes.filter(isNotNull);
+    const useFirstKeyframe = speed < 0 || (repeat && repeatType !== "loop" && repeat % 2 === 1);
+    const index = useFirstKeyframe ? 0 : resolvedKeyframes.length - 1;
+    return !index || finalKeyframe === undefined
+        ? resolvedKeyframes[index]
+        : finalKeyframe;
+}
 
-const generators = {
+const transitionTypeMap = {
     decay: inertia,
     inertia,
     tween: keyframes,
     keyframes: keyframes,
     spring,
 };
+function replaceTransitionType(transition) {
+    if (typeof transition.type === "string") {
+        transition.type = transitionTypeMap[transition.type];
+    }
+}
+
+class WithPromise {
+    constructor() {
+        this.count = 0;
+        this.updateFinished();
+    }
+    get finished() {
+        return this._finished;
+    }
+    updateFinished() {
+        this.count++;
+        this._finished = new Promise((resolve) => {
+            this.resolve = resolve;
+        });
+    }
+    notifyFinished() {
+        this.resolve();
+    }
+    /**
+     * Allows the animation to be awaited.
+     *
+     * @deprecated Use `finished` instead.
+     */
+    then(onResolve, onReject) {
+        return this.finished.then(onResolve, onReject);
+    }
+}
+
 const percentToProgress = (percent) => percent / 100;
-/**
- * Animation that runs on the main thread. Designed to be WAAPI-spec in the subset of
- * features we expose publically. Mostly the compatibility is to ensure visual identity
- * between both WAAPI and main thread animations.
- */
-class MainThreadAnimation extends BaseAnimation {
+class JSAnimation extends WithPromise {
     constructor(options) {
-        super(options);
-        /**
-         * The time at which the animation was paused.
-         */
-        this.holdTime = null;
-        /**
-         * The time at which the animation was cancelled.
-         */
-        this.cancelTime = null;
+        super();
+        this.state = "idle";
+        this.startTime = null;
+        this.isStopped = false;
         /**
          * The current time of the animation.
          */
         this.currentTime = 0;
         /**
-         * Playback speed as a factor. 0 would be stopped, -1 reverse and 2 double speed.
-         */
-        this.playbackSpeed = 1;
-        /**
-         * The state of the animation to apply when the animation is resolved. This
-         * allows calls to the public API to control the animation before it is resolved,
-         * without us having to resolve it first.
+         * The time at which the animation was paused.
          */
-        this.pendingPlayState = "running";
+        this.holdTime = null;
         /**
-         * The time at which the animation was started.
+         * Playback speed as a factor. 0 would be stopped, -1 reverse and 2 double speed.
          */
-        this.startTime = null;
-        this.state = "idle";
+        this.playbackSpeed = 1;
         /**
          * This method is bound to the instance to fix a pattern where
          * animation.stop is returned as a reference from a useEffect.
          */
         this.stop = () => {
-            this.resolver.cancel();
+            const { motionValue } = this.options;
+            if (motionValue && motionValue.updatedAt !== time.now()) {
+                this.tick(time.now());
+            }
             this.isStopped = true;
             if (this.state === "idle")
                 return;
@@ -7902,49 +7077,35 @@ class MainThreadAnimation extends BaseAnimation {
             const { onStop } = this.options;
             onStop && onStop();
         };
-        const { name, motionValue, element, keyframes } = this.options;
-        const KeyframeResolver$1 = element?.KeyframeResolver || KeyframeResolver;
-        const onResolved = (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe);
-        this.resolver = new KeyframeResolver$1(keyframes, onResolved, name, motionValue, element);
-        this.resolver.scheduleResolve();
-    }
-    flatten() {
-        super.flatten();
-        // If we've already resolved the animation, re-initialise it
-        if (this._resolved) {
-            Object.assign(this._resolved, this.initPlayback(this._resolved.keyframes));
-        }
-    }
-    initPlayback(keyframes$1) {
-        const { type = "keyframes", repeat = 0, repeatDelay = 0, repeatType, velocity = 0, } = this.options;
-        const generatorFactory = isGenerator(type)
-            ? type
-            : generators[type] || keyframes;
-        /**
-         * If our generator doesn't support mixing numbers, we need to replace keyframes with
-         * [0, 100] and then make a function that maps that to the actual keyframes.
-         *
-         * 100 is chosen instead of 1 as it works nicer with spring animations.
-         */
-        let mapPercentToKeyframes;
-        let mirroredGenerator;
+        this.options = options;
+        this.initAnimation();
+        this.play();
+        if (options.autoplay === false)
+            this.pause();
+    }
+    initAnimation() {
+        const { options } = this;
+        replaceTransitionType(options);
+        const { type = keyframes, repeat = 0, repeatDelay = 0, repeatType, velocity = 0, } = options;
+        let { keyframes: keyframes$1 } = options;
+        const generatorFactory = type || keyframes;
         if (process.env.NODE_ENV !== "production" &&
             generatorFactory !== keyframes) {
             invariant(keyframes$1.length <= 2, `Only two keyframes currently supported with spring and inertia animations. Trying to animate ${keyframes$1}`);
         }
         if (generatorFactory !== keyframes &&
             typeof keyframes$1[0] !== "number") {
-            mapPercentToKeyframes = pipe(percentToProgress, mix(keyframes$1[0], keyframes$1[1]));
+            this.mixKeyframes = pipe(percentToProgress, mix(keyframes$1[0], keyframes$1[1]));
             keyframes$1 = [0, 100];
         }
-        const generator = generatorFactory({ ...this.options, keyframes: keyframes$1 });
+        const generator = generatorFactory({ ...options, keyframes: keyframes$1 });
         /**
          * If we have a mirror repeat type we need to create a second generator that outputs the
          * mirrored (not reversed) animation and later ping pong between the two generators.
          */
         if (repeatType === "mirror") {
-            mirroredGenerator = generatorFactory({
-                ...this.options,
+            this.mirroredGenerator = generatorFactory({
+                ...options,
                 keyframes: [...keyframes$1].reverse(),
                 velocity: -velocity,
             });
@@ -7961,38 +7122,29 @@ class MainThreadAnimation extends BaseAnimation {
             generator.calculatedDuration = calcGeneratorDuration(generator);
         }
         const { calculatedDuration } = generator;
-        const resolvedDuration = calculatedDuration + repeatDelay;
-        const totalDuration = resolvedDuration * (repeat + 1) - repeatDelay;
-        return {
-            generator,
-            mirroredGenerator,
-            mapPercentToKeyframes,
-            calculatedDuration,
-            resolvedDuration,
-            totalDuration,
-        };
+        this.calculatedDuration = calculatedDuration;
+        this.resolvedDuration = calculatedDuration + repeatDelay;
+        this.totalDuration = this.resolvedDuration * (repeat + 1) - repeatDelay;
+        this.generator = generator;
     }
-    onPostResolved() {
-        const { autoplay = true } = this.options;
-        this.play();
-        if (this.pendingPlayState === "paused" || !autoplay) {
-            this.pause();
+    updateTime(timestamp) {
+        const animationTime = Math.round(timestamp - this.startTime) * this.playbackSpeed;
+        // Update currentTime
+        if (this.holdTime !== null) {
+            this.currentTime = this.holdTime;
         }
         else {
-            this.state = this.pendingPlayState;
+            // Rounding the time because floating point arithmetic is not always accurate, e.g. 3000.367 - 1000.367 =
+            // 2000.0000000000002. This is a problem when we are comparing the currentTime with the duration, for
+            // example.
+            this.currentTime = animationTime;
         }
     }
     tick(timestamp, sample = false) {
-        const { resolved } = this;
-        // If the animations has failed to resolve, return the final keyframe.
-        if (!resolved) {
-            const { keyframes } = this.options;
-            return { done: true, value: keyframes[keyframes.length - 1] };
-        }
-        const { finalKeyframe, generator, mirroredGenerator, mapPercentToKeyframes, keyframes, calculatedDuration, totalDuration, resolvedDuration, } = resolved;
+        const { generator, totalDuration, mixKeyframes, mirroredGenerator, resolvedDuration, calculatedDuration, } = this;
         if (this.startTime === null)
             return generator.next(0);
-        const { delay, repeat, repeatType, repeatDelay, onUpdate } = this.options;
+        const { delay = 0, keyframes, repeat, repeatType, repeatDelay, type, onUpdate, finalKeyframe, } = this.options;
         /**
          * requestAnimationFrame timestamps can come through as lower than
          * the startTime as set by performance.now(). Here we prevent this,
@@ -8005,23 +7157,15 @@ class MainThreadAnimation extends BaseAnimation {
         else if (this.speed < 0) {
             this.startTime = Math.min(timestamp - totalDuration / this.speed, this.startTime);
         }
-        // Update currentTime
         if (sample) {
             this.currentTime = timestamp;
         }
-        else if (this.holdTime !== null) {
-            this.currentTime = this.holdTime;
-        }
         else {
-            // Rounding the time because floating point arithmetic is not always accurate, e.g. 3000.367 - 1000.367 =
-            // 2000.0000000000002. This is a problem when we are comparing the currentTime with the duration, for
-            // example.
-            this.currentTime =
-                Math.round(timestamp - this.startTime) * this.speed;
+            this.updateTime(timestamp);
         }
         // Rebase on delay
-        const timeWithoutDelay = this.currentTime - delay * (this.speed >= 0 ? 1 : -1);
-        const isInDelayPhase = this.speed >= 0
+        const timeWithoutDelay = this.currentTime - delay * (this.playbackSpeed >= 0 ? 1 : -1);
+        const isInDelayPhase = this.playbackSpeed >= 0
             ? timeWithoutDelay < 0
             : timeWithoutDelay > totalDuration;
         this.currentTime = Math.max(timeWithoutDelay, 0);
@@ -8082,20 +7226,21 @@ class MainThreadAnimation extends BaseAnimation {
         const state = isInDelayPhase
             ? { done: false, value: keyframes[0] }
             : frameGenerator.next(elapsed);
-        if (mapPercentToKeyframes) {
-            state.value = mapPercentToKeyframes(state.value);
+        if (mixKeyframes) {
+            state.value = mixKeyframes(state.value);
         }
         let { done } = state;
         if (!isInDelayPhase && calculatedDuration !== null) {
             done =
-                this.speed >= 0
+                this.playbackSpeed >= 0
                     ? this.currentTime >= totalDuration
                     : this.currentTime <= 0;
         }
         const isAnimationFinished = this.holdTime === null &&
             (this.state === "finished" || (this.state === "running" && done));
-        if (isAnimationFinished && finalKeyframe !== undefined) {
-            state.value = getFinalKeyframe(keyframes, this.options, finalKeyframe);
+        // TODO: The exception for inertia could be cleaner here
+        if (isAnimationFinished && type !== inertia) {
+            state.value = getFinalKeyframe(keyframes, this.options, finalKeyframe, this.speed);
         }
         if (onUpdate) {
             onUpdate(state.value);
@@ -8105,9 +7250,16 @@ class MainThreadAnimation extends BaseAnimation {
         }
         return state;
     }
+    /**
+     * Allows the returned animation to be awaited or promise-chained. Currently
+     * resolves when the animation finishes at all but in a future update could/should
+     * reject if its cancels.
+     */
+    then(resolve, reject) {
+        return this.finished.then(resolve, reject);
+    }
     get duration() {
-        const { resolved } = this;
-        return resolved ? millisecondsToSeconds(resolved.calculatedDuration) : 0;
+        return millisecondsToSeconds(this.calculatedDuration);
     }
     get time() {
         return millisecondsToSeconds(this.currentTime);
@@ -8115,125 +7267,417 @@ class MainThreadAnimation extends BaseAnimation {
     set time(newTime) {
         newTime = secondsToMilliseconds(newTime);
         this.currentTime = newTime;
-        if (this.holdTime !== null || this.speed === 0) {
+        if (this.startTime === null ||
+            this.holdTime !== null ||
+            this.playbackSpeed === 0) {
             this.holdTime = newTime;
         }
         else if (this.driver) {
-            this.startTime = this.driver.now() - newTime / this.speed;
+            this.startTime = this.driver.now() - newTime / this.playbackSpeed;
+        }
+    }
+    get speed() {
+        return this.playbackSpeed;
+    }
+    set speed(newSpeed) {
+        this.updateTime(time.now());
+        const hasChanged = this.playbackSpeed !== newSpeed;
+        this.playbackSpeed = newSpeed;
+        if (hasChanged) {
+            this.time = millisecondsToSeconds(this.currentTime);
         }
     }
-    get speed() {
-        return this.playbackSpeed;
+    play() {
+        if (this.isStopped)
+            return;
+        const { driver = frameloopDriver, onPlay, startTime } = this.options;
+        if (!this.driver) {
+            this.driver = driver((timestamp) => this.tick(timestamp));
+        }
+        onPlay && onPlay();
+        const now = this.driver.now();
+        if (this.holdTime !== null) {
+            this.startTime = now - this.holdTime;
+        }
+        else if (this.state === "finished") {
+            this.updateFinished();
+            this.startTime = now;
+        }
+        else if (!this.startTime) {
+            this.startTime = startTime ?? now;
+        }
+        if (this.state === "finished" && this.speed < 0) {
+            this.startTime += this.calculatedDuration;
+        }
+        this.holdTime = null;
+        /**
+         * Set playState to running only after we've used it in
+         * the previous logic.
+         */
+        this.state = "running";
+        this.driver.start();
+    }
+    pause() {
+        this.state = "paused";
+        this.updateTime(time.now());
+        this.holdTime = this.currentTime;
+    }
+    complete() {
+        if (this.state !== "running") {
+            this.play();
+        }
+        this.state = "finished";
+        this.holdTime = null;
+    }
+    finish() {
+        this.teardown();
+        this.state = "finished";
+        const { onComplete } = this.options;
+        onComplete && onComplete();
+    }
+    cancel() {
+        this.holdTime = null;
+        this.startTime = 0;
+        this.tick(0);
+        this.teardown();
+    }
+    teardown() {
+        this.notifyFinished();
+        this.state = "idle";
+        this.stopDriver();
+        this.startTime = this.holdTime = null;
+    }
+    stopDriver() {
+        if (!this.driver)
+            return;
+        this.driver.stop();
+        this.driver = undefined;
+    }
+    sample(sampleTime) {
+        this.startTime = 0;
+        return this.tick(sampleTime, true);
+    }
+    attachTimeline(timeline) {
+        if (this.options.allowFlatten) {
+            this.options.type = "keyframes";
+            this.options.ease = "linear";
+            this.initAnimation();
+        }
+        return timeline.observe(this);
+    }
+}
+
+function fillWildcards(keyframes) {
+    for (let i = 1; i < keyframes.length; i++) {
+        keyframes[i] ?? (keyframes[i] = keyframes[i - 1]);
+    }
+}
+
+const radToDeg = (rad) => (rad * 180) / Math.PI;
+const rotate = (v) => {
+    const angle = radToDeg(Math.atan2(v[1], v[0]));
+    return rebaseAngle(angle);
+};
+const matrix2dParsers = {
+    x: 4,
+    y: 5,
+    translateX: 4,
+    translateY: 5,
+    scaleX: 0,
+    scaleY: 3,
+    scale: (v) => (Math.abs(v[0]) + Math.abs(v[3])) / 2,
+    rotate,
+    rotateZ: rotate,
+    skewX: (v) => radToDeg(Math.atan(v[1])),
+    skewY: (v) => radToDeg(Math.atan(v[2])),
+    skew: (v) => (Math.abs(v[1]) + Math.abs(v[2])) / 2,
+};
+const rebaseAngle = (angle) => {
+    angle = angle % 360;
+    if (angle < 0)
+        angle += 360;
+    return angle;
+};
+const rotateZ = rotate;
+const scaleX = (v) => Math.sqrt(v[0] * v[0] + v[1] * v[1]);
+const scaleY = (v) => Math.sqrt(v[4] * v[4] + v[5] * v[5]);
+const matrix3dParsers = {
+    x: 12,
+    y: 13,
+    z: 14,
+    translateX: 12,
+    translateY: 13,
+    translateZ: 14,
+    scaleX,
+    scaleY,
+    scale: (v) => (scaleX(v) + scaleY(v)) / 2,
+    rotateX: (v) => rebaseAngle(radToDeg(Math.atan2(v[6], v[5]))),
+    rotateY: (v) => rebaseAngle(radToDeg(Math.atan2(-v[2], v[0]))),
+    rotateZ,
+    rotate: rotateZ,
+    skewX: (v) => radToDeg(Math.atan(v[4])),
+    skewY: (v) => radToDeg(Math.atan(v[1])),
+    skew: (v) => (Math.abs(v[1]) + Math.abs(v[4])) / 2,
+};
+function defaultTransformValue(name) {
+    return name.includes("scale") ? 1 : 0;
+}
+function parseValueFromTransform(transform, name) {
+    if (!transform || transform === "none") {
+        return defaultTransformValue(name);
+    }
+    const matrix3dMatch = transform.match(/^matrix3d\(([-\d.e\s,]+)\)$/u);
+    let parsers;
+    let match;
+    if (matrix3dMatch) {
+        parsers = matrix3dParsers;
+        match = matrix3dMatch;
+    }
+    else {
+        const matrix2dMatch = transform.match(/^matrix\(([-\d.e\s,]+)\)$/u);
+        parsers = matrix2dParsers;
+        match = matrix2dMatch;
+    }
+    if (!match) {
+        return defaultTransformValue(name);
     }
-    set speed(newSpeed) {
-        const hasChanged = this.playbackSpeed !== newSpeed;
-        this.playbackSpeed = newSpeed;
-        if (hasChanged) {
-            this.time = millisecondsToSeconds(this.currentTime);
+    const valueParser = parsers[name];
+    const values = match[1].split(",").map(convertTransformToNumber);
+    return typeof valueParser === "function"
+        ? valueParser(values)
+        : values[valueParser];
+}
+const readTransformValue = (instance, name) => {
+    const { transform = "none" } = getComputedStyle(instance);
+    return parseValueFromTransform(transform, name);
+};
+function convertTransformToNumber(value) {
+    return parseFloat(value.trim());
+}
+
+const isNumOrPxType = (v) => v === number || v === px;
+const transformKeys = new Set(["x", "y", "z"]);
+const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
+function removeNonTranslationalTransform(visualElement) {
+    const removedTransforms = [];
+    nonTranslationalTransformKeys.forEach((key) => {
+        const value = visualElement.getValue(key);
+        if (value !== undefined) {
+            removedTransforms.push([key, value.get()]);
+            value.set(key.startsWith("scale") ? 1 : 0);
         }
+    });
+    return removedTransforms;
+}
+const positionalValues = {
+    // Dimensions
+    width: ({ x }, { paddingLeft = "0", paddingRight = "0" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight),
+    height: ({ y }, { paddingTop = "0", paddingBottom = "0" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom),
+    top: (_bbox, { top }) => parseFloat(top),
+    left: (_bbox, { left }) => parseFloat(left),
+    bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),
+    right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min),
+    // Transform
+    x: (_bbox, { transform }) => parseValueFromTransform(transform, "x"),
+    y: (_bbox, { transform }) => parseValueFromTransform(transform, "y"),
+};
+// Alias translate longform names
+positionalValues.translateX = positionalValues.x;
+positionalValues.translateY = positionalValues.y;
+
+const toResolve = new Set();
+let isScheduled = false;
+let anyNeedsMeasurement = false;
+let isForced = false;
+function measureAllKeyframes() {
+    if (anyNeedsMeasurement) {
+        const resolversToMeasure = Array.from(toResolve).filter((resolver) => resolver.needsMeasurement);
+        const elementsToMeasure = new Set(resolversToMeasure.map((resolver) => resolver.element));
+        const transformsToRestore = new Map();
+        /**
+         * Write pass
+         * If we're measuring elements we want to remove bounding box-changing transforms.
+         */
+        elementsToMeasure.forEach((element) => {
+            const removedTransforms = removeNonTranslationalTransform(element);
+            if (!removedTransforms.length)
+                return;
+            transformsToRestore.set(element, removedTransforms);
+            element.render();
+        });
+        // Read
+        resolversToMeasure.forEach((resolver) => resolver.measureInitialState());
+        // Write
+        elementsToMeasure.forEach((element) => {
+            element.render();
+            const restore = transformsToRestore.get(element);
+            if (restore) {
+                restore.forEach(([key, value]) => {
+                    element.getValue(key)?.set(value);
+                });
+            }
+        });
+        // Read
+        resolversToMeasure.forEach((resolver) => resolver.measureEndState());
+        // Write
+        resolversToMeasure.forEach((resolver) => {
+            if (resolver.suspendedScrollY !== undefined) {
+                window.scrollTo(0, resolver.suspendedScrollY);
+            }
+        });
     }
-    play() {
-        if (!this.resolver.isScheduled) {
-            this.resolver.resume();
-        }
-        if (!this._resolved) {
-            this.pendingPlayState = "running";
-            return;
-        }
-        if (this.isStopped)
-            return;
-        const { driver = frameloopDriver, onPlay, startTime } = this.options;
-        if (!this.driver) {
-            this.driver = driver((timestamp) => this.tick(timestamp));
-        }
-        onPlay && onPlay();
-        const now = this.driver.now();
-        if (this.holdTime !== null) {
-            this.startTime = now - this.holdTime;
-        }
-        else if (!this.startTime) {
-            this.startTime = startTime ?? this.calcStartTime();
-        }
-        else if (this.state === "finished") {
-            this.startTime = now;
-        }
-        if (this.state === "finished") {
-            this.updateFinishedPromise();
+    anyNeedsMeasurement = false;
+    isScheduled = false;
+    toResolve.forEach((resolver) => resolver.complete(isForced));
+    toResolve.clear();
+}
+function readAllKeyframes() {
+    toResolve.forEach((resolver) => {
+        resolver.readKeyframes();
+        if (resolver.needsMeasurement) {
+            anyNeedsMeasurement = true;
         }
-        this.cancelTime = this.startTime;
-        this.holdTime = null;
+    });
+}
+function flushKeyframeResolvers() {
+    isForced = true;
+    readAllKeyframes();
+    measureAllKeyframes();
+    isForced = false;
+}
+class KeyframeResolver {
+    constructor(unresolvedKeyframes, onComplete, name, motionValue, element, isAsync = false) {
         /**
-         * Set playState to running only after we've used it in
-         * the previous logic.
+         * Track whether this resolver has completed. Once complete, it never
+         * needs to attempt keyframe resolution again.
          */
-        this.state = "running";
-        this.driver.start();
+        this.isComplete = false;
+        /**
+         * Track whether this resolver is async. If it is, it'll be added to the
+         * resolver queue and flushed in the next frame. Resolvers that aren't going
+         * to trigger read/write thrashing don't need to be async.
+         */
+        this.isAsync = false;
+        /**
+         * Track whether this resolver needs to perform a measurement
+         * to resolve its keyframes.
+         */
+        this.needsMeasurement = false;
+        /**
+         * Track whether this resolver is currently scheduled to resolve
+         * to allow it to be cancelled and resumed externally.
+         */
+        this.isScheduled = false;
+        this.unresolvedKeyframes = [...unresolvedKeyframes];
+        this.onComplete = onComplete;
+        this.name = name;
+        this.motionValue = motionValue;
+        this.element = element;
+        this.isAsync = isAsync;
     }
-    pause() {
-        if (!this._resolved) {
-            this.pendingPlayState = "paused";
-            return;
+    scheduleResolve() {
+        this.isScheduled = true;
+        if (this.isAsync) {
+            toResolve.add(this);
+            if (!isScheduled) {
+                isScheduled = true;
+                frame.read(readAllKeyframes);
+                frame.resolveKeyframes(measureAllKeyframes);
+            }
+        }
+        else {
+            this.readKeyframes();
+            this.complete();
         }
-        this.state = "paused";
-        this.holdTime = this.currentTime ?? 0;
     }
-    complete() {
-        if (this.state !== "running") {
-            this.play();
+    readKeyframes() {
+        const { unresolvedKeyframes, name, element, motionValue } = this;
+        // If initial keyframe is null we need to read it from the DOM
+        if (unresolvedKeyframes[0] === null) {
+            const currentValue = motionValue?.get();
+            // TODO: This doesn't work if the final keyframe is a wildcard
+            const finalKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
+            if (currentValue !== undefined) {
+                unresolvedKeyframes[0] = currentValue;
+            }
+            else if (element && name) {
+                const valueAsRead = element.readValue(name, finalKeyframe);
+                if (valueAsRead !== undefined && valueAsRead !== null) {
+                    unresolvedKeyframes[0] = valueAsRead;
+                }
+            }
+            if (unresolvedKeyframes[0] === undefined) {
+                unresolvedKeyframes[0] = finalKeyframe;
+            }
+            if (motionValue && currentValue === undefined) {
+                motionValue.set(unresolvedKeyframes[0]);
+            }
         }
-        this.pendingPlayState = this.state = "finished";
-        this.holdTime = null;
+        fillWildcards(unresolvedKeyframes);
     }
-    finish() {
-        this.teardown();
-        this.state = "finished";
-        const { onComplete } = this.options;
-        onComplete && onComplete();
+    setFinalKeyframe() { }
+    measureInitialState() { }
+    renderEndStyles() { }
+    measureEndState() { }
+    complete(isForced = false) {
+        this.isComplete = true;
+        this.onComplete(this.unresolvedKeyframes, this.finalKeyframe, isForced);
+        toResolve.delete(this);
     }
     cancel() {
-        if (this.cancelTime !== null) {
-            this.tick(this.cancelTime);
+        if (!this.isComplete) {
+            this.isScheduled = false;
+            toResolve.delete(this);
         }
-        this.teardown();
-        this.updateFinishedPromise();
-    }
-    teardown() {
-        this.state = "idle";
-        this.stopDriver();
-        this.resolveFinishedPromise();
-        this.updateFinishedPromise();
-        this.startTime = this.cancelTime = null;
-        this.resolver.cancel();
     }
-    stopDriver() {
-        if (!this.driver)
-            return;
-        this.driver.stop();
-        this.driver = undefined;
-    }
-    sample(time) {
-        this.startTime = 0;
-        return this.tick(time, true);
-    }
-    get finished() {
-        return this.currentFinishedPromise;
+    resume() {
+        if (!this.isComplete)
+            this.scheduleResolve();
     }
 }
 
+const isCSSVar = (name) => name.startsWith("--");
+
+function setStyle(element, name, value) {
+    isCSSVar(name)
+        ? element.style.setProperty(name, value)
+        : (element.style[name] = value);
+}
+
+/*#__NO_SIDE_EFFECTS__*/
+function memo(callback) {
+    let result;
+    return () => {
+        if (result === undefined)
+            result = callback();
+        return result;
+    };
+}
+
+const supportsScrollTimeline = /* @__PURE__ */ memo(() => window.ScrollTimeline !== undefined);
+
 /**
- * A list of values that can be hardware-accelerated.
+ * Add the ability for test suites to manually set support flags
+ * to better test more environments.
  */
-const acceleratedValues = new Set([
-    "opacity",
-    "clipPath",
-    "filter",
-    "transform",
-    // TODO: Can be accelerated but currently disabled until https://issues.chromium.org/issues/41491098 is resolved
-    // or until we implement support for linear() easing.
-    // "background-color"
-]);
+const supportsFlags = {};
 
-const supportsWaapi = /*@__PURE__*/ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
+function memoSupports(callback, supportsFlag) {
+    const memoized = memo(callback);
+    return () => supportsFlags[supportsFlag] ?? memoized();
+}
+
+const supportsLinearEasing = /*@__PURE__*/ memoSupports(() => {
+    try {
+        document
+            .createElement("div")
+            .animate({ opacity: 0 }, { easing: "linear(0, 1)" });
+    }
+    catch (e) {
+        return false;
+    }
+    return true;
+}, "linearEasing");
 
 const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
 
@@ -8253,8 +7697,10 @@ function mapEasingToNativeEasing(easing, duration) {
     if (!easing) {
         return undefined;
     }
-    else if (typeof easing === "function" && supportsLinearEasing()) {
-        return generateLinearEasing(easing, duration);
+    else if (typeof easing === "function") {
+        return supportsLinearEasing()
+            ? generateLinearEasing(easing, duration)
+            : "ease-out";
     }
     else if (isBezierDefinition(easing)) {
         return cubicBezierAsString(easing);
@@ -8268,7 +7714,7 @@ function mapEasingToNativeEasing(easing, duration) {
     }
 }
 
-function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease = "easeInOut", times, } = {}, pseudoElement = undefined) {
+function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease = "easeOut", times, } = {}, pseudoElement = undefined) {
     const keyframeOptions = {
         [valueName]: keyframes,
     };
@@ -8280,473 +7726,517 @@ function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duratio
      */
     if (Array.isArray(easing))
         keyframeOptions.easing = easing;
-    const animation = element.animate(keyframeOptions, {
+    const options = {
         delay,
         duration,
         easing: !Array.isArray(easing) ? easing : "linear",
         fill: "both",
         iterations: repeat + 1,
         direction: repeatType === "reverse" ? "alternate" : "normal",
-        pseudoElement,
-    });
+    };
+    if (pseudoElement)
+        options.pseudoElement = pseudoElement;
+    const animation = element.animate(keyframeOptions, options);
     return animation;
 }
 
-function attachTimeline(animation, timeline) {
-    animation.timeline = timeline;
-    animation.onfinish = null;
+function isGenerator(type) {
+    return typeof type === "function" && "applyToOptions" in type;
 }
 
-function isWaapiSupportedEasing(easing) {
-    return Boolean((typeof easing === "function" && supportsLinearEasing()) ||
-        !easing ||
-        (typeof easing === "string" &&
-            (easing in supportedWaapiEasing || supportsLinearEasing())) ||
-        isBezierDefinition(easing) ||
-        (Array.isArray(easing) && easing.every(isWaapiSupportedEasing)));
+function applyGeneratorOptions({ type, ...options }) {
+    if (isGenerator(type) && supportsLinearEasing()) {
+        return type.applyToOptions(options);
+    }
+    else {
+        options.duration ?? (options.duration = 300);
+        options.ease ?? (options.ease = "easeOut");
+    }
+    return options;
 }
 
 /**
- * 10ms is chosen here as it strikes a balance between smooth
- * results (more than one keyframe per frame at 60fps) and
- * keyframe quantity.
- */
-const sampleDelta = 10; //ms
-/**
- * Implement a practical max duration for keyframe generation
- * to prevent infinite loops
- */
-const maxDuration = 20000;
-/**
- * Check if an animation can run natively via WAAPI or requires pregenerated keyframes.
- * WAAPI doesn't support spring or function easings so we run these as JS animation before
- * handing off.
+ * NativeAnimation implements AnimationPlaybackControls for the browser's Web Animations API.
  */
-function requiresPregeneratedKeyframes(options) {
-    return (isGenerator(options.type) ||
-        options.type === "spring" ||
-        !isWaapiSupportedEasing(options.ease));
-}
-function pregenerateKeyframes(keyframes, options) {
-    /**
-     * Create a main-thread animation to pregenerate keyframes.
-     * We sample this at regular intervals to generate keyframes that we then
-     * linearly interpolate between.
-     */
-    const sampleAnimation = new MainThreadAnimation({
-        ...options,
-        keyframes,
-        repeat: 0,
-        delay: 0,
-        isGenerator: true,
-    });
-    let state = { done: false, value: keyframes[0] };
-    const pregeneratedKeyframes = [];
-    /**
-     * Bail after 20 seconds of pre-generated keyframes as it's likely
-     * we're heading for an infinite loop.
-     */
-    let t = 0;
-    while (!state.done && t < maxDuration) {
-        state = sampleAnimation.sample(t);
-        pregeneratedKeyframes.push(state.value);
-        t += sampleDelta;
-    }
-    return {
-        times: undefined,
-        keyframes: pregeneratedKeyframes,
-        duration: t - sampleDelta,
-        ease: "linear",
-    };
-}
-const unsupportedEasingFunctions = {
-    anticipate,
-    backInOut,
-    circInOut,
-};
-function isUnsupportedEase(key) {
-    return key in unsupportedEasingFunctions;
-}
-class AcceleratedAnimation extends BaseAnimation {
+class NativeAnimation extends WithPromise {
     constructor(options) {
-        super(options);
-        const { name, motionValue, element, keyframes } = this.options;
-        this.resolver = new DOMKeyframesResolver(keyframes, (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe), name, motionValue, element);
-        this.resolver.scheduleResolve();
-    }
-    initPlayback(keyframes, finalKeyframe) {
-        let { duration = 300, times, ease, type, motionValue, name, startTime, } = this.options;
+        super();
+        this.finishedTime = null;
+        this.isStopped = false;
+        if (!options)
+            return;
+        const { element, name, keyframes, pseudoElement, allowFlatten = false, finalKeyframe, onComplete, } = options;
+        this.isPseudoElement = Boolean(pseudoElement);
+        this.allowFlatten = allowFlatten;
+        this.options = options;
+        invariant(typeof options.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "motion"?`);
+        const transition = applyGeneratorOptions(options);
+        this.animation = startWaapiAnimation(element, name, keyframes, transition, pseudoElement);
+        if (transition.autoplay === false) {
+            this.animation.pause();
+        }
+        this.animation.onfinish = () => {
+            this.finishedTime = this.time;
+            if (!pseudoElement) {
+                const keyframe = getFinalKeyframe(keyframes, this.options, finalKeyframe, this.speed);
+                if (this.updateMotionValue) {
+                    this.updateMotionValue(keyframe);
+                }
+                else {
+                    /**
+                     * If we can, we want to commit the final style as set by the user,
+                     * rather than the computed keyframe value supplied by the animation.
+                     */
+                    setStyle(element, name, keyframe);
+                }
+                this.animation.cancel();
+            }
+            onComplete?.();
+            this.notifyFinished();
+        };
         /**
-         * If element has since been unmounted, return false to indicate
-         * the animation failed to initialised.
+         * TODO: In a breaking change, we should replace this with `.notifyCancel()`
          */
-        if (!motionValue.owner || !motionValue.owner.current) {
-            return false;
+        this.animation.oncancel = () => this.notifyFinished();
+    }
+    play() {
+        if (this.isStopped)
+            return;
+        this.animation.play();
+        if (this.state === "finished") {
+            this.updateFinished();
         }
-        /**
-         * If the user has provided an easing function name that isn't supported
-         * by WAAPI (like "anticipate"), we need to provide the corressponding
-         * function. This will later get converted to a linear() easing function.
-         */
-        if (typeof ease === "string" &&
-            supportsLinearEasing() &&
-            isUnsupportedEase(ease)) {
-            ease = unsupportedEasingFunctions[ease];
+    }
+    pause() {
+        this.animation.pause();
+    }
+    complete() {
+        this.animation.finish?.();
+    }
+    cancel() {
+        try {
+            this.animation.cancel();
         }
-        /**
-         * If this animation needs pre-generated keyframes then generate.
-         */
-        if (requiresPregeneratedKeyframes(this.options)) {
-            const { onComplete, onUpdate, motionValue, element, ...options } = this.options;
-            const pregeneratedAnimation = pregenerateKeyframes(keyframes, options);
-            keyframes = pregeneratedAnimation.keyframes;
-            // If this is a very short animation, ensure we have
-            // at least two keyframes to animate between as older browsers
-            // can't animate between a single keyframe.
-            if (keyframes.length === 1) {
-                keyframes[1] = keyframes[0];
-            }
-            duration = pregeneratedAnimation.duration;
-            times = pregeneratedAnimation.times;
-            ease = pregeneratedAnimation.ease;
-            type = "keyframes";
-        }
-        const animation = startWaapiAnimation(motionValue.owner.current, name, keyframes, { ...this.options, duration, times, ease });
-        // Override the browser calculated startTime with one synchronised to other JS
-        // and WAAPI animations starting this event loop.
-        animation.startTime = startTime ?? this.calcStartTime();
-        if (this.pendingTimeline) {
-            attachTimeline(animation, this.pendingTimeline);
-            this.pendingTimeline = undefined;
+        catch (e) { }
+    }
+    stop() {
+        if (this.isStopped)
+            return;
+        this.isStopped = true;
+        const { state } = this;
+        if (state === "idle" || state === "finished") {
+            return;
+        }
+        if (this.updateMotionValue) {
+            this.updateMotionValue();
         }
         else {
-            /**
-             * Prefer the `onfinish` prop as it's more widely supported than
-             * the `finished` promise.
-             *
-             * Here, we synchronously set the provided MotionValue to the end
-             * keyframe. If we didn't, when the WAAPI animation is finished it would
-             * be removed from the element which would then revert to its old styles.
-             */
-            animation.onfinish = () => {
-                const { onComplete } = this.options;
-                motionValue.set(getFinalKeyframe(keyframes, this.options, finalKeyframe));
-                onComplete && onComplete();
-                this.cancel();
-                this.resolveFinishedPromise();
-            };
+            this.commitStyles();
+        }
+        if (!this.isPseudoElement)
+            this.cancel();
+    }
+    /**
+     * WAAPI doesn't natively have any interruption capabilities.
+     *
+     * In this method, we commit styles back to the DOM before cancelling
+     * the animation.
+     *
+     * This is designed to be overridden by NativeAnimationExtended, which
+     * will create a renderless JS animation and sample it twice to calculate
+     * its current value, "previous" value, and therefore allow
+     * Motion to also correctly calculate velocity for any subsequent animation
+     * while deferring the commit until the next animation frame.
+     */
+    commitStyles() {
+        if (!this.isPseudoElement) {
+            this.animation.commitStyles?.();
         }
-        return {
-            animation,
-            duration,
-            times,
-            type,
-            ease,
-            keyframes: keyframes,
-        };
     }
     get duration() {
-        const { resolved } = this;
-        if (!resolved)
-            return 0;
-        const { duration } = resolved;
-        return millisecondsToSeconds(duration);
+        const duration = this.animation.effect?.getComputedTiming?.().duration || 0;
+        return millisecondsToSeconds(Number(duration));
     }
     get time() {
-        const { resolved } = this;
-        if (!resolved)
-            return 0;
-        const { animation } = resolved;
-        return millisecondsToSeconds(animation.currentTime || 0);
+        return millisecondsToSeconds(Number(this.animation.currentTime) || 0);
     }
     set time(newTime) {
-        const { resolved } = this;
-        if (!resolved)
-            return;
-        const { animation } = resolved;
-        animation.currentTime = secondsToMilliseconds(newTime);
+        this.finishedTime = null;
+        this.animation.currentTime = secondsToMilliseconds(newTime);
     }
+    /**
+     * The playback speed of the animation.
+     * 1 = normal speed, 2 = double speed, 0.5 = half speed.
+     */
     get speed() {
-        const { resolved } = this;
-        if (!resolved)
-            return 1;
-        const { animation } = resolved;
-        return animation.playbackRate;
-    }
-    get finished() {
-        return this.resolved.animation.finished;
+        return this.animation.playbackRate;
     }
     set speed(newSpeed) {
-        const { resolved } = this;
-        if (!resolved)
-            return;
-        const { animation } = resolved;
-        animation.playbackRate = newSpeed;
+        // Allow backwards playback after finishing
+        if (newSpeed < 0)
+            this.finishedTime = null;
+        this.animation.playbackRate = newSpeed;
     }
     get state() {
-        const { resolved } = this;
-        if (!resolved)
-            return "idle";
-        const { animation } = resolved;
-        return animation.playState;
+        return this.finishedTime !== null
+            ? "finished"
+            : this.animation.playState;
     }
     get startTime() {
-        const { resolved } = this;
-        if (!resolved)
-            return null;
-        const { animation } = resolved;
-        // Coerce to number as TypeScript incorrectly types this
-        // as CSSNumberish
-        return animation.startTime;
+        return Number(this.animation.startTime);
+    }
+    set startTime(newStartTime) {
+        this.animation.startTime = newStartTime;
     }
     /**
-     * Replace the default DocumentTimeline with another AnimationTimeline.
-     * Currently used for scroll animations.
+     * Attaches a timeline to the animation, for instance the `ScrollTimeline`.
      */
-    attachTimeline(timeline) {
-        if (!this._resolved) {
-            this.pendingTimeline = timeline;
+    attachTimeline({ timeline, observe }) {
+        if (this.allowFlatten) {
+            this.animation.effect?.updateTiming({ easing: "linear" });
         }
-        else {
-            const { resolved } = this;
-            if (!resolved)
-                return noop;
-            const { animation } = resolved;
-            attachTimeline(animation, timeline);
+        this.animation.onfinish = null;
+        if (timeline && supportsScrollTimeline()) {
+            this.animation.timeline = timeline;
+            return noop;
         }
-        return noop;
-    }
-    play() {
-        if (this.isStopped)
-            return;
-        const { resolved } = this;
-        if (!resolved)
-            return;
-        const { animation } = resolved;
-        if (animation.playState === "finished") {
-            this.updateFinishedPromise();
+        else {
+            return observe(this);
         }
-        animation.play();
     }
-    pause() {
-        const { resolved } = this;
-        if (!resolved)
-            return;
-        const { animation } = resolved;
-        animation.pause();
+}
+
+const unsupportedEasingFunctions = {
+    anticipate,
+    backInOut,
+    circInOut,
+};
+function isUnsupportedEase(key) {
+    return key in unsupportedEasingFunctions;
+}
+function replaceStringEasing(transition) {
+    if (typeof transition.ease === "string" &&
+        isUnsupportedEase(transition.ease)) {
+        transition.ease = unsupportedEasingFunctions[transition.ease];
     }
-    stop() {
-        this.resolver.cancel();
-        this.isStopped = true;
-        if (this.state === "idle")
-            return;
-        this.resolveFinishedPromise();
-        this.updateFinishedPromise();
-        const { resolved } = this;
-        if (!resolved)
-            return;
-        const { animation, keyframes, duration, type, ease, times } = resolved;
-        if (animation.playState === "idle" ||
-            animation.playState === "finished") {
-            return;
-        }
+}
+
+/**
+ * 10ms is chosen here as it strikes a balance between smooth
+ * results (more than one keyframe per frame at 60fps) and
+ * keyframe quantity.
+ */
+const sampleDelta = 10; //ms
+class NativeAnimationExtended extends NativeAnimation {
+    constructor(options) {
         /**
-         * WAAPI doesn't natively have any interruption capabilities.
+         * The base NativeAnimation function only supports a subset
+         * of Motion easings, and WAAPI also only supports some
+         * easing functions via string/cubic-bezier definitions.
          *
-         * Rather than read commited styles back out of the DOM, we can
-         * create a renderless JS animation and sample it twice to calculate
-         * its current value, "previous" value, and therefore allow
-         * Motion to calculate velocity for any subsequent animation.
+         * This function replaces those unsupported easing functions
+         * with a JS easing function. This will later get compiled
+         * to a linear() easing function.
          */
-        if (this.time) {
-            const { motionValue, onUpdate, onComplete, element, ...options } = this.options;
-            const sampleAnimation = new MainThreadAnimation({
-                ...options,
-                keyframes,
-                duration,
-                type,
-                ease,
-                times,
-                isGenerator: true,
-            });
-            const sampleTime = secondsToMilliseconds(this.time);
-            motionValue.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta);
+        replaceStringEasing(options);
+        /**
+         * Ensure we replace the transition type with a generator function
+         * before passing to WAAPI.
+         *
+         * TODO: Does this have a better home? It could be shared with
+         * JSAnimation.
+         */
+        replaceTransitionType(options);
+        super(options);
+        if (options.startTime) {
+            this.startTime = options.startTime;
         }
-        const { onStop } = this.options;
-        onStop && onStop();
-        this.cancel();
+        this.options = options;
     }
-    complete() {
-        const { resolved } = this;
-        if (!resolved)
+    /**
+     * WAAPI doesn't natively have any interruption capabilities.
+     *
+     * Rather than read commited styles back out of the DOM, we can
+     * create a renderless JS animation and sample it twice to calculate
+     * its current value, "previous" value, and therefore allow
+     * Motion to calculate velocity for any subsequent animation.
+     */
+    updateMotionValue(value) {
+        const { motionValue, onUpdate, onComplete, element, ...options } = this.options;
+        if (!motionValue)
             return;
-        resolved.animation.finish();
-    }
-    cancel() {
-        const { resolved } = this;
-        if (!resolved)
+        if (value !== undefined) {
+            motionValue.set(value);
             return;
-        resolved.animation.cancel();
-    }
-    static supports(options) {
-        const { motionValue, name, repeatDelay, repeatType, damping, type } = options;
-        if (!motionValue ||
-            !motionValue.owner ||
-            !(motionValue.owner.current instanceof HTMLElement)) {
-            return false;
         }
-        const { onUpdate, transformTemplate } = motionValue.owner.getProps();
-        return (supportsWaapi() &&
-            name &&
-            acceleratedValues.has(name) &&
-            (name !== "transform" || !transformTemplate) &&
-            /**
-             * If we're outputting values to onUpdate then we can't use WAAPI as there's
-             * no way to read the value from WAAPI every frame.
-             */
-            !onUpdate &&
-            !repeatDelay &&
-            repeatType !== "mirror" &&
-            damping !== 0 &&
-            type !== "inertia");
+        const sampleAnimation = new JSAnimation({
+            ...options,
+            autoplay: false,
+        });
+        const sampleTime = secondsToMilliseconds(this.finishedTime ?? this.time);
+        motionValue.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta);
+        sampleAnimation.stop();
     }
 }
 
-const underDampedSpring = {
-    type: "spring",
-    stiffness: 500,
-    damping: 25,
-    restSpeed: 10,
-};
-const criticallyDampedSpring = (target) => ({
-    type: "spring",
-    stiffness: 550,
-    damping: target === 0 ? 2 * Math.sqrt(550) : 30,
-    restSpeed: 10,
-});
-const keyframesTransition = {
-    type: "keyframes",
-    duration: 0.8,
-};
 /**
- * Default easing curve is a slightly shallower version of
- * the default browser easing curve.
+ * Check if a value is animatable. Examples:
+ *
+ * ✅: 100, "100px", "#fff"
+ * ❌: "block", "url(2.jpg)"
+ * @param value
+ *
+ * @internal
  */
-const ease = {
-    type: "keyframes",
-    ease: [0.25, 0.1, 0.35, 1],
-    duration: 0.3,
-};
-const getDefaultTransition = (valueKey, { keyframes }) => {
-    if (keyframes.length > 2) {
-        return keyframesTransition;
-    }
-    else if (transformProps.has(valueKey)) {
-        return valueKey.startsWith("scale")
-            ? criticallyDampedSpring(keyframes[1])
-            : underDampedSpring;
+const isAnimatable = (value, name) => {
+    // If the list of keys tat might be non-animatable grows, replace with Set
+    if (name === "zIndex")
+        return false;
+    // If it's a number or a keyframes array, we can animate it. We might at some point
+    // need to do a deep isAnimatable check of keyframes, or let Popmotion handle this,
+    // but for now lets leave it like this for performance reasons
+    if (typeof value === "number" || Array.isArray(value))
+        return true;
+    if (typeof value === "string" && // It's animatable if we have a string
+        (complex.test(value) || value === "0") && // And it contains numbers and/or colors
+        !value.startsWith("url(") // Unless it starts with "url("
+    ) {
+        return true;
     }
-    return ease;
+    return false;
 };
 
+function hasKeyframesChanged(keyframes) {
+    const current = keyframes[0];
+    if (keyframes.length === 1)
+        return true;
+    for (let i = 0; i < keyframes.length; i++) {
+        if (keyframes[i] !== current)
+            return true;
+    }
+}
+function canAnimate(keyframes, name, type, velocity) {
+    /**
+     * Check if we're able to animate between the start and end keyframes,
+     * and throw a warning if we're attempting to animate between one that's
+     * animatable and another that isn't.
+     */
+    const originKeyframe = keyframes[0];
+    if (originKeyframe === null)
+        return false;
+    /**
+     * These aren't traditionally animatable but we do support them.
+     * In future we could look into making this more generic or replacing
+     * this function with mix() === mixImmediate
+     */
+    if (name === "display" || name === "visibility")
+        return true;
+    const targetKeyframe = keyframes[keyframes.length - 1];
+    const isOriginAnimatable = isAnimatable(originKeyframe, name);
+    const isTargetAnimatable = isAnimatable(targetKeyframe, name);
+    warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${name} from "${originKeyframe}" to "${targetKeyframe}". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \`style\` property.`);
+    // Always skip if any of these are true
+    if (!isOriginAnimatable || !isTargetAnimatable) {
+        return false;
+    }
+    return (hasKeyframesChanged(keyframes) ||
+        ((type === "spring" || isGenerator(type)) && velocity));
+}
+
 /**
- * Decide whether a transition is defined on a given Transition.
- * This filters out orchestration options and returns true
- * if any options are left.
+ * A list of values that can be hardware-accelerated.
  */
-function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {
-    return !!Object.keys(transition).length;
-}
-
-function getValueTransition(transition, key) {
-    return (transition?.[key] ??
-        transition?.["default"] ??
-        transition);
+const acceleratedValues = new Set([
+    "opacity",
+    "clipPath",
+    "filter",
+    "transform",
+    // TODO: Can be accelerated but currently disabled until https://issues.chromium.org/issues/41491098 is resolved
+    // or until we implement support for linear() easing.
+    // "background-color"
+]);
+const supportsWaapi = /*@__PURE__*/ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
+function supportsBrowserAnimation(options) {
+    const { motionValue, name, repeatDelay, repeatType, damping, type } = options;
+    if (!motionValue ||
+        !motionValue.owner ||
+        !(motionValue.owner.current instanceof HTMLElement)) {
+        return false;
+    }
+    const { onUpdate, transformTemplate } = motionValue.owner.getProps();
+    return (supportsWaapi() &&
+        name &&
+        acceleratedValues.has(name) &&
+        (name !== "transform" || !transformTemplate) &&
+        /**
+         * If we're outputting values to onUpdate then we can't use WAAPI as there's
+         * no way to read the value from WAAPI every frame.
+         */
+        !onUpdate &&
+        !repeatDelay &&
+        repeatType !== "mirror" &&
+        damping !== 0 &&
+        type !== "inertia");
 }
 
-const supportsScrollTimeline = /* @__PURE__ */ memo(() => window.ScrollTimeline !== undefined);
-
-class GroupAnimation {
-    constructor(animations) {
-        // Bound to accomodate common `return animation.stop` pattern
-        this.stop = () => this.runAll("stop");
-        this.animations = animations.filter(Boolean);
+/**
+ * Maximum time allowed between an animation being created and it being
+ * resolved for us to use the latter as the start time.
+ *
+ * This is to ensure that while we prefer to "start" an animation as soon
+ * as it's triggered, we also want to avoid a visual jump if there's a big delay
+ * between these two moments.
+ */
+const MAX_RESOLVE_DELAY = 40;
+class AsyncMotionValueAnimation extends WithPromise {
+    constructor({ autoplay = true, delay = 0, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop", keyframes, name, motionValue, element, ...options }) {
+        super();
+        /**
+         * Bound to support return animation.stop pattern
+         */
+        this.stop = () => {
+            if (this._animation) {
+                this._animation.stop();
+                this.stopTimeline?.();
+            }
+            else {
+                this.keyframeResolver?.cancel();
+            }
+        };
+        this.createdAt = time.now();
+        const optionsWithDefaults = {
+            autoplay,
+            delay,
+            type,
+            repeat,
+            repeatDelay,
+            repeatType,
+            name,
+            motionValue,
+            element,
+            ...options,
+        };
+        const KeyframeResolver$1 = element?.KeyframeResolver || KeyframeResolver;
+        this.keyframeResolver = new KeyframeResolver$1(keyframes, (resolvedKeyframes, finalKeyframe, forced) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe, optionsWithDefaults, !forced), name, motionValue, element);
+        this.keyframeResolver?.scheduleResolve();
+    }
+    onKeyframesResolved(keyframes, finalKeyframe, options, sync) {
+        this.keyframeResolver = undefined;
+        const { name, type, velocity, delay, isHandoff, onUpdate } = options;
+        this.resolvedAt = time.now();
+        /**
+         * If we can't animate this value with the resolved keyframes
+         * then we should complete it immediately.
+         */
+        if (!canAnimate(keyframes, name, type, velocity)) {
+            if (MotionGlobalConfig.instantAnimations || !delay) {
+                onUpdate?.(getFinalKeyframe(keyframes, options, finalKeyframe));
+            }
+            keyframes[0] = keyframes[keyframes.length - 1];
+            options.duration = 0;
+            options.repeat = 0;
+        }
+        /**
+         * Resolve startTime for the animation.
+         *
+         * This method uses the createdAt and resolvedAt to calculate the
+         * animation startTime. *Ideally*, we would use the createdAt time as t=0
+         * as the following frame would then be the first frame of the animation in
+         * progress, which would feel snappier.
+         *
+         * However, if there's a delay (main thread work) between the creation of
+         * the animation and the first commited frame, we prefer to use resolvedAt
+         * to avoid a sudden jump into the animation.
+         */
+        const startTime = sync
+            ? !this.resolvedAt
+                ? this.createdAt
+                : this.resolvedAt - this.createdAt > MAX_RESOLVE_DELAY
+                    ? this.resolvedAt
+                    : this.createdAt
+            : undefined;
+        const resolvedOptions = {
+            startTime,
+            finalKeyframe,
+            ...options,
+            keyframes,
+        };
+        /**
+         * Animate via WAAPI if possible. If this is a handoff animation, the optimised animation will be running via
+         * WAAPI. Therefore, this animation must be JS to ensure it runs "under" the
+         * optimised animation.
+         */
+        const animation = !isHandoff && supportsBrowserAnimation(resolvedOptions)
+            ? new NativeAnimationExtended({
+                ...resolvedOptions,
+                element: resolvedOptions.motionValue.owner.current,
+            })
+            : new JSAnimation(resolvedOptions);
+        animation.finished.then(() => this.notifyFinished()).catch(noop);
+        if (this.pendingTimeline) {
+            this.stopTimeline = animation.attachTimeline(this.pendingTimeline);
+            this.pendingTimeline = undefined;
+        }
+        this._animation = animation;
     }
     get finished() {
-        return Promise.all(this.animations.map((animation) => animation.finished));
+        if (!this._animation) {
+            return this._finished;
+        }
+        else {
+            return this.animation.finished;
+        }
     }
-    /**
-     * TODO: Filter out cancelled or stopped animations before returning
-     */
-    getAll(propName) {
-        return this.animations[0][propName];
+    then(onResolve, _onReject) {
+        return this.finished.finally(onResolve).then(() => { });
     }
-    setAll(propName, newValue) {
-        for (let i = 0; i < this.animations.length; i++) {
-            this.animations[i][propName] = newValue;
+    get animation() {
+        if (!this._animation) {
+            flushKeyframeResolvers();
         }
+        return this._animation;
     }
-    attachTimeline(timeline, fallback) {
-        const subscriptions = this.animations.map((animation) => {
-            if (supportsScrollTimeline() && animation.attachTimeline) {
-                return animation.attachTimeline(timeline);
-            }
-            else if (typeof fallback === "function") {
-                return fallback(animation);
-            }
-        });
-        return () => {
-            subscriptions.forEach((cancel, i) => {
-                cancel && cancel();
-                this.animations[i].stop();
-            });
-        };
+    get duration() {
+        return this.animation.duration;
     }
     get time() {
-        return this.getAll("time");
+        return this.animation.time;
     }
-    set time(time) {
-        this.setAll("time", time);
+    set time(newTime) {
+        this.animation.time = newTime;
     }
     get speed() {
-        return this.getAll("speed");
+        return this.animation.speed;
     }
-    set speed(speed) {
-        this.setAll("speed", speed);
+    get state() {
+        return this.animation.state;
+    }
+    set speed(newSpeed) {
+        this.animation.speed = newSpeed;
     }
     get startTime() {
-        return this.getAll("startTime");
+        return this.animation.startTime;
     }
-    get duration() {
-        let max = 0;
-        for (let i = 0; i < this.animations.length; i++) {
-            max = Math.max(max, this.animations[i].duration);
+    attachTimeline(timeline) {
+        if (this._animation) {
+            this.stopTimeline = this.animation.attachTimeline(timeline);
         }
-        return max;
-    }
-    runAll(methodName) {
-        this.animations.forEach((controls) => controls[methodName]());
-    }
-    flatten() {
-        this.runAll("flatten");
+        else {
+            this.pendingTimeline = timeline;
+        }
+        return () => this.stop();
     }
     play() {
-        this.runAll("play");
+        this.animation.play();
     }
     pause() {
-        this.runAll("pause");
-    }
-    cancel() {
-        this.runAll("cancel");
+        this.animation.pause();
     }
     complete() {
-        this.runAll("complete");
+        this.animation.complete();
     }
-}
-
-class GroupAnimationWithThen extends GroupAnimation {
-    then(onResolve, _onReject) {
-        return this.finished.finally(onResolve).then(() => { });
+    cancel() {
+        this.animation.cancel();
     }
 }
 
@@ -8764,7 +8254,7 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
      */
     let { elapsed = 0 } = transition;
     elapsed = elapsed - secondsToMilliseconds(delay);
-    let options = {
+    const options = {
         keyframes: Array.isArray(target) ? target : [null, target],
         ease: "easeOut",
         velocity: value.getVelocity(),
@@ -8787,22 +8277,18 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
      * unique transition settings for this value.
      */
     if (!isTransitionDefined(valueTransition)) {
-        options = {
-            ...options,
-            ...getDefaultTransition(name, options),
-        };
+        Object.assign(options, getDefaultTransition(name, options));
     }
     /**
      * Both WAAPI and our internal animation functions use durations
      * as defined by milliseconds, while our external API defines them
      * as seconds.
      */
-    if (options.duration) {
-        options.duration = secondsToMilliseconds(options.duration);
-    }
-    if (options.repeatDelay) {
-        options.repeatDelay = secondsToMilliseconds(options.repeatDelay);
-    }
+    options.duration && (options.duration = secondsToMilliseconds(options.duration));
+    options.repeatDelay && (options.repeatDelay = secondsToMilliseconds(options.repeatDelay));
+    /**
+     * Support deprecated way to set initial value. Prefer keyframe syntax.
+     */
     if (options.from !== undefined) {
         options.keyframes[0] = options.from;
     }
@@ -8814,6 +8300,12 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
             shouldSkip = true;
         }
     }
+    if (MotionGlobalConfig.instantAnimations ||
+        MotionGlobalConfig.skipAnimations) {
+        shouldSkip = true;
+        options.duration = 0;
+        options.delay = 0;
+    }
     /**
      * If the transition type or easing has been explicitly set by the user
      * then we don't want to allow flattening the animation.
@@ -8825,30 +8317,28 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
      * this early check prevents the need to create an animation at all.
      */
     if (shouldSkip && !isHandoff && value.get() !== undefined) {
-        const finalKeyframe = getFinalKeyframe(options.keyframes, valueTransition);
+        const finalKeyframe = getFinalKeyframe$1(options.keyframes, valueTransition);
         if (finalKeyframe !== undefined) {
             frame.update(() => {
                 options.onUpdate(finalKeyframe);
                 options.onComplete();
             });
-            // We still want to return some animation controls here rather
-            // than returning undefined
-            return new GroupAnimationWithThen([]);
+            return;
         }
     }
-    /**
-     * Animate via WAAPI if possible. If this is a handoff animation, the optimised animation will be running via
-     * WAAPI. Therefore, this animation must be JS to ensure it runs "under" the
-     * optimised animation.
-     */
-    if (!isHandoff && AcceleratedAnimation.supports(options)) {
-        return new AcceleratedAnimation(options);
-    }
-    else {
-        return new MainThreadAnimation(options);
-    }
+    return new AsyncMotionValueAnimation(options);
 };
 
+const positionalKeys = new Set([
+    "width",
+    "height",
+    "top",
+    "left",
+    "right",
+    "bottom",
+    ...transformPropOrder,
+]);
+
 /**
  * Decide whether we should block this animation. Previously, we achieved this
  * just by checking whether the key was listed in protectedKeys, but this
@@ -8880,6 +8370,17 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
             delay,
             ...getValueTransition(transition || {}, key),
         };
+        /**
+         * If the value is already at the defined target, skip the animation.
+         */
+        const currentValue = value.get();
+        if (currentValue !== undefined &&
+            !value.isAnimating &&
+            !Array.isArray(valueTarget) &&
+            valueTarget === currentValue &&
+            !valueTransition.velocity) {
+            continue;
+        }
         /**
          * If this is the first time a value is being animated, check
          * to see if we're handling off from an existing animation.
@@ -10832,7 +10333,7 @@ function delay(callback, timeout) {
             callback(elapsed - timeout);
         }
     };
-    frame.read(checkElapsed, true);
+    frame.setup(checkElapsed, true);
     return () => cancelFrame(checkElapsed);
 }
 
@@ -12126,9 +11627,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         }
         setAnimationOrigin(delta, hasOnlyRelativeTargetChanged = false) {
             const snapshot = this.snapshot;
-            const snapshotLatestValues = snapshot
-                ? snapshot.latestValues
-                : {};
+            const snapshotLatestValues = snapshot ? snapshot.latestValues : {};
             const mixedValues = { ...this.latestValues };
             const targetDelta = createDelta();
             if (!this.relativeParent ||
@@ -13196,15 +12695,6 @@ function initPrefersReducedMotion() {
     }
 }
 
-/**
- * A list of all ValueTypes
- */
-const valueTypes = [...dimensionValueTypes, color, complex];
-/**
- * Tests a value against the list of ValueTypes
- */
-const findValueType = (v) => valueTypes.find(testValueType(v));
-
 const visualElementStore = new WeakMap();
 
 function updateMotionValuesFromProps(element, next, prev) {
@@ -13222,7 +12712,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "12.7.4", `Attempting to mix Motion versions ${nextValue.version} with 12.7.4 may not work as expected.`);
+                warnOnce(nextValue.version === "12.9.0", `Attempting to mix Motion versions ${nextValue.version} with 12.9.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -13261,6 +12751,108 @@ function updateMotionValuesFromProps(element, next, prev) {
     return next;
 }
 
+/**
+ * Check if value is a numerical string, ie a string that is purely a number eg "100" or "-100.1"
+ */
+const isNumericalString = (v) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(v);
+
+/**
+ * Check if the value is a zero value string like "0px" or "0%"
+ */
+const isZeroValueString = (v) => /^0[^.\s]+$/u.test(v);
+
+/**
+ * ValueType for "auto"
+ */
+const auto = {
+    test: (v) => v === "auto",
+    parse: (v) => v,
+};
+
+/**
+ * Tests a provided value against a ValueType
+ */
+const testValueType = (v) => (type) => type.test(v);
+
+/**
+ * A list of value types commonly used for dimensions
+ */
+const dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
+/**
+ * Tests a dimensional value against the list of dimension ValueTypes
+ */
+const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v));
+
+/**
+ * A list of all ValueTypes
+ */
+const valueTypes = [...dimensionValueTypes, color, complex];
+/**
+ * Tests a value against the list of ValueTypes
+ */
+const findValueType = (v) => valueTypes.find(testValueType(v));
+
+/**
+ * Properties that should default to 1 or 100%
+ */
+const maxDefaults = new Set(["brightness", "contrast", "saturate", "opacity"]);
+function applyDefaultFilter(v) {
+    const [name, value] = v.slice(0, -1).split("(");
+    if (name === "drop-shadow")
+        return v;
+    const [number] = value.match(floatRegex) || [];
+    if (!number)
+        return v;
+    const unit = value.replace(number, "");
+    let defaultValue = maxDefaults.has(name) ? 1 : 0;
+    if (number !== value)
+        defaultValue *= 100;
+    return name + "(" + defaultValue + unit + ")";
+}
+const functionRegex = /\b([a-z-]*)\(.*?\)/gu;
+const filter = {
+    ...complex,
+    getAnimatableNone: (v) => {
+        const functions = v.match(functionRegex);
+        return functions ? functions.map(applyDefaultFilter).join(" ") : v;
+    },
+};
+
+/**
+ * A map of default value types for common values
+ */
+const defaultValueTypes = {
+    ...numberValueTypes,
+    // Color props
+    color,
+    backgroundColor: color,
+    outlineColor: color,
+    fill: color,
+    stroke: color,
+    // Border props
+    borderColor: color,
+    borderTopColor: color,
+    borderRightColor: color,
+    borderBottomColor: color,
+    borderLeftColor: color,
+    filter,
+    WebkitFilter: filter,
+};
+/**
+ * Gets the default ValueType for the provided value key
+ */
+const getDefaultValueType = (key) => defaultValueTypes[key];
+
+function getAnimatableNone(key, value) {
+    let defaultValueType = getDefaultValueType(key);
+    if (defaultValueType !== filter)
+        defaultValueType = complex;
+    // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target
+    return defaultValueType.getAnimatableNone
+        ? defaultValueType.getAnimatableNone(value)
+        : undefined;
+}
+
 const propEventHandlers = [
     "AnimationStart",
     "AnimationComplete",
@@ -13355,8 +12947,7 @@ class VisualElement {
                 frame.render(this.render, false, true);
             }
         };
-        const { latestValues, renderState, onUpdate } = visualState;
-        this.onUpdate = onUpdate;
+        const { latestValues, renderState } = visualState;
         this.latestValues = latestValues;
         this.baseTarget = { ...latestValues };
         this.initialValues = props.initial ? { ...latestValues } : {};
@@ -13558,7 +13149,6 @@ class VisualElement {
         if (this.handleChildMotionValue) {
             this.handleChildMotionValue();
         }
-        this.onUpdate && this.onUpdate(this);
     }
     getProps() {
         return this.props;
@@ -13718,6 +13308,202 @@ class VisualElement {
     }
 }
 
+/**
+ * Parse Framer's special CSS variable format into a CSS token and a fallback.
+ *
+ * ```
+ * `var(--foo, #fff)` => [`--foo`, '#fff']
+ * ```
+ *
+ * @param current
+ */
+const splitCSSVariableRegex = 
+// eslint-disable-next-line redos-detector/no-unsafe-regex -- false positive, as it can match a lot of words
+/^var\(--(?:([\w-]+)|([\w-]+), ?([a-zA-Z\d ()%#.,-]+))\)/u;
+function parseCSSVariable(current) {
+    const match = splitCSSVariableRegex.exec(current);
+    if (!match)
+        return [,];
+    const [, token1, token2, fallback] = match;
+    return [`--${token1 ?? token2}`, fallback];
+}
+const maxDepth = 4;
+function getVariableValue(current, element, depth = 1) {
+    invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`);
+    const [token, fallback] = parseCSSVariable(current);
+    // No CSS variable detected
+    if (!token)
+        return;
+    // Attempt to read this CSS variable off the element
+    const resolved = window.getComputedStyle(element).getPropertyValue(token);
+    if (resolved) {
+        const trimmed = resolved.trim();
+        return isNumericalString(trimmed) ? parseFloat(trimmed) : trimmed;
+    }
+    return isCSSVariableToken(fallback)
+        ? getVariableValue(fallback, element, depth + 1)
+        : fallback;
+}
+
+function isNone(value) {
+    if (typeof value === "number") {
+        return value === 0;
+    }
+    else if (value !== null) {
+        return value === "none" || value === "0" || isZeroValueString(value);
+    }
+    else {
+        return true;
+    }
+}
+
+/**
+ * If we encounter keyframes like "none" or "0" and we also have keyframes like
+ * "#fff" or "200px 200px" we want to find a keyframe to serve as a template for
+ * the "none" keyframes. In this case "#fff" or "200px 200px" - then these get turned into
+ * zero equivalents, i.e. "#fff0" or "0px 0px".
+ */
+const invalidTemplates = new Set(["auto", "none", "0"]);
+function makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name) {
+    let i = 0;
+    let animatableTemplate = undefined;
+    while (i < unresolvedKeyframes.length && !animatableTemplate) {
+        const keyframe = unresolvedKeyframes[i];
+        if (typeof keyframe === "string" &&
+            !invalidTemplates.has(keyframe) &&
+            analyseComplexValue(keyframe).values.length) {
+            animatableTemplate = unresolvedKeyframes[i];
+        }
+        i++;
+    }
+    if (animatableTemplate && name) {
+        for (const noneIndex of noneKeyframeIndexes) {
+            unresolvedKeyframes[noneIndex] = getAnimatableNone(name, animatableTemplate);
+        }
+    }
+}
+
+class DOMKeyframesResolver extends KeyframeResolver {
+    constructor(unresolvedKeyframes, onComplete, name, motionValue, element) {
+        super(unresolvedKeyframes, onComplete, name, motionValue, element, true);
+    }
+    readKeyframes() {
+        const { unresolvedKeyframes, element, name } = this;
+        if (!element || !element.current)
+            return;
+        super.readKeyframes();
+        /**
+         * If any keyframe is a CSS variable, we need to find its value by sampling the element
+         */
+        for (let i = 0; i < unresolvedKeyframes.length; i++) {
+            let keyframe = unresolvedKeyframes[i];
+            if (typeof keyframe === "string") {
+                keyframe = keyframe.trim();
+                if (isCSSVariableToken(keyframe)) {
+                    const resolved = getVariableValue(keyframe, element.current);
+                    if (resolved !== undefined) {
+                        unresolvedKeyframes[i] = resolved;
+                    }
+                    if (i === unresolvedKeyframes.length - 1) {
+                        this.finalKeyframe = keyframe;
+                    }
+                }
+            }
+        }
+        /**
+         * Resolve "none" values. We do this potentially twice - once before and once after measuring keyframes.
+         * This could be seen as inefficient but it's a trade-off to avoid measurements in more situations, which
+         * have a far bigger performance impact.
+         */
+        this.resolveNoneKeyframes();
+        /**
+         * Check to see if unit type has changed. If so schedule jobs that will
+         * temporarily set styles to the destination keyframes.
+         * Skip if we have more than two keyframes or this isn't a positional value.
+         * TODO: We can throw if there are multiple keyframes and the value type changes.
+         */
+        if (!positionalKeys.has(name) || unresolvedKeyframes.length !== 2) {
+            return;
+        }
+        const [origin, target] = unresolvedKeyframes;
+        const originType = findDimensionValueType(origin);
+        const targetType = findDimensionValueType(target);
+        /**
+         * Either we don't recognise these value types or we can animate between them.
+         */
+        if (originType === targetType)
+            return;
+        /**
+         * If both values are numbers or pixels, we can animate between them by
+         * converting them to numbers.
+         */
+        if (isNumOrPxType(originType) && isNumOrPxType(targetType)) {
+            for (let i = 0; i < unresolvedKeyframes.length; i++) {
+                const value = unresolvedKeyframes[i];
+                if (typeof value === "string") {
+                    unresolvedKeyframes[i] = parseFloat(value);
+                }
+            }
+        }
+        else {
+            /**
+             * Else, the only way to resolve this is by measuring the element.
+             */
+            this.needsMeasurement = true;
+        }
+    }
+    resolveNoneKeyframes() {
+        const { unresolvedKeyframes, name } = this;
+        const noneKeyframeIndexes = [];
+        for (let i = 0; i < unresolvedKeyframes.length; i++) {
+            if (unresolvedKeyframes[i] === null ||
+                isNone(unresolvedKeyframes[i])) {
+                noneKeyframeIndexes.push(i);
+            }
+        }
+        if (noneKeyframeIndexes.length) {
+            makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, name);
+        }
+    }
+    measureInitialState() {
+        const { element, unresolvedKeyframes, name } = this;
+        if (!element || !element.current)
+            return;
+        if (name === "height") {
+            this.suspendedScrollY = window.pageYOffset;
+        }
+        this.measuredOrigin = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current));
+        unresolvedKeyframes[0] = this.measuredOrigin;
+        // Set final key frame to measure after next render
+        const measureKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
+        if (measureKeyframe !== undefined) {
+            element.getValue(name, measureKeyframe).jump(measureKeyframe, false);
+        }
+    }
+    measureEndState() {
+        const { element, name, unresolvedKeyframes } = this;
+        if (!element || !element.current)
+            return;
+        const value = element.getValue(name);
+        value && value.jump(this.measuredOrigin, false);
+        const finalKeyframeIndex = unresolvedKeyframes.length - 1;
+        const finalKeyframe = unresolvedKeyframes[finalKeyframeIndex];
+        unresolvedKeyframes[finalKeyframeIndex] = positionalValues[name](element.measureViewportBox(), window.getComputedStyle(element.current));
+        if (finalKeyframe !== null && this.finalKeyframe === undefined) {
+            this.finalKeyframe = finalKeyframe;
+        }
+        // If we removed transform values, reapply them before the next render
+        if (this.removedTransforms?.length) {
+            this.removedTransforms.forEach(([unsetTransformName, unsetTransformValue]) => {
+                element
+                    .getValue(unsetTransformName)
+                    .set(unsetTransformValue);
+            });
+        }
+        this.resolveNoneKeyframes();
+    }
+}
+
 class DOMVisualElement extends VisualElement {
     constructor() {
         super(...arguments);
@@ -13756,6 +13542,14 @@ class DOMVisualElement extends VisualElement {
     }
 }
 
+function renderHTML(element, { style, vars }, styleProp, projection) {
+    Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
+    // Loop over any CSS variables and assign those.
+    for (const key in vars) {
+        element.style.setProperty(key, vars[key]);
+    }
+}
+
 function getComputedStyle$1(element) {
     return window.getComputedStyle(element);
 }
@@ -13788,17 +13582,48 @@ class HTMLVisualElement extends DOMVisualElement {
     }
 }
 
+/**
+ * A set of attribute names that are always read/written as camel case.
+ */
+const camelCaseAttributes = new Set([
+    "baseFrequency",
+    "diffuseConstant",
+    "kernelMatrix",
+    "kernelUnitLength",
+    "keySplines",
+    "keyTimes",
+    "limitingConeAngle",
+    "markerHeight",
+    "markerWidth",
+    "numOctaves",
+    "targetX",
+    "targetY",
+    "surfaceScale",
+    "specularConstant",
+    "specularExponent",
+    "stdDeviation",
+    "tableValues",
+    "viewBox",
+    "gradientTransform",
+    "pathLength",
+    "startOffset",
+    "textLength",
+    "lengthAdjust",
+]);
+
+function renderSVG(element, renderState, _styleProp, projection) {
+    renderHTML(element, renderState, undefined, projection);
+    for (const key in renderState.attrs) {
+        element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
+    }
+}
+
 class SVGVisualElement extends DOMVisualElement {
     constructor() {
         super(...arguments);
         this.type = "svg";
         this.isSVGTag = false;
         this.measureInstanceViewportBox = createBox;
-        this.updateDimensions = () => {
-            if (this.current && !this.renderState.dimensions) {
-                updateSVGDimensions(this.current, this.renderState);
-            }
-        };
     }
     getBaseTargetFromProps(props, key) {
         return props[key];
@@ -13814,11 +13639,6 @@ class SVGVisualElement extends DOMVisualElement {
     scrapeMotionValuesFromProps(props, prevProps, visualElement) {
         return scrapeMotionValuesFromProps(props, prevProps, visualElement);
     }
-    onBindTransform() {
-        if (this.current && !this.renderState.dimensions) {
-            frame.postRender(this.updateDimensions);
-        }
-    }
     build(renderState, latestValues, props) {
         buildSVGAttrs(renderState, latestValues, this.isSVGTag, props.transformTemplate);
     }
@@ -34145,20 +33965,20 @@ var initStripe = function initStripe(maybeStripe, args, startTime) {
   return stripe;
 }; // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 
-var stripePromise$2;
+var stripePromise;
 var loadCalled = false;
 
 var getStripePromise = function getStripePromise() {
-  if (stripePromise$2) {
-    return stripePromise$2;
+  if (stripePromise) {
+    return stripePromise;
   }
 
-  stripePromise$2 = loadScript(null)["catch"](function (error) {
+  stripePromise = loadScript(null)["catch"](function (error) {
     // clear cache on error
-    stripePromise$2 = null;
+    stripePromise = null;
     return Promise.reject(error);
   });
-  return stripePromise$2;
+  return stripePromise;
 }; // Execute our own script injection after a tick to give users time to do their
 // own script injection.
 
@@ -34228,9 +34048,8 @@ const CheckoutForm$1 = ({ onSuccess, onError, children, setSubmitting, }) => {
 };
 var CheckoutForm$2 = React.memo(CheckoutForm$1);
 
-const publicStripeKey = "pk_live_51QvliXK5wvEuxX36GWLFgMtUrG2cGIjpW0eXoqVzjEr8S0PdGzAp4ydQa6ssxVW9u0zaLajod93YZnQIU5C8cgqp00Bb64X60b";
-const stripePromise = loadStripe(publicStripeKey);
-function PaymentElement({ paymentSecret, checkoutAppearance, locale, fonts, onSuccess, onError, children, setSubmitting, }) {
+function PaymentElement({ paymentSecret, publicKey, checkoutAppearance, locale, fonts, onSuccess, onError, children, setSubmitting, }) {
+    const stripePromise = loadStripe(publicKey !== null && publicKey !== void 0 ? publicKey : "");
     const options = {
         locale: locale !== null && locale !== void 0 ? locale : "en",
         appearance: checkoutAppearance,
@@ -34242,7 +34061,7 @@ function PaymentElement({ paymentSecret, checkoutAppearance, locale, fonts, onSu
 }
 var PaymentElement$1 = React.memo(PaymentElement);
 
-function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingName, shippingPrice, checkoutAppearance, fonts, locale, }) {
+function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack, contactEmail, shippingAddress, shippingName, shippingPrice, checkoutAppearance, fonts, locale, publicKey, }) {
     const [isSubmitting, setIsSubmitting] = React.useState(false);
     const { t } = useTranslation();
     return (React.createElement("div", { className: "space-y-6" },
@@ -34271,7 +34090,7 @@ function PaymentForm({ paymentSecret, onSuccess, onError, onBack, onDoubleBack,
                         " \u00B7 ",
                         shippingPrice)),
                 React.createElement(Button, { variant: "link", size: "link", onClick: onBack }, t("CheckoutEmbed.Shipping.change")))),
-        React.createElement("div", { className: "mt-8" }, paymentSecret && (React.createElement(PaymentElement$1, { fonts: fonts, checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance, fonts), locale: locale, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, setSubmitting: setIsSubmitting },
+        React.createElement("div", { className: "mt-8" }, paymentSecret && (React.createElement(PaymentElement$1, { fonts: fonts, checkoutAppearance: convertCheckoutAppearanceToStripeAppearance(checkoutAppearance, fonts), locale: locale, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, setSubmitting: setIsSubmitting, publicKey: publicKey },
             React.createElement("div", { className: "flex justify-between items-center pt-8" },
                 React.createElement(Button, { type: "button", variant: "ghost", onClick: onBack },
                     React.createElement(ChevronLeft, null),
@@ -34439,6 +34258,8 @@ const useFormStore = create()(persist((set) => ({
     setFormData: (formData) => set({ formData }),
     step: "customer",
     setStep: (step) => set({ step }),
+    checkoutId: "",
+    setCheckoutId: (checkoutId) => set({ checkoutId }),
 }), { name: `checkout` }));
 
 const motionSettings = {
@@ -34448,8 +34269,9 @@ const motionSettings = {
     transition: { duration: 0.2 },
 };
 function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl, clientSecret, customer, currency, checkoutAppearance, fonts, locale, setShippingCost, exchangeRate, }) {
-    const { formData, setFormData, step, setStep } = useFormStore();
+    const { formData, setFormData, step, setStep, checkoutId: storedCheckoutId, setCheckoutId, } = useFormStore();
     const [paymentSecret, setPaymentSecret] = React.useState(null);
+    const [publicKey, setPublicKey] = React.useState(null);
     const [shippingRates, setShippingRates] = React.useState([]);
     const validateStep = React.useCallback(() => {
         if (step === "customer")
@@ -34471,21 +34293,53 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
         validateStep();
     }, [step]);
     React.useEffect(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
-        if (customer && !((_a = formData.customer) === null || _a === void 0 ? void 0 : _a.email)) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19;
+        if (checkoutId !== storedCheckoutId) {
+            setStep("customer");
+            setCheckoutId(checkoutId);
+            if (customer) {
+                setFormData({
+                    customerId: customer.id,
+                    customer: {
+                        firstName: (_c = (_b = (_a = customer.address) === null || _a === void 0 ? void 0 : _a.name) === null || _b === void 0 ? void 0 : _b.split(" ")[0]) !== null && _c !== void 0 ? _c : "",
+                        lastName: (_f = (_e = (_d = customer.address) === null || _d === void 0 ? void 0 : _d.name) === null || _e === void 0 ? void 0 : _e.split(" ")[1]) !== null && _f !== void 0 ? _f : "",
+                        phone: (_h = (_g = customer.address) === null || _g === void 0 ? void 0 : _g.phone) !== null && _h !== void 0 ? _h : "",
+                        email: (_j = customer.email) !== null && _j !== void 0 ? _j : "",
+                        address: {
+                            line1: (_l = (_k = customer.address) === null || _k === void 0 ? void 0 : _k.line1) !== null && _l !== void 0 ? _l : "",
+                            line2: (_o = (_m = customer.address) === null || _m === void 0 ? void 0 : _m.line2) !== null && _o !== void 0 ? _o : "",
+                            city: (_q = (_p = customer.address) === null || _p === void 0 ? void 0 : _p.city) !== null && _q !== void 0 ? _q : "",
+                            zipCode: (_s = (_r = customer.address) === null || _r === void 0 ? void 0 : _r.zipCode) !== null && _s !== void 0 ? _s : "",
+                            country: (_u = (_t = customer.address) === null || _t === void 0 ? void 0 : _t.country) !== null && _u !== void 0 ? _u : "",
+                            countryCode: (_w = (_v = customer.address) === null || _v === void 0 ? void 0 : _v.countryCode) !== null && _w !== void 0 ? _w : "",
+                        },
+                    },
+                });
+            }
+            else if ((_x = formData.customer) === null || _x === void 0 ? void 0 : _x.email) {
+                setFormData({
+                    customer: formData.customer,
+                });
+            }
+            else {
+                setFormData({});
+            }
+            return;
+        }
+        if (customer && !((_y = formData.customer) === null || _y === void 0 ? void 0 : _y.email)) {
             const step = customer.id ? "shipping" : "customer";
             setFormData(Object.assign(Object.assign({}, formData), { customerId: customer.id, customer: {
-                    firstName: (_d = (_c = (_b = customer.address) === null || _b === void 0 ? void 0 : _b.name) === null || _c === void 0 ? void 0 : _c.split(" ")[0]) !== null && _d !== void 0 ? _d : "",
-                    lastName: (_g = (_f = (_e = customer.address) === null || _e === void 0 ? void 0 : _e.name) === null || _f === void 0 ? void 0 : _f.split(" ")[1]) !== null && _g !== void 0 ? _g : "",
-                    phone: (_j = (_h = customer.address) === null || _h === void 0 ? void 0 : _h.phone) !== null && _j !== void 0 ? _j : "",
-                    email: (_k = customer.email) !== null && _k !== void 0 ? _k : "",
+                    firstName: (_1 = (_0 = (_z = customer.address) === null || _z === void 0 ? void 0 : _z.name) === null || _0 === void 0 ? void 0 : _0.split(" ")[0]) !== null && _1 !== void 0 ? _1 : "",
+                    lastName: (_4 = (_3 = (_2 = customer.address) === null || _2 === void 0 ? void 0 : _2.name) === null || _3 === void 0 ? void 0 : _3.split(" ")[1]) !== null && _4 !== void 0 ? _4 : "",
+                    phone: (_6 = (_5 = customer.address) === null || _5 === void 0 ? void 0 : _5.phone) !== null && _6 !== void 0 ? _6 : "",
+                    email: (_7 = customer.email) !== null && _7 !== void 0 ? _7 : "",
                     address: {
-                        line1: (_m = (_l = customer.address) === null || _l === void 0 ? void 0 : _l.line1) !== null && _m !== void 0 ? _m : "",
-                        line2: (_p = (_o = customer.address) === null || _o === void 0 ? void 0 : _o.line2) !== null && _p !== void 0 ? _p : "",
-                        city: (_r = (_q = customer.address) === null || _q === void 0 ? void 0 : _q.city) !== null && _r !== void 0 ? _r : "",
-                        zipCode: (_t = (_s = customer.address) === null || _s === void 0 ? void 0 : _s.zipCode) !== null && _t !== void 0 ? _t : "",
-                        country: (_v = (_u = customer.address) === null || _u === void 0 ? void 0 : _u.country) !== null && _v !== void 0 ? _v : "",
-                        countryCode: (_x = (_w = customer.address) === null || _w === void 0 ? void 0 : _w.countryCode) !== null && _x !== void 0 ? _x : "",
+                        line1: (_9 = (_8 = customer.address) === null || _8 === void 0 ? void 0 : _8.line1) !== null && _9 !== void 0 ? _9 : "",
+                        line2: (_11 = (_10 = customer.address) === null || _10 === void 0 ? void 0 : _10.line2) !== null && _11 !== void 0 ? _11 : "",
+                        city: (_13 = (_12 = customer.address) === null || _12 === void 0 ? void 0 : _12.city) !== null && _13 !== void 0 ? _13 : "",
+                        zipCode: (_15 = (_14 = customer.address) === null || _14 === void 0 ? void 0 : _14.zipCode) !== null && _15 !== void 0 ? _15 : "",
+                        country: (_17 = (_16 = customer.address) === null || _16 === void 0 ? void 0 : _16.country) !== null && _17 !== void 0 ? _17 : "",
+                        countryCode: (_19 = (_18 = customer.address) === null || _18 === void 0 ? void 0 : _18.countryCode) !== null && _19 !== void 0 ? _19 : "",
                     },
                 } }));
             setStep(step);
@@ -34549,8 +34403,9 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
                 pickupPointId: data.pickupPointId,
             },
         });
-        const paymentSecret = yield storeClient.generateCheckoutsPaymentSecret(clientSecret, checkoutId);
+        const { paymentSecret, publicKey } = yield storeClient.generateCheckoutsPaymentSecret(clientSecret, checkoutId);
         setPaymentSecret(paymentSecret);
+        setPublicKey(publicKey);
         setShippingCost(data.price);
         setStep("payment");
     });
@@ -34569,8 +34424,9 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
     };
     React.useEffect(() => {
         const asyncFunc = () => __awaiter(this, void 0, void 0, function* () {
-            const paymentSecret = yield storeClient.generateCheckoutsPaymentSecret(clientSecret, checkoutId);
+            const { paymentSecret, publicKey } = yield storeClient.generateCheckoutsPaymentSecret(clientSecret, checkoutId);
             setPaymentSecret(paymentSecret);
+            setPublicKey(publicKey);
         });
         if (!paymentSecret && step === "payment") {
             asyncFunc();
@@ -34583,7 +34439,7 @@ function CheckoutForm({ storeClient, checkoutId, onSuccess, onError, cancelUrl,
             step === "shipping" && formData.customer && (React.createElement(motion.div, Object.assign({ key: "shipping" }, motionSettings, { className: "absolute w-full" }),
                 React.createElement(ShippingMethodForm, { setFormData: setFormData, formData: formData, shippingRates: shippingRates, initialData: formData.shipping, onSubmit: handleShippingSubmit, onBack: handleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address), currency: currency, exchangeRate: exchangeRate, locale: locale, countryCode: formData.customer.address.countryCode }))),
             step === "payment" && formData.customer && formData.shipping && (React.createElement(motion.div, Object.assign({ key: "payment" }, motionSettings, { className: "absolute w-full" }),
-                React.createElement(PaymentForm, { locale: locale, fonts: fonts, checkoutAppearance: checkoutAppearance, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, onBack: handleBack, onDoubleBack: handleDoubleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address), shippingName: formData.shipping.name, shippingPrice: storeHelpers.formatPrice(formData.shipping.price, currency, exchangeRate) }))))));
+                React.createElement(PaymentForm, { locale: locale, fonts: fonts, checkoutAppearance: checkoutAppearance, paymentSecret: paymentSecret, onSuccess: onSuccess, onError: onError, onBack: handleBack, onDoubleBack: handleDoubleBack, contactEmail: formData.customer.email, shippingAddress: formatAddress(formData.customer.address), shippingName: formData.shipping.name, shippingPrice: storeHelpers.formatPrice(formData.shipping.price, currency, exchangeRate), publicKey: publicKey }))))));
 }
 
 function CheckoutFormLoading() {