motion 12.11.4 → 12.12.0

package/dist/cjs/index.js

@@ -1423,7 +1423,7 @@ function createMixers(output, ease, customMixer) {
  * mixColor(0.5) // 'rgba(128, 128, 128, 1)'
  * ```
  *
- * TODO Revist this approach once we've moved to data models for values,
+ * TODO Revisit this approach once we've moved to data models for values,
  * probably not needed to pregenerate mixer functions.
  *
  * @public
@@ -4268,6 +4268,74 @@ function mapValue(inputValue, inputRange, outputRange, options) {
     return transformValue(() => map(inputValue.get()));
 }
 
+const isMotionValue = (value) => Boolean(value && value.getVelocity);
+
+/**
+ * Create a `MotionValue` that animates to its latest value using a spring.
+ * Can either be a value or track another `MotionValue`.
+ *
+ * ```jsx
+ * const x = motionValue(0)
+ * const y = transformValue(() => x.get() * 2) // double x
+ * ```
+ *
+ * @param transformer - A transform function. This function must be pure with no side-effects or conditional statements.
+ * @returns `MotionValue`
+ *
+ * @public
+ */
+function springValue(source, options) {
+    const initialValue = isMotionValue(source) ? source.get() : source;
+    const value = motionValue(initialValue);
+    attachSpring(value, source, options);
+    return value;
+}
+function attachSpring(value, source, options) {
+    const initialValue = value.get();
+    let activeAnimation = null;
+    let latestValue = initialValue;
+    let latestSetter;
+    const unit = typeof initialValue === "string"
+        ? initialValue.replace(/[\d.-]/g, "")
+        : undefined;
+    const stopAnimation = () => {
+        if (activeAnimation) {
+            activeAnimation.stop();
+            activeAnimation = null;
+        }
+    };
+    const startAnimation = () => {
+        stopAnimation();
+        activeAnimation = new JSAnimation({
+            keyframes: [asNumber(value.get()), asNumber(latestValue)],
+            velocity: value.getVelocity(),
+            type: "spring",
+            restDelta: 0.001,
+            restSpeed: 0.01,
+            ...options,
+            onUpdate: latestSetter,
+        });
+    };
+    value.attach((v, set) => {
+        latestValue = v;
+        latestSetter = (latest) => set(parseValue(latest, unit));
+        frame.postRender(startAnimation);
+        return value.get();
+    }, stopAnimation);
+    let unsubscribe = undefined;
+    if (isMotionValue(source)) {
+        unsubscribe = source.on("change", (v) => value.set(parseValue(v, unit)));
+        value.on("destroy", unsubscribe);
+    }
+    return unsubscribe;
+}
+function parseValue(v, unit) {
+    return unit ? v + unit : v;
+}
+function asNumber(v) {
+    return typeof v === "number" ? v : parseFloat(v);
+}
+
 /**
  * A list of all ValueTypes
  */
@@ -4604,8 +4672,6 @@ const cancelSync = stepsOrder.reduce((acc, key) => {
     return acc;
 }, {});
 
-const isMotionValue = (value) => Boolean(value && value.getVelocity);
-
 function isDOMKeyframes(keyframes) {
     return typeof keyframes === "object" && !Array.isArray(keyframes);
 }
@@ -7186,6 +7252,7 @@ exports.animateView = animateView;
 exports.animationMapKey = animationMapKey;
 exports.anticipate = anticipate;
 exports.applyPxDefaults = applyPxDefaults;
+exports.attachSpring = attachSpring;
 exports.backIn = backIn;
 exports.backInOut = backInOut;
 exports.backOut = backOut;
@@ -7253,6 +7320,7 @@ exports.isDragActive = isDragActive;
 exports.isDragging = isDragging;
 exports.isEasingArray = isEasingArray;
 exports.isGenerator = isGenerator;
+exports.isMotionValue = isMotionValue;
 exports.isNodeOrChild = isNodeOrChild;
 exports.isNumericalString = isNumericalString;
 exports.isPrimaryPointer = isPrimaryPointer;
@@ -7304,6 +7372,7 @@ exports.secondsToMilliseconds = secondsToMilliseconds;
 exports.setDragLock = setDragLock;
 exports.setStyle = setStyle;
 exports.spring = spring;
+exports.springValue = springValue;
 exports.stagger = stagger;
 exports.startWaapiAnimation = startWaapiAnimation;
 exports.statsBuffer = statsBuffer;

package/dist/cjs/react-client.js

@@ -1432,7 +1432,7 @@ function createMixers(output, ease, customMixer) {
  * mixColor(0.5) // 'rgba(128, 128, 128, 1)'
  * ```
  *
- * TODO Revist this approach once we've moved to data models for values,
+ * TODO Revisit this approach once we've moved to data models for values,
  * probably not needed to pregenerate mixer functions.
  *
  * @public
@@ -3741,6 +3741,8 @@ function press(targetOrSelector, onPressStart, options = {}) {
     return cancelEvents;
 }
 
+const isMotionValue = (value) => Boolean(value && value.getVelocity);
+
 /**
  * A list of all ValueTypes
  */
@@ -3780,8 +3782,6 @@ function setTarget(visualElement, definition) {
     }
 }
 
