framer-motion 7.2.0 → 7.3.1

package/dist/projection.dev.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
     typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Projection = {}));
-})(this, (function (exports) { 'use strict';
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Projection = {}, global.react));
+})(this, (function (exports, react) { 'use strict';
 
     const defaultTimestep = (1 / 60) * 1000;
     const getCurrentTime = typeof performance !== "undefined"
@@ -1242,7 +1242,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 = "7.2.0";
+            this.version = "7.3.1";
             /**
              * Duration, in milliseconds, since last updating frame.
              *
@@ -1520,9 +1520,7 @@
         return new MotionValue(init);
     }
 
-    const isMotionValue = (value) => {
-        return Boolean(value !== null && typeof value === "object" && value.getVelocity);
-    };
+    const isMotionValue = (value) => value === undefined ? false : !!value.getVelocity;
 
     /**
      * Converts seconds to milliseconds
@@ -1644,10 +1642,13 @@
             transitionFactory =
                 defaultTransitions[valueKey] || defaultTransitions.default;
         }
-        return Object.assign({ to }, transitionFactory(to));
+        return { to, ...transitionFactory(to) };
     };
 
-    const int = Object.assign(Object.assign({}, number), { transform: Math.round });
+    const int = {
+        ...number,
+        transform: Math.round,
+    };
 
     const numberValueTypes = {
         // Border props
@@ -1719,11 +1720,23 @@
     /**
      * A map of default value types for common values
      */
-    const defaultValueTypes = Object.assign(Object.assign({}, numberValueTypes), { 
+    const defaultValueTypes = {
+        ...numberValueTypes,
         // Color props
-        color, backgroundColor: color, outlineColor: color, fill: color, stroke: color, 
+        color,
+        backgroundColor: color,
+        outlineColor: color,
+        fill: color,
+        stroke: color,
         // Border props
-        borderColor: color, borderTopColor: color, borderRightColor: color, borderBottomColor: color, borderLeftColor: color, filter, WebkitFilter: filter });
+        borderColor: color,
+        borderTopColor: color,
+        borderRightColor: color,
+        borderBottomColor: color,
+        borderLeftColor: color,
+        filter,
+        WebkitFilter: filter,
+    };
     /**
      * Gets the default ValueType for the provided value key
      */
@@ -1755,17 +1768,15 @@
      * This filters out orchestration options and returns true
      * if any options are left.
      */
-    function isTransitionDefined(_a) {
-        var transition = __rest(_a, ["when", "delay", "delayChildren", "staggerChildren", "staggerDirection", "repeat", "repeatType", "repeatDelay", "from"]);
+    function isTransitionDefined({ when, delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, ...transition }) {
         return !!Object.keys(transition).length;
     }
     let legacyRepeatWarning = false;
     /**
      * Convert Framer Motion's Transition type into Popmotion-compatible options.
      */
-    function convertTransitionToAnimationOptions(_a) {
-        var { ease, times, yoyo, flip, loop } = _a, transition = __rest(_a, ["ease", "times", "yoyo", "flip", "loop"]);
-        const options = Object.assign({}, transition);
+    function convertTransitionToAnimationOptions({ ease, times, yoyo, flip, loop, ...transition }) {
+        const options = { ...transition };
         if (times)
             options["offset"] = times;
         /**
@@ -1830,26 +1841,30 @@
         return options;
     }
     function getPopmotionAnimationOptions(transition, options, key) {
-        var _a;
-        if (Array.isArray(options.to)) {
-            (_a = transition.duration) !== null && _a !== void 0 ? _a : (transition.duration = 0.8);
+        if (Array.isArray(options.to) && transition.duration === undefined) {
+            transition.duration = 0.8;
         }
         hydrateKeyframes(options);
         /**
          * Get a default transition if none is determined to be defined.
          */
         if (!isTransitionDefined(transition)) {
-            transition = Object.assign(Object.assign({}, transition), getDefaultTransition(key, options.to));
+            transition = {
+                ...transition,
+                ...getDefaultTransition(key, options.to),
+            };
         }
-        return Object.assign(Object.assign({}, options), convertTransitionToAnimationOptions(transition));
+        return {
+            ...options,
+            ...convertTransitionToAnimationOptions(transition),
+        };
     }
     /**
      *
      */
     function getAnimation(key, value, target, transition, onComplete) {
-        var _a;
-        const valueTransition = getValueTransition(transition, key);
-        let origin = (_a = valueTransition.from) !== null && _a !== void 0 ? _a : value.get();
+        const valueTransition = getValueTransition(transition, key) || {};
+        let origin = valueTransition.from !== undefined ? valueTransition.from : value.get();
         const isTargetAnimatable = isAnimatable(key, target);
         if (origin === "none" && isTargetAnimatable && typeof target === "string") {
             /**
@@ -1878,24 +1893,25 @@
             };
             return valueTransition.type === "inertia" ||
                 valueTransition.type === "decay"
-                ? inertia(Object.assign(Object.assign({}, options), valueTransition))
-                : animate$1(Object.assign(Object.assign({}, getPopmotionAnimationOptions(valueTransition, options, key)), { onUpdate: (v) => {
-                        var _a;
+                ? inertia({ ...options, ...valueTransition })
+                : animate$1({
+                    ...getPopmotionAnimationOptions(valueTransition, options, key),
+                    onUpdate: (v) => {
                         options.onUpdate(v);
-                        (_a = valueTransition.onUpdate) === null || _a === void 0 ? void 0 : _a.call(valueTransition, v);
-                    }, onComplete: () => {
-                        var _a;
+                        valueTransition.onUpdate && valueTransition.onUpdate(v);
+                    },
+                    onComplete: () => {
                         options.onComplete();
-                        (_a = valueTransition.onComplete) === null || _a === void 0 ? void 0 : _a.call(valueTransition);
-                    } }));
+                        valueTransition.onComplete && valueTransition.onComplete();
+                    },
+                });
         }
         function set() {
-            var _a, _b;
             const finalTarget = resolveFinalValueInKeyframes(target);
             value.set(finalTarget);
             onComplete();
-            (_a = valueTransition === null || valueTransition === void 0 ? void 0 : valueTransition.onUpdate) === null || _a === void 0 ? void 0 : _a.call(valueTransition, finalTarget);
-            (_b = valueTransition === null || valueTransition === void 0 ? void 0 : valueTransition.onComplete) === null || _b === void 0 ? void 0 : _b.call(valueTransition);
+            valueTransition.onUpdate && valueTransition.onUpdate(finalTarget);
+            valueTransition.onComplete && valueTransition.onComplete();
             return { stop: () => { } };
         }
         return !isOriginAnimatable ||
@@ -1940,7 +1956,7 @@
             }
             return () => {
                 clearTimeout(delayTimer);
-                controls === null || controls === void 0 ? void 0 : controls.stop();
+                controls && controls.stop();
             };
         });
     }
@@ -2320,6 +2336,12 @@
             a.y.min === b.y.min &&
             a.y.max === b.y.max);
     }
+    function aspectRatio(box) {
+        return calcLength(box.x) / calcLength(box.y);
+    }
+    function isCloseTo(a, b, max = 0.01) {
+        return distance(a, b) <= max;
+    }
 
     class NodeStack {
         constructor() {
@@ -2473,42 +2495,6 @@
         return [callback("x"), callback("y")];
     }
 
-    /**
-     * A list of all transformable axes. We'll use this list to generated a version
-     * of each axes for each transform.
-     */
-    const transformAxes = ["", "X", "Y", "Z"];
-    /**
-     * An ordered array of each transformable value. By default, transform values
-     * will be sorted to this order.
-     */
-    const order = ["translate", "scale", "rotate", "skew"];
-    /**
-     * Generate a list of every possible transform key.
-     */
-    const transformProps = ["transformPerspective", "x", "y", "z"];
-    order.forEach((operationKey) => transformAxes.forEach((axesKey) => transformProps.push(operationKey + axesKey)));
-    /**
-     * A function to use with Array.sort to sort transform keys by their default order.
-     */
-    function sortTransformProps(a, b) {
-        return transformProps.indexOf(a) - transformProps.indexOf(b);
-    }
-    /**
-     * A quick lookup for transform props.
-     */
-    const transformPropSet = new Set(transformProps);
-    function isTransformProp(key) {
-        return transformPropSet.has(key);
-    }
-    /**
-     * A quick lookup for transform origin props
-     */
-    const transformOriginProps = new Set(["originX", "originY", "originZ"]);
-    function isTransformOriginProp(key) {
-        return transformOriginProps.has(key);
-    }
-
     const compareByDepth = (a, b) => a.depth - b.depth;
 
     class FlatTree {
@@ -2561,6 +2547,7 @@
         hasEverUpdated: false,
     };
 
+    const transformAxes = ["", "X", "Y", "Z"];
     /**
      * We use 1000 as the animation target as 0-1000 maps better to pixels than 0-1
      * which has a noticeable difference in spring animations
@@ -2752,7 +2739,11 @@
                                 this.resumingFrom.resumingFrom = undefined;
                             }
                             this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
-                            const animationOptions = Object.assign(Object.assign({}, getValueTransition(layoutTransition, "layout")), { onPlay: onLayoutAnimationStart, onComplete: onLayoutAnimationComplete });
+                            const animationOptions = {
+                                ...getValueTransition(layoutTransition, "layout"),
+                                onPlay: onLayoutAnimationStart,
+                                onComplete: onLayoutAnimationComplete,
+                            };
                             if (visualElement.shouldReduceMotion) {
                                 animationOptions.delay = 0;
                                 animationOptions.type = false;
@@ -3075,8 +3066,11 @@
                 this.root.scheduleUpdateProjection();
             }
             setOptions(options) {
-                var _a;
-                this.options = Object.assign(Object.assign(Object.assign({}, this.options), options), { crossfade: (_a = options.crossfade) !== null && _a !== void 0 ? _a : true });
+                this.options = {
+                    ...this.options,
+                    ...options,
+                    crossfade: options.crossfade !== undefined ? options.crossfade : true,
+                };
             }
             clearMeasurements() {
                 this.scroll = undefined;
@@ -3258,7 +3252,7 @@
                 var _a;
                 const snapshot = this.snapshot;
                 const snapshotLatestValues = (snapshot === null || snapshot === void 0 ? void 0 : snapshot.latestValues) || {};
-                const mixedValues = Object.assign({}, this.latestValues);
+                const mixedValues = { ...this.latestValues };
                 const targetDelta = createDelta();
                 this.relativeTarget = this.relativeTargetOrigin = undefined;
                 this.attemptToResolveRelativeTarget = !hasOnlyRelativeTargetChanged;
@@ -3311,15 +3305,19 @@
                  */
                 this.pendingAnimation = sync.update(() => {
                     globalProjectionState.hasAnimatedSinceResize = true;
-                    this.currentAnimation = animate(0, animationTarget, Object.assign(Object.assign({}, options), { onUpdate: (latest) => {
+                    this.currentAnimation = animate(0, animationTarget, {
+                        ...options,
+                        onUpdate: (latest) => {
                             var _a;
                             this.mixTargetDelta(latest);
                             (_a = options.onUpdate) === null || _a === void 0 ? void 0 : _a.call(options, latest);
-                        }, onComplete: () => {
+                        },
+                        onComplete: () => {
                             var _a;
                             (_a = options.onComplete) === null || _a === void 0 ? void 0 : _a.call(options);
                             this.completeAnimation();
-                        } }));
+                        },
+                    });
                     if (this.resumingFrom) {
                         this.resumingFrom.currentAnimation = this.currentAnimation;
                     }
@@ -3348,9 +3346,27 @@
                 this.completeAnimation();
             }
             applyTransformsToTarget() {
-                const { targetWithTransforms, target, layout, latestValues } = this.getLead();
+                const lead = this.getLead();
+                let { targetWithTransforms, target, layout, latestValues } = lead;
                 if (!targetWithTransforms || !target || !layout)
                     return;
+                /**
+                 * If we're only animating position, and this element isn't the lead element,
+                 * then instead of projecting into the lead box we instead want to calculate
+                 * a new target that aligns the two boxes but maintains the layout shape.
+                 */
+                if (this !== lead &&
+                    this.layout &&
+                    layout &&
+                    shouldAnimatePositionOnly(this.options.animationType, this.layout.actual, layout.actual)) {
+                    target = this.target || createBox();
+                    const xLength = calcLength(this.layout.actual.x);
+                    target.x.min = lead.target.x.min;
+                    target.x.max = target.x.min + xLength;
+                    const yLength = calcLength(this.layout.actual.y);
+                    target.y.min = lead.target.y.min;
+                    target.y.max = target.y.min + yLength;
+                }
                 copyBoxInto(targetWithTransforms, target);
                 /**
                  * Apply the latest user-set transforms to the targetBox to produce the targetBoxFinal.
@@ -3454,7 +3470,7 @@
                 visualElement.scheduleRender();
             }
             getProjectionStyles(styleProp = {}) {
-                var _a, _b, _c, _d, _e, _f;
+                var _a, _b, _c;
                 // TODO: Return lifecycle-persistent object
                 const styles = {};
                 if (!this.instance || this.isSVG)
@@ -3480,7 +3496,10 @@
                 if (!this.projectionDelta || !this.layout || !lead.target) {
                     const emptyStyles = {};
                     if (this.options.layoutId) {
-                        emptyStyles.opacity = (_b = this.latestValues.opacity) !== null && _b !== void 0 ? _b : 1;
+                        emptyStyles.opacity =
+                            this.latestValues.opacity !== undefined
+                                ? this.latestValues.opacity
+                                : 1;
                         emptyStyles.pointerEvents =
                             resolveMotionValue(styleProp.pointerEvents) || "";
                     }
@@ -3507,7 +3526,7 @@
                      */
                     styles.opacity =
                         lead === this
-                            ? (_d = (_c = valuesToRender.opacity) !== null && _c !== void 0 ? _c : this.latestValues.opacity) !== null && _d !== void 0 ? _d : 1
+                            ? (_c = (_b = valuesToRender.opacity) !== null && _b !== void 0 ? _b : this.latestValues.opacity) !== null && _c !== void 0 ? _c : 1
                             : this.preserveOpacity
                                 ? this.latestValues.opacity
                                 : valuesToRender.opacityExit;
@@ -3519,8 +3538,12 @@
                      */
                     styles.opacity =
                         lead === this
-                            ? (_e = valuesToRender.opacity) !== null && _e !== void 0 ? _e : ""
-                            : (_f = valuesToRender.opacityExit) !== null && _f !== void 0 ? _f : 0;
+                            ? valuesToRender.opacity !== undefined
+                                ? valuesToRender.opacity
+                                : ""
+                            : valuesToRender.opacityExit !== undefined
+                                ? valuesToRender.opacityExit
+                                : 0;
                 }
                 /**
                  * Apply scale correction
@@ -3568,16 +3591,17 @@
         node.updateLayout();
     }
     function notifyLayoutUpdate(node) {
-        var _a, _b, _c, _d;
-        const snapshot = (_b = (_a = node.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) !== null && _b !== void 0 ? _b : node.snapshot;
+        var _a, _b, _c;
+        const snapshot = ((_a = node.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) || node.snapshot;
         if (node.isLead() &&
             node.layout &&
             snapshot &&
             node.hasListeners("didUpdate")) {
             const { actual: layout, measured: measuredLayout } = node.layout;
+            const { animationType } = node.options;
             // TODO Maybe we want to also resize the layout snapshot so we don't trigger
             // animations for instance if layout="size" and an element has only changed position
-            if (node.options.animationType === "size") {
+            if (animationType === "size") {
                 eachAxis((axis) => {
                     const axisSnapshot = snapshot.isShared
                         ? snapshot.measured[axis]
@@ -3587,7 +3611,7 @@
                     axisSnapshot.max = axisSnapshot.min + length;
                 });
             }
-            else if (node.options.animationType === "position") {
+            else if (shouldAnimatePositionOnly(animationType, snapshot.layout, layout)) {
                 eachAxis((axis) => {
                     const axisSnapshot = snapshot.isShared
                         ? snapshot.measured[axis]
@@ -3636,7 +3660,7 @@
             });
         }
         else if (node.isLead()) {
-            (_d = (_c = node.options).onExitComplete) === null || _d === void 0 ? void 0 : _d.call(_c);
+            (_c = (_b = node.options).onExitComplete) === null || _c === void 0 ? void 0 : _c.call(_b);
         }
         /**
          * Clearing transition
@@ -3720,6 +3744,11 @@
         roundAxis(box.x);
         roundAxis(box.y);
     }
+    function shouldAnimatePositionOnly(animationType, snapshot, layout) {
+        return (animationType === "position" ||
+            (animationType === "preserve-aspect" &&
+                !isCloseTo(aspectRatio(snapshot), aspectRatio(layout))));
+    }
 
     function addDomEvent(target, eventName, handler, options = { passive: true }) {
         target.addEventListener(eventName, handler, options);
@@ -3753,7 +3782,7 @@
             return rootProjectionNode.current;
         },
         resetTransform: (instance, value) => {
-            instance.style.transform = value !== null && value !== void 0 ? value : "none";
+            instance.style.transform = value !== undefined ? value : "none";
         },
         checkIsScrollRoot: (instance) => Boolean(window.getComputedStyle(instance).position === "fixed"),
     });
@@ -3779,12 +3808,43 @@
         };
     }
 
+    /**
+     * Generate a list of every possible transform key.
+     */
+    const transformPropOrder = [
+        "transformPerspective",
+        "x",
+        "y",
+        "z",
+        "translateX",
+        "translateY",
+        "translateZ",
+        "scale",
+        "scaleX",
+        "scaleY",
+        "rotate",
+        "rotateX",
+        "rotateY",
+        "rotateZ",
+        "skew",
+        "skewX",
+        "skewY",
+    ];
+    /**
+     * A quick lookup for transform props.
+     */
+    const transformProps = new Set(transformPropOrder);
+
     const translateAlias = {
         x: "translateX",
         y: "translateY",
         z: "translateZ",
         transformPerspective: "perspective",
     };
+    /**
+     * A function to use with Array.sort to sort transform keys by their default order.
+     */
+    const sortTransformProps = (a, b) => transformPropOrder.indexOf(a) - transformPropOrder.indexOf(b);
     /**
      * Build a CSS transform style from individual x/y/scale etc properties.
      *
@@ -3796,18 +3856,11 @@
         let transformString = "";
         // Transform keys into their default order - this will determine the output order.
         transformKeys.sort(sortTransformProps);
-        // Track whether the defined transform has a defined z so we don't add a
-        // second to enable hardware acceleration
-        let transformHasZ = false;
         // Loop over each transform and build them into transformString
-        const numTransformKeys = transformKeys.length;
-        for (let i = 0; i < numTransformKeys; i++) {
-            const key = transformKeys[i];
+        for (const key of transformKeys) {
             transformString += `${translateAlias[key] || key}(${transform[key]}) `;
-            if (key === "z")
-                transformHasZ = true;
         }
-        if (!transformHasZ && enableHardwareAcceleration) {
+        if (enableHardwareAcceleration && !transform.z) {
             transformString += "translateZ(0)";
         }
         transformString = transformString.trim();
@@ -3821,13 +3874,6 @@
         }
         return transformString;
     }
-    /**
-     * Build a transformOrigin style. Uses the same defaults as the browser for
-     * undefined origins.
-     */
-    function buildTransformOrigin({ originX = "50%", originY = "50%", originZ = 0, }) {
-        return `${originX} ${originY} ${originZ}`;
-    }
 
     function pixelsToPercent(pixels, axis) {
         if (axis.max === axis.min)
@@ -3912,16 +3958,14 @@
      *
      * @internal
      */
-    function resolveCSSVariables(visualElement, _a, transitionEnd) {
-        var _b;
-        var target = __rest(_a, []);
+    function resolveCSSVariables(visualElement, { ...target }, transitionEnd) {
         const element = visualElement.getInstance();
         if (!(element instanceof Element))
             return { target, transitionEnd };
         // If `transitionEnd` isn't `undefined`, clone it. We could clone `target` and `transitionEnd`
         // only if they change but I think this reads clearer and this isn't a performance-critical path.
         if (transitionEnd) {
-            transitionEnd = Object.assign({}, transitionEnd);
+            transitionEnd = { ...transitionEnd };
         }
         // Go through existing `MotionValue`s and ensure any existing CSS variables are resolved
         visualElement.forEachValue((value) => {
@@ -3946,8 +3990,9 @@
             // If the user hasn't already set this key on `transitionEnd`, set it to the unresolved
             // CSS variable. This will ensure that after the animation the component will reflect
             // changes in the value of the CSS variable.
-            if (transitionEnd)
-                (_b = transitionEnd[key]) !== null && _b !== void 0 ? _b : (transitionEnd[key] = current);
+            if (transitionEnd && transitionEnd[key] === undefined) {
+                transitionEnd[key] = current;
+            }
         }
         return { target, transitionEnd };
     }
@@ -4004,10 +4049,35 @@
         },
     };
 
+    const isBrowser = typeof document !== "undefined";
+
+    // Does this device prefer reduced motion? Returns `null` server-side.
+    const prefersReducedMotion = { current: null };
+    const hasReducedMotionListener = { current: false };
+
+    function initPrefersReducedMotion() {
+        hasReducedMotionListener.current = true;
+        if (!isBrowser)
+            return;
+        if (window.matchMedia) {
+            const motionMediaQuery = window.matchMedia("(prefers-reduced-motion)");
+            const setReducedMotionPreferences = () => (prefersReducedMotion.current = motionMediaQuery.matches);
+            motionMediaQuery.addListener(setReducedMotionPreferences);
+            setReducedMotionPreferences();
+        }
+        else {
+            prefersReducedMotion.current = false;
+        }
+    }
+
     function isWillChangeMotionValue(value) {
         return Boolean(isMotionValue(value) && value.add);
     }
 
+    function isAnimationControls(v) {
+        return typeof v === "object" && typeof v.start === "function";
+    }
+
     /**
      * Check if value is a numerical string, ie a string that is purely a number eg "100" or "-100.1"
      */
@@ -4049,36 +4119,8 @@
      */
     const findValueType = (v) => valueTypes.find(testValueType(v));
 
-    /**
-     * Decides if the supplied variable is an array of variant labels
-     */
-    function isVariantLabels(v) {
-        return Array.isArray(v);
-    }
-    /**
-     * Decides if the supplied variable is variant label
-     */
-    function isVariantLabel(v) {
-        return typeof v === "string" || isVariantLabels(v);
-    }
-    function checkIfControllingVariants(props) {
-        var _a;
-        return (typeof ((_a = props.animate) === null || _a === void 0 ? void 0 : _a.start) === "function" ||
-            isVariantLabel(props.initial) ||
-            isVariantLabel(props.animate) ||
-            isVariantLabel(props.whileHover) ||
-            isVariantLabel(props.whileDrag) ||
-            isVariantLabel(props.whileTap) ||
-            isVariantLabel(props.whileFocus) ||
-            isVariantLabel(props.exit));
-    }
-    function checkIfVariantNode(props) {
-        return Boolean(checkIfControllingVariants(props) || props.variants);
-    }
-
     function checkTargetForNewValues(visualElement, target, origin) {
-        var _a, _b, _c;
-        var _d;
+        var _a, _b;
         const newValueKeys = Object.keys(target).filter((key) => !visualElement.hasValue(key));
         const numNewValues = newValueKeys.length;
         if (!numNewValues)
@@ -4117,7 +4159,9 @@
                 value = getAnimatableNone(key, targetValue);
             }
             visualElement.addValue(key, motionValue(value));
-            (_c = (_d = origin)[key]) !== null && _c !== void 0 ? _c : (_d[key] = value);
+            if (origin[key] === undefined) {
+                origin[key] = value;
+            }
             visualElement.setBaseTarget(key, value);
         }
     }
@@ -4128,15 +4172,25 @@
         return valueTransition.from;
     }
     function getOrigin(target, transition, visualElement) {
-        var _a, _b;
+        var _a;
         const origin = {};
         for (const key in target) {
+            const transitionOrigin = getOriginFromTransition(key, transition);
             origin[key] =
-                (_a = getOriginFromTransition(key, transition)) !== null && _a !== void 0 ? _a : (_b = visualElement.getValue(key)) === null || _b === void 0 ? void 0 : _b.get();
+                transitionOrigin !== undefined
+                    ? transitionOrigin
+                    : (_a = visualElement.getValue(key)) === null || _a === void 0 ? void 0 : _a.get();
         }
         return origin;
     }
 
+    /**
+     * Decides if the supplied variable is variant label
+     */
+    function isVariantLabel(v) {
+        return typeof v === "string" || Array.isArray(v);
+    }
+
     var AnimationType;
     (function (AnimationType) {
         AnimationType["Animate"] = "animate";
@@ -4209,7 +4263,6 @@
     }
 
     function updateMotionValuesFromProps(element, next, prev) {
-        var _a;
         const { willChange } = next;
         for (const key in next) {
             const nextValue = next[key];
@@ -4228,7 +4281,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "7.2.0", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.2.0 may not work as expected.`);
+                    warnOnce(nextValue.version === "7.3.1", `Attempting to mix Framer Motion versions ${nextValue.version} with 7.3.1 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -4253,7 +4306,8 @@
                     !existingValue.hasAnimated && existingValue.set(nextValue);
                 }
                 else {
-                    element.addValue(key, motionValue((_a = element.getStaticValue(key)) !== null && _a !== void 0 ? _a : nextValue));
+                    const latestValue = element.getStaticValue(key);
+                    element.addValue(key, motionValue(latestValue !== undefined ? latestValue : nextValue));
                 }
             }
         }
@@ -4265,7 +4319,73 @@
         return next;
     }
 
-    const visualElement = ({ treeType = "", build, getBaseTarget, makeTargetAnimatable, measureViewportBox, render: renderInstance, readValueFromInstance, removeValueFromRenderState, sortNodePosition, scrapeMotionValuesFromProps, }) => ({ parent, props, presenceId, blockInitialAnimation, visualState, shouldReduceMotion, }, options = {}) => {
+    const variantProps$1 = [
+        "initial",
+        "animate",
+        "exit",
+        "whileHover",
+        "whileDrag",
+        "whileTap",
+        "whileFocus",
+        "whileInView",
+    ];
+    function isControllingVariants(props) {
+        return (isAnimationControls(props.animate) ||
+            variantProps$1.some((name) => isVariantLabel(props[name])));
+    }
+    function isVariantNode(props) {
+        return Boolean(isControllingVariants(props) || props.variants);
+    }
+
+    /**
+     * Browser-safe usage of process
+     */
+    const defaultEnvironment = "production";
+    const env = typeof process === "undefined" || process.env === undefined
+        ? defaultEnvironment
+        : "development" ;
+
+    const createDefinition = (propNames) => ({
+        isEnabled: (props) => propNames.some((name) => !!props[name]),
+    });
+    const featureDefinitions = {
+        measureLayout: createDefinition(["layout", "layoutId", "drag"]),
+        animation: createDefinition([
+            "animate",
+            "exit",
+            "variants",
+            "whileHover",
+            "whileTap",
+            "whileFocus",
+            "whileDrag",
+            "whileInView",
+        ]),
+        exit: createDefinition(["exit"]),
+        drag: createDefinition(["drag", "dragControls"]),
+        focus: createDefinition(["whileFocus"]),
+        hover: createDefinition(["whileHover", "onHoverStart", "onHoverEnd"]),
+        tap: createDefinition(["whileTap", "onTap", "onTapStart", "onTapCancel"]),
+        pan: createDefinition([
+            "onPan",
+            "onPanStart",
+            "onPanSessionStart",
+            "onPanEnd",
+        ]),
+        inView: createDefinition([
+            "whileInView",
+            "onViewportEnter",
+            "onViewportLeave",
+        ]),
+    };
+
+    function isRefObject(ref) {
+        return (typeof ref === "object" &&
+            Object.prototype.hasOwnProperty.call(ref, "current"));
+    }
+
+    const featureNames = Object.keys(featureDefinitions);
+    const numFeatures = featureNames.length;
+    const visualElement = ({ treeType = "", build, getBaseTarget, makeTargetAnimatable, measureViewportBox, render: renderInstance, readValueFromInstance, removeValueFromRenderState, sortNodePosition, scrapeMotionValuesFromProps, }) => ({ parent, props, presenceId, blockInitialAnimation, visualState, reducedMotionConfig, }, options = {}) => {
         let isMounted = false;
         const { latestValues, renderState } = visualState;
         /**
@@ -4301,7 +4421,9 @@
          * When values are removed from all animation props we need to search
          * for a fallback value to animate to. These values are tracked in baseTarget.
          */
-        const baseTarget = Object.assign({}, latestValues);
+        const baseTarget = {
+            ...latestValues,
+        };
         // Internal methods ========================
         /**
          * On mount, this will be hydrated with a callback to disconnect
@@ -4348,7 +4470,7 @@
          * Doing so will break some tests but this isn't neccessarily a breaking change,
          * more a reflection of the test.
          */
-        const _a = scrapeMotionValuesFromProps(props), { willChange } = _a, initialMotionValues = __rest(_a, ["willChange"]);
+        const { willChange, ...initialMotionValues } = scrapeMotionValuesFromProps(props);
         for (const key in initialMotionValues) {
             const value = initialMotionValues[key];
             if (latestValues[key] !== undefined && isMotionValue(value)) {
@@ -4361,36 +4483,39 @@
         /**
          * Determine what role this visual element should take in the variant tree.
          */
-        const isControllingVariants = checkIfControllingVariants(props);
-        const isVariantNode = checkIfVariantNode(props);
-        const element = Object.assign(Object.assign({ treeType, 
+        const isControllingVariants$1 = isControllingVariants(props);
+        const isVariantNode$1 = isVariantNode(props);
+        const element = {
+            treeType,
             /**
              * This is a mirror of the internal instance prop, which keeps
              * VisualElement type-compatible with React's RefObject.
              */
-            current: null, 
+            current: null,
             /**
              * The depth of this visual element within the visual element tree.
              */
-            depth: parent ? parent.depth + 1 : 0, parent, children: new Set(), 
+            depth: parent ? parent.depth + 1 : 0,
+            parent,
+            children: new Set(),
             /**
              *
              */
             presenceId,
-            shouldReduceMotion, 
+            shouldReduceMotion: null,
             /**
              * If this component is part of the variant tree, it should track
              * any children that are also part of the tree. This is essentially
              * a shadow tree to simplify logic around how to stagger over children.
              */
-            variantChildren: isVariantNode ? new Set() : undefined, 
+            variantChildren: isVariantNode$1 ? new Set() : undefined,
             /**
              * Whether this instance is visible. This can be changed imperatively
              * by the projection tree, is analogous to CSS's visibility in that
              * hidden elements should take up layout, and needs enacting by the configured
              * render function.
              */
-            isVisible: undefined, 
+            isVisible: undefined,
             /**
              * Normally, if a component is controlled by a parent's variants, it can
              * rely on that ancestor to trigger animations further down the tree.
@@ -4399,27 +4524,37 @@
              *
              * TODO: This might be better replaced with a method isParentMounted
              */
-            manuallyAnimateOnMount: Boolean(parent === null || parent === void 0 ? void 0 : parent.isMounted()), 
+            manuallyAnimateOnMount: Boolean(parent === null || parent === void 0 ? void 0 : parent.isMounted()),
             /**
              * This can be set by AnimatePresence to force components that mount
              * at the same time as it to mount as if they have initial={false} set.
              */
-            blockInitialAnimation, 
+            blockInitialAnimation,
             /**
              * Determine whether this component has mounted yet. This is mostly used
              * by variant children to determine whether they need to trigger their
              * own animations on mount.
              */
-            isMounted: () => Boolean(instance), mount(newInstance) {
+            isMounted: () => Boolean(instance),
+            mount(newInstance) {
                 isMounted = true;
                 instance = element.current = newInstance;
                 if (element.projection) {
                     element.projection.mount(newInstance);
                 }
-                if (isVariantNode && parent && !isControllingVariants) {
+                if (isVariantNode$1 && parent && !isControllingVariants$1) {
                     removeFromVariantTree = parent === null || parent === void 0 ? void 0 : parent.addVariantChild(element);
                 }
                 values.forEach((value, key) => bindToMotionValue(key, value));
+                if (!hasReducedMotionListener.current) {
+                    initPrefersReducedMotion();
+                }
+                element.shouldReduceMotion =
+                    reducedMotionConfig === "never"
+                        ? false
+                        : reducedMotionConfig === "always"
+                            ? true
+                            : prefersReducedMotion.current;
                 parent === null || parent === void 0 ? void 0 : parent.children.add(element);
                 element.setProps(props);
             },
@@ -4438,6 +4573,55 @@
                 instance = undefined;
                 isMounted = false;
             },
+            loadFeatures(renderedProps, isStrict, preloadedFeatures, projectionId, ProjectionNodeConstructor, initialLayoutGroupConfig) {
+                const features = [];
+                /**
+                 * If we're in development mode, check to make sure we're not rendering a motion component
+                 * as a child of LazyMotion, as this will break the file-size benefits of using it.
+                 */
+                if (env !== "production" && preloadedFeatures && isStrict) {
+                    invariant(false, "You have rendered a `motion` component within a `LazyMotion` component. This will break tree shaking. Import and render a `m` component instead.");
+                }
+                for (let i = 0; i < numFeatures; i++) {
+                    const name = featureNames[i];
+                    const { isEnabled, Component } = featureDefinitions[name];
+                    /**
+                     * It might be possible in the future to use this moment to
+                     * dynamically request functionality. In initial tests this
+                     * was producing a lot of duplication amongst bundles.
+                     */
+                    if (isEnabled(props) && Component) {
+                        features.push(react.createElement(Component, {
+                            key: name,
+                            ...renderedProps,
+                            visualElement: element,
+                        }));
+                    }
+                }
+                if (!element.projection && ProjectionNodeConstructor) {
+                    element.projection = new ProjectionNodeConstructor(projectionId, element.getLatestValues(), parent && parent.projection);
+                    const { layoutId, layout, drag, dragConstraints, layoutScroll, } = renderedProps;
+                    element.projection.setOptions({
+                        layoutId,
+                        layout,
+                        alwaysMeasureLayout: Boolean(drag) ||
+                            (dragConstraints && isRefObject(dragConstraints)),
+                        visualElement: element,
+                        scheduleRender: () => element.scheduleRender(),
+                        /**
+                         * TODO: Update options in an effect. This could be tricky as it'll be too late
+                         * to update by the time layout animations run.
+                         * We also need to fix this safeToRemove by linking it up to the one returned by usePresence,
+                         * ensuring it gets called if there's no potential layout animations.
+                         *
+                         */
+                        animationType: typeof layout === "string" ? layout : "both",
+                        initialPromotionConfig: initialLayoutGroupConfig,
+                        layoutScroll,
+                    });
+                }
+                return features;
+            },
             /**
              * Add a child visual element to our set of children.
              */
@@ -4456,30 +4640,31 @@
                 if (!sortNodePosition || treeType !== other.treeType)
                     return 0;
                 return sortNodePosition(element.getInstance(), other.getInstance());
-            }, 
+            },
             /**
              * Returns the closest variant node in the tree starting from
              * this visual element.
              */
-            getClosestVariantNode: () => isVariantNode ? element : parent === null || parent === void 0 ? void 0 : parent.getClosestVariantNode(), 
+            getClosestVariantNode: () => isVariantNode$1 ? element : parent === null || parent === void 0 ? void 0 : parent.getClosestVariantNode(),
             /**
              * Expose the latest layoutId prop.
              */
-            getLayoutId: () => props.layoutId, 
+            getLayoutId: () => props.layoutId,
             /**
              * Returns the current instance.
              */
-            getInstance: () => instance, 
+            getInstance: () => instance,
             /**
              * Get/set the latest static values.
              */
-            getStaticValue: (key) => latestValues[key], setStaticValue: (key, value) => (latestValues[key] = value), 
+            getStaticValue: (key) => latestValues[key],
+            setStaticValue: (key, value) => (latestValues[key] = value),
             /**
              * Returns the latest motion value state. Currently only used to take
              * a snapshot of the visual element - perhaps this can return the whole
              * visual state
              */
-            getLatestValues: () => latestValues, 
+            getLatestValues: () => latestValues,
             /**
              * Set the visiblity of the visual element. If it's changed, schedule
              * a render to reflect these changes.
@@ -4530,11 +4715,11 @@
                 valueSubscriptions.delete(key);
                 delete latestValues[key];
                 removeValueFromRenderState(key, renderState);
-            }, 
+            },
             /**
              * Check whether we have a motion value for this key
              */
-            hasValue: (key) => values.has(key), 
+            hasValue: (key) => values.has(key),
             /**
              * Get a motion value for this key. If called with a default
              * value, we'll create one if none exists.
@@ -4546,20 +4731,19 @@
                     element.addValue(key, value);
                 }
                 return value;
-            }, 
+            },
             /**
              * Iterate over our motion values.
              */
-            forEachValue: (callback) => values.forEach(callback), 
+            forEachValue: (callback) => values.forEach(callback),
             /**
              * If we're trying to animate to a previously unencountered value,
              * we need to check for it in our state and as a last resort read it
              * directly from the instance (which might have performance implications).
              */
-            readValue: (key) => {
-                var _a;
-                return (_a = latestValues[key]) !== null && _a !== void 0 ? _a : readValueFromInstance(instance, key, options);
-            }, 
+            readValue: (key) => latestValues[key] !== undefined
+                ? latestValues[key]
+                : readValueFromInstance(instance, key, options),
             /**
              * Set the base target to later animate back to. This is currently
              * only hydrated on creation and when we first read a value.
@@ -4578,7 +4762,9 @@
                         return target;
                 }
                 return baseTarget[key];
-            } }, lifecycles), { 
+            },
+            // Lifecyles ========================
+            ...lifecycles,
             /**
              * Build the renderer state based on the latest visual state.
              */
@@ -4591,14 +4777,14 @@
              */
             scheduleRender() {
                 sync.render(render, false, true);
-            }, 
+            },
             /**
              * Synchronously fire render. It's prefered that we batch renders but
              * in many circumstances, like layout measurement, we need to run this
              * synchronously. However in those instances other measures should be taken
              * to batch reads/writes.
              */
-            syncRender: render, 
+            syncRender: render,
             /**
              * Update the provided props. Ensure any newly-added motion values are
              * added to our map, old ones removed, and listeners updated.
@@ -4610,25 +4796,27 @@
                 props = newProps;
                 lifecycles.updatePropListeners(newProps);
                 prevMotionValues = updateMotionValuesFromProps(element, scrapeMotionValuesFromProps(props), prevMotionValues);
-            }, getProps: () => props, 
+            },
+            getProps: () => props,
             // Variants ==============================
             /**
              * Returns the variant definition with a given name.
              */
-            getVariant: (name) => { var _a; return (_a = props.variants) === null || _a === void 0 ? void 0 : _a[name]; }, 
+            getVariant: (name) => { var _a; return (_a = props.variants) === null || _a === void 0 ? void 0 : _a[name]; },
             /**
              * Returns the defined default transition on this component.
              */
-            getDefaultTransition: () => props.transition, getTransformPagePoint: () => {
+            getDefaultTransition: () => props.transition,
+            getTransformPagePoint: () => {
                 return props.transformPagePoint;
-            }, 
+            },
             /**
              * Used by child variant nodes to get the closest ancestor variant props.
              */
             getVariantContext(startAtParent = false) {
                 if (startAtParent)
                     return parent === null || parent === void 0 ? void 0 : parent.getVariantContext();
-                if (!isControllingVariants) {
+                if (!isControllingVariants$1) {
                     const context = (parent === null || parent === void 0 ? void 0 : parent.getVariantContext()) || {};
                     if (props.initial !== undefined) {
                         context.initial = props.initial;
@@ -4644,7 +4832,8 @@
                     }
                 }
                 return context;
-            } });
+            },
+        };
         return element;
     };
     const variantProps = ["initial", ...variantPriorityOrder];
@@ -4667,11 +4856,7 @@
     };
 
     function buildHTMLStyles(state, latestValues, options, transformTemplate) {
-        var _a;
         const { style, vars, transform, transformKeys, transformOrigin } = state;
-        // Empty the transformKeys array. As we're throwing out refs to its items
-        // this might not be as cheap as suspected. Maybe using the array as a buffer
-        // with a manual incrementation would be better.
         transformKeys.length = 0;
         // Track whether we encounter any transform or transformOrigin values.
         let hasTransform = false;
@@ -4696,7 +4881,7 @@
             // Convert the value to its default value type, ie 0 -> "0px"
             const valueType = numberValueTypes[key];
             const valueAsType = getValueAsType(value, valueType);
-            if (isTransformProp(key)) {
+            if (transformProps.has(key)) {
                 // If this is a transform, flag to enable further transform processing
                 hasTransform = true;
                 transform[key] = valueAsType;
@@ -4705,34 +4890,38 @@
                 if (!transformIsNone)
                     continue;
                 // Otherwise check to see if this is a default transform
-                if (value !== ((_a = valueType.default) !== null && _a !== void 0 ? _a : 0))
+                if (value !== (valueType.default || 0))
                     transformIsNone = false;
             }
-            else if (isTransformOriginProp(key)) {
-                transformOrigin[key] = valueAsType;
+            else if (key.startsWith("origin")) {
                 // If this is a transform origin, flag and enable further transform-origin processing
                 hasTransformOrigin = true;
+                transformOrigin[key] = valueAsType;
             }
             else {
                 style[key] = valueAsType;
             }
         }
-        if (hasTransform) {
+        if (hasTransform || transformTemplate) {
             style.transform = buildTransform(state, options, transformIsNone, transformTemplate);
         }
-        else if (transformTemplate) {
-            style.transform = transformTemplate({}, "");
-        }
         else if (!latestValues.transform && style.transform) {
+            /**
+             * If we have previously created a transform but currently don't have any,
+             * reset transform style to none.
+             */
             style.transform = "none";
         }
+        /**
+         * Build a transformOrigin style. Uses the same defaults as the browser for
+         * undefined origins.
+         */
         if (hasTransformOrigin) {
-            style.transformOrigin = buildTransformOrigin(transformOrigin);
+            const { originX = "50%", originY = "50%", originZ = 0, } = transformOrigin;
+            style.transformOrigin = `${originX} ${originY} ${originZ}`;
         }
     }
 
-    const isBrowser = typeof document !== "undefined";
-
     const positionalKeys = new Set([
         "width",
         "height",
@@ -4782,7 +4971,7 @@
         }
     };
     const transformKeys = new Set(["x", "y", "z"]);
-    const nonTranslationalTransformKeys = transformProps.filter((key) => !transformKeys.has(key));
+    const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
     function removeNonTranslationalTransform(visualElement) {
         const removedTransforms = [];
         nonTranslationalTransformKeys.forEach((key) => {
@@ -4839,8 +5028,8 @@
         return target;
     };
     const checkAndConvertChangedValueTypes = (visualElement, target, origin = {}, transitionEnd = {}) => {
-        target = Object.assign({}, target);
-        transitionEnd = Object.assign({}, transitionEnd);
+        target = { ...target };
+        transitionEnd = { ...transitionEnd };
         const targetPositionalKeys = Object.keys(target).filter(isPositionalKey);
         // We want to remove any transform values that could affect the element's bounding box before
         // it's measured. We'll reapply these later.
@@ -4970,8 +5159,8 @@
     };
 
     function isForcedMotionValue(key, { layout, layoutId }) {
-        return (isTransformProp(key) ||
-            isTransformOriginProp(key) ||
+        return (transformProps.has(key) ||
+            key.startsWith("origin") ||
             ((layout || layoutId !== undefined) &&
                 (!!scaleCorrectors[key] || key === "opacity")));
     }
@@ -5034,7 +5223,7 @@
     const htmlConfig = {
         treeType: "dom",
         readValueFromInstance(domElement, key) {
-            if (isTransformProp(key)) {
+            if (transformProps.has(key)) {
                 const defaultType = getDefaultValueType(key);
                 return defaultType ? defaultType.default || 0 : 0;
             }
@@ -5087,10 +5276,7 @@
          * Ensure that HTML and Framer-specific value types like `px`->`%` and `Color`
          * can be animated by Motion.
          */
-        makeTargetAnimatable(element, _a, _b, isMounted) {
-            var { transition, transitionEnd } = _a, target = __rest(_a, ["transition", "transitionEnd"]);
-            var transformValues = _b.transformValues;
-            if (isMounted === void 0) { isMounted = true; }
+        makeTargetAnimatable(element, { transition, transitionEnd, ...target }, { transformValues }, isMounted = true) {
             let origin = getOrigin(target, transition || {}, element);
             /**
              * If Framer has provided a function to convert `Color` etc value types, convert them
@@ -5109,8 +5295,11 @@
                 transitionEnd = parsed.transitionEnd;
                 target = parsed.target;
             }
-            return Object.assign({ transition,
-                transitionEnd }, target);
+            return {
+                transition,
+                transitionEnd,
+                ...target,
+            };
         },
         scrapeMotionValuesFromProps,
         build(element, renderState, latestValues, options, props) {