framer-motion 12.7.4 → 12.7.5-alpha.1

package/dist/es/animation/utils/default-transitions.mjs

@@ -1,4 +1,4 @@
-import { transformProps } from '../../render/html/utils/keys-transform.mjs';
+import { transformProps } from 'motion-dom';
 
 const underDampedSpring = {
     type: "spring",

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

@@ -1,4 +1,4 @@
-import { easingDefinitionToFunction } from '../../easing/utils/map.mjs';
+import { easingDefinitionToFunction } from 'motion-utils';
 
 function getOriginIndex(from, total) {
     if (from === "first") {

package/dist/es/components/Reorder/utils/check-reorder.mjs

@@ -1,5 +1,5 @@
+import { mixNumber } from 'motion-dom';
 import { moveItem } from 'motion-utils';
-import { mixNumber } from '../../../utils/mix/number.mjs';
 
 function checkReorder(order, value, offset, velocity) {
     if (!velocity)

package/dist/es/dom.mjs

@@ -1,27 +1,11 @@
-export { MotionValue, cancelFrame, cancelSync, frame, frameData, hover, isDragActive, motionValue, press, sync, time } from 'motion-dom';
-export { invariant, noop, progress } from 'motion-utils';
+export * from 'motion-dom';
+export * from 'motion-utils';
 export { animate, createScopedAnimate } from './animation/animate/index.mjs';
 export { animateMini } from './animation/animators/waapi/animate-style.mjs';
 export { scroll } from './render/dom/scroll/index.mjs';
 export { scrollInfo } from './render/dom/scroll/track.mjs';
 export { inView } from './render/dom/viewport/index.mjs';
-export { anticipate } from './easing/anticipate.mjs';
-export { backIn, backInOut, backOut } from './easing/back.mjs';
-export { circIn, circInOut, circOut } from './easing/circ.mjs';
-export { cubicBezier } from './easing/cubic-bezier.mjs';
-export { easeIn, easeInOut, easeOut } from './easing/ease.mjs';
-export { mirrorEasing } from './easing/modifiers/mirror.mjs';
-export { reverseEasing } from './easing/modifiers/reverse.mjs';
-export { steps } from './easing/steps.mjs';
-export { inertia } from './animation/generators/inertia.mjs';
-export { keyframes } from './animation/generators/keyframes.mjs';
-export { spring } from './animation/generators/spring/index.mjs';
 export { stagger } from './animation/utils/stagger.mjs';
-export { clamp } from './utils/clamp.mjs';
 export { delayInSeconds as delay } from './utils/delay.mjs';
 export { distance, distance2D } from './utils/distance.mjs';
-export { interpolate } from './utils/interpolate.mjs';
-export { mix } from './utils/mix/index.mjs';
-export { pipe } from './utils/pipe.mjs';
 export { transform } from './utils/transform.mjs';
-export { wrap } from './utils/wrap.mjs';

package/dist/es/gestures/drag/VisualElementDragControls.mjs

@@ -1,4 +1,4 @@
-import { frame, setDragLock } from 'motion-dom';
+import { frame, mixNumber, setDragLock, percent } from 'motion-dom';
 import { invariant } from 'motion-utils';
 import { animateMotionValue } from '../../animation/interfaces/motion-value.mjs';
 import { addDomEvent } from '../../events/add-dom-event.mjs';
@@ -11,8 +11,6 @@ import { eachAxis } from '../../projection/utils/each-axis.mjs';
 import { measurePageBox } from '../../projection/utils/measure.mjs';
 import { getContextWindow } from '../../utils/get-context-window.mjs';
 import { isRefObject } from '../../utils/is-ref-object.mjs';
-import { mixNumber } from '../../utils/mix/number.mjs';
-import { percent } from '../../value/types/numbers/units.mjs';
 import { addValueToWillChange } from '../../value/use-will-change/add-will-change.mjs';
 import { PanSession } from '../pan/PanSession.mjs';
 import { applyConstraints, calcRelativeConstraints, resolveDragElastic, rebaseAxisConstraints, calcViewportConstraints, calcOrigin, defaultElastic } from './utils/constraints.mjs';

package/dist/es/gestures/drag/utils/constraints.mjs

@@ -1,7 +1,6 @@
-import { progress } from 'motion-utils';
+import { mixNumber } from 'motion-dom';
+import { progress, clamp } from 'motion-utils';
 import { calcLength } from '../../../projection/geometry/delta-calc.mjs';
-import { clamp } from '../../../utils/clamp.mjs';
-import { mixNumber } from '../../../utils/mix/number.mjs';
 
 /**
  * Apply constraints to a point. These constraints are both physical along an

package/dist/es/gestures/focus.mjs

@@ -1,6 +1,6 @@
+import { pipe } from 'motion-utils';
 import { addDomEvent } from '../events/add-dom-event.mjs';
 import { Feature } from '../motion/features/Feature.mjs';
-import { pipe } from '../utils/pipe.mjs';
 
 class FocusGesture extends Feature {
     constructor() {

package/dist/es/gestures/pan/PanSession.mjs

@@ -1,9 +1,8 @@
 import { frame, isPrimaryPointer, cancelFrame, frameData } from 'motion-dom';
-import { secondsToMilliseconds, millisecondsToSeconds } from 'motion-utils';
+import { pipe, secondsToMilliseconds, millisecondsToSeconds } from 'motion-utils';
 import { addPointerEvent } from '../../events/add-pointer-event.mjs';
 import { extractEventInfo } from '../../events/event-info.mjs';
 import { distance2D } from '../../utils/distance.mjs';
-import { pipe } from '../../utils/pipe.mjs';
 
 /**
  * @internal

package/dist/es/index.mjs

@@ -35,9 +35,8 @@ export { WillChangeMotionValue } from './value/use-will-change/WillChangeMotionV
 export { resolveMotionValue } from './value/utils/resolve-motion-value.mjs';
 export { useReducedMotion } from './utils/reduced-motion/use-reduced-motion.mjs';
 export { useReducedMotionConfig } from './utils/reduced-motion/use-reduced-motion-config.mjs';
-export { MotionGlobalConfig, invariant, noop, progress } from 'motion-utils';
-export { AcceleratedAnimation } from './animation/animators/AcceleratedAnimation.mjs';
-export { animateValue } from './animation/animators/MainThreadAnimation.mjs';
+export * from 'motion-utils';
+export { MotionGlobalConfig } from 'motion-utils';
 export { animationControls } from './animation/hooks/animation-controls.mjs';
 export { useAnimate } from './animation/hooks/use-animate.mjs';
 export { useAnimateMini } from './animation/hooks/use-animate-style.mjs';
@@ -61,11 +60,6 @@ export { useAnimationFrame } from './utils/use-animation-frame.mjs';
 export { useCycle } from './utils/use-cycle.mjs';
 export { useInView } from './utils/use-in-view.mjs';
 export { disableInstantTransitions, useInstantTransition } from './utils/use-instant-transition.mjs';
-export { color } from './value/types/color/index.mjs';
-export { complex } from './value/types/complex/index.mjs';
-export { px } from './value/types/numbers/units.mjs';
-export { spring } from './animation/generators/spring/index.mjs';
-export { findSpring } from './animation/generators/spring/find.mjs';
 export { optimizedAppearDataAttribute } from './animation/optimized-appear/data-id.mjs';
 export { startOptimizedAppearAnimation } from './animation/optimized-appear/start.mjs';
 export { LayoutGroupContext } from './context/LayoutGroupContext.mjs';
@@ -81,27 +75,12 @@ export { useInvertedScale as useDeprecatedInvertedScale } from './value/use-inve
 export { delay } from './utils/delay.mjs';
 import * as namespace from './components/Reorder/namespace.mjs';
 export { namespace as Reorder };
-export { MotionValue, cancelFrame, cancelSync, frame, frameData, hover, isDragActive, motionValue, press, sync, time } from 'motion-dom';
 export { animate, createScopedAnimate } from './animation/animate/index.mjs';
 export { animateMini } from './animation/animators/waapi/animate-style.mjs';
 export { scroll } from './render/dom/scroll/index.mjs';
 export { scrollInfo } from './render/dom/scroll/track.mjs';
 export { inView } from './render/dom/viewport/index.mjs';
-export { inertia } from './animation/generators/inertia.mjs';
-export { keyframes } from './animation/generators/keyframes.mjs';
 export { stagger } from './animation/utils/stagger.mjs';
-export { clamp } from './utils/clamp.mjs';
-export { mix } from './utils/mix/index.mjs';
-export { pipe } from './utils/pipe.mjs';
 export { transform } from './utils/transform.mjs';
-export { wrap } from './utils/wrap.mjs';
-export { anticipate } from './easing/anticipate.mjs';
-export { backIn, backInOut, backOut } from './easing/back.mjs';
-export { circIn, circInOut, circOut } from './easing/circ.mjs';
-export { cubicBezier } from './easing/cubic-bezier.mjs';
-export { easeIn, easeInOut, easeOut } from './easing/ease.mjs';
-export { mirrorEasing } from './easing/modifiers/mirror.mjs';
-export { reverseEasing } from './easing/modifiers/reverse.mjs';
-export { steps } from './easing/steps.mjs';
 export { distance, distance2D } from './utils/distance.mjs';
-export { interpolate } from './utils/interpolate.mjs';
+export * from 'motion-dom';

package/dist/es/motion/utils/is-forced-motion-value.mjs

@@ -1,5 +1,5 @@
+import { transformProps } from 'motion-dom';
 import { scaleCorrectors } from '../../projection/styles/scale-correction.mjs';
-import { transformProps } from '../../render/html/utils/keys-transform.mjs';
 
 function isForcedMotionValue(key, { layout, layoutId }) {
     return (transformProps.has(key) ||

package/dist/es/projection/animation/mix-values.mjs

@@ -1,7 +1,5 @@
-import { progress, noop } from 'motion-utils';
-import { circOut } from '../../easing/circ.mjs';
-import { mixNumber } from '../../utils/mix/number.mjs';
-import { percent, px } from '../../value/types/numbers/units.mjs';
+import { mixNumber, percent, px } from 'motion-dom';
+import { progress, circOut, noop } from 'motion-utils';
 
 const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
 const numBorders = borders.length;

package/dist/es/projection/geometry/delta-apply.mjs

@@ -1,4 +1,4 @@
-import { mixNumber } from '../../utils/mix/number.mjs';
+import { mixNumber } from 'motion-dom';
 import { hasTransform } from '../utils/has-transform.mjs';
 
 /**

package/dist/es/projection/geometry/delta-calc.mjs

@@ -1,4 +1,4 @@
-import { mixNumber } from '../../utils/mix/number.mjs';
+import { mixNumber } from 'motion-dom';
 
 const SCALE_PRECISION = 0.0001;
 const SCALE_MIN = 1 - SCALE_PRECISION;

package/dist/es/projection/geometry/delta-remove.mjs

@@ -1,5 +1,4 @@
-import { mixNumber } from '../../utils/mix/number.mjs';
-import { percent } from '../../value/types/numbers/units.mjs';
+import { percent, mixNumber } from 'motion-dom';
 import { scalePoint } from './delta-apply.mjs';
 
 /**

package/dist/es/projection/node/create-projection-node.mjs

@@ -1,12 +1,10 @@
-import { statsBuffer, getValueTransition, cancelFrame, time, frameData, frameSteps, microtask, frame, activeAnimations } from 'motion-dom';
-import { SubscriptionManager, noop } from 'motion-utils';
+import { statsBuffer, getValueTransition, cancelFrame, time, frameData, frameSteps, microtask, frame, activeAnimations, mixNumber } from 'motion-dom';
+import { SubscriptionManager, clamp, noop } from 'motion-utils';
 import { animateSingleValue } from '../../animation/animate/single-value.mjs';
 import { getOptimisedAppearId } from '../../animation/optimized-appear/get-appear-id.mjs';
 import { isSVGElement } from '../../render/dom/utils/is-svg-element.mjs';
 import { FlatTree } from '../../render/utils/flat-tree.mjs';
-import { clamp } from '../../utils/clamp.mjs';
 import { delay } from '../../utils/delay.mjs';
-import { mixNumber } from '../../utils/mix/number.mjs';
 import { resolveMotionValue } from '../../value/utils/resolve-motion-value.mjs';
 import { mixValues } from '../animation/mix-values.mjs';
 import { copyBoxInto, copyAxisDeltaInto } from '../geometry/copy.mjs';
@@ -994,9 +992,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         }
         setAnimationOrigin(delta, hasOnlyRelativeTargetChanged = false) {
             const snapshot = this.snapshot;
-            const snapshotLatestValues = snapshot
-                ? snapshot.latestValues
-                : {};
+            const snapshotLatestValues = snapshot ? snapshot.latestValues : {};
             const mixedValues = { ...this.latestValues };
             const targetDelta = createDelta();
             if (!this.relativeParent ||

package/dist/es/projection/styles/scale-border-radius.mjs

@@ -1,4 +1,4 @@
-import { px } from '../../value/types/numbers/units.mjs';
+import { px } from 'motion-dom';
 
 function pixelsToPercent(pixels, axis) {
     if (axis.max === axis.min)

package/dist/es/projection/styles/scale-box-shadow.mjs

@@ -1,5 +1,4 @@
-import { mixNumber } from '../../utils/mix/number.mjs';
-import { complex } from '../../value/types/complex/index.mjs';
+import { complex, mixNumber } from 'motion-dom';
 
 const correctBoxShadow = {
     correct: (latest, { treeScale, projectionDelta }) => {

package/dist/es/projection/styles/scale-correction.mjs

@@ -1,4 +1,4 @@
-import { isCSSVariableName } from '../../render/dom/utils/is-css-variable.mjs';
+import { isCSSVariableName } from 'motion-dom';
 
 const scaleCorrectors = {};
 function addScaleCorrector(correctors) {

package/dist/es/projection.mjs

@@ -1,4 +1,4 @@
-export { frame, frameData, recordStats, statsBuffer } from 'motion-dom';
+export { frame, frameData, mix, recordStats, statsBuffer } from 'motion-dom';
 export { calcBoxDelta } from './projection/geometry/delta-calc.mjs';
 export { nodeGroup } from './projection/node/group.mjs';
 export { HTMLProjectionNode } from './projection/node/HTMLProjectionNode.mjs';
@@ -7,5 +7,3 @@ export { correctBoxShadow } from './projection/styles/scale-box-shadow.mjs';
 export { addScaleCorrector } from './projection/styles/scale-correction.mjs';
 export { HTMLVisualElement } from './render/html/HTMLVisualElement.mjs';
 export { buildTransform } from './render/html/utils/build-transform.mjs';
-export { animateValue as animate } from './animation/animators/MainThreadAnimation.mjs';
-export { mix } from './utils/mix/index.mjs';

package/dist/es/render/VisualElement.mjs

@@ -1,19 +1,12 @@
-import { time, frame, cancelFrame, motionValue } from 'motion-dom';
-import { warnOnce, SubscriptionManager } from 'motion-utils';
+import { KeyframeResolver, time, frame, cancelFrame, transformProps, motionValue, findValueType, complex, getAnimatableNone } from 'motion-dom';
+import { warnOnce, isNumericalString, isZeroValueString, SubscriptionManager } from 'motion-utils';
 import { featureDefinitions } from '../motion/features/definitions.mjs';
 import { createBox } from '../projection/geometry/models.mjs';
-import { isNumericalString } from '../utils/is-numerical-string.mjs';
-import { isZeroValueString } from '../utils/is-zero-value-string.mjs';
 import { initPrefersReducedMotion } from '../utils/reduced-motion/index.mjs';
 import { hasReducedMotionListener, prefersReducedMotion } from '../utils/reduced-motion/state.mjs';
-import { complex } from '../value/types/complex/index.mjs';
 import { isMotionValue } from '../value/utils/is-motion-value.mjs';
-import { getAnimatableNone } from './dom/value-types/animatable-none.mjs';
-import { findValueType } from './dom/value-types/find.mjs';
-import { transformProps } from './html/utils/keys-transform.mjs';
 import { visualElementStore } from './store.mjs';
 import { isControllingVariants, isVariantNode } from './utils/is-controlling-variants.mjs';
-import { KeyframeResolver } from './utils/KeyframesResolver.mjs';
 import { updateMotionValuesFromProps } from './utils/motion-values.mjs';
 import { resolveVariantFromProps } from './utils/resolve-variants.mjs';
 

package/dist/es/render/dom/DOMVisualElement.mjs

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

package/dist/es/render/dom/scroll/attach-animation.mjs

@@ -0,0 +1,17 @@
+import { observeTimeline } from 'motion-dom';
+import { getTimeline } from './utils/get-timeline.mjs';
+
+function attachToAnimation(animation, options) {
+    const timeline = getTimeline(options);
+    return animation.attachTimeline({
+        timeline: options.target ? undefined : timeline,
+        observe: (valueAnimation) => {
+            valueAnimation.pause();
+            return observeTimeline((progress) => {
+                valueAnimation.time = valueAnimation.duration * progress;
+            }, timeline);
+        },
+    });
+}
+
+export { attachToAnimation };

package/dist/es/render/dom/scroll/attach-function.mjs

@@ -0,0 +1,23 @@
+import { observeTimeline } from 'motion-dom';
+import { scrollInfo } from './track.mjs';
+import { getTimeline } from './utils/get-timeline.mjs';
+
+/**
+ * If the onScroll function has two arguments, it's expecting
+ * more specific information about the scroll from scrollInfo.
+ */
+function isOnScrollWithInfo(onScroll) {
+    return onScroll.length === 2;
+}
+function attachToFunction(onScroll, options) {
+    if (isOnScrollWithInfo(onScroll)) {
+        return scrollInfo((info) => {
+            onScroll(info[options.axis].progress, info);
+        }, options);
+    }
+    else {
+        return observeTimeline(onScroll, getTimeline(options));
+    }
+}
+
+export { attachToFunction };

package/dist/es/render/dom/scroll/index.mjs

@@ -1,87 +1,11 @@
-import { supportsScrollTimeline } from 'motion-dom';
-import { noop } from 'motion-utils';
-import { observeTimeline } from './observe.mjs';
-import { scrollInfo } from './track.mjs';
+import { attachToAnimation } from './attach-animation.mjs';
+import { attachToFunction } from './attach-function.mjs';
 
-function scrollTimelineFallback({ source, container, axis = "y", }) {
-    // Support legacy source argument. Deprecate later.
-    if (source)
-        container = source;
-    // ScrollTimeline records progress as a percentage CSSUnitValue
-    const currentTime = { value: 0 };
-    const cancel = scrollInfo((info) => {
-        currentTime.value = info[axis].progress * 100;
-    }, { container, axis });
-    return { currentTime, cancel };
-}
-const timelineCache = new Map();
-function getTimeline({ source, container = document.documentElement, axis = "y", } = {}) {
-    // Support legacy source argument. Deprecate later.
-    if (source)
-        container = source;
-    if (!timelineCache.has(container)) {
-        timelineCache.set(container, {});
-    }
-    const elementCache = timelineCache.get(container);
-    if (!elementCache[axis]) {
-        elementCache[axis] = supportsScrollTimeline()
-            ? new ScrollTimeline({ source: container, axis })
-            : scrollTimelineFallback({ source: container, axis });
-    }
-    return elementCache[axis];
-}
-/**
- * If the onScroll function has two arguments, it's expecting
- * more specific information about the scroll from scrollInfo.
- */
-function isOnScrollWithInfo(onScroll) {
-    return onScroll.length === 2;
-}
-/**
- * Currently, we only support element tracking with `scrollInfo`, though in
- * the future we can also offer ViewTimeline support.
- */
-function needsElementTracking(options) {
-    return options && (options.target || options.offset);
-}
-function scrollFunction(onScroll, options) {
-    if (isOnScrollWithInfo(onScroll) || needsElementTracking(options)) {
-        return scrollInfo((info) => {
-            onScroll(info[options.axis].progress, info);
-        }, options);
-    }
-    else {
-        return observeTimeline(onScroll, getTimeline(options));
-    }
-}
-function scrollAnimation(animation, options) {
-    animation.flatten();
-    if (needsElementTracking(options)) {
-        animation.pause();
-        return scrollInfo((info) => {
-            animation.time = animation.duration * info[options.axis].progress;
-        }, options);
-    }
-    else {
-        const timeline = getTimeline(options);
-        if (animation.attachTimeline) {
-            return animation.attachTimeline(timeline, (valueAnimation) => {
-                valueAnimation.pause();
-                return observeTimeline((progress) => {
-                    valueAnimation.time = valueAnimation.duration * progress;
-                }, timeline);
-            });
-        }
-        else {
-            return noop;
-        }
-    }
-}
-function scroll(onScroll, { axis = "y", ...options } = {}) {
-    const optionsWithDefaults = { axis, ...options };
+function scroll(onScroll, { axis = "y", container = document.documentElement, ...options } = {}) {
+    const optionsWithDefaults = { axis, container, ...options };
     return typeof onScroll === "function"
-        ? scrollFunction(onScroll, optionsWithDefaults)
-        : scrollAnimation(onScroll, optionsWithDefaults);
+        ? attachToFunction(onScroll, optionsWithDefaults)
+        : attachToAnimation(onScroll, optionsWithDefaults);
 }
 
 export { scroll };

package/dist/es/render/dom/scroll/offsets/index.mjs

@@ -1,6 +1,5 @@
-import { clamp } from '../../../../utils/clamp.mjs';
-import { interpolate } from '../../../../utils/interpolate.mjs';
-import { defaultOffset } from '../../../../utils/offsets/default.mjs';
+import { interpolate, defaultOffset } from 'motion-dom';
+import { clamp } from 'motion-utils';
 import { calcInset } from './inset.mjs';
 import { resolveOffset } from './offset.mjs';
 import { ScrollOffset } from './presets.mjs';

package/dist/es/render/dom/scroll/utils/get-timeline.mjs

@@ -0,0 +1,30 @@
+import { supportsScrollTimeline } from 'motion-dom';
+import { scrollInfo } from '../track.mjs';
+
+const timelineCache = new Map();
+function scrollTimelineFallback(options) {
+    const currentTime = { value: 0 };
+    const cancel = scrollInfo((info) => {
+        currentTime.value = info[options.axis].progress * 100;
+    }, options);
+    return { currentTime, cancel };
+}
+function getTimeline({ source, container, ...options }) {
+    const { axis } = options;
+    if (source)
+        container = source;
+    const containerCache = timelineCache.get(container) ?? new Map();
+    timelineCache.set(container, containerCache);
+    const targetKey = options.target ?? "self";
+    const targetCache = containerCache.get(targetKey) ?? {};
+    const axisKey = axis + (options.offset ?? []).join(",");
+    if (!targetCache[axisKey]) {
+        targetCache[axisKey] =
+            !options.target && supportsScrollTimeline()
+                ? new ScrollTimeline({ source: container, axis })
+                : scrollTimelineFallback({ container, ...options });
+    }
+    return targetCache[axis];
+}
+
+export { getTimeline };

package/dist/es/render/html/HTMLVisualElement.mjs

@@ -1,9 +1,7 @@
+import { transformProps, readTransformValue, isCSSVariableName } from 'motion-dom';
 import { measureViewportBox } from '../../projection/utils/measure.mjs';
 import { DOMVisualElement } from '../dom/DOMVisualElement.mjs';
-import { isCSSVariableName } from '../dom/utils/is-css-variable.mjs';
 import { buildHTMLStyles } from './utils/build-styles.mjs';
-import { transformProps } from './utils/keys-transform.mjs';
-import { readTransformValue } from './utils/parse-transform.mjs';
 import { renderHTML } from './utils/render.mjs';
 import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
 

package/dist/es/render/html/utils/build-styles.mjs

@@ -1,8 +1,5 @@
-import { isCSSVariableName } from '../../dom/utils/is-css-variable.mjs';
-import { getValueAsType } from '../../dom/value-types/get-as-type.mjs';
-import { numberValueTypes } from '../../dom/value-types/number.mjs';
+import { transformProps, isCSSVariableName, getValueAsType, numberValueTypes } from 'motion-dom';
 import { buildTransform } from './build-transform.mjs';
-import { transformProps } from './keys-transform.mjs';
 
 function buildHTMLStyles(state, latestValues, transformTemplate) {
     const { style, vars, transformOrigin } = state;

package/dist/es/render/html/utils/build-transform.mjs

@@ -1,6 +1,4 @@
-import { getValueAsType } from '../../dom/value-types/get-as-type.mjs';
-import { numberValueTypes } from '../../dom/value-types/number.mjs';
-import { transformPropOrder } from './keys-transform.mjs';
+import { transformPropOrder, getValueAsType, numberValueTypes } from 'motion-dom';
 
 const translateAlias = {
     x: "translateX",

package/dist/es/render/svg/SVGVisualElement.mjs

@@ -1,9 +1,7 @@
-import { frame } from 'motion-dom';
+import { transformProps, getDefaultValueType, frame } from 'motion-dom';
 import { createBox } from '../../projection/geometry/models.mjs';
 import { DOMVisualElement } from '../dom/DOMVisualElement.mjs';
 import { camelToDash } from '../dom/utils/camel-to-dash.mjs';
-import { getDefaultValueType } from '../dom/value-types/defaults.mjs';
-import { transformProps } from '../html/utils/keys-transform.mjs';
 import { buildSVGAttrs } from './utils/build-attrs.mjs';
 import { camelCaseAttributes } from './utils/camel-case-attrs.mjs';
 import { isSVGTag } from './utils/is-svg-tag.mjs';

package/dist/es/render/svg/config-motion.mjs

@@ -1,6 +1,5 @@
-import { frame } from 'motion-dom';
+import { transformProps, frame } from 'motion-dom';
 import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
-import { transformProps } from '../html/utils/keys-transform.mjs';
 import { buildSVGAttrs } from './utils/build-attrs.mjs';
 import { createSvgRenderState } from './utils/create-render-state.mjs';
 import { isSVGTag } from './utils/is-svg-tag.mjs';

package/dist/es/render/svg/utils/path.mjs

@@ -1,4 +1,4 @@
-import { px } from '../../../value/types/numbers/units.mjs';
+import { px } from 'motion-dom';
 
 const dashKeys = {
     offset: "stroke-dashoffset",

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

@@ -1,5 +1,5 @@
+import { transformPropOrder } from 'motion-dom';
 import { isMotionValue } from '../../../value/utils/is-motion-value.mjs';
-import { transformPropOrder } from '../../html/utils/keys-transform.mjs';
 import { scrapeMotionValuesFromProps as scrapeMotionValuesFromProps$1 } from '../../html/utils/scrape-motion-values.mjs';
 
 function scrapeMotionValuesFromProps(props, prevProps, visualElement) {

package/dist/es/render/svg/utils/transform-origin.mjs

@@ -1,4 +1,4 @@
-import { px } from '../../../value/types/numbers/units.mjs';
+import { px } from 'motion-dom';
 
 function calcOrigin(origin, offset, size) {
     return typeof origin === "string"

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

@@ -17,7 +17,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "12.7.4", `Attempting to mix Motion versions ${nextValue.version} with 12.7.4 may not work as expected.`);
+                warnOnce(nextValue.version === "12.7.5-alpha.1", `Attempting to mix Motion versions ${nextValue.version} with 12.7.5-alpha.1 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/utils/delay.mjs

@@ -13,7 +13,7 @@ function delay(callback, timeout) {
             callback(elapsed - timeout);
         }
     };
-    frame.read(checkElapsed, true);
+    frame.setup(checkElapsed, true);
     return () => cancelFrame(checkElapsed);
 }
 function delayInSeconds(callback, timeout) {

package/dist/es/utils/transform.mjs

@@ -1,4 +1,4 @@
-import { interpolate } from './interpolate.mjs';
+import { interpolate } from 'motion-dom';
 
 const isCustomValueType = (v) => {
     return v && typeof v === "object" && v.mix;

package/dist/es/utils/use-cycle.mjs

@@ -1,5 +1,5 @@
+import { wrap } from 'motion-utils';
 import { useRef, useState, useCallback } from 'react';
-import { wrap } from './wrap.mjs';
 
 /**
  * Cycles through a series of visual properties. Can be used to toggle between or cycle through animations. It works similar to `useState` in React. It is provided an initial array of possible states, and returns an array of two arguments.

package/dist/es/utils/use-instant-transition.mjs

@@ -1,8 +1,8 @@
 import { frame } from 'motion-dom';
+import { MotionGlobalConfig } from 'motion-utils';
 import { useRef, useEffect } from 'react';
 import { useInstantLayoutTransition } from '../projection/use-instant-layout-transition.mjs';
 import { useForceUpdate } from './use-force-update.mjs';
-import { instantAnimationState } from './use-instant-transition-state.mjs';
 
 function useInstantTransition() {
     const [forceUpdate, forcedRenderCount] = useForceUpdate();
@@ -22,12 +22,12 @@ function useInstantTransition() {
              */
             if (forcedRenderCount !== unlockOnFrameRef.current)
                 return;
-            instantAnimationState.current = false;
+            MotionGlobalConfig.instantAnimations = false;
         }));
     }, [forcedRenderCount]);
     return (callback) => {
         startInstantLayoutTransition(() => {
-            instantAnimationState.current = true;
+            MotionGlobalConfig.instantAnimations = true;
             forceUpdate();
             callback();
             unlockOnFrameRef.current = forcedRenderCount + 1;
@@ -35,7 +35,7 @@ function useInstantTransition() {
     };
 }
 function disableInstantTransitions() {
-    instantAnimationState.current = false;
+    MotionGlobalConfig.instantAnimations = false;
 }
 
 export { disableInstantTransitions, useInstantTransition };