motion-v 1.0.0-alpha.4 → 1.0.0-beta.1

package/dist/cjs/index.js

@@ -2,7 +2,6 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const vue = require("vue");
 const heyListen = require("hey-listen");
-const motionDom = require("motion-dom");
 const core = require("@vueuse/core");
 function addUniqueItem(arr, item) {
   if (arr.indexOf(item) === -1)
@@ -28,6 +27,10 @@ if (process.env.NODE_ENV !== "production") {
     }
   };
 }
+const MotionGlobalConfig = {
+  skipAnimations: false,
+  useManualTiming: false
+};
 // @__NO_SIDE_EFFECTS__
 function memo(callback) {
   let result;
@@ -81,6 +84,858 @@ function warnOnce(condition, message, element) {
   console.warn(message);
   warned.add(message);
 }
+const supportsScrollTimeline = /* @__PURE__ */ memo(() => window.ScrollTimeline !== void 0);
+class BaseGroupPlaybackControls {
+  constructor(animations) {
+    this.stop = () => this.runAll("stop");
+    this.animations = animations.filter(Boolean);
+  }
+  get finished() {
+    return Promise.all(this.animations.map((animation) => "finished" in animation ? animation.finished : animation));
+  }
+  /**
+   * TODO: Filter out cancelled or stopped animations before returning
+   */
+  getAll(propName) {
+    return this.animations[0][propName];
+  }
+  setAll(propName, newValue) {
+    for (let i = 0; i < this.animations.length; i++) {
+      this.animations[i][propName] = newValue;
+    }
+  }
+  attachTimeline(timeline, fallback) {
+    const subscriptions = this.animations.map((animation) => {
+      if (supportsScrollTimeline() && animation.attachTimeline) {
+        return animation.attachTimeline(timeline);
+      } else if (typeof fallback === "function") {
+        return fallback(animation);
+      }
+    });
+    return () => {
+      subscriptions.forEach((cancel, i) => {
+        cancel && cancel();
+        this.animations[i].stop();
+      });
+    };
+  }
+  get time() {
+    return this.getAll("time");
+  }
+  set time(time2) {
+    this.setAll("time", time2);
+  }
+  get speed() {
+    return this.getAll("speed");
+  }
+  set speed(speed) {
+    this.setAll("speed", speed);
+  }
+  get startTime() {
+    return this.getAll("startTime");
+  }
+  get duration() {
+    let max = 0;
+    for (let i = 0; i < this.animations.length; i++) {
+      max = Math.max(max, this.animations[i].duration);
+    }
+    return max;
+  }
+  runAll(methodName) {
+    this.animations.forEach((controls) => controls[methodName]());
+  }
+  flatten() {
+    this.runAll("flatten");
+  }
+  play() {
+    this.runAll("play");
+  }
+  pause() {
+    this.runAll("pause");
+  }
+  cancel() {
+    this.runAll("cancel");
+  }
+  complete() {
+    this.runAll("complete");
+  }
+}
+class GroupPlaybackControls extends BaseGroupPlaybackControls {
+  then(onResolve, onReject) {
+    return Promise.all(this.animations).then(onResolve).catch(onReject);
+  }
+}
+function getValueTransition$1(transition, key) {
+  return transition ? transition[key] || transition["default"] || transition : void 0;
+}
+const maxGeneratorDuration = 2e4;
+function calcGeneratorDuration(generator) {
+  let duration = 0;
+  const timeStep = 50;
+  let state2 = generator.next(duration);
+  while (!state2.done && duration < maxGeneratorDuration) {
+    duration += timeStep;
+    state2 = generator.next(duration);
+  }
+  return duration >= maxGeneratorDuration ? Infinity : duration;
+}
+function createGeneratorEasing(options, scale2 = 100, createGenerator) {
+  const generator = createGenerator({ ...options, keyframes: [0, scale2] });
+  const duration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
+  return {
+    type: "keyframes",
+    ease: (progress2) => {
+      return generator.next(duration * progress2).value / scale2;
+    },
+    duration: /* @__PURE__ */ millisecondsToSeconds$1(duration)
+  };
+}
+function isGenerator(type) {
+  return typeof type === "function";
+}
+function attachTimeline(animation, timeline) {
+  animation.timeline = timeline;
+  animation.onfinish = null;
+}
+class NativeAnimationControls {
+  constructor(animation) {
+    this.animation = animation;
+  }
+  get duration() {
+    var _a, _b, _c;
+    const durationInMs = ((_b = (_a = this.animation) === null || _a === void 0 ? void 0 : _a.effect) === null || _b === void 0 ? void 0 : _b.getComputedTiming().duration) || ((_c = this.options) === null || _c === void 0 ? void 0 : _c.duration) || 300;
+    return /* @__PURE__ */ millisecondsToSeconds$1(Number(durationInMs));
+  }
+  get time() {
+    var _a;
+    if (this.animation) {
+      return /* @__PURE__ */ millisecondsToSeconds$1(((_a = this.animation) === null || _a === void 0 ? void 0 : _a.currentTime) || 0);
+    }
+    return 0;
+  }
+  set time(newTime) {
+    if (this.animation) {
+      this.animation.currentTime = /* @__PURE__ */ secondsToMilliseconds$1(newTime);
+    }
+  }
+  get speed() {
+    return this.animation ? this.animation.playbackRate : 1;
+  }
+  set speed(newSpeed) {
+    if (this.animation) {
+      this.animation.playbackRate = newSpeed;
+    }
+  }
+  get state() {
+    return this.animation ? this.animation.playState : "finished";
+  }
+  get startTime() {
+    return this.animation ? this.animation.startTime : null;
+  }
+  get finished() {
+    return this.animation ? this.animation.finished : Promise.resolve();
+  }
+  play() {
+    this.animation && this.animation.play();
+  }
+  pause() {
+    this.animation && this.animation.pause();
+  }
+  stop() {
+    if (!this.animation || this.state === "idle" || this.state === "finished") {
+      return;
+    }
+    if (this.animation.commitStyles) {
+      this.animation.commitStyles();
+    }
+    this.cancel();
+  }
+  flatten() {
+    var _a, _b;
+    if (!this.animation || !((_a = this.options) === null || _a === void 0 ? void 0 : _a.allowFlatten))
+      return;
+    (_b = this.animation.effect) === null || _b === void 0 ? void 0 : _b.updateTiming({ easing: "linear" });
+  }
+  attachTimeline(timeline) {
+    if (this.animation)
+      attachTimeline(this.animation, timeline);
+    return noop;
+  }
+  complete() {
+    this.animation && this.animation.finish();
+  }
+  cancel() {
+    try {
+      this.animation && this.animation.cancel();
+    } catch (e) {
+    }
+  }
+}
+const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
+const supportsFlags = {
+  linearEasing: void 0
+};
+function memoSupports(callback, supportsFlag) {
+  const memoized = /* @__PURE__ */ memo(callback);
+  return () => {
+    var _a;
+    return (_a = supportsFlags[supportsFlag]) !== null && _a !== void 0 ? _a : memoized();
+  };
+}
+const supportsLinearEasing = /* @__PURE__ */ memoSupports(() => {
+  try {
+    document.createElement("div").animate({ opacity: 0 }, { easing: "linear(0, 1)" });
+  } catch (e) {
+    return false;
+  }
+  return true;
+}, "linearEasing");
+const generateLinearEasing = (easing, duration, resolution = 10) => {
+  let points = "";
+  const numPoints = Math.max(Math.round(duration / resolution), 2);
+  for (let i = 0; i < numPoints; i++) {
+    points += easing(/* @__PURE__ */ progress$1(0, numPoints - 1, i)) + ", ";
+  }
+  return `linear(${points.substring(0, points.length - 2)})`;
+};
+function isWaapiSupportedEasing(easing) {
+  return Boolean(typeof easing === "function" && supportsLinearEasing() || !easing || typeof easing === "string" && (easing in supportedWaapiEasing || supportsLinearEasing()) || isBezierDefinition(easing) || Array.isArray(easing) && easing.every(isWaapiSupportedEasing));
+}
+const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`;
+const supportedWaapiEasing = {
+  linear: "linear",
+  ease: "ease",
+  easeIn: "ease-in",
+  easeOut: "ease-out",
+  easeInOut: "ease-in-out",
+  circIn: /* @__PURE__ */ cubicBezierAsString([0, 0.65, 0.55, 1]),
+  circOut: /* @__PURE__ */ cubicBezierAsString([0.55, 0, 1, 0.45]),
+  backIn: /* @__PURE__ */ cubicBezierAsString([0.31, 0.01, 0.66, -0.59]),
+  backOut: /* @__PURE__ */ cubicBezierAsString([0.33, 1.53, 0.69, 0.99])
+};
+function mapEasingToNativeEasing(easing, duration) {
+  if (!easing) {
+    return void 0;
+  } else if (typeof easing === "function" && supportsLinearEasing()) {
+    return generateLinearEasing(easing, duration);
+  } else if (isBezierDefinition(easing)) {
+    return cubicBezierAsString(easing);
+  } else if (Array.isArray(easing)) {
+    return easing.map((segmentEasing) => mapEasingToNativeEasing(segmentEasing, duration) || supportedWaapiEasing.easeOut);
+  } else {
+    return supportedWaapiEasing[easing];
+  }
+}
+const stepsOrder = [
+  "read",
+  // Read
+  "resolveKeyframes",
+  // Write/Read/Write/Read
+  "update",
+  // Compute
+  "preRender",
+  // Compute
+  "render",
+  // Write
+  "postRender"
+  // Compute
+];
+const statsBuffer = {
+  value: null,
+  addProjectionMetrics: null
+};
+function createRenderStep(runNextFrame, stepName) {
+  let thisFrame = /* @__PURE__ */ new Set();
+  let nextFrame = /* @__PURE__ */ new Set();
+  let isProcessing = false;
+  let flushNextFrame = false;
+  const toKeepAlive = /* @__PURE__ */ new WeakSet();
+  let latestFrameData = {
+    delta: 0,
+    timestamp: 0,
+    isProcessing: false
+  };
+  let numCalls = 0;
+  function triggerCallback(callback) {
+    if (toKeepAlive.has(callback)) {
+      step.schedule(callback);
+      runNextFrame();
+    }
+    numCalls++;
+    callback(latestFrameData);
+  }
+  const step = {
+    /**
+     * Schedule a process to run on the next frame.
+     */
+    schedule: (callback, keepAlive = false, immediate = false) => {
+      const addToCurrentFrame = immediate && isProcessing;
+      const queue = addToCurrentFrame ? thisFrame : nextFrame;
+      if (keepAlive)
+        toKeepAlive.add(callback);
+      if (!queue.has(callback))
+        queue.add(callback);
+      return callback;
+    },
+    /**
+     * Cancel the provided callback from running on the next frame.
+     */
+    cancel: (callback) => {
+      nextFrame.delete(callback);
+      toKeepAlive.delete(callback);
+    },
+    /**
+     * Execute all schedule callbacks.
+     */
+    process: (frameData2) => {
+      latestFrameData = frameData2;
+      if (isProcessing) {
+        flushNextFrame = true;
+        return;
+      }
+      isProcessing = true;
+      [thisFrame, nextFrame] = [nextFrame, thisFrame];
+      thisFrame.forEach(triggerCallback);
+      if (stepName && statsBuffer.value) {
+        statsBuffer.value.frameloop[stepName].push(numCalls);
+      }
+      numCalls = 0;
+      thisFrame.clear();
+      isProcessing = false;
+      if (flushNextFrame) {
+        flushNextFrame = false;
+        step.process(frameData2);
+      }
+    }
+  };
+  return step;
+}
+const maxElapsed$1 = 40;
+function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
+  let runNextFrame = false;
+  let useDefaultElapsed = true;
+  const state2 = {
+    delta: 0,
+    timestamp: 0,
+    isProcessing: false
+  };
+  const flagRunNextFrame = () => runNextFrame = true;
+  const steps2 = stepsOrder.reduce((acc, key) => {
+    acc[key] = createRenderStep(flagRunNextFrame, allowKeepAlive ? key : void 0);
+    return acc;
+  }, {});
+  const { read, resolveKeyframes, update, preRender, render, postRender } = steps2;
+  const processBatch = () => {
+    const timestamp = performance.now();
+    runNextFrame = false;
+    {
+      state2.delta = useDefaultElapsed ? 1e3 / 60 : Math.max(Math.min(timestamp - state2.timestamp, maxElapsed$1), 1);
+    }
+    state2.timestamp = timestamp;
+    state2.isProcessing = true;
+    read.process(state2);
+    resolveKeyframes.process(state2);
+    update.process(state2);
+    preRender.process(state2);
+    render.process(state2);
+    postRender.process(state2);
+    state2.isProcessing = false;
+    if (runNextFrame && allowKeepAlive) {
+      useDefaultElapsed = false;
+      scheduleNextBatch(processBatch);
+    }
+  };
+  const wake = () => {
+    runNextFrame = true;
+    useDefaultElapsed = true;
+    if (!state2.isProcessing) {
+      scheduleNextBatch(processBatch);
+    }
+  };
+  const schedule = stepsOrder.reduce((acc, key) => {
+    const step = steps2[key];
+    acc[key] = (process2, keepAlive = false, immediate = false) => {
+      if (!runNextFrame)
+        wake();
+      return step.schedule(process2, keepAlive, immediate);
+    };
+    return acc;
+  }, {});
+  const cancel = (process2) => {
+    for (let i = 0; i < stepsOrder.length; i++) {
+      steps2[stepsOrder[i]].cancel(process2);
+    }
+  };
+  return { schedule, cancel, state: state2, steps: steps2 };
+}
+const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps } = /* @__PURE__ */ createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
+const { schedule: microtask, cancel: cancelMicrotask } = /* @__PURE__ */ createRenderBatcher(queueMicrotask, false);
+let now;
+function clearTime() {
+  now = void 0;
+}
+const time = {
+  now: () => {
+    if (now === void 0) {
+      time.set(frameData.isProcessing || MotionGlobalConfig.useManualTiming ? frameData.timestamp : performance.now());
+    }
+    return now;
+  },
+  set: (newTime) => {
+    now = newTime;
+    queueMicrotask(clearTime);
+  }
+};
+const isDragging = {
+  x: false,
+  y: false
+};
+function isDragActive() {
+  return isDragging.y;
+}
+function resolveElements(elementOrSelector, scope, selectorCache) {
+  var _a;
+  if (elementOrSelector instanceof EventTarget) {
+    return [elementOrSelector];
+  } else if (typeof elementOrSelector === "string") {
+    let root = document;
+    if (scope) {
+      root = scope.current;
+    }
+    const elements = (_a = selectorCache === null || selectorCache === void 0 ? void 0 : selectorCache[elementOrSelector]) !== null && _a !== void 0 ? _a : root.querySelectorAll(elementOrSelector);
+    return elements ? Array.from(elements) : [];
+  }
+  return Array.from(elementOrSelector);
+}
+function setupGesture(elementOrSelector, options) {
+  const elements = resolveElements(elementOrSelector);
+  const gestureAbortController = new AbortController();
+  const eventOptions = {
+    passive: true,
+    ...options,
+    signal: gestureAbortController.signal
+  };
+  const cancel = () => gestureAbortController.abort();
+  return [elements, eventOptions, cancel];
+}
+function isValidHover(event) {
+  return !(event.pointerType === "touch" || isDragActive());
+}
+function hover(elementOrSelector, onHoverStart, options = {}) {
+  const [elements, eventOptions, cancel] = setupGesture(elementOrSelector, options);
+  const onPointerEnter = (enterEvent) => {
+    if (!isValidHover(enterEvent))
+      return;
+    const { target } = enterEvent;
+    const onHoverEnd = onHoverStart(target, enterEvent);
+    if (typeof onHoverEnd !== "function" || !target)
+      return;
+    const onPointerLeave = (leaveEvent) => {
+      if (!isValidHover(leaveEvent))
+        return;
+      onHoverEnd(leaveEvent);
+      target.removeEventListener("pointerleave", onPointerLeave);
+    };
+    target.addEventListener("pointerleave", onPointerLeave, eventOptions);
+  };
+  elements.forEach((element) => {
+    element.addEventListener("pointerenter", onPointerEnter, eventOptions);
+  });
+  return cancel;
+}
+function capturePointer(event, action) {
+  const actionName = `${action}PointerCapture`;
+  if (event.target instanceof Element && actionName in event.target && event.pointerId !== void 0) {
+    try {
+      event.target[actionName](event.pointerId);
+    } catch (e) {
+    }
+  }
+}
+const isNodeOrChild = (parent, child) => {
+  if (!child) {
+    return false;
+  } else if (parent === child) {
+    return true;
+  } else {
+    return isNodeOrChild(parent, child.parentElement);
+  }
+};
+const isPrimaryPointer$1 = (event) => {
+  if (event.pointerType === "mouse") {
+    return typeof event.button !== "number" || event.button <= 0;
+  } else {
+    return event.isPrimary !== false;
+  }
+};
+const focusableElements = /* @__PURE__ */ new Set([
+  "BUTTON",
+  "INPUT",
+  "SELECT",
+  "TEXTAREA",
+  "A"
+]);
+function isElementKeyboardAccessible(element) {
+  return focusableElements.has(element.tagName) || element.tabIndex !== -1;
+}
+const isPressing = /* @__PURE__ */ new WeakSet();
+function filterEvents(callback) {
+  return (event) => {
+    if (event.key !== "Enter")
+      return;
+    callback(event);
+  };
+}
+function firePointerEvent(target, type) {
+  target.dispatchEvent(new PointerEvent("pointer" + type, { isPrimary: true, bubbles: true }));
+}
+const enableKeyboardPress = (focusEvent, eventOptions) => {
+  const element = focusEvent.currentTarget;
+  if (!element)
+    return;
+  const handleKeydown = filterEvents(() => {
+    if (isPressing.has(element))
+      return;
+    firePointerEvent(element, "down");
+    const handleKeyup = filterEvents(() => {
+      firePointerEvent(element, "up");
+    });
+    const handleBlur = () => firePointerEvent(element, "cancel");
+    element.addEventListener("keyup", handleKeyup, eventOptions);
+    element.addEventListener("blur", handleBlur, eventOptions);
+  });
+  element.addEventListener("keydown", handleKeydown, eventOptions);
+  element.addEventListener("blur", () => element.removeEventListener("keydown", handleKeydown), eventOptions);
+};
+function isValidPressEvent(event) {
+  return isPrimaryPointer$1(event) && !isDragActive();
+}
+function press(targetOrSelector, onPressStart, options = {}) {
+  const [targets, eventOptions, cancelEvents] = setupGesture(targetOrSelector, options);
+  const startPress = (startEvent) => {
+    const target = startEvent.currentTarget;
+    if (!target || !isValidPressEvent(startEvent) || isPressing.has(target))
+      return;
+    isPressing.add(target);
+    capturePointer(startEvent, "set");
+    const onPressEnd = onPressStart(target, startEvent);
+    const onPointerEnd = (endEvent, success) => {
+      target.removeEventListener("pointerup", onPointerUp);
+      target.removeEventListener("pointercancel", onPointerCancel);
+      capturePointer(endEvent, "release");
+      if (!isValidPressEvent(endEvent) || !isPressing.has(target)) {
+        return;
+      }
+      isPressing.delete(target);
+      if (typeof onPressEnd === "function") {
+        onPressEnd(endEvent, { success });
+      }
+    };
+    const onPointerUp = (upEvent) => {
+      const isOutside = !upEvent.isTrusted ? false : checkOutside(upEvent, target instanceof Element ? target.getBoundingClientRect() : {
+        left: 0,
+        top: 0,
+        right: window.innerWidth,
+        bottom: window.innerHeight
+      });
+      if (isOutside) {
+        onPointerEnd(upEvent, false);
+      } else {
+        onPointerEnd(upEvent, !(target instanceof Element) || isNodeOrChild(target, upEvent.target));
+      }
+    };
+    const onPointerCancel = (cancelEvent) => {
+      onPointerEnd(cancelEvent, false);
+    };
+    target.addEventListener("pointerup", onPointerUp, eventOptions);
+    target.addEventListener("pointercancel", onPointerCancel, eventOptions);
+    target.addEventListener("lostpointercapture", onPointerCancel, eventOptions);
+  };
+  targets.forEach((target) => {
+    target = options.useGlobalTarget ? window : target;
+    let canAddKeyboardAccessibility = false;
+    if (target instanceof HTMLElement) {
+      canAddKeyboardAccessibility = true;
+      if (!isElementKeyboardAccessible(target) && target.getAttribute("tabindex") === null) {
+        target.tabIndex = 0;
+      }
+    }
+    target.addEventListener("pointerdown", startPress, eventOptions);
+    if (canAddKeyboardAccessibility) {
+      target.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions), eventOptions);
+    }
+  });
+  return cancelEvents;
+}
+function checkOutside(event, rect) {
+  return event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom;
+}
+const MAX_VELOCITY_DELTA = 30;
+const isFloat = (value) => {
+  return !isNaN(parseFloat(value));
+};
+const collectMotionValues = {
+  current: void 0
+};
+class MotionValue {
+  /**
+   * @param init - The initiating value
+   * @param config - Optional configuration options
+   *
+   * -  `transformer`: A function to transform incoming values with.
+   */
+  constructor(init, options = {}) {
+    this.version = "12.5.0";
+    this.canTrackVelocity = null;
+    this.events = {};
+    this.updateAndNotify = (v, render = true) => {
+      const currentTime = time.now();
+      if (this.updatedAt !== currentTime) {
+        this.setPrevFrameValue();
+      }
+      this.prev = this.current;
+      this.setCurrent(v);
+      if (this.current !== this.prev && this.events.change) {
+        this.events.change.notify(this.current);
+      }
+      if (render && this.events.renderRequest) {
+        this.events.renderRequest.notify(this.current);
+      }
+    };
+    this.hasAnimated = false;
+    this.setCurrent(init);
+    this.owner = options.owner;
+  }
+  setCurrent(current) {
+    this.current = current;
+    this.updatedAt = time.now();
+    if (this.canTrackVelocity === null && current !== void 0) {
+      this.canTrackVelocity = isFloat(this.current);
+    }
+  }
+  setPrevFrameValue(prevFrameValue = this.current) {
+    this.prevFrameValue = prevFrameValue;
+    this.prevUpdatedAt = this.updatedAt;
+  }
+  /**
+   * Adds a function that will be notified when the `MotionValue` is updated.
+   *
+   * It returns a function that, when called, will cancel the subscription.
+   *
+   * When calling `onChange` inside a React component, it should be wrapped with the
+   * `useEffect` hook. As it returns an unsubscribe function, this should be returned
+   * from the `useEffect` function to ensure you don't add duplicate subscribers..
+   *
+   * ```jsx
+   * export const MyComponent = () => {
+   *   const x = useMotionValue(0)
+   *   const y = useMotionValue(0)
+   *   const opacity = useMotionValue(1)
+   *
+   *   useEffect(() => {
+   *     function updateOpacity() {
+   *       const maxXY = Math.max(x.get(), y.get())
+   *       const newOpacity = transform(maxXY, [0, 100], [1, 0])
+   *       opacity.set(newOpacity)
+   *     }
+   *
+   *     const unsubscribeX = x.on("change", updateOpacity)
+   *     const unsubscribeY = y.on("change", updateOpacity)
+   *
+   *     return () => {
+   *       unsubscribeX()
+   *       unsubscribeY()
+   *     }
+   *   }, [])
+   *
+   *   return <motion.div style={{ x }} />
+   * }
+   * ```
+   *
+   * @param subscriber - A function that receives the latest value.
+   * @returns A function that, when called, will cancel this subscription.
+   *
+   * @deprecated
+   */
+  onChange(subscription) {
+    if (process.env.NODE_ENV !== "production") {
+      warnOnce(false, `value.onChange(callback) is deprecated. Switch to value.on("change", callback).`);
+    }
+    return this.on("change", subscription);
+  }
+  on(eventName, callback) {
+    if (!this.events[eventName]) {
+      this.events[eventName] = new SubscriptionManager();
+    }
+    const unsubscribe = this.events[eventName].add(callback);
+    if (eventName === "change") {
+      return () => {
+        unsubscribe();
+        frame.read(() => {
+          if (!this.events.change.getSize()) {
+            this.stop();
+          }
+        });
+      };
+    }
+    return unsubscribe;
+  }
+  clearListeners() {
+    for (const eventManagers in this.events) {
+      this.events[eventManagers].clear();
+    }
+  }
+  /**
+   * Attaches a passive effect to the `MotionValue`.
+   */
+  attach(passiveEffect, stopPassiveEffect) {
+    this.passiveEffect = passiveEffect;
+    this.stopPassiveEffect = stopPassiveEffect;
+  }
+  /**
+   * Sets the state of the `MotionValue`.
+   *
+   * @remarks
+   *
+   * ```jsx
+   * const x = useMotionValue(0)
+   * x.set(10)
+   * ```
+   *
+   * @param latest - Latest value to set.
+   * @param render - Whether to notify render subscribers. Defaults to `true`
+   *
+   * @public
+   */
+  set(v, render = true) {
+    if (!render || !this.passiveEffect) {
+      this.updateAndNotify(v, render);
+    } else {
+      this.passiveEffect(v, this.updateAndNotify);
+    }
+  }
+  setWithVelocity(prev, current, delta) {
+    this.set(current);
+    this.prev = void 0;
+    this.prevFrameValue = prev;
+    this.prevUpdatedAt = this.updatedAt - delta;
+  }
+  /**
+   * Set the state of the `MotionValue`, stopping any active animations,
+   * effects, and resets velocity to `0`.
+   */
+  jump(v, endAnimation = true) {
+    this.updateAndNotify(v);
+    this.prev = v;
+    this.prevUpdatedAt = this.prevFrameValue = void 0;
+    endAnimation && this.stop();
+    if (this.stopPassiveEffect)
+      this.stopPassiveEffect();
+  }
+  /**
+   * Returns the latest state of `MotionValue`
+   *
+   * @returns - The latest state of `MotionValue`
+   *
+   * @public
+   */
+  get() {
+    if (collectMotionValues.current) {
+      collectMotionValues.current.push(this);
+    }
+    return this.current;
+  }
+  /**
+   * @public
+   */
+  getPrevious() {
+    return this.prev;
+  }
+  /**
+   * Returns the latest velocity of `MotionValue`
+   *
+   * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
+   *
+   * @public
+   */
+  getVelocity() {
+    const currentTime = time.now();
+    if (!this.canTrackVelocity || this.prevFrameValue === void 0 || currentTime - this.updatedAt > MAX_VELOCITY_DELTA) {
+      return 0;
+    }
+    const delta = Math.min(this.updatedAt - this.prevUpdatedAt, MAX_VELOCITY_DELTA);
+    return velocityPerSecond(parseFloat(this.current) - parseFloat(this.prevFrameValue), delta);
+  }
+  /**
+   * Registers a new animation to control this `MotionValue`. Only one
+   * animation can drive a `MotionValue` at one time.
+   *
+   * ```jsx
+   * value.start()
+   * ```
+   *
+   * @param animation - A function that starts the provided animation
+   */
+  start(startAnimation) {
+    this.stop();
+    return new Promise((resolve) => {
+      this.hasAnimated = true;
+      this.animation = startAnimation(resolve);
+      if (this.events.animationStart) {
+        this.events.animationStart.notify();
+      }
+    }).then(() => {
+      if (this.events.animationComplete) {
+        this.events.animationComplete.notify();
+      }
+      this.clearAnimation();
+    });
+  }
+  /**
+   * Stop the currently active animation.
+   *
+   * @public
+   */
+  stop() {
+    if (this.animation) {
+      this.animation.stop();
+      if (this.events.animationCancel) {
+        this.events.animationCancel.notify();
+      }
+    }
+    this.clearAnimation();
+  }
+  /**
+   * Returns `true` if this value is currently animating.
+   *
+   * @public
+   */
+  isAnimating() {
+    return !!this.animation;
+  }
+  clearAnimation() {
+    delete this.animation;
+  }
+  /**
+   * Destroy and clean up subscribers to this `MotionValue`.
+   *
+   * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
+   * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
+   * created a `MotionValue` via the `motionValue` function.
+   *
+   * @public
+   */
+  destroy() {
+    this.clearListeners();
+    this.stop();
+    if (this.stopPassiveEffect) {
+      this.stopPassiveEffect();
+    }
+  }
+}
+function motionValue(init, options) {
+  return new MotionValue(init, options);
+}
 const clamp$1 = (min, max, v) => {
   if (v > max)
     return max;
@@ -285,8 +1140,8 @@ function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce
       return state2;
     },
     toString: () => {
-      const calculatedDuration = Math.min(motionDom.calcGeneratorDuration(generator), motionDom.maxGeneratorDuration);
-      const easing = motionDom.generateLinearEasing((progress2) => generator.next(calculatedDuration * progress2).value, calculatedDuration, 30);
+      const calculatedDuration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
+      const easing = generateLinearEasing((progress2) => generator.next(calculatedDuration * progress2).value, calculatedDuration, 30);
       return calculatedDuration + "ms " + easing;
     }
   };
@@ -323,7 +1178,7 @@ function isDOMKeyframes(keyframes2) {
 }
 function resolveSubjects(subject, keyframes2, scope, selectorCache) {
   if (typeof subject === "string" && isDOMKeyframes(keyframes2)) {
-    return motionDom.resolveElements(subject, scope, selectorCache);
+    return resolveElements(subject, scope, selectorCache);
   } else if (subject instanceof NodeList) {
     return Array.from(subject);
   } else if (Array.isArray(subject)) {
@@ -413,7 +1268,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
       let { ease: ease2 = defaultTransition.ease || "easeOut", duration } = valueTransition;
       const calculatedDelay = typeof delay2 === "function" ? delay2(elementIndex, numSubjects) : delay2;
       const numKeyframes = valueKeyframesAsList.length;
-      const createGenerator = motionDom.isGenerator(type) ? type : generators2 === null || generators2 === void 0 ? void 0 : generators2[type];
+      const createGenerator = isGenerator(type) ? type : generators2 === null || generators2 === void 0 ? void 0 : generators2[type];
       if (numKeyframes <= 2 && createGenerator) {
         let absoluteDelta = 100;
         if (numKeyframes === 2 && isNumberKeyframesArray(valueKeyframesAsList)) {
@@ -424,7 +1279,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
         if (duration !== void 0) {
           springTransition.duration = /* @__PURE__ */ secondsToMilliseconds$1(duration);
         }
-        const springEasing = motionDom.createGeneratorEasing(springTransition, absoluteDelta, createGenerator);
+        const springEasing = createGeneratorEasing(springTransition, absoluteDelta, createGenerator);
         ease2 = springEasing.ease;
         duration = springEasing.duration;
       }
@@ -606,7 +1461,7 @@ function setMotionValue(visualElement, key, value) {
   if (visualElement.hasValue(key)) {
     visualElement.getValue(key).set(value);
   } else {
-    visualElement.addValue(key, motionDom.motionValue(value));
+    visualElement.addValue(key, motionValue(value));
   }
 }
 function setTarget(visualElement, definition) {
@@ -1162,7 +2017,7 @@ function flushKeyframeResolvers() {
   measureAllKeyframes();
 }
 class KeyframeResolver {
-  constructor(unresolvedKeyframes, onComplete, name, motionValue, element, isAsync = false) {
+  constructor(unresolvedKeyframes, onComplete, name, motionValue2, element, isAsync = false) {
     this.isComplete = false;
     this.isAsync = false;
     this.needsMeasurement = false;
@@ -1170,7 +2025,7 @@ class KeyframeResolver {
     this.unresolvedKeyframes = [...unresolvedKeyframes];
     this.onComplete = onComplete;
     this.name = name;
-    this.motionValue = motionValue;
+    this.motionValue = motionValue2;
     this.element = element;
     this.isAsync = isAsync;
   }
@@ -1180,8 +2035,8 @@ class KeyframeResolver {
       toResolve.add(this);
       if (!isScheduled) {
         isScheduled = true;
-        motionDom.frame.read(readAllKeyframes);
-        motionDom.frame.resolveKeyframes(measureAllKeyframes);
+        frame.read(readAllKeyframes);
+        frame.resolveKeyframes(measureAllKeyframes);
       }
     } else {
       this.readKeyframes();
@@ -1189,11 +2044,11 @@ class KeyframeResolver {
     }
   }
   readKeyframes() {
-    const { unresolvedKeyframes, name, element, motionValue } = this;
+    const { unresolvedKeyframes, name, element, motionValue: motionValue2 } = this;
     for (let i = 0; i < unresolvedKeyframes.length; i++) {
       if (unresolvedKeyframes[i] === null) {
         if (i === 0) {
-          const currentValue = motionValue === null || motionValue === void 0 ? void 0 : motionValue.get();
+          const currentValue = motionValue2 === null || motionValue2 === void 0 ? void 0 : motionValue2.get();
           const finalKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
           if (currentValue !== void 0) {
             unresolvedKeyframes[0] = currentValue;
@@ -1206,8 +2061,8 @@ class KeyframeResolver {
           if (unresolvedKeyframes[0] === void 0) {
             unresolvedKeyframes[0] = finalKeyframe;
           }
-          if (motionValue && currentValue === void 0) {
-            motionValue.set(unresolvedKeyframes[0]);
+          if (motionValue2 && currentValue === void 0) {
+            motionValue2.set(unresolvedKeyframes[0]);
           }
         } else {
           unresolvedKeyframes[i] = unresolvedKeyframes[i - 1];
@@ -1282,8 +2137,8 @@ const auto = {
 const dimensionValueTypes = [number, px$1, percent$1, degrees, vw, vh, auto];
 const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v));
 class DOMKeyframesResolver extends KeyframeResolver {
-  constructor(unresolvedKeyframes, onComplete, name, motionValue, element) {
-    super(unresolvedKeyframes, onComplete, name, motionValue, element, true);
+  constructor(unresolvedKeyframes, onComplete, name, motionValue2, element) {
+    super(unresolvedKeyframes, onComplete, name, motionValue2, element, true);
   }
   readKeyframes() {
     const { unresolvedKeyframes, element, name } = this;
@@ -1406,7 +2261,7 @@ function canAnimate(keyframes2, name, type, velocity) {
   if (!isOriginAnimatable || !isTargetAnimatable) {
     return false;
   }
-  return hasKeyframesChanged(keyframes2) || (type === "spring" || motionDom.isGenerator(type)) && velocity;
+  return hasKeyframesChanged(keyframes2) || (type === "spring" || isGenerator(type)) && velocity;
 }
 const isNotNull = (value) => value !== null;
 function getFinalKeyframe(keyframes2, { repeat, repeatType = "loop" }, finalKeyframe) {
@@ -1419,7 +2274,7 @@ class BaseAnimation {
   constructor({ autoplay = true, delay: delay2 = 0, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop", ...options }) {
     this.isStopped = false;
     this.hasAttemptedResolve = false;
-    this.createdAt = motionDom.time.now();
+    this.createdAt = time.now();
     this.options = {
       autoplay,
       delay: delay2,
@@ -1463,10 +2318,10 @@ class BaseAnimation {
    * Otherwise, it will call initPlayback on the implementing class.
    */
   onKeyframesResolved(keyframes2, finalKeyframe) {
-    this.resolvedAt = motionDom.time.now();
+    this.resolvedAt = time.now();
     this.hasAttemptedResolve = true;
-    const { name, type, velocity, delay: delay2, onComplete, onUpdate, isGenerator } = this.options;
-    if (!isGenerator && !canAnimate(keyframes2, name, type, velocity)) {
+    const { name, type, velocity, delay: delay2, onComplete, onUpdate, isGenerator: isGenerator2 } = this.options;
+    if (!isGenerator2 && !canAnimate(keyframes2, name, type, velocity)) {
       if (!delay2) {
         onUpdate && onUpdate(getFinalKeyframe(keyframes2, this.options, finalKeyframe));
         onComplete && onComplete();
@@ -1745,7 +2600,7 @@ const easingLookup = {
   anticipate
 };
 const easingDefinitionToFunction = (definition) => {
-  if (motionDom.isBezierDefinition(definition)) {
+  if (isBezierDefinition(definition)) {
     exports.invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`);
     const [x1, y1, x2, y2] = definition;
     return cubicBezier(x1, y1, x2, y2);