-const isMotionValue = (value) => Boolean(value && value.getVelocity);
-
 function isWillChangeMotionValue(value) {
     return Boolean(isMotionValue(value) && value.add);
 }
@@ -8652,6 +8652,112 @@ function useHTMLProps(props, visualState) {
     return htmlProps;
 }
 
+const dashKeys = {
+    offset: "stroke-dashoffset",
+    array: "stroke-dasharray",
+};
+const camelKeys = {
+    offset: "strokeDashoffset",
+    array: "strokeDasharray",
+};
+/**
+ * Build SVG path properties. Uses the path's measured length to convert
+ * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset
+ * and stroke-dasharray attributes.
+ *
+ * This function is mutative to reduce per-frame GC.
+ */
+function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true) {
+    // Normalise path length by setting SVG attribute pathLength to 1
+    attrs.pathLength = 1;
+    // We use dash case when setting attributes directly to the DOM node and camel case
+    // when defining props on a React component.
+    const keys = useDashCase ? dashKeys : camelKeys;
+    // Build the dash offset
+    attrs[keys.offset] = px.transform(-offset);
+    // Build the dash array
+    const pathLength = px.transform(length);
+    const pathSpacing = px.transform(spacing);
+    attrs[keys.array] = `${pathLength} ${pathSpacing}`;
+}
+
+/**
+ * Build SVG visual attrbutes, like cx and style.transform
+ */
+function buildSVGAttrs(state, { attrX, attrY, attrScale, pathLength, pathSpacing = 1, pathOffset = 0, 
+// This is object creation, which we try to avoid per-frame.
+...latest }, isSVGTag, transformTemplate, styleProp) {
+    buildHTMLStyles(state, latest, transformTemplate);
+    /**
+     * For svg tags we just want to make sure viewBox is animatable and treat all the styles
+     * as normal HTML tags.
+     */
+    if (isSVGTag) {
+        if (state.style.viewBox) {
+            state.attrs.viewBox = state.style.viewBox;
+        }
+        return;
+    }
+    state.attrs = state.style;
+    state.style = {};
+    const { attrs, style } = state;
+    /**
+     * However, we apply transforms as CSS transforms.
+     * So if we detect a transform, transformOrigin we take it from attrs and copy it into style.
+     */
+    if (attrs.transform) {
+        style.transform = attrs.transform;
+        delete attrs.transform;
+    }
+    if (style.transform || attrs.transformOrigin) {
+        style.transformOrigin = attrs.transformOrigin ?? "50% 50%";
+        delete attrs.transformOrigin;
+    }
+    if (style.transform) {
+        /**
+         * SVG's element transform-origin uses its own median as a reference.
+         * Therefore, transformBox becomes a fill-box
+         */
+        style.transformBox = styleProp?.transformBox ?? "fill-box";
+        delete attrs.transformBox;
+    }
+    // Render attrX/attrY/attrScale as attributes
+    if (attrX !== undefined)
+        attrs.x = attrX;
+    if (attrY !== undefined)
+        attrs.y = attrY;
+    if (attrScale !== undefined)
+        attrs.scale = attrScale;
+    // Build SVG path if one has been defined
+    if (pathLength !== undefined) {
+        buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false);
+    }
+}
+
+const createSvgRenderState = () => ({
+    ...createHtmlRenderState(),
+    attrs: {},
+});
+
+const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
+
+function useSVGProps(props, visualState, _isStatic, Component) {
+    const visualProps = react.useMemo(() => {
+        const state = createSvgRenderState();
+        buildSVGAttrs(state, visualState, isSVGTag(Component), props.transformTemplate, props.style);
+        return {
+            ...state.attrs,
+            style: { ...state.style },
+        };
+    }, [visualState]);
+    if (props.style) {
+        const rawStyles = {};
+        copyRawValuesOnly(rawStyles, props.style, props);
+        visualProps.style = { ...rawStyles, ...visualProps.style };
+    }
+    return visualProps;
+}
+
 /**
  * A list of all valid MotionProps.
  *
@@ -8823,112 +8929,6 @@ function isSVGComponent(Component) {
     return false;
 }
 
-const dashKeys = {
-    offset: "stroke-dashoffset",
-    array: "stroke-dasharray",
-};
-const camelKeys = {
-    offset: "strokeDashoffset",
-    array: "strokeDasharray",
-};
-/**
- * Build SVG path properties. Uses the path's measured length to convert
- * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset
- * and stroke-dasharray attributes.
- *
- * This function is mutative to reduce per-frame GC.
- */
-function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true) {
-    // Normalise path length by setting SVG attribute pathLength to 1
-    attrs.pathLength = 1;
-    // We use dash case when setting attributes directly to the DOM node and camel case
-    // when defining props on a React component.
-    const keys = useDashCase ? dashKeys : camelKeys;
-    // Build the dash offset
-    attrs[keys.offset] = px.transform(-offset);
-    // Build the dash array
-    const pathLength = px.transform(length);
-    const pathSpacing = px.transform(spacing);
-    attrs[keys.array] = `${pathLength} ${pathSpacing}`;
-}
-
-/**
- * Build SVG visual attrbutes, like cx and style.transform
- */
-function buildSVGAttrs(state, { attrX, attrY, attrScale, pathLength, pathSpacing = 1, pathOffset = 0, 
-// This is object creation, which we try to avoid per-frame.
-...latest }, isSVGTag, transformTemplate, styleProp) {
-    buildHTMLStyles(state, latest, transformTemplate);
-    /**
-     * For svg tags we just want to make sure viewBox is animatable and treat all the styles
-     * as normal HTML tags.
-     */
-    if (isSVGTag) {
-        if (state.style.viewBox) {
-            state.attrs.viewBox = state.style.viewBox;
-        }
-        return;
-    }
-    state.attrs = state.style;
-    state.style = {};
-    const { attrs, style } = state;
-    /**
-     * However, we apply transforms as CSS transforms.
-     * So if we detect a transform, transformOrigin we take it from attrs and copy it into style.
-     */
-    if (attrs.transform) {
-        style.transform = attrs.transform;
-        delete attrs.transform;
-    }
-    if (style.transform || attrs.transformOrigin) {
-        style.transformOrigin = attrs.transformOrigin ?? "50% 50%";
-        delete attrs.transformOrigin;
-    }
-    if (style.transform) {
-        /**
-         * SVG's element transform-origin uses its own median as a reference.
-         * Therefore, transformBox becomes a fill-box
-         */
-        style.transformBox = styleProp?.transformBox ?? "fill-box";
-        delete attrs.transformBox;
-    }
-    // Render attrX/attrY/attrScale as attributes
-    if (attrX !== undefined)
-        attrs.x = attrX;
-    if (attrY !== undefined)
-        attrs.y = attrY;
-    if (attrScale !== undefined)
-        attrs.scale = attrScale;
-    // Build SVG path if one has been defined
-    if (pathLength !== undefined) {
-        buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false);
-    }
-}
-
-const createSvgRenderState = () => ({
-    ...createHtmlRenderState(),
-    attrs: {},
-});
-
-const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
-
-function useSVGProps(props, visualState, _isStatic, Component) {
-    const visualProps = react.useMemo(() => {
-        const state = createSvgRenderState();
-        buildSVGAttrs(state, visualState, isSVGTag(Component), props.transformTemplate, props.style);
-        return {
-            ...state.attrs,
-            style: { ...state.style },
-        };
-    }, [visualState]);
-    if (props.style) {
-        const rawStyles = {};
-        copyRawValuesOnly(rawStyles, props.style, props);
-        visualProps.style = { ...rawStyles, ...visualProps.style };
-    }
-    return visualProps;
-}
-
 function createUseRender(forwardMotionProps = false) {
     const useRender = (Component, props, ref, { latestValues }, isStatic) => {
         const useVisualProps = isSVGComponent(Component)

package/dist/cjs/react-m.js

@@ -497,6 +497,8 @@ const getValueAsType = (value, type) => {
 const { schedule: microtask, cancel: cancelMicrotask } = 
 /* @__PURE__ */ createRenderBatcher(queueMicrotask, false);
 
+const isMotionValue = (value) => Boolean(value && value.getVelocity);
+
 /**
  * Convert camelCase to dash-case properties.
  */
@@ -732,8 +734,6 @@ function isForcedMotionValue(key, { layout, layoutId }) {
             (!!scaleCorrectors[key] || key === "opacity")));
 }
 
-const isMotionValue = (value) => Boolean(value && value.getVelocity);
-
 const translateAlias = {
     x: "translateX",
     y: "translateY",
@@ -906,6 +906,112 @@ function useHTMLProps(props, visualState) {
     return htmlProps;
 }
 
+const dashKeys = {
+    offset: "stroke-dashoffset",
+    array: "stroke-dasharray",
+};
+const camelKeys = {
+    offset: "strokeDashoffset",
+    array: "strokeDasharray",
+};
+/**
+ * Build SVG path properties. Uses the path's measured length to convert
+ * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset
+ * and stroke-dasharray attributes.
+ *
+ * This function is mutative to reduce per-frame GC.
+ */
+function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true) {
+    // Normalise path length by setting SVG attribute pathLength to 1
+    attrs.pathLength = 1;
+    // We use dash case when setting attributes directly to the DOM node and camel case
+    // when defining props on a React component.
+    const keys = useDashCase ? dashKeys : camelKeys;
+    // Build the dash offset
+    attrs[keys.offset] = px.transform(-offset);
+    // Build the dash array
+    const pathLength = px.transform(length);
+    const pathSpacing = px.transform(spacing);
+    attrs[keys.array] = `${pathLength} ${pathSpacing}`;
+}
+
+/**
+ * Build SVG visual attrbutes, like cx and style.transform
+ */
+function buildSVGAttrs(state, { attrX, attrY, attrScale, pathLength, pathSpacing = 1, pathOffset = 0, 
+// This is object creation, which we try to avoid per-frame.
+...latest }, isSVGTag, transformTemplate, styleProp) {
+    buildHTMLStyles(state, latest, transformTemplate);
+    /**
+     * For svg tags we just want to make sure viewBox is animatable and treat all the styles
+     * as normal HTML tags.
+     */
+    if (isSVGTag) {
+        if (state.style.viewBox) {
+            state.attrs.viewBox = state.style.viewBox;
+        }
+        return;
+    }
+    state.attrs = state.style;
+    state.style = {};
+    const { attrs, style } = state;
+    /**
+     * However, we apply transforms as CSS transforms.
+     * So if we detect a transform, transformOrigin we take it from attrs and copy it into style.
+     */
+    if (attrs.transform) {
+        style.transform = attrs.transform;
+        delete attrs.transform;
+    }
+    if (style.transform || attrs.transformOrigin) {
+        style.transformOrigin = attrs.transformOrigin ?? "50% 50%";
+        delete attrs.transformOrigin;
+    }
+    if (style.transform) {
+        /**
+         * SVG's element transform-origin uses its own median as a reference.
+         * Therefore, transformBox becomes a fill-box
+         */
+        style.transformBox = styleProp?.transformBox ?? "fill-box";
+        delete attrs.transformBox;
+    }
+    // Render attrX/attrY/attrScale as attributes
+    if (attrX !== undefined)
+        attrs.x = attrX;
+    if (attrY !== undefined)
+        attrs.y = attrY;
+    if (attrScale !== undefined)
+        attrs.scale = attrScale;
+    // Build SVG path if one has been defined
+    if (pathLength !== undefined) {
+        buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false);
+    }
+}
+
+const createSvgRenderState = () => ({
+    ...createHtmlRenderState(),
+    attrs: {},
+});
+
+const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
+
+function useSVGProps(props, visualState, _isStatic, Component) {
+    const visualProps = react.useMemo(() => {
+        const state = createSvgRenderState();
+        buildSVGAttrs(state, visualState, isSVGTag(Component), props.transformTemplate, props.style);
+        return {
+            ...state.attrs,
+            style: { ...state.style },
+        };
+    }, [visualState]);
+    if (props.style) {
+        const rawStyles = {};
+        copyRawValuesOnly(rawStyles, props.style, props);
+        visualProps.style = { ...rawStyles, ...visualProps.style };
+    }
+    return visualProps;
+}
+
 /**
  * A list of all valid MotionProps.
  *
@@ -1077,112 +1183,6 @@ function isSVGComponent(Component) {
     return false;
 }
 
-const dashKeys = {
-    offset: "stroke-dashoffset",
-    array: "stroke-dasharray",
-};
-const camelKeys = {
-    offset: "strokeDashoffset",
-    array: "strokeDasharray",
-};
-/**
- * Build SVG path properties. Uses the path's measured length to convert
- * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset
- * and stroke-dasharray attributes.
- *
- * This function is mutative to reduce per-frame GC.
- */
-function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true) {
-    // Normalise path length by setting SVG attribute pathLength to 1
-    attrs.pathLength = 1;
-    // We use dash case when setting attributes directly to the DOM node and camel case
-    // when defining props on a React component.
-    const keys = useDashCase ? dashKeys : camelKeys;
-    // Build the dash offset
-    attrs[keys.offset] = px.transform(-offset);
-    // Build the dash array
-    const pathLength = px.transform(length);
-    const pathSpacing = px.transform(spacing);
-    attrs[keys.array] = `${pathLength} ${pathSpacing}`;
-}
-
-/**
- * Build SVG visual attrbutes, like cx and style.transform
- */
-function buildSVGAttrs(state, { attrX, attrY, attrScale, pathLength, pathSpacing = 1, pathOffset = 0, 
-// This is object creation, which we try to avoid per-frame.
-...latest }, isSVGTag, transformTemplate, styleProp) {
-    buildHTMLStyles(state, latest, transformTemplate);
-    /**
-     * For svg tags we just want to make sure viewBox is animatable and treat all the styles
-     * as normal HTML tags.
-     */
-    if (isSVGTag) {
-        if (state.style.viewBox) {
-            state.attrs.viewBox = state.style.viewBox;
-        }
-        return;
-    }
-    state.attrs = state.style;
-    state.style = {};
-    const { attrs, style } = state;
-    /**
-     * However, we apply transforms as CSS transforms.
-     * So if we detect a transform, transformOrigin we take it from attrs and copy it into style.
-     */
-    if (attrs.transform) {
-        style.transform = attrs.transform;
-        delete attrs.transform;
-    }
-    if (style.transform || attrs.transformOrigin) {
-        style.transformOrigin = attrs.transformOrigin ?? "50% 50%";
-        delete attrs.transformOrigin;
-    }
-    if (style.transform) {
-        /**
-         * SVG's element transform-origin uses its own median as a reference.
-         * Therefore, transformBox becomes a fill-box
-         */
-        style.transformBox = styleProp?.transformBox ?? "fill-box";
-        delete attrs.transformBox;
-    }
-    // Render attrX/attrY/attrScale as attributes
-    if (attrX !== undefined)
-        attrs.x = attrX;
-    if (attrY !== undefined)
-        attrs.y = attrY;
-    if (attrScale !== undefined)
-        attrs.scale = attrScale;
-    // Build SVG path if one has been defined
-    if (pathLength !== undefined) {
-        buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false);
-    }
-}
-
-const createSvgRenderState = () => ({
-    ...createHtmlRenderState(),
-    attrs: {},
-});
-
-const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
-
-function useSVGProps(props, visualState, _isStatic, Component) {
-    const visualProps = react.useMemo(() => {
-        const state = createSvgRenderState();
-        buildSVGAttrs(state, visualState, isSVGTag(Component), props.transformTemplate, props.style);
-        return {
-            ...state.attrs,
-            style: { ...state.style },
-        };
-    }, [visualState]);
-    if (props.style) {
-        const rawStyles = {};
-        copyRawValuesOnly(rawStyles, props.style, props);
-        visualProps.style = { ...rawStyles, ...visualProps.style };
-    }
-    return visualProps;
-}
-
 function createUseRender(forwardMotionProps = false) {
     const useRender = (Component, props, ref, { latestValues }, isStatic) => {
         const useVisualProps = isSVGComponent(Component)

package/dist/es/framer-motion/dist/es/animation/animate/single-value.mjs

@@ -1,5 +1,5 @@
-import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
 import { animateMotionValue } from '../interfaces/motion-value.mjs';
+import { isMotionValue } from '../../../../../motion-dom/dist/es/value/utils/is-motion-value.mjs';
 import { motionValue } from '../../../../../motion-dom/dist/es/value/index.mjs';
 
 function animateSingleValue(value, keyframes, options) {

package/dist/es/framer-motion/dist/es/animation/animate/subject.mjs

@@ -1,11 +1,11 @@
 import { visualElementStore } from '../../render/store.mjs';
-import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
 import { animateTarget } from '../interfaces/visual-element-target.mjs';
 import { createDOMVisualElement, createObjectVisualElement } from '../utils/create-visual-element.mjs';
 import { isDOMKeyframes } from '../utils/is-dom-keyframes.mjs';
 import { resolveSubjects } from './resolve-subjects.mjs';
 import { animateSingleValue } from './single-value.mjs';
 import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
+import { isMotionValue } from '../../../../../motion-dom/dist/es/value/utils/is-motion-value.mjs';
 
 function isSingleValue(subject, keyframes) {
     return (isMotionValue(subject) ||

package/dist/es/framer-motion/dist/es/animation/sequence/create.mjs

@@ -1,10 +1,10 @@
-import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
 import { resolveSubjects } from '../animate/resolve-subjects.mjs';
 import { calculateRepeatDuration } from './utils/calc-repeat-duration.mjs';
 import { calcNextTime } from './utils/calc-time.mjs';
 import { addKeyframes } from './utils/edit.mjs';
 import { normalizeTimes } from './utils/normalize-times.mjs';
 import { compareByTime } from './utils/sort.mjs';
+import { isMotionValue } from '../../../../../motion-dom/dist/es/value/utils/is-motion-value.mjs';
 import { defaultOffset } from '../../../../../motion-dom/dist/es/animation/keyframes/offsets/default.mjs';
 import { isGenerator } from '../../../../../motion-dom/dist/es/animation/generators/utils/is-generator.mjs';
 import { createGeneratorEasing } from '../../../../../motion-dom/dist/es/animation/generators/utils/create-generator-easing.mjs';

package/dist/es/framer-motion/dist/es/components/Reorder/Item.mjs

@@ -6,8 +6,8 @@ import { motion } from '../../render/components/motion/proxy.mjs';
 import { useConstant } from '../../utils/use-constant.mjs';
 import { useMotionValue } from '../../value/use-motion-value.mjs';
 import { useTransform } from '../../value/use-transform.mjs';
-import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
 import { invariant } from '../../../../../motion-utils/dist/es/errors.mjs';
+import { isMotionValue } from '../../../../../motion-dom/dist/es/value/utils/is-motion-value.mjs';
 
 function useDefaultMotionValue(value, defaultValue = 0) {
     return isMotionValue(value) ? value : useMotionValue(defaultValue);

package/dist/es/framer-motion/dist/es/render/VisualElement.mjs

@@ -2,7 +2,6 @@ import { featureDefinitions } from '../motion/features/definitions.mjs';
 import { createBox } from '../projection/geometry/models.mjs';
 import { initPrefersReducedMotion } from '../utils/reduced-motion/index.mjs';
 import { hasReducedMotionListener, prefersReducedMotion } from '../utils/reduced-motion/state.mjs';
-import { isMotionValue } from '../value/utils/is-motion-value.mjs';
 import { visualElementStore } from './store.mjs';
 import { isControllingVariants, isVariantNode } from './utils/is-controlling-variants.mjs';
 import { updateMotionValuesFromProps } from './utils/motion-values.mjs';
@@ -10,6 +9,7 @@ import { resolveVariantFromProps } from './utils/resolve-variants.mjs';
 import { KeyframeResolver } from '../../../../motion-dom/dist/es/animation/keyframes/KeyframesResolver.mjs';
 import { time } from '../../../../motion-dom/dist/es/frameloop/sync-time.mjs';
 import { frame, cancelFrame } from '../../../../motion-dom/dist/es/frameloop/frame.mjs';
+import { isMotionValue } from '../../../../motion-dom/dist/es/value/utils/is-motion-value.mjs';
 import { warnOnce } from '../../../../motion-utils/dist/es/warn-once.mjs';
 import { transformProps } from '../../../../motion-dom/dist/es/render/utils/keys-transform.mjs';
 import { motionValue } from '../../../../motion-dom/dist/es/value/index.mjs';

package/dist/es/framer-motion/dist/es/render/dom/DOMVisualElement.mjs

@@ -1,6 +1,6 @@
-import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
 import { VisualElement } from '../VisualElement.mjs';
 import { DOMKeyframesResolver } from '../../../../../motion-dom/dist/es/animation/keyframes/DOMKeyframesResolver.mjs';
+import { isMotionValue } from '../../../../../motion-dom/dist/es/value/utils/is-motion-value.mjs';
 
 class DOMVisualElement extends VisualElement {
     constructor() {