framer-motion 12.6.3-alpha.0 → 12.6.3

package/dist/cjs/client.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var create = require('./create-CTAzqVbr.js');
+var create = require('./create-B2InJs4e.js');
 require('motion-dom');
 require('motion-utils');
 require('react/jsx-runtime');

package/dist/cjs/{create-CTAzqVbr.js → create-B2InJs4e.js}

@@ -477,11 +477,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";
@@ -869,8 +868,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);
                 });
             }
         });
@@ -957,7 +955,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;
@@ -1038,7 +1036,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) {
@@ -1177,7 +1175,6 @@ class DOMKeyframesResolver extends KeyframeResolver {
         }
     }
     measureEndState() {
-        var _a;
         const { element, name, unresolvedKeyframes } = this;
         if (!element || !element.current)
             return;
@@ -1190,7 +1187,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)
@@ -1546,13 +1543,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]++;
     }
@@ -1856,9 +1852,17 @@ function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce
             const easing = motionDom.generateLinearEasing((progress) => generator.next(calculatedDuration * progress).value, calculatedDuration, 30);
             return calculatedDuration + "ms " + easing;
         },
+        toTransition: () => { },
     };
     return generator;
 }
+spring.applyToOptions = (options) => {
+    const generatorOptions = motionDom.createGeneratorEasing(options, 100, spring);
+    options.ease = motionDom.supportsLinearEasing() ? generatorOptions.ease : "easeOut";
+    options.duration = motionUtils.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];
@@ -2180,7 +2184,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();
@@ -2430,7 +2434,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;
@@ -2448,13 +2452,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") {
@@ -2495,6 +2498,9 @@ class MainThreadAnimation extends BaseAnimation {
         this.startTime = 0;
         return this.tick(time, true);
     }
+    get finished() {
+        return this.currentFinishedPromise;
+    }
 }
 // Legacy interface
 function animateValue(options) {
@@ -2514,35 +2520,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 = motionDom.mapEasingToNativeEasing(ease, duration);
-    /**
-     * If this is an easing array, apply to keyframes, not animation as a whole
-     */
-    if (Array.isArray(easing))
-        keyframeOptions.easing = easing;
-    if (motionDom.statsBuffer.value) {
-        motionDom.activeAnimations.waapi++;
-    }
-    const animation = element.animate(keyframeOptions, {
-        delay,
-        duration,
-        easing: !Array.isArray(easing) ? easing : "linear",
-        fill: "both",
-        iterations: repeat + 1,
-        direction: repeatType === "reverse" ? "alternate" : "normal",
-    });
-    if (motionDom.statsBuffer.value) {
-        animation.finished.finally(() => {
-            motionDom.activeAnimations.waapi--;
-        });
-    }
-    return animation;
-}
-
 const supportsWaapi = /*@__PURE__*/ motionUtils.memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
 
 /**
@@ -2650,10 +2627,10 @@ class AcceleratedAnimation extends BaseAnimation {
             ease = pregeneratedAnimation.ease;
             type = "keyframes";
         }
-        const animation = startWaapiAnimation(motionValue.owner.current, name, keyframes, { ...this.options, duration, times, ease });
+        const animation = motionDom.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) {
             motionDom.attachTimeline(animation, this.pendingTimeline);
             this.pendingTimeline = undefined;
@@ -2712,6 +2689,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)
@@ -2983,7 +2963,7 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
             });
             // We still want to return some animation controls here rather
             // than returning undefined
-            return new motionDom.GroupPlaybackControls([]);
+            return new motionDom.GroupAnimationWithThen([]);
         }
     }
     /**
@@ -3561,7 +3541,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) `;
     }
@@ -3664,7 +3644,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.
              */
