motion 12.7.5 → 12.8.0

package/dist/cjs/index.js

@@ -890,7 +890,7 @@ function mixVisibility(origin, target) {
 function mixNumber(a, b) {
     return (p) => mixNumber$1(a, b, p);
 }
-function getMixer$1(a) {
+function getMixer(a) {
     if (typeof a === "number") {
         return mixNumber;
     }
@@ -912,7 +912,7 @@ function getMixer$1(a) {
 function mixArray(a, b) {
     const output = [...a];
     const numValues = output.length;
-    const blendValue = a.map((v, i) => getMixer$1(v)(v, b[i]));
+    const blendValue = a.map((v, i) => getMixer(v)(v, b[i]));
     return (p) => {
         for (let i = 0; i < numValues; i++) {
             output[i] = blendValue[i](p);
@@ -925,7 +925,7 @@ function mixObject(a, b) {
     const blendValue = {};
     for (const key in output) {
         if (a[key] !== undefined && b[key] !== undefined) {
-            blendValue[key] = getMixer$1(a[key])(a[key], b[key]);
+            blendValue[key] = getMixer(a[key])(a[key], b[key]);
         }
     }
     return (v) => {
@@ -975,7 +975,7 @@ function mix(from, to, p) {
         typeof p === "number") {
         return mixNumber$1(from, to, p);
     }
-    const mixer = getMixer$1(from);
+    const mixer = getMixer(from);
     return mixer(from, to);
 }
 
@@ -3084,7 +3084,6 @@ const numberValueTypes = {
     backgroundPositionY: px,
     ...transformValueTypes,
     zIndex: int,
-    size: px,
     // SVG
     fillOpacity: alpha,
     strokeOpacity: alpha,
@@ -3738,6 +3737,17 @@ function recordStats() {
     return reportStats;
 }
 
+function transform(...args) {
+    const useImmediate = !Array.isArray(args[0]);
+    const argOffset = useImmediate ? 0 : -1;
+    const inputValue = args[0 + argOffset];
+    const inputRange = args[1 + argOffset];
+    const outputRange = args[2 + argOffset];
+    const options = args[3 + argOffset];
+    const interpolator = interpolate(inputRange, outputRange, options);
+    return useImmediate ? interpolator(inputValue) : interpolator;
+}
+
 /**
  * Maximum time between the value of two frames, beyond which we
  * assume the velocity has since been 0.
@@ -3766,7 +3776,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 = "12.7.5";
+        this.version = "12.8.0";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -4035,6 +4045,7 @@ class MotionValue {
      * @public
      */
     destroy() {
+        this.events.destroy?.notify();
         this.clearListeners();
         this.stop();
         if (this.stopPassiveEffect) {
@@ -4046,6 +4057,89 @@ function motionValue(init, options) {
     return new MotionValue(init, options);
 }
 
+function subscribeValue(inputValues, outputValue, getLatest) {
+    const update = () => outputValue.set(getLatest());
+    const scheduleUpdate = () => frame.preRender(update, false, true);
+    const subscriptions = inputValues.map((v) => v.on("change", scheduleUpdate));
+    outputValue.on("destroy", () => {
+        subscriptions.forEach((unsubscribe) => unsubscribe());
+        cancelFrame(update);
+    });
+}
+
+/**
+ * Create a `MotionValue` that transforms the output of other `MotionValue`s by
+ * passing their latest values through a transform function.
+ *
+ * Whenever a `MotionValue` referred to in the provided function is updated,
+ * it will be re-evaluated.
+ *
+ * ```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 transformValue(transform) {
+    const collectedValues = [];
+    /**
+     * Open session of collectMotionValues. Any MotionValue that calls get()
+     * inside transform will be saved into this array.
+     */
+    collectMotionValues.current = collectedValues;
+    const initialValue = transform();
+    collectMotionValues.current = undefined;
+    const value = motionValue(initialValue);
+    subscribeValue(collectedValues, value, transform);
+    return value;
+}
+
+/**
+ * Create a `MotionValue` that maps the output of another `MotionValue` by
+ * mapping it from one range of values into another.
+ *
+ * @remarks
+ *
+ * Given an input range of `[-200, -100, 100, 200]` and an output range of
+ * `[0, 1, 1, 0]`, the returned `MotionValue` will:
+ *
+ * - When provided a value between `-200` and `-100`, will return a value between `0` and  `1`.
+ * - When provided a value between `-100` and `100`, will return `1`.
+ * - When provided a value between `100` and `200`, will return a value between `1` and  `0`
+ *
+ * The input range must be a linear series of numbers. The output range
+ * can be any value type supported by Motion: numbers, colors, shadows, etc.
+ *
+ * Every value in the output range must be of the same type and in the same format.
+ *
+ * ```jsx
+ * const x = motionValue(0)
+ * const xRange = [-200, -100, 100, 200]
+ * const opacityRange = [0, 1, 1, 0]
+ * const opacity = mapValue(x, xRange, opacityRange)
+ * ```
+ *
+ * @param inputValue - `MotionValue`
+ * @param inputRange - A linear series of numbers (either all increasing or decreasing)
+ * @param outputRange - A series of numbers, colors or strings. Must be the same length as `inputRange`.
+ * @param options -
+ *
+ *  - clamp: boolean. Clamp values to within the given range. Defaults to `true`
+ *  - ease: EasingFunction[]. Easing functions to use on the interpolations between each value in the input and output ranges. If provided as an array, the array must be one item shorter than the input and output ranges, as the easings apply to the transition between each.
+ *
+ * @returns `MotionValue`
+ *
+ * @public
+ */
+function mapValue(inputValue, inputRange, outputRange, options) {
+    const map = transform(inputRange, outputRange, options);
+    return transformValue(() => map(inputValue.get()));
+}
+
 /**
  * A list of all ValueTypes
  */
@@ -4731,11 +4825,6 @@ const isKeyframesTarget = (v) => {
     return Array.isArray(v);
 };
 
-const resolveFinalValueInKeyframes = (v) => {
-    // TODO maybe throw if v.length - 1 is placeholder token?
-    return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
-};
-
 function getValueState(visualElement) {
     const state = [{}, {}];
     visualElement?.values.forEach((value, key) => {
@@ -4788,6 +4877,10 @@ function setMotionValue(visualElement, key, value) {
         visualElement.addValue(key, motionValue(value));
     }
 }
+function resolveFinalValueInKeyframes(v) {
+    // TODO maybe throw if v.length - 1 is placeholder token?
+    return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
+}
 function setTarget(visualElement, definition) {
     const resolved = resolveVariant(visualElement, definition);
     let { transitionEnd = {}, transition = {}, ...target } = resolved || {};
@@ -5146,7 +5239,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "12.7.5", `Attempting to mix Motion versions ${nextValue.version} with 12.7.5 may not work as expected.`);
+                warnOnce(nextValue.version === "12.8.0", `Attempting to mix Motion versions ${nextValue.version} with 12.8.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {
@@ -6975,24 +7068,6 @@ function distance2D(a, b) {
     return Math.sqrt(xDelta ** 2 + yDelta ** 2);
 }
 
-const isCustomValueType = (v) => {
-    return v && typeof v === "object" && v.mix;
-};
-const getMixer = (v) => (isCustomValueType(v) ? v.mix : undefined);
-function transform(...args) {
-    const useImmediate = !Array.isArray(args[0]);
-    const argOffset = useImmediate ? 0 : -1;
-    const inputValue = args[0 + argOffset];
-    const inputRange = args[1 + argOffset];
-    const outputRange = args[2 + argOffset];
-    const options = args[3 + argOffset];
-    const interpolator = interpolate(inputRange, outputRange, {
-        mixer: getMixer(outputRange[0]),
-        ...options,
-    });
-    return useImmediate ? interpolator(inputValue) : interpolator;
-}
-
 exports.AsyncMotionValueAnimation = AsyncMotionValueAnimation;
 exports.DOMKeyframesResolver = DOMKeyframesResolver;
 exports.GroupAnimation = GroupAnimation;
@@ -7064,7 +7139,7 @@ exports.getAnimationMap = getAnimationMap;
 exports.getComputedStyle = getComputedStyle$2;
 exports.getDefaultValueType = getDefaultValueType;
 exports.getEasingForSegment = getEasingForSegment;
-exports.getMixer = getMixer$1;
+exports.getMixer = getMixer;
 exports.getValueAsType = getValueAsType;
 exports.getValueTransition = getValueTransition$1;
 exports.getVariableValue = getVariableValue;
@@ -7091,6 +7166,7 @@ exports.isWaapiSupportedEasing = isWaapiSupportedEasing;
 exports.isZeroValueString = isZeroValueString;
 exports.keyframes = keyframes;
 exports.mapEasingToNativeEasing = mapEasingToNativeEasing;
+exports.mapValue = mapValue;
 exports.maxGeneratorDuration = maxGeneratorDuration;
 exports.memo = memo;
 exports.microtask = microtask;
@@ -7150,6 +7226,7 @@ exports.time = time;
 exports.transform = transform;
 exports.transformPropOrder = transformPropOrder;
 exports.transformProps = transformProps;
+exports.transformValue = transformValue;
 exports.transformValueTypes = transformValueTypes;
 exports.velocityPerSecond = velocityPerSecond;
 exports.vh = vh;

package/dist/cjs/react-client.js

@@ -2983,7 +2983,6 @@ const numberValueTypes = {
     backgroundPositionY: px,
     ...transformValueTypes,
     zIndex: int,
-    size: px,
     // SVG
     fillOpacity: alpha,
     strokeOpacity: alpha,
@@ -3450,7 +3449,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 = "12.7.5";
+        this.version = "12.8.0";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -3716,6 +3715,7 @@ class MotionValue {
      * @public
      */
     destroy() {
+        this.events.destroy?.notify();
         this.clearListeners();
         this.stop();
         if (this.stopPassiveEffect) {
@@ -3749,14 +3749,6 @@ const isKeyframesTarget = (v) => {
     return Array.isArray(v);
 };
 
-const isCustomValue = (v) => {
-    return Boolean(v && typeof v === "object" && v.mix && v.toValue);
-};
-const resolveFinalValueInKeyframes = (v) => {
-    // TODO maybe throw if v.length - 1 is placeholder token?
-    return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
-};
-
 /**
  * Set VisualElement's MotionValue, creating a new MotionValue for it if
  * it doesn't exist.
@@ -3769,6 +3761,10 @@ function setMotionValue(visualElement, key, value) {
         visualElement.addValue(key, motionValue(value));
     }
 }
+function resolveFinalValueInKeyframes(v) {
+    // TODO maybe throw if v.length - 1 is placeholder token?
+    return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
+}
 function setTarget(visualElement, definition) {
     const resolved = resolveVariant(visualElement, definition);
     let { transitionEnd = {}, transition = {}, ...target } = resolved || {};
@@ -5989,10 +5985,7 @@ function delay(callback, timeout) {
  * TODO: Remove and move to library
  */
 function resolveMotionValue(value) {
-    const unwrappedValue = isMotionValue(value) ? value.get() : value;
-    return isCustomValue(unwrappedValue)
-        ? unwrappedValue.toValue()
-        : unwrappedValue;
+    return isMotionValue(value) ? value.get() : value;
 }
 
 const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
@@ -9239,7 +9232,7 @@ function updateMotionValuesFromProps(element, next, prev) {
              * and warn against mismatches.
              */
             if (process.env.NODE_ENV === "development") {
-                warnOnce(nextValue.version === "12.7.5", `Attempting to mix Motion versions ${nextValue.version} with 12.7.5 may not work as expected.`);
+                warnOnce(nextValue.version === "12.8.0", `Attempting to mix Motion versions ${nextValue.version} with 12.8.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/cjs/react-m.js

@@ -484,7 +484,6 @@ const numberValueTypes = {
     backgroundPositionY: px,
     ...transformValueTypes,
     zIndex: int,
-    size: px,
     // SVG
     fillOpacity: alpha,
     strokeOpacity: alpha,
@@ -1273,20 +1272,13 @@ function useConstant(init) {
     return ref.current;
 }
 
-const isCustomValue = (v) => {
-    return Boolean(v && typeof v === "object" && v.mix && v.toValue);
-};
-
 /**
  * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself
  *
  * TODO: Remove and move to library
  */
 function resolveMotionValue(value) {
-    const unwrappedValue = isMotionValue(value) ? value.get() : value;
-    return isCustomValue(unwrappedValue)
-        ? unwrappedValue.toValue()
-        : unwrappedValue;
+    return isMotionValue(value) ? value.get() : value;
 }
 
 function makeState({ scrapeMotionValuesFromProps, createRenderState, onUpdate, }, props, context, presenceContext) {

package/dist/es/framer-motion/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.5", `Attempting to mix Motion versions ${nextValue.version} with 12.7.5 may not work as expected.`);
+                warnOnce(nextValue.version === "12.8.0", `Attempting to mix Motion versions ${nextValue.version} with 12.8.0 may not work as expected.`);
             }
         }
         else if (isMotionValue(prevValue)) {

package/dist/es/framer-motion/dist/es/render/utils/setters.mjs

@@ -1,4 +1,4 @@
-import { resolveFinalValueInKeyframes } from '../../utils/resolve-value.mjs';
+import { isKeyframesTarget } from '../../animation/utils/is-keyframes-target.mjs';
 import { resolveVariant } from './resolve-dynamic-variants.mjs';
 import { motionValue } from '../../../../../motion-dom/dist/es/value/index.mjs';
 
@@ -14,6 +14,10 @@ function setMotionValue(visualElement, key, value) {
         visualElement.addValue(key, motionValue(value));
     }
 }
+function resolveFinalValueInKeyframes(v) {
+    // TODO maybe throw if v.length - 1 is placeholder token?
+    return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
+}
 function setTarget(visualElement, definition) {
     const resolved = resolveVariant(visualElement, definition);
     let { transitionEnd = {}, transition = {}, ...target } = resolved || {};

package/dist/es/framer-motion/dist/es/value/use-transform.mjs

@@ -1,7 +1,7 @@
-import { transform } from '../utils/transform.mjs';
 import { useConstant } from '../utils/use-constant.mjs';
 import { useCombineMotionValues } from './use-combine-values.mjs';
 import { useComputed } from './use-computed.mjs';
+import { transform } from '../../../../motion-dom/dist/es/utils/transform.mjs';
 
 function useTransform(input, inputRangeOrTransformer, outputRange, options) {
     if (typeof input === "function") {

package/dist/es/framer-motion/dist/es/value/utils/resolve-motion-value.mjs

@@ -1,4 +1,3 @@
-import { isCustomValue } from '../../utils/resolve-value.mjs';
 import { isMotionValue } from './is-motion-value.mjs';
 
 /**
@@ -7,10 +6,7 @@ import { isMotionValue } from './is-motion-value.mjs';
  * TODO: Remove and move to library
  */
 function resolveMotionValue(value) {
-    const unwrappedValue = isMotionValue(value) ? value.get() : value;
-    return isCustomValue(unwrappedValue)
-        ? unwrappedValue.toValue()
-        : unwrappedValue;
+    return isMotionValue(value) ? value.get() : value;
 }
 
 export { resolveMotionValue };

package/dist/es/motion/lib/index.mjs

@@ -6,7 +6,6 @@ export { inView } from '../../framer-motion/dist/es/render/dom/viewport/index.mj
 export { stagger } from '../../framer-motion/dist/es/animation/utils/stagger.mjs';
 export { delayInSeconds as delay } from '../../framer-motion/dist/es/utils/delay.mjs';
 export { distance, distance2D } from '../../framer-motion/dist/es/utils/distance.mjs';
-export { transform } from '../../framer-motion/dist/es/utils/transform.mjs';
 export { AsyncMotionValueAnimation } from '../../motion-dom/dist/es/animation/AsyncMotionValueAnimation.mjs';
 export { GroupAnimation } from '../../motion-dom/dist/es/animation/GroupAnimation.mjs';
 export { GroupAnimationWithThen } from '../../motion-dom/dist/es/animation/GroupAnimationWithThen.mjs';
@@ -69,7 +68,10 @@ export { resolveElements } from '../../motion-dom/dist/es/utils/resolve-elements
 export { supportsFlags } from '../../motion-dom/dist/es/utils/supports/flags.mjs';
 export { supportsLinearEasing } from '../../motion-dom/dist/es/utils/supports/linear-easing.mjs';
 export { supportsScrollTimeline } from '../../motion-dom/dist/es/utils/supports/scroll-timeline.mjs';
+export { transform } from '../../motion-dom/dist/es/utils/transform.mjs';
 export { MotionValue, collectMotionValues, motionValue } from '../../motion-dom/dist/es/value/index.mjs';
+export { mapValue } from '../../motion-dom/dist/es/value/map-value.mjs';
+export { transformValue } from '../../motion-dom/dist/es/value/transform-value.mjs';
 export { color } from '../../motion-dom/dist/es/value/types/color/index.mjs';
 export { hex } from '../../motion-dom/dist/es/value/types/color/hex.mjs';
 export { hsla } from '../../motion-dom/dist/es/value/types/color/hsla.mjs';

package/dist/es/motion/lib/react.mjs

@@ -78,7 +78,6 @@ export { scroll } from '../../framer-motion/dist/es/render/dom/scroll/index.mjs'
 export { scrollInfo } from '../../framer-motion/dist/es/render/dom/scroll/track.mjs';
 export { inView } from '../../framer-motion/dist/es/render/dom/viewport/index.mjs';
 export { stagger } from '../../framer-motion/dist/es/animation/utils/stagger.mjs';
-export { transform } from '../../framer-motion/dist/es/utils/transform.mjs';
 export { distance, distance2D } from '../../framer-motion/dist/es/utils/distance.mjs';
 export { addUniqueItem, moveItem, removeItem } from '../../motion-utils/dist/es/array.mjs';
 export { clamp } from '../../motion-utils/dist/es/clamp.mjs';
@@ -168,7 +167,10 @@ export { resolveElements } from '../../motion-dom/dist/es/utils/resolve-elements
 export { supportsFlags } from '../../motion-dom/dist/es/utils/supports/flags.mjs';
 export { supportsLinearEasing } from '../../motion-dom/dist/es/utils/supports/linear-easing.mjs';
 export { supportsScrollTimeline } from '../../motion-dom/dist/es/utils/supports/scroll-timeline.mjs';
+export { transform } from '../../motion-dom/dist/es/utils/transform.mjs';
 export { MotionValue, collectMotionValues, motionValue } from '../../motion-dom/dist/es/value/index.mjs';
+export { mapValue } from '../../motion-dom/dist/es/value/map-value.mjs';
+export { transformValue } from '../../motion-dom/dist/es/value/transform-value.mjs';
 export { color } from '../../motion-dom/dist/es/value/types/color/index.mjs';
 export { hex } from '../../motion-dom/dist/es/value/types/color/hex.mjs';
 export { hsla } from '../../motion-dom/dist/es/value/types/color/hsla.mjs';

package/dist/es/{framer-motion → motion-dom}/dist/es/utils/transform.mjs

@@ -1,9 +1,5 @@
-import { interpolate } from '../../../../motion-dom/dist/es/utils/interpolate.mjs';
+import { interpolate } from './interpolate.mjs';
 
-const isCustomValueType = (v) => {
-    return v && typeof v === "object" && v.mix;
-};
-const getMixer = (v) => (isCustomValueType(v) ? v.mix : undefined);
 function transform(...args) {
     const useImmediate = !Array.isArray(args[0]);
     const argOffset = useImmediate ? 0 : -1;
@@ -11,10 +7,7 @@ function transform(...args) {
     const inputRange = args[1 + argOffset];
     const outputRange = args[2 + argOffset];
     const options = args[3 + argOffset];
-    const interpolator = interpolate(inputRange, outputRange, {
-        mixer: getMixer(outputRange[0]),
-        ...options,
-    });
+    const interpolator = interpolate(inputRange, outputRange, options);
     return useImmediate ? interpolator(inputValue) : interpolator;
 }
 

package/dist/es/motion-dom/dist/es/value/index.mjs

@@ -32,7 +32,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 = "12.7.5";
+        this.version = "12.8.0";
         /**
          * Tracks whether this value can output a velocity. Currently this is only true
          * if the value is numerical, but we might be able to widen the scope here and support
@@ -301,6 +301,7 @@ class MotionValue {
      * @public
      */
     destroy() {
+        this.events.destroy?.notify();
         this.clearListeners();
         this.stop();
         if (this.stopPassiveEffect) {

package/dist/es/motion-dom/dist/es/value/map-value.mjs

@@ -0,0 +1,46 @@
+import { transform } from '../utils/transform.mjs';
+import { transformValue } from './transform-value.mjs';
+
+/**
+ * Create a `MotionValue` that maps the output of another `MotionValue` by
+ * mapping it from one range of values into another.
+ *
+ * @remarks
+ *
+ * Given an input range of `[-200, -100, 100, 200]` and an output range of
+ * `[0, 1, 1, 0]`, the returned `MotionValue` will:
+ *
+ * - When provided a value between `-200` and `-100`, will return a value between `0` and  `1`.
+ * - When provided a value between `-100` and `100`, will return `1`.
+ * - When provided a value between `100` and `200`, will return a value between `1` and  `0`
+ *
+ * The input range must be a linear series of numbers. The output range
+ * can be any value type supported by Motion: numbers, colors, shadows, etc.
+ *
+ * Every value in the output range must be of the same type and in the same format.
+ *
+ * ```jsx
+ * const x = motionValue(0)
+ * const xRange = [-200, -100, 100, 200]
+ * const opacityRange = [0, 1, 1, 0]
+ * const opacity = mapValue(x, xRange, opacityRange)
+ * ```
+ *
+ * @param inputValue - `MotionValue`
+ * @param inputRange - A linear series of numbers (either all increasing or decreasing)
+ * @param outputRange - A series of numbers, colors or strings. Must be the same length as `inputRange`.
+ * @param options -
+ *
+ *  - clamp: boolean. Clamp values to within the given range. Defaults to `true`
+ *  - ease: EasingFunction[]. Easing functions to use on the interpolations between each value in the input and output ranges. If provided as an array, the array must be one item shorter than the input and output ranges, as the easings apply to the transition between each.
+ *
+ * @returns `MotionValue`
+ *
+ * @public
+ */
+function mapValue(inputValue, inputRange, outputRange, options) {
+    const map = transform(inputRange, outputRange, options);
+    return transformValue(() => map(inputValue.get()));
+}
+
+export { mapValue };

package/dist/es/motion-dom/dist/es/value/subscribe-value.mjs

@@ -0,0 +1,13 @@
+import { cancelFrame, frame } from '../frameloop/frame.mjs';
+
+function subscribeValue(inputValues, outputValue, getLatest) {
+    const update = () => outputValue.set(getLatest());
+    const scheduleUpdate = () => frame.preRender(update, false, true);
+    const subscriptions = inputValues.map((v) => v.on("change", scheduleUpdate));
+    outputValue.on("destroy", () => {
+        subscriptions.forEach((unsubscribe) => unsubscribe());
+        cancelFrame(update);
+    });
+}
+
+export { subscribeValue };

package/dist/es/motion-dom/dist/es/value/transform-value.mjs

@@ -0,0 +1,35 @@
+import { collectMotionValues, motionValue } from './index.mjs';
+import { subscribeValue } from './subscribe-value.mjs';
+
+/**
+ * Create a `MotionValue` that transforms the output of other `MotionValue`s by
+ * passing their latest values through a transform function.
+ *
+ * Whenever a `MotionValue` referred to in the provided function is updated,
+ * it will be re-evaluated.
+ *
+ * ```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 transformValue(transform) {
+    const collectedValues = [];
+    /**
+     * Open session of collectMotionValues. Any MotionValue that calls get()
+     * inside transform will be saved into this array.
+     */
+    collectMotionValues.current = collectedValues;
+    const initialValue = transform();
+    collectMotionValues.current = undefined;
+    const value = motionValue(initialValue);
+    subscribeValue(collectedValues, value, transform);
+    return value;
+}
+
+export { transformValue };

package/dist/es/motion-dom/dist/es/value/types/maps/number.mjs

@@ -41,7 +41,6 @@ const numberValueTypes = {
     backgroundPositionY: px,
     ...transformValueTypes,
     zIndex: int,
-    size: px,
     // SVG
     fillOpacity: alpha,
     strokeOpacity: alpha,