framer-motion 7.2.0 → 7.3.1

package/dist/framer-motion.dev.js

@@ -24,110 +24,8 @@
         return Object.freeze(n);
     }
 
-    var React__namespace = /*#__PURE__*/_interopNamespace(React);
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-    /**
-     * 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 loadFeatures(features) {
-        for (const key in features) {
-            if (features[key] === null)
-                continue;
-            if (key === "projectionNodeConstructor") {
-                featureDefinitions.projectionNodeConstructor = features[key];
-            }
-            else {
-                featureDefinitions[key].Component = features[key];
-            }
-        }
-    }
-
-    var warning = function () { };
-    var invariant = function () { };
-    {
-        warning = function (check, message) {
-            if (!check && typeof console !== 'undefined') {
-                console.warn(message);
-            }
-        };
-        invariant = function (check, message) {
-            if (!check) {
-                throw new Error(message);
-            }
-        };
-    }
-
-    const LazyContext = React.createContext({ strict: false });
-
-    const featureNames = Object.keys(featureDefinitions);
-    const numFeatures = featureNames.length;
-    /**
-     * Load features via renderless components based on the provided MotionProps.
-     */
-    function useFeatures(props, visualElement, preloadedFeatures) {
-        const features = [];
-        const lazyContext = React.useContext(LazyContext);
-        if (!visualElement)
-            return null;
-        /**
-         * 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 && lazyContext.strict) {
-            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__namespace.createElement(Component, Object.assign({ key: name }, props, { visualElement: visualElement })));
-            }
-        }
-        return features;
-    }
+    var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
     /**
      * @public
@@ -152,104 +50,40 @@
 
     const useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
 
-    // Does this device prefer reduced motion? Returns `null` server-side.
-    const prefersReducedMotion = { current: null };
-    let hasDetected = false;
-    function initPrefersReducedMotion() {
-        hasDetected = 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;
-        }
-    }
-    /**
-     * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.
-     *
-     * This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing
-     * `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.
-     *
-     * It will actively respond to changes and re-render your components with the latest setting.
-     *
-     * ```jsx
-     * export function Sidebar({ isOpen }) {
-     *   const shouldReduceMotion = useReducedMotion()
-     *   const closedX = shouldReduceMotion ? 0 : "-100%"
-     *
-     *   return (
-     *     <motion.div animate={{
-     *       opacity: isOpen ? 1 : 0,
-     *       x: isOpen ? 0 : closedX
-     *     }} />
-     *   )
-     * }
-     * ```
-     *
-     * @return boolean
-     *
-     * @public
-     */
-    function useReducedMotion() {
-        /**
-         * Lazy initialisation of prefersReducedMotion
-         */
-        !hasDetected && initPrefersReducedMotion();
-        const [shouldReduceMotion] = React.useState(prefersReducedMotion.current);
-        /**
-         * TODO See if people miss automatically updating shouldReduceMotion setting
-         */
-        return shouldReduceMotion;
-    }
-    function useReducedMotionConfig() {
-        const reducedMotionPreference = useReducedMotion();
-        const { reducedMotion } = React.useContext(MotionConfigContext);
-        if (reducedMotion === "never") {
-            return false;
-        }
-        else if (reducedMotion === "always") {
-            return true;
-        }
-        else {
-            return reducedMotionPreference;
-        }
-    }
+    const LazyContext = React.createContext({ strict: false });
 
     function useVisualElement(Component, visualState, props, createVisualElement) {
-        const lazyContext = React.useContext(LazyContext);
         const parent = useVisualElementContext();
+        const lazyContext = React.useContext(LazyContext);
         const presenceContext = React.useContext(PresenceContext);
-        const shouldReduceMotion = useReducedMotionConfig();
+        const reducedMotionConfig = React.useContext(MotionConfigContext).reducedMotion;
         const visualElementRef = React.useRef(undefined);
         /**
          * If we haven't preloaded a renderer, check to see if we have one lazy-loaded
          */
-        if (!createVisualElement)
-            createVisualElement = lazyContext.renderer;
+        createVisualElement = createVisualElement || lazyContext.renderer;
         if (!visualElementRef.current && createVisualElement) {
             visualElementRef.current = createVisualElement(Component, {
                 visualState,
                 parent,
                 props,
-                presenceId: presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.id,
-                blockInitialAnimation: (presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.initial) === false,
-                shouldReduceMotion,
+                presenceId: presenceContext ? presenceContext.id : undefined,
+                blockInitialAnimation: presenceContext
+                    ? presenceContext.initial === false
+                    : false,
+                reducedMotionConfig,
             });
         }
         const visualElement = visualElementRef.current;
         useIsomorphicLayoutEffect(() => {
-            visualElement === null || visualElement === void 0 ? void 0 : visualElement.syncRender();
+            visualElement && visualElement.syncRender();
         });
         React.useEffect(() => {
-            var _a;
-            (_a = visualElement === null || visualElement === void 0 ? void 0 : visualElement.animationState) === null || _a === void 0 ? void 0 : _a.animateChanges();
+            if (visualElement && visualElement.animationState) {
+                visualElement.animationState.animateChanges();
+            }
         });
-        useIsomorphicLayoutEffect(() => () => visualElement === null || visualElement === void 0 ? void 0 : visualElement.notifyUnmount(), []);
+        useIsomorphicLayoutEffect(() => () => visualElement && visualElement.notifyUnmount(), []);
         return visualElement;
     }
 
@@ -264,8 +98,7 @@
      */
     function useMotionRef(visualState, visualElement, externalRef) {
         return React.useCallback((instance) => {
-            var _a;
-            instance && ((_a = visualState.mount) === null || _a === void 0 ? void 0 : _a.call(visualState, instance));
+            instance && visualState.mount && visualState.mount(instance);
             if (visualElement) {
                 instance
                     ? visualElement.mount(instance)
@@ -288,80 +121,37 @@
         [visualElement]);
     }
 
-    /**
-     * 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);
-    }
-    /**
-     * Creates an object containing the latest state of every MotionValue on a VisualElement
-     */
-    function getCurrent(visualElement) {
-        const current = {};
-        visualElement.forEachValue((value, key) => (current[key] = value.get()));
-        return current;
-    }
-    /**
-     * Creates an object containing the latest velocity of every MotionValue on a VisualElement
-     */
-    function getVelocity$1(visualElement) {
-        const velocity = {};
-        visualElement.forEachValue((value, key) => (velocity[key] = value.getVelocity()));
-        return velocity;
+        return typeof v === "string" || Array.isArray(v);
     }
-    function resolveVariantFromProps(props, definition, custom, currentValues = {}, currentVelocity = {}) {
-        var _a;
-        /**
-         * If the variant definition is a function, resolve.
-         */
-        if (typeof definition === "function") {
-            definition = definition(custom !== null && custom !== void 0 ? custom : props.custom, currentValues, currentVelocity);
-        }
-        /**
-         * If the variant definition is a variant label, or
-         * the function returned a variant label, resolve.
-         */
-        if (typeof definition === "string") {
-            definition = (_a = props.variants) === null || _a === void 0 ? void 0 : _a[definition];
-        }
-        /**
-         * At this point we've resolved both functions and variant labels,
-         * but the resolved variant label might itself have been a function.
-         * If so, resolve. This can only have returned a valid target object.
-         */
-        if (typeof definition === "function") {
-            definition = definition(custom !== null && custom !== void 0 ? custom : props.custom, currentValues, currentVelocity);
-        }
-        return definition;
-    }
-    function resolveVariant(visualElement, definition, custom) {
-        const props = visualElement.getProps();
-        return resolveVariantFromProps(props, definition, custom !== null && custom !== void 0 ? custom : props.custom, getCurrent(visualElement), getVelocity$1(visualElement));
+
+    function isAnimationControls(v) {
+        return typeof v === "object" && typeof v.start === "function";
     }
-    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));
+
+    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 checkIfVariantNode(props) {
-        return Boolean(checkIfControllingVariants(props) || props.variants);
+    function isVariantNode(props) {
+        return Boolean(isControllingVariants(props) || props.variants);
     }
 
     function getCurrentTreeVariants(props, context) {
-        if (checkIfControllingVariants(props)) {
+        if (isControllingVariants(props)) {
             const { initial, animate } = props;
             return {
                 initial: initial === false || isVariantLabel(initial)
@@ -381,6 +171,50 @@
         return Array.isArray(prop) ? prop.join(" ") : prop;
     }
 
+    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 loadFeatures(features) {
+        for (const key in features) {
+            if (key === "projectionNodeConstructor") {
+                featureDefinitions.projectionNodeConstructor = features[key];
+            }
+            else {
+                featureDefinitions[key].Component = features[key];
+            }
+        }
+    }
+
     /**
      * Creates a constant value over the lifecycle of a component.
      *
@@ -425,58 +259,27 @@
 
     const LayoutGroupContext = React.createContext({});
 
-    /**
-     * Internal, exported only for usage in Framer
-     */
-    const SwitchLayoutGroupContext = React.createContext({});
-
-    function useProjection(projectionId, { layoutId, layout, drag, dragConstraints, layoutScroll }, visualElement, ProjectionNodeConstructor) {
-        var _a;
-        const initialPromotionConfig = React.useContext(SwitchLayoutGroupContext);
-        if (!ProjectionNodeConstructor ||
-            !visualElement ||
-            (visualElement === null || visualElement === void 0 ? void 0 : visualElement.projection)) {
-            return;
-        }
-        visualElement.projection = new ProjectionNodeConstructor(projectionId, visualElement.getLatestValues(), (_a = visualElement.parent) === null || _a === void 0 ? void 0 : _a.projection);
-        visualElement.projection.setOptions({
-            layoutId,
-            layout,
-            alwaysMeasureLayout: Boolean(drag) || (dragConstraints && isRefObject(dragConstraints)),
-            visualElement,
-            scheduleRender: () => visualElement.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,
-            layoutScroll,
-        });
-    }
-
     class VisualElementHandler extends React__default["default"].Component {
         /**
          * Update visual element props as soon as we know this update is going to be commited.
          */
         getSnapshotBeforeUpdate() {
-            this.updateProps();
-            return null;
-        }
-        componentDidUpdate() { }
-        updateProps() {
             const { visualElement, props } = this.props;
             if (visualElement)
                 visualElement.setProps(props);
+            return null;
         }
+        componentDidUpdate() { }
         render() {
             return this.props.children;
         }
     }
 
+    /**
+     * Internal, exported only for usage in Framer
+     */
+    const SwitchLayoutGroupContext = React.createContext({});
+
     /**
      * Create a `motion` component.
      *
@@ -489,15 +292,12 @@
     function createMotionComponent({ preloadedFeatures, createVisualElement, projectionNodeConstructor, useRender, useVisualState, Component, }) {
         preloadedFeatures && loadFeatures(preloadedFeatures);
         function MotionComponent(props, externalRef) {
-            const layoutId = useLayoutId(props);
-            props = Object.assign(Object.assign({}, props), { layoutId });
-            /**
-             * If we're rendering in a static environment, we only visually update the component
-             * as a result of a React-rerender rather than interactions or animations. This
-             * means we don't need to load additional memory structures like VisualElement,
-             * or any gesture/animation features.
-             */
-            const config = React.useContext(MotionConfigContext);
+            const configAndProps = {
+                ...React.useContext(MotionConfigContext),
+                ...props,
+                layoutId: useLayoutId(props),
+            };
+            const { isStatic } = configAndProps;
             let features = null;
             const context = useCreateMotionContext(props);
             /**
@@ -511,40 +311,42 @@
              * shared element transitions however. Perhaps for those we could revert to a root node
              * that gets forceRendered and layout animations are triggered on its layout effect.
              */
-            const projectionId = config.isStatic ? undefined : useProjectionId();
+            const projectionId = isStatic ? undefined : useProjectionId();
             /**
              *
              */
-            const visualState = useVisualState(props, config.isStatic);
-            if (!config.isStatic && isBrowser) {
+            const visualState = useVisualState(props, isStatic);
+            if (!isStatic && isBrowser) {
                 /**
                  * Create a VisualElement for this component. A VisualElement provides a common
                  * interface to renderer-specific APIs (ie DOM/Three.js etc) as well as
                  * providing a way of rendering to these APIs outside of the React render loop
                  * for more performant animations and interactions
                  */
-                context.visualElement = useVisualElement(Component, visualState, Object.assign(Object.assign({}, config), props), createVisualElement);
-                useProjection(projectionId, props, context.visualElement, projectionNodeConstructor ||
-                    featureDefinitions.projectionNodeConstructor);
+                context.visualElement = useVisualElement(Component, visualState, configAndProps, createVisualElement);
                 /**
                  * Load Motion gesture and animation features. These are rendered as renderless
                  * components so each feature can optionally make use of React lifecycle methods.
                  */
-                features = useFeatures(props, context.visualElement, preloadedFeatures);
+                const lazyStrictMode = React.useContext(LazyContext).strict;
+                const initialLayoutGroupConfig = React.useContext(SwitchLayoutGroupContext);
+                if (context.visualElement) {
+                    features = context.visualElement.loadFeatures(props, lazyStrictMode, preloadedFeatures, projectionId, projectionNodeConstructor ||
+                        featureDefinitions.projectionNodeConstructor, initialLayoutGroupConfig);
+                }
             }
             /**
              * The mount order and hierarchy is specific to ensure our element ref
              * is hydrated by the time features fire their effects.
              */
-            return (React__namespace.createElement(VisualElementHandler, { visualElement: context.visualElement, props: Object.assign(Object.assign({}, config), props) },
+            return (React__namespace.createElement(VisualElementHandler, { visualElement: context.visualElement, props: configAndProps },
                 features,
-                React__namespace.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, config.isStatic, context.visualElement))));
+                React__namespace.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement))));
         }
         return React.forwardRef(MotionComponent);
     }
     function useLayoutId({ layoutId }) {
-        var _a;
-        const layoutGroupId = (_a = React.useContext(LayoutGroupContext)) === null || _a === void 0 ? void 0 : _a.id;
+        const layoutGroupId = React.useContext(LayoutGroupContext).id;
         return layoutGroupId && layoutId !== undefined
             ? layoutGroupId + "-" + layoutId
             : layoutId;
@@ -658,52 +460,41 @@
         Object.assign(scaleCorrectors, correctors);
     }
 
-    /**
-     * 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);
-    }
+    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 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 transformProps = new Set(transformPropOrder);
 
     function isForcedMotionValue(key, { layout, layoutId }) {
-        return (isTransformProp(key) ||
-            isTransformOriginProp(key) ||
+        return (transformProps.has(key) ||
+            key.startsWith("origin") ||
             ((layout || layoutId !== undefined) &&
                 (!!scaleCorrectors[key] || key === "opacity")));
     }
 
-    const isMotionValue = (value) => {
-        return Boolean(value !== null && typeof value === "object" && value.getVelocity);
-    };
+    const isMotionValue = (value) => value === undefined ? false : !!value.getVelocity;
 
     const translateAlias = {
         x: "translateX",
@@ -711,6 +502,10 @@
         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.
      *
@@ -722,18 +517,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();
@@ -747,13 +535,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}`;
-    }
 
     /**
      * Returns true if the provided key is a CSS variable
@@ -972,7 +753,10 @@
             return functions ? functions.map(applyDefaultFilter).join(' ') : v;
         } });
 
-    const int = Object.assign(Object.assign({}, number), { transform: Math.round });
+    const int = {
+        ...number,
+        transform: Math.round,
+    };
 
     const numberValueTypes = {
         // Border props
@@ -1042,11 +826,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;
@@ -1071,7 +851,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;
@@ -1080,29 +860,35 @@
                 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}`;
         }
     }
 
@@ -1125,28 +911,24 @@
         return React.useMemo(() => {
             const state = createHtmlRenderState();
             buildHTMLStyles(state, visualState, { enableHardwareAcceleration: !isStatic }, transformTemplate);
-            const { vars, style } = state;
-            return Object.assign(Object.assign({}, vars), style);
+            return Object.assign({}, state.vars, state.style);
         }, [visualState]);
     }
     function useStyle(props, visualState, isStatic) {
         const styleProp = props.style || {};
-        let style = {};
+        const style = {};
         /**
          * Copy non-Motion Values straight into style
          */
         copyRawValuesOnly(style, styleProp, props);
         Object.assign(style, useInitialMotionValues(props, visualState, isStatic));
-        if (props.transformValues) {
-            style = props.transformValues(style);
-        }
-        return style;
+        return props.transformValues ? props.transformValues(style) : style;
     }
     function useHTMLProps(props, visualState, isStatic) {
         // The `any` isn't ideal but it is the type of createElement props argument
         const htmlProps = {};
         const style = useStyle(props, visualState, isStatic);
-        if (Boolean(props.drag) && props.dragListener !== false) {
+        if (props.drag && props.dragListener !== false) {
             // Disable the ghost element when a user drags
             htmlProps.draggable = false;
             // Disable text selection
@@ -1164,6 +946,24 @@
         return htmlProps;
     }
 
+    const animationProps = [
+        "animate",
+        "exit",
+        "variants",
+        "whileHover",
+        "whileTap",
+        "whileFocus",
+        "whileDrag",
+        "whileInView",
+    ];
+    const tapProps = ["whileTap", "onTap", "onTapStart", "onTapCancel"];
+    const panProps = ["onPan", "onPanStart", "onPanSessionStart", "onPanEnd"];
+    const inViewProps = [
+        "whileInView",
+        "onViewportEnter",
+        "onViewportLeave",
+        "viewport",
+    ];
     /**
      * A list of all valid MotionProps.
      *
@@ -1172,8 +972,6 @@
      */
     const validMotionProps = new Set([
         "initial",
-        "animate",
-        "exit",
         "style",
         "variants",
         "transition",
@@ -1209,24 +1007,13 @@
         "dragMomentum",
         "dragPropagation",
         "dragTransition",
-        "whileDrag",
-        "onPan",
-        "onPanStart",
-        "onPanEnd",
-        "onPanSessionStart",
-        "onTap",
-        "onTapStart",
-        "onTapCancel",
         "onHoverStart",
         "onHoverEnd",
-        "whileFocus",
-        "whileTap",
-        "whileHover",
-        "whileInView",
-        "onViewportEnter",
-        "onViewportLeave",
-        "viewport",
         "layoutScroll",
+        ...inViewProps,
+        ...tapProps,
+        ...animationProps,
+        ...panProps,
     ]);
     /**
      * Check whether a prop name is a valid `MotionProp` key.
@@ -1285,33 +1072,6 @@
         return filteredProps;
     }
 
-    /******************************************************************************
-    Copyright (c) Microsoft Corporation.
-
-    Permission to use, copy, modify, and/or distribute this software for any
-    purpose with or without fee is hereby granted.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-    PERFORMANCE OF THIS SOFTWARE.
-    ***************************************************************************** */
-
-    function __rest(s, e) {
-        var t = {};
-        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-            t[p] = s[p];
-        if (s != null && typeof Object.getOwnPropertySymbols === "function")
-            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                    t[p[i]] = s[p[i]];
-            }
-        return t;
-    }
-
     function calcOrigin$1(origin, offset, size) {
         return typeof origin === "string"
             ? origin
@@ -1359,10 +1119,9 @@
     /**
      * Build SVG visual attrbutes, like cx and style.transform
      */
-    function buildSVGAttrs(state, _a, options, transformTemplate) {
-        var { attrX, attrY, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0 } = _a, 
-        // This is object creation, which we try to avoid per-frame.
-        latest = __rest(_a, ["attrX", "attrY", "originX", "originY", "pathLength", "pathSpacing", "pathOffset"]);
+    function buildSVGAttrs(state, { attrX, attrY, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0, 
+    // This is object creation, which we try to avoid per-frame.
+    ...latest }, options, transformTemplate) {
         buildHTMLStyles(state, latest, options, transformTemplate);
         state.attrs = state.style;
         state.style = {};
@@ -1392,18 +1151,24 @@
         }
     }
 
-    const createSvgRenderState = () => (Object.assign(Object.assign({}, createHtmlRenderState()), { attrs: {} }));
+    const createSvgRenderState = () => ({
+        ...createHtmlRenderState(),
+        attrs: {},
+    });
 
     function useSVGProps(props, visualState) {
         const visualProps = React.useMemo(() => {
             const state = createSvgRenderState();
             buildSVGAttrs(state, visualState, { enableHardwareAcceleration: false }, props.transformTemplate);
-            return Object.assign(Object.assign({}, state.attrs), { style: Object.assign({}, state.style) });
+            return {
+                ...state.attrs,
+                style: { ...state.style },
+            };
         }, [visualState]);
         if (props.style) {
             const rawStyles = {};
             copyRawValuesOnly(rawStyles, props.style, props);
-            visualProps.style = Object.assign(Object.assign({}, rawStyles), visualProps.style);
+            visualProps.style = { ...rawStyles, ...visualProps.style };
         }
         return visualProps;
     }
@@ -1415,7 +1180,11 @@
                 : useHTMLProps;
             const visualProps = useVisualProps(props, latestValues, isStatic);
             const filteredProps = filterProps(props, typeof Component === "string", forwardMotionProps);
-            const elementProps = Object.assign(Object.assign(Object.assign({}, filteredProps), visualProps), { ref });
+            const elementProps = {
+                ...filteredProps,
+                ...visualProps,
+                ref,
+            };
             if (projectionId) {
                 elementProps["data-projection-id"] = projectionId;
             }
@@ -1424,12 +1193,10 @@
         return useRender;
     }
 
-    const CAMEL_CASE_PATTERN = /([a-z])([A-Z])/g;
-    const REPLACE_TEMPLATE = "$1-$2";
     /**
      * Convert camelCase to dash-case properties.
      */
-    const camelToDash = (str) => str.replace(CAMEL_CASE_PATTERN, REPLACE_TEMPLATE).toLowerCase();
+    const camelToDash = (str) => str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 
     function renderHTML(element, { style, vars }, styleProp, projection) {
         Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp));
