motion 12.6.2 → 12.6.3

package/dist/cjs/index.js

@@ -12,11 +12,8 @@ function removeItem(arr, item) {
         arr.splice(index, 1);
 }
 
-/*#__NO_SIDE_EFFECTS__*/
-const noop = (any) => any;
-
-let warning = noop;
-exports.invariant = noop;
+let warning = () => { };
+exports.invariant = () => { };
 if (process.env.NODE_ENV !== "production") {
     warning = (check, message) => {
         if (!check && typeof console !== "undefined") {
@@ -45,6 +42,9 @@ function memo(callback) {
     };
 }
 
+/*#__NO_SIDE_EFFECTS__*/
+const noop = (any) => any;
+
 /*
   Progress within given range
 
@@ -133,15 +133,14 @@ function warnOnce(condition, message, element) {
 
 const supportsScrollTimeline = /* @__PURE__ */ memo(() => window.ScrollTimeline !== undefined);
 
-class BaseGroupPlaybackControls {
+class GroupAnimation {
     constructor(animations) {
         // Bound to accomodate common `return animation.stop` pattern
         this.stop = () => this.runAll("stop");
         this.animations = animations.filter(Boolean);
     }
     get finished() {
-        // Support for new finished Promise and legacy thennable API
-        return Promise.all(this.animations.map((animation) => "finished" in animation ? animation.finished : animation));
+        return Promise.all(this.animations.map((animation) => animation.finished));
     }
     /**
      * TODO: Filter out cancelled or stopped animations before returning
@@ -212,156 +211,122 @@ class BaseGroupPlaybackControls {
     }
 }
 
-/**
- * TODO: This is a temporary class to support the legacy
- * thennable API
- */
-class GroupPlaybackControls extends BaseGroupPlaybackControls {
-    then(onResolve, onReject) {
-        return Promise.all(this.animations).then(onResolve).catch(onReject);
+class GroupAnimationWithThen extends GroupAnimation {
+    then(onResolve, _onReject) {
+        return this.finished.finally(onResolve).then(() => { });
     }
 }
 
-function getValueTransition$1(transition, key) {
-    return transition
-        ? transition[key] ||
-            transition["default"] ||
-            transition
-        : undefined;
-}
-
-/**
- * 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),
-    };
-}
-
-function isGenerator(type) {
-    return typeof type === "function";
-}
+const isCSSVar = (name) => name.startsWith("--");
+const style = {
+    set: (element, name, value) => {
+        isCSSVar(name)
+            ? element.style.setProperty(name, value)
+            : (element.style[name] = value);
+    },
+    get: (element, name) => {
+        return isCSSVar(name)
+            ? element.style.getPropertyValue(name)
+            : element.style[name];
+    },
+};
 
-function attachTimeline(animation, timeline) {
-    animation.timeline = timeline;
-    animation.onfinish = null;
+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 !index || finalKeyframe === undefined
+        ? resolvedKeyframes[index]
+        : finalKeyframe;
 }
 
-class NativeAnimationControls {
-    constructor(animation) {
-        this.animation = animation;
-    }
-    get duration() {
-        var _a, _b, _c;
-        const durationInMs = ((_b = (_a = this.animation) === null || _a === void 0 ? void 0 : _a.effect) === null || _b === void 0 ? void 0 : _b.getComputedTiming().duration) ||
-            ((_c = this.options) === null || _c === void 0 ? void 0 : _c.duration) ||
-            300;
-        return millisecondsToSeconds(Number(durationInMs));
-    }
-    get time() {
-        var _a;
-        if (this.animation) {
-            return millisecondsToSeconds(((_a = this.animation) === null || _a === void 0 ? void 0 : _a.currentTime) || 0);
-        }
-        return 0;
-    }
-    set time(newTime) {
-        if (this.animation) {
-            this.animation.currentTime = secondsToMilliseconds(newTime);
-        }
-    }
-    get speed() {
-        return this.animation ? this.animation.playbackRate : 1;
-    }
-    set speed(newSpeed) {
-        if (this.animation) {
-            this.animation.playbackRate = newSpeed;
-        }
-    }
-    get state() {
-        return this.animation ? this.animation.playState : "finished";
-    }
-    get startTime() {
-        return this.animation ? this.animation.startTime : null;
-    }
-    get finished() {
-        return this.animation ? this.animation.finished : Promise.resolve();
+const supportsPartialKeyframes = /*@__PURE__*/ memo(() => {
+    try {
+        document.createElement("div").animate({ opacity: [1] });
     }
-    play() {
-        this.animation && this.animation.play();
+    catch (e) {
+        return false;
     }
-    pause() {
-        this.animation && this.animation.pause();
+    return true;
+});
+
+const pxValues = new Set([
+    // Border props
+    "borderWidth",
+    "borderTopWidth",
+    "borderRightWidth",
+    "borderBottomWidth",
+    "borderLeftWidth",
+    "borderRadius",
+    "radius",
+    "borderTopLeftRadius",
+    "borderTopRightRadius",
+    "borderBottomRightRadius",
+    "borderBottomLeftRadius",
+    // Positioning props
+    "width",
+    "maxWidth",
+    "height",
+    "maxHeight",
+    "top",
+    "right",
+    "bottom",
+    "left",
+    // Spacing props
+    "padding",
+    "paddingTop",
+    "paddingRight",
+    "paddingBottom",
+    "paddingLeft",
+    "margin",
+    "marginTop",
+    "marginRight",
+    "marginBottom",
+    "marginLeft",
+    // Misc
+    "backgroundPositionX",
+    "backgroundPositionY",
+]);
+
+function hydrateKeyframes(element, name, keyframes, pseudoElement) {
+    if (!Array.isArray(keyframes)) {
+        keyframes = [keyframes];
     }
-    stop() {
-        if (!this.animation ||
-            this.state === "idle" ||
-            this.state === "finished") {
-            return;
+    for (let i = 0; i < keyframes.length; i++) {
+        if (keyframes[i] === null) {
+            keyframes[i] =
+                i === 0 && !pseudoElement
+                    ? style.get(element, name)
+                    : keyframes[i - 1];
         }
-        if (this.animation.commitStyles) {
-            this.animation.commitStyles();
+        if (typeof keyframes[i] === "number" && pxValues.has(name)) {
+            keyframes[i] = keyframes[i] + "px";
         }
-        this.cancel();
-    }
-    flatten() {
-        var _a, _b;
-        if (!this.animation || !((_a = this.options) === null || _a === void 0 ? void 0 : _a.allowFlatten))
-            return;
-        (_b = this.animation.effect) === null || _b === void 0 ? void 0 : _b.updateTiming({ easing: "linear" });
-    }
-    attachTimeline(timeline) {
-        if (this.animation)
-            attachTimeline(this.animation, timeline);
-        return noop;
     }
-    complete() {
-        this.animation && this.animation.finish();
-    }
-    cancel() {
-        try {
-            this.animation && this.animation.cancel();
-        }
-        catch (e) { }
+    if (!pseudoElement && !supportsPartialKeyframes() && keyframes.length < 2) {
+        keyframes.unshift(style.get(element, name));
     }
+    return keyframes;
 }
 
+const statsBuffer = {
+    value: null,
+    addProjectionMetrics: null,
+};
+
 const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
 
 /**
  * Add the ability for test suites to manually set support flags
  * to better test more environments.
  */
-const supportsFlags = {
-    linearEasing: undefined,
-};
+const supportsFlags = {};
 
 function memoSupports(callback, supportsFlag) {
     const memoized = memo(callback);
-    return () => { var _a; return (_a = supportsFlags[supportsFlag]) !== null && _a !== void 0 ? _a : memoized(); };
+    return () => supportsFlags[supportsFlag] ?? memoized();
 }
 
 const supportsLinearEasing = /*@__PURE__*/ memoSupports(() => {
@@ -382,20 +347,13 @@ resolution = 10 // as milliseconds
     let points = "";
     const numPoints = Math.max(Math.round(duration / resolution), 2);
     for (let i = 0; i < numPoints; i++) {
-        points += easing(progress(0, numPoints - 1, i)) + ", ";
+        points += easing(i / (numPoints - 1)) + ", ";
     }
     return `linear(${points.substring(0, points.length - 2)})`;
 };
 
-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)));
-}
 const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
+
 const supportedWaapiEasing = {
     linear: "linear",
     ease: "ease",
@@ -407,6 +365,7 @@ const supportedWaapiEasing = {
     backIn: /*@__PURE__*/ cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
     backOut: /*@__PURE__*/ cubicBezierAsString([0.33, 1.53, 0.69, 0.99]),
 };
+
 function mapEasingToNativeEasing(easing, duration) {
     if (!easing) {
         return undefined;
@@ -426,6 +385,247 @@ function mapEasingToNativeEasing(easing, duration) {
     }
 }
 
+function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease = "easeInOut", times, } = {}, pseudoElement = undefined) {
+    const keyframeOptions = {
+        [valueName]: keyframes,
+    };
+    if (times)
+        keyframeOptions.offset = times;
+    const easing = mapEasingToNativeEasing(ease, duration);
+    /**
+     * If this is an easing array, apply to keyframes, not animation as a whole
+     */
+    if (Array.isArray(easing))
+        keyframeOptions.easing = easing;
+    const animation = element.animate(keyframeOptions, {
+        delay,
+        duration,
+        easing: !Array.isArray(easing) ? easing : "linear",
+        fill: "both",
+        iterations: repeat + 1,
+        direction: repeatType === "reverse" ? "alternate" : "normal",
+        pseudoElement,
+    });
+    return animation;
+}
+
+function isGenerator(type) {
+    return typeof type === "function" && "applyToOptions" in type;
+}
+
+function applyGeneratorOptions({ type, ...options }) {
+    if (isGenerator(type)) {
+        return type.applyToOptions(options);
+    }
+    else {
+        options.duration ?? (options.duration = 300);
+        options.ease ?? (options.ease = "easeOut");
+    }
+    return options;
+}
+
+const animationMaps = new WeakMap();
+const animationMapKey = (name, pseudoElement) => `${name}:${pseudoElement}`;
+function getAnimationMap(element) {
+    const map = animationMaps.get(element) || new Map();
+    animationMaps.set(element, map);
+    return map;
+}
+/**
+ * NativeAnimation implements AnimationPlaybackControls for the browser's Web Animations API.
+ */
+class NativeAnimation {
+    constructor(options) {
+        /**
+         * If we already have an animation, we don't need to instantiate one
+         * and can just use this as a controls interface.
+         */
+        if ("animation" in options) {
+            this.animation = options.animation;
+            return;
+        }
+        const { element, name, keyframes: unresolvedKeyframes, pseudoElement, allowFlatten = false, } = options;
+        let { transition } = options;
+        this.allowFlatten = allowFlatten;
+        /**
+         * Stop any existing animations on the element before reading existing keyframes.
+         *
+         * TODO: Check for VisualElement before using animation state. This is a fallback
+         * for mini animate(). Do this when implementing NativeAnimationExtended.
+         */
+        const animationMap = getAnimationMap(element);
+        const key = animationMapKey(name, pseudoElement || "");
+        const currentAnimation = animationMap.get(key);
+        currentAnimation && currentAnimation.stop();
+        /**
+         * TODO: If these keyframes aren't correctly hydrated then we want to throw
+         * run an instant animation.
+         */
+        const keyframes = hydrateKeyframes(element, name, unresolvedKeyframes, pseudoElement);
+        exports.invariant(typeof transition.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "motion"?`);
+        transition = applyGeneratorOptions(transition);
+        this.animation = startWaapiAnimation(element, name, keyframes, transition, pseudoElement);
+        if (transition.autoplay === false) {
+            this.animation.pause();
+        }
+        this.removeAnimation = () => animationMap.delete(key);
+        this.animation.onfinish = () => {
+            if (!pseudoElement) {
+                style.set(element, name, getFinalKeyframe$1(keyframes, transition));
+            }
+            else {
+                this.commitStyles();
+            }
+            this.cancel();
+        };
+        /**
+         * TODO: Check for VisualElement before using animation state.
+         */
+        animationMap.set(key, this);
+    }
+    play() {
+        this.animation.play();
+    }
+    pause() {
+        this.animation.pause();
+    }
+    complete() {
+        this.animation.finish();
+    }
+    cancel() {
+        try {
+            this.animation.cancel();
+        }
+        catch (e) { }
+        this.removeAnimation();
+    }
+    stop() {
+        const { state } = this;
+        if (state === "idle" || state === "finished") {
+            return;
+        }
+        this.commitStyles();
+        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() {
+        this.animation.commitStyles?.();
+    }
+    get duration() {
+        console.log(this.animation.effect?.getComputedTiming());
+        const duration = this.animation.effect?.getComputedTiming().duration || 0;
+        return millisecondsToSeconds(Number(duration));
+    }
+    get time() {
+        return millisecondsToSeconds(Number(this.animation.currentTime) || 0);
+    }
+    set time(newTime) {
+        this.animation.currentTime = secondsToMilliseconds(newTime);
+    }
+    /**
+     * The playback speed of the animation.
+     * 1 = normal speed, 2 = double speed, 0.5 = half speed.
+     */
+    get speed() {
+        return this.animation.playbackRate;
+    }
+    set speed(newSpeed) {
+        this.animation.playbackRate = newSpeed;
+    }
+    get state() {
+        return this.animation.playState;
+    }
+    get startTime() {
+        return Number(this.animation.startTime);
+    }
+    get finished() {
+        return this.animation.finished;
+    }
+    flatten() {
+        if (this.allowFlatten) {
+            this.animation.effect?.updateTiming({ easing: "linear" });
+        }
+    }
+    /**
+     * Attaches a timeline to the animation, for instance the `ScrollTimeline`.
+     */
+    attachTimeline(timeline) {
+        this.animation.timeline = timeline;
+        this.animation.onfinish = null;
+        return noop;
+    }
+    /**
+     * Allows the animation to be awaited.
+     *
+     * @deprecated Use `finished` instead.
+     */
+    then(onResolve, onReject) {
+        return this.finished.then(onResolve).catch(onReject);
+    }
+}
+
+function getValueTransition$1(transition, key) {
+    return (transition?.[key] ??
+        transition?.["default"] ??
+        transition);
+}
+
+/**
+ * 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),
+    };
+}
+
+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 attachTimeline(animation, timeline) {
+    animation.timeline = timeline;
+    animation.onfinish = null;
+}
+
 const stepsOrder = [
     "read", // Read
     "resolveKeyframes", // Write/Read/Write/Read
@@ -435,11 +635,6 @@ const stepsOrder = [
     "postRender", // Compute
 ];
 
-const statsBuffer = {
-    value: null,
-    addProjectionMetrics: null,
-};
-
 function createRenderStep(runNextFrame, stepName) {
     /**
      * We create and reuse two queues, one to queue jobs for the current frame
@@ -629,21 +824,16 @@ function isDragActive() {
 }
 
 function resolveElements(elementOrSelector, scope, selectorCache) {
-    var _a;
     if (elementOrSelector instanceof EventTarget) {
         return [elementOrSelector];
     }
     else if (typeof elementOrSelector === "string") {
         let root = document;
         if (scope) {
-            // TODO: Refactor to utils package
-            // invariant(
-            //     Boolean(scope.current),
-            //     "Scope provided, but no element detected."
-            // )
             root = scope.current;
         }
-        const elements = (_a = selectorCache === null || selectorCache === void 0 ? void 0 : selectorCache[elementOrSelector]) !== null && _a !== void 0 ? _a : root.querySelectorAll(elementOrSelector);
+        const elements = selectorCache?.[elementOrSelector] ??
+            root.querySelectorAll(elementOrSelector);
         return elements ? Array.from(elements) : [];
     }
     return Array.from(elementOrSelector);
@@ -842,7 +1032,7 @@ function press(targetOrSelector, onPressStart, options = {}) {
         if (target instanceof HTMLElement) {
             target.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions));
             if (!isElementKeyboardAccessible(target) &&
-                target.tabIndex === null) {
+                !target.hasAttribute("tabindex")) {
                 target.tabIndex = 0;
             }
         }
@@ -875,7 +1065,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.6.1";
+        this.version = "12.6.3";
         /**
          * 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
@@ -1424,9 +1614,17 @@ function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce
             const easing = generateLinearEasing((progress) => generator.next(calculatedDuration * progress).value, calculatedDuration, 30);
             return calculatedDuration + "ms " + easing;
         },
+        toTransition: () => { },
     };
     return generator;
 }
+spring.applyToOptions = (options) => {
+    const generatorOptions = createGeneratorEasing(options, 100, spring);
+    options.ease = supportsLinearEasing() ? generatorOptions.ease : "easeOut";
+    options.duration = secondsToMilliseconds(generatorOptions.duration);
+    options.type = "keyframes";
+    return options;
+};
 
 const wrap = (min, max, v) => {
     const rangeSize = max - min;
@@ -1510,7 +1708,6 @@ function calculateRepeatDuration(duration, repeat, _repeatDelay) {
  * calculate an absolute time for the next keyframes.
  */
 function calcNextTime(current, next, prev, labels) {
-    var _a;
     if (typeof next === "number") {
         return next;
     }
@@ -1521,7 +1718,7 @@ function calcNextTime(current, next, prev, labels) {
         return prev;
     }
     else {
-        return (_a = labels.get(next)) !== null && _a !== void 0 ? _a : current;
+        return labels.get(next) ?? current;
     }
 }
 
@@ -1634,7 +1831,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
             const numKeyframes = valueKeyframesAsList.length;
             const createGenerator = isGenerator(type)
                 ? type
-                : generators === null || generators === void 0 ? void 0 : generators[type];
+                : generators?.[type];
             if (numKeyframes <= 2 && createGenerator) {
                 /**
                  * As we're creating an easing function from a spring,
@@ -1656,7 +1853,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
                 ease = springEasing.ease;
                 duration = springEasing.duration;
             }
-            duration !== null && duration !== void 0 ? duration : (duration = defaultDuration);
+            duration ?? (duration = defaultDuration);
             const startTime = currentTime + calculatedDelay;
             /**
              * If there's only one time offset of 0, fill in a second with length 1
@@ -1865,7 +2062,7 @@ const resolveFinalValueInKeyframes = (v) => {
 
 function getValueState(visualElement) {
     const state = [{}, {}];
-    visualElement === null || visualElement === void 0 ? void 0 : visualElement.values.forEach((value, key) => {
+    visualElement?.values.forEach((value, key) => {
         state[0][key] = value.get();
         state[1][key] = value.getVelocity();
     });
@@ -2197,11 +2394,10 @@ const color = {
 const colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
 
 function test(v) {
-    var _a, _b;
     return (isNaN(v) &&
         typeof v === "string" &&
-        (((_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) || 0) +
-            (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) >
+        (v.match(floatRegex)?.length || 0) +
+            (v.match(colorRegex)?.length || 0) >
             0);
 }
 const NUMBER_TOKEN = "number";
@@ -2589,8 +2785,7 @@ function measureAllKeyframes() {
             const restore = transformsToRestore.get(element);
             if (restore) {
                 restore.forEach(([key, value]) => {
-                    var _a;
-                    (_a = element.getValue(key)) === null || _a === void 0 ? void 0 : _a.set(value);
+                    element.getValue(key)?.set(value);
                 });
             }
         });
@@ -2677,7 +2872,7 @@ class KeyframeResolver {
                  * If the first keyframe is null, we need to find its value by sampling the element
                  */
                 if (i === 0) {
-                    const currentValue = motionValue === null || motionValue === void 0 ? void 0 : motionValue.get();
+                    const currentValue = motionValue?.get();
                     const finalKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
                     if (currentValue !== undefined) {
                         unresolvedKeyframes[0] = currentValue;
@@ -2758,7 +2953,7 @@ function parseCSSVariable(current) {
     if (!match)
         return [,];
     const [, token1, token2, fallback] = match;
-    return [`--${token1 !== null && token1 !== void 0 ? token1 : token2}`, fallback];
+    return [`--${token1 ?? token2}`, fallback];
 }
 const maxDepth = 4;
 function getVariableValue(current, element, depth = 1) {
@@ -2897,7 +3092,6 @@ class DOMKeyframesResolver extends KeyframeResolver {
         }
     }
     measureEndState() {
-        var _a;
         const { element, name, unresolvedKeyframes } = this;
         if (!element || !element.current)
             return;
@@ -2910,7 +3104,7 @@ class DOMKeyframesResolver extends KeyframeResolver {
             this.finalKeyframe = finalKeyframe;
         }
         // If we removed transform values, reapply them before the next render
-        if ((_a = this.removedTransforms) === null || _a === void 0 ? void 0 : _a.length) {
+        if (this.removedTransforms?.length) {
             this.removedTransforms.forEach(([unsetTransformName, unsetTransformValue]) => {
                 element
                     .getValue(unsetTransformName)
@@ -3266,13 +3460,12 @@ function mixObject(a, b) {
     };
 }
 function matchOrder(origin, target) {
-    var _a;
     const orderedOrigin = [];
     const pointers = { color: 0, var: 0, number: 0 };
     for (let i = 0; i < target.values.length; i++) {
         const type = target.types[i];
         const originIndex = origin.indexes[type][pointers[type]];
-        const originValue = (_a = origin.values[originIndex]) !== null && _a !== void 0 ? _a : 0;
+        const originValue = origin.values[originIndex] ?? 0;
         orderedOrigin[i] = originValue;
         pointers[type]++;
     }
@@ -3499,7 +3692,7 @@ function convertOffsetToTimes(offset, duration) {
     return offset.map((o) => o * duration);
 }
 
-function defaultEasing$1(values, easing) {
+function defaultEasing(values, easing) {
     return values.map(() => easing || easeInOut).splice(0, values.length - 1);
 }
 function keyframes({ duration = 300, keyframes: keyframeValues, times, ease = "easeInOut", }) {
@@ -3530,7 +3723,7 @@ function keyframes({ duration = 300, keyframes: keyframeValues, times, ease = "e
     const mapTimeToKeyframe = interpolate(absoluteTimes, keyframeValues, {
         ease: Array.isArray(easingFunctions)
             ? easingFunctions
-            : defaultEasing$1(keyframeValues, easingFunctions),
+            : defaultEasing(keyframeValues, easingFunctions),
     });
     return {
         calculatedDuration: duration,
@@ -3612,7 +3805,7 @@ class MainThreadAnimation extends BaseAnimation {
             onStop && onStop();
         };
         const { name, motionValue, element, keyframes } = this.options;
-        const KeyframeResolver$1 = (element === null || element === void 0 ? void 0 : element.KeyframeResolver) || KeyframeResolver;
+        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();
@@ -3861,7 +4054,7 @@ class MainThreadAnimation extends BaseAnimation {
             this.startTime = now - this.holdTime;
         }
         else if (!this.startTime) {
-            this.startTime = startTime !== null && startTime !== void 0 ? startTime : this.calcStartTime();
+            this.startTime = startTime ?? this.calcStartTime();
         }
         else if (this.state === "finished") {
             this.startTime = now;
@@ -3879,13 +4072,12 @@ class MainThreadAnimation extends BaseAnimation {
         this.driver.start();
     }
     pause() {
-        var _a;
         if (!this._resolved) {
             this.pendingPlayState = "paused";
             return;
         }
         this.state = "paused";
-        this.holdTime = (_a = this.currentTime) !== null && _a !== void 0 ? _a : 0;
+        this.holdTime = this.currentTime ?? 0;
     }
     complete() {
         if (this.state !== "running") {
@@ -3925,6 +4117,9 @@ class MainThreadAnimation extends BaseAnimation {
         this.startTime = 0;
         return this.tick(time, true);
     }
+    get finished() {
+        return this.currentFinishedPromise;
+    }
 }
 
 /**
@@ -3940,27 +4135,6 @@ const acceleratedValues = new Set([
     // "background-color"
 ]);
 
-function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease = "easeInOut", times, } = {}) {
-    const keyframeOptions = { [valueName]: keyframes };
-    if (times)
-        keyframeOptions.offset = times;
-    const easing = mapEasingToNativeEasing(ease, duration);
-    /**
-     * If this is an easing array, apply to keyframes, not animation as a whole
-     */
-    if (Array.isArray(easing))
-        keyframeOptions.easing = easing;
-    const animation = element.animate(keyframeOptions, {
-        delay,
-        duration,
-        easing: !Array.isArray(easing) ? easing : "linear",
-        fill: "both",
-        iterations: repeat + 1,
-        direction: repeatType === "reverse" ? "alternate" : "normal",
-    });
-    return animation;
-}
-
 const supportsWaapi = /*@__PURE__*/ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
 
 /**
@@ -4071,7 +4245,7 @@ class AcceleratedAnimation extends BaseAnimation {
         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 !== null && startTime !== void 0 ? startTime : this.calcStartTime();
+        animation.startTime = startTime ?? this.calcStartTime();
         if (this.pendingTimeline) {
             attachTimeline(animation, this.pendingTimeline);
             this.pendingTimeline = undefined;
@@ -4130,6 +4304,9 @@ class AcceleratedAnimation extends BaseAnimation {
         const { animation } = resolved;
         return animation.playbackRate;
     }
+    get finished() {
+        return this.resolved.animation.finished;
+    }
     set speed(newSpeed) {
         const { resolved } = this;
         if (!resolved)
@@ -4395,7 +4572,7 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
             });
             // We still want to return some animation controls here rather
             // than returning undefined
-            return new GroupPlaybackControls([]);
+            return new GroupAnimationWithThen([]);
         }
     }
     /**
@@ -4423,7 +4600,6 @@ function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
     return shouldBlock;
 }
 function animateTarget(visualElement, targetAndTransition, { delay = 0, transitionOverride, type } = {}) {
-    var _a;
     let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = targetAndTransition;
     if (transitionOverride)
         transition = transitionOverride;
@@ -4432,7 +4608,7 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
         visualElement.animationState &&
         visualElement.animationState.getState()[type];
     for (const key in target) {
-        const value = visualElement.getValue(key, (_a = visualElement.latestValues[key]) !== null && _a !== void 0 ? _a : null);
+        const value = visualElement.getValue(key, visualElement.latestValues[key] ?? null);
         const valueTarget = target[key];
         if (valueTarget === undefined ||
             (animationTypeState &&
@@ -4591,7 +4767,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "12.6.2", `Attempting to mix Motion versions ${nextValue.version} with 12.6.2 may not work as expected.`);
+                warnOnce(nextValue.version === "12.6.3", `Attempting to mix Motion versions ${nextValue.version} with 12.6.3 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -5015,10 +5191,10 @@ class VisualElement {
      * directly from the instance (which might have performance implications).
      */
     readValue(key, target) {
-        var _a;
         let value = this.latestValues[key] !== undefined || !this.current
             ? this.latestValues[key]
-            : (_a = this.getBaseTargetFromProps(this.props, key)) !== null && _a !== void 0 ? _a : this.readValueFromInstance(this.current, key, this.options);
+            : this.getBaseTargetFromProps(this.props, key) ??
+                this.readValueFromInstance(this.current, key, this.options);
         if (value !== undefined && value !== null) {
             if (typeof value === "string" &&
                 (isNumericalString(value) || isZeroValueString(value))) {
@@ -5044,11 +5220,10 @@ class VisualElement {
      * props.
      */
     getBaseTarget(key) {
-        var _a;
         const { initial } = this.props;
         let valueFromInitial;
         if (typeof initial === "string" || typeof initial === "object") {
-            const variant = resolveVariantFromProps(this.props, initial, (_a = this.presenceContext) === null || _a === void 0 ? void 0 : _a.custom);
+            const variant = resolveVariantFromProps(this.props, initial, this.presenceContext?.custom);
             if (variant) {
                 valueFromInitial = variant[key];
             }
@@ -5415,7 +5590,6 @@ function isForcedMotionValue(key, { layout, layoutId }) {
 }
 
 function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
-    var _a;
     const { style } = props;
     const newValues = {};
     for (const key in style) {
@@ -5423,7 +5597,7 @@ function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
             (prevProps.style &&
                 isMotionValue(prevProps.style[key])) ||
             isForcedMotionValue(key, props) ||
-            ((_a = visualElement === null || visualElement === void 0 ? void 0 : visualElement.getValue(key)) === null || _a === void 0 ? void 0 : _a.liveStyle) !== undefined) {
+            visualElement?.getValue(key)?.liveStyle !== undefined) {
             newValues[key] = style[key];
         }
     }
@@ -5702,7 +5876,7 @@ function createScopedAnimate(scope) {
         else {
             animations = animateSubject(subjectOrSequence, optionsOrKeyframes, options, scope);
         }
-        const animation = new GroupPlaybackControls(animations);
+        const animation = new GroupAnimationWithThen(animations);
         if (scope) {
             scope.animations.push(animation);
         }
@@ -5712,125 +5886,6 @@ function createScopedAnimate(scope) {
 }
 const animate = createScopedAnimate();
 
-function setCSSVar(element, name, value) {
-    element.style.setProperty(name, value);
-}
-function setStyle(element, name, value) {
-    element.style[name] = value;
-}
-
-const supportsPartialKeyframes = /*@__PURE__*/ memo(() => {
-    try {
-        document.createElement("div").animate({ opacity: [1] });
-    }
-    catch (e) {
-        return false;
-    }
-    return true;
-});
-
-const state = new WeakMap();
-function hydrateKeyframes(valueName, keyframes, read) {
-    for (let i = 0; i < keyframes.length; i++) {
-        if (keyframes[i] === null) {
-            keyframes[i] = i === 0 ? read() : keyframes[i - 1];
-        }
-        if (typeof keyframes[i] === "number" &&
-            browserNumberValueTypes[valueName]) {
-            keyframes[i] = browserNumberValueTypes[valueName].transform(keyframes[i]);
-        }
-    }
-    if (!supportsPartialKeyframes() && keyframes.length < 2) {
-        keyframes.unshift(read());
-    }
-}
-const defaultEasing = "easeOut";
-function getElementAnimationState(element) {
-    const animationState = state.get(element) || new Map();
-    state.set(element, animationState);
-    return state.get(element);
-}
-class NativeAnimation extends NativeAnimationControls {
-    constructor(element, valueName, valueKeyframes, options) {
-        const isCSSVar = valueName.startsWith("--");
-        exports.invariant(typeof options.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "framer-motion"?`);
-        const existingAnimation = getElementAnimationState(element).get(valueName);
-        existingAnimation && existingAnimation.stop();
-        const readInitialKeyframe = () => {
-            return valueName.startsWith("--")
-                ? element.style.getPropertyValue(valueName)
-                : window.getComputedStyle(element)[valueName];
-        };
-        if (!Array.isArray(valueKeyframes)) {
-            valueKeyframes = [valueKeyframes];
-        }
-        hydrateKeyframes(valueName, valueKeyframes, readInitialKeyframe);
-        // TODO: Replace this with toString()?
-        if (isGenerator(options.type)) {
-            const generatorOptions = createGeneratorEasing(options, 100, options.type);
-            options.ease = supportsLinearEasing()
-                ? generatorOptions.ease
-                : defaultEasing;
-            options.duration = secondsToMilliseconds(generatorOptions.duration);
-            options.type = "keyframes";
-        }
-        else {
-            options.ease = options.ease || defaultEasing;
-        }
-        const onFinish = () => {
-            this.setValue(element, valueName, getFinalKeyframe(valueKeyframes, options));
-            this.cancel();
-            this.resolveFinishedPromise();
-        };
-        const init = () => {
-            this.setValue = isCSSVar ? setCSSVar : setStyle;
-            this.options = options;
-            this.updateFinishedPromise();
-            this.removeAnimation = () => {
-                const elementState = state.get(element);
-                elementState && elementState.delete(valueName);
-            };
-        };
-        if (!supportsWaapi()) {
-            super();
-            init();
-            onFinish();
-        }
-        else {
-            super(startWaapiAnimation(element, valueName, valueKeyframes, options));
-            init();
-            if (options.autoplay === false) {
-                this.animation.pause();
-            }
-            this.animation.onfinish = onFinish;
-            getElementAnimationState(element).set(valueName, this);
-        }
-    }
-    /**
-     * 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);
-    }
-    updateFinishedPromise() {
-        this.currentFinishedPromise = new Promise((resolve) => {
-            this.resolveFinishedPromise = resolve;
-        });
-    }
-    play() {
-        if (this.state === "finished") {
-            this.updateFinishedPromise();
-        }
-        super.play();
-    }
-    cancel() {
-        this.removeAnimation();
-        super.cancel();
-    }
-}
-
 function animateElements(elementOrSelector, keyframes, options, scope) {
     const elements = resolveElements(elementOrSelector, scope);
     const numElements = elements.length;
@@ -5850,13 +5905,15 @@ function animateElements(elementOrSelector, keyframes, options, scope) {
             const valueOptions = {
                 ...getValueTransition$1(elementTransition, valueName),
             };
-            valueOptions.duration = valueOptions.duration
-                ? secondsToMilliseconds(valueOptions.duration)
-                : valueOptions.duration;
-            valueOptions.delay = secondsToMilliseconds(valueOptions.delay || 0);
-            valueOptions.allowFlatten =
-                !elementTransition.type && !elementTransition.ease;
-            animations.push(new NativeAnimation(element, valueName, valueKeyframes, valueOptions));
+            valueOptions.duration && (valueOptions.duration = secondsToMilliseconds(valueOptions.duration));
+            valueOptions.delay && (valueOptions.delay = secondsToMilliseconds(valueOptions.delay));
+            animations.push(new NativeAnimation({
+                element,
+                name: valueName,
+                keyframes: valueKeyframes,
+                transition: valueOptions,
+                allowFlatten: !elementTransition.type && !elementTransition.ease,
+            }));
         }
     }
     return animations;
@@ -5864,7 +5921,7 @@ function animateElements(elementOrSelector, keyframes, options, scope) {
 
 const createScopedWaapiAnimate = (scope) => {
     function scopedAnimate(elementOrSelector, keyframes, options) {
-        return new GroupPlaybackControls(animateElements(elementOrSelector, keyframes, options, scope));
+        return new GroupAnimationWithThen(animateElements(elementOrSelector, keyframes, options, scope));
     }
     return scopedAnimate;
 };
@@ -5903,8 +5960,7 @@ function getElementSize(target, borderBoxSize) {
     }
 }
 function notifyTarget({ target, contentRect, borderBoxSize, }) {
-    var _a;
-    (_a = resizeHandlers.get(target)) === null || _a === void 0 ? void 0 : _a.forEach((handler) => {
+    resizeHandlers.get(target)?.forEach((handler) => {
         handler({
             target,
             contentSize: contentRect,
@@ -5933,14 +5989,14 @@ function resizeElement(target, handler) {
             resizeHandlers.set(element, elementHandlers);
         }
         elementHandlers.add(handler);
-        observer === null || observer === void 0 ? void 0 : observer.observe(element);
+        observer?.observe(element);
     });
     return () => {
         elements.forEach((element) => {
             const elementHandlers = resizeHandlers.get(element);
-            elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.delete(handler);
-            if (!(elementHandlers === null || elementHandlers === void 0 ? void 0 : elementHandlers.size)) {
-                observer === null || observer === void 0 ? void 0 : observer.unobserve(element);
+            elementHandlers?.delete(handler);
+            if (!elementHandlers?.size) {
+                observer?.unobserve(element);
             }
         });
     };
@@ -6319,7 +6375,6 @@ function scrollInfo(onScroll, { container = document.documentElement, ...options
     const listener = scrollListeners.get(container);
     frame.read(listener, false, true);
     return () => {
-        var _a;
         cancelFrame(listener);
         /**
          * Check if we even have any handlers for this container.
@@ -6337,7 +6392,7 @@ function scrollInfo(onScroll, { container = document.documentElement, ...options
         scrollListeners.delete(container);
         if (scrollListener) {
             getEventTarget(container).removeEventListener("scroll", scrollListener);
-            (_a = resizeListeners.get(container)) === null || _a === void 0 ? void 0 : _a();
+            resizeListeners.get(container)?.();
             window.removeEventListener("resize", scrollListener);
         }
     };