framer-motion 12.6.2 → 12.6.3

package/dist/framer-motion.dev.js

@@ -438,9 +438,9 @@
                             isEveryExitComplete = false;
                     });
                     if (isEveryExitComplete) {
-                        forceRender === null || forceRender === void 0 ? void 0 : forceRender();
+                        forceRender?.();
                         setRenderedChildren(pendingPresentChildren.current);
-                        propagate && (safeToRemove === null || safeToRemove === void 0 ? void 0 : safeToRemove());
+                        propagate && safeToRemove?.();
                         onExitComplete && onExitComplete();
                     }
                 };
@@ -477,11 +477,8 @@
         return arr;
     }
 
-    /*#__NO_SIDE_EFFECTS__*/
-    const noop = (any) => any;
-
-    let warning = noop;
-    exports.invariant = noop;
+    let warning = () => { };
+    exports.invariant = () => { };
     {
         warning = (check, message) => {
             if (!check && typeof console !== "undefined") {
@@ -510,6 +507,9 @@
         };
     }
 
+    /*#__NO_SIDE_EFFECTS__*/
+    const noop = (any) => any;
+
     /*
       Progress within given range
 
@@ -598,15 +598,14 @@
 
     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
@@ -677,156 +676,122 @@
         }
     }
 
-    /**
-     * 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(() => {
@@ -847,20 +812,13 @@
         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",
@@ -872,6 +830,7 @@
         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;
@@ -891,6 +850,247 @@
         }
     }
 
+    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
@@ -900,11 +1100,6 @@
         "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
@@ -1124,21 +1319,16 @@
     }
 
     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);
@@ -1337,7 +1527,7 @@
             if (target instanceof HTMLElement) {
                 target.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions));
                 if (!isElementKeyboardAccessible(target) &&
-                    target.tabIndex === null) {
+                    !target.hasAttribute("tabindex")) {
                     target.tabIndex = 0;
                 }
             }
@@ -1373,7 +1563,7 @@
              * 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
@@ -2044,11 +2234,10 @@
     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";
@@ -2436,8 +2625,7 @@
                 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);
                     });
                 }
             });
@@ -2524,7 +2712,7 @@
                      * 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;
@@ -2605,7 +2793,7 @@
         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) {
@@ -2744,7 +2932,6 @@
             }
         }
         measureEndState() {
-            var _a;
             const { element, name, unresolvedKeyframes } = this;
             if (!element || !element.current)
                 return;
@@ -2757,7 +2944,7 @@
                 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)
@@ -3113,13 +3300,12 @@
         };
     }
     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]++;
         }
@@ -3423,9 +3609,17 @@
                 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;
+    };
 
     function inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min, max, restDelta = 0.5, restSpeed, }) {
         const origin = keyframes[0];
@@ -3634,7 +3828,7 @@
         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", }) {
@@ -3665,7 +3859,7 @@
         const mapTimeToKeyframe = interpolate(absoluteTimes, keyframeValues, {
             ease: Array.isArray(easingFunctions)
                 ? easingFunctions
-                : defaultEasing$1(keyframeValues, easingFunctions),
+                : defaultEasing(keyframeValues, easingFunctions),
         });
         return {
             calculatedDuration: duration,
@@ -3747,7 +3941,7 @@
                 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();
@@ -3995,7 +4189,7 @@
                 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;
@@ -4013,13 +4207,12 @@
             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") {
@@ -4059,6 +4252,9 @@
             this.startTime = 0;
             return this.tick(time, true);
         }
+        get finished() {
+            return this.currentFinishedPromise;
+        }
     }
     // Legacy interface
     function animateValue(options) {
@@ -4078,27 +4274,6 @@
         // "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"));
 
     /**
@@ -4209,7 +4384,7 @@
             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;
@@ -4268,6 +4443,9 @@
             const { animation } = resolved;
             return animation.playbackRate;
         }
+        get finished() {
+            return this.resolved.animation.finished;
+        }
         set speed(newSpeed) {
             const { resolved } = this;
             if (!resolved)
@@ -4539,7 +4717,7 @@
                 });
                 // We still want to return some animation controls here rather
                 // than returning undefined
-                return new GroupPlaybackControls([]);
+                return new GroupAnimationWithThen([]);
             }
         }
         /**
@@ -5117,7 +5295,7 @@
          */
         const xTranslate = delta.x.translate / treeScale.x;
         const yTranslate = delta.y.translate / treeScale.y;
-        const zTranslate = (latestTransform === null || latestTransform === void 0 ? void 0 : latestTransform.z) || 0;
+        const zTranslate = latestTransform?.z || 0;
         if (xTranslate || yTranslate || zTranslate) {
             transform = `translate3d(${xTranslate}px, ${yTranslate}px, ${zTranslate}px) `;
         }
@@ -5215,7 +5393,7 @@
     }
     function createProjectionNode$1({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
         return class ProjectionNode {
-            constructor(latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
+            constructor(latestValues = {}, parent = defaultParent?.()) {
                 /**
                  * A unique ID generated for every projection node.
                  */
@@ -5733,12 +5911,11 @@
                 };
             }
             measurePageBox() {
-                var _a;
                 const { visualElement } = this.options;
                 if (!visualElement)
                     return createBox();
                 const box = visualElement.measureViewportBox();
-                const wasInScrollRoot = ((_a = this.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot) || this.path.some(checkNodeWasScrollRoot);
+                const wasInScrollRoot = this.scroll?.wasRoot || this.path.some(checkNodeWasScrollRoot);
                 if (!wasInScrollRoot) {
                     // Remove viewport scroll to give page-relative coordinates
                     const { scroll } = this.root;
@@ -5750,10 +5927,9 @@
                 return box;
             }
             removeElementScroll(box) {
-                var _a;
                 const boxWithoutScroll = createBox();
                 copyBoxInto(boxWithoutScroll, box);
-                if ((_a = this.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot) {
+                if (this.scroll?.wasRoot) {
                     return boxWithoutScroll;
                 }
                 /**
@@ -5856,7 +6032,6 @@
                 }
             }
             resolveTargetDelta(forceRecalculation = false) {
-                var _a;
                 /**
                  * Once the dirty status of nodes has been spread through the tree, we also
                  * need to check if we have a shared node of a different depth that has itself
@@ -5874,7 +6049,7 @@
                 const canSkip = !(forceRecalculation ||
                     (isShared && this.isSharedProjectionDirty) ||
                     this.isProjectionDirty ||
-                    ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty) ||
+                    this.parent?.isProjectionDirty ||
                     this.attemptToResolveRelativeTarget ||
                     this.root.updateBlockedByResize);
                 if (canSkip)
@@ -5993,7 +6168,6 @@
                     this.layout);
             }
             calcProjection() {
-                var _a;
                 const lead = this.getLead();
                 const isShared = Boolean(this.resumingFrom) || this !== lead;
                 let canSkip = true;
@@ -6001,7 +6175,7 @@
                  * If this is a normal layout animation and neither this node nor its nearest projecting
                  * is dirty then we can't skip.
                  */
-                if (this.isProjectionDirty || ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty)) {
+                if (this.isProjectionDirty || this.parent?.isProjectionDirty) {
                     canSkip = false;
                 }
                 /**
@@ -6107,8 +6281,7 @@
                 // TODO: Schedule render
             }
             scheduleRender(notifyAll = true) {
-                var _a;
-                (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.scheduleRender();
+                this.options.visualElement?.scheduleRender();
                 if (notifyAll) {
                     const stack = this.getStack();
                     stack && stack.scheduleRender();
@@ -6292,14 +6465,12 @@
                 return stack ? stack.lead === this : true;
             }
             getLead() {
-                var _a;
                 const { layoutId } = this.options;
-                return layoutId ? ((_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.lead) || this : this;
+                return layoutId ? this.getStack()?.lead || this : this;
             }
             getPrevLead() {
-                var _a;
                 const { layoutId } = this.options;
-                return layoutId ? (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.prevLead : undefined;
+                return layoutId ? this.getStack()?.prevLead : undefined;
             }
             getStack() {
                 const { layoutId } = this.options;
@@ -6373,7 +6544,6 @@
                 visualElement.scheduleRender();
             }
             getProjectionStyles(styleProp) {
-                var _a, _b;
                 if (!this.instance || this.isSVG)
                     return undefined;
                 if (!this.isVisible) {
@@ -6387,7 +6557,7 @@
                     this.needsReset = false;
                     styles.opacity = "";
                     styles.pointerEvents =
-                        resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || "";
+                        resolveMotionValue(styleProp?.pointerEvents) || "";
                     styles.transform = transformTemplate
                         ? transformTemplate(this.latestValues, "")
                         : "none";
@@ -6402,7 +6572,7 @@
                                 ? this.latestValues.opacity
                                 : 1;
                         emptyStyles.pointerEvents =
-                            resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || "";
+                            resolveMotionValue(styleProp?.pointerEvents) || "";
                     }
                     if (this.hasProjected && !hasTransform(this.latestValues)) {
                         emptyStyles.transform = transformTemplate
@@ -6427,7 +6597,9 @@
                      */
                     styles.opacity =
                         lead === this
-                            ? (_b = (_a = valuesToRender.opacity) !== null && _a !== void 0 ? _a : this.latestValues.opacity) !== null && _b !== void 0 ? _b : 1
+                            ? valuesToRender.opacity ??
+                                this.latestValues.opacity ??
+                                1
                             : this.preserveOpacity
                                 ? this.latestValues.opacity
                                 : valuesToRender.opacityExit;
@@ -6488,7 +6660,7 @@
                 if (this.options.layoutId) {
                     styles.pointerEvents =
                         lead === this
-                            ? resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || ""
+                            ? resolveMotionValue(styleProp?.pointerEvents) || ""
                             : "none";
                 }
                 return styles;
@@ -6498,7 +6670,7 @@
             }
             // Only run on root
             resetTree() {
-                this.root.nodes.forEach((node) => { var _a; return (_a = node.currentAnimation) === null || _a === void 0 ? void 0 : _a.stop(); });
+                this.root.nodes.forEach((node) => node.currentAnimation?.stop());
                 this.root.nodes.forEach(clearMeasurements);
                 this.root.sharedNodes.clear();
             }
@@ -6508,8 +6680,7 @@
         node.updateLayout();
     }
     function notifyLayoutUpdate(node) {
-        var _a;
-        const snapshot = ((_a = node.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) || node.snapshot;
+        const snapshot = node.resumeFrom?.snapshot || node.snapshot;
         if (node.isLead() &&
             node.layout &&
             snapshot &&
@@ -6709,8 +6880,7 @@
                 !isNear(aspectRatio(snapshot), aspectRatio(layout), 0.2)));
     }
     function checkNodeWasScrollRoot(node) {
-        var _a;
-        return node !== node.root && ((_a = node.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot);
+        return node !== node.root && node.scroll?.wasRoot;
     }
 
     function addDomEvent(target, eventName, handler, options = { passive: true }) {
@@ -6968,7 +7138,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    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)) {
@@ -7009,7 +7179,7 @@
 
     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();
         });
@@ -7427,10 +7597,10 @@
          * 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))) {
@@ -7456,11 +7626,10 @@
          * 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];
                 }
@@ -7678,7 +7847,6 @@
     }
 
     function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