@@ -1831,13 +2686,13 @@ function keyframes({ duration = 300, keyframes: keyframeValues, times, ease: eas
 const frameloopDriver = (update) => {
   const passTimestamp = ({ timestamp }) => update(timestamp);
   return {
-    start: () => motionDom.frame.update(passTimestamp, true),
-    stop: () => motionDom.cancelFrame(passTimestamp),
+    start: () => frame.update(passTimestamp, true),
+    stop: () => cancelFrame(passTimestamp),
     /**
      * If we're processing this frame we can use the
      * framelocked timestamp to keep things in sync.
      */
-    now: () => motionDom.frameData.isProcessing ? motionDom.frameData.timestamp : motionDom.time.now()
+    now: () => frameData.isProcessing ? frameData.timestamp : time.now()
   };
 };
 const generators = {
@@ -1867,10 +2722,10 @@ class MainThreadAnimation extends BaseAnimation {
       const { onStop } = this.options;
       onStop && onStop();
     };
-    const { name, motionValue, element, keyframes: keyframes2 } = this.options;
+    const { name, motionValue: motionValue2, element, keyframes: keyframes2 } = this.options;
     const KeyframeResolver$1 = (element === null || element === void 0 ? void 0 : element.KeyframeResolver) || KeyframeResolver;
     const onResolved = (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe);
-    this.resolver = new KeyframeResolver$1(keyframes2, onResolved, name, motionValue, element);
+    this.resolver = new KeyframeResolver$1(keyframes2, onResolved, name, motionValue2, element);
     this.resolver.scheduleResolve();
   }
   flatten() {
@@ -1881,7 +2736,7 @@ class MainThreadAnimation extends BaseAnimation {
   }
   initPlayback(keyframes$1) {
     const { type = "keyframes", repeat = 0, repeatDelay = 0, repeatType, velocity = 0 } = this.options;
-    const generatorFactory = motionDom.isGenerator(type) ? type : generators[type] || keyframes;
+    const generatorFactory = isGenerator(type) ? type : generators[type] || keyframes;
     let mapPercentToKeyframes;
     let mirroredGenerator;
     if (process.env.NODE_ENV !== "production" && generatorFactory !== keyframes) {
@@ -1900,7 +2755,7 @@ class MainThreadAnimation extends BaseAnimation {
       });
     }
     if (generator.calculatedDuration === null) {
-      generator.calculatedDuration = motionDom.calcGeneratorDuration(generator);
+      generator.calculatedDuration = calcGeneratorDuration(generator);
     }
     const { calculatedDuration } = generator;
     const resolvedDuration = calculatedDuration + repeatDelay;
@@ -1916,7 +2771,6 @@ class MainThreadAnimation extends BaseAnimation {
   }
   onPostResolved() {
     const { autoplay = true } = this.options;
-    motionDom.activeAnimations.mainThread++;
     this.play();
     if (this.pendingPlayState === "paused" || !autoplay) {
       this.pause();
@@ -2037,13 +2891,13 @@ class MainThreadAnimation extends BaseAnimation {
       this.driver = driver((timestamp) => this.tick(timestamp));
     }
     onPlay && onPlay();
-    const now = this.driver.now();
+    const now2 = this.driver.now();
     if (this.holdTime !== null) {
-      this.startTime = now - this.holdTime;
+      this.startTime = now2 - this.holdTime;
     } else if (!this.startTime) {
       this.startTime = startTime !== null && startTime !== void 0 ? startTime : this.calcStartTime();
     } else if (this.state === "finished") {
-      this.startTime = now;
+      this.startTime = now2;
     }
     if (this.state === "finished") {
       this.updateFinishedPromise();
@@ -2089,7 +2943,6 @@ class MainThreadAnimation extends BaseAnimation {
     this.updateFinishedPromise();
     this.startTime = this.cancelTime = null;
     this.resolver.cancel();
-    motionDom.activeAnimations.mainThread--;
   }
   stopDriver() {
     if (!this.driver)
@@ -2097,9 +2950,9 @@ class MainThreadAnimation extends BaseAnimation {
     this.driver.stop();
     this.driver = void 0;
   }
-  sample(time) {
+  sample(time2) {
     this.startTime = 0;
-    return this.tick(time, true);
+    return this.tick(time2, true);
   }
 }
 function animateValue(options) {
@@ -2118,12 +2971,9 @@ function startWaapiAnimation(element, valueName, keyframes2, { delay: delay2 = 0
   const keyframeOptions = { [valueName]: keyframes2 };
   if (times)
     keyframeOptions.offset = times;
-  const easing = motionDom.mapEasingToNativeEasing(ease2, duration);
+  const easing = mapEasingToNativeEasing(ease2, duration);
   if (Array.isArray(easing))
     keyframeOptions.easing = easing;
-  if (motionDom.statsBuffer.value) {
-    motionDom.activeAnimations.waapi++;
-  }
   const animation = element.animate(keyframeOptions, {
     delay: delay2,
     duration,
@@ -2132,18 +2982,13 @@ function startWaapiAnimation(element, valueName, keyframes2, { delay: delay2 = 0
     iterations: repeat + 1,
     direction: repeatType === "reverse" ? "alternate" : "normal"
   });
-  if (motionDom.statsBuffer.value) {
-    animation.finished.finally(() => {
-      motionDom.activeAnimations.waapi--;
-    });
-  }
   return animation;
 }
 const supportsWaapi = /* @__PURE__ */ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
 const sampleDelta = 10;
 const maxDuration = 2e4;
 function requiresPregeneratedKeyframes(options) {
-  return motionDom.isGenerator(options.type) || options.type === "spring" || !motionDom.isWaapiSupportedEasing(options.ease);
+  return isGenerator(options.type) || options.type === "spring" || !isWaapiSupportedEasing(options.ease);
 }
 function pregenerateKeyframes(keyframes2, options) {
   const sampleAnimation = new MainThreadAnimation({
@@ -2179,20 +3024,20 @@ function isUnsupportedEase(key) {
 class AcceleratedAnimation extends BaseAnimation {
   constructor(options) {
     super(options);
-    const { name, motionValue, element, keyframes: keyframes2 } = this.options;
-    this.resolver = new DOMKeyframesResolver(keyframes2, (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe), name, motionValue, element);
+    const { name, motionValue: motionValue2, element, keyframes: keyframes2 } = this.options;
+    this.resolver = new DOMKeyframesResolver(keyframes2, (resolvedKeyframes, finalKeyframe) => this.onKeyframesResolved(resolvedKeyframes, finalKeyframe), name, motionValue2, element);
     this.resolver.scheduleResolve();
   }
   initPlayback(keyframes2, finalKeyframe) {
-    let { duration = 300, times, ease: ease2, type, motionValue, name, startTime } = this.options;
-    if (!motionValue.owner || !motionValue.owner.current) {
+    let { duration = 300, times, ease: ease2, type, motionValue: motionValue2, name, startTime } = this.options;
+    if (!motionValue2.owner || !motionValue2.owner.current) {
       return false;
     }
-    if (typeof ease2 === "string" && motionDom.supportsLinearEasing() && isUnsupportedEase(ease2)) {
+    if (typeof ease2 === "string" && supportsLinearEasing() && isUnsupportedEase(ease2)) {
       ease2 = unsupportedEasingFunctions[ease2];
     }
     if (requiresPregeneratedKeyframes(this.options)) {
-      const { onComplete, onUpdate, motionValue: motionValue2, element, ...options } = this.options;
+      const { onComplete, onUpdate, motionValue: motionValue3, element, ...options } = this.options;
       const pregeneratedAnimation = pregenerateKeyframes(keyframes2, options);
       keyframes2 = pregeneratedAnimation.keyframes;
       if (keyframes2.length === 1) {
@@ -2203,15 +3048,15 @@ class AcceleratedAnimation extends BaseAnimation {
       ease2 = pregeneratedAnimation.ease;
       type = "keyframes";
     }
-    const animation = startWaapiAnimation(motionValue.owner.current, name, keyframes2, { ...this.options, duration, times, ease: ease2 });
+    const animation = startWaapiAnimation(motionValue2.owner.current, name, keyframes2, { ...this.options, duration, times, ease: ease2 });
     animation.startTime = startTime !== null && startTime !== void 0 ? startTime : this.calcStartTime();
     if (this.pendingTimeline) {
-      motionDom.attachTimeline(animation, this.pendingTimeline);
+      attachTimeline(animation, this.pendingTimeline);
       this.pendingTimeline = void 0;
     } else {
       animation.onfinish = () => {
         const { onComplete } = this.options;
-        motionValue.set(getFinalKeyframe(keyframes2, this.options, finalKeyframe));
+        motionValue2.set(getFinalKeyframe(keyframes2, this.options, finalKeyframe));
         onComplete && onComplete();
         this.cancel();
         this.resolveFinishedPromise();
@@ -2287,7 +3132,7 @@ class AcceleratedAnimation extends BaseAnimation {
       if (!resolved)
         return noop;
       const { animation } = resolved;
-      motionDom.attachTimeline(animation, timeline);
+      attachTimeline(animation, timeline);
     }
     return noop;
   }
@@ -2325,7 +3170,7 @@ class AcceleratedAnimation extends BaseAnimation {
       return;
     }
     if (this.time) {
-      const { motionValue, onUpdate, onComplete, element, ...options } = this.options;
+      const { motionValue: motionValue2, onUpdate, onComplete, element, ...options } = this.options;
       const sampleAnimation = new MainThreadAnimation({
         ...options,
         keyframes: keyframes2,
@@ -2336,7 +3181,7 @@ class AcceleratedAnimation extends BaseAnimation {
         isGenerator: true
       });
       const sampleTime = /* @__PURE__ */ secondsToMilliseconds$1(this.time);
-      motionValue.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta);
+      motionValue2.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta);
     }
     const { onStop } = this.options;
     onStop && onStop();
@@ -2355,11 +3200,11 @@ class AcceleratedAnimation extends BaseAnimation {
     resolved.animation.cancel();
   }
   static supports(options) {
-    const { motionValue, name, repeatDelay, repeatType, damping, type } = options;
-    if (!motionValue || !motionValue.owner || !(motionValue.owner.current instanceof HTMLElement)) {
+    const { motionValue: motionValue2, name, repeatDelay, repeatType, damping, type } = options;
+    if (!motionValue2 || !motionValue2.owner || !(motionValue2.owner.current instanceof HTMLElement)) {
       return false;
     }
-    const { onUpdate, transformTemplate } = motionValue.owner.getProps();
+    const { onUpdate, transformTemplate } = motionValue2.owner.getProps();
     return supportsWaapi() && name && acceleratedValues.has(name) && /**
      * If we're outputting values to onUpdate then we can't use WAAPI as there's
      * no way to read the value from WAAPI every frame.
@@ -2400,7 +3245,7 @@ function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildr
   return !!Object.keys(transition).length;
 }
 const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
-  const valueTransition = motionDom.getValueTransition(transition, name) || {};
+  const valueTransition = getValueTransition$1(transition, name) || {};
   const delay2 = valueTransition.delay || transition.delay || 0;
   let { elapsed = 0 } = transition;
   elapsed = elapsed - /* @__PURE__ */ secondsToMilliseconds$1(delay2);
@@ -2448,11 +3293,11 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
   if (shouldSkip && !isHandoff && value.get() !== void 0) {
     const finalKeyframe = getFinalKeyframe(options.keyframes, valueTransition);
     if (finalKeyframe !== void 0) {
-      motionDom.frame.update(() => {
+      frame.update(() => {
         options.onUpdate(finalKeyframe);
         options.onComplete();
       });
-      return new motionDom.GroupPlaybackControls([]);
+      return new GroupPlaybackControls([]);
     }
   }
   if (!isHandoff && AcceleratedAnimation.supports(options)) {
@@ -2481,13 +3326,13 @@ function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0,
     }
     const valueTransition = {
       delay: delay2,
-      ...motionDom.getValueTransition(transition || {}, key)
+      ...getValueTransition$1(transition || {}, key)
     };
     let isHandoff = false;
     if (window.MotionHandoffAnimation) {
       const appearId = getOptimisedAppearId(visualElement);
       if (appearId) {
-        const startTime = window.MotionHandoffAnimation(appearId, key, motionDom.frame);
+        const startTime = window.MotionHandoffAnimation(appearId, key, frame);
         if (startTime !== null) {
           valueTransition.startTime = startTime;
           isHandoff = true;
@@ -2503,7 +3348,7 @@ function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0,
   }
   if (transitionEnd) {
     Promise.all(animations).then(() => {
-      motionDom.frame.update(() => {
+      frame.update(() => {
         transitionEnd && setTarget(visualElement, transitionEnd);
       });
     });
@@ -2604,7 +3449,7 @@ function updateMotionValuesFromProps(element, next, prev) {
         warnOnce(nextValue.version === "12.5.0", `Attempting to mix Motion versions ${nextValue.version} with 12.5.0 may not work as expected.`);
       }
     } else if (isMotionValue$1(prevValue)) {
-      element.addValue(key, motionDom.motionValue(nextValue, { owner: element }));
+      element.addValue(key, motionValue(nextValue, { owner: element }));
     } else if (prevValue !== nextValue) {
       if (element.hasValue(key)) {
         const existingValue = element.getValue(key);
@@ -2615,7 +3460,7 @@ function updateMotionValuesFromProps(element, next, prev) {
         }
       } else {
         const latestValue = element.getStaticValue(key);
-        element.addValue(key, motionDom.motionValue(latestValue !== void 0 ? latestValue : nextValue, { owner: element }));
+        element.addValue(key, motionValue(latestValue !== void 0 ? latestValue : nextValue, { owner: element }));
       }
     }
   }
@@ -2667,10 +3512,10 @@ class VisualElement {
     };
     this.renderScheduledAt = 0;
     this.scheduleRender = () => {
-      const now = motionDom.time.now();
-      if (this.renderScheduledAt < now) {
-        this.renderScheduledAt = now;
-        motionDom.frame.render(this.render, false, true);
+      const now2 = time.now();
+      if (this.renderScheduledAt < now2) {
+        this.renderScheduledAt = now2;
+        frame.render(this.render, false, true);
       }
     };
     const { latestValues, renderState, onUpdate } = visualState;
@@ -2723,8 +3568,8 @@ class VisualElement {
   }
   unmount() {
     this.projection && this.projection.unmount();
-    motionDom.cancelFrame(this.notifyUpdate);
-    motionDom.cancelFrame(this.render);
+    cancelFrame(this.notifyUpdate);
+    cancelFrame(this.render);
     this.valueSubscriptions.forEach((remove) => remove());
     this.valueSubscriptions.clear();
     this.removeFromVariantTree && this.removeFromVariantTree();
@@ -2751,7 +3596,7 @@ class VisualElement {
     }
     const removeOnChange = value.on("change", (latestValue) => {
       this.latestValues[key] = latestValue;
-      this.props.onUpdate && motionDom.frame.preRender(this.notifyUpdate);
+      this.props.onUpdate && frame.preRender(this.notifyUpdate);
       if (valueIsTransform && this.projection) {
         this.projection.isTransformDirty = true;
       }
@@ -2913,7 +3758,7 @@ class VisualElement {
     }
     let value = this.values.get(key);
     if (value === void 0 && defaultValue !== void 0) {
-      value = motionDom.motionValue(defaultValue === null ? void 0 : defaultValue, { owner: this });
+      value = motionValue(defaultValue === null ? void 0 : defaultValue, { owner: this });
       this.addValue(key, value);
     }
     return value;
@@ -3260,7 +4105,7 @@ class SVGVisualElement extends DOMVisualElement {
   }
   onBindTransform() {
     if (this.current && !this.renderState.dimensions) {
-      motionDom.frame.postRender(this.updateDimensions);
+      frame.postRender(this.updateDimensions);
     }
   }
   build(renderState, latestValues, props) {
@@ -3478,7 +4323,7 @@ function createObjectVisualElement(subject) {
   visualElementStore.set(subject, node);
 }
 function animateSingleValue(value, keyframes2, options) {
-  const motionValue$1 = isMotionValue$1(value) ? value : motionDom.motionValue(value);
+  const motionValue$1 = isMotionValue$1(value) ? value : motionValue(value);
   motionValue$1.start(animateMotionValue("", motionValue$1, keyframes2, options));
   return motionValue$1.animation;
 }
@@ -3528,7 +4373,7 @@ function createScopedAnimate(scope) {
     } else {
       animations = animateSubject(subjectOrSequence, optionsOrKeyframes, options, scope);
     }
-    const animation = new motionDom.GroupPlaybackControls(animations);
+    const animation = new GroupPlaybackControls(animations);
     if (scope) {
       scope.animations.push(animation);
     }
@@ -3571,7 +4416,7 @@ function getElementAnimationState(element) {
   state.set(element, animationState);
   return state.get(element);
 }
-class NativeAnimation extends motionDom.NativeAnimationControls {
+class NativeAnimation extends NativeAnimationControls {
   constructor(element, valueName, valueKeyframes, options) {
     const isCSSVar = valueName.startsWith("--");
     exports.invariant(typeof options.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "framer-motion"?`);
@@ -3584,9 +4429,9 @@ class NativeAnimation extends motionDom.NativeAnimationControls {
       valueKeyframes = [valueKeyframes];
     }
     hydrateKeyframes(valueName, valueKeyframes, readInitialKeyframe);
-    if (motionDom.isGenerator(options.type)) {
-      const generatorOptions = motionDom.createGeneratorEasing(options, 100, options.type);
-      options.ease = motionDom.supportsLinearEasing() ? generatorOptions.ease : defaultEasing;
+    if (isGenerator(options.type)) {
+      const generatorOptions = createGeneratorEasing(options, 100, options.type);
+      options.ease = supportsLinearEasing() ? generatorOptions.ease : defaultEasing;
       options.duration = /* @__PURE__ */ secondsToMilliseconds$1(generatorOptions.duration);
       options.type = "keyframes";
     } else {
@@ -3645,7 +4490,7 @@ class NativeAnimation extends motionDom.NativeAnimationControls {
   }
 }
 function animateElements(elementOrSelector, keyframes2, options, scope) {
-  const elements = motionDom.resolveElements(elementOrSelector, scope);
+  const elements = resolveElements(elementOrSelector, scope);
   const numElements = elements.length;
   exports.invariant(Boolean(numElements), "No valid element provided.");
   const animations = [];
@@ -3658,7 +4503,7 @@ function animateElements(elementOrSelector, keyframes2, options, scope) {
     for (const valueName in keyframes2) {
       const valueKeyframes = keyframes2[valueName];
       const valueOptions = {
-        ...motionDom.getValueTransition(elementTransition, valueName)
+        ...getValueTransition$1(elementTransition, valueName)
       };
       valueOptions.duration = valueOptions.duration ? /* @__PURE__ */ secondsToMilliseconds$1(valueOptions.duration) : valueOptions.duration;
       valueOptions.delay = /* @__PURE__ */ secondsToMilliseconds$1(valueOptions.delay || 0);
@@ -3670,7 +4515,7 @@ function animateElements(elementOrSelector, keyframes2, options, scope) {
 }
 const createScopedWaapiAnimate = (scope) => {
   function scopedAnimate(elementOrSelector, keyframes2, options) {
-    return new motionDom.GroupPlaybackControls(animateElements(elementOrSelector, keyframes2, options, scope));
+    return new GroupPlaybackControls(animateElements(elementOrSelector, keyframes2, options, scope));
   }
   return scopedAnimate;
 };
@@ -3686,8 +4531,8 @@ function observeTimeline(update, timeline) {
     }
     prevProgress = progress2;
   };
-  motionDom.frame.update(onFrame, true);
-  return () => motionDom.cancelFrame(onFrame);
+  frame.update(onFrame, true);
+  return () => cancelFrame(onFrame);
 }
 const resizeHandlers = /* @__PURE__ */ new WeakMap();
 let observer;
@@ -3727,7 +4572,7 @@ function createResizeObserver() {
 function resizeElement(target, handler) {
   if (!observer)
     createResizeObserver();
-  const elements = motionDom.resolveElements(target);
+  const elements = resolveElements(target);
   elements.forEach((element) => {
     let elementHandlers = resizeHandlers.get(element);
     if (!elementHandlers) {
@@ -3804,7 +4649,7 @@ const keys = {
     position: "Top"
   }
 };
-function updateAxisInfo(element, axisName, info, time) {
+function updateAxisInfo(element, axisName, info, time2) {
   const axis = info[axisName];
   const { length, position } = keys[axisName];
   const prev = axis.current;
@@ -3815,13 +4660,13 @@ function updateAxisInfo(element, axisName, info, time) {
   axis.offset[0] = 0;
   axis.offset[1] = axis.scrollLength;
   axis.progress = /* @__PURE__ */ progress$1(0, axis.scrollLength, axis.current);
-  const elapsed = time - prevTime;
+  const elapsed = time2 - prevTime;
   axis.velocity = elapsed > maxElapsed ? 0 : velocityPerSecond(axis.current - prev, elapsed);
 }
-function updateScrollInfo(element, info, time) {
-  updateAxisInfo(element, "x", info, time);
-  updateAxisInfo(element, "y", info, time);
-  info.time = time;
+function updateScrollInfo(element, info, time2) {
+  updateAxisInfo(element, "x", info, time2);
+  updateAxisInfo(element, "y", info, time2);
+  info.time = time2;
 }
 function calcInset(element, container) {
   const inset = { x: 0, y: 0 };
@@ -3976,8 +4821,8 @@ function measure(container, target = container, info) {
 function createOnScrollHandler(element, onScroll, info, options = {}) {
   return {
     measure: () => measure(element, options.target, info),
-    update: (time) => {
-      updateScrollInfo(element, info, time);
+    update: (time2) => {
+      updateScrollInfo(element, info, time2);
       if (options.offset || options.target) {
         resolveOffsets(element, info, options);
       }
@@ -4005,7 +4850,7 @@ function scrollInfo(onScroll, { container = document.documentElement, ...options
     };
     const updateAll = () => {
       for (const handler of containerHandlers) {
-        handler.update(motionDom.frameData.timestamp);
+        handler.update(frameData.timestamp);
       }
     };
     const notifyAll2 = () => {
@@ -4013,9 +4858,9 @@ function scrollInfo(onScroll, { container = document.documentElement, ...options
         handler.notify();
     };
     const listener2 = () => {
-      motionDom.frame.read(measureAll, false, true);
-      motionDom.frame.read(updateAll, false, true);
-      motionDom.frame.update(notifyAll2, false, true);
+      frame.read(measureAll, false, true);
+      frame.read(updateAll, false, true);
+      frame.update(notifyAll2, false, true);
     };
     scrollListeners.set(container, listener2);
     const target = getEventTarget(container);
@@ -4026,10 +4871,10 @@ function scrollInfo(onScroll, { container = document.documentElement, ...options
     target.addEventListener("scroll", listener2, { passive: true });
   }
   const listener = scrollListeners.get(container);
-  motionDom.frame.read(listener, false, true);
+  frame.read(listener, false, true);
   return () => {
     var _a;
-    motionDom.cancelFrame(listener);
+    cancelFrame(listener);
     const currentHandlers = onScrollHandlers.get(container);
     if (!currentHandlers)
       return;
@@ -4063,7 +4908,7 @@ function getTimeline({ source, container = document.documentElement, axis = "y"
   }
   const elementCache = timelineCache.get(container);
   if (!elementCache[axis]) {
-    elementCache[axis] = motionDom.supportsScrollTimeline() ? new ScrollTimeline({ source: container, axis }) : scrollTimelineFallback({ source: container, axis });
+    elementCache[axis] = supportsScrollTimeline() ? new ScrollTimeline({ source: container, axis }) : scrollTimelineFallback({ source: container, axis });
   }
   return elementCache[axis];
 }
@@ -4112,7 +4957,7 @@ const thresholds = {
   all: 1
 };
 function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount = "some" } = {}) {
-  const elements = motionDom.resolveElements(elementOrSelector);
+  const elements = resolveElements(elementOrSelector);
   const activeIntersections = /* @__PURE__ */ new WeakMap();
   const onIntersectionChange = (entries) => {
     entries.forEach((entry) => {
@@ -4170,16 +5015,16 @@ function stagger(duration = 0.1, { startDelay = 0, from = 0, ease: ease2 } = {})
   };
 }
 function delay$1(callback, timeout) {
-  const start = motionDom.time.now();
+  const start = time.now();
   const checkElapsed = ({ timestamp }) => {
     const elapsed = timestamp - start;
     if (elapsed >= timeout) {
-      motionDom.cancelFrame(checkElapsed);
+      cancelFrame(checkElapsed);
       callback(elapsed - timeout);
     }
   };
-  motionDom.frame.read(checkElapsed, true);
-  return () => motionDom.cancelFrame(checkElapsed);
+  frame.read(checkElapsed, true);
+  return () => cancelFrame(checkElapsed);
 }
 function delayInSeconds(callback, timeout) {
   return delay$1(callback, /* @__PURE__ */ secondsToMilliseconds$1(timeout));
@@ -4266,13 +5111,13 @@ function useAnimationFrame(callback) {
       initialTimestamp = timestamp;
     callback(timestamp - initialTimestamp, delta);
   };
-  const cancel = () => motionDom.cancelFrame(provideTimeSinceStart);
+  const cancel = () => cancelFrame(provideTimeSinceStart);
   vue.onBeforeUpdate(() => {
     cancel();
-    motionDom.frame.update(provideTimeSinceStart, true);
+    frame.update(provideTimeSinceStart, true);
   });
   vue.onUnmounted(() => cancel());
-  motionDom.frame.update(provideTimeSinceStart, true);
+  frame.update(provideTimeSinceStart, true);
 }
 const secondsToMilliseconds = (seconds) => seconds * 1e3;
 function millisecondsToSeconds(milliseconds) {
@@ -4492,7 +5337,7 @@ function handleHoverEvent$1(state2, event, lifecycle) {
   const eventName = `onHover${lifecycle}`;
   const callback = props[eventName];
   if (callback) {
-    motionDom.frame.postRender(() => callback(event, extractEventInfo$1(event)));
+    frame.postRender(() => callback(event, extractEventInfo$1(event)));
   }
 }
 class HoverGesture extends Feature {
@@ -4517,7 +5362,7 @@ class HoverGesture extends Feature {
     if (!element || !this.isActive())
       return;
     this.unmount();
-    this.unmount = motionDom.hover(
+    this.unmount = hover(
       element,
       (el, startEvent) => {
         handleHoverEvent$1(this.state, startEvent, "Start");
@@ -4544,7 +5389,7 @@ function handlePressEvent(state2, event, lifecycle) {
   const eventName = `onPress${lifecycle === "End" ? "" : lifecycle}`;
   const callback = props[eventName];
   if (callback) {
-    motionDom.frame.postRender(() => callback(event, extractEventInfo$1(event)));
+    frame.postRender(() => callback(event, extractEventInfo$1(event)));
   }
 }
 class PressGesture extends Feature {
@@ -4569,7 +5414,7 @@ class PressGesture extends Feature {
     if (!element || !this.isActive())
       return;
     this.unmount();
-    this.unmount = motionDom.press(
+    this.unmount = press(
       element,
       (el, startEvent) => {
         handlePressEvent(this.state, startEvent, "Start");
@@ -4591,7 +5436,7 @@ function handleHoverEvent(state2, entry, lifecycle) {
   const eventName = `onViewport${lifecycle}`;
   const callback = props[eventName];
   if (callback) {
-    motionDom.frame.postRender(() => callback(entry));
+    frame.postRender(() => callback(entry));
   }
 }
 class InViewGesture extends Feature {
@@ -4811,7 +5656,7 @@ class PanSession {
       if (!isPanStarted && !isDistancePastThreshold)
         return;
       const { point: point3 } = info2;
-      const { timestamp: timestamp2 } = motionDom.frameData;
+      const { timestamp: timestamp2 } = frameData;
       this.history.push({ ...point3, timestamp: timestamp2 });
       const { onStart, onMove } = this.handlers;
       if (!isPanStarted) {
@@ -4823,7 +5668,7 @@ class PanSession {
     this.handlePointerMove = (event2, info2) => {
       this.lastMoveEvent = event2;
       this.lastMoveEventInfo = transformPoint(info2, this.transformPagePoint);
-      motionDom.frame.update(this.updatePoint, true);
+      frame.update(this.updatePoint, true);
     };
     this.handlePointerUp = (event2, info2) => {
       this.end();
@@ -4850,7 +5695,7 @@ class PanSession {
     const info = extractEventInfo(event);
     const initialInfo = transformPoint(info, this.transformPagePoint);
     const { point: point2 } = initialInfo;
-    const { timestamp } = motionDom.frameData;
+    const { timestamp } = frameData;
     this.history = [{ ...point2, timestamp }];
     const { onSessionStart } = handlers;
     onSessionStart && onSessionStart(event, getPanInfo(initialInfo, this.history));
@@ -4877,7 +5722,7 @@ class PanSession {
   }
   end() {
     this.removeListeners && this.removeListeners();
-    motionDom.cancelFrame(this.updatePoint);
+    cancelFrame(this.updatePoint);
   }
 }
 function transformPoint(info, transformPagePoint) {
@@ -4917,15 +5762,15 @@ function getVelocity(history, timeDelta) {
   if (!timestampedPoint) {
     return { x: 0, y: 0 };
   }
-  const time = millisecondsToSeconds(
+  const time2 = millisecondsToSeconds(
     lastPoint.timestamp - timestampedPoint.timestamp
   );
-  if (time === 0) {
+  if (time2 === 0) {
     return { x: 0, y: 0 };
   }
   const currentVelocity = {
-    x: (lastPoint.x - timestampedPoint.x) / time,
-    y: (lastPoint.y - timestampedPoint.y) / time
+    x: (lastPoint.x - timestampedPoint.x) / time2,
+    y: (lastPoint.y - timestampedPoint.y) / time2
   };
   if (currentVelocity.x === Infinity) {
     currentVelocity.x = 0;
@@ -5063,7 +5908,7 @@ class VisualElementDragControls {
         this.originPoint[axis] = current;
       });
       if (onDragStart) {
-        motionDom.frame.postRender(() => onDragStart(event, info));
+        frame.postRender(() => onDragStart(event, info));
       }
       addValueToWillChange(this.visualElement, "transform");
       const state2 = this.visualElement.state;
@@ -5116,15 +5961,15 @@ class VisualElementDragControls {
     );
   }
   stop(event, info) {
-    const isDragging = this.isDragging;
+    const isDragging2 = this.isDragging;
     this.cancel();
-    if (!isDragging)
+    if (!isDragging2)
       return;
     const { velocity } = info;
     this.startAnimation(velocity);
     const { onDragEnd } = this.getProps();
     if (onDragEnd) {
-      motionDom.frame.postRender(() => onDragEnd(event, info));
+      frame.postRender(() => onDragEnd(event, info));
     }
   }
   cancel() {
@@ -5377,19 +6222,19 @@ class VisualElementDragControls {
       projection.root && projection.root.updateScroll();
       projection.updateLayout();
     }
-    motionDom.frame.read(measureDragConstraints);
+    frame.read(measureDragConstraints);
     const stopResizeListener = addDomEvent$1(window, "resize", () => this.scalePositionWithinConstraints());
     const stopLayoutUpdateListener = projection.addEventListener(
       "didUpdate",
       ({ delta, hasLayoutChanged }) => {
         if (this.isDragging && hasLayoutChanged) {
           eachAxis$1((axis) => {
-            const motionValue = this.getAxisMotionValue(axis);
-            if (!motionValue)
+            const motionValue2 = this.getAxisMotionValue(axis);
+            if (!motionValue2)
               return;
             this.originPoint[axis] += delta[axis].translate;
-            motionValue.set(
-              motionValue.get() + delta[axis].translate
+            motionValue2.set(
+              motionValue2.get() + delta[axis].translate
             );
           });
           this.visualElement.render();
@@ -5580,7 +6425,7 @@ class LayoutFeature extends Feature {
 function asyncHandler(handler) {
   return (event, info) => {
     if (handler) {
-      motionDom.frame.postRender(() => handler(event, info));
+      frame.postRender(() => handler(event, info));
     }
   };
 }
@@ -5617,7 +6462,7 @@ class PanGesture extends Feature {
         const { onPanEnd } = this.state.options;
         delete this.session;
         if (onPanEnd) {
-          motionDom.frame.postRender(() => onPanEnd(event, info));
+          frame.postRender(() => onPanEnd(event, info));
         }
       }
     };
@@ -5789,12 +6634,16 @@ function createStyles(keyframes2) {
   if (transforms2.length) {
     initialKeyframes.transform = buildTransformTemplate(transforms2);
   }
+  if (Object.keys(initialKeyframes).length === 0) {
+    return null;
+  }
   return initialKeyframes;
 }
 const SVG_STYLE_TO_ATTRIBUTES = {
   "fill": true,
   "stroke": true,
   "opacity": true,
+  "stroke-width": true,
   "fill-opacity": true,
   "stroke-opacity": true,
   "stroke-linecap": true,
@@ -6410,11 +7259,6 @@ function buildProjectionTransform(delta, treeScale, latestTransform) {
 function eachAxis(callback) {
   return [callback("x"), callback("y")];
 }
-const metrics = {
-  nodes: 0,
-  calculatedTargetDeltas: 0,
-  calculatedProjections: 0
-};
 const transformAxes = ["", "X", "Y", "Z"];
 const hiddenVisibility = { visibility: "hidden" };
 const animationTarget = 1e3;
@@ -6439,7 +7283,7 @@ function cancelTreeOptimisedTransformAnimations(projectionNode) {
   const appearId = getOptimisedAppearId(visualElement);
   if (window.MotionHasOptimisedAnimation(appearId, "transform")) {
     const { layout, layoutId } = projectionNode.options;
-    window.MotionCancelOptimisedAnimation(appearId, "transform", motionDom.frame, !(layout || layoutId));
+    window.MotionCancelOptimisedAnimation(appearId, "transform", frame, !(layout || layoutId));
   }
   const { parent } = projectionNode;
   if (parent && !parent.hasCheckedOptimisedAppear) {
@@ -6480,16 +7324,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       };
       this.updateProjection = () => {
         this.projectionUpdateScheduled = false;
-        if (motionDom.statsBuffer.value) {
-          metrics.nodes = metrics.calculatedTargetDeltas = metrics.calculatedProjections = 0;
-        }
         this.nodes.forEach(propagateDirtyNodes);
         this.nodes.forEach(resolveTargetDelta);
         this.nodes.forEach(calcProjection);
         this.nodes.forEach(cleanDirtyNodes);
-        if (motionDom.statsBuffer.addProjectionMetrics) {
-          motionDom.statsBuffer.addProjectionMetrics(metrics);
-        }
       };
       this.resolvedRelativeTargetAt = 0;
       this.hasProjected = false;
@@ -6571,7 +7409,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
             this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
             const animationOptions = {
-              ...motionDom.getValueTransition(layoutTransition, "layout"),
+              ...getValueTransition$1(layoutTransition, "layout"),
               onPlay: onLayoutAnimationStart,
               onComplete: onLayoutAnimationComplete
             };
@@ -6599,7 +7437,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       stack && stack.remove(this);
       this.parent && this.parent.children.delete(this);
       this.instance = void 0;
-      motionDom.cancelFrame(this.updateProjection);
+      cancelFrame(this.updateProjection);
     }
     // only on the root
     blockUpdate() {
@@ -6672,19 +7510,19 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       this.nodes.forEach(updateLayout);
       this.nodes.forEach(notifyLayoutUpdate);
       this.clearAllSnapshots();
-      const now = motionDom.time.now();
-      motionDom.frameData.delta = clamp$1(0, 1e3 / 60, now - motionDom.frameData.timestamp);
-      motionDom.frameData.timestamp = now;
-      motionDom.frameData.isProcessing = true;
-      motionDom.frameSteps.update.process(motionDom.frameData);
-      motionDom.frameSteps.preRender.process(motionDom.frameData);
-      motionDom.frameSteps.render.process(motionDom.frameData);
-      motionDom.frameData.isProcessing = false;
+      const now2 = time.now();
+      frameData.delta = clamp$1(0, 1e3 / 60, now2 - frameData.timestamp);
+      frameData.timestamp = now2;
+      frameData.isProcessing = true;
+      frameSteps.update.process(frameData);
+      frameSteps.preRender.process(frameData);
+      frameSteps.render.process(frameData);
+      frameData.isProcessing = false;
     }
     didUpdate() {
       if (!this.updateScheduled) {
         this.updateScheduled = true;
-        motionDom.microtask.read(this.scheduleUpdate);
+        microtask.read(this.scheduleUpdate);
       }
     }
     clearAllSnapshots() {
@@ -6694,11 +7532,11 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
     scheduleUpdateProjection() {
       if (!this.projectionUpdateScheduled) {
         this.projectionUpdateScheduled = true;
-        motionDom.frame.preRender(this.updateProjection, false, true);
+        frame.preRender(this.updateProjection, false, true);
       }
     }
     scheduleCheckAfterUnmount() {
-      motionDom.frame.postRender(() => {
+      frame.postRender(() => {
         if (this.isLayoutDirty) {
           this.root.didUpdate();
         } else {
@@ -6884,7 +7722,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
     forceRelativeParentToResolveTarget() {
       if (!this.relativeParent)
         return;
-      if (this.relativeParent.resolvedRelativeTargetAt !== motionDom.frameData.timestamp) {
+      if (this.relativeParent.resolvedRelativeTargetAt !== frameData.timestamp) {
         this.relativeParent.resolveTargetDelta(true);
       }
     }
@@ -6901,7 +7739,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       const { layout, layoutId } = this.options;
       if (!this.layout || !(layout || layoutId))
         return;
-      this.resolvedRelativeTargetAt = motionDom.frameData.timestamp;
+      this.resolvedRelativeTargetAt = frameData.timestamp;
       if (!this.targetDelta && !this.relativeTarget) {
         const relativeParent = this.getClosestProjectingParent();
         if (relativeParent && relativeParent.layout && this.animationProgress !== 1) {
@@ -6948,9 +7786,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
           this.relativeParent = this.relativeTarget = void 0;
         }
       }
-      if (motionDom.statsBuffer.value) {
-        metrics.calculatedTargetDeltas++;
-      }
     }
     getClosestProjectingParent() {
       if (!this.parent || hasScale(this.parent.latestValues) || has2DTranslate(this.parent.latestValues)) {
@@ -6976,7 +7811,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       if (isShared && (this.isSharedProjectionDirty || this.isTransformDirty)) {
         canSkip = false;
       }
-      if (this.resolvedRelativeTargetAt === motionDom.frameData.timestamp) {
+      if (this.resolvedRelativeTargetAt === frameData.timestamp) {
         canSkip = false;
       }
       if (canSkip)
@@ -7016,9 +7851,6 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         this.scheduleRender();
         this.notifyListeners("projectionUpdate", target);
       }
-      if (motionDom.statsBuffer.value) {
-        metrics.calculatedProjections++;
-      }
     }
     hide() {
       this.isVisible = false;
@@ -7092,12 +7924,11 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         this.resumingFrom.currentAnimation.stop();
       }
       if (this.pendingAnimation) {
-        motionDom.cancelFrame(this.pendingAnimation);
+        cancelFrame(this.pendingAnimation);
         this.pendingAnimation = void 0;
       }
-      this.pendingAnimation = motionDom.frame.update(() => {
+      this.pendingAnimation = frame.update(() => {
         globalProjectionState.hasAnimatedSinceResize = true;
-        motionDom.activeAnimations.layout++;
         this.currentAnimation = animateSingleValue(0, animationTarget, {
           ...options,
           onUpdate: (latest) => {
@@ -7105,10 +7936,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             options.onUpdate && options.onUpdate(latest);
           },
           onStop: () => {
-            motionDom.activeAnimations.layout--;
           },
           onComplete: () => {
-            motionDom.activeAnimations.layout--;
             options.onComplete && options.onComplete();
             this.completeAnimation();
           }
@@ -7386,9 +8215,6 @@ function notifyLayoutUpdate(node) {
   node.options.transition = void 0;
 }
 function propagateDirtyNodes(node) {
-  if (motionDom.statsBuffer.value) {
-    metrics.nodes++;
-  }
   if (!node.parent)
     return;
   if (!node.isProjecting()) {
@@ -7672,14 +8498,14 @@ class MotionState {
     }
     if (this.options.layoutId) {
       mountedLayoutIds.add(this.options.layoutId);
-      motionDom.frame.render(() => {
+      frame.render(() => {
         mountedLayoutIds.clear();
       });
     }
   }
   clearAnimation() {
     var _a, _b;
-    this.currentProcess && motionDom.cancelFrame(this.currentProcess);
+    this.currentProcess && cancelFrame(this.currentProcess);
     this.currentProcess = null;
     (_b = (_a = this.visualElement) == null ? void 0 : _a.variantChildren) == null ? void 0 : _b.forEach((child) => {
       child.state.clearAnimation();
@@ -7688,7 +8514,7 @@ class MotionState {
   // update trigger animation
   startAnimation() {
     this.clearAnimation();
-    this.currentProcess = motionDom.frame.render(() => {
+    this.currentProcess = frame.render(() => {
       this.currentProcess = null;
       this.animateUpdates();
     });
@@ -7821,12 +8647,12 @@ function useMotionState(props) {
       ...isSVG ? {} : ((_a2 = state2.visualElement) == null ? void 0 : _a2.latestValues) || state2.baseTarget
     };
     if (isSVG) {
-      const { attributes, style: style2 } = convertSvgStyleToAttributes({
+      const { attributes, style: style22 } = convertSvgStyleToAttributes({
         ...state2.isMounted() ? state2.target : state2.baseTarget,
         ...styleProps
       });
       Object.assign(attrsProps, attributes);
-      styleProps = style2;
+      styleProps = style22;
     }
     if (props.drag && props.dragListener !== false) {
       Object.assign(styleProps, {
@@ -7836,7 +8662,9 @@ function useMotionState(props) {
         touchAction: props.drag === true ? "none" : `pan-${props.drag === "x" ? "y" : "x"}`
       });
     }
-    attrsProps.style = createStyles(styleProps);
+    const style2 = createStyles(styleProps);
+    if (style2)
+      attrsProps.style = style2;
     return attrsProps;
   }
   const instance = vue.getCurrentInstance().proxy;
@@ -7875,17 +8703,17 @@ const MotionComponentProps = {
   "inView": { type: [String, Array, Object] },
   "focus": { type: [String, Array, Object] },
   "whileDrag": { type: [String, Array, Object] },
-  "whileHover": { type: [String, Array, Object], default: ({ hover }) => {
-    if (process.env.NODE_ENV === "development" && hover) {
+  "whileHover": { type: [String, Array, Object], default: ({ hover: hover2 }) => {
+    if (process.env.NODE_ENV === "development" && hover2) {
       heyListen.warning(true, "hover is deprecated. Use whileHover instead.");
     }
-    return hover;
+    return hover2;
   } },
-  "whilePress": { type: [String, Array, Object], default: ({ press }) => {
-    if (process.env.NODE_ENV === "development" && press) {
+  "whilePress": { type: [String, Array, Object], default: ({ press: press2 }) => {
+    if (process.env.NODE_ENV === "development" && press2) {
       heyListen.warning(true, "press is deprecated. Use whilePress instead.");
     }
-    return press;
+    return press2;
   } },
   "whileInView": { type: [String, Array, Object], default: ({ inView: inView2 }) => {
     if (process.env.NODE_ENV === "development" && inView2) {
@@ -7951,9 +8779,7 @@ const MotionComponentProps = {
   "onPanSessionStart": { type: Function },
   "onPanStart": { type: Function },
   "onPan": { type: Function },
-  "onPanEnd": { type: Function },
-  "onFocus": { type: Function },
-  "onBlur": { type: Function }
+  "onPanEnd": { type: Function }
 };
 function checkMotionIsHidden(instance) {
   var _a;
@@ -8033,8 +8859,10 @@ function createMotionComponent(component, options = {}) {
         const isComponent = typeof props.as === "object";
         if ((!isComponent || props.asChild) && el) {
           const { style: style2 } = getAttrs();
-          for (const [key, val] of Object.entries(style2)) {
-            el.style[key] = val;
+          if (style2) {
+            for (const [key, val] of Object.entries(style2)) {
+              el.style[key] = val;
+            }
           }
         }
       }
@@ -8120,7 +8948,7 @@ function usePopLayout(props) {
     if (!style2)
       return;
     styles.delete(state2);
-    motionDom.frame.render(() => {
+    frame.render(() => {
       document.head.removeChild(style2);
     });
   }
@@ -8288,7 +9116,7 @@ function moveItem([...arr], fromIndex, toIndex) {
   return arr;
 }
 function useDefaultMotionValue(value, defaultValue = 0) {
-  return isMotionValue(value) ? value : motionDom.motionValue(defaultValue);
+  return isMotionValue(value) ? value : motionValue(defaultValue);
 }
 const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   ...{
@@ -8427,16 +9255,16 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
   }
 });
 function useCombineMotionValues(combineValues) {
-  const value = motionDom.motionValue(combineValues());
+  const value = motionValue(combineValues());
   const updateValue = () => value.set(combineValues());
-  const scheduleUpdate = () => motionDom.frame.preRender(updateValue, false, true);
+  const scheduleUpdate = () => frame.preRender(updateValue, false, true);
   let subscriptions;
   const subscribe = (values) => {
     subscriptions = values.map((v) => v.on("change", scheduleUpdate));
   };
   const unsubscribe = () => {
     subscriptions.forEach((unsubscribe2) => unsubscribe2());
-    motionDom.cancelFrame(updateValue);
+    cancelFrame(updateValue);
   };
   vue.onUnmounted(() => {
     unsubscribe();
@@ -8448,16 +9276,16 @@ function useCombineMotionValues(combineValues) {
   };
 }
 function useComputed(computed) {
-  motionDom.collectMotionValues.current = [];
+  collectMotionValues.current = [];
   const { value, subscribe, unsubscribe } = useCombineMotionValues(computed);
-  subscribe(motionDom.collectMotionValues.current);
-  motionDom.collectMotionValues.current = void 0;
+  subscribe(collectMotionValues.current);
+  collectMotionValues.current = void 0;
   vue.onBeforeUpdate(() => {
     unsubscribe();
-    motionDom.collectMotionValues.current = [];
+    collectMotionValues.current = [];
     computed();
-    subscribe(motionDom.collectMotionValues.current);
-    motionDom.collectMotionValues.current = void 0;
+    subscribe(collectMotionValues.current);
+    collectMotionValues.current = void 0;
   });
   return value;
 }
@@ -8490,9 +9318,9 @@ function useListTransform(values, transformer) {
   return value;
 }
 function useTime() {
-  const time = motionDom.motionValue(0);
-  useAnimationFrame((t) => time.set(t));
-  return time;
+  const time2 = motionValue(0);
+  useAnimationFrame((t) => time2.set(t));
+  return time2;
 }
 function useMotionTemplate(fragments, ...values) {
   const numFragments = fragments.length;
@@ -8525,7 +9353,7 @@ function toNumber(v) {
 }
 function useSpring(source, config = {}) {
   let activeSpringAnimation = null;
-  const value = motionDom.motionValue(
+  const value = motionValue(
     isMotionValue(source) ? toNumber(source.get()) : source
   );
   let latestValue = value.get();
@@ -8540,7 +9368,7 @@ function useSpring(source, config = {}) {
   const startAnimation = () => {
     const animation = activeSpringAnimation;
     if ((animation == null ? void 0 : animation.time) === 0) {
-      animation.sample(motionDom.frameData.delta);
+      animation.sample(frameData.delta);
     }
     stopAnimation2();
     const springConfig = vue.isRef(config) ? config.value : config;
@@ -8563,7 +9391,7 @@ function useSpring(source, config = {}) {
     value.attach((v, set) => {
       latestValue = v;
       latestSetter = set;
-      motionDom.frame.update(startAnimation);
+      frame.update(startAnimation);
       return value.get();
     }, stopAnimation2);
   }, { immediate: true });
@@ -8582,10 +9410,10 @@ function refWarning(name, ref) {
 }
 function createScrollMotionValues() {
   return {
-    scrollX: motionDom.motionValue(0),
-    scrollY: motionDom.motionValue(0),
-    scrollXProgress: motionDom.motionValue(0),
-    scrollYProgress: motionDom.motionValue(0)
+    scrollX: motionValue(0),
+    scrollY: motionValue(0),
+    scrollXProgress: motionValue(0),
+    scrollYProgress: motionValue(0)
   };
 }
 function useScroll({
@@ -8626,16 +9454,16 @@ function useScroll({
   return values;
 }
 function useVelocity(value) {
-  const velocity = motionDom.motionValue(value.getVelocity());
+  const velocity = motionValue(value.getVelocity());
   const updateVelocity = () => {
     const latest = value.getVelocity();
     velocity.set(latest);
     if (latest) {
-      motionDom.frame.update(updateVelocity);
+      frame.update(updateVelocity);
     }
   };
   useMotionValueEvent(value, "change", () => {
-    motionDom.frame.update(updateVelocity, false, true);
+    frame.update(updateVelocity, false, true);
   });
   return velocity;
 }
@@ -8752,7 +9580,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
       }
       return axis.value;
     });
-    const isDragging = vue.ref(false);
+    const isDragging2 = vue.ref(false);
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(Motion), vue.mergeProps(bindProps(), {
         drag: drag.value,
@@ -8760,17 +9588,17 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
         onDrag: _cache[0] || (_cache[0] = (event, gesturePoint) => {
           const { velocity } = gesturePoint;
           velocity[vue.unref(axis)] && vue.unref(updateOrder)(_ctx.value, point2[vue.unref(axis)].get(), velocity[vue.unref(axis)]);
-          !isDragging.value && (isDragging.value = true);
+          !isDragging2.value && (isDragging2.value = true);
           _ctx.onDrag && _ctx.onDrag(event, gesturePoint);
         }),
         onDragEnd: _cache[1] || (_cache[1] = (event, gesturePoint) => {
-          isDragging.value = false;
+          isDragging2.value = false;
           _ctx.onDragEnd && _ctx.onDragEnd(event, gesturePoint);
         }),
         onLayoutMeasure: _cache[2] || (_cache[2] = (measured) => vue.unref(registerItem)(_ctx.value, measured))
       }), {
         default: vue.withCtx(() => [
-          vue.renderSlot(_ctx.$slots, "default", { isDragging: isDragging.value }),
+          vue.renderSlot(_ctx.$slots, "default", { isDragging: isDragging2.value }),
           vue.createTextVNode(" " + vue.toDisplayString(warning2()), 1)
         ]),
         _: 3
@@ -9081,52 +9909,13 @@ class DragControls {
 }
 const createDragControls = () => new DragControls();
 const useDragControls = createDragControls;
-Object.defineProperty(exports, "MotionValue", {
-  enumerable: true,
-  get: () => motionDom.MotionValue
-});
-Object.defineProperty(exports, "cancelFrame", {
-  enumerable: true,
-  get: () => motionDom.cancelFrame
-});
-Object.defineProperty(exports, "frame", {
-  enumerable: true,
-  get: () => motionDom.frame
-});
-Object.defineProperty(exports, "frameData", {
-  enumerable: true,
-  get: () => motionDom.frameData
-});
-Object.defineProperty(exports, "hover", {
-  enumerable: true,
-  get: () => motionDom.hover
-});
-Object.defineProperty(exports, "isDragActive", {
-  enumerable: true,
-  get: () => motionDom.isDragActive
-});
-Object.defineProperty(exports, "motionValue", {
-  enumerable: true,
-  get: () => motionDom.motionValue
-});
-Object.defineProperty(exports, "press", {
-  enumerable: true,
-  get: () => motionDom.press
-});
-Object.defineProperty(exports, "time", {
-  enumerable: true,
-  get: () => motionDom.time
-});
-Object.defineProperty(exports, "useMotionValue", {
-  enumerable: true,
-  get: () => motionDom.motionValue
-});
 exports.AnimatePresence = _sfc_main$4;
 exports.LayoutGroup = _sfc_main;
 exports.LazyMotion = LazyMotion;
 exports.M = M;
 exports.Motion = Motion;
 exports.MotionConfig = _sfc_main$5;
+exports.MotionValue = MotionValue;
 exports.Reorder = Reorder;
 exports.ReorderGroup = ReorderGroup;
 exports.ReorderItem = ReorderItem;
@@ -9138,6 +9927,7 @@ exports.anticipate = anticipate;
 exports.backIn = backIn;
 exports.backInOut = backInOut;
 exports.backOut = backOut;
+exports.cancelFrame = cancelFrame;
 exports.circIn = circIn;
 exports.circInOut = circInOut;
 exports.circOut = circOut;
@@ -9153,12 +9943,16 @@ exports.domMax = domMax;
 exports.easeIn = easeIn;
 exports.easeInOut = easeInOut;
 exports.easeOut = easeOut;
+exports.frame = frame;
+exports.frameData = frameData;
 exports.getContextWindow = getContextWindow;
+exports.hover = hover;
 exports.inView = inView;
 exports.inertia = inertia;
 exports.injectLayoutGroup = injectLayoutGroup;
 exports.injectMotion = injectMotion;
 exports.interpolate = interpolate;
+exports.isDragActive = isDragActive;
 exports.isMotionValue = isMotionValue;
 exports.keyframes = keyframes;
 exports.m = m;
@@ -9166,9 +9960,11 @@ exports.millisecondsToSeconds = millisecondsToSeconds;
 exports.mirrorEasing = mirrorEasing;
 exports.mix = mix;
 exports.motion = motion;
+exports.motionValue = motionValue;
 exports.mountedStates = mountedStates;
 exports.noop = noop;
 exports.pipe = pipe;
+exports.press = press;
 exports.progress = progress$1;
 exports.provideLayoutGroup = provideLayoutGroup;
 exports.provideMotion = provideMotion;
@@ -9180,6 +9976,7 @@ exports.secondsToMilliseconds = secondsToMilliseconds;
 exports.spring = spring;
 exports.stagger = stagger;
 exports.steps = steps;
+exports.time = time;
 exports.transform = transform;
 exports.useAnimate = useAnimate;
 exports.useAnimationControls = useAnimationControls;
@@ -9192,6 +9989,7 @@ exports.useInView = useInView;
 exports.useLayoutGroup = useLayoutGroup;
 exports.useMotionConfig = useMotionConfig;
 exports.useMotionTemplate = useMotionTemplate;
+exports.useMotionValue = motionValue;
 exports.useMotionValueEvent = useMotionValueEvent;
 exports.useReducedMotion = useReducedMotion;
 exports.useScroll = useScroll;