@@ -1491,11 +1258,32 @@
                 newValues[targetKey] = props[key];
             }
         }
-        return newValues;
-    }
-
-    function isAnimationControls(v) {
-        return typeof v === "object" && typeof v.start === "function";
+        return newValues;
+    }
+
+    function resolveVariantFromProps(props, definition, custom, currentValues = {}, currentVelocity = {}) {
+        /**
+         * If the variant definition is a function, resolve.
+         */
+        if (typeof definition === "function") {
+            definition = definition(custom !== undefined ? custom : props.custom, currentValues, currentVelocity);
+        }
+        /**
+         * If the variant definition is a variant label, or
+         * the function returned a variant label, resolve.
+         */
+        if (typeof definition === "string") {
+            definition = props.variants && props.variants[definition];
+        }
+        /**
+         * At this point we've resolved both functions and variant labels,
+         * but the resolved variant label might itself have been a function.
+         * If so, resolve. This can only have returned a valid target object.
+         */
+        if (typeof definition === "function") {
+            definition = definition(custom !== undefined ? custom : props.custom, currentValues, currentVelocity);
+        }
+        return definition;
     }
 
     const isKeyframesTarget = (v) => {
@@ -1535,29 +1323,32 @@
     const makeUseVisualState = (config) => (props, isStatic) => {
         const context = React.useContext(MotionContext);
         const presenceContext = React.useContext(PresenceContext);
-        return isStatic
-            ? makeState(config, props, context, presenceContext)
-            : useConstant(() => makeState(config, props, context, presenceContext));
+        const make = () => makeState(config, props, context, presenceContext);
+        return isStatic ? make() : useConstant(make);
     };
     function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
         const values = {};
-        const blockInitialAnimation = (presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.initial) === false;
         const motionValues = scrapeMotionValues(props);
         for (const key in motionValues) {
             values[key] = resolveMotionValue(motionValues[key]);
         }
         let { initial, animate } = props;
-        const isControllingVariants = checkIfControllingVariants(props);
-        const isVariantNode = checkIfVariantNode(props);
+        const isControllingVariants$1 = isControllingVariants(props);
+        const isVariantNode$1 = isVariantNode(props);
         if (context &&
-            isVariantNode &&
-            !isControllingVariants &&
+            isVariantNode$1 &&
+            !isControllingVariants$1 &&
             props.inherit !== false) {
-            initial !== null && initial !== void 0 ? initial : (initial = context.initial);
-            animate !== null && animate !== void 0 ? animate : (animate = context.animate);
-        }
-        const initialAnimationIsBlocked = blockInitialAnimation || initial === false;
-        const variantToSet = initialAnimationIsBlocked ? animate : initial;
+            if (initial === undefined)
+                initial = context.initial;
+            if (animate === undefined)
+                animate = context.animate;
+        }
+        let isInitialAnimationBlocked = presenceContext
+            ? presenceContext.initial === false
+            : false;
+        isInitialAnimationBlocked = isInitialAnimationBlocked || initial === false;
+        const variantToSet = isInitialAnimationBlocked ? animate : initial;
         if (variantToSet &&
             typeof variantToSet !== "boolean" &&
             !isAnimationControls(variantToSet)) {
@@ -1566,7 +1357,7 @@
                 const resolved = resolveVariantFromProps(props, definition);
                 if (!resolved)
                     return;
-                const { transitionEnd, transition } = resolved, target = __rest(resolved, ["transitionEnd", "transition"]);
+                const { transitionEnd, transition, ...target } = resolved;
                 for (const key in target) {
                     let valueTarget = target[key];
                     if (Array.isArray(valueTarget)) {
@@ -1574,7 +1365,7 @@
                          * Take final keyframe if the initial animation is blocked because
                          * we want to initialise at the end of that blocked animation.
                          */
-                        const index = initialAnimationIsBlocked
+                        const index = isInitialAnimationBlocked
                             ? valueTarget.length - 1
                             : 0;
                         valueTarget = valueTarget[index];
@@ -1628,9 +1419,14 @@
         const baseConfig = isSVGComponent(Component)
             ? svgMotionConfig
             : htmlMotionConfig;
-        return Object.assign(Object.assign({}, baseConfig), { preloadedFeatures, useRender: createUseRender(forwardMotionProps), createVisualElement,
+        return {
+            ...baseConfig,
+            preloadedFeatures,
+            useRender: createUseRender(forwardMotionProps),
+            createVisualElement,
             projectionNodeConstructor,
-            Component });
+            Component,
+        };
     }
 
     exports.AnimationType = void 0;
@@ -1685,13 +1481,12 @@
      * @internal
      */
     function useFocusGesture({ whileFocus, visualElement }) {
+        const { animationState } = visualElement;
         const onFocus = () => {
-            var _a;
-            (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(exports.AnimationType.Focus, true);
+            animationState && animationState.setActive(exports.AnimationType.Focus, true);
         };
         const onBlur = () => {
-            var _a;
-            (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(exports.AnimationType.Focus, false);
+            animationState && animationState.setActive(exports.AnimationType.Focus, false);
         };
         useDomEvent(visualElement, "focus", whileFocus ? onFocus : undefined);
         useDomEvent(visualElement, "blur", whileFocus ? onBlur : undefined);
@@ -1846,14 +1641,15 @@
 
     function createHoverEvent(visualElement, isActive, callback) {
         return (event, info) => {
-            var _a;
             if (!isMouseEvent(event) || isDragActive())
                 return;
             /**
              * Ensure we trigger animations before firing event callback
              */
-            (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(exports.AnimationType.Hover, isActive);
-            callback === null || callback === void 0 ? void 0 : callback(event, info);
+            if (visualElement.animationState) {
+                visualElement.animationState.setActive(exports.AnimationType.Hover, isActive);
+            }
+            callback && callback(event, info);
         };
     }
     function useHoverGesture({ onHoverStart, onHoverEnd, whileHover, visualElement, }) {
@@ -1888,6 +1684,48 @@
         return React.useEffect(() => () => callback(), []);
     }
 
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+
+    function __rest(s, e) {
+        var t = {};
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+        if (s != null && typeof Object.getOwnPropertySymbols === "function")
+            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+                if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                    t[p[i]] = s[p[i]];
+            }
+        return t;
+    }
+
+    var warning = function () { };
+    var invariant = function () { };
+    {
+        warning = function (check, message) {
+            if (!check && typeof console !== 'undefined') {
+                console.warn(message);
+            }
+        };
+        invariant = function (check, message) {
+            if (!check) {
+                throw new Error(message);
+            }
+        };
+    }
+
     const clamp$1 = (min, max, v) => Math.min(Math.max(v, min), max);
 
     const safeMin = 0.001;
@@ -2834,15 +2672,14 @@
             passive: !(onTapStart || onTap || onTapCancel || onPointerDown),
         };
         function removePointerEndListener() {
-            var _a;
-            (_a = cancelPointerEndListeners.current) === null || _a === void 0 ? void 0 : _a.call(cancelPointerEndListeners);
+            cancelPointerEndListeners.current && cancelPointerEndListeners.current();
             cancelPointerEndListeners.current = null;
         }
         function checkPointerEnd() {
-            var _a;
             removePointerEndListener();
             isPressing.current = false;
-            (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(exports.AnimationType.Tap, false);
+            visualElement.animationState &&
+                visualElement.animationState.setActive(exports.AnimationType.Tap, false);
             return !isDragActive();
         }
         function onPointerUp(event, info) {
@@ -2853,16 +2690,15 @@
              * as, or a child of, this component's element
              */
             !isNodeOrChild(visualElement.getInstance(), event.target)
-                ? onTapCancel === null || onTapCancel === void 0 ? void 0 : onTapCancel(event, info)
-                : onTap === null || onTap === void 0 ? void 0 : onTap(event, info);
+                ? onTapCancel && onTapCancel(event, info)
+                : onTap && onTap(event, info);
         }
         function onPointerCancel(event, info) {
             if (!checkPointerEnd())
                 return;
-            onTapCancel === null || onTapCancel === void 0 ? void 0 : onTapCancel(event, info);
+            onTapCancel && onTapCancel(event, info);
         }
         function onPointerDown(event, info) {
-            var _a;
             removePointerEndListener();
             if (isPressing.current)
                 return;
@@ -2871,13 +2707,22 @@
             /**
              * Ensure we trigger animations before firing event callback
              */
-            (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(exports.AnimationType.Tap, true);
-            onTapStart === null || onTapStart === void 0 ? void 0 : onTapStart(event, info);
+            visualElement.animationState &&
+                visualElement.animationState.setActive(exports.AnimationType.Tap, true);
+            onTapStart && onTapStart(event, info);
         }
         usePointerEvent(visualElement, "pointerdown", hasPressListeners ? onPointerDown : undefined, eventOptions);
         useUnmountEffect(removePointerEndListener);
     }
 
+    /**
+     * Browser-safe usage of process
+     */
+    const defaultEnvironment = "production";
+    const env = typeof process === "undefined" || process.env === undefined
+        ? defaultEnvironment
+        : "development" ;
+
     const warned = new Set();
     function warnOnce(condition, message, element) {
         if (condition || warned.has(message))
@@ -2901,14 +2746,13 @@
      */
     const observers = new WeakMap();
     const fireObserverCallback = (entry) => {
-        var _a;
-        (_a = observerCallbacks.get(entry.target)) === null || _a === void 0 ? void 0 : _a(entry);
+        const callback = observerCallbacks.get(entry.target);
+        callback && callback(entry);
     };
     const fireAllObserverCallbacks = (entries) => {
         entries.forEach(fireObserverCallback);
     };
-    function initIntersectionObserver(_a) {
-        var { root } = _a, options = __rest(_a, ["root"]);
+    function initIntersectionObserver({ root, ...options }) {
         const lookupRoot = root || document;
         /**
          * If we don't have an observer lookup map for this root, create one.
@@ -2923,7 +2767,7 @@
          * create one.
          */
         if (!rootObservers[key]) {
-            rootObservers[key] = new IntersectionObserver(fireAllObserverCallbacks, Object.assign({ root }, options));
+            rootObservers[key] = new IntersectionObserver(fireAllObserverCallbacks, { root, ...options });
         }
         return rootObservers[key];
     }
@@ -2964,7 +2808,6 @@
                 threshold: typeof amount === "number" ? amount : thresholdNames[amount],
             };
             const intersectionCallback = (entry) => {
-                var _a;
                 const { isIntersecting } = entry;
                 /**
                  * If there's been no change in the viewport state, early return.
@@ -2982,7 +2825,9 @@
                 else if (isIntersecting) {
                     state.hasEnteredView = true;
                 }
-                (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(exports.AnimationType.InView, isIntersecting);
+                if (visualElement.animationState) {
+                    visualElement.animationState.setActive(exports.AnimationType.InView, isIntersecting);
+                }
                 /**
                  * Use the latest committed props rather than the ones in scope
                  * when this observer is created
@@ -2991,7 +2836,7 @@
                 const callback = isIntersecting
                     ? props.onViewportEnter
                     : props.onViewportLeave;
-                callback === null || callback === void 0 ? void 0 : callback(entry);
+                callback && callback(entry);
             };
             return observeIntersection(visualElement.getInstance(), options, intersectionCallback);
         }, [shouldObserve, root, rootMargin, amount]);
@@ -3017,11 +2862,12 @@
              * is preferred to changing the behaviour of the animation state.
              */
             requestAnimationFrame(() => {
-                var _a;
                 state.hasEnteredView = true;
                 const { onViewportEnter } = visualElement.getProps();
-                onViewportEnter === null || onViewportEnter === void 0 ? void 0 : onViewportEnter(null);
-                (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(exports.AnimationType.InView, true);
+                onViewportEnter && onViewportEnter(null);
+                if (visualElement.animationState) {
+                    visualElement.animationState.setActive(exports.AnimationType.InView, true);
+                }
             });
         }, [shouldObserve]);
     }
@@ -3071,7 +2917,7 @@
         // Replace with useId when released in React
         const id = React.useId();
         React.useEffect(() => register(id), []);
-        const safeToRemove = () => onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete(id);
+        const safeToRemove = () => onExitComplete && onExitComplete(id);
         return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
     }
     /**
@@ -3230,17 +3076,29 @@
             transitionFactory =
                 defaultTransitions[valueKey] || defaultTransitions.default;
         }
-        return Object.assign({ to }, transitionFactory(to));
+        return { to, ...transitionFactory(to) };
     };
 
     /**
      * 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
      */
@@ -3264,17 +3122,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;
         /**
@@ -3339,26 +3195,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") {
             /**
@@ -3387,24 +3247,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 ||
@@ -3449,7 +3310,7 @@
             }
             return () => {
                 clearTimeout(delayTimer);
-                controls === null || controls === void 0 ? void 0 : controls.stop();
+                controls && controls.stop();
             };
         });
     }
@@ -3543,7 +3404,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.
              *
@@ -3852,6 +3713,27 @@
      */
     const findValueType = (v) => valueTypes.find(testValueType(v));
 
+    /**
+     * Creates an object containing the latest state of every MotionValue on a VisualElement
+     */
+    function getCurrent(visualElement) {
+        const current = {};
+        visualElement.forEachValue((value, key) => (current[key] = value.get()));
+        return current;
+    }
+    /**
+     * Creates an object containing the latest velocity of every MotionValue on a VisualElement
+     */
+    function getVelocity$1(visualElement) {
+        const velocity = {};
+        visualElement.forEachValue((value, key) => (velocity[key] = value.getVelocity()));
+        return velocity;
+    }
+    function resolveVariant(visualElement, definition, custom) {
+        const props = visualElement.getProps();
+        return resolveVariantFromProps(props, definition, custom !== undefined ? custom : props.custom, getCurrent(visualElement), getVelocity$1(visualElement));
+    }
+
     /**
      * Set VisualElement's MotionValue, creating a new MotionValue for it if
      * it doesn't exist.
@@ -3866,8 +3748,8 @@
     }
     function setTarget(visualElement, definition) {
         const resolved = resolveVariant(visualElement, definition);
-        let _a = resolved ? visualElement.makeTargetAnimatable(resolved, false) : {}, { transitionEnd = {}, transition = {} } = _a, target = __rest(_a, ["transitionEnd", "transition"]);
-        target = Object.assign(Object.assign({}, target), transitionEnd);
+        let { transitionEnd = {}, transition = {}, ...target } = resolved ? visualElement.makeTargetAnimatable(resolved, false) : {};
+        target = { ...target, ...transitionEnd };
         for (const key in target) {
             const value = resolveFinalValueInKeyframes(target[key]);
             setMotionValue(visualElement, key, value);
@@ -3896,8 +3778,7 @@
         }
     }
     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)
@@ -3936,7 +3817,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);
         }
     }
@@ -3947,11 +3830,14 @@
         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;
     }
@@ -4022,7 +3908,7 @@
      */
     function animateTarget(visualElement, definition, { delay = 0, transitionOverride, type } = {}) {
         var _a;
-        let _b = visualElement.makeTargetAnimatable(definition), { transition = visualElement.getDefaultTransition(), transitionEnd } = _b, target = __rest(_b, ["transition", "transitionEnd"]);
+        let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = visualElement.makeTargetAnimatable(definition);
         const willChange = visualElement.getValue("willChange");
         if (transitionOverride)
             transition = transitionOverride;
@@ -4037,12 +3923,16 @@
                     shouldBlockAnimation(animationTypeState, key))) {
                 continue;
             }
-            let valueTransition = Object.assign({ delay }, transition);
+            let valueTransition = { delay, ...transition };
             /**
              * Make animation instant if this is a transform prop and we should reduce motion.
              */
-            if (visualElement.shouldReduceMotion && isTransformProp(key)) {
-                valueTransition = Object.assign(Object.assign({}, valueTransition), { type: false, delay: 0 });
+            if (visualElement.shouldReduceMotion && transformProps.has(key)) {
+                valueTransition = {
+                    ...valueTransition,
+                    type: false,
+                    delay: 0,
+                };
             }
             let animation = startAnimation(key, value, valueTarget, valueTransition);
             if (isWillChangeMotionValue(willChange)) {
@@ -4064,7 +3954,10 @@
         Array.from(visualElement.variantChildren)
             .sort(sortByTreeOrder)
             .forEach((child, i) => {
-            animations.push(animateVariant(child, variant, Object.assign(Object.assign({}, options), { delay: delayChildren + generateStaggerDuration(i) })).then(() => child.notifyAnimationComplete(variant)));
+            animations.push(animateVariant(child, variant, {
+                ...options,
+                delay: delayChildren + generateStaggerDuration(i),
+            }).then(() => child.notifyAnimationComplete(variant)));
         });
         return Promise.all(animations);
     }
@@ -4111,8 +4004,8 @@
         const buildResolvedTypeValues = (acc, definition) => {
             const resolved = resolveVariant(visualElement, definition);
             if (resolved) {
-                const { transition, transitionEnd } = resolved, target = __rest(resolved, ["transition", "transitionEnd"]);
-                acc = Object.assign(Object.assign(Object.assign({}, acc), target), transitionEnd);
+                const { transition, transitionEnd, ...target } = resolved;
+                acc = { ...acc, ...target, ...transitionEnd };
             }
             return acc;
         };
@@ -4195,7 +4088,7 @@
                  * Set all encountered keys so far as the protected keys for this type. This will
                  * be any key that has been animated or otherwise handled by active, higher-priortiy types.
                  */
-                typeState.protectedKeys = Object.assign({}, encounteredKeys);
+                typeState.protectedKeys = { ...encounteredKeys };
                 // Check if we can skip analysing this prop early
                 if (
                 // If it isn't active and hasn't *just* been set as inactive
@@ -4243,7 +4136,10 @@
                  *    needs adding to the type's protectedKeys list.
                  */
                 const { prevResolvedValues = {} } = typeState;
-                const allKeys = Object.assign(Object.assign({}, prevResolvedValues), resolvedValues);
+                const allKeys = {
+                    ...prevResolvedValues,
+                    ...resolvedValues,
+                };
                 const markToAnimate = (key) => {
                     shouldAnimateType = true;
                     removedKeys.delete(key);
@@ -4309,7 +4205,7 @@
                  *
                  */
                 if (typeState.isActive) {
-                    encounteredKeys = Object.assign(Object.assign({}, encounteredKeys), resolvedValues);
+                    encounteredKeys = { ...encounteredKeys, ...resolvedValues };
                 }
                 if (isInitialRender && visualElement.blockInitialAnimation) {
                     shouldAnimateType = false;
@@ -4322,7 +4218,7 @@
                 if (shouldAnimateType && !isInherited) {
                     animations.push(...definitionList.map((animation) => ({
                         animation: animation,
-                        options: Object.assign({ type }, options),
+                        options: { type, ...options },
                     })));
                 }
             }
@@ -4378,7 +4274,7 @@
         if (typeof next === "string") {
             return next !== prev;
         }
-        else if (isVariantLabels(next)) {
+        else if (Array.isArray(next)) {
             return !shallowCompare(next, prev);
         }
         return false;
@@ -4423,10 +4319,15 @@
             const [isPresent, safeToRemove] = usePresence();
             const presenceContext = React.useContext(PresenceContext);
             React.useEffect(() => {
-                var _a, _b;
                 visualElement.isPresent = isPresent;
-                const animation = (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(exports.AnimationType.Exit, !isPresent, { custom: (_b = presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.custom) !== null && _b !== void 0 ? _b : custom });
-                !isPresent && (animation === null || animation === void 0 ? void 0 : animation.then(safeToRemove));
+                const animation = visualElement.animationState &&
+                    visualElement.animationState.setActive(exports.AnimationType.Exit, !isPresent, {
+                        custom: (presenceContext && presenceContext.custom) ||
+                            custom,
+                    });
+                if (animation && !isPresent) {
+                    animation.then(safeToRemove);
+                }
             }, [isPresent]);
         }),
     };
@@ -4465,7 +4366,7 @@
                     return;
                 const { point } = info;
                 const { timestamp } = getFrameData();
-                this.history.push(Object.assign(Object.assign({}, point), { timestamp }));
+                this.history.push({ ...point, timestamp });
                 const { onStart, onMove } = this.handlers;
                 if (!isPanStarted) {
                     onStart && onStart(this.lastMoveEvent, info);
@@ -4502,7 +4403,7 @@
             const initialInfo = transformPoint(info, this.transformPagePoint);
             const { point } = initialInfo;
             const { timestamp } = getFrameData();
-            this.history = [Object.assign(Object.assign({}, point), { timestamp })];
+            this.history = [{ ...point, timestamp }];
             const { onSessionStart } = handlers;
             onSessionStart &&
                 onSessionStart(event, getPanInfo(initialInfo, this.history));
@@ -5147,8 +5048,17 @@
                  */
                 const bounceStiffness = dragElastic ? 200 : 1000000;
                 const bounceDamping = dragElastic ? 40 : 10000000;
-                const inertia = Object.assign(Object.assign({ type: "inertia", velocity: dragMomentum ? velocity[axis] : 0, bounceStiffness,
-                    bounceDamping, timeConstant: 750, restDelta: 1, restSpeed: 10 }, dragTransition), transition);
+                const inertia = {
+                    type: "inertia",
+                    velocity: dragMomentum ? velocity[axis] : 0,
+                    bounceStiffness,
+                    bounceDamping,
+                    timeConstant: 750,
+                    restDelta: 1,
+                    restSpeed: 10,
+                    ...dragTransition,
+                    ...transition,
+                };
                 // If we're not animating on an externally-provided `MotionValue` we can use the
                 // component's animation controls which will handle interactions with whileHover (etc),
                 // otherwise we just have to animate the `MotionValue` itself.
@@ -5300,12 +5210,15 @@
         getProps() {
             const props = this.visualElement.getProps();
             const { drag = false, dragDirectionLock = false, dragPropagation = false, dragConstraints = false, dragElastic = defaultElastic, dragMomentum = true, } = props;
-            return Object.assign(Object.assign({}, props), { drag,
+            return {
+                ...props,
+                drag,
                 dragDirectionLock,
                 dragPropagation,
                 dragConstraints,
                 dragElastic,
-                dragMomentum });
+                dragMomentum,
+            };
         }
     }
     function shouldDrag(direction, drag, currentDirection) {
@@ -5389,6 +5302,25 @@
         drag: makeRenderlessComponent(useDrag),
     };
 
+    // 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;
+        }
+    }
+
     const names = [
         "LayoutMeasure",
         "BeforeLayoutMeasure",
@@ -5430,7 +5362,6 @@
     }
 
     function updateMotionValuesFromProps(element, next, prev) {
-        var _a;
         const { willChange } = next;
         for (const key in next) {
             const nextValue = next[key];
@@ -5449,7 +5380,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)) {
@@ -5474,7 +5405,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));
                 }
             }
         }