-        var _a;
         const { style } = props;
         const newValues = {};
         for (const key in style) {
@@ -7686,7 +7854,7 @@
                 (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];
             }
         }
@@ -7929,7 +8097,7 @@
          */
         loadExternalIsValidProp(require("@emotion/is-prop-valid").default);
     }
-    catch (_a) {
+    catch {
         // We don't need to actually do anything here - the fallback is the existing `isPropValid`.
     }
     function filterProps(props, isDom, forwardMotionProps) {
@@ -8088,7 +8256,6 @@
         return shouldBlock;
     }
     function animateTarget(visualElement, targetAndTransition, { delay = 0, transitionOverride, type } = {}) {
-        var _a;
         let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = targetAndTransition;
         if (transitionOverride)
             transition = transitionOverride;
@@ -8097,7 +8264,7 @@
             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 &&
@@ -8143,9 +8310,8 @@
     }
 
     function animateVariant(visualElement, variant, options = {}) {
-        var _a;
         const resolved = resolveVariant(visualElement, variant, options.type === "exit"
-            ? (_a = visualElement.presenceContext) === null || _a === void 0 ? void 0 : _a.custom
+            ? visualElement.presenceContext?.custom
             : undefined);
         let { transition = visualElement.getDefaultTransition() || {} } = resolved || {};
         if (options.transitionOverride) {
@@ -8276,9 +8442,8 @@
          * each active animation type into an object of resolved values for it.
          */
         const buildResolvedTypeValues = (type) => (acc, definition) => {
-            var _a;
             const resolved = resolveVariant(visualElement, definition, type === "exit"
-                ? (_a = visualElement.presenceContext) === null || _a === void 0 ? void 0 : _a.custom
+                ? visualElement.presenceContext?.custom
                 : undefined);
             if (resolved) {
                 const { transition, transitionEnd, ...target } = resolved;
@@ -8526,7 +8691,7 @@
                     if (motionValue)
                         motionValue.liveStyle = true;
                     // @ts-expect-error - @mattgperry to figure if we should do something here
-                    fallbackAnimation[key] = fallbackTarget !== null && fallbackTarget !== void 0 ? fallbackTarget : null;
+                    fallbackAnimation[key] = fallbackTarget ?? null;
                 });
                 animations.push({ animation: fallbackAnimation });
             }
@@ -8543,12 +8708,11 @@
          * Change whether a certain animation type is active.
          */
         function setActive(type, isActive) {
-            var _a;
             // If the active state hasn't changed, we can safely do nothing here
             if (state[type].isActive === isActive)
                 return Promise.resolve();
             // Propagate active change to children
-            (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach((child) => { var _a; return (_a = child.animationState) === null || _a === void 0 ? void 0 : _a.setActive(type, isActive); });
+            visualElement.variantChildren?.forEach((child) => child.animationState?.setActive(type, isActive));
             state[type].isActive = isActive;
             const animations = animateChanges(type);
             for (const key in state) {
@@ -8634,9 +8798,8 @@
             }
         }
         unmount() {
-            var _a;
             this.node.animationState.reset();
-            (_a = this.unmountControls) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.unmountControls?.();
         }
     }
 
@@ -9104,11 +9267,8 @@
                 onDrag && onDrag(event, info);
             };
             const onSessionEnd = (event, info) => this.stop(event, info);
-            const resumeAnimation = () => eachAxis((axis) => {
-                var _a;
-                return this.getAnimationState(axis) === "paused" &&
-                    ((_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.play());
-            });
+            const resumeAnimation = () => eachAxis((axis) => this.getAnimationState(axis) === "paused" &&
+                this.getAxisMotionValue(axis).animation?.play());
             const { dragSnapToOrigin } = this.getProps();
             this.panSession = new PanSession(originEvent, {
                 onSessionStart,
@@ -9163,12 +9323,11 @@
             axisValue.set(next);
         }
         resolveConstraints() {
-            var _a;
             const { dragConstraints, dragElastic } = this.getProps();
             const layout = this.visualElement.projection &&
                 !this.visualElement.projection.layout
                 ? this.visualElement.projection.measure(false)
-                : (_a = this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout;
+                : this.visualElement.projection?.layout;
             const prevConstraints = this.constraints;
             if (dragConstraints && isRefObject(dragConstraints)) {
                 if (!this.constraints) {
@@ -9271,11 +9430,10 @@
             eachAxis((axis) => this.getAxisMotionValue(axis).stop());
         }
         pauseAnimation() {
-            eachAxis((axis) => { var _a; return (_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.pause(); });
+            eachAxis((axis) => this.getAxisMotionValue(axis).animation?.pause());
         }
         getAnimationState(axis) {
-            var _a;
-            return (_a = this.getAxisMotionValue(axis).animation) === null || _a === void 0 ? void 0 : _a.state;
+            return this.getAxisMotionValue(axis).animation?.state;
         }
         /**
          * Drag works differently depending on which props are provided.
@@ -9936,7 +10094,6 @@
     }
 
     function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {
-        var _a, _b;
         const { visualElement: parent } = React$1.useContext(MotionContext);
         const lazyContext = React$1.useContext(LazyContext);
         const presenceContext = React$1.useContext(PresenceContext);
@@ -9986,8 +10143,8 @@
          */
         const optimisedAppearId = props[optimizedAppearDataAttribute];
         const wantsHandoff = React$1.useRef(Boolean(optimisedAppearId) &&
-            !((_a = window.MotionHandoffIsComplete) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId)) &&
-            ((_b = window.MotionHasOptimisedAnimation) === null || _b === void 0 ? void 0 : _b.call(window, optimisedAppearId)));
+            !window.MotionHandoffIsComplete?.(optimisedAppearId) &&
+            window.MotionHasOptimisedAnimation?.(optimisedAppearId));
         useIsomorphicLayoutEffect(() => {
             if (!visualElement)
                 return;
@@ -10018,8 +10175,7 @@
             if (wantsHandoff.current) {
                 // This ensures all future calls to animateChanges() in this component will run in useEffect
                 queueMicrotask(() => {
-                    var _a;
-                    (_a = window.MotionHandoffMarkAsComplete) === null || _a === void 0 ? void 0 : _a.call(window, optimisedAppearId);
+                    window.MotionHandoffMarkAsComplete?.(optimisedAppearId);
                 });
                 wantsHandoff.current = false;
             }
@@ -10067,7 +10223,6 @@
      * component "offline", or outside the React render cycle.
      */
     function createRendererMotionComponent({ preloadedFeatures, createVisualElement, useRender, useVisualState, Component, }) {
-        var _a, _b;
         preloadedFeatures && loadFeatures(preloadedFeatures);
         function MotionComponent(props, externalRef) {
             /**
@@ -10103,7 +10258,7 @@
         }
         MotionComponent.displayName = `motion.${typeof Component === "string"
         ? Component
-        : `create(${(_b = (_a = Component.displayName) !== null && _a !== void 0 ? _a : Component.name) !== null && _b !== void 0 ? _b : ""})`}`;
+        : `create(${Component.displayName ?? Component.name ?? ""})`}`;
         const ForwardRefMotionComponent = React$1.forwardRef(MotionComponent);
         ForwardRefMotionComponent[motionComponentSymbol] = Component;
         return ForwardRefMotionComponent;
@@ -10134,7 +10289,7 @@
             return {};
         const combined = { ...drag, ...layout };
         return {
-            MeasureLayout: (drag === null || drag === void 0 ? void 0 : drag.isEnabled(props)) || (layout === null || layout === void 0 ? void 0 : layout.isEnabled(props))
+            MeasureLayout: drag?.isEnabled(props) || layout?.isEnabled(props)
                 ? combined.MeasureLayout
                 : undefined,
             ProjectionNode: combined.ProjectionNode,
@@ -10920,7 +11075,6 @@
      * calculate an absolute time for the next keyframes.
      */
     function calcNextTime(current, next, prev, labels) {
-        var _a;
         if (typeof next === "number") {
             return next;
         }
@@ -10931,7 +11085,7 @@
             return prev;
         }
         else {
-            return (_a = labels.get(next)) !== null && _a !== void 0 ? _a : current;
+            return labels.get(next) ?? current;
         }
     }
 
@@ -11044,7 +11198,7 @@
                 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,
@@ -11066,7 +11220,7 @@
                     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
@@ -11369,7 +11523,7 @@
             else {
                 animations = animateSubject(subjectOrSequence, optionsOrKeyframes, options, scope);
             }
-            const animation = new GroupPlaybackControls(animations);
+            const animation = new GroupAnimationWithThen(animations);
             if (scope) {
                 scope.animations.push(animation);
             }
@@ -11379,125 +11533,6 @@
     }
     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;
@@ -11517,13 +11552,15 @@
                 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;
@@ -11531,7 +11568,7 @@
 
     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;
     };
@@ -11570,8 +11607,7 @@
         }
     }
     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,
@@ -11600,14 +11636,14 @@
                 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);
                 }
             });
         };
