motion 12.6.2 → 12.6.3

package/dist/cjs/react-client.js

@@ -13,7 +13,7 @@ function isAnimationControls(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();
     });
@@ -61,11 +61,8 @@ function removeItem(arr, item) {
         arr.splice(index, 1);
 }
 
-/*#__NO_SIDE_EFFECTS__*/
-const noop = (any) => any;
-
-let warning = noop;
-let invariant = noop;
+let warning = () => { };
+let invariant = () => { };
 if (process.env.NODE_ENV !== "production") {
     warning = (check, message) => {
         if (!check && typeof console !== "undefined") {
@@ -94,6 +91,9 @@ function memo(callback) {
     };
 }
 
+/*#__NO_SIDE_EFFECTS__*/
+const noop = (any) => any;
+
 /*
   Progress within given range
 
@@ -182,15 +182,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
@@ -261,48 +260,16 @@ 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);
-    }
-}
-
-function getValueTransition(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);
+class GroupAnimationWithThen extends GroupAnimation {
+    then(onResolve, _onReject) {
+        return this.finished.finally(onResolve).then(() => { });
     }
-    return duration >= maxGeneratorDuration ? Infinity : duration;
 }
 
-function isGenerator(type) {
-    return typeof type === "function";
-}
-
-function attachTimeline(animation, timeline) {
-    animation.timeline = timeline;
-    animation.onfinish = null;
-}
+const statsBuffer = {
+    value: null,
+    addProjectionMetrics: null,
+};
 
 const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
 
@@ -310,13 +277,11 @@ const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0]
  * 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(() => {
@@ -337,20 +302,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",
@@ -362,6 +320,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;
@@ -381,6 +340,85 @@ 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 getValueTransition(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
@@ -390,11 +428,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
@@ -612,21 +645,16 @@ function setDragLock(axis) {
 }
 
 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);
@@ -825,7 +853,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;
             }
         }
@@ -858,7 +886,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
@@ -1486,11 +1514,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";
@@ -1878,8 +1905,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);
                 });
             }
         });
@@ -1966,7 +1992,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;
@@ -2047,7 +2073,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) {
@@ -2186,7 +2212,6 @@ class DOMKeyframesResolver extends KeyframeResolver {
         }
     }
     measureEndState() {
-        var _a;
         const { element, name, unresolvedKeyframes } = this;
         if (!element || !element.current)
             return;
@@ -2199,7 +2224,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)
@@ -2580,13 +2605,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]++;
     }
@@ -2890,9 +2914,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;
+};
 
 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];
@@ -3214,7 +3246,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();
@@ -3463,7 +3495,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;
@@ -3481,13 +3513,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") {
@@ -3527,6 +3558,9 @@ class MainThreadAnimation extends BaseAnimation {
         this.startTime = 0;
         return this.tick(time, true);
     }
+    get finished() {
+        return this.currentFinishedPromise;
+    }
 }
 
 /**
@@ -3542,27 +3576,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"));
 
 /**
@@ -3673,7 +3686,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;
@@ -3732,6 +3745,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)
@@ -3997,7 +4013,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([]);
         }
     }
     /**
@@ -4025,7 +4041,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;
@@ -4034,7 +4049,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 &&
@@ -4080,9 +4095,8 @@ function animateTarget(visualElement, targetAndTransition, { delay = 0, transiti
 }
 
 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) {
@@ -4231,9 +4245,8 @@ function createAnimationState(visualElement) {
      * 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;
@@ -4481,7 +4494,7 @@ function createAnimationState(visualElement) {
                 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 });
         }
@@ -4498,12 +4511,11 @@ function createAnimationState(visualElement) {
      * 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) {
@@ -4589,9 +4601,8 @@ class AnimationFeature extends Feature {
         }
     }
     unmount() {
-        var _a;
         this.node.animationState.reset();
-        (_a = this.unmountControls) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.unmountControls?.();
     }
 }
 
@@ -5318,11 +5329,8 @@ class VisualElementDragControls {
             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,
@@ -5377,12 +5385,11 @@ class VisualElementDragControls {
         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) {
@@ -5485,11 +5492,10 @@ class VisualElementDragControls {
         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.
@@ -6371,7 +6377,7 @@ function buildProjectionTransform(delta, treeScale, latestTransform) {
      */
     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) `;
     }
@@ -6447,7 +6453,7 @@ function cancelTreeOptimisedTransformAnimations(projectionNode) {
 }
 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.
              */
@@ -6965,12 +6971,11 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
             };
         }
         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;
@@ -6982,10 +6987,9 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
             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;
             }
             /**
@@ -7088,7 +7092,6 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
             }
         }
         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
@@ -7106,7 +7109,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
             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)
@@ -7225,7 +7228,6 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
                 this.layout);
         }
         calcProjection() {
-            var _a;
             const lead = this.getLead();
             const isShared = Boolean(this.resumingFrom) || this !== lead;
             let canSkip = true;
@@ -7233,7 +7235,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
              * 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;
             }
             /**
@@ -7339,8 +7341,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
             // 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();
@@ -7524,14 +7525,12 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
             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;
@@ -7605,7 +7604,6 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
             visualElement.scheduleRender();
         }
         getProjectionStyles(styleProp) {
-            var _a, _b;
             if (!this.instance || this.isSVG)
                 return undefined;
             if (!this.isVisible) {
@@ -7619,7 +7617,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
                 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";
@@ -7634,7 +7632,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
                             ? 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
@@ -7659,7 +7657,9 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
                  */
                 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;
@@ -7720,7 +7720,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
             if (this.options.layoutId) {
                 styles.pointerEvents =
                     lead === this
-                        ? resolveMotionValue(styleProp === null || styleProp === void 0 ? void 0 : styleProp.pointerEvents) || ""
+                        ? resolveMotionValue(styleProp?.pointerEvents) || ""
                         : "none";
             }
             return styles;
@@ -7730,7 +7730,7 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
         }
         // 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();
         }
@@ -7740,8 +7740,7 @@ function updateLayout(node) {
     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 &&
@@ -7941,8 +7940,7 @@ function shouldAnimatePositionOnly(animationType, snapshot, layout) {
             !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;
 }
 
 const DocumentProjectionNode = createProjectionNode$1({
@@ -8332,7 +8330,6 @@ function useMotionRef(visualState, visualElement, externalRef) {
 const useIsomorphicLayoutEffect = isBrowser ? react.useLayoutEffect : react.useEffect;
 
 function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {
-    var _a, _b;
     const { visualElement: parent } = react.useContext(MotionContext);
     const lazyContext = react.useContext(LazyContext);
     const presenceContext = react.useContext(PresenceContext);
@@ -8382,8 +8379,8 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
      */
     const optimisedAppearId = props[optimizedAppearDataAttribute];
     const wantsHandoff = react.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;
@@ -8414,8 +8411,7 @@ function useVisualElement(Component, visualState, props, createVisualElement, Pr
         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;
         }
@@ -8463,7 +8459,6 @@ function getClosestProjectingNode(visualElement) {
  * 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) {
         /**
@@ -8499,7 +8494,7 @@ function createRendererMotionComponent({ preloadedFeatures, createVisualElement,
     }
     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.forwardRef(MotionComponent);
     ForwardRefMotionComponent[motionComponentSymbol] = Component;
     return ForwardRefMotionComponent;
@@ -8531,7 +8526,7 @@ function getProjectionFunctionality(props) {
         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,
@@ -8810,7 +8805,7 @@ try {
      */
     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) {
@@ -9131,7 +9126,6 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
 }
 
 function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
-    var _a;
     const { style } = props;
     const newValues = {};
     for (const key in style) {
@@ -9139,7 +9133,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];
         }
     }
@@ -9336,7 +9330,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)) {
@@ -9760,10 +9754,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))) {
@@ -9789,11 +9783,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];
             }