@@ -5486,7 +5418,9 @@
         return next;
     }
 
-    const visualElement = ({ treeType = "", build, getBaseTarget, makeTargetAnimatable, measureViewportBox, render: renderInstance, readValueFromInstance, removeValueFromRenderState, sortNodePosition, scrapeMotionValuesFromProps, }) => ({ parent, props, presenceId, blockInitialAnimation, visualState, shouldReduceMotion, }, options = {}) => {
+    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;
         /**
@@ -5522,7 +5456,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
@@ -5569,7 +5505,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)) {
@@ -5582,36 +5518,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.
@@ -5620,27 +5559,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);
             },
@@ -5659,6 +5608,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.
              */
@@ -5677,30 +5675,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.
@@ -5751,11 +5750,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.
@@ -5767,20 +5766,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.
@@ -5799,7 +5797,9 @@
                         return target;
                 }
                 return baseTarget[key];
-            } }, lifecycles), { 
+            },
+            // Lifecyles ========================
+            ...lifecycles,
             /**
              * Build the renderer state based on the latest visual state.
              */
@@ -5812,14 +5812,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.
@@ -5831,25 +5831,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;
@@ -5865,7 +5867,8 @@
                     }
                 }
                 return context;
-            } });
+            },
+        };
         return element;
     };
     const variantProps = ["initial", ...variantPriorityOrder];