@@ -11986,7 +12022,6 @@
         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.
@@ -12004,7 +12039,7 @@
             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);
             }
         };
@@ -12235,8 +12270,8 @@
                 values.scrollYProgress.set(y.progress);
             }, {
                 ...options,
-                container: (container === null || container === void 0 ? void 0 : container.current) || undefined,
-                target: (target === null || target === void 0 ? void 0 : target.current) || undefined,
+                container: container?.current || undefined,
+                target: target?.current || undefined,
             });
         }, [container, target, JSON.stringify(options.offset)]);
         return values;
@@ -12894,7 +12929,6 @@
     };
 
     function handoffOptimizedAppearAnimation(elementId, valueName, frame) {
-        var _a;
         const storeId = appearStoreId(elementId, valueName);
         const optimisedAnimation = appearAnimationStore.get(storeId);
         if (!optimisedAnimation) {
@@ -12902,8 +12936,7 @@
         }
         const { animation, startTime } = optimisedAnimation;
         function cancelAnimation() {
-            var _a;
-            (_a = window.MotionCancelOptimisedAnimation) === null || _a === void 0 ? void 0 : _a.call(window, elementId, valueName, frame);
+            window.MotionCancelOptimisedAnimation?.(elementId, valueName, frame);
         }
         /**
          * We can cancel the animation once it's finished now that we've synced
@@ -12913,7 +12946,7 @@
          * older browsers.
          */
         animation.onfinish = cancelAnimation;
-        if (startTime === null || ((_a = window.MotionHandoffIsComplete) === null || _a === void 0 ? void 0 : _a.call(window, elementId))) {
+        if (startTime === null || window.MotionHandoffIsComplete?.(elementId)) {
             /**
              * If the startTime is null, this animation is the Paint Ready detection animation
              * and we can cancel it immediately without handoff.
@@ -13047,18 +13080,16 @@
                 }
             };
             window.MotionCheckAppearSync = (visualElement, valueName, value) => {
-                var _a, _b;
                 const appearId = getOptimisedAppearId(visualElement);
                 if (!appearId)
                     return;
-                const valueIsOptimised = (_a = window.MotionHasOptimisedAnimation) === null || _a === void 0 ? void 0 : _a.call(window, appearId, valueName);
-                const externalAnimationValue = (_b = visualElement.props.values) === null || _b === void 0 ? void 0 : _b[valueName];
+                const valueIsOptimised = window.MotionHasOptimisedAnimation?.(appearId, valueName);
+                const externalAnimationValue = visualElement.props.values?.[valueName];
                 if (!valueIsOptimised || !externalAnimationValue)
                     return;
                 const removeSyncCheck = value.on("change", (latestValue) => {
-                    var _a;
                     if (externalAnimationValue.get() !== latestValue) {
-                        (_a = window.MotionCancelOptimisedAnimation) === null || _a === void 0 ? void 0 : _a.call(window, appearId, valueName);
+                        window.MotionCancelOptimisedAnimation?.(appearId, valueName);
                         removeSyncCheck();
                     }
                 });