@@ -4195,12 +4175,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;
@@ -4212,10 +4191,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;
             }
             /**
@@ -4318,7 +4296,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
@@ -4336,7 +4313,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)
@@ -4461,7 +4438,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;
@@ -4469,7 +4445,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;
             }
             /**
@@ -4581,8 +4557,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();
@@ -4769,14 +4744,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;
@@ -4850,7 +4823,6 @@ function createProjectionNode$1({ attachResizeListener, defaultParent, measureSc
             visualElement.scheduleRender();
         }
         getProjectionStyles(styleProp) {
-            var _a, _b;
             if (!this.instance || this.isSVG)
                 return undefined;
             if (!this.isVisible) {
@@ -4864,7 +4836,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";
@@ -4879,7 +4851,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
@@ -4904,7 +4876,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;
@@ -4965,7 +4939,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;
@@ -4975,7 +4949,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();
         }
@@ -4985,8 +4959,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 &&
@@ -5192,8 +5165,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;
 }
 
 function addDomEvent(target, eventName, handler, options = { passive: true }) {
@@ -5451,7 +5423,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                motionUtils.warnOnce(nextValue.version === "12.6.3-alpha.0", `Attempting to mix Motion versions ${nextValue.version} with 12.6.3-alpha.0 may not work as expected.`);
+                motionUtils.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)) {
@@ -5492,7 +5464,7 @@ function updateMotionValuesFromProps(element, next, prev) {
 
 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();
     });
@@ -5910,10 +5882,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))) {
@@ -5939,11 +5911,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];
             }
@@ -6161,7 +6132,6 @@ function isForcedMotionValue(key, { layout, layoutId }) {
 }
 
 function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
-    var _a;
     const { style } = props;
     const newValues = {};
     for (const key in style) {
@@ -6169,7 +6139,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];
         }
     }
@@ -6303,7 +6273,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) {
@@ -6371,11 +6341,6 @@ function addValueToWillChange(visualElement, key) {
     if (isWillChangeMotionValue(willChange)) {
         return willChange.add(key);
     }
-    else if (!willChange && motionUtils.MotionGlobalConfig.WillChange) {
-        const newWillChange = new motionUtils.MotionGlobalConfig.WillChange("auto");
-        visualElement.addValue("willChange", newWillChange);
-        newWillChange.add(key);
-    }
 }
 
 /**
@@ -6390,7 +6355,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;
@@ -6399,7 +6363,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 &&
@@ -6445,9 +6409,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) {
@@ -6578,9 +6541,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;
@@ -6828,7 +6790,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 });
         }
@@ -6845,12 +6807,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) {
@@ -6936,9 +6897,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?.();
     }
 }
 
@@ -7406,11 +7366,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,
@@ -7465,12 +7422,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) {
@@ -7573,11 +7529,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.
@@ -8238,7 +8193,6 @@ function useMotionRef(visualState, visualElement, externalRef) {
 }
 
 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);
@@ -8288,8 +8242,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;
@@ -8320,8 +8274,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;
         }
@@ -8369,7 +8322,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) {
         /**
@@ -8405,7 +8357,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;
@@ -8437,7 +8389,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,
@@ -8998,7 +8950,6 @@ exports.anticipate = anticipate;
 exports.backIn = backIn;
 exports.backInOut = backInOut;
 exports.backOut = backOut;
-exports.browserNumberValueTypes = browserNumberValueTypes;
 exports.buildTransform = buildTransform;
 exports.calcLength = calcLength;
 exports.camelToDash = camelToDash;
@@ -9027,7 +8978,6 @@ exports.fillOffset = fillOffset;
 exports.filterProps = filterProps;
 exports.findSpring = findSpring;
 exports.gestureAnimations = gestureAnimations;
-exports.getFinalKeyframe = getFinalKeyframe;
 exports.getOptimisedAppearId = getOptimisedAppearId;
 exports.hasReducedMotionListener = hasReducedMotionListener;
 exports.inertia = inertia;
@@ -9058,8 +9008,6 @@ exports.reverseEasing = reverseEasing;
 exports.rootProjectionNode = rootProjectionNode;
 exports.setTarget = setTarget;
 exports.spring = spring;
-exports.startWaapiAnimation = startWaapiAnimation;
-exports.supportsWaapi = supportsWaapi;
 exports.transformProps = transformProps;
 exports.useConstant = useConstant;
 exports.useIsPresent = useIsPresent;