@@ -5916,16 +5919,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) => {
@@ -5950,8 +5951,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 };
     }
@@ -6005,7 +6007,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) => {
@@ -6062,8 +6064,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.
@@ -6198,7 +6200,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;
             }
@@ -6251,10 +6253,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
@@ -6273,8 +6272,11 @@
                 transitionEnd = parsed.transitionEnd;
                 target = parsed.target;
             }
-            return Object.assign({ transition,
-                transitionEnd }, target);
+            return {
+                transition,
+                transitionEnd,
+                ...target,
+            };
         },
         scrapeMotionValuesFromProps: scrapeMotionValuesFromProps$1,
         build(element, renderState, latestValues, options, props) {
@@ -6289,12 +6291,14 @@
     };
     const htmlVisualElement = visualElement(htmlConfig);
 
-    const svgVisualElement = visualElement(Object.assign(Object.assign({}, htmlConfig), { getBaseTarget(props, key) {
+    const svgVisualElement = visualElement({
+        ...htmlConfig,
+        getBaseTarget(props, key) {
             return props[key];
         },
         readValueFromInstance(domElement, key) {
             var _a;
-            if (isTransformProp(key)) {
+            if (transformProps.has(key)) {
                 return ((_a = getDefaultValueType(key)) === null || _a === void 0 ? void 0 : _a.default) || 0;
             }
             key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;
@@ -6303,7 +6307,9 @@
         scrapeMotionValuesFromProps,
         build(_element, renderState, latestValues, options, props) {
             buildSVGAttrs(renderState, latestValues, options, props.transformTemplate);
-        }, render: renderSVG }));
+        },
+        render: renderSVG,
+    });
 
     const createDomVisualElement = (Component, options) => {
         return isSVGComponent(Component)
@@ -6412,16 +6418,19 @@
             const { projection } = visualElement;
             addScaleCorrector(defaultScaleCorrectors);
             if (projection) {
-                if (layoutGroup === null || layoutGroup === void 0 ? void 0 : layoutGroup.group)
+                if (layoutGroup.group)
                     layoutGroup.group.add(projection);
-                if ((switchLayoutGroup === null || switchLayoutGroup === void 0 ? void 0 : switchLayoutGroup.register) && layoutId) {
+                if (switchLayoutGroup && switchLayoutGroup.register && layoutId) {
                     switchLayoutGroup.register(projection);
                 }
                 projection.root.didUpdate();
                 projection.addEventListener("animationComplete", () => {
                     this.safeToRemove();
                 });
-                projection.setOptions(Object.assign(Object.assign({}, projection.options), { onExitComplete: () => this.safeToRemove() }));
+                projection.setOptions({
+                    ...projection.options,
+                    onExitComplete: () => this.safeToRemove(),
+                });
             }
             globalProjectionState.hasEverUpdated = true;
         }
@@ -6497,15 +6506,18 @@
     function MeasureLayout(props) {
         const [isPresent, safeToRemove] = usePresence();
         const layoutGroup = React.useContext(LayoutGroupContext);
-        return (React__default["default"].createElement(MeasureLayoutWithContext, Object.assign({}, props, { layoutGroup: layoutGroup, switchLayoutGroup: React.useContext(SwitchLayoutGroupContext), isPresent: isPresent, safeToRemove: safeToRemove })));
+        return (React__default["default"].createElement(MeasureLayoutWithContext, { ...props, layoutGroup: layoutGroup, switchLayoutGroup: React.useContext(SwitchLayoutGroupContext), isPresent: isPresent, safeToRemove: safeToRemove }));
     }
     const defaultScaleCorrectors = {
-        borderRadius: Object.assign(Object.assign({}, correctBorderRadius), { applyTo: [
+        borderRadius: {
+            ...correctBorderRadius,
+            applyTo: [
                 "borderTopLeftRadius",
                 "borderTopRightRadius",
                 "borderBottomLeftRadius",
                 "borderBottomRightRadius",
-            ] }),
+            ],
+        },
         borderTopLeftRadius: correctBorderRadius,
         borderTopRightRadius: correctBorderRadius,
         borderBottomLeftRadius: correctBorderRadius,
@@ -6720,6 +6732,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() {
@@ -6886,6 +6904,7 @@
         }
     }
 
+    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
@@ -7077,7 +7096,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;
@@ -7400,8 +7423,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;
@@ -7583,7 +7609,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;
@@ -7636,15 +7662,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;
                     }
@@ -7673,9 +7703,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.
@@ -7779,7 +7827,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)
@@ -7805,7 +7853,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) || "";
                     }
