framer-motion 7.2.0 → 7.3.1

package/dist/es/render/index.mjs

@@ -1,14 +1,23 @@
-import { __rest } from 'tslib';
 import sync, { cancelSync } from 'framesync';
+import { initPrefersReducedMotion } from '../utils/reduced-motion/index.mjs';
+import { hasReducedMotionListener, prefersReducedMotion } from '../utils/reduced-motion/state.mjs';
 import { motionValue } from '../value/index.mjs';
 import { isWillChangeMotionValue } from '../value/use-will-change/is.mjs';
 import { isMotionValue } from '../value/utils/is-motion-value.mjs';
 import { variantPriorityOrder } from './utils/animation-state.mjs';
+import { isVariantLabel } from './utils/is-variant-label.mjs';
 import { createLifecycles } from './utils/lifecycles.mjs';
 import { updateMotionValuesFromProps } from './utils/motion-values.mjs';
-import { checkIfControllingVariants, checkIfVariantNode, isVariantLabel } from './utils/variants.mjs';
+import { isControllingVariants, isVariantNode } from './utils/is-controlling-variants.mjs';
+import { env } from '../utils/process.mjs';
+import { invariant } from 'hey-listen';
+import { featureDefinitions } from '../motion/features/definitions.mjs';
+import { createElement } from 'react';
+import { isRefObject } from '../utils/is-ref-object.mjs';
 
-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;
     /**
@@ -44,7 +53,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
@@ -91,7 +102,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 = __rest(_a, ["willChange"]);
+    const { willChange, ...initialMotionValues } = scrapeMotionValuesFromProps(props);
     for (const key in initialMotionValues) {
         const value = initialMotionValues[key];
         if (latestValues[key] !== undefined && isMotionValue(value)) {
@@ -104,36 +115,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.
@@ -142,27 +156,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);
         },
@@ -181,6 +205,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) {
+                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(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.
          */
@@ -199,30 +272,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.
@@ -273,11 +347,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.
@@ -289,20 +363,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.
@@ -321,7 +394,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.
          */
