motion-v 1.1.1 → 1.2.1

package/dist/cjs/index.js

@@ -21,7 +21,7 @@ function moveItem$1([...arr], fromIndex, toIndex) {
   }
   return arr;
 }
-const clamp$1 = (min, max, v) => {
+const clamp = (min, max, v) => {
   if (v > max)
     return max;
   if (v < min)
@@ -62,7 +62,7 @@ function memo(callback) {
 const noop = /* @__NO_SIDE_EFFECTS__ */ (any) => any;
 const combineFunctions = (a, b) => (v) => b(a(v));
 const pipe = (...transformers) => transformers.reduce(combineFunctions);
-const progress$1 = /* @__NO_SIDE_EFFECTS__ */ (from, to, value) => {
+const progress = /* @__NO_SIDE_EFFECTS__ */ (from, to, value) => {
   const toFromDifference = to - from;
   return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
 };
@@ -156,7 +156,7 @@ function steps(numSteps, direction = "end") {
     progress2 = direction === "end" ? Math.min(progress2, 0.999) : Math.max(progress2, 1e-3);
     const expanded = progress2 * numSteps;
     const rounded = direction === "end" ? Math.floor(expanded) : Math.ceil(expanded);
-    return clamp$1(0, 1, rounded / numSteps);
+    return clamp(0, 1, rounded / numSteps);
   };
 }
 const isEasingArray = (ease2) => {
@@ -380,7 +380,7 @@ const number = {
 };
 const alpha = {
   ...number,
-  transform: (v) => clamp$1(0, 1, v)
+  transform: (v) => clamp(0, 1, v)
 };
 const scale = {
   ...number,
@@ -406,7 +406,7 @@ const splitColor = (aName, bName, cName) => (v) => {
     alpha: alpha2 !== void 0 ? parseFloat(alpha2) : 1
   };
 };
-const clampRgbUnit = (v) => clamp$1(0, 255, v);
+const clampRgbUnit = (v) => clamp(0, 255, v);
 const rgbUnit = {
   ...number,
   transform: (v) => Math.round(clampRgbUnit(v))
@@ -448,26 +448,26 @@ const hex = {
   parse: parseHex,
   transform: rgba.transform
 };
-const createUnitType$1 = /* @__NO_SIDE_EFFECTS__ */ (unit) => ({
+const createUnitType = /* @__NO_SIDE_EFFECTS__ */ (unit) => ({
   test: (v) => typeof v === "string" && v.endsWith(unit) && v.split(" ").length === 1,
   parse: parseFloat,
   transform: (v) => `${v}${unit}`
 });
-const degrees = /* @__PURE__ */ createUnitType$1("deg");
-const percent$1 = /* @__PURE__ */ createUnitType$1("%");
-const px$1 = /* @__PURE__ */ createUnitType$1("px");
-const vh = /* @__PURE__ */ createUnitType$1("vh");
-const vw = /* @__PURE__ */ createUnitType$1("vw");
+const degrees = /* @__PURE__ */ createUnitType("deg");
+const percent = /* @__PURE__ */ createUnitType("%");
+const px = /* @__PURE__ */ createUnitType("px");
+const vh = /* @__PURE__ */ createUnitType("vh");
+const vw = /* @__PURE__ */ createUnitType("vw");
 const progressPercentage = /* @__PURE__ */ (() => ({
-  ...percent$1,
-  parse: (v) => percent$1.parse(v) / 100,
-  transform: (v) => percent$1.transform(v * 100)
+  ...percent,
+  parse: (v) => percent.parse(v) / 100,
+  transform: (v) => percent.transform(v * 100)
 }))();
 const hsla = {
   test: /* @__PURE__ */ isColorString("hsl", "hue"),
   parse: /* @__PURE__ */ splitColor("hue", "saturation", "lightness"),
   transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {
-    return "hsla(" + Math.round(hue) + ", " + percent$1.transform(sanitize(saturation)) + ", " + percent$1.transform(sanitize(lightness)) + ", " + sanitize(alpha.transform(alpha$1)) + ")";
+    return "hsla(" + Math.round(hue) + ", " + percent.transform(sanitize(saturation)) + ", " + percent.transform(sanitize(lightness)) + ", " + sanitize(alpha.transform(alpha$1)) + ")";
   }
 };
 const color = {
@@ -601,7 +601,7 @@ function hslaToRgba({ hue, saturation, lightness, alpha: alpha2 }) {
 function mixImmediate(a, b) {
   return (p) => p > 0 ? b : a;
 }
-const mixNumber$2 = (from, to, progress2) => {
+const mixNumber$1 = (from, to, progress2) => {
   return from + (to - from) * progress2;
 };
 const mixLinearColor = (from, to, v) => {
@@ -633,7 +633,7 @@ const mixColor = (from, to) => {
     blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v);
     blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v);
     blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v);
-    blended.alpha = mixNumber$2(fromRGBA.alpha, toRGBA.alpha, v);
+    blended.alpha = mixNumber$1(fromRGBA.alpha, toRGBA.alpha, v);
     return rgba.transform(blended);
   };
 };
@@ -645,12 +645,12 @@ function mixVisibility(origin, target) {
     return (p) => p >= 1 ? target : origin;
   }
 }
-function mixNumber$1(a, b) {
-  return (p) => mixNumber$2(a, b, p);
+function mixNumber(a, b) {
+  return (p) => mixNumber$1(a, b, p);
 }
 function getMixer(a) {
   if (typeof a === "number") {
-    return mixNumber$1;
+    return mixNumber;
   } else if (typeof a === "string") {
     return isCSSVariableToken(a) ? mixImmediate : color.test(a) ? mixColor : mixComplex;
   } else if (Array.isArray(a)) {
@@ -715,7 +715,7 @@ const mixComplex = (origin, target) => {
 };
 function mix(from, to, p) {
   if (typeof from === "number" && typeof to === "number" && typeof p === "number") {
-    return mixNumber$2(from, to, p);
+    return mixNumber$1(from, to, p);
   }
   const mixer = getMixer(from);
   return mixer(from, to);
@@ -802,8 +802,8 @@ function findSpring({ duration = springDefaults.duration, bounce = springDefault
   let derivative;
   exports.warning(duration <= /* @__PURE__ */ secondsToMilliseconds(springDefaults.maxDuration), "Spring duration must be 10 seconds or less");
   let dampingRatio = 1 - bounce;
-  dampingRatio = clamp$1(springDefaults.minDamping, springDefaults.maxDamping, dampingRatio);
-  duration = clamp$1(springDefaults.minDuration, springDefaults.maxDuration, /* @__PURE__ */ millisecondsToSeconds(duration));
+  dampingRatio = clamp(springDefaults.minDamping, springDefaults.maxDamping, dampingRatio);
+  duration = clamp(springDefaults.minDuration, springDefaults.maxDuration, /* @__PURE__ */ millisecondsToSeconds(duration));
   if (dampingRatio < 1) {
     envelope = (undampedFreq2) => {
       const exponentialDecay = undampedFreq2 * dampingRatio;
@@ -883,7 +883,7 @@ function getSpringOptions(options) {
       const visualDuration = options.visualDuration;
       const root = 2 * Math.PI / (visualDuration * 1.2);
       const stiffness = root * root;
-      const damping = 2 * clamp$1(0.05, 1, 1 - (options.bounce || 0)) * Math.sqrt(stiffness);
+      const damping = 2 * clamp(0.05, 1, 1 - (options.bounce || 0)) * Math.sqrt(stiffness);
       springOptions = {
         ...springOptions,
         mass: springDefaults.mass,
@@ -1075,16 +1075,16 @@ function interpolate(input, output, { clamp: isClamp = true, ease: ease2, mixer
           break;
       }
     }
-    const progressInRange = /* @__PURE__ */ progress$1(input[i], input[i + 1], v);
+    const progressInRange = /* @__PURE__ */ progress(input[i], input[i + 1], v);
     return mixers[i](progressInRange);
   };
-  return isClamp ? (v) => interpolator(clamp$1(input[0], input[inputLength - 1], v)) : interpolator;
+  return isClamp ? (v) => interpolator(clamp(input[0], input[inputLength - 1], v)) : interpolator;
 }
 function fillOffset(offset, remaining) {
   const min = offset[offset.length - 1];
   for (let i = 1; i <= remaining; i++) {
-    const offsetProgress = /* @__PURE__ */ progress$1(0, remaining, i);
-    offset.push(mixNumber$2(min, 1, offsetProgress));
+    const offsetProgress = /* @__PURE__ */ progress(0, remaining, i);
+    offset.push(mixNumber$1(min, 1, offsetProgress));
   }
 }
 function defaultOffset$1(arr) {
@@ -1175,13 +1175,11 @@ class JSAnimation extends WithPromise {
     this.currentTime = 0;
     this.holdTime = null;
     this.playbackSpeed = 1;
-    this.stop = (sync2 = true) => {
+    this.stop = () => {
       var _a, _b;
-      if (sync2) {
-        const { motionValue: motionValue2 } = this.options;
-        if (motionValue2 && motionValue2.updatedAt !== time.now()) {
-          this.tick(time.now());
-        }
+      const { motionValue: motionValue2 } = this.options;
+      if (motionValue2 && motionValue2.updatedAt !== time.now()) {
+        this.tick(time.now());
       }
       this.isStopped = true;
       if (this.state === "idle")
@@ -1277,7 +1275,7 @@ class JSAnimation extends WithPromise {
           frameGenerator = mirroredGenerator;
         }
       }
-      elapsed = clamp$1(0, 1, iterationProgress) * resolvedDuration;
+      elapsed = clamp(0, 1, iterationProgress) * resolvedDuration;
     }
     const state = isInDelayPhase ? { done: false, value: keyframes2[0] } : frameGenerator.next(elapsed);
     if (mixKeyframes) {
@@ -1520,7 +1518,7 @@ const transformPropOrder = [
   "skewY"
 ];
 const transformProps = /* @__PURE__ */ (() => new Set(transformPropOrder))();
-const isNumOrPxType = (v) => v === number || v === px$1;
+const isNumOrPxType = (v) => v === number || v === px;
 const transformKeys = /* @__PURE__ */ new Set(["x", "y", "z"]);
 const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
 function removeNonTranslationalTransform(visualElement) {
@@ -2263,7 +2261,7 @@ const auto = {
   parse: (v) => v
 };
 const testValueType = (v) => (type) => type.test(v);
-const dimensionValueTypes = [number, px$1, percent$1, degrees, vw, vh, auto];
+const dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
 const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v));
 function isNone(value) {
   if (typeof value === "number") {
@@ -2312,56 +2310,56 @@ const transformValueTypes = {
   skew: degrees,
   skewX: degrees,
   skewY: degrees,
-  distance: px$1,
-  translateX: px$1,
-  translateY: px$1,
-  translateZ: px$1,
-  x: px$1,
-  y: px$1,
-  z: px$1,
-  perspective: px$1,
-  transformPerspective: px$1,
+  distance: px,
+  translateX: px,
+  translateY: px,
+  translateZ: px,
+  x: px,
+  y: px,
+  z: px,
+  perspective: px,
+  transformPerspective: px,
   opacity: alpha,
   originX: progressPercentage,
   originY: progressPercentage,
-  originZ: px$1
+  originZ: px
 };
 const numberValueTypes = {
   // Border props
-  borderWidth: px$1,
-  borderTopWidth: px$1,
-  borderRightWidth: px$1,
-  borderBottomWidth: px$1,
-  borderLeftWidth: px$1,
-  borderRadius: px$1,
-  radius: px$1,
-  borderTopLeftRadius: px$1,
-  borderTopRightRadius: px$1,
-  borderBottomRightRadius: px$1,
-  borderBottomLeftRadius: px$1,
+  borderWidth: px,
+  borderTopWidth: px,
+  borderRightWidth: px,
+  borderBottomWidth: px,
+  borderLeftWidth: px,
+  borderRadius: px,
+  radius: px,
+  borderTopLeftRadius: px,
+  borderTopRightRadius: px,
+  borderBottomRightRadius: px,
+  borderBottomLeftRadius: px,
   // Positioning props
-  width: px$1,
-  maxWidth: px$1,
-  height: px$1,
-  maxHeight: px$1,
-  top: px$1,
-  right: px$1,
-  bottom: px$1,
-  left: px$1,
+  width: px,
+  maxWidth: px,
+  height: px,
+  maxHeight: px,
+  top: px,
+  right: px,
+  bottom: px,
+  left: px,
   // Spacing props
-  padding: px$1,
-  paddingTop: px$1,
-  paddingRight: px$1,
-  paddingBottom: px$1,
-  paddingLeft: px$1,
-  margin: px$1,
-  marginTop: px$1,
-  marginRight: px$1,
-  marginBottom: px$1,
-  marginLeft: px$1,
+  padding: px,
+  paddingTop: px,
+  paddingRight: px,
+  paddingBottom: px,
+  paddingLeft: px,
+  margin: px,
+  marginTop: px,
+  marginRight: px,
+  marginBottom: px,
+  marginLeft: px,
   // Misc
-  backgroundPositionX: px$1,
-  backgroundPositionY: px$1,
+  backgroundPositionX: px,
+  backgroundPositionY: px,
   ...transformValueTypes,
   zIndex: int,
   // SVG
@@ -2565,6 +2563,9 @@ const acceleratedValues = /* @__PURE__ */ new Set([
   // or until we implement support for linear() easing.
   // "background-color"
 ]);
+function camelToDash$1(str) {
+  return str.replace(/([A-Z])/g, (match) => `-${match.toLowerCase()}`);
+}
 function resolveElements(elementOrSelector, scope, selectorCache) {
   if (elementOrSelector instanceof EventTarget) {
     return [elementOrSelector];
@@ -2578,6 +2579,110 @@ function resolveElements(elementOrSelector, scope, selectorCache) {
   }
   return Array.from(elementOrSelector);
 }
+function createSelectorEffect(subjectEffect) {
+  return (subject, values) => {
+    const elements = resolveElements(subject);
+    const subscriptions = [];
+    for (const element of elements) {
+      const remove = subjectEffect(element, values);
+      subscriptions.push(remove);
+    }
+    return () => {
+      for (const remove of subscriptions)
+        remove();
+    };
+  };
+}
+const getValueAsType = (value, type) => {
+  return type && typeof value === "number" ? type.transform(value) : value;
+};
+class MotionValueState {
+  constructor() {
+    this.latest = {};
+    this.values = /* @__PURE__ */ new Map();
+  }
+  set(name, value, render, computed, useDefaultValueType = true) {
+    const existingValue = this.values.get(name);
+    if (existingValue) {
+      existingValue.onRemove();
+    }
+    const onChange = () => {
+      const v = value.get();
+      if (useDefaultValueType) {
+        this.latest[name] = getValueAsType(v, numberValueTypes[name]);
+      } else {
+        this.latest[name] = v;
+      }
+      render && frame.render(render);
+    };
+    onChange();
+    const cancelOnChange = value.on("change", onChange);
+    computed && value.addDependent(computed);
+    const remove = () => {
+      cancelOnChange();
+      render && cancelFrame(render);
+      this.values.delete(name);
+      computed && value.removeDependent(computed);
+    };
+    this.values.set(name, { value, onRemove: remove });
+    return remove;
+  }
+  get(name) {
+    var _a;
+    return (_a = this.values.get(name)) == null ? void 0 : _a.value;
+  }
+  destroy() {
+    for (const value of this.values.values()) {
+      value.onRemove();
+    }
+  }
+}
+function createEffect(addValue) {
+  const stateCache = /* @__PURE__ */ new WeakMap();
+  const subscriptions = [];
+  return (subject, values) => {
+    const state = stateCache.get(subject) ?? new MotionValueState();
+    stateCache.set(subject, state);
+    for (const key in values) {
+      const value = values[key];
+      const remove = addValue(subject, state, key, value);
+      subscriptions.push(remove);
+    }
+    return () => {
+      for (const cancel of subscriptions)
+        cancel();
+    };
+  };
+}
+function canSetAsProperty(element, name) {
+  if (!(name in element))
+    return false;
+  const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(element), name) || Object.getOwnPropertyDescriptor(element, name);
+  return descriptor && typeof descriptor.set === "function";
+}
+const addAttrValue = (element, state, key, value) => {
+  const isProp = canSetAsProperty(element, key);
+  const name = isProp ? key : key.startsWith("data") || key.startsWith("aria") ? camelToDash$1(key) : key;
+  const render = isProp ? () => {
+    element[name] = state.latest[key];
+  } : () => {
+    const v = state.latest[key];
+    if (v === null || v === void 0) {
+      element.removeAttribute(name);
+    } else {
+      element.setAttribute(name, String(v));
+    }
+  };
+  return state.set(key, value, render);
+};
+const attrEffect = /* @__PURE__ */ createSelectorEffect(
+  /* @__PURE__ */ createEffect(addAttrValue)
+);
+const propEffect = /* @__PURE__ */ createEffect((subject, state, key, value) => {
+  return state.set(key, value, () => {
+    subject[key] = state.latest[key];
+  }, void 0, false);
+});
 const MAX_VELOCITY_DELTA = 30;
 const isFloat = (value) => {
   return !isNaN(parseFloat(value));
@@ -2867,45 +2972,6 @@ class MotionValue {
 function motionValue(init, options) {
   return new MotionValue(init, options);
 }
-const getValueAsType = (value, type) => {
-  return type && typeof value === "number" ? type.transform(value) : value;
-};
-class MotionValueState {
-  constructor() {
-    this.latest = {};
-    this.values = /* @__PURE__ */ new Map();
-  }
-  set(name, value, render, computed) {
-    const existingValue = this.values.get(name);
-    if (existingValue) {
-      existingValue.onRemove();
-    }
-    const onChange = () => {
-      this.latest[name] = getValueAsType(value.get(), numberValueTypes[name]);
-      render && frame.render(render);
-    };
-    onChange();
-    const cancelOnChange = value.on("change", onChange);
-    computed && value.addDependent(computed);
-    const remove = () => {
-      cancelOnChange();
-      render && cancelFrame(render);
-      this.values.delete(name);
-      computed && value.removeDependent(computed);
-    };
-    this.values.set(name, { value, onRemove: remove });
-    return remove;
-  }
-  get(name) {
-    var _a;
-    return (_a = this.values.get(name)) == null ? void 0 : _a.value;
-  }
-  destroy() {
-    for (const value of this.values.values()) {
-      value.onRemove();
-    }
-  }
-}
 const translateAlias$1 = {
   x: "translateX",
   y: "translateY",
@@ -2935,35 +3001,30 @@ function buildTransform$1(state) {
   }
   return transformIsDefault ? "none" : transform2.trim();
 }
-const stateMap = /* @__PURE__ */ new WeakMap();
-function styleEffect(subject, values) {
-  const elements = resolveElements(subject);
-  const subscriptions = [];
-  for (let i = 0; i < elements.length; i++) {
-    const element = elements[i];
-    const state = stateMap.get(element) ?? new MotionValueState();
-    stateMap.set(element, state);
-    for (const key in values) {
-      const value = values[key];
-      const remove = addValue(element, state, key, value);
-      subscriptions.push(remove);
-    }
-  }
-  return () => {
-    for (const cancel of subscriptions)
-      cancel();
-  };
-}
-function addValue(element, state, key, value) {
+const originProps = /* @__PURE__ */ new Set(["originX", "originY", "originZ"]);
+const addStyleValue = (element, state, key, value) => {
   let render = void 0;
   let computed = void 0;
   if (transformProps.has(key)) {
     if (!state.get("transform")) {
+      if (!isHTMLElement$1(element) && !state.get("transformBox")) {
+        addStyleValue(element, state, "transformBox", new MotionValue("fill-box"));
+      }
       state.set("transform", new MotionValue("none"), () => {
         element.style.transform = buildTransform$1(state);
       });
     }
     computed = state.get("transform");
+  } else if (originProps.has(key)) {
+    if (!state.get("transformOrigin")) {
+      state.set("transformOrigin", new MotionValue(""), () => {
+        const originX = state.latest.originX ?? "50%";
+        const originY = state.latest.originY ?? "50%";
+        const originZ = state.latest.originZ ?? 0;
+        element.style.transformOrigin = `${originX} ${originY} ${originZ}`;
+      });
+    }
+    computed = state.get("transformOrigin");
   } else if (isCSSVar(key)) {
     render = () => {
       element.style.setProperty(key, state.latest[key]);
@@ -2974,6 +3035,39 @@ function addValue(element, state, key, value) {
     };
   }
   return state.set(key, value, render, computed);
+};
+const styleEffect = /* @__PURE__ */ createSelectorEffect(
+  /* @__PURE__ */ createEffect(addStyleValue)
+);
+const toPx = px.transform;
+function addSVGPathValue(element, state, key, value) {
+  frame.render(() => element.setAttribute("pathLength", "1"));
+  if (key === "pathOffset") {
+    return state.set(key, value, () => element.setAttribute("stroke-dashoffset", toPx(-state.latest[key])));
+  } else {
+    if (!state.get("stroke-dasharray")) {
+      state.set("stroke-dasharray", new MotionValue("1 1"), () => {
+        const { pathLength = 1, pathSpacing } = state.latest;
+        element.setAttribute("stroke-dasharray", `${toPx(pathLength)} ${toPx(pathSpacing ?? 1 - Number(pathLength))}`);
+      });
+    }
+    return state.set(key, value, void 0, state.get("stroke-dasharray"));
+  }
+}
+const addSVGValue = (element, state, key, value) => {
+  if (key.startsWith("path")) {
+    return addSVGPathValue(element, state, key, value);
+  } else if (key.startsWith("attr")) {
+    return addAttrValue(element, state, convertAttrKey(key), value);
+  }
+  const handler = key in element.style ? addStyleValue : addAttrValue;
+  return handler(element, state, key, value);
+};
+const svgEffect = /* @__PURE__ */ createSelectorEffect(
+  /* @__PURE__ */ createEffect(addSVGValue)
+);
+function convertAttrKey(key) {
+  return key.replace(/^attr([A-Z])/, (_, firstChar) => firstChar.toLowerCase());
 }
 const { schedule: microtask, cancel: cancelMicrotask } = /* @__PURE__ */ createRenderBatcher(queueMicrotask, false);
 const isDragging = {
@@ -3144,6 +3238,97 @@ function getComputedStyle$2(element, name) {
   const computedStyle = window.getComputedStyle(element);
   return isCSSVar(name) ? computedStyle.getPropertyValue(name) : computedStyle[name];
 }
+function isSVGElement$1(element) {
+  return isObject(element) && "ownerSVGElement" in element;
+}
+const resizeHandlers = /* @__PURE__ */ new WeakMap();
+let observer;
+const getSize = (borderBoxAxis, svgAxis, htmlAxis) => (target, borderBoxSize) => {
+  if (borderBoxSize && borderBoxSize[0]) {
+    return borderBoxSize[0][borderBoxAxis + "Size"];
+  } else if (isSVGElement$1(target) && "getBBox" in target) {
+    return target.getBBox()[svgAxis];
+  } else {
+    return target[htmlAxis];
+  }
+};
+const getWidth = /* @__PURE__ */ getSize("inline", "width", "offsetWidth");
+const getHeight = /* @__PURE__ */ getSize("block", "height", "offsetHeight");
+function notifyTarget({ target, borderBoxSize }) {
+  var _a;
+  (_a = resizeHandlers.get(target)) == null ? void 0 : _a.forEach((handler) => {
+    handler(target, {
+      get width() {
+        return getWidth(target, borderBoxSize);
+      },
+      get height() {
+        return getHeight(target, borderBoxSize);
+      }
+    });
+  });
+}
+function notifyAll(entries) {
+  entries.forEach(notifyTarget);
+}
+function createResizeObserver() {
+  if (typeof ResizeObserver === "undefined")
+    return;
+  observer = new ResizeObserver(notifyAll);
+}
+function resizeElement(target, handler) {
+  if (!observer)
+    createResizeObserver();
+  const elements = resolveElements(target);
+  elements.forEach((element) => {
+    let elementHandlers = resizeHandlers.get(element);
+    if (!elementHandlers) {
+      elementHandlers = /* @__PURE__ */ new Set();
+      resizeHandlers.set(element, elementHandlers);
+    }
+    elementHandlers.add(handler);
+    observer == null ? void 0 : observer.observe(element);
+  });
+  return () => {
+    elements.forEach((element) => {
+      const elementHandlers = resizeHandlers.get(element);
+      elementHandlers == null ? void 0 : elementHandlers.delete(handler);
+      if (!(elementHandlers == null ? void 0 : elementHandlers.size)) {
+        observer == null ? void 0 : observer.unobserve(element);
+      }
+    });
+  };
+}
+const windowCallbacks = /* @__PURE__ */ new Set();
+let windowResizeHandler;
+function createWindowResizeHandler() {
+  windowResizeHandler = () => {
+    const info = {
+      get width() {
+        return window.innerWidth;
+      },
+      get height() {
+        return window.innerHeight;
+      }
+    };
+    windowCallbacks.forEach((callback) => callback(info));
+  };
+  window.addEventListener("resize", windowResizeHandler);
+}
+function resizeWindow(callback) {
+  windowCallbacks.add(callback);
+  if (!windowResizeHandler)
+    createWindowResizeHandler();
+  return () => {
+    windowCallbacks.delete(callback);
+    if (!windowCallbacks.size && typeof windowResizeHandler === "function") {
+      window.removeEventListener("resize", windowResizeHandler);
+      windowResizeHandler = void 0;
+    }
+  };
+}
+function resize(a, b) {
+  return typeof a === "function" ? resizeWindow(a) : resizeElement(a, b);
+}
 function observeTimeline(update, timeline) {
   let prevProgress;
   const onFrame = () => {
@@ -3266,9 +3451,6 @@ function recordStats() {
   frame.postRender(record, true);
   return reportStats;
 }
-function isSVGElement$1(element) {
-  return isObject(element) && "ownerSVGElement" in element;
-}
 function isSVGSVGElement(element) {
   return isSVGElement$1(element) && element.tagName === "svg";
 }
@@ -3661,7 +3843,7 @@ function addKeyframes(sequence, keyframes2, easing, offset, startTime, endTime)
   for (let i = 0; i < keyframes2.length; i++) {
     sequence.push({
       value: keyframes2[i],
-      at: mixNumber$2(startTime, endTime, offset[i]),
+      at: mixNumber$1(startTime, endTime, offset[i]),
       easing: getEasingForSegment(easing, i)
     });
   }
@@ -3786,7 +3968,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
       for (let i = 0; i < valueSequence.length; i++) {
         const { at, value, easing } = valueSequence[i];
         keyframes2.push(value);
-        valueOffset.push(/* @__PURE__ */ progress$1(0, totalDuration, at));
+        valueOffset.push(/* @__PURE__ */ progress(0, totalDuration, at));
         valueEasing.push(easing || "easeOut");
       }
       if (valueOffset[0] !== 0) {
@@ -4146,7 +4328,7 @@ function translateAxis$1(axis, distance2) {
   axis.max = axis.max + distance2;
 }
 function transformAxis(axis, axisTranslate, axisScale, boxScale, axisOrigin = 0.5) {
-  const originPoint = mixNumber$2(axis.min, axis.max, axisOrigin);
+  const originPoint = mixNumber$1(axis.min, axis.max, axisOrigin);
   applyAxisDelta(axis, axisTranslate, axisScale, originPoint, boxScale);
 }
 function transformBox(box, transform2) {
@@ -4822,9 +5004,9 @@ const camelKeys = {
 function buildSVGPath$1(attrs, length, spacing = 1, offset = 0, useDashCase = true) {
   attrs.pathLength = 1;
   const keys2 = useDashCase ? dashKeys : camelKeys;
-  attrs[keys2.offset] = px$1.transform(-offset);
-  const pathLength = px$1.transform(length);
-  const pathSpacing = px$1.transform(spacing);
+  attrs[keys2.offset] = px.transform(-offset);
+  const pathLength = px.transform(length);
+  const pathSpacing = px.transform(spacing);
   attrs[keys2.array] = `${pathLength} ${pathSpacing}`;
 }
 function buildSVGAttrs(state, {
@@ -5105,95 +5287,6 @@ const createScopedWaapiAnimate = (scope) => {
   return scopedAnimate;
 };
 const animateMini = /* @__PURE__ */ createScopedWaapiAnimate();
-const resizeHandlers = /* @__PURE__ */ new WeakMap();
-let observer;
-function getElementSize(target, borderBoxSize) {
-  if (borderBoxSize) {
-    const { inlineSize, blockSize } = borderBoxSize[0];
-    return { width: inlineSize, height: blockSize };
-  } else if (isSVGElement$1(target) && "getBBox" in target) {
-    return target.getBBox();
-  } else {
-    return {
-      width: target.offsetWidth,
-      height: target.offsetHeight
-    };
-  }
-}
-function notifyTarget({ target, contentRect, borderBoxSize }) {
-  var _a;
-  (_a = resizeHandlers.get(target)) == null ? void 0 : _a.forEach((handler) => {
-    handler({
-      target,
-      contentSize: contentRect,
-      get size() {
-        return getElementSize(target, borderBoxSize);
-      }
-    });
-  });
-}
-function notifyAll(entries) {
-  entries.forEach(notifyTarget);
-}
-function createResizeObserver() {
-  if (typeof ResizeObserver === "undefined")
-    return;
-  observer = new ResizeObserver(notifyAll);
-}
-function resizeElement(target, handler) {
-  if (!observer)
-    createResizeObserver();
-  const elements = resolveElements(target);
-  elements.forEach((element) => {
-    let elementHandlers = resizeHandlers.get(element);
-    if (!elementHandlers) {
-      elementHandlers = /* @__PURE__ */ new Set();
-      resizeHandlers.set(element, elementHandlers);
-    }
-    elementHandlers.add(handler);
-    observer == null ? void 0 : observer.observe(element);
-  });
-  return () => {
-    elements.forEach((element) => {
-      const elementHandlers = resizeHandlers.get(element);
-      elementHandlers == null ? void 0 : elementHandlers.delete(handler);
-      if (!(elementHandlers == null ? void 0 : elementHandlers.size)) {
-        observer == null ? void 0 : observer.unobserve(element);
-      }
-    });
-  };
-}
-const windowCallbacks = /* @__PURE__ */ new Set();
-let windowResizeHandler;
-function createWindowResizeHandler() {
-  windowResizeHandler = () => {
-    const size = {
-      width: window.innerWidth,
-      height: window.innerHeight
-    };
-    const info = {
-      target: window,
-      size,
-      contentSize: size
-    };
-    windowCallbacks.forEach((callback) => callback(info));
-  };
-  window.addEventListener("resize", windowResizeHandler);
-}
-function resizeWindow(callback) {
-  windowCallbacks.add(callback);
-  if (!windowResizeHandler)
-    createWindowResizeHandler();
-  return () => {
-    windowCallbacks.delete(callback);
-    if (!windowCallbacks.size && windowResizeHandler) {
-      windowResizeHandler = void 0;
-    }
-  };
-}
-function resize(a, b) {
-  return typeof a === "function" ? resizeWindow(a) : resizeElement(a, b);
-}
 const maxElapsed = 50;
 const createAxisInfo = () => ({
   current: 0,
@@ -5230,7 +5323,7 @@ function updateAxisInfo(element, axisName, info, time2) {
   axis.offset.length = 0;
   axis.offset[0] = 0;
   axis.offset[1] = axis.scrollLength;
-  axis.progress = /* @__PURE__ */ progress$1(0, axis.scrollLength, axis.current);
+  axis.progress = /* @__PURE__ */ progress(0, axis.scrollLength, axis.current);
   const elapsed = time2 - prevTime;
   axis.velocity = elapsed > maxElapsed ? 0 : velocityPerSecond(axis.current - prev, elapsed);
 }
@@ -5366,7 +5459,7 @@ function resolveOffsets(container, info, options) {
     info[axis].interpolate = interpolate(info[axis].offset, defaultOffset$1(offsetDefinition), { clamp: false });
     info[axis].interpolatorOffsets = [...info[axis].offset];
   }
-  info[axis].progress = clamp$1(0, 1, info[axis].interpolate(info[axis].current));
+  info[axis].progress = clamp(0, 1, info[axis].interpolate(info[axis].current));
 }
 function measure(container, target = container, info) {
   info.x.targetOffset = 0;
@@ -5391,8 +5484,8 @@ function measure(container, target = container, info) {
 }
 function createOnScrollHandler(element, onScroll, info, options = {}) {
   return {
-    measure: () => measure(element, options.target, info),
-    update: (time2) => {
+    measure: (time2) => {
+      measure(element, options.target, info);
       updateScrollInfo(element, info, time2);
       if (options.offset || options.target) {
         resolveOffsets(element, info, options);
@@ -5418,23 +5511,17 @@ function scrollInfo(onScroll, { container = document.scrollingElement, ...option
   containerHandlers.add(containerHandler);
   if (!scrollListeners.has(container)) {
     const measureAll = () => {
-      for (const handler of containerHandlers)
-        handler.measure();
-    };
-    const updateAll = () => {
       for (const handler of containerHandlers) {
-        handler.update(frameData.timestamp);
+        handler.measure(frameData.timestamp);
       }
+      frame.preUpdate(notifyAll2);
     };
     const notifyAll2 = () => {
-      for (const handler of containerHandlers)
+      for (const handler of containerHandlers) {
         handler.notify();
+      }
     };
-    const listener2 = () => {
-      frame.read(measureAll);
-      frame.read(updateAll);
-      frame.preUpdate(notifyAll2);
-    };
+    const listener2 = () => frame.read(measureAll);
     scrollListeners.set(container, listener2);
     const target = getEventTarget(container);
     window.addEventListener("resize", listener2, { passive: true });
@@ -6078,25 +6165,11 @@ function getGlobalLock(drag) {
 function calcLength$1(axis) {
   return axis.max - axis.min;
 }
-function clamp(min, max, v) {
-  if (v > max)
-    return max;
-  if (v < min)
-    return min;
-  return v;
-}
-function mixNumber(from, to, progress2) {
-  return from + (to - from) * progress2;
-}
-function progress(from, to, value) {
-  const toFromDifference = to - from;
-  return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
-}
 function applyConstraints(point2, { min, max }, elastic) {
   if (min !== void 0 && point2 < min) {
-    point2 = elastic ? mixNumber(min, point2, elastic.min) : Math.max(point2, min);
+    point2 = elastic ? mixNumber$1(min, point2, elastic.min) : Math.max(point2, min);
   } else if (max !== void 0 && point2 > max) {
-    point2 = elastic ? mixNumber(max, point2, elastic.max) : Math.min(point2, max);
+    point2 = elastic ? mixNumber$1(max, point2, elastic.max) : Math.min(point2, max);
   }
   return point2;
 }
@@ -6162,9 +6235,9 @@ function calcOrigin(source, target) {
   const sourceLength = calcLength$1(source);
   const targetLength = calcLength$1(target);
   if (targetLength > sourceLength) {
-    origin = progress(target.min, target.max - sourceLength, source.min);
+    origin = /* @__PURE__ */ progress(target.min, target.max - sourceLength, source.min);
   } else if (sourceLength > targetLength) {
-    origin = progress(source.min, source.max - targetLength, target.min);
+    origin = /* @__PURE__ */ progress(source.min, source.max - targetLength, target.min);
   }
   return clamp(0, 1, origin);
 }
@@ -6321,15 +6394,6 @@ function createBox() {
 function eachAxis$1(callback) {
   return [callback("x"), callback("y")];
 }
-function createUnitType(unit) {
-  return {
-    test: (v) => typeof v === "string" && v.endsWith(unit) && v.split(" ").length === 1,
-    parse: parseFloat,
-    transform: (v) => `${v}${unit}`
-  };
-}
-const percent = /* @__PURE__ */ createUnitType("%");
-const px = /* @__PURE__ */ createUnitType("px");
 function isWillChangeMotionValue(value) {
   return Boolean(isMotionValue(value) && value.add);
 }
@@ -6684,7 +6748,7 @@ class VisualElementDragControls {
       const axisValue = this.getAxisMotionValue(axis);
       if (projection && projection.layout) {
         const { min, max } = projection.layout.layoutBox[axis];
-        axisValue.set(point2[axis] - mixNumber(min, max, 0.5));
+        axisValue.set(point2[axis] - mixNumber$1(min, max, 0.5));
       }
     });
   }
@@ -6722,7 +6786,7 @@ class VisualElementDragControls {
         return;
       const axisValue = this.getAxisMotionValue(axis);
       const { min, max } = this.constraints[axis];
-      axisValue.set(mixNumber(min, max, boxProgress[axis]));
+      axisValue.set(mixNumber$1(min, max, boxProgress[axis]));
     });
   }
   addListeners() {
@@ -6841,7 +6905,7 @@ const correctBorderRadius = {
     if (!node.target)
       return latest;
     if (typeof latest === "string") {
-      if (px$1.test(latest)) {
+      if (px.test(latest)) {
         latest = parseFloat(latest);
       } else {
         return latest;
@@ -6864,7 +6928,7 @@ const correctBoxShadow = {
     const yScale = projectionDelta.y.scale * treeScale.y;
     shadow[0 + offset] /= xScale;
     shadow[1 + offset] /= yScale;
-    const averageScale = mixNumber$2(xScale, yScale, 0.5);
+    const averageScale = mixNumber$1(xScale, yScale, 0.5);
     if (typeof shadow[2 + offset] === "number")
       shadow[2 + offset] /= averageScale;
     if (typeof shadow[3 + offset] === "number")
@@ -7502,13 +7566,13 @@ function resolveMotionValue(value) {
 const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
 const numBorders = borders.length;
 const asNumber = (value) => typeof value === "string" ? parseFloat(value) : value;
-const isPx = (value) => typeof value === "number" || px$1.test(value);
+const isPx = (value) => typeof value === "number" || px.test(value);
 function mixValues(target, follow, lead, progress2, shouldCrossfadeOpacity, isOnlyMember) {
   if (shouldCrossfadeOpacity) {
-    target.opacity = mixNumber$2(0, lead.opacity ?? 1, easeCrossfadeIn(progress2));
-    target.opacityExit = mixNumber$2(follow.opacity ?? 1, 0, easeCrossfadeOut(progress2));
+    target.opacity = mixNumber$1(0, lead.opacity ?? 1, easeCrossfadeIn(progress2));
+    target.opacityExit = mixNumber$1(follow.opacity ?? 1, 0, easeCrossfadeOut(progress2));
   } else if (isOnlyMember) {
-    target.opacity = mixNumber$2(follow.opacity ?? 1, lead.opacity ?? 1, progress2);
+    target.opacity = mixNumber$1(follow.opacity ?? 1, lead.opacity ?? 1, progress2);
   }
   for (let i = 0; i < numBorders; i++) {
     const borderLabel = `border${borders[i]}Radius`;
@@ -7520,8 +7584,8 @@ function mixValues(target, follow, lead, progress2, shouldCrossfadeOpacity, isOn
     leadRadius || (leadRadius = 0);
     const canMix = followRadius === 0 || leadRadius === 0 || isPx(followRadius) === isPx(leadRadius);
     if (canMix) {
-      target[borderLabel] = Math.max(mixNumber$2(asNumber(followRadius), asNumber(leadRadius), progress2), 0);
-      if (percent$1.test(leadRadius) || percent$1.test(followRadius)) {
+      target[borderLabel] = Math.max(mixNumber$1(asNumber(followRadius), asNumber(leadRadius), progress2), 0);
+      if (percent.test(leadRadius) || percent.test(followRadius)) {
         target[borderLabel] += "%";
       }
     } else {
@@ -7529,7 +7593,7 @@ function mixValues(target, follow, lead, progress2, shouldCrossfadeOpacity, isOn
     }
   }
   if (follow.rotate || lead.rotate) {
-    target.rotate = mixNumber$2(follow.rotate || 0, lead.rotate || 0, progress2);
+    target.rotate = mixNumber$1(follow.rotate || 0, lead.rotate || 0, progress2);
   }
 }
 function getRadius(values, radiusName) {
@@ -7543,7 +7607,7 @@ function compress(min, max, easing) {
       return 0;
     if (p > max)
       return 1;
-    return easing(/* @__PURE__ */ progress$1(min, max, p));
+    return easing(/* @__PURE__ */ progress(min, max, p));
   };
 }
 function copyAxisInto(axis, originAxis) {
@@ -7574,9 +7638,9 @@ function isNear(value, target, maxDistance) {
 }
 function calcAxisDelta(delta, source, target, origin = 0.5) {
   delta.origin = origin;
-  delta.originPoint = mixNumber$2(source.min, source.max, delta.origin);
+  delta.originPoint = mixNumber$1(source.min, source.max, delta.origin);
   delta.scale = calcLength(target) / calcLength(source);
-  delta.translate = mixNumber$2(target.min, target.max, delta.origin) - delta.originPoint;
+  delta.translate = mixNumber$1(target.min, target.max, delta.origin) - delta.originPoint;
   if (delta.scale >= SCALE_MIN && delta.scale <= SCALE_MAX || isNaN(delta.scale)) {
     delta.scale = 1;
   }
@@ -7613,14 +7677,14 @@ function removePointDelta(point2, translate, scale2, originPoint, boxScale) {
   return point2;
 }
 function removeAxisDelta(axis, translate = 0, scale2 = 1, origin = 0.5, boxScale, originAxis = axis, sourceAxis = axis) {
-  if (percent$1.test(translate)) {
+  if (percent.test(translate)) {
     translate = parseFloat(translate);
-    const relativeProgress = mixNumber$2(sourceAxis.min, sourceAxis.max, translate / 100);
+    const relativeProgress = mixNumber$1(sourceAxis.min, sourceAxis.max, translate / 100);
     translate = relativeProgress - sourceAxis.min;
   }
   if (typeof translate !== "number")
     return;
-  let originPoint = mixNumber$2(originAxis.min, originAxis.max, origin);
+  let originPoint = mixNumber$1(originAxis.min, originAxis.max, origin);
   if (axis === originAxis)
     originPoint -= translate;
   axis.min = removePointDelta(axis.min, translate, scale2, originPoint, boxScale);
@@ -8049,7 +8113,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       this.nodes.forEach(notifyLayoutUpdate);
       this.clearAllSnapshots();
       const now2 = time.now();
-      frameData.delta = clamp$1(0, 1e3 / 60, now2 - frameData.timestamp);
+      frameData.delta = clamp(0, 1e3 / 60, now2 - frameData.timestamp);
       frameData.timestamp = now2;
       frameData.isProcessing = true;
       frameSteps.update.process(frameData);
@@ -8464,8 +8528,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
     startAnimation(options) {
       var _a, _b, _c;
       this.notifyListeners("animationStart");
-      (_a = this.currentAnimation) == null ? void 0 : _a.stop(false);
-      (_c = (_b = this.resumingFrom) == null ? void 0 : _b.currentAnimation) == null ? void 0 : _c.stop(false);
+      (_a = this.currentAnimation) == null ? void 0 : _a.stop();
+      (_c = (_b = this.resumingFrom) == null ? void 0 : _b.currentAnimation) == null ? void 0 : _c.stop();
       if (this.pendingAnimation) {
         cancelFrame(this.pendingAnimation);
         this.pendingAnimation = void 0;
@@ -8476,6 +8540,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         this.motionValue || (this.motionValue = motionValue(0));
         this.currentAnimation = animateSingleValue(this.motionValue, [0, 1e3], {
           ...options,
+          velocity: 0,
           isSync: true,
           onUpdate: (latest) => {
             this.mixTargetDelta(latest);
@@ -8509,7 +8574,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
     finishAnimation() {
       if (this.currentAnimation) {
         this.mixTargetDelta && this.mixTargetDelta(animationTarget);
-        this.currentAnimation.stop(false);
+        this.currentAnimation.stop();
       }
       this.completeAnimation();
     }
@@ -8682,7 +8747,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
     resetTree() {
       this.root.nodes.forEach((node) => {
         var _a;
-        return (_a = node.currentAnimation) == null ? void 0 : _a.stop(false);
+        return (_a = node.currentAnimation) == null ? void 0 : _a.stop();
       });
       this.root.nodes.forEach(clearMeasurements);
       this.root.sharedNodes.clear();
@@ -8810,14 +8875,14 @@ function removeLeadSnapshots(stack) {
   stack.removeLeadSnapshot();
 }
 function mixAxisDelta(output, delta, p) {
-  output.translate = mixNumber$2(delta.translate, 0, p);
-  output.scale = mixNumber$2(delta.scale, 1, p);
+  output.translate = mixNumber$1(delta.translate, 0, p);
+  output.scale = mixNumber$1(delta.scale, 1, p);
   output.origin = delta.origin;
   output.originPoint = delta.originPoint;
 }
 function mixAxis(output, from, to, p) {
-  output.min = mixNumber$2(from.min, to.min, p);
-  output.max = mixNumber$2(from.max, to.max, p);
+  output.min = mixNumber$1(from.min, to.min, p);
+  output.max = mixNumber$1(from.max, to.max, p);
 }
 function mixBox(output, from, to, p) {
   mixAxis(output.x, from.x, to.x, p);
@@ -9652,7 +9717,7 @@ function checkReorder(order2, value, offset, velocity) {
     return order2;
   const item = order2[index];
   const nextLayout = nextItem.layout;
-  const nextItemCenter = mixNumber(nextLayout.min, nextLayout.max, 0.5);
+  const nextItemCenter = mixNumber$1(nextLayout.min, nextLayout.max, 0.5);
   if (nextOffset === 1 && item.layout.max + offset > nextItemCenter || nextOffset === -1 && item.layout.min + offset < nextItemCenter) {
     return moveItem(order2, index, index + nextOffset);
   }
@@ -9827,18 +9892,19 @@ function useCombineMotionValues(combineValues) {
   return {
     subscribe,
     unsubscribe,
-    value
+    value,
+    updateValue
   };
 }
 function useComputed(computed) {
   collectMotionValues.current = [];
-  const { value, subscribe, unsubscribe } = useCombineMotionValues(computed);
+  const { value, subscribe, unsubscribe, updateValue } = useCombineMotionValues(computed);
   subscribe(collectMotionValues.current);
   collectMotionValues.current = void 0;
-  vue.onBeforeUpdate(() => {
+  vue.watchEffect(() => {
     unsubscribe();
     collectMotionValues.current = [];
-    computed();
+    updateValue();
     subscribe(collectMotionValues.current);
     collectMotionValues.current = void 0;
   });
@@ -10495,7 +10561,9 @@ exports.SubscriptionManager = SubscriptionManager;
 exports.ViewTransitionBuilder = ViewTransitionBuilder;
 exports.acceleratedValues = acceleratedValues;
 exports.activeAnimations = activeAnimations;
+exports.addAttrValue = addAttrValue;
 exports.addScaleCorrector = addScaleCorrector;
+exports.addStyleValue = addStyleValue;
 exports.addUniqueItem = addUniqueItem;
 exports.alpha = alpha;
 exports.analyseComplexValue = analyseComplexValue;
@@ -10507,6 +10575,7 @@ exports.animationMapKey = animationMapKey;
 exports.anticipate = anticipate;
 exports.applyPxDefaults = applyPxDefaults;
 exports.attachSpring = attachSpring;
+exports.attrEffect = attrEffect;
 exports.backIn = backIn;
 exports.backInOut = backInOut;
 exports.backOut = backOut;
@@ -10517,7 +10586,7 @@ exports.cancelSync = cancelSync;
 exports.circIn = circIn;
 exports.circInOut = circInOut;
 exports.circOut = circOut;
-exports.clamp = clamp$1;
+exports.clamp = clamp;
 exports.collectMotionValues = collectMotionValues;
 exports.color = color;
 exports.complex = complex;
@@ -10605,7 +10674,7 @@ exports.mixColor = mixColor;
 exports.mixComplex = mixComplex;
 exports.mixImmediate = mixImmediate;
 exports.mixLinearColor = mixLinearColor;
-exports.mixNumber = mixNumber$2;
+exports.mixNumber = mixNumber$1;
 exports.mixObject = mixObject;
 exports.mixVisibility = mixVisibility;
 exports.motion = motion;
@@ -10618,19 +10687,21 @@ exports.numberValueTypes = numberValueTypes;
 exports.observeTimeline = observeTimeline;
 exports.parseCSSVariable = parseCSSVariable;
 exports.parseValueFromTransform = parseValueFromTransform;
-exports.percent = percent$1;
+exports.percent = percent;
 exports.pipe = pipe;
 exports.positionalKeys = positionalKeys;
 exports.press = press;
-exports.progress = progress$1;
+exports.progress = progress;
 exports.progressPercentage = progressPercentage;
+exports.propEffect = propEffect;
 exports.provideLayoutGroup = provideLayoutGroup;
 exports.provideMotion = provideMotion;
 exports.provideMotionConfig = provideMotionConfig;
-exports.px = px$1;
+exports.px = px;
 exports.readTransformValue = readTransformValue;
 exports.recordStats = recordStats;
 exports.removeItem = removeItem;
+exports.resize = resize;
 exports.resolveElements = resolveElements;
 exports.reverseEasing = reverseEasing;
 exports.rgbUnit = rgbUnit;
@@ -10654,6 +10725,7 @@ exports.supportsFlags = supportsFlags;
 exports.supportsLinearEasing = supportsLinearEasing;
 exports.supportsPartialKeyframes = supportsPartialKeyframes;
 exports.supportsScrollTimeline = supportsScrollTimeline;
+exports.svgEffect = svgEffect;
 exports.sync = sync;
 exports.testValueType = testValueType;
 exports.time = time;