framer-motion 7.2.0 → 7.3.1

package/dist/cjs/index.js

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var heyListen = require('hey-listen');
 var styleValueTypes = require('style-value-types');
-var tslib = require('tslib');
 var popmotion = require('popmotion');
+var heyListen = require('hey-listen');
 var sync = require('framesync');
 var dom = require('@motionone/dom');
 
@@ -30,97 +29,10 @@ function _interopNamespace(e) {
     return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var sync__default = /*#__PURE__*/_interopDefaultLegacy(sync);
 
-/**
- * Browser-safe usage of process
- */
-const defaultEnvironment = "production";
-const env = typeof process === "undefined" || process.env === undefined
-    ? defaultEnvironment
-    : process.env.NODE_ENV || defaultEnvironment;
-
-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];
-        }
-    }
-}
-
-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) {
-        heyListen.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;
-}
-
 /**
  * @public
  */
@@ -144,104 +56,40 @@ const isBrowser = typeof document !== "undefined";
 
 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;
 }
 
@@ -256,8 +104,7 @@ function isRefObject(ref) {
  */
 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)
@@ -280,80 +127,37 @@ function useMotionRef(visualState, visualElement, externalRef) {
     [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);
+    return typeof v === "string" || Array.isArray(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 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)
@@ -373,6 +177,50 @@ function variantLabelsAsDependency(prop) {
     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.
  *
@@ -417,58 +265,27 @@ function useProjectionId() {
 
 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.
  *
@@ -481,15 +298,12 @@ class VisualElementHandler extends React__default["default"].Component {
 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);
         /**
@@ -503,40 +317,42 @@ function createMotionComponent({ preloadedFeatures, createVisualElement, project
          * 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;
@@ -650,52 +466,41 @@ function addScaleCorrector(correctors) {
     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",
@@ -703,6 +508,10 @@ const translateAlias = {
     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.
  *
@@ -714,18 +523,11 @@ function buildTransform({ transform, transformKeys }, { enableHardwareAccelerati
     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();
@@ -739,13 +541,6 @@ function buildTransform({ transform, transformKeys }, { enableHardwareAccelerati
     }
     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
@@ -763,7 +558,10 @@ const getValueAsType = (value, type) => {
         : value;
 };
 
-const int = Object.assign(Object.assign({}, styleValueTypes.number), { transform: Math.round });
+const int = {
+    ...styleValueTypes.number,
+    transform: Math.round,
+};
 
 const numberValueTypes = {
     // Border props
@@ -833,11 +631,7 @@ const numberValueTypes = {
 };
 
 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;
@@ -862,7 +656,7 @@ function buildHTMLStyles(state, latestValues, options, transformTemplate) {
         // 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;
@@ -871,29 +665,35 @@ function buildHTMLStyles(state, latestValues, options, transformTemplate) {
             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}`;
     }
 }
 
@@ -916,28 +716,24 @@ function useInitialMotionValues({ transformTemplate }, visualState, isStatic) {
     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
@@ -955,6 +751,24 @@ function useHTMLProps(props, visualState, isStatic) {
     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.
  *
@@ -963,8 +777,6 @@ function useHTMLProps(props, visualState, isStatic) {
  */
 const validMotionProps = new Set([
     "initial",
-    "animate",
-    "exit",
     "style",
     "variants",
     "transition",
@@ -1000,24 +812,13 @@ const validMotionProps = new Set([
     "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.
@@ -1123,10 +924,9 @@ function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true
 /**
  * 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 = tslib.__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 = {};
@@ -1156,18 +956,24 @@ function buildSVGAttrs(state, _a, options, transformTemplate) {
     }
 }
 
-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;
 }
@@ -1179,7 +985,11 @@ function createUseRender(forwardMotionProps = false) {
             : 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;
         }
@@ -1188,12 +998,10 @@ function createUseRender(forwardMotionProps = false) {
     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));
@@ -1258,8 +1066,29 @@ function scrapeMotionValuesFromProps(props) {
     return newValues;
 }
 
-function isAnimationControls(v) {
-    return typeof v === "object" && typeof v.start === "function";
+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) => {
@@ -1299,29 +1128,32 @@ function makeState({ scrapeMotionValuesFromProps, createRenderState, onMount, },
 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)) {
@@ -1330,7 +1162,7 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
             const resolved = resolveVariantFromProps(props, definition);
             if (!resolved)
                 return;
-            const { transitionEnd, transition } = resolved, target = tslib.__rest(resolved, ["transitionEnd", "transition"]);
+            const { transitionEnd, transition, ...target } = resolved;
             for (const key in target) {
                 let valueTarget = target[key];
                 if (Array.isArray(valueTarget)) {
@@ -1338,7 +1170,7 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
                      * 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];
@@ -1392,9 +1224,14 @@ function createDomMotionConfig(Component, { forwardMotionProps = false }, preloa
     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;
@@ -1449,13 +1286,12 @@ function useDomEvent(ref, eventName, handler, options) {
  * @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);
@@ -1610,14 +1446,15 @@ function isDragActive() {
 
 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, }) {
@@ -1667,15 +1504,14 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
         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) {
@@ -1686,16 +1522,15 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
          * 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;
@@ -1704,13 +1539,22 @@ function useTapGesture({ onTap, onTapStart, onTapCancel, whileTap, visualElement
         /**
          * 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
+    : process.env.NODE_ENV || defaultEnvironment;
+
 const warned = new Set();
 function warnOnce(condition, message, element) {
     if (condition || warned.has(message))
@@ -1734,14 +1578,13 @@ const observerCallbacks = new WeakMap();
  */
 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 = tslib.__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.
@@ -1756,7 +1599,7 @@ function initIntersectionObserver(_a) {
      * create one.
      */
     if (!rootObservers[key]) {
-        rootObservers[key] = new IntersectionObserver(fireAllObserverCallbacks, Object.assign({ root }, options));
+        rootObservers[key] = new IntersectionObserver(fireAllObserverCallbacks, { root, ...options });
     }
     return rootObservers[key];
 }
@@ -1797,7 +1640,6 @@ function useIntersectionObserver(shouldObserve, state, visualElement, { root, ma
             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.
@@ -1815,7 +1657,9 @@ function useIntersectionObserver(shouldObserve, state, visualElement, { root, ma
             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
@@ -1824,7 +1668,7 @@ function useIntersectionObserver(shouldObserve, state, visualElement, { root, ma
             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]);
@@ -1850,11 +1694,12 @@ function useMissingIntersectionObserver(shouldObserve, state, visualElement, { f
          * 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]);
 }
@@ -1904,7 +1749,7 @@ function usePresence() {
     // 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];
 }
 /**
@@ -2063,17 +1908,29 @@ const getDefaultTransition = (valueKey, to) => {
         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: styleValueTypes.color, backgroundColor: styleValueTypes.color, outlineColor: styleValueTypes.color, fill: styleValueTypes.color, stroke: styleValueTypes.color, 
+    color: styleValueTypes.color,
+    backgroundColor: styleValueTypes.color,
+    outlineColor: styleValueTypes.color,
+    fill: styleValueTypes.color,
+    stroke: styleValueTypes.color,
     // Border props
-    borderColor: styleValueTypes.color, borderTopColor: styleValueTypes.color, borderRightColor: styleValueTypes.color, borderBottomColor: styleValueTypes.color, borderLeftColor: styleValueTypes.color, filter: styleValueTypes.filter, WebkitFilter: styleValueTypes.filter });
+    borderColor: styleValueTypes.color,
+    borderTopColor: styleValueTypes.color,
+    borderRightColor: styleValueTypes.color,
+    borderBottomColor: styleValueTypes.color,
+    borderLeftColor: styleValueTypes.color,
+    filter: styleValueTypes.filter,
+    WebkitFilter: styleValueTypes.filter,
+};
 /**
  * Gets the default ValueType for the provided value key
  */
@@ -2097,17 +1954,15 @@ const instantAnimationState = {
  * This filters out orchestration options and returns true
  * if any options are left.
  */
-function isTransitionDefined(_a) {
-    var transition = tslib.__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 = tslib.__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;
     /**
@@ -2172,26 +2027,30 @@ function hydrateKeyframes(options) {
     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") {
         /**
@@ -2220,24 +2079,25 @@ function getAnimation(key, value, target, transition, onComplete) {
         };
         return valueTransition.type === "inertia" ||
             valueTransition.type === "decay"
-            ? popmotion.inertia(Object.assign(Object.assign({}, options), valueTransition))
-            : popmotion.animate(Object.assign(Object.assign({}, getPopmotionAnimationOptions(valueTransition, options, key)), { onUpdate: (v) => {
-                    var _a;
+            ? popmotion.inertia({ ...options, ...valueTransition })
+            : popmotion.animate({
+                ...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 ||
@@ -2282,7 +2142,7 @@ function startAnimation(key, value, target, transition = {}) {
         }
         return () => {
             clearTimeout(delayTimer);
-            controls === null || controls === void 0 ? void 0 : controls.stop();
+            controls && controls.stop();
         };
     });
 }
@@ -2376,7 +2236,7 @@ class MotionValue {
          * This will be replaced by the build step with the latest version number.
          * When MotionValues are provided to motion components, warn if versions are mixed.
          */
-        this.version = "7.2.0";
+        this.version = "7.3.1";
         /**
          * Duration, in milliseconds, since last updating frame.
          *
@@ -2685,6 +2545,27 @@ const valueTypes = [...dimensionValueTypes, styleValueTypes.color, styleValueTyp
  */
 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.
@@ -2699,8 +2580,8 @@ function setMotionValue(visualElement, key, value) {
 }
 function setTarget(visualElement, definition) {
     const resolved = resolveVariant(visualElement, definition);
-    let _a = resolved ? visualElement.makeTargetAnimatable(resolved, false) : {}, { transitionEnd = {}, transition = {} } = _a, target = tslib.__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);
@@ -2729,8 +2610,7 @@ function setValues(visualElement, definition) {
     }
 }
 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)
@@ -2769,7 +2649,9 @@ function checkTargetForNewValues(visualElement, target, origin) {
             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);
     }
 }
@@ -2780,11 +2662,14 @@ function getOriginFromTransition(key, transition) {
     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;
 }
@@ -2855,7 +2740,7 @@ function animateVariant(visualElement, variant, options = {}) {
  */
 function animateTarget(visualElement, definition, { delay = 0, transitionOverride, type } = {}) {
     var _a;
-    let _b = visualElement.makeTargetAnimatable(definition), { transition = visualElement.getDefaultTransition(), transitionEnd } = _b, target = tslib.__rest(_b, ["transition", "transitionEnd"]);
+    let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = visualElement.makeTargetAnimatable(definition);
     const willChange = visualElement.getValue("willChange");
     if (transitionOverride)
         transition = transitionOverride;
@@ -2870,12 +2755,16 @@ function animateTarget(visualElement, definition, { delay = 0, transitionOverrid
                 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)) {
@@ -2897,7 +2786,10 @@ function animateChildren(visualElement, variant, delayChildren = 0, staggerChild
     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);
 }
@@ -2944,8 +2836,8 @@ function createAnimationState(visualElement) {
     const buildResolvedTypeValues = (acc, definition) => {
         const resolved = resolveVariant(visualElement, definition);
         if (resolved) {
-            const { transition, transitionEnd } = resolved, target = tslib.__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;
     };
@@ -3028,7 +2920,7 @@ function createAnimationState(visualElement) {
              * 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
@@ -3076,7 +2968,10 @@ function createAnimationState(visualElement) {
              *    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);
@@ -3142,7 +3037,7 @@ function createAnimationState(visualElement) {
              *
              */
             if (typeState.isActive) {
-                encounteredKeys = Object.assign(Object.assign({}, encounteredKeys), resolvedValues);
+                encounteredKeys = { ...encounteredKeys, ...resolvedValues };
             }
             if (isInitialRender && visualElement.blockInitialAnimation) {
                 shouldAnimateType = false;
@@ -3155,7 +3050,7 @@ function createAnimationState(visualElement) {
             if (shouldAnimateType && !isInherited) {
                 animations.push(...definitionList.map((animation) => ({
                     animation: animation,
-                    options: Object.assign({ type }, options),
+                    options: { type, ...options },
                 })));
             }
         }
@@ -3211,7 +3106,7 @@ function checkVariantsDidChange(prev, next) {
     if (typeof next === "string") {
         return next !== prev;
     }
-    else if (isVariantLabels(next)) {
+    else if (Array.isArray(next)) {
         return !shallowCompare(next, prev);
     }
     return false;
@@ -3256,10 +3151,15 @@ const animations = {
         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]);
     }),
 };
@@ -3298,7 +3198,7 @@ class PanSession {
                 return;
             const { point } = info;
             const { timestamp } = sync.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);
@@ -3335,7 +3235,7 @@ class PanSession {
         const initialInfo = transformPoint(info, this.transformPagePoint);
         const { point } = initialInfo;
         const { timestamp } = sync.getFrameData();
-        this.history = [Object.assign(Object.assign({}, point), { timestamp })];
+        this.history = [{ ...point, timestamp }];
         const { onSessionStart } = handlers;
         onSessionStart &&
             onSessionStart(event, getPanInfo(initialInfo, this.history));
@@ -3980,8 +3880,17 @@ class VisualElementDragControls {
              */
             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.
@@ -4133,12 +4042,15 @@ class VisualElementDragControls {
     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) {
@@ -4222,6 +4134,25 @@ const drag = {
     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",
@@ -4263,7 +4194,6 @@ function createLifecycles() {
 }
 
 function updateMotionValuesFromProps(element, next, prev) {
-    var _a;
     const { willChange } = next;
     for (const key in next) {
         const nextValue = next[key];
@@ -4282,7 +4212,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                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)) {
@@ -4307,7 +4237,8 @@ function updateMotionValuesFromProps(element, next, prev) {
                 !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));
             }
         }
     }
@@ -4319,7 +4250,9 @@ function updateMotionValuesFromProps(element, next, prev) {
     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;
     /**
@@ -4355,7 +4288,9 @@ const visualElement = ({ treeType = "", build, getBaseTarget, makeTargetAnimatab
      * 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
@@ -4402,7 +4337,7 @@ const visualElement = ({ treeType = "", build, getBaseTarget, makeTargetAnimatab
      * 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 = tslib.__rest(_a, ["willChange"]);
+    const { willChange, ...initialMotionValues } = scrapeMotionValuesFromProps(props);
     for (const key in initialMotionValues) {
         const value = initialMotionValues[key];
         if (latestValues[key] !== undefined && isMotionValue(value)) {
@@ -4415,36 +4350,39 @@ const visualElement = ({ treeType = "", build, getBaseTarget, makeTargetAnimatab
     /**
      * 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.
@@ -4453,27 +4391,37 @@ const visualElement = ({ treeType = "", build, getBaseTarget, makeTargetAnimatab
          *
          * 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);
         },
@@ -4492,6 +4440,55 @@ const visualElement = ({ treeType = "", build, getBaseTarget, makeTargetAnimatab
             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) {
+                heyListen.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.
          */
@@ -4510,30 +4507,31 @@ const visualElement = ({ treeType = "", build, getBaseTarget, makeTargetAnimatab
             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.
@@ -4584,11 +4582,11 @@ const visualElement = ({ treeType = "", build, getBaseTarget, makeTargetAnimatab
             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.
@@ -4600,20 +4598,19 @@ const visualElement = ({ treeType = "", build, getBaseTarget, makeTargetAnimatab
                 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.
@@ -4632,7 +4629,9 @@ const visualElement = ({ treeType = "", build, getBaseTarget, makeTargetAnimatab
                     return target;
             }
             return baseTarget[key];
-        } }, lifecycles), { 
+        },
+        // Lifecyles ========================
+        ...lifecycles,
         /**
          * Build the renderer state based on the latest visual state.
          */
@@ -4645,14 +4644,14 @@ const visualElement = ({ treeType = "", build, getBaseTarget, makeTargetAnimatab
          */
         scheduleRender() {
             sync__default["default"].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.
@@ -4664,25 +4663,27 @@ const visualElement = ({ treeType = "", build, getBaseTarget, makeTargetAnimatab
             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;
@@ -4698,7 +4699,8 @@ const visualElement = ({ treeType = "", build, getBaseTarget, makeTargetAnimatab
                 }
             }
             return context;
-        } });
+        },
+    };
     return element;
 };
 const variantProps = ["initial", ...variantPriorityOrder];
@@ -4749,16 +4751,14 @@ function getVariableValue(current, element, depth = 1) {
  *
  * @internal
  */
-function resolveCSSVariables(visualElement, _a, transitionEnd) {
-    var _b;
-    var target = tslib.__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) => {
@@ -4783,8 +4783,9 @@ function resolveCSSVariables(visualElement, _a, transitionEnd) {
         // 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 };
 }
@@ -4838,7 +4839,7 @@ const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {
     }
 };
 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) => {
@@ -4895,8 +4896,8 @@ const convertChangedValueTypes = (target, visualElement, changedKeys) => {
     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.
@@ -5031,7 +5032,7 @@ function getComputedStyle$1(element) {
 const htmlConfig = {
     treeType: "dom",
     readValueFromInstance(domElement, key) {
-        if (isTransformProp(key)) {
+        if (transformProps.has(key)) {
             const defaultType = getDefaultValueType(key);
             return defaultType ? defaultType.default || 0 : 0;
         }
@@ -5084,10 +5085,7 @@ const htmlConfig = {
      * 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 = tslib.__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
@@ -5106,8 +5104,11 @@ const htmlConfig = {
             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) {
@@ -5122,12 +5123,14 @@ const htmlConfig = {
 };
 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;
@@ -5136,7 +5139,9 @@ const svgVisualElement = visualElement(Object.assign(Object.assign({}, htmlConfi
     scrapeMotionValuesFromProps,
     build(_element, renderState, latestValues, options, props) {
         buildSVGAttrs(renderState, latestValues, options, props.transformTemplate);
-    }, render: renderSVG }));
+    },
+    render: renderSVG,
+});
 
 const createDomVisualElement = (Component, options) => {
     return isSVGComponent(Component)
@@ -5245,16 +5250,19 @@ class MeasureLayoutWithContext extends React__default["default"].Component {
         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;
     }
@@ -5330,15 +5338,18 @@ class MeasureLayoutWithContext extends React__default["default"].Component {
 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,
@@ -5553,6 +5564,12 @@ function boxEquals(a, b) {
         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 popmotion.distance(a, b) <= max;
+}
 
 class NodeStack {
     constructor() {
@@ -5719,6 +5736,7 @@ class FlatTree {
     }
 }
 
+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
@@ -5910,7 +5928,11 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                             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;
@@ -6233,8 +6255,11 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             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;
@@ -6416,7 +6441,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             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;
@@ -6469,15 +6494,19 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
              */
             this.pendingAnimation = sync__default["default"].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;
                 }
@@ -6506,9 +6535,27 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             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.
@@ -6612,7 +6659,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             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)
@@ -6638,7 +6685,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             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) || "";
                 }
@@ -6665,7 +6715,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                  */
                 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;
@@ -6677,8 +6727,12 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
                  */
                 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
@@ -6726,16 +6780,17 @@ function updateLayout(node) {
     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]
@@ -6745,7 +6800,7 @@ function notifyLayoutUpdate(node) {
                 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]
@@ -6794,7 +6849,7 @@ function notifyLayoutUpdate(node) {
         });
     }
     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
@@ -6878,6 +6933,11 @@ function roundBox(box) {
     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),
@@ -6906,12 +6966,17 @@ const HTMLProjectionNode = createProjectionNode({
         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.
@@ -7011,14 +7076,14 @@ function PopChild({ children, isPresent }) {
      * 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;
@@ -7027,6 +7092,7 @@ function PopChild({ children, isPresent }) {
             left: ${left}px !important;
           }
         `);
+        }
         return () => {
             document.head.removeChild(style);
         };
@@ -7048,7 +7114,7 @@ const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, p
                 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);
@@ -7069,7 +7135,10 @@ const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, p
      * 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);
@@ -7257,8 +7326,7 @@ function nodeGroup() {
 
 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;
@@ -7266,7 +7334,7 @@ const LayoutGroup = ({ children, id, inheritId, inherit = true, }) => {
     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;
@@ -7274,11 +7342,11 @@ const LayoutGroup = ({ children, id, inheritId, inherit = true, }) => {
         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));
 };
 
@@ -7307,13 +7375,12 @@ const AnimateSharedLayout = ({ children, }) => {
  *
  * @public
  */
-function MotionConfig(_a) {
-    var { children, isValidProp } = _a, config = tslib.__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.
@@ -7369,14 +7436,13 @@ function LazyMotion({ children, features, strict = false }) {
      * If this is a synchronous load, load features immediately
      */
     if (!isLazyBundle(features)) {
-        const { renderer } = features, loadedFeatures = tslib.__rest(features, ["renderer"]);
+        const { renderer, ...loadedFeatures } = features;
         loadedRenderer.current = renderer;
         loadFeatures(loadedFeatures);
     }
     React.useEffect(() => {
         if (isLazyBundle(features)) {
-            features().then((_a) => {
-                var { renderer } = _a, loadedFeatures = tslib.__rest(_a, ["renderer"]);
+            features().then(({ renderer, ...loadedFeatures }) => {
                 loadFeatures(loadedFeatures);
                 loadedRenderer.current = renderer;
                 setIsLoaded(true);
@@ -7411,8 +7477,7 @@ function checkReorder(order, value, offset, velocity) {
     return order;
 }
 
-function ReorderGroup(_a, externalRef) {
-    var { children, as = "ul", axis = "y", onReorder, values } = _a, props = tslib.__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);
@@ -7444,7 +7509,7 @@ function ReorderGroup(_a, externalRef) {
     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);
@@ -7498,7 +7563,10 @@ function transform(...args) {
     const inputRange = args[1 + argOffset];
     const outputRange = args[2 + argOffset];
     const options = args[3 + argOffset];
-    const interpolator = popmotion.interpolate(inputRange, outputRange, Object.assign({ mixer: getMixer(outputRange[0]) }, options));
+    const interpolator = popmotion.interpolate(inputRange, outputRange, {
+        mixer: getMixer(outputRange[0]),
+        ...options,
+    });
     return useImmediate ? interpolator(inputValue) : interpolator;
 }
 
@@ -7563,13 +7631,12 @@ function useListTransform(values, transformer) {
 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 = tslib.__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);
@@ -7578,14 +7645,14 @@ function ReorderItem(_a, externalRef) {
     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);
 
@@ -7597,12 +7664,21 @@ const Reorder = {
 /**
  * @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.
@@ -7678,7 +7754,13 @@ function useSpring(source, config = {}) {
             if (activeSpringAnimation.current) {
                 activeSpringAnimation.current.stop();
             }
-            activeSpringAnimation.current = popmotion.animate(Object.assign(Object.assign({ from: value.get(), to: v, velocity: value.getVelocity() }, config), { onUpdate: set }));
+            activeSpringAnimation.current = popmotion.animate({
+                from: value.get(),
+                to: v,
+                velocity: value.getVelocity(),
+                ...config,
+                onUpdate: set,
+            });
             return value.get();
         });
     }, [JSON.stringify(config)]);
@@ -7713,8 +7795,7 @@ const createScrollMotionValues = () => ({
     scrollXProgress: motionValue(0),
     scrollYProgress: motionValue(0),
 });
-function useScroll(_a = {}) {
-    var { container, target } = _a, options = tslib.__rest(_a, ["container", "target"]);
+function useScroll({ container, target, ...options } = {}) {
     const values = useConstant(createScrollMotionValues);
     useIsomorphicLayoutEffect(() => {
         return dom.scroll(({ x, y }) => {
@@ -7722,7 +7803,11 @@ function useScroll(_a = {}) {
             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;
 }
@@ -7773,11 +7858,11 @@ class WillChangeMotionValue extends MotionValue {
     }
     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);
@@ -7788,7 +7873,7 @@ class WillChangeMotionValue extends MotionValue {
         }
     }
     remove(name) {
-        if (isTransformProp(name)) {
+        if (transformProps.has(name)) {
             this.transforms.delete(name);
             if (!this.transforms.size) {
                 removeItem(this.members, "transform");
@@ -7807,6 +7892,58 @@ function useWillChange() {
     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
  */
@@ -7961,7 +8098,6 @@ function useCycle(...items) {
 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 = () => {
@@ -7969,7 +8105,7 @@ function useInView(ref, { root, margin, amount, once = false } = {}) {
             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,
         };
@@ -8066,12 +8202,12 @@ function useDragControls() {
 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() {
@@ -8114,11 +8250,10 @@ const stateVisualElement = visualElement({
     readValueFromInstance(_state, key, options) {
         return options.initialState[key] || 0;
     },
-    makeTargetAnimatable(element, _a) {
-        var { transition, transitionEnd } = _a, target = tslib.__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({
@@ -8140,7 +8275,7 @@ function useAnimatedState(initialState) {
     React.useEffect(() => {
         element.setProps({
             onUpdate: (v) => {
-                setAnimationState(Object.assign({}, v));
+                setAnimationState({ ...v });
             },
         });
     }, [setAnimationState, element]);