@@ -7832,7 +7883,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;
@@ -7844,8 +7895,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
@@ -7893,16 +7948,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]
@@ -7912,7 +7968,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]
@@ -7961,7 +8017,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
@@ -8045,6 +8101,11 @@
         roundAxis(box.x);
         roundAxis(box.y);
     }
+    function shouldAnimatePositionOnly(animationType, snapshot, layout) {
+        return (animationType === "position" ||
+            (animationType === "preserve-aspect" &&
+                !isCloseTo(aspectRatio(snapshot), aspectRatio(layout))));
+    }
 
     const DocumentProjectionNode = createProjectionNode({
         attachResizeListener: (ref, notify) => addDomEvent(ref, "resize", notify),
@@ -8073,12 +8134,17 @@
             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"),
     });
 
-    const featureBundle = Object.assign(Object.assign(Object.assign(Object.assign({}, animations), gestureAnimations), drag), layoutFeatures);
+    const featureBundle = {
+        ...animations,
+        ...gestureAnimations,
+        ...drag,
+        ...layoutFeatures,
+    };
     /**
      * HTML & SVG components, optimised for use with gestures and animation. These can be used as
      * drop-in replacements for any HTML & SVG component, all CSS & SVG properties are supported.
@@ -8178,14 +8244,14 @@
          * styles set via the style prop.
          */
         React.useInsertionEffect(() => {
-            var _a;
             const { width, height, top, left } = size.current;
             if (isPresent || !ref.current || !width || !height)
                 return;
             ref.current.dataset.motionPopId = id;
             const style = document.createElement("style");
             document.head.appendChild(style);
-            (_a = style.sheet) === null || _a === void 0 ? void 0 : _a.insertRule(`
+            if (style.sheet) {
+                style.sheet.insertRule(`
           [data-motion-pop-id="${id}"] {
             position: absolute !important;
             width: ${width}px !important;
@@ -8194,6 +8260,7 @@
             left: ${left}px !important;
           }
         `);
+            }
             return () => {
                 document.head.removeChild(style);
             };
@@ -8215,7 +8282,7 @@
                     if (!isComplete)
                         return; // can stop searching when any is incomplete
                 }
-                onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete();
+                onExitComplete && onExitComplete();
             },
             register: (childId) => {
                 presenceChildren.set(childId, false);
@@ -8236,7 +8303,10 @@
          * component immediately.
          */
         React__namespace.useEffect(() => {
-            !isPresent && !presenceChildren.size && (onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete());
+            !isPresent &&
+                !presenceChildren.size &&
+                onExitComplete &&
+                onExitComplete();
         }, [isPresent]);
         if (mode === "popLayout") {
             children = React__namespace.createElement(PopChild, { isPresent: isPresent }, children);
@@ -8424,8 +8494,7 @@
 
     const shouldInheritGroup = (inherit) => inherit === true;
     const shouldInheritId = (inherit) => shouldInheritGroup(inherit === true) || inherit === "id";
-    const LayoutGroup = ({ children, id, inheritId, inherit = true, }) => {
-        var _a, _b;
+    const LayoutGroup = ({ children, id, inheritId, inherit = true }) => {
         // Maintain backwards-compatibility with inheritId until 7.0
         if (inheritId !== undefined)
             inherit = inheritId;
@@ -8433,7 +8502,7 @@
         const deprecatedLayoutGroupContext = React.useContext(DeprecatedLayoutGroupContext);
         const [forceRender, key] = useForceUpdate();
         const context = React.useRef(null);
-        const upstreamId = (_a = layoutGroupContext.id) !== null && _a !== void 0 ? _a : deprecatedLayoutGroupContext;
+        const upstreamId = layoutGroupContext.id || deprecatedLayoutGroupContext;
         if (context.current === null) {
             if (shouldInheritId(inherit) && upstreamId) {
                 id = id ? upstreamId + "-" + id : upstreamId;
@@ -8441,11 +8510,11 @@
             context.current = {
                 id,
                 group: shouldInheritGroup(inherit)
-                    ? (_b = layoutGroupContext === null || layoutGroupContext === void 0 ? void 0 : layoutGroupContext.group) !== null && _b !== void 0 ? _b : nodeGroup()
+                    ? layoutGroupContext.group || nodeGroup()
                     : nodeGroup(),
             };
         }
-        const memoizedContext = React.useMemo(() => (Object.assign(Object.assign({}, context.current), { forceRender })), [key]);
+        const memoizedContext = React.useMemo(() => ({ ...context.current, forceRender }), [key]);
         return (React__namespace.createElement(LayoutGroupContext.Provider, { value: memoizedContext }, children));
     };
 
@@ -8474,13 +8543,12 @@
      *
      * @public
      */
-    function MotionConfig(_a) {
-        var { children, isValidProp } = _a, config = __rest(_a, ["children", "isValidProp"]);
+    function MotionConfig({ children, isValidProp, ...config }) {
         isValidProp && loadExternalIsValidProp(isValidProp);
         /**
          * Inherit props from any parent MotionConfig components
          */
-        config = Object.assign(Object.assign({}, React.useContext(MotionConfigContext)), config);
+        config = { ...React.useContext(MotionConfigContext), ...config };
         /**
          * Don't allow isStatic to change between renders as it affects how many hooks
          * motion components fire.
@@ -8536,14 +8604,13 @@
          * If this is a synchronous load, load features immediately
          */
         if (!isLazyBundle(features)) {
-            const { renderer } = features, loadedFeatures = __rest(features, ["renderer"]);
+            const { renderer, ...loadedFeatures } = features;
             loadedRenderer.current = renderer;
             loadFeatures(loadedFeatures);
         }
         React.useEffect(() => {
             if (isLazyBundle(features)) {
-                features().then((_a) => {
-                    var { renderer } = _a, loadedFeatures = __rest(_a, ["renderer"]);
+                features().then(({ renderer, ...loadedFeatures }) => {
                     loadFeatures(loadedFeatures);
                     loadedRenderer.current = renderer;
                     setIsLoaded(true);
@@ -8578,8 +8645,7 @@
         return order;
     }
 
-    function ReorderGroup(_a, externalRef) {
-        var { children, as = "ul", axis = "y", onReorder, values } = _a, props = __rest(_a, ["children", "as", "axis", "onReorder", "values"]);
+    function ReorderGroup({ children, as = "ul", axis = "y", onReorder, values, ...props }, externalRef) {
         const Component = useConstant(() => motion(as));
         const order = [];
         const isReordering = React.useRef(false);
@@ -8611,7 +8677,7 @@
         React.useEffect(() => {
             isReordering.current = false;
         });
-        return (React__namespace.createElement(Component, Object.assign({}, props, { ref: externalRef }),
+        return (React__namespace.createElement(Component, { ...props, ref: externalRef },
             React__namespace.createElement(ReorderContext.Provider, { value: context }, children)));
     }
     const Group = React.forwardRef(ReorderGroup);
@@ -8665,7 +8731,10 @@
         const inputRange = args[1 + argOffset];
         const outputRange = args[2 + argOffset];
         const options = args[3 + argOffset];
-        const interpolator = interpolate$1(inputRange, outputRange, Object.assign({ mixer: getMixer(outputRange[0]) }, options));
+        const interpolator = interpolate$1(inputRange, outputRange, {
+            mixer: getMixer(outputRange[0]),
+            ...options,
+        });
         return useImmediate ? interpolator(inputValue) : interpolator;
     }
 
@@ -8730,13 +8799,12 @@
     function useDefaultMotionValue(value, defaultValue = 0) {
         return isMotionValue(value) ? value : useMotionValue(defaultValue);
     }
-    function ReorderItem(_a, externalRef) {
-        var { children, style, value, as = "li", onDrag, layout = true } = _a, props = __rest(_a, ["children", "style", "value", "as", "onDrag", "layout"]);
+    function ReorderItem({ children, style = {}, value, as = "li", onDrag, layout = true, ...props }, externalRef) {
         const Component = useConstant(() => motion(as));
         const context = React.useContext(ReorderContext);
         const point = {
-            x: useDefaultMotionValue(style === null || style === void 0 ? void 0 : style.x),
-            y: useDefaultMotionValue(style === null || style === void 0 ? void 0 : style.y),
+            x: useDefaultMotionValue(style.x),
+            y: useDefaultMotionValue(style.y),
         };
         const zIndex = useTransform([point.x, point.y], ([latestX, latestY]) => latestX || latestY ? 1 : "unset");
         const measuredLayout = React.useRef(null);
@@ -8745,14 +8813,14 @@
         React.useEffect(() => {
             registerItem(value, measuredLayout.current);
         }, [context]);
-        return (React__namespace.createElement(Component, Object.assign({ drag: axis }, props, { dragSnapToOrigin: true, style: Object.assign(Object.assign({}, style), { x: point.x, y: point.y, zIndex }), layout: layout, onDrag: (event, gesturePoint) => {
+        return (React__namespace.createElement(Component, { drag: axis, ...props, dragSnapToOrigin: true, style: { ...style, x: point.x, y: point.y, zIndex }, layout: layout, onDrag: (event, gesturePoint) => {
                 const { velocity } = gesturePoint;
                 velocity[axis] &&
                     updateOrder(value, point[axis].get(), velocity[axis]);
-                onDrag === null || onDrag === void 0 ? void 0 : onDrag(event, gesturePoint);
+                onDrag && onDrag(event, gesturePoint);
             }, onLayoutMeasure: (measured) => {
                 measuredLayout.current = measured;
-            }, ref: externalRef }), children));
+            }, ref: externalRef }, children));
     }
     const Item = React.forwardRef(ReorderItem);
 
@@ -8764,12 +8832,21 @@
     /**
      * @public
      */
-    const domAnimation = Object.assign(Object.assign({ renderer: createDomVisualElement }, animations), gestureAnimations);
+    const domAnimation = {
+        renderer: createDomVisualElement,
+        ...animations,
+        ...gestureAnimations,
+    };
 
     /**
      * @public
      */
-    const domMax = Object.assign(Object.assign(Object.assign(Object.assign({}, domAnimation), drag), layoutFeatures), { projectionNodeConstructor: HTMLProjectionNode });
+    const domMax = {
+        ...domAnimation,
+        ...drag,
+        ...layoutFeatures,
+        projectionNodeConstructor: HTMLProjectionNode,
+    };
 
     /**
      * Combine multiple motion values into a new one using a string template literal.
@@ -8845,7 +8922,13 @@
                 if (activeSpringAnimation.current) {
                     activeSpringAnimation.current.stop();
                 }
-                activeSpringAnimation.current = animate$1(Object.assign(Object.assign({ from: value.get(), to: v, velocity: value.getVelocity() }, config), { onUpdate: set }));
+                activeSpringAnimation.current = animate$1({
+                    from: value.get(),
+                    to: v,
+                    velocity: value.getVelocity(),
+                    ...config,
+                    onUpdate: set,
+                });
                 return value.get();
             });
         }, [JSON.stringify(config)]);
@@ -9461,8 +9544,7 @@
         scrollXProgress: motionValue(0),
         scrollYProgress: motionValue(0),
     });
-    function useScroll(_a = {}) {
-        var { container, target } = _a, options = __rest(_a, ["container", "target"]);
+    function useScroll({ container, target, ...options } = {}) {
         const values = useConstant(createScrollMotionValues);
         useIsomorphicLayoutEffect(() => {
             return scroll(({ x, y }) => {
@@ -9470,7 +9552,11 @@
                 values.scrollXProgress.set(x.progress);
                 values.scrollY.set(y.current);
                 values.scrollYProgress.set(y.progress);
-            }, Object.assign(Object.assign({}, options), { container: (container === null || container === void 0 ? void 0 : container.current) || undefined, target: (target === null || target === void 0 ? void 0 : target.current) || undefined }));
+            }, {
+                ...options,
+                container: (container === null || container === void 0 ? void 0 : container.current) || undefined,
+                target: (target === null || target === void 0 ? void 0 : target.current) || undefined,
+            });
         }, []);
         return values;
     }
@@ -9521,11 +9607,11 @@
         }
         add(name) {
             let memberName;
-            if (isTransformProp(name)) {
+            if (transformProps.has(name)) {
                 this.transforms.add(name);
                 memberName = "transform";
             }
-            else if (!isTransformOriginProp(name) &&
+            else if (!name.startsWith("origin") &&
                 !isCSSVariable$1(name) &&
                 name !== "willChange") {
                 memberName = camelToDash(name);
@@ -9536,7 +9622,7 @@
             }
         }
         remove(name) {
-            if (isTransformProp(name)) {
+            if (transformProps.has(name)) {
                 this.transforms.delete(name);
                 if (!this.transforms.size) {
                     removeItem(this.members, "transform");
@@ -9555,6 +9641,58 @@
         return useConstant(() => new WillChangeMotionValue("auto"));
     }
 
+    /**
+     * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting.
+     *
+     * This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing
+     * `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.
+     *
+     * It will actively respond to changes and re-render your components with the latest setting.
+     *
+     * ```jsx
+     * export function Sidebar({ isOpen }) {
+     *   const shouldReduceMotion = useReducedMotion()
+     *   const closedX = shouldReduceMotion ? 0 : "-100%"
+     *
+     *   return (
+     *     <motion.div animate={{
+     *       opacity: isOpen ? 1 : 0,
+     *       x: isOpen ? 0 : closedX
+     *     }} />
+     *   )
+     * }
+     * ```
+     *
+     * @return boolean
+     *
+     * @public
+     */
+    function useReducedMotion() {
+        /**
+         * Lazy initialisation of prefersReducedMotion
+         */
+        !hasReducedMotionListener.current && initPrefersReducedMotion();
+        const [shouldReduceMotion] = React.useState(prefersReducedMotion.current);
+        /**
+         * TODO See if people miss automatically updating shouldReduceMotion setting
+         */
+        return shouldReduceMotion;
+    }
+
+    function useReducedMotionConfig() {
+        const reducedMotionPreference = useReducedMotion();
+        const { reducedMotion } = React.useContext(MotionConfigContext);
+        if (reducedMotion === "never") {
+            return false;
+        }
+        else if (reducedMotion === "always") {
+            return true;
+        }
+        else {
+            return reducedMotionPreference;
+        }
+    }
+
     /**
      * @public
      */
@@ -9709,7 +9847,6 @@
     function useInView(ref, { root, margin, amount, once = false } = {}) {
         const [isInView, setInView] = React.useState(false);
         React.useEffect(() => {
-            var _a;
             if (!ref.current || (once && isInView))
                 return;
             const onEnter = () => {
@@ -9717,7 +9854,7 @@
                 return once ? undefined : () => setInView(false);
             };
             const options = {
-                root: (_a = root === null || root === void 0 ? void 0 : root.current) !== null && _a !== void 0 ? _a : undefined,
+                root: (root && root.current) || undefined,
                 margin,
                 amount: amount === "some" ? "any" : amount,
             };
@@ -9814,12 +9951,12 @@
     function useInstantLayoutTransition() {
         return startTransition;
     }
-    function startTransition(cb) {
+    function startTransition(callback) {
         if (!rootProjectionNode.current)
             return;
         rootProjectionNode.current.isUpdating = false;
         rootProjectionNode.current.blockUpdate();
-        cb === null || cb === void 0 ? void 0 : cb();
+        callback && callback();
     }
 
     function useInstantTransition() {
@@ -9862,11 +9999,10 @@
         readValueFromInstance(_state, key, options) {
             return options.initialState[key] || 0;
         },
-        makeTargetAnimatable(element, _a) {
-            var { transition, transitionEnd } = _a, target = __rest(_a, ["transition", "transitionEnd"]);
+        makeTargetAnimatable(element, { transition, transitionEnd, ...target }) {
             const origin = getOrigin(target, transition || {}, element);
             checkTargetForNewValues(element, target, origin);
-            return Object.assign({ transition, transitionEnd }, target);
+            return { transition, transitionEnd, ...target };
         },
     });
     const useVisualState = makeUseVisualState({
@@ -9888,7 +10024,7 @@
         React.useEffect(() => {
             element.setProps({
                 onUpdate: (v) => {
-                    setAnimationState(Object.assign({}, v));
+                    setAnimationState({ ...v });
                 },
             });
         }, [setAnimationState, element]);