@@ -334,14 +409,14 @@ const visualElement = ({ treeType = "", build, getBaseTarget, makeTargetAnimatab
          */
         scheduleRender() {
             sync.render(render, false, true);
-        }, 
+        },
         /**
          * Synchronously fire render. It's prefered that we batch renders but
          * in many circumstances, like layout measurement, we need to run this
          * synchronously. However in those instances other measures should be taken
          * to batch reads/writes.
          */
-        syncRender: render, 
+        syncRender: render,
         /**
          * Update the provided props. Ensure any newly-added motion values are
          * added to our map, old ones removed, and listeners updated.
@@ -353,25 +428,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;
@@ -387,7 +464,8 @@ const visualElement = ({ treeType = "", build, getBaseTarget, makeTargetAnimatab
                 }
             }
             return context;
-        } });
+        },
+    };
     return element;
 };
 const variantProps = ["initial", ...variantPriorityOrder];

package/dist/es/render/svg/use-props.mjs

@@ -7,12 +7,15 @@ function useSVGProps(props, visualState) {
     const visualProps = 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;
 }

package/dist/es/render/svg/utils/build-attrs.mjs

@@ -1,4 +1,3 @@
-import { __rest } from 'tslib';
 import { buildHTMLStyles } from '../../html/utils/build-styles.mjs';
 import { calcSVGTransformOrigin } from './transform-origin.mjs';
 import { buildSVGPath } from './path.mjs';
@@ -6,10 +5,9 @@ import { buildSVGPath } from './path.mjs';
 /**
  * Build SVG visual attrbutes, like cx and style.transform
  */
-function buildSVGAttrs(state, _a, options, transformTemplate) {
-    var { attrX, attrY, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0 } = _a, 
-    // This is object creation, which we try to avoid per-frame.
-    latest = __rest(_a, ["attrX", "attrY", "originX", "originY", "pathLength", "pathSpacing", "pathOffset"]);
+function buildSVGAttrs(state, { attrX, attrY, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0, 
+// This is object creation, which we try to avoid per-frame.
+...latest }, options, transformTemplate) {
     buildHTMLStyles(state, latest, options, transformTemplate);
     state.attrs = state.style;
     state.style = {};

package/dist/es/render/svg/utils/create-render-state.mjs

@@ -1,5 +1,8 @@
 import { createHtmlRenderState } from '../../html/utils/create-render-state.mjs';
 
-const createSvgRenderState = () => (Object.assign(Object.assign({}, createHtmlRenderState()), { attrs: {} }));
+const createSvgRenderState = () => ({
+    ...createHtmlRenderState(),
+    attrs: {},
+});
 
 export { createSvgRenderState };

package/dist/es/render/svg/visual-element.mjs

@@ -4,16 +4,18 @@ import { htmlConfig } from '../html/visual-element.mjs';
 import { buildSVGAttrs } from './utils/build-attrs.mjs';
 import { camelToDash } from '../dom/utils/camel-to-dash.mjs';
 import { camelCaseAttributes } from './utils/camel-case-attrs.mjs';
-import { isTransformProp } from '../html/utils/transform.mjs';
+import { transformProps } from '../html/utils/transform.mjs';
 import { renderSVG } from './utils/render.mjs';
 import { getDefaultValueType } from '../dom/value-types/defaults.mjs';
 
-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;
@@ -22,6 +24,8 @@ 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,
+});
 
 export { svgVisualElement };

package/dist/es/render/utils/animation-state.mjs

@@ -1,10 +1,10 @@
-import { __rest } from 'tslib';
 import { isAnimationControls } from '../../animation/utils/is-animation-controls.mjs';
 import { isKeyframesTarget } from '../../animation/utils/is-keyframes-target.mjs';
 import { shallowCompare } from '../../utils/shallow-compare.mjs';
 import { animateVisualElement } from './animation.mjs';
+import { isVariantLabel } from './is-variant-label.mjs';
 import { AnimationType } from './types.mjs';
-import { isVariantLabels, resolveVariant, isVariantLabel } from './variants.mjs';
+import { resolveVariant } from './resolve-dynamic-variants.mjs';
 
 const variantPriorityOrder = [
     AnimationType.Animate,
@@ -31,8 +31,8 @@ function createAnimationState(visualElement) {
     const buildResolvedTypeValues = (acc, definition) => {
         const resolved = resolveVariant(visualElement, definition);
         if (resolved) {
-            const { transition, transitionEnd } = resolved, target = __rest(resolved, ["transition", "transitionEnd"]);
-            acc = Object.assign(Object.assign(Object.assign({}, acc), target), transitionEnd);
+            const { transition, transitionEnd, ...target } = resolved;
+            acc = { ...acc, ...target, ...transitionEnd };
         }
         return acc;
     };
@@ -115,7 +115,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
@@ -163,7 +163,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);
@@ -229,7 +232,7 @@ function createAnimationState(visualElement) {
              *
              */
             if (typeState.isActive) {
-                encounteredKeys = Object.assign(Object.assign({}, encounteredKeys), resolvedValues);
+                encounteredKeys = { ...encounteredKeys, ...resolvedValues };
             }
             if (isInitialRender && visualElement.blockInitialAnimation) {
                 shouldAnimateType = false;
@@ -242,7 +245,7 @@ function createAnimationState(visualElement) {
             if (shouldAnimateType && !isInherited) {
                 animations.push(...definitionList.map((animation) => ({
                     animation: animation,
-                    options: Object.assign({ type }, options),
+                    options: { type, ...options },
                 })));
             }
         }
@@ -298,7 +301,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;

package/dist/es/render/utils/animation.mjs

@@ -1,8 +1,7 @@
-import { __rest } from 'tslib';
 import { startAnimation } from '../../animation/utils/transitions.mjs';
 import { setTarget } from './setters.mjs';
-import { resolveVariant } from './variants.mjs';
-import { isTransformProp } from '../html/utils/transform.mjs';
+import { resolveVariant } from './resolve-dynamic-variants.mjs';
+import { transformProps } from '../html/utils/transform.mjs';
 import { isWillChangeMotionValue } from '../../value/use-will-change/is.mjs';
 
 function animateVisualElement(visualElement, definition, options = {}) {
@@ -67,7 +66,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 = __rest(_b, ["transition", "transitionEnd"]);
+    let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = visualElement.makeTargetAnimatable(definition);
     const willChange = visualElement.getValue("willChange");
     if (transitionOverride)
         transition = transitionOverride;
@@ -82,12 +81,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)) {
@@ -109,7 +112,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);
 }

package/dist/es/render/utils/is-controlling-variants.mjs

@@ -0,0 +1,22 @@
+import { isAnimationControls } from '../../animation/utils/is-animation-controls.mjs';
+import { isVariantLabel } from './is-variant-label.mjs';
+
+const variantProps = [
+    "initial",
+    "animate",
+    "exit",
+    "whileHover",
+    "whileDrag",
+    "whileTap",
+    "whileFocus",
+    "whileInView",
+];
+function isControllingVariants(props) {
+    return (isAnimationControls(props.animate) ||
+        variantProps.some((name) => isVariantLabel(props[name])));
+}
+function isVariantNode(props) {
+    return Boolean(isControllingVariants(props) || props.variants);
+}
+
+export { isControllingVariants, isVariantNode };

package/dist/es/render/utils/is-variant-label.mjs

@@ -0,0 +1,8 @@
+/**
+ * Decides if the supplied variable is variant label
+ */
+function isVariantLabel(v) {
+    return typeof v === "string" || Array.isArray(v);
+}
+
+export { isVariantLabel };

package/dist/es/render/utils/motion-values.mjs

@@ -4,7 +4,6 @@ import { motionValue } from '../../value/index.mjs';
 import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
 
 function updateMotionValuesFromProps(element, next, prev) {
-    var _a;
     const { willChange } = next;
     for (const key in next) {
         const nextValue = next[key];
@@ -23,7 +22,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)) {
@@ -48,7 +47,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));
             }
         }
     }

package/dist/es/render/utils/resolve-dynamic-variants.mjs

@@ -0,0 +1,24 @@
+import { resolveVariantFromProps } from './resolve-variants.mjs';
+
+/**
+ * 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(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(visualElement));
+}
+
+export { resolveVariant };

package/dist/es/render/utils/resolve-variants.mjs

@@ -0,0 +1,26 @@
+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;
+}
+
+export { resolveVariantFromProps };