motion-v 0.5.2-beta.1 → 0.6.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 noop = (any) => any;
 let warning = noop;
 exports.invariant = noop;
@@ -18,578 +17,414 @@ if (process.env.NODE_ENV !== "production") {
     }
   };
 }
-function addUniqueItem$1(arr, item) {
-  if (arr.indexOf(item) === -1)
-    arr.push(item);
-}
-function removeItem$1(arr, item) {
-  const index = arr.indexOf(item);
-  if (index > -1)
-    arr.splice(index, 1);
+function memo(callback) {
+  let result;
+  return () => {
+    if (result === void 0)
+      result = callback();
+    return result;
+  };
 }
-class SubscriptionManager {
-  constructor() {
-    this.subscriptions = [];
+const progress$1 = (from, to, value) => {
+  const toFromDifference = to - from;
+  return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
+};
+const secondsToMilliseconds$1 = (seconds) => seconds * 1e3;
+const millisecondsToSeconds$1 = (milliseconds) => milliseconds / 1e3;
+const supportsScrollTimeline = memo(() => window.ScrollTimeline !== void 0);
+class BaseGroupPlaybackControls {
+  constructor(animations) {
+    this.stop = () => this.runAll("stop");
+    this.animations = animations.filter(Boolean);
   }
-  add(handler) {
-    addUniqueItem$1(this.subscriptions, handler);
-    return () => removeItem$1(this.subscriptions, handler);
+  get finished() {
+    return Promise.all(this.animations.map((animation) => "finished" in animation ? animation.finished : animation));
   }
-  notify(a, b, c) {
-    const numSubscriptions = this.subscriptions.length;
-    if (!numSubscriptions)
-      return;
-    if (numSubscriptions === 1) {
-      this.subscriptions[0](a, b, c);
-    } else {
-      for (let i = 0; i < numSubscriptions; i++) {
-        const handler = this.subscriptions[i];
-        handler && handler(a, b, c);
+  /**
+   * 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;
   }
-  getSize() {
-    return this.subscriptions.length;
+  runAll(methodName) {
+    this.animations.forEach((controls) => controls[methodName]());
   }
-  clear() {
-    this.subscriptions.length = 0;
+  flatten() {
+    this.runAll("flatten");
+  }
+  play() {
+    this.runAll("play");
+  }
+  pause() {
+    this.runAll("pause");
+  }
+  cancel() {
+    this.runAll("cancel");
+  }
+  complete() {
+    this.runAll("complete");
   }
 }
-function velocityPerSecond(velocity, frameDuration) {
-  return frameDuration ? velocity * (1e3 / frameDuration) : 0;
+class GroupPlaybackControls extends BaseGroupPlaybackControls {
+  then(onResolve, onReject) {
+    return Promise.all(this.animations).then(onResolve).catch(onReject);
+  }
 }
-const warned = /* @__PURE__ */ new Set();
-function warnOnce(condition, message, element) {
-  if (condition || warned.has(message))
-    return;
-  console.warn(message);
-  warned.add(message);
+function getValueTransition$1(transition, key) {
+  return transition ? transition[key] || transition["default"] || transition : void 0;
 }
-const MotionGlobalConfig = {
-  skipAnimations: false,
-  useManualTiming: false
-};
-function createRenderStep(runNextFrame) {
-  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
-  };
-  function triggerCallback(callback) {
-    if (toKeepAlive.has(callback)) {
-      step.schedule(callback);
-      runNextFrame();
-    }
-    callback(latestFrameData);
+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);
   }
-  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);
+  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;
     },
-    /**
-     * Execute all schedule callbacks.
-     */
-    process: (frameData2) => {
-      latestFrameData = frameData2;
-      if (isProcessing) {
-        flushNextFrame = true;
-        return;
-      }
-      isProcessing = true;
-      [thisFrame, nextFrame] = [nextFrame, thisFrame];
-      thisFrame.forEach(triggerCallback);
-      thisFrame.clear();
-      isProcessing = false;
-      if (flushNextFrame) {
-        flushNextFrame = false;
-        step.process(frameData2);
-      }
-    }
+    duration: millisecondsToSeconds$1(duration)
   };
-  return step;
 }
-const stepsOrder = [
-  "read",
-  // Read
-  "resolveKeyframes",
-  // Write/Read/Write/Read
-  "update",
-  // Compute
-  "preRender",
-  // Compute
-  "render",
-  // Write
-  "postRender"
-  // Compute
-];
-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);
-    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);
+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 millisecondsToSeconds$1(Number(durationInMs));
+  }
+  get time() {
+    var _a;
+    if (this.animation) {
+      return millisecondsToSeconds$1(((_a = this.animation) === null || _a === void 0 ? void 0 : _a.currentTime) || 0);
     }
-  };
-  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 } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
-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 0;
+  }
+  set time(newTime) {
+    if (this.animation) {
+      this.animation.currentTime = secondsToMilliseconds$1(newTime);
     }
-    return now;
-  },
-  set: (newTime) => {
-    now = newTime;
-    queueMicrotask(clearTime);
   }
-};
-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.
-   *
-   * @internal
-   */
-  constructor(init, options = {}) {
-    this.version = "11.15.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;
+  get speed() {
+    return this.animation ? this.animation.playbackRate : 1;
   }
-  setCurrent(current) {
-    this.current = current;
-    this.updatedAt = time.now();
-    if (this.canTrackVelocity === null && current !== void 0) {
-      this.canTrackVelocity = isFloat(this.current);
+  set speed(newSpeed) {
+    if (this.animation) {
+      this.animation.playbackRate = newSpeed;
     }
   }
-  setPrevFrameValue(prevFrameValue = this.current) {
-    this.prevFrameValue = prevFrameValue;
-    this.prevUpdatedAt = this.updatedAt;
+  get state() {
+    return this.animation ? this.animation.playState : "finished";
   }
-  /**
-   * 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);
+  get startTime() {
+    return this.animation ? this.animation.startTime : null;
   }
-  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;
+  get finished() {
+    return this.animation ? this.animation.finished : Promise.resolve();
   }
-  clearListeners() {
-    for (const eventManagers in this.events) {
-      this.events[eventManagers].clear();
-    }
+  play() {
+    this.animation && this.animation.play();
   }
-  /**
-   * Attaches a passive effect to the `MotionValue`.
-   *
-   * @internal
-   */
-  attach(passiveEffect, stopPassiveEffect) {
-    this.passiveEffect = passiveEffect;
-    this.stopPassiveEffect = stopPassiveEffect;
+  pause() {
+    this.animation && this.animation.pause();
   }
-  /**
-   * 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);
+  stop() {
+    if (!this.animation || this.state === "idle" || this.state === "finished") {
+      return;
     }
+    if (this.animation.commitStyles) {
+      this.animation.commitStyles();
+    }
+    this.cancel();
   }
-  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();
+  flatten() {
+    var _a;
+    if (!this.animation)
+      return;
+    (_a = this.animation.effect) === null || _a === void 0 ? void 0 : _a.updateTiming({ easing: "linear" });
   }
-  /**
-   * Returns the latest state of `MotionValue`
-   *
-   * @returns - The latest state of `MotionValue`
-   *
-   * @public
-   */
-  get() {
-    if (collectMotionValues.current) {
-      collectMotionValues.current.push(this);
-    }
-    return this.current;
+  attachTimeline(timeline) {
+    if (this.animation)
+      attachTimeline(this.animation, timeline);
+    return noop;
   }
-  /**
-   * @public
-   */
-  getPrevious() {
-    return this.prev;
+  complete() {
+    this.animation && this.animation.finish();
   }
-  /**
-   * 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;
+  cancel() {
+    try {
+      this.animation && this.animation.cancel();
+    } catch (e) {
     }
-    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
-   *
-   * @internal
-   */
-  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);
 }
-function memo(callback) {
-  let result;
+const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
+const supportsFlags = {
+  linearEasing: void 0
+};
+function memoSupports(callback, supportsFlag) {
+  const memoized = memo(callback);
   return () => {
-    if (result === void 0)
-      result = callback();
-    return result;
+    var _a;
+    return (_a = supportsFlags[supportsFlag]) !== null && _a !== void 0 ? _a : memoized();
   };
 }
-const supportsScrollTimeline = memo(() => window.ScrollTimeline !== void 0);
-class GroupPlaybackControls {
-  constructor(animations) {
-    this.stop = () => this.runAll("stop");
-    this.animations = animations.filter(Boolean);
+const supportsLinearEasing = /* @__PURE__ */ memoSupports(() => {
+  try {
+    document.createElement("div").animate({ opacity: 0 }, { easing: "linear(0, 1)" });
+  } catch (e) {
+    return false;
   }
-  then(onResolve, onReject) {
-    return Promise.all(this.animations).then(onResolve).catch(onReject);
+  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(progress$1(0, numPoints - 1, i)) + ", ";
   }
-  /**
-   * TODO: Filter out cancelled or stopped animations before returning
-   */
-  getAll(propName) {
-    return this.animations[0][propName];
+  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];
   }
-  setAll(propName, newValue) {
-    for (let i = 0; i < this.animations.length; i++) {
-      this.animations[i][propName] = newValue;
+}
+const isDragging = {
+  x: false,
+  y: false
+};
+function isDragActive() {
+  return isDragging.y;
+}
+function resolveElements(elementOrSelector, scope, selectorCache) {
+  var _a;
+  if (elementOrSelector instanceof Element) {
+    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) : [];
   }
-  attachTimeline(timeline, fallback) {
-    const subscriptions = this.animations.map((animation) => {
-      if (supportsScrollTimeline() && animation.attachTimeline) {
-        return animation.attachTimeline(timeline);
-      } else {
-        return fallback(animation);
-      }
+  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 filterEvents$1(callback) {
+  return (event) => {
+    if (event.pointerType === "touch" || isDragActive())
+      return;
+    callback(event);
+  };
+}
+function hover(elementOrSelector, onHoverStart, options = {}) {
+  const [elements, eventOptions, cancel] = setupGesture(elementOrSelector, options);
+  const onPointerEnter = filterEvents$1((enterEvent) => {
+    const { target } = enterEvent;
+    const onHoverEnd = onHoverStart(enterEvent);
+    if (typeof onHoverEnd !== "function" || !target)
+      return;
+    const onPointerLeave = filterEvents$1((leaveEvent) => {
+      onHoverEnd(leaveEvent);
+      target.removeEventListener("pointerleave", onPointerLeave);
     });
-    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");
-  }
+    target.addEventListener("pointerleave", onPointerLeave, eventOptions);
+  });
+  elements.forEach((element) => {
+    element.addEventListener("pointerenter", onPointerEnter, eventOptions);
+  });
+  return cancel;
 }
-const progress$1 = (from, to, value) => {
-  const toFromDifference = to - from;
-  return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
+const isNodeOrChild = (parent, child) => {
+  if (!child) {
+    return false;
+  } else if (parent === child) {
+    return true;
+  } else {
+    return isNodeOrChild(parent, child.parentElement);
+  }
 };
-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(progress$1(0, numPoints - 1, i)) + ", ";
+const isPrimaryPointer$1 = (event) => {
+  if (event.pointerType === "mouse") {
+    return typeof event.button !== "number" || event.button <= 0;
+  } else {
+    return event.isPrimary !== false;
   }
-  return `linear(${points.substring(0, points.length - 2)})`;
 };
-const secondsToMilliseconds$1 = (seconds) => seconds * 1e3;
-const millisecondsToSeconds$1 = (milliseconds) => milliseconds / 1e3;
-const velocitySampleDuration = 5;
-function calcGeneratorVelocity(resolveValue, t, current) {
-  const prevT = Math.max(t - velocitySampleDuration, 0);
-  return velocityPerSecond(current - resolveValue(prevT), t - prevT);
+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(elementOrSelector, onPressStart, options = {}) {
+  const [elements, eventOptions, cancelEvents] = setupGesture(elementOrSelector, options);
+  const startPress = (startEvent) => {
+    const element = startEvent.currentTarget;
+    if (!isValidPressEvent(startEvent) || isPressing.has(element))
+      return;
+    isPressing.add(element);
+    const onPressEnd = onPressStart(startEvent);
+    const onPointerEnd = (endEvent, success) => {
+      window.removeEventListener("pointerup", onPointerUp);
+      window.removeEventListener("pointercancel", onPointerCancel);
+      if (!isValidPressEvent(endEvent) || !isPressing.has(element)) {
+        return;
+      }
+      isPressing.delete(element);
+      if (typeof onPressEnd === "function") {
+        onPressEnd(endEvent, { success });
+      }
+    };
+    const onPointerUp = (upEvent) => {
+      onPointerEnd(upEvent, options.useGlobalTarget || isNodeOrChild(element, upEvent.target));
+    };
+    const onPointerCancel = (cancelEvent) => {
+      onPointerEnd(cancelEvent, false);
+    };
+    window.addEventListener("pointerup", onPointerUp, eventOptions);
+    window.addEventListener("pointercancel", onPointerCancel, eventOptions);
+  };
+  elements.forEach((element) => {
+    if (!isElementKeyboardAccessible(element) && element.getAttribute("tabindex") === null) {
+      element.tabIndex = 0;
+    }
+    const target = options.useGlobalTarget ? window : element;
+    target.addEventListener("pointerdown", startPress, eventOptions);
+    element.addEventListener("focus", (event) => enableKeyboardPress(event, eventOptions), eventOptions);
+  });
+  return cancelEvents;
 }
 const clamp$1 = (min, max, v) => {
   if (v > max)
@@ -598,10 +433,18 @@ const clamp$1 = (min, max, v) => {
     return min;
   return v;
 };
-const springDefaults = {
-  // Default spring physics
-  stiffness: 100,
-  damping: 10,
+function velocityPerSecond(velocity, frameDuration) {
+  return frameDuration ? velocity * (1e3 / frameDuration) : 0;
+}
+const velocitySampleDuration = 5;
+function calcGeneratorVelocity(resolveValue, t, current) {
+  const prevT = Math.max(t - velocitySampleDuration, 0);
+  return velocityPerSecond(current - resolveValue(prevT), t - prevT);
+}
+const springDefaults = {
+  // Default spring physics
+  stiffness: 100,
+  damping: 10,
   mass: 1,
   velocity: 0,
   // Default duration/bounce-based options
@@ -695,17 +538,6 @@ function approximateRoot(envelope, derivative, initialGuess) {
 function calcAngularFreq(undampedFreq, dampingRatio) {
   return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
 }
-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;
-}
 const durationKeys = ["duration", "bounce"];
 const physicsKeys = ["stiffness", "damping", "mass"];
 function isSpringType(options, keys2) {
@@ -725,7 +557,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) * Math.sqrt(stiffness);
+      const damping = 2 * clamp$1(0.05, 1, 1 - (options.bounce || 0)) * Math.sqrt(stiffness);
       springOptions = {
         ...springOptions,
         mass: springDefaults.mass,
@@ -808,14 +640,15 @@ function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce
   };
   return generator;
 }
-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) => generator.next(duration * progress2).value / scale2,
-    duration: millisecondsToSeconds$1(duration)
-  };
+const wrap = (min, max, v) => {
+  const rangeSize = max - min;
+  return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
+};
+const isEasingArray = (ease2) => {
+  return Array.isArray(ease2) && typeof ease2[0] !== "number";
+};
+function getEasingForSegment(easing, i) {
+  return isEasingArray(easing) ? easing[wrap(0, easing.length, i)] : easing;
 }
 const mixNumber$2 = (from, to, progress2) => {
   return from + (to - from) * progress2;
@@ -838,7 +671,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)) {
@@ -847,8 +680,8 @@ function resolveSubjects(subject, keyframes2, scope, selectorCache) {
     return [subject];
   }
 }
-function isGenerator(type) {
-  return typeof type === "function";
+function calculateRepeatDuration(duration, repeat, _repeatDelay) {
+  return duration * (repeat + 1);
 }
 function calcNextTime(current, next, prev, labels) {
   var _a;
@@ -862,21 +695,20 @@ function calcNextTime(current, next, prev, labels) {
     return (_a = labels.get(next)) !== null && _a !== void 0 ? _a : current;
   }
 }
-const wrap = (min, max, v) => {
-  const rangeSize = max - min;
-  return ((v - min) % rangeSize + rangeSize) % rangeSize + min;
-};
-const isEasingArray = (ease2) => {
-  return Array.isArray(ease2) && typeof ease2[0] !== "number";
-};
-function getEasingForSegment(easing, i) {
-  return isEasingArray(easing) ? easing[wrap(0, easing.length, i)] : easing;
+function addUniqueItem(arr, item) {
+  if (arr.indexOf(item) === -1)
+    arr.push(item);
+}
+function removeItem(arr, item) {
+  const index = arr.indexOf(item);
+  if (index > -1)
+    arr.splice(index, 1);
 }
 function eraseKeyframes(sequence, startTime, endTime) {
   for (let i = 0; i < sequence.length; i++) {
     const keyframe = sequence[i];
     if (keyframe.at > startTime && keyframe.at < endTime) {
-      removeItem$1(sequence, keyframe);
+      removeItem(sequence, keyframe);
       i--;
     }
   }
@@ -891,6 +723,11 @@ function addKeyframes(sequence, keyframes2, easing, offset, startTime, endTime)
     });
   }
 }
+function normalizeTimes(times, repeat) {
+  for (let i = 0; i < times.length; i++) {
+    times[i] = times[i] / (repeat + 1);
+  }
+}
 function compareByTime(a, b) {
   if (a.at === b.at) {
     if (a.value === null)
@@ -902,14 +739,6 @@ function compareByTime(a, b) {
     return a.at - b.at;
   }
 }
-function normalizeTimes(times, repeat) {
-  for (let i = 0; i < times.length; i++) {
-    times[i] = times[i] / (repeat + 1);
-  }
-}
-function calculateRepeatDuration(duration, repeat, _repeatDelay) {
-  return duration * (repeat + 1);
-}
 const defaultSegmentEasing = "easeInOut";
 const MAX_REPEAT = 20;
 function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...sequenceTransition } = {}, scope, generators2) {
@@ -997,7 +826,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
         const thisSubject = subjects[subjectIndex];
         const subjectSequence = getSubjectSequence(thisSubject, sequences);
         for (const key in keyframes2) {
-          resolveValueSequence(keyframes2[key], getValueTransition$1(transition, key), getValueSequence(key, subjectSequence), subjectIndex, numSubjects);
+          resolveValueSequence(keyframes2[key], getValueTransition(transition, key), getValueSequence(key, subjectSequence), subjectIndex, numSubjects);
         }
       }
     }
@@ -1057,7 +886,7 @@ function getValueSequence(name, sequences) {
 function keyframesAsList(keyframes2) {
   return Array.isArray(keyframes2) ? keyframes2 : [keyframes2];
 }
-function getValueTransition$1(transition, key) {
+function getValueTransition(transition, key) {
   return transition && transition[key] ? {
     ...transition,
     ...transition[key]
@@ -1086,150 +915,6 @@ const transformPropOrder = [
   "skewY"
 ];
 const transformProps = new Set(transformPropOrder);
-const underDampedSpring = {
-  type: "spring",
-  stiffness: 500,
-  damping: 25,
-  restSpeed: 10
-};
-const criticallyDampedSpring = (target) => ({
-  type: "spring",
-  stiffness: 550,
-  damping: target === 0 ? 2 * Math.sqrt(550) : 30,
-  restSpeed: 10
-});
-const keyframesTransition = {
-  type: "keyframes",
-  duration: 0.8
-};
-const ease = {
-  type: "keyframes",
-  ease: [0.25, 0.1, 0.35, 1],
-  duration: 0.3
-};
-const getDefaultTransition = (valueKey, { keyframes: keyframes2 }) => {
-  if (keyframes2.length > 2) {
-    return keyframesTransition;
-  } else if (transformProps.has(valueKey)) {
-    return valueKey.startsWith("scale") ? criticallyDampedSpring(keyframes2[1]) : underDampedSpring;
-  }
-  return ease;
-};
-function getValueTransition(transition, key) {
-  return transition ? transition[key] || transition["default"] || transition : void 0;
-}
-const isNotNull = (value) => value !== null;
-function getFinalKeyframe(keyframes2, { repeat, repeatType = "loop" }, finalKeyframe) {
-  const resolvedKeyframes = keyframes2.filter(isNotNull);
-  const index = repeat && repeatType !== "loop" && repeat % 2 === 1 ? 0 : resolvedKeyframes.length - 1;
-  return !index || finalKeyframe === void 0 ? resolvedKeyframes[index] : finalKeyframe;
-}
-const calcBezier = (t, a1, a2) => (((1 - 3 * a2 + 3 * a1) * t + (3 * a2 - 6 * a1)) * t + 3 * a1) * t;
-const subdivisionPrecision = 1e-7;
-const subdivisionMaxIterations = 12;
-function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
-  let currentX;
-  let currentT;
-  let i = 0;
-  do {
-    currentT = lowerBound + (upperBound - lowerBound) / 2;
-    currentX = calcBezier(currentT, mX1, mX2) - x;
-    if (currentX > 0) {
-      upperBound = currentT;
-    } else {
-      lowerBound = currentT;
-    }
-  } while (Math.abs(currentX) > subdivisionPrecision && ++i < subdivisionMaxIterations);
-  return currentT;
-}
-function cubicBezier(mX1, mY1, mX2, mY2) {
-  if (mX1 === mY1 && mX2 === mY2)
-    return noop;
-  const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
-  return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
-}
-const mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;
-const reverseEasing = (easing) => (p) => 1 - easing(1 - p);
-const backOut = /* @__PURE__ */ cubicBezier(0.33, 1.53, 0.69, 0.99);
-const backIn = /* @__PURE__ */ reverseEasing(backOut);
-const backInOut = /* @__PURE__ */ mirrorEasing(backIn);
-const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
-const circIn = (p) => 1 - Math.sin(Math.acos(p));
-const circOut = reverseEasing(circIn);
-const circInOut = mirrorEasing(circIn);
-const isZeroValueString = (v) => /^0[^.\s]+$/u.test(v);
-function isNone(value) {
-  if (typeof value === "number") {
-    return value === 0;
-  } else if (value !== null) {
-    return value === "none" || value === "0" || isZeroValueString(value);
-  } else {
-    return true;
-  }
-}
-const isNumericalString = (v) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(v);
-const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
-const isCSSVariableName = /* @__PURE__ */ checkStringStartsWith("--");
-const startsAsVariableToken = /* @__PURE__ */ checkStringStartsWith("var(--");
-const isCSSVariableToken = (value) => {
-  const startsWithToken = startsAsVariableToken(value);
-  if (!startsWithToken)
-    return false;
-  return singleCssVariableRegex.test(value.split("/*")[0].trim());
-};
-const singleCssVariableRegex = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu;
-const splitCSSVariableRegex = (
-  // eslint-disable-next-line redos-detector/no-unsafe-regex -- false positive, as it can match a lot of words
-  /^var\(--(?:([\w-]+)|([\w-]+), ?([a-zA-Z\d ()%#.,-]+))\)/u
-);
-function parseCSSVariable(current) {
-  const match = splitCSSVariableRegex.exec(current);
-  if (!match)
-    return [,];
-  const [, token1, token2, fallback] = match;
-  return [`--${token1 !== null && token1 !== void 0 ? token1 : token2}`, fallback];
-}
-const maxDepth = 4;
-function getVariableValue(current, element, depth = 1) {
-  exports.invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`);
-  const [token, fallback] = parseCSSVariable(current);
-  if (!token)
-    return;
-  const resolved = window.getComputedStyle(element).getPropertyValue(token);
-  if (resolved) {
-    const trimmed = resolved.trim();
-    return isNumericalString(trimmed) ? parseFloat(trimmed) : trimmed;
-  }
-  return isCSSVariableToken(fallback) ? getVariableValue(fallback, element, depth + 1) : fallback;
-}
-const number = {
-  test: (v) => typeof v === "number",
-  parse: parseFloat,
-  transform: (v) => v
-};
-const alpha = {
-  ...number,
-  transform: (v) => clamp$1(0, 1, v)
-};
-const scale = {
-  ...number,
-  default: 1
-};
-const createUnitType$1 = (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 = /* @__PURE__ */ createUnitType$1("px");
-const vh = /* @__PURE__ */ createUnitType$1("vh");
-const vw = /* @__PURE__ */ createUnitType$1("vw");
-const progressPercentage = {
-  ...percent$1,
-  parse: (v) => percent$1.parse(v) / 100,
-  transform: (v) => percent$1.transform(v * 100)
-};
 const positionalKeys = /* @__PURE__ */ new Set([
   "width",
   "height",
@@ -1237,190 +922,588 @@ const positionalKeys = /* @__PURE__ */ new Set([
   "left",
   "right",
   "bottom",
-  "x",
-  "y",
-  "translateX",
-  "translateY"
+  ...transformPropOrder
 ]);
-const isNumOrPxType = (v) => v === number || v === px;
-const getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]);
-const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform: transform2 }) => {
-  if (transform2 === "none" || !transform2)
-    return 0;
-  const matrix3d = transform2.match(/^matrix3d\((.+)\)$/u);
-  if (matrix3d) {
-    return getPosFromMatrix(matrix3d[1], pos3);
-  } else {
-    const matrix = transform2.match(/^matrix\((.+)\)$/u);
-    if (matrix) {
-      return getPosFromMatrix(matrix[1], pos2);
-    } else {
-      return 0;
-    }
-  }
+const isKeyframesTarget = (v) => {
+  return Array.isArray(v);
 };
-const transformKeys = /* @__PURE__ */ new Set(["x", "y", "z"]);
-const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
-function removeNonTranslationalTransform(visualElement) {
-  const removedTransforms = [];
-  nonTranslationalTransformKeys.forEach((key) => {
-    const value = visualElement.getValue(key);
-    if (value !== void 0) {
-      removedTransforms.push([key, value.get()]);
-      value.set(key.startsWith("scale") ? 1 : 0);
-    }
-  });
-  return removedTransforms;
-}
-const positionalValues = {
-  // Dimensions
-  width: ({ x }, { paddingLeft = "0", paddingRight = "0" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight),
-  height: ({ y }, { paddingTop = "0", paddingBottom = "0" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom),
-  top: (_bbox, { top }) => parseFloat(top),
-  left: (_bbox, { left }) => parseFloat(left),
-  bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),
-  right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min),
-  // Transform
-  x: getTranslateFromMatrix(4, 13),
-  y: getTranslateFromMatrix(5, 14)
+const isCustomValue = (v) => {
+  return Boolean(v && typeof v === "object" && v.mix && v.toValue);
 };
-positionalValues.translateX = positionalValues.x;
-positionalValues.translateY = positionalValues.y;
-const testValueType = (v) => (type) => type.test(v);
-const auto = {
-  test: (v) => v === "auto",
-  parse: (v) => v
+const resolveFinalValueInKeyframes = (v) => {
+  return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
 };
-const dimensionValueTypes = [number, px, percent$1, degrees, vw, vh, auto];
-const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v));
-const toResolve = /* @__PURE__ */ new Set();
-let isScheduled = false;
-let anyNeedsMeasurement = false;
-function measureAllKeyframes() {
-  if (anyNeedsMeasurement) {
-    const resolversToMeasure = Array.from(toResolve).filter((resolver) => resolver.needsMeasurement);
-    const elementsToMeasure = new Set(resolversToMeasure.map((resolver) => resolver.element));
-    const transformsToRestore = /* @__PURE__ */ new Map();
-    elementsToMeasure.forEach((element) => {
-      const removedTransforms = removeNonTranslationalTransform(element);
-      if (!removedTransforms.length)
+const MotionGlobalConfig = {
+  skipAnimations: false,
+  useManualTiming: false
+};
+function createRenderStep(runNextFrame) {
+  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
+  };
+  function triggerCallback(callback) {
+    if (toKeepAlive.has(callback)) {
+      step.schedule(callback);
+      runNextFrame();
+    }
+    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;
-      transformsToRestore.set(element, removedTransforms);
-      element.render();
-    });
-    resolversToMeasure.forEach((resolver) => resolver.measureInitialState());
-    elementsToMeasure.forEach((element) => {
-      element.render();
-      const restore = transformsToRestore.get(element);
-      if (restore) {
-        restore.forEach(([key, value]) => {
-          var _a;
-          (_a = element.getValue(key)) === null || _a === void 0 ? void 0 : _a.set(value);
-        });
       }
-    });
-    resolversToMeasure.forEach((resolver) => resolver.measureEndState());
-    resolversToMeasure.forEach((resolver) => {
-      if (resolver.suspendedScrollY !== void 0) {
-        window.scrollTo(0, resolver.suspendedScrollY);
+      isProcessing = true;
+      [thisFrame, nextFrame] = [nextFrame, thisFrame];
+      thisFrame.forEach(triggerCallback);
+      thisFrame.clear();
+      isProcessing = false;
+      if (flushNextFrame) {
+        flushNextFrame = false;
+        step.process(frameData2);
       }
-    });
-  }
-  anyNeedsMeasurement = false;
-  isScheduled = false;
-  toResolve.forEach((resolver) => resolver.complete());
-  toResolve.clear();
+    }
+  };
+  return step;
 }
-function readAllKeyframes() {
-  toResolve.forEach((resolver) => {
-    resolver.readKeyframes();
-    if (resolver.needsMeasurement) {
-      anyNeedsMeasurement = true;
+const stepsOrder = [
+  "read",
+  // Read
+  "resolveKeyframes",
+  // Write/Read/Write/Read
+  "update",
+  // Compute
+  "preRender",
+  // Compute
+  "render",
+  // Write
+  "postRender"
+  // Compute
+];
+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);
+    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 };
 }
-function flushKeyframeResolvers() {
-  readAllKeyframes();
-  measureAllKeyframes();
+const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
+let now;
+function clearTime() {
+  now = void 0;
 }
-class KeyframeResolver {
-  constructor(unresolvedKeyframes, onComplete, name, motionValue2, element, isAsync = false) {
-    this.isComplete = false;
-    this.isAsync = false;
-    this.needsMeasurement = false;
-    this.isScheduled = false;
-    this.unresolvedKeyframes = [...unresolvedKeyframes];
-    this.onComplete = onComplete;
-    this.name = name;
-    this.motionValue = motionValue2;
-    this.element = element;
-    this.isAsync = isAsync;
+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);
   }
-  scheduleResolve() {
-    this.isScheduled = true;
-    if (this.isAsync) {
-      toResolve.add(this);
-      if (!isScheduled) {
-        isScheduled = true;
-        frame.read(readAllKeyframes);
-        frame.resolveKeyframes(measureAllKeyframes);
-      }
+};
+class SubscriptionManager {
+  constructor() {
+    this.subscriptions = [];
+  }
+  add(handler) {
+    addUniqueItem(this.subscriptions, handler);
+    return () => removeItem(this.subscriptions, handler);
+  }
+  notify(a, b, c) {
+    const numSubscriptions = this.subscriptions.length;
+    if (!numSubscriptions)
+      return;
+    if (numSubscriptions === 1) {
+      this.subscriptions[0](a, b, c);
     } else {
-      this.readKeyframes();
-      this.complete();
+      for (let i = 0; i < numSubscriptions; i++) {
+        const handler = this.subscriptions[i];
+        handler && handler(a, b, c);
+      }
     }
   }
-  readKeyframes() {
-    const { unresolvedKeyframes, name, element, motionValue: motionValue2 } = this;
-    for (let i = 0; i < unresolvedKeyframes.length; i++) {
-      if (unresolvedKeyframes[i] === null) {
-        if (i === 0) {
-          const currentValue = motionValue2 === null || motionValue2 === void 0 ? void 0 : motionValue2.get();
-          const finalKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
-          if (currentValue !== void 0) {
-            unresolvedKeyframes[0] = currentValue;
-          } else if (element && name) {
-            const valueAsRead = element.readValue(name, finalKeyframe);
-            if (valueAsRead !== void 0 && valueAsRead !== null) {
-              unresolvedKeyframes[0] = valueAsRead;
-            }
-          }
-          if (unresolvedKeyframes[0] === void 0) {
-            unresolvedKeyframes[0] = finalKeyframe;
-          }
-          if (motionValue2 && currentValue === void 0) {
-            motionValue2.set(unresolvedKeyframes[0]);
+  getSize() {
+    return this.subscriptions.length;
+  }
+  clear() {
+    this.subscriptions.length = 0;
+  }
+}
+const warned = /* @__PURE__ */ new Set();
+function warnOnce(condition, message, element) {
+  if (condition || warned.has(message))
+    return;
+  console.warn(message);
+  warned.add(message);
+}
+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.
+   *
+   * @internal
+   */
+  constructor(init, options = {}) {
+    this.version = "11.16.6";
+    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();
           }
-        } else {
-          unresolvedKeyframes[i] = unresolvedKeyframes[i - 1];
-        }
+        });
+      };
+    }
+    return unsubscribe;
+  }
+  clearListeners() {
+    for (const eventManagers in this.events) {
+      this.events[eventManagers].clear();
+    }
+  }
+  /**
+   * Attaches a passive effect to the `MotionValue`.
+   *
+   * @internal
+   */
+  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
+   *
+   * @internal
+   */
+  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();
   }
-  setFinalKeyframe() {
+  /**
+   * Returns `true` if this value is currently animating.
+   *
+   * @public
+   */
+  isAnimating() {
+    return !!this.animation;
   }
-  measureInitialState() {
+  clearAnimation() {
+    delete this.animation;
   }
-  renderEndStyles() {
+  /**
+   * 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);
+}
+function getValueState(visualElement) {
+  const state2 = [{}, {}];
+  visualElement === null || visualElement === void 0 ? void 0 : visualElement.values.forEach((value, key) => {
+    state2[0][key] = value.get();
+    state2[1][key] = value.getVelocity();
+  });
+  return state2;
+}
+function resolveVariantFromProps(props, definition, custom, visualElement) {
+  if (typeof definition === "function") {
+    const [current, velocity] = getValueState(visualElement);
+    definition = definition(custom !== void 0 ? custom : props.custom, current, velocity);
+  }
+  if (typeof definition === "string") {
+    definition = props.variants && props.variants[definition];
+  }
+  if (typeof definition === "function") {
+    const [current, velocity] = getValueState(visualElement);
+    definition = definition(custom !== void 0 ? custom : props.custom, current, velocity);
+  }
+  return definition;
+}
+function resolveVariant$1(visualElement, definition, custom) {
+  const props = visualElement.getProps();
+  return resolveVariantFromProps(props, definition, props.custom, visualElement);
+}
+function setMotionValue(visualElement, key, value) {
+  if (visualElement.hasValue(key)) {
+    visualElement.getValue(key).set(value);
+  } else {
+    visualElement.addValue(key, motionValue(value));
   }
-  measureEndState() {
+}
+function setTarget(visualElement, definition) {
+  const resolved = resolveVariant$1(visualElement, definition);
+  let { transitionEnd = {}, transition = {}, ...target } = resolved || {};
+  target = { ...target, ...transitionEnd };
+  for (const key in target) {
+    const value = resolveFinalValueInKeyframes(target[key]);
+    setMotionValue(visualElement, key, value);
   }
-  complete() {
-    this.isComplete = true;
-    this.onComplete(this.unresolvedKeyframes, this.finalKeyframe);
-    toResolve.delete(this);
+}
+function isWillChangeMotionValue$1(value) {
+  return Boolean(isMotionValue$1(value) && value.add);
+}
+function addValueToWillChange$1(visualElement, key) {
+  const willChange = visualElement.getValue("willChange");
+  if (isWillChangeMotionValue$1(willChange)) {
+    return willChange.add(key);
   }
-  cancel() {
-    if (!this.isComplete) {
-      this.isScheduled = false;
-      toResolve.delete(this);
+}
+const camelToDash = (str) => str.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase();
+const optimizedAppearDataId = "framerAppearId";
+const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
+function getOptimisedAppearId(visualElement) {
+  return visualElement.props[optimizedAppearDataAttribute];
+}
+const calcBezier = (t, a1, a2) => (((1 - 3 * a2 + 3 * a1) * t + (3 * a2 - 6 * a1)) * t + 3 * a1) * t;
+const subdivisionPrecision = 1e-7;
+const subdivisionMaxIterations = 12;
+function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
+  let currentX;
+  let currentT;
+  let i = 0;
+  do {
+    currentT = lowerBound + (upperBound - lowerBound) / 2;
+    currentX = calcBezier(currentT, mX1, mX2) - x;
+    if (currentX > 0) {
+      upperBound = currentT;
+    } else {
+      lowerBound = currentT;
     }
-  }
-  resume() {
-    if (!this.isComplete)
-      this.scheduleResolve();
+  } while (Math.abs(currentX) > subdivisionPrecision && ++i < subdivisionMaxIterations);
+  return currentT;
+}
+function cubicBezier(mX1, mY1, mX2, mY2) {
+  if (mX1 === mY1 && mX2 === mY2)
+    return noop;
+  const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
+  return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
+}
+const mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;
+const reverseEasing = (easing) => (p) => 1 - easing(1 - p);
+const backOut = /* @__PURE__ */ cubicBezier(0.33, 1.53, 0.69, 0.99);
+const backIn = /* @__PURE__ */ reverseEasing(backOut);
+const backInOut = /* @__PURE__ */ mirrorEasing(backIn);
+const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
+const circIn = (p) => 1 - Math.sin(Math.acos(p));
+const circOut = reverseEasing(circIn);
+const circInOut = mirrorEasing(circIn);
+const isZeroValueString = (v) => /^0[^.\s]+$/u.test(v);
+function isNone(value) {
+  if (typeof value === "number") {
+    return value === 0;
+  } else if (value !== null) {
+    return value === "none" || value === "0" || isZeroValueString(value);
+  } else {
+    return true;
   }
 }
+const number = {
+  test: (v) => typeof v === "number",
+  parse: parseFloat,
+  transform: (v) => v
+};
+const alpha = {
+  ...number,
+  transform: (v) => clamp$1(0, 1, v)
+};
+const scale = {
+  ...number,
+  default: 1
+};
 const sanitize = (v) => Math.round(v * 1e5) / 1e5;
 const floatRegex = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu;
 function isNullish(v) {
@@ -1483,6 +1566,21 @@ const hex = {
   parse: parseHex,
   transform: rgba.transform
 };
+const createUnitType$1 = (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 = /* @__PURE__ */ createUnitType$1("px");
+const vh = /* @__PURE__ */ createUnitType$1("vh");
+const vw = /* @__PURE__ */ createUnitType$1("vw");
+const progressPercentage = {
+  ...percent$1,
+  parse: (v) => percent$1.parse(v) / 100,
+  transform: (v) => percent$1.transform(v * 100)
+};
 const hsla = {
   test: /* @__PURE__ */ isColorString("hsl", "hue"),
   parse: /* @__PURE__ */ splitColor("hue", "saturation", "lightness"),
@@ -1714,14 +1812,228 @@ function makeNoneKeyframesAnimatable(unresolvedKeyframes, noneKeyframeIndexes, n
     if (typeof keyframe === "string" && !invalidTemplates.has(keyframe) && analyseComplexValue(keyframe).values.length) {
       animatableTemplate = unresolvedKeyframes[i];
     }
-    i++;
+    i++;
+  }
+  if (animatableTemplate && name) {
+    for (const noneIndex of noneKeyframeIndexes) {
+      unresolvedKeyframes[noneIndex] = getAnimatableNone(name, animatableTemplate);
+    }
+  }
+}
+const isNumOrPxType = (v) => v === number || v === px;
+const getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]);
+const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform: transform2 }) => {
+  if (transform2 === "none" || !transform2)
+    return 0;
+  const matrix3d = transform2.match(/^matrix3d\((.+)\)$/u);
+  if (matrix3d) {
+    return getPosFromMatrix(matrix3d[1], pos3);
+  } else {
+    const matrix = transform2.match(/^matrix\((.+)\)$/u);
+    if (matrix) {
+      return getPosFromMatrix(matrix[1], pos2);
+    } else {
+      return 0;
+    }
+  }
+};
+const transformKeys = /* @__PURE__ */ new Set(["x", "y", "z"]);
+const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
+function removeNonTranslationalTransform(visualElement) {
+  const removedTransforms = [];
+  nonTranslationalTransformKeys.forEach((key) => {
+    const value = visualElement.getValue(key);
+    if (value !== void 0) {
+      removedTransforms.push([key, value.get()]);
+      value.set(key.startsWith("scale") ? 1 : 0);
+    }
+  });
+  return removedTransforms;
+}
+const positionalValues = {
+  // Dimensions
+  width: ({ x }, { paddingLeft = "0", paddingRight = "0" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight),
+  height: ({ y }, { paddingTop = "0", paddingBottom = "0" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom),
+  top: (_bbox, { top }) => parseFloat(top),
+  left: (_bbox, { left }) => parseFloat(left),
+  bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),
+  right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min),
+  // Transform
+  x: getTranslateFromMatrix(4, 13),
+  y: getTranslateFromMatrix(5, 14)
+};
+positionalValues.translateX = positionalValues.x;
+positionalValues.translateY = positionalValues.y;
+const toResolve = /* @__PURE__ */ new Set();
+let isScheduled = false;
+let anyNeedsMeasurement = false;
+function measureAllKeyframes() {
+  if (anyNeedsMeasurement) {
+    const resolversToMeasure = Array.from(toResolve).filter((resolver) => resolver.needsMeasurement);
+    const elementsToMeasure = new Set(resolversToMeasure.map((resolver) => resolver.element));
+    const transformsToRestore = /* @__PURE__ */ new Map();
+    elementsToMeasure.forEach((element) => {
+      const removedTransforms = removeNonTranslationalTransform(element);
+      if (!removedTransforms.length)
+        return;
+      transformsToRestore.set(element, removedTransforms);
+      element.render();
+    });
+    resolversToMeasure.forEach((resolver) => resolver.measureInitialState());
+    elementsToMeasure.forEach((element) => {
+      element.render();
+      const restore = transformsToRestore.get(element);
+      if (restore) {
+        restore.forEach(([key, value]) => {
+          var _a;
+          (_a = element.getValue(key)) === null || _a === void 0 ? void 0 : _a.set(value);
+        });
+      }
+    });
+    resolversToMeasure.forEach((resolver) => resolver.measureEndState());
+    resolversToMeasure.forEach((resolver) => {
+      if (resolver.suspendedScrollY !== void 0) {
+        window.scrollTo(0, resolver.suspendedScrollY);
+      }
+    });
+  }
+  anyNeedsMeasurement = false;
+  isScheduled = false;
+  toResolve.forEach((resolver) => resolver.complete());
+  toResolve.clear();
+}
+function readAllKeyframes() {
+  toResolve.forEach((resolver) => {
+    resolver.readKeyframes();
+    if (resolver.needsMeasurement) {
+      anyNeedsMeasurement = true;
+    }
+  });
+}
+function flushKeyframeResolvers() {
+  readAllKeyframes();
+  measureAllKeyframes();
+}
+class KeyframeResolver {
+  constructor(unresolvedKeyframes, onComplete, name, motionValue2, element, isAsync = false) {
+    this.isComplete = false;
+    this.isAsync = false;
+    this.needsMeasurement = false;
+    this.isScheduled = false;
+    this.unresolvedKeyframes = [...unresolvedKeyframes];
+    this.onComplete = onComplete;
+    this.name = name;
+    this.motionValue = motionValue2;
+    this.element = element;
+    this.isAsync = isAsync;
+  }
+  scheduleResolve() {
+    this.isScheduled = true;
+    if (this.isAsync) {
+      toResolve.add(this);
+      if (!isScheduled) {
+        isScheduled = true;
+        frame.read(readAllKeyframes);
+        frame.resolveKeyframes(measureAllKeyframes);
+      }
+    } else {
+      this.readKeyframes();
+      this.complete();
+    }
+  }
+  readKeyframes() {
+    const { unresolvedKeyframes, name, element, motionValue: motionValue2 } = this;
+    for (let i = 0; i < unresolvedKeyframes.length; i++) {
+      if (unresolvedKeyframes[i] === null) {
+        if (i === 0) {
+          const currentValue = motionValue2 === null || motionValue2 === void 0 ? void 0 : motionValue2.get();
+          const finalKeyframe = unresolvedKeyframes[unresolvedKeyframes.length - 1];
+          if (currentValue !== void 0) {
+            unresolvedKeyframes[0] = currentValue;
+          } else if (element && name) {
+            const valueAsRead = element.readValue(name, finalKeyframe);
+            if (valueAsRead !== void 0 && valueAsRead !== null) {
+              unresolvedKeyframes[0] = valueAsRead;
+            }
+          }
+          if (unresolvedKeyframes[0] === void 0) {
+            unresolvedKeyframes[0] = finalKeyframe;
+          }
+          if (motionValue2 && currentValue === void 0) {
+            motionValue2.set(unresolvedKeyframes[0]);
+          }
+        } else {
+          unresolvedKeyframes[i] = unresolvedKeyframes[i - 1];
+        }
+      }
+    }
   }
-  if (animatableTemplate && name) {
-    for (const noneIndex of noneKeyframeIndexes) {
-      unresolvedKeyframes[noneIndex] = getAnimatableNone(name, animatableTemplate);
+  setFinalKeyframe() {
+  }
+  measureInitialState() {
+  }
+  renderEndStyles() {
+  }
+  measureEndState() {
+  }
+  complete() {
+    this.isComplete = true;
+    this.onComplete(this.unresolvedKeyframes, this.finalKeyframe);
+    toResolve.delete(this);
+  }
+  cancel() {
+    if (!this.isComplete) {
+      this.isScheduled = false;
+      toResolve.delete(this);
     }
   }
+  resume() {
+    if (!this.isComplete)
+      this.scheduleResolve();
+  }
+}
+const isNumericalString = (v) => /^-?(?:\d+(?:\.\d+)?|\.\d+)$/u.test(v);
+const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
+const isCSSVariableName = /* @__PURE__ */ checkStringStartsWith("--");
+const startsAsVariableToken = /* @__PURE__ */ checkStringStartsWith("var(--");
+const isCSSVariableToken = (value) => {
+  const startsWithToken = startsAsVariableToken(value);
+  if (!startsWithToken)
+    return false;
+  return singleCssVariableRegex.test(value.split("/*")[0].trim());
+};
+const singleCssVariableRegex = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu;
+const splitCSSVariableRegex = (
+  // eslint-disable-next-line redos-detector/no-unsafe-regex -- false positive, as it can match a lot of words
+  /^var\(--(?:([\w-]+)|([\w-]+), ?([a-zA-Z\d ()%#.,-]+))\)/u
+);
+function parseCSSVariable(current) {
+  const match = splitCSSVariableRegex.exec(current);
+  if (!match)
+    return [,];
+  const [, token1, token2, fallback] = match;
+  return [`--${token1 !== null && token1 !== void 0 ? token1 : token2}`, fallback];
+}
+const maxDepth = 4;
+function getVariableValue(current, element, depth = 1) {
+  exports.invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`);
+  const [token, fallback] = parseCSSVariable(current);
+  if (!token)
+    return;
+  const resolved = window.getComputedStyle(element).getPropertyValue(token);
+  if (resolved) {
+    const trimmed = resolved.trim();
+    return isNumericalString(trimmed) ? parseFloat(trimmed) : trimmed;
+  }
+  return isCSSVariableToken(fallback) ? getVariableValue(fallback, element, depth + 1) : fallback;
 }
+const testValueType = (v) => (type) => type.test(v);
+const auto = {
+  test: (v) => v === "auto",
+  parse: (v) => v
+};
+const dimensionValueTypes = [number, px, percent$1, degrees, vw, vh, auto];
+const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v));
 class DOMKeyframesResolver extends KeyframeResolver {
   constructor(unresolvedKeyframes, onComplete, name, motionValue2, element) {
     super(unresolvedKeyframes, onComplete, name, motionValue2, element, true);
@@ -1849,6 +2161,12 @@ function canAnimate(keyframes2, name, type, velocity) {
   }
   return hasKeyframesChanged(keyframes2) || (type === "spring" || isGenerator(type)) && velocity;
 }
+const isNotNull = (value) => value !== null;
+function getFinalKeyframe(keyframes2, { repeat, repeatType = "loop" }, finalKeyframe) {
+  const resolvedKeyframes = keyframes2.filter(isNotNull);
+  const index = repeat && repeatType !== "loop" && repeat % 2 === 1 ? 0 : resolvedKeyframes.length - 1;
+  return !index || finalKeyframe === void 0 ? resolvedKeyframes[index] : finalKeyframe;
+}
 const MAX_RESOLVE_DELAY = 40;
 class BaseAnimation {
   constructor({ autoplay = true, delay: delay2 = 0, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop", ...options }) {
@@ -1941,98 +2259,6 @@ class BaseAnimation {
     });
   }
 }
-function inertia({ keyframes: keyframes2, velocity = 0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min, max, restDelta = 0.5, restSpeed }) {
-  const origin = keyframes2[0];
-  const state2 = {
-    done: false,
-    value: origin
-  };
-  const isOutOfBounds = (v) => min !== void 0 && v < min || max !== void 0 && v > max;
-  const nearestBoundary = (v) => {
-    if (min === void 0)
-      return max;
-    if (max === void 0)
-      return min;
-    return Math.abs(min - v) < Math.abs(max - v) ? min : max;
-  };
-  let amplitude = power * velocity;
-  const ideal = origin + amplitude;
-  const target = modifyTarget === void 0 ? ideal : modifyTarget(ideal);
-  if (target !== ideal)
-    amplitude = target - origin;
-  const calcDelta = (t) => -amplitude * Math.exp(-t / timeConstant);
-  const calcLatest = (t) => target + calcDelta(t);
-  const applyFriction = (t) => {
-    const delta = calcDelta(t);
-    const latest = calcLatest(t);
-    state2.done = Math.abs(delta) <= restDelta;
-    state2.value = state2.done ? target : latest;
-  };
-  let timeReachedBoundary;
-  let spring$1;
-  const checkCatchBoundary = (t) => {
-    if (!isOutOfBounds(state2.value))
-      return;
-    timeReachedBoundary = t;
-    spring$1 = spring({
-      keyframes: [state2.value, nearestBoundary(state2.value)],
-      velocity: calcGeneratorVelocity(calcLatest, t, state2.value),
-      // TODO: This should be passing * 1000
-      damping: bounceDamping,
-      stiffness: bounceStiffness,
-      restDelta,
-      restSpeed
-    });
-  };
-  checkCatchBoundary(0);
-  return {
-    calculatedDuration: null,
-    next: (t) => {
-      let hasUpdatedFrame = false;
-      if (!spring$1 && timeReachedBoundary === void 0) {
-        hasUpdatedFrame = true;
-        applyFriction(t);
-        checkCatchBoundary(t);
-      }
-      if (timeReachedBoundary !== void 0 && t >= timeReachedBoundary) {
-        return spring$1.next(t - timeReachedBoundary);
-      } else {
-        !hasUpdatedFrame && applyFriction(t);
-        return state2;
-      }
-    }
-  };
-}
-const easeIn = /* @__PURE__ */ cubicBezier(0.42, 0, 1, 1);
-const easeOut = /* @__PURE__ */ cubicBezier(0, 0, 0.58, 1);
-const easeInOut = /* @__PURE__ */ cubicBezier(0.42, 0, 0.58, 1);
-const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number";
-const easingLookup = {
-  linear: noop,
-  easeIn,
-  easeInOut,
-  easeOut,
-  circIn,
-  circInOut,
-  circOut,
-  backIn,
-  backInOut,
-  backOut,
-  anticipate
-};
-const easingDefinitionToFunction = (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);
-  } else if (typeof definition === "string") {
-    exports.invariant(easingLookup[definition] !== void 0, `Invalid easing type '${definition}'`);
-    return easingLookup[definition];
-  }
-  return definition;
-};
-const combineFunctions = (a, b) => (v) => b(a(v));
-const pipe = (...transformers) => transformers.reduce(combineFunctions);
 function hueToRgb(p, q, t) {
   if (t < 0)
     t += 1;
@@ -2105,6 +2331,8 @@ const mixColor = (from, to) => {
     return rgba.transform(blended);
   };
 };
+const combineFunctions = (a, b) => (v) => b(a(v));
+const pipe = (...transformers) => transformers.reduce(combineFunctions);
 const invisibleValues = /* @__PURE__ */ new Set(["none", "hidden"]);
 function mixVisibility(origin, target) {
   if (invisibleValues.has(origin)) {
@@ -2151,44 +2379,133 @@ function mixObject(a, b) {
     for (const key in blendValue) {
       output[key] = blendValue[key](v);
     }
-    return output;
+    return output;
+  };
+}
+function matchOrder(origin, target) {
+  var _a;
+  const orderedOrigin = [];
+  const pointers = { color: 0, var: 0, number: 0 };
+  for (let i = 0; i < target.values.length; i++) {
+    const type = target.types[i];
+    const originIndex = origin.indexes[type][pointers[type]];
+    const originValue = (_a = origin.values[originIndex]) !== null && _a !== void 0 ? _a : 0;
+    orderedOrigin[i] = originValue;
+    pointers[type]++;
+  }
+  return orderedOrigin;
+}
+const mixComplex = (origin, target) => {
+  const template = complex.createTransformer(target);
+  const originStats = analyseComplexValue(origin);
+  const targetStats = analyseComplexValue(target);
+  const canInterpolate = originStats.indexes.var.length === targetStats.indexes.var.length && originStats.indexes.color.length === targetStats.indexes.color.length && originStats.indexes.number.length >= targetStats.indexes.number.length;
+  if (canInterpolate) {
+    if (invisibleValues.has(origin) && !targetStats.values.length || invisibleValues.has(target) && !originStats.values.length) {
+      return mixVisibility(origin, target);
+    }
+    return pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), template);
+  } else {
+    warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);
+    return mixImmediate(origin, target);
+  }
+};
+function mix(from, to, p) {
+  if (typeof from === "number" && typeof to === "number" && typeof p === "number") {
+    return mixNumber$2(from, to, p);
+  }
+  const mixer = getMixer$1(from);
+  return mixer(from, to);
+}
+function inertia({ keyframes: keyframes2, velocity = 0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min, max, restDelta = 0.5, restSpeed }) {
+  const origin = keyframes2[0];
+  const state2 = {
+    done: false,
+    value: origin
+  };
+  const isOutOfBounds = (v) => min !== void 0 && v < min || max !== void 0 && v > max;
+  const nearestBoundary = (v) => {
+    if (min === void 0)
+      return max;
+    if (max === void 0)
+      return min;
+    return Math.abs(min - v) < Math.abs(max - v) ? min : max;
+  };
+  let amplitude = power * velocity;
+  const ideal = origin + amplitude;
+  const target = modifyTarget === void 0 ? ideal : modifyTarget(ideal);
+  if (target !== ideal)
+    amplitude = target - origin;
+  const calcDelta = (t) => -amplitude * Math.exp(-t / timeConstant);
+  const calcLatest = (t) => target + calcDelta(t);
+  const applyFriction = (t) => {
+    const delta = calcDelta(t);
+    const latest = calcLatest(t);
+    state2.done = Math.abs(delta) <= restDelta;
+    state2.value = state2.done ? target : latest;
+  };
+  let timeReachedBoundary;
+  let spring$1;
+  const checkCatchBoundary = (t) => {
+    if (!isOutOfBounds(state2.value))
+      return;
+    timeReachedBoundary = t;
+    spring$1 = spring({
+      keyframes: [state2.value, nearestBoundary(state2.value)],
+      velocity: calcGeneratorVelocity(calcLatest, t, state2.value),
+      // TODO: This should be passing * 1000
+      damping: bounceDamping,
+      stiffness: bounceStiffness,
+      restDelta,
+      restSpeed
+    });
+  };
+  checkCatchBoundary(0);
+  return {
+    calculatedDuration: null,
+    next: (t) => {
+      let hasUpdatedFrame = false;
+      if (!spring$1 && timeReachedBoundary === void 0) {
+        hasUpdatedFrame = true;
+        applyFriction(t);
+        checkCatchBoundary(t);
+      }
+      if (timeReachedBoundary !== void 0 && t >= timeReachedBoundary) {
+        return spring$1.next(t - timeReachedBoundary);
+      } else {
+        !hasUpdatedFrame && applyFriction(t);
+        return state2;
+      }
+    }
   };
 }
-function matchOrder(origin, target) {
-  var _a;
-  const orderedOrigin = [];
-  const pointers = { color: 0, var: 0, number: 0 };
-  for (let i = 0; i < target.values.length; i++) {
-    const type = target.types[i];
-    const originIndex = origin.indexes[type][pointers[type]];
-    const originValue = (_a = origin.values[originIndex]) !== null && _a !== void 0 ? _a : 0;
-    orderedOrigin[i] = originValue;
-    pointers[type]++;
-  }
-  return orderedOrigin;
-}
-const mixComplex = (origin, target) => {
-  const template = complex.createTransformer(target);
-  const originStats = analyseComplexValue(origin);
-  const targetStats = analyseComplexValue(target);
-  const canInterpolate = originStats.indexes.var.length === targetStats.indexes.var.length && originStats.indexes.color.length === targetStats.indexes.color.length && originStats.indexes.number.length >= targetStats.indexes.number.length;
-  if (canInterpolate) {
-    if (invisibleValues.has(origin) && !targetStats.values.length || invisibleValues.has(target) && !originStats.values.length) {
-      return mixVisibility(origin, target);
-    }
-    return pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), template);
-  } else {
-    warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`);
-    return mixImmediate(origin, target);
-  }
+const easeIn = /* @__PURE__ */ cubicBezier(0.42, 0, 1, 1);
+const easeOut = /* @__PURE__ */ cubicBezier(0, 0, 0.58, 1);
+const easeInOut = /* @__PURE__ */ cubicBezier(0.42, 0, 0.58, 1);
+const easingLookup = {
+  linear: noop,
+  easeIn,
+  easeInOut,
+  easeOut,
+  circIn,
+  circInOut,
+  circOut,
+  backIn,
+  backInOut,
+  backOut,
+  anticipate
 };
-function mix(from, to, p) {
-  if (typeof from === "number" && typeof to === "number" && typeof p === "number") {
-    return mixNumber$2(from, to, p);
+const easingDefinitionToFunction = (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);
+  } else if (typeof definition === "string") {
+    exports.invariant(easingLookup[definition] !== void 0, `Invalid easing type '${definition}'`);
+    return easingLookup[definition];
   }
-  const mixer = getMixer$1(from);
-  return mixer(from, to);
-}
+  return definition;
+};
 function createMixers(output, ease2, customMixer) {
   const mixers = [];
   const mixerFactory = customMixer || mix;
@@ -2208,8 +2525,9 @@ function interpolate(input, output, { clamp: isClamp = true, ease: ease2, mixer
   exports.invariant(inputLength === output.length, "Both input and output ranges must be the same length");
   if (inputLength === 1)
     return () => output[0];
-  if (inputLength === 2 && input[0] === input[1])
+  if (inputLength === 2 && output[0] === output[1])
     return () => output[1];
+  const isZeroDeltaRange = input[0] === input[1];
   if (input[0] > input[inputLength - 1]) {
     input = [...input].reverse();
     output = [...output].reverse();
@@ -2217,6 +2535,8 @@ function interpolate(input, output, { clamp: isClamp = true, ease: ease2, mixer
   const mixers = createMixers(output, ease2, mixer);
   const numMixers = mixers.length;
   const interpolator = (v) => {
+    if (isZeroDeltaRange && v < input[0])
+      return output[0];
     let i = 0;
     if (numMixers > 1) {
       for (; i < input.length - 2; i++) {
@@ -2543,52 +2863,6 @@ const acceleratedValues = /* @__PURE__ */ new Set([
   // or until we implement support for linear() easing.
   // "background-color"
 ]);
-const supportsFlags = {
-  linearEasing: void 0
-};
-function memoSupports(callback, supportsFlag) {
-  const memoized = 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");
-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];
-  }
-}
 function startWaapiAnimation(element, valueName, keyframes2, { delay: delay2 = 0, duration = 300, repeat = 0, repeatType = "loop", ease: ease2 = "easeInOut", times } = {}) {
   const keyframeOptions = { [valueName]: keyframes2 };
   if (times)
@@ -2605,10 +2879,6 @@ function startWaapiAnimation(element, valueName, keyframes2, { delay: delay2 = 0
     direction: repeatType === "reverse" ? "alternate" : "normal"
   });
 }
-function attachTimeline(animation, timeline) {
-  animation.timeline = timeline;
-  animation.onfinish = null;
-}
 const supportsWaapi = /* @__PURE__ */ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
 const sampleDelta = 10;
 const maxDuration = 2e4;
@@ -2834,11 +3104,40 @@ class AcceleratedAnimation extends BaseAnimation {
     !motionValue2.owner.getProps().onUpdate && !repeatDelay && repeatType !== "mirror" && damping !== 0 && type !== "inertia";
   }
 }
+const underDampedSpring = {
+  type: "spring",
+  stiffness: 500,
+  damping: 25,
+  restSpeed: 10
+};
+const criticallyDampedSpring = (target) => ({
+  type: "spring",
+  stiffness: 550,
+  damping: target === 0 ? 2 * Math.sqrt(550) : 30,
+  restSpeed: 10
+});
+const keyframesTransition = {
+  type: "keyframes",
+  duration: 0.8
+};
+const ease = {
+  type: "keyframes",
+  ease: [0.25, 0.1, 0.35, 1],
+  duration: 0.3
+};
+const getDefaultTransition = (valueKey, { keyframes: keyframes2 }) => {
+  if (keyframes2.length > 2) {
+    return keyframesTransition;
+  } else if (transformProps.has(valueKey)) {
+    return valueKey.startsWith("scale") ? criticallyDampedSpring(keyframes2[1]) : underDampedSpring;
+  }
+  return ease;
+};
 function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {
   return !!Object.keys(transition).length;
 }
 const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
-  const valueTransition = getValueTransition(transition, name) || {};
+  const valueTransition = getValueTransition$1(transition, name) || {};
   const delay2 = valueTransition.delay || transition.delay || 0;
   let { elapsed = 0 } = transition;
   elapsed = elapsed - secondsToMilliseconds$1(delay2);
@@ -2898,72 +3197,6 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
     return new MainThreadAnimation(options);
   }
 };
-const isKeyframesTarget = (v) => {
-  return Array.isArray(v);
-};
-const isCustomValue = (v) => {
-  return Boolean(v && typeof v === "object" && v.mix && v.toValue);
-};
-const resolveFinalValueInKeyframes = (v) => {
-  return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;
-};
-function getValueState(visualElement) {
-  const state2 = [{}, {}];
-  visualElement === null || visualElement === void 0 ? void 0 : visualElement.values.forEach((value, key) => {
-    state2[0][key] = value.get();
-    state2[1][key] = value.getVelocity();
-  });
-  return state2;
-}
-function resolveVariantFromProps(props, definition, custom, visualElement) {
-  if (typeof definition === "function") {
-    const [current, velocity] = getValueState(visualElement);
-    definition = definition(custom !== void 0 ? custom : props.custom, current, velocity);
-  }
-  if (typeof definition === "string") {
-    definition = props.variants && props.variants[definition];
-  }
-  if (typeof definition === "function") {
-    const [current, velocity] = getValueState(visualElement);
-    definition = definition(custom !== void 0 ? custom : props.custom, current, velocity);
-  }
-  return definition;
-}
-function resolveVariant$1(visualElement, definition, custom) {
-  const props = visualElement.getProps();
-  return resolveVariantFromProps(props, definition, props.custom, visualElement);
-}
-function setMotionValue(visualElement, key, value) {
-  if (visualElement.hasValue(key)) {
-    visualElement.getValue(key).set(value);
-  } else {
-    visualElement.addValue(key, motionValue(value));
-  }
-}
-function setTarget(visualElement, definition) {
-  const resolved = resolveVariant$1(visualElement, definition);
-  let { transitionEnd = {}, transition = {}, ...target } = resolved || {};
-  target = { ...target, ...transitionEnd };
-  for (const key in target) {
-    const value = resolveFinalValueInKeyframes(target[key]);
-    setMotionValue(visualElement, key, value);
-  }
-}
-const camelToDash = (str) => str.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase();
-const optimizedAppearDataId = "framerAppearId";
-const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
-function getOptimisedAppearId(visualElement) {
-  return visualElement.props[optimizedAppearDataAttribute];
-}
-function isWillChangeMotionValue$1(value) {
-  return Boolean(isMotionValue$1(value) && value.add);
-}
-function addValueToWillChange$1(visualElement, key) {
-  const willChange = visualElement.getValue("willChange");
-  if (isWillChangeMotionValue$1(willChange)) {
-    return willChange.add(key);
-  }
-}
 function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
   const shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== true;
   needsAnimating[key] = false;
@@ -2984,7 +3217,7 @@ function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0,
     }
     const valueTransition = {
       delay: delay2,
-      ...getValueTransition(transition || {}, key)
+      ...getValueTransition$1(transition || {}, key)
     };
     let isHandoff = false;
     if (window.MotionHandoffAnimation) {
@@ -2997,52 +3230,65 @@ function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0,
         }
       }
     }
-    addValueToWillChange$1(visualElement, key);
-    value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key) ? { type: false } : valueTransition, visualElement, isHandoff));
-    const animation = value.animation;
-    if (animation) {
-      animations.push(animation);
-    }
-  }
-  if (transitionEnd) {
-    Promise.all(animations).then(() => {
-      frame.update(() => {
-        transitionEnd && setTarget(visualElement, transitionEnd);
-      });
-    });
-  }
-  return animations;
-}
-function isSVGElement$2(element) {
-  return element instanceof SVGElement && element.tagName !== "svg";
-}
-const scaleCorrectors = {};
-function addScaleCorrector(correctors) {
-  Object.assign(scaleCorrectors, correctors);
-}
-function isForcedMotionValue(key, { layout, layoutId }) {
-  return transformProps.has(key) || key.startsWith("origin") || (layout || layoutId !== void 0) && (!!scaleCorrectors[key] || key === "opacity");
-}
-function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
-  var _a;
-  const { style: style2 } = props;
-  const newValues = {};
-  for (const key in style2) {
-    if (isMotionValue$1(style2[key]) || prevProps.style && isMotionValue$1(prevProps.style[key]) || isForcedMotionValue(key, props) || ((_a = visualElement === null || visualElement === void 0 ? void 0 : visualElement.getValue(key)) === null || _a === void 0 ? void 0 : _a.liveStyle) !== void 0) {
-      newValues[key] = style2[key];
-    }
-  }
-  return newValues;
-}
-function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
-  const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
-  for (const key in props) {
-    if (isMotionValue$1(props[key]) || isMotionValue$1(prevProps[key])) {
-      const targetKey = transformPropOrder.indexOf(key) !== -1 ? "attr" + key.charAt(0).toUpperCase() + key.substring(1) : key;
-      newValues[targetKey] = props[key];
+    addValueToWillChange$1(visualElement, key);
+    value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && positionalKeys.has(key) ? { type: false } : valueTransition, visualElement, isHandoff));
+    const animation = value.animation;
+    if (animation) {
+      animations.push(animation);
     }
   }
-  return newValues;
+  if (transitionEnd) {
+    Promise.all(animations).then(() => {
+      frame.update(() => {
+        transitionEnd && setTarget(visualElement, transitionEnd);
+      });
+    });
+  }
+  return animations;
+}
+function isSVGElement$2(element) {
+  return element instanceof SVGElement && element.tagName !== "svg";
+}
+const createAxisDelta = () => ({
+  translate: 0,
+  scale: 1,
+  origin: 0,
+  originPoint: 0
+});
+const createDelta = () => ({
+  x: createAxisDelta(),
+  y: createAxisDelta()
+});
+const createAxis$1 = () => ({ min: 0, max: 0 });
+const createBox$1 = () => ({
+  x: createAxis$1(),
+  y: createAxis$1()
+});
+const featureProps = {
+  animation: [
+    "animate",
+    "variants",
+    "whileHover",
+    "whileTap",
+    "exit",
+    "whileInView",
+    "whileFocus",
+    "whileDrag"
+  ],
+  exit: ["exit"],
+  drag: ["drag", "dragControls"],
+  focus: ["whileFocus"],
+  hover: ["whileHover", "onHoverStart", "onHoverEnd"],
+  tap: ["whileTap", "onTap", "onTapStart", "onTapCancel"],
+  pan: ["onPan", "onPanStart", "onPanSessionStart", "onPanEnd"],
+  inView: ["whileInView", "onViewportEnter", "onViewportLeave"],
+  layout: ["layout", "layoutId"]
+};
+const featureDefinitions = {};
+for (const key in featureProps) {
+  featureDefinitions[key] = {
+    isEnabled: (props) => featureProps[key].some((name) => !!props[name])
+  };
 }
 const isBrowser = typeof window !== "undefined";
 const prefersReducedMotion = { current: null };
@@ -3060,6 +3306,8 @@ function initPrefersReducedMotion() {
     prefersReducedMotion.current = false;
   }
 }
+const valueTypes = [...dimensionValueTypes, color, complex];
+const findValueType = (v) => valueTypes.find(testValueType(v));
 function isAnimationControls(v) {
   return v !== null && typeof v === "object" && typeof v.start === "function";
 }
@@ -3089,7 +3337,7 @@ function updateMotionValuesFromProps(element, next, prev) {
     if (isMotionValue$1(nextValue)) {
       element.addValue(key, nextValue);
       if (process.env.NODE_ENV === "development") {
-        warnOnce(nextValue.version === "11.15.0", `Attempting to mix Motion versions ${nextValue.version} with 11.15.0 may not work as expected.`);
+        warnOnce(nextValue.version === "11.16.6", `Attempting to mix Motion versions ${nextValue.version} with 11.16.6 may not work as expected.`);
       }
     } else if (isMotionValue$1(prevValue)) {
       element.addValue(key, motionValue(nextValue, { owner: element }));
@@ -3113,49 +3361,6 @@ function updateMotionValuesFromProps(element, next, prev) {
   }
   return next;
 }
-const featureProps = {
-  animation: [
-    "animate",
-    "variants",
-    "whileHover",
-    "whileTap",
-    "exit",
-    "whileInView",
-    "whileFocus",
-    "whileDrag"
-  ],
-  exit: ["exit"],
-  drag: ["drag", "dragControls"],
-  focus: ["whileFocus"],
-  hover: ["whileHover", "onHoverStart", "onHoverEnd"],
-  tap: ["whileTap", "onTap", "onTapStart", "onTapCancel"],
-  pan: ["onPan", "onPanStart", "onPanSessionStart", "onPanEnd"],
-  inView: ["whileInView", "onViewportEnter", "onViewportLeave"],
-  layout: ["layout", "layoutId"]
-};
-const featureDefinitions = {};
-for (const key in featureProps) {
-  featureDefinitions[key] = {
-    isEnabled: (props) => featureProps[key].some((name) => !!props[name])
-  };
-}
-const valueTypes = [...dimensionValueTypes, color, complex];
-const findValueType = (v) => valueTypes.find(testValueType(v));
-const createAxisDelta = () => ({
-  translate: 0,
-  scale: 1,
-  origin: 0,
-  originPoint: 0
-});
-const createDelta = () => ({
-  x: createAxisDelta(),
-  y: createAxisDelta()
-});
-const createAxis$1 = () => ({ min: 0, max: 0 });
-const createBox$1 = () => ({
-  x: createAxis$1(),
-  y: createAxis$1()
-});
 const propEventHandlers = [
   "AnimationStart",
   "AnimationComplete",
@@ -3701,6 +3906,7 @@ const camelCaseAttributes = /* @__PURE__ */ new Set([
   "textLength",
   "lengthAdjust"
 ]);
+const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
 function renderHTML(element, { style: style2, vars }, styleProp, projection) {
   Object.assign(element.style, style2, projection && projection.getProjectionStyles(styleProp));
   for (const key in vars) {
@@ -3713,7 +3919,34 @@ function renderSVG(element, renderState, _styleProp, projection) {
     element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]);
   }
 }
-const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg";
+const scaleCorrectors = {};
+function addScaleCorrector(correctors) {
+  Object.assign(scaleCorrectors, correctors);
+}
+function isForcedMotionValue(key, { layout, layoutId }) {
+  return transformProps.has(key) || key.startsWith("origin") || (layout || layoutId !== void 0) && (!!scaleCorrectors[key] || key === "opacity");
+}
+function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
+  var _a;
+  const { style: style2 } = props;
+  const newValues = {};
+  for (const key in style2) {
+    if (isMotionValue$1(style2[key]) || prevProps.style && isMotionValue$1(prevProps.style[key]) || isForcedMotionValue(key, props) || ((_a = visualElement === null || visualElement === void 0 ? void 0 : visualElement.getValue(key)) === null || _a === void 0 ? void 0 : _a.liveStyle) !== void 0) {
+      newValues[key] = style2[key];
+    }
+  }
+  return newValues;
+}
+function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
+  const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
+  for (const key in props) {
+    if (isMotionValue$1(props[key]) || isMotionValue$1(prevProps[key])) {
+      const targetKey = transformPropOrder.indexOf(key) !== -1 ? "attr" + key.charAt(0).toUpperCase() + key.substring(1) : key;
+      newValues[targetKey] = props[key];
+    }
+  }
+  return newValues;
+}
 class SVGVisualElement extends DOMVisualElement {
   constructor() {
     super(...arguments);
@@ -4044,12 +4277,9 @@ function getElementAnimationState(element) {
   state.set(element, animationState);
   return state.get(element);
 }
-class NativeAnimation {
+class NativeAnimation extends NativeAnimationControls {
   constructor(element, valueName, valueKeyframes, options) {
     const isCSSVar = valueName.startsWith("--");
-    this.setValue = isCSSVar ? setCSSVar : setStyle;
-    this.options = options;
-    this.updateFinishedPromise();
     exports.invariant(typeof options.type !== "string", `animateMini doesn't support "type" as a string. Did you mean to import { spring } from "framer-motion"?`);
     const existingAnimation = getElementAnimationState(element).get(valueName);
     existingAnimation && existingAnimation.stop();
@@ -4068,92 +4298,34 @@ class NativeAnimation {
     } else {
       options.ease = options.ease || defaultEasing;
     }
-    this.removeAnimation = () => {
-      var _a;
-      return (_a = state.get(element)) === null || _a === void 0 ? void 0 : _a.delete(valueName);
-    };
     const onFinish = () => {
-      this.setValue(element, valueName, getFinalKeyframe(valueKeyframes, this.options));
+      this.setValue(element, valueName, getFinalKeyframe(valueKeyframes, options));
       this.cancel();
       this.resolveFinishedPromise();
     };
+    const init = () => {
+      this.setValue = isCSSVar ? setCSSVar : setStyle;
+      this.options = options;
+      this.updateFinishedPromise();
+      this.removeAnimation = () => {
+        var _a;
+        return (_a = state.get(element)) === null || _a === void 0 ? void 0 : _a.delete(valueName);
+      };
+    };
     if (!supportsWaapi()) {
+      super();
+      init();
       onFinish();
     } else {
-      this.animation = startWaapiAnimation(element, valueName, valueKeyframes, options);
+      super(startWaapiAnimation(element, valueName, valueKeyframes, options));
+      init();
       if (options.autoplay === false) {
         this.animation.pause();
       }
       this.animation.onfinish = onFinish;
-      if (this.pendingTimeline) {
-        attachTimeline(this.animation, this.pendingTimeline);
-      }
       getElementAnimationState(element).set(valueName, this);
     }
   }
-  get duration() {
-    return millisecondsToSeconds$1(this.options.duration || 300);
-  }
-  get time() {
-    var _a;
-    if (this.animation) {
-      return 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 = 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;
-  }
-  flatten() {
-    var _a;
-    if (!this.animation)
-      return;
-    (_a = this.animation.effect) === null || _a === void 0 ? void 0 : _a.updateTiming({ easing: "linear" });
-  }
-  play() {
-    if (this.state === "finished") {
-      this.updateFinishedPromise();
-    }
-    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();
-  }
-  complete() {
-    this.animation && this.animation.finish();
-  }
-  cancel() {
-    this.removeAnimation();
-    try {
-      this.animation && this.animation.cancel();
-    } catch (e) {
-    }
-  }
   /**
    * Allows the returned animation to be awaited or promise-chained. Currently
    * resolves when the animation finishes at all but in a future update could/should
@@ -4167,17 +4339,19 @@ class NativeAnimation {
       this.resolveFinishedPromise = resolve;
     });
   }
-  attachTimeline(timeline) {
-    if (!this.animation) {
-      this.pendingTimeline = timeline;
-    } else {
-      attachTimeline(this.animation, timeline);
+  play() {
+    if (this.state === "finished") {
+      this.updateFinishedPromise();
     }
-    return noop;
+    super.play();
+  }
+  cancel() {
+    this.removeAnimation();
+    super.cancel();
   }
 }
 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 = [];
@@ -4190,7 +4364,7 @@ function animateElements(elementOrSelector, keyframes2, options, scope) {
     for (const valueName in keyframes2) {
       const valueKeyframes = keyframes2[valueName];
       const valueOptions = {
-        ...getValueTransition(elementTransition, valueName)
+        ...getValueTransition$1(elementTransition, valueName)
       };
       valueOptions.duration = valueOptions.duration ? secondsToMilliseconds$1(valueOptions.duration) : valueOptions.duration;
       valueOptions.delay = secondsToMilliseconds$1(valueOptions.delay || 0);
@@ -4206,6 +4380,20 @@ const createScopedWaapiAnimate = (scope) => {
   return scopedAnimate;
 };
 const animateMini = /* @__PURE__ */ createScopedWaapiAnimate();
+function observeTimeline(update, timeline) {
+  let prevProgress;
+  const onFrame = () => {
+    const { currentTime } = timeline;
+    const percentage = currentTime === null ? 0 : currentTime.value;
+    const progress2 = percentage / 100;
+    if (prevProgress !== progress2) {
+      update(progress2);
+    }
+    prevProgress = progress2;
+  };
+  frame.update(onFrame, true);
+  return () => cancelFrame(onFrame);
+}
 const resizeHandlers = /* @__PURE__ */ new WeakMap();
 let observer;
 function getElementSize(target, borderBoxSize) {
@@ -4244,7 +4432,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) {
@@ -4373,24 +4561,6 @@ function calcInset(element, container) {
   }
   return inset;
 }
-const ScrollOffset = {
-  Enter: [
-    [0, 1],
-    [1, 1]
-  ],
-  Exit: [
-    [0, 0],
-    [1, 0]
-  ],
-  Any: [
-    [1, 0],
-    [0, 1]
-  ],
-  All: [
-    [0, 0],
-    [1, 1]
-  ]
-};
 const namedEdges = {
   start: 0,
   center: 0.5,
@@ -4439,6 +4609,24 @@ function resolveOffset(offset, containerLength, targetLength, targetInset) {
   containerPoint = resolveEdge(offsetDefinition[1], containerLength);
   return targetPoint - containerPoint;
 }
+const ScrollOffset = {
+  Enter: [
+    [0, 1],
+    [1, 1]
+  ],
+  Exit: [
+    [0, 0],
+    [1, 0]
+  ],
+  Any: [
+    [1, 0],
+    [0, 1]
+  ],
+  All: [
+    [0, 0],
+    [1, 1]
+  ]
+};
 const point = { x: 0, y: 0 };
 function getTargetSize(target) {
   return "getBBox" in target && target.tagName !== "svg" ? target.getBBox() : { width: target.clientWidth, height: target.clientHeight };
@@ -4464,10 +4652,10 @@ function resolveOffsets(container, info, options) {
     info[axis].offset[i] = offset;
   }
   if (hasChanged2) {
-    info[axis].interpolate = interpolate(info[axis].offset, defaultOffset$1(offsetDefinition));
+    info[axis].interpolate = interpolate(info[axis].offset, defaultOffset$1(offsetDefinition), { clamp: false });
     info[axis].interpolatorOffsets = [...info[axis].offset];
   }
-  info[axis].progress = info[axis].interpolate(info[axis].current);
+  info[axis].progress = clamp$1(0, 1, info[axis].interpolate(info[axis].current));
 }
 function measure(container, target = container, info) {
   info.x.targetOffset = 0;
@@ -4562,20 +4750,6 @@ function scrollInfo(onScroll, { container = document.documentElement, ...options
     }
   };
 }
-function observeTimeline(update, timeline) {
-  let prevProgress;
-  const onFrame = () => {
-    const { currentTime } = timeline;
-    const percentage = currentTime === null ? 0 : currentTime.value;
-    const progress2 = percentage / 100;
-    if (prevProgress !== progress2) {
-      update(progress2);
-    }
-    prevProgress = progress2;
-  };
-  frame.update(onFrame, true);
-  return () => cancelFrame(onFrame);
-}
 function scrollTimelineFallback({ source, container, axis = "y" }) {
   if (source)
     container = source;
@@ -4643,7 +4817,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) => {
@@ -4657,7 +4831,7 @@ function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount =
         } else {
           observer2.unobserve(entry.target);
         }
-      } else if (onEnd) {
+      } else if (typeof onEnd === "function") {
         onEnd(entry);
         activeIntersections.delete(entry.target);
       }
@@ -4700,23 +4874,6 @@ function stagger(duration = 0.1, { startDelay = 0, from = 0, ease: ease2 } = {})
     return startDelay + delay2;
   };
 }
-const isCustomValueType = (v) => {
-  return v && typeof v === "object" && v.mix;
-};
-const getMixer = (v) => isCustomValueType(v) ? v.mix : void 0;
-function transform(...args) {
-  const useImmediate = !Array.isArray(args[0]);
-  const argOffset = useImmediate ? 0 : -1;
-  const inputValue = args[0 + argOffset];
-  const inputRange = args[1 + argOffset];
-  const outputRange = args[2 + argOffset];
-  const options = args[3 + argOffset];
-  const interpolator = interpolate(inputRange, outputRange, {
-    mixer: getMixer(outputRange[0]),
-    ...options
-  });
-  return useImmediate ? interpolator(inputValue) : interpolator;
-}
 function delay(callback, timeout) {
   const start = time.now();
   const checkElapsed = ({ timestamp }) => {
@@ -4738,6 +4895,23 @@ function distance2D(a, b) {
   const yDelta = distance(a.y, b.y);
   return Math.sqrt(xDelta ** 2 + yDelta ** 2);
 }
+const isCustomValueType = (v) => {
+  return v && typeof v === "object" && v.mix;
+};
+const getMixer = (v) => isCustomValueType(v) ? v.mix : void 0;
+function transform(...args) {
+  const useImmediate = !Array.isArray(args[0]);
+  const argOffset = useImmediate ? 0 : -1;
+  const inputValue = args[0 + argOffset];
+  const inputRange = args[1 + argOffset];
+  const outputRange = args[2 + argOffset];
+  const options = args[3 + argOffset];
+  const interpolator = interpolate(inputRange, outputRange, {
+    mixer: getMixer(outputRange[0]),
+    ...options
+  });
+  return useImmediate ? interpolator(inputValue) : interpolator;
+}
 const sync = frame;
 const cancelSync = stepsOrder.reduce((acc, key) => {
   acc[key] = (process2) => cancelFrame(process2);
@@ -4836,13 +5010,6 @@ function shallowCompare(next, prev) {
   }
   return true;
 }
-function addUniqueItem(array, item) {
-  !array.includes(item) && array.push(item);
-}
-function removeItem(array, item) {
-  const index = array.indexOf(item);
-  index !== -1 && array.splice(index, 1);
-}
 function getOptions(options, key) {
   return options[key] ? { ...options, ...options[key] } : { ...options };
 }
@@ -5133,17 +5300,25 @@ const Primitive = vue.defineComponent({
     as: {
       type: [String, Object],
       default: "div"
+    },
+    getProps: {
+      type: Function,
+      default: () => ({})
     }
   },
   setup(props, { attrs, slots }) {
     const asTag = props.asChild ? "template" : props.as;
     const SELF_CLOSING_TAGS = ["area", "img", "input"];
-    if (typeof asTag === "string" && SELF_CLOSING_TAGS.includes(asTag))
-      return () => vue.h(asTag, attrs);
-    if (asTag !== "template") {
-      return () => vue.h(props.as, attrs, { default: slots.default });
-    }
-    return () => vue.h(Slot, attrs, { default: slots.default });
+    return () => {
+      const motionProps = props.getProps();
+      const allAttrs = { ...attrs, ...motionProps };
+      if (typeof asTag === "string" && SELF_CLOSING_TAGS.includes(asTag))
+        return vue.h(asTag, allAttrs);
+      if (asTag !== "template") {
+        return vue.h(props.as, allAttrs, { default: slots.default });
+      }
+      return vue.h(Slot, allAttrs, { default: slots.default });
+    };
   }
 });
 class Feature {
@@ -5185,7 +5360,7 @@ class HoverGesture extends Feature {
     const element = this.state.element;
     if (!element)
       return;
-    this.unmount = motionDom.hover(
+    this.unmount = hover(
       element,
       (startEvent) => {
         handleHoverEvent$1(this.state, startEvent, "Start");
@@ -5226,7 +5401,7 @@ class PressGesture extends Feature {
     const element = this.state.element;
     if (!element)
       return;
-    this.unmount = motionDom.press(
+    this.unmount = press(
       element,
       (startEvent) => {
         handlePressEvent(this.state, startEvent, "Start");
@@ -5644,7 +5819,6 @@ function measurePageBox(element, rootProjectionNode2, transformPagePoint) {
   return viewportBox;
 }
 const doneCallbacks = /* @__PURE__ */ new WeakMap();
-vue.ref(/* @__PURE__ */ new WeakMap());
 function removeDoneCallback(element) {
   const prevDoneCallback = doneCallbacks.get(element);
   if (prevDoneCallback) {
@@ -5762,9 +5936,9 @@ 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);
@@ -6202,8 +6376,7 @@ class LayoutFeature extends Feature {
     addScaleCorrector(defaultScaleCorrector);
   }
   beforeUpdate() {
-    var _a;
-    (_a = this.state.visualElement.projection) == null ? void 0 : _a.willUpdate();
+    this.state.willUpdate("beforeUpdate");
   }
   update() {
     var _a;
@@ -6225,15 +6398,25 @@ class LayoutFeature extends Feature {
     }
   }
   beforeUnmount() {
+    const projection = this.state.visualElement.projection;
+    if (projection) {
+      this.state.willUpdate("beforeUnmount");
+      if (this.state.options.layoutId) {
+        projection.isPresent = false;
+        projection.relegate();
+      } else if (this.state.options.layout) {
+        this.state.isSafeToRemove = true;
+      }
+    }
   }
   unmount() {
+    var _a, _b;
+    const layoutGroup = this.state.options.layoutGroup;
     const projection = this.state.visualElement.projection;
-    if (projection) {
-      projection.root.didUpdate();
-      projection.finishAnimation();
-      const layoutGroup = this.state.options.layoutGroup;
-      if (layoutGroup == null ? void 0 : layoutGroup.group)
-        layoutGroup.group.remove(projection);
+    if ((layoutGroup == null ? void 0 : layoutGroup.group) && projection)
+      layoutGroup.group.remove(projection);
+    if (this.state.options.layoutId || this.state.options.layout) {
+      (_b = (_a = this.state.visualElement.projection) == null ? void 0 : _a.root) == null ? void 0 : _b.didUpdate();
     }
   }
 }
@@ -6296,6 +6479,31 @@ class PanGesture extends Feature {
     this.session && this.session.end();
   }
 }
+const { schedule: microtask, cancel: cancelMicrotask } = createRenderBatcher(queueMicrotask, false);
+const compareByDepth = (a, b) => a.depth - b.depth;
+class FlatTree {
+  constructor() {
+    this.children = [];
+    this.isDirty = false;
+  }
+  add(child) {
+    addUniqueItem(this.children, child);
+    this.isDirty = true;
+  }
+  remove(child) {
+    removeItem(this.children, child);
+    this.isDirty = true;
+  }
+  forEach(callback) {
+    this.isDirty && this.children.sort(compareByDepth);
+    this.isDirty = false;
+    this.children.forEach(callback);
+  }
+}
+function resolveMotionValue(value) {
+  const unwrappedValue = isMotionValue$1(value) ? value.get() : value;
+  return isCustomValue(unwrappedValue) ? unwrappedValue.toValue() : unwrappedValue;
+}
 const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
 const numBorders = borders.length;
 const asNumber = (value) => typeof value === "string" ? parseFloat(value) : value;
@@ -6466,11 +6674,11 @@ class NodeStack {
     this.members = [];
   }
   add(node) {
-    addUniqueItem$1(this.members, node);
+    addUniqueItem(this.members, node);
     node.scheduleRender();
   }
   remove(node) {
-    removeItem$1(this.members, node);
+    removeItem(this.members, node);
     if (node === this.prevLead) {
       this.prevLead = void 0;
     }
@@ -6587,31 +6795,6 @@ function buildProjectionTransform(delta, treeScale, latestTransform) {
 function eachAxis(callback) {
   return [callback("x"), callback("y")];
 }
-const compareByDepth$1 = (a, b) => a.depth - b.depth;
-class FlatTree {
-  constructor() {
-    this.children = [];
-    this.isDirty = false;
-  }
-  add(child) {
-    addUniqueItem$1(this.children, child);
-    this.isDirty = true;
-  }
-  remove(child) {
-    removeItem$1(this.children, child);
-    this.isDirty = true;
-  }
-  forEach(callback) {
-    this.isDirty && this.children.sort(compareByDepth$1);
-    this.isDirty = false;
-    this.children.forEach(callback);
-  }
-}
-function resolveMotionValue(value) {
-  const unwrappedValue = isMotionValue$1(value) ? value.get() : value;
-  return isCustomValue(unwrappedValue) ? unwrappedValue.toValue() : unwrappedValue;
-}
-const { schedule: microtask, cancel: cancelMicrotask } = createRenderBatcher(queueMicrotask, false);
 const metrics = {
   type: "projectionFrame",
   totalNodes: 0,
@@ -6775,7 +6958,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             }
             this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged);
             const animationOptions = {
-              ...getValueTransition(layoutTransition, "layout"),
+              ...getValueTransition$1(layoutTransition, "layout"),
               onPlay: onLayoutAnimationStart,
               onComplete: onLayoutAnimationComplete
             };
@@ -7713,6 +7896,7 @@ class ProjectionFeature extends Feature {
       this.state.visualElement.latestValues,
       options["data-framer-portal-id"] ? void 0 : getClosestProjectingNode(this.state.visualElement.parent)
     );
+    this.state.visualElement.projection.isPresent = true;
     this.state.visualElement.projection.setOptions({
       layout: options.layout,
       layoutId: options.layoutId,
@@ -7723,7 +7907,21 @@ class ProjectionFeature extends Feature {
       // initialPromotionConfig
       layoutRoot: options.layoutRoot,
       layoutScroll: options.layoutScroll,
-      crossfade: options.crossfade
+      crossfade: options.crossfade,
+      onExitComplete: () => {
+        var _a;
+        if (!((_a = this.state.visualElement.projection) == null ? void 0 : _a.isPresent)) {
+          const done = doneCallbacks.get(this.state.element);
+          this.state.isSafeToRemove = true;
+          if (done) {
+            done({
+              detail: {
+                isExit: true
+              }
+            }, true);
+          }
+        }
+      }
     });
   }
   beforeMount() {
@@ -7788,38 +7986,13 @@ class FeatureManager {
     this.features.forEach((feature) => feature.beforeUnmount());
   }
 }
-let scheduled;
-const fireNext = (iterator) => iterator.next();
-const fireAnimateUpdates = (state2) => state2.animateUpdates();
-function processScheduledAnimations() {
-  if (!scheduled)
-    return;
-  const generators2 = scheduled.sort(compareByDepth).map(fireAnimateUpdates);
-  generators2.forEach(fireNext);
-  generators2.forEach(fireNext);
-  scheduled = void 0;
-}
-function scheduleAnimation(state2) {
-  if (!scheduled) {
-    scheduled = [state2];
-    requestAnimationFrame(processScheduledAnimations);
-  } else {
-    addUniqueItem(scheduled, state2);
-  }
-}
-function unscheduleAnimation(state2) {
-  scheduled && removeItem(scheduled, state2);
-}
-function compareByDepth(a, b) {
-  return a.depth - b.depth;
-}
 function motionEvent(name, target, isExit) {
   return new CustomEvent(name, { detail: { target, isExit } });
 }
 function createVisualElement(Component, options) {
   return isSVGElement$1(Component) ? new SVGVisualElement(options) : new HTMLVisualElement(options);
 }
-function animateVariantsChildren(state2, activeState) {
+function animateVariantsChildren(state2, activeState, isFirstAnimate = false) {
   const variantChildren = state2.visualElement.variantChildren;
   if (!(variantChildren == null ? void 0 : variantChildren.size)) {
     return {
@@ -7830,11 +8003,13 @@ function animateVariantsChildren(state2, activeState) {
   const animationFactories = [];
   Array.from(variantChildren).forEach((child, index) => {
     var _a;
-    const prevTarget = child.state.target;
+    const prevTarget = isFirstAnimate ? child.state.baseTarget : child.state.target;
     const childState = child.state;
     childState.target = {};
     for (const name in activeState) {
-      childState.activeStates[name] = true;
+      if (name === "initial" && !isFirstAnimate) {
+        continue;
+      }
       const { definition, transition } = activeState[name];
       const { staggerChildren = 0, staggerDirection = 1, delayChildren = 0 } = transition || {};
       const maxStaggerDuration = (variantChildren.size - 1) * staggerChildren;
@@ -7889,16 +8064,20 @@ const mountedStates = /* @__PURE__ */ new WeakMap();
 let id = 0;
 class MotionState {
   constructor(options, parent) {
+    var _a;
     this.element = null;
-    this.isFirstAnimate = true;
+    this.isSafeToRemove = false;
+    this.isVShow = false;
+    this.children = /* @__PURE__ */ new Set();
     this.activeStates = {
-      initial: true,
+      // initial: true,
       animate: true
     };
     this._context = null;
     this.id = `motion-state-${id++}`;
     this.options = options;
     this.parent = parent;
+    (_a = parent == null ? void 0 : parent.children) == null ? void 0 : _a.add(this);
     this.depth = (parent == null ? void 0 : parent.depth) + 1 || 0;
     this.visualElement = createVisualElement(this.options.as, {
       presenceContext: null,
@@ -7922,8 +8101,8 @@ class MotionState {
       reducedMotionConfig: options.motionConfig.reduceMotion
     });
     const initialVariantSource = options.initial === false ? "animate" : "initial";
-    this.featureManager = new FeatureManager(this);
     this.initTarget(initialVariantSource);
+    this.featureManager = new FeatureManager(this);
   }
   get context() {
     if (!this._context) {
@@ -7939,7 +8118,7 @@ class MotionState {
   }
   initTarget(initialVariantSource) {
     this.baseTarget = resolveVariant(this.options[initialVariantSource] || this.context[initialVariantSource], this.options.variants) || {};
-    this.target = { ...this.baseTarget };
+    this.target = {};
   }
   get initial() {
     return isDef(this.options.initial) ? this.options.initial : this.context.initial;
@@ -7958,7 +8137,7 @@ class MotionState {
   beforeMount() {
     this.featureManager.beforeMount();
   }
-  mount(element, options) {
+  mount(element, options, notAnimate = false) {
     heyListen.invariant(
       Boolean(element),
       "Animation state must be mounted with valid Element"
@@ -7982,38 +8161,64 @@ class MotionState {
       }
     }
     this.featureManager.mount();
-    scheduleAnimation(this);
+    if (!notAnimate) {
+      this.animateUpdates(true);
+    }
   }
   beforeUnmount() {
     this.featureManager.beforeUnmount();
   }
-  unmount() {
-    var _a;
+  unmount(unMountChildren = false) {
+    var _a, _b, _c;
     mountedStates.delete(this.element);
-    unscheduleAnimation(this);
-    (_a = visualElementStore.get(this.element)) == null ? void 0 : _a.unmount();
     this.featureManager.unmount();
+    if (unMountChildren) {
+      frame.render(() => {
+        var _a2;
+        (_a2 = this.visualElement) == null ? void 0 : _a2.unmount();
+      });
+    } else {
+      (_a = this.visualElement) == null ? void 0 : _a.unmount();
+    }
+    if (unMountChildren) {
+      const unmountChild = (child) => {
+        var _a2;
+        child.unmount(true);
+        (_a2 = child.children) == null ? void 0 : _a2.forEach(unmountChild);
+      };
+      Array.from(this.children).forEach(unmountChild);
+    }
+    (_c = (_b = this.parent) == null ? void 0 : _b.children) == null ? void 0 : _c.delete(this);
   }
   beforeUpdate() {
     this.featureManager.beforeUpdate();
   }
-  update(options) {
+  update(options, notAnimate = false) {
+    const prevAnimate = JSON.stringify(this.options.animate);
     this.options = options;
+    let hasAnimateChange = false;
+    if (prevAnimate !== JSON.stringify(options.animate)) {
+      hasAnimateChange = true;
+    }
     this.updateOptions();
     this.featureManager.update();
-    scheduleAnimation(this);
+    if (hasAnimateChange && !notAnimate) {
+      this.animateUpdates();
+    }
   }
-  setActive(name, isActive) {
+  setActive(name, isActive, isAnimate = true) {
     var _a;
     if (!this.element || this.activeStates[name] === isActive)
       return;
     this.activeStates[name] = isActive;
     (_a = this.visualElement.variantChildren) == null ? void 0 : _a.forEach((child) => {
-      child.state.setActive(name, isActive);
+      child.state.setActive(name, isActive, false);
     });
-    scheduleAnimation(this);
+    if (isAnimate) {
+      this.animateUpdates();
+    }
   }
-  *animateUpdates() {
+  animateUpdates(isInitial = false) {
     const prevTarget = this.target;
     this.target = {};
     const activeState = {};
@@ -8021,13 +8226,13 @@ class MotionState {
     let transition;
     for (const name of STATE_TYPES) {
       if (name === "initial") {
-        if (!this.isFirstAnimate) {
+        if (!isInitial) {
           continue;
         }
-        this.isFirstAnimate = false;
       }
-      if (!this.activeStates[name])
+      if (!this.activeStates[name] && name !== "initial") {
         continue;
+      }
       const definition = isDef(this.options[name]) ? this.options[name] : this.context[name];
       const variant = resolveVariant(
         definition,
@@ -8083,11 +8288,10 @@ class MotionState {
     let getChildAnimations = () => Promise.resolve();
     let childAnimations = [];
     if (Object.keys(activeState).length) {
-      const { getAnimations, animations: animations2 } = animateVariantsChildren(this, activeState);
+      const { getAnimations, animations: animations2 } = animateVariantsChildren(this, activeState, isInitial);
       getChildAnimations = getAnimations;
       childAnimations = animations2;
     }
-    yield;
     let animations;
     const getAnimation = () => {
       animations = animationFactories.map((factory) => factory()).filter(Boolean);
@@ -8125,12 +8329,22 @@ class MotionState {
   getOptions() {
     return this.options;
   }
+  willUpdate(label) {
+    var _a;
+    (_a = this.visualElement.projection) == null ? void 0 : _a.willUpdate();
+  }
 }
 function getMotionElement(el) {
   if ((el == null ? void 0 : el.nodeType) === 3 || (el == null ? void 0 : el.nodeType) === 8)
     return getMotionElement(el.nextSibling);
   return el;
 }
+function checkMotionIsHidden(instance) {
+  var _a;
+  const isHidden = ((_a = getMotionElement(instance.$el)) == null ? void 0 : _a.style.display) === "none";
+  const hasTransition = instance.$.vnode.transition;
+  return hasTransition && isHidden;
+}
 const defaultConfig = {
   reduceMotion: "never",
   transition: void 0,
@@ -8160,6 +8374,8 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     transition: {},
     layoutGroup: {},
     motionConfig: {},
+    onAnimationComplete: { type: Function },
+    onUpdate: { type: Function },
     layout: { type: [Boolean, String] },
     layoutId: {},
     layoutScroll: { type: Boolean },
@@ -8213,22 +8429,33 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     dragElastic: 0.2,
     dragMomentum: true,
     whileDrag: void 0,
-    crossfade: void 0
+    crossfade: true
   }),
   setup(__props) {
     const props = __props;
-    const { initial: presenceInitial, safeUnmount } = injectAnimatePresence({ initial: vue.ref(void 0), safeUnmount: () => true });
+    const animatePresenceContext = injectAnimatePresence({});
     const parentState = injectMotion(null);
     const attrs = vue.useAttrs();
     const layoutGroup = injectLayoutGroup({});
     const config = useMotionConfig();
-    const state2 = new MotionState(
-      {
+    function getLayoutId() {
+      if (layoutGroup.id && props.layoutId)
+        return `${layoutGroup.id}-${props.layoutId}`;
+      return props.layoutId || void 0;
+    }
+    function getMotionProps() {
+      return {
         ...attrs,
         ...props,
+        layoutId: getLayoutId(),
+        transition: props.transition ?? config.value.transition,
         layoutGroup,
-        motionConfig: config.value
-      },
+        motionConfig: config.value,
+        initial: animatePresenceContext.initial === false ? animatePresenceContext.initial : props.initial === true ? void 0 : props.initial
+      };
+    }
+    const state2 = new MotionState(
+      getMotionProps(),
       parentState
     );
     provideMotion(state2);
@@ -8237,29 +8464,20 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
       state2.beforeMount();
     });
     vue.onMounted(() => {
-      state2.mount(getMotionElement(instance.$el), {
-        ...attrs,
-        ...props,
-        transition: props.transition ?? config.value.transition,
-        layoutGroup,
-        motionConfig: config.value,
-        initial: presenceInitial.value === false ? presenceInitial.value : props.initial === true ? void 0 : props.initial
-      });
+      state2.mount(getMotionElement(instance.$el), getMotionProps(), checkMotionIsHidden(instance));
     });
     vue.onBeforeUnmount(() => state2.beforeUnmount());
     vue.onUnmounted(() => {
-      if (safeUnmount(getMotionElement(instance.$el)))
+      const el = getMotionElement(instance.$el);
+      if (!(el == null ? void 0 : el.isConnected)) {
         state2.unmount();
+      }
+    });
+    vue.onBeforeUpdate(() => {
+      state2.beforeUpdate();
     });
-    vue.onBeforeUpdate(() => state2.beforeUpdate());
     vue.onUpdated(() => {
-      state2.update({
-        ...attrs,
-        ...props,
-        transition: props.transition ?? config.value.transition,
-        motionConfig: config.value,
-        initial: presenceInitial.value === false ? presenceInitial.value : props.initial === true ? void 0 : props.initial
-      });
+      state2.update(getMotionProps());
     });
     function getProps() {
       const isSVG = state2.visualElement.type === "svg";
@@ -8278,7 +8496,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
         Object.assign(styleProps, style2);
       }
       if (!state2.isMounted()) {
-        Object.assign(styleProps, state2.target);
+        Object.assign(styleProps, state2.baseTarget);
       }
       if (props.drag && props.dragListener !== false) {
         Object.assign(styleProps, {
@@ -8295,16 +8513,29 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
       attrsProps.style = styleProps;
       return attrsProps;
     }
+    const PrimitiveRef = vue.ref();
+    function onMotionComplete() {
+      var _a;
+      if (props.asChild) {
+        (_a = PrimitiveRef.value) == null ? void 0 : _a.$forceUpdate();
+      }
+    }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(Primitive), vue.mergeProps({
+      var _a;
+      return vue.openBlock(), vue.createBlock(vue.unref(Primitive), {
+        ref_key: "PrimitiveRef",
+        ref: PrimitiveRef,
+        "get-props": getProps,
         as: _ctx.as,
-        "as-child": _ctx.asChild
-      }, getProps()), {
+        "as-child": _ctx.asChild,
+        "data-motion-group": ((_a = vue.unref(layoutGroup).key) == null ? void 0 : _a.value) || void 0,
+        onMotioncomplete: onMotionComplete
+      }, {
         default: vue.withCtx(() => [
           vue.renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 16, ["as", "as-child"]);
+      }, 8, ["as", "as-child", "data-motion-group"]);
     };
   }
 });
@@ -8346,14 +8577,17 @@ function usePopLayout(props) {
   }
   function removePopStyle(state2) {
     const style2 = styles.get(state2);
-    if (style2) {
-      styles.delete(state2);
+    if (!style2)
+      return;
+    styles.delete(state2);
+    requestIdleCallback(() => {
       document.head.removeChild(style2);
-    }
+    });
   }
   return {
     addPopStyle,
-    removePopStyle
+    removePopStyle,
+    styles
   };
 }
 const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
@@ -8366,42 +8600,61 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     mode: { default: "sync" },
     initial: { type: Boolean, default: true },
     multiple: { type: Boolean, default: false },
-    as: {}
+    as: {},
+    custom: {},
+    onExitComplete: {}
   },
   setup(__props) {
     const props = __props;
-    const { initial } = vue.toRefs(props);
-    provideAnimatePresence({
-      initial,
-      safeUnmount(el) {
-        return !doneCallbacks.has(el);
-      }
+    const presenceContext = {
+      initial: props.initial,
+      custom: props.custom
+    };
+    provideAnimatePresence(presenceContext);
+    vue.onMounted(() => {
+      presenceContext.initial = void 0;
     });
     function enter(el) {
       const state2 = mountedStates.get(el);
       if (!state2) {
         return;
       }
+      state2.isVShow = true;
       removeDoneCallback(el);
       state2.setActive("exit", false);
     }
-    const { addPopStyle, removePopStyle } = usePopLayout(props);
+    const { addPopStyle, removePopStyle, styles } = usePopLayout(props);
+    const exitDom = /* @__PURE__ */ new Map();
+    vue.onUnmounted(() => {
+      exitDom.clear();
+    });
     function exit(el, done) {
       const state2 = mountedStates.get(el);
       if (!state2) {
         return done();
       }
+      exitDom.set(el, true);
       removeDoneCallback(el);
       addPopStyle(state2);
       function doneCallback(e) {
         var _a, _b;
-        removePopStyle(state2);
         if ((_a = e == null ? void 0 : e.detail) == null ? void 0 : _a.isExit) {
+          const projection = state2.visualElement.projection;
+          if ((projection == null ? void 0 : projection.animationProgress) > 0 && !state2.isSafeToRemove && !state2.isVShow) {
+            return;
+          }
           removeDoneCallback(el);
-          (_b = state2.visualElement.projection) == null ? void 0 : _b.willUpdate();
+          exitDom.delete(el);
+          if (exitDom.size === 0) {
+            (_b = props.onExitComplete) == null ? void 0 : _b.call(props);
+          }
+          if (!styles.has(state2)) {
+            state2.willUpdate("done");
+          }
           done();
-          if (!el.isConnected) {
-            state2.unmount();
+          removePopStyle(state2);
+          if (!(el == null ? void 0 : el.isConnected)) {
+            state2.unmount(true);
           }
         }
       }
@@ -8425,6 +8678,31 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  ...{
+    name: "MotionConfig",
+    inheritAttrs: false
+  },
+  __name: "MotionConfig",
+  props: {
+    transition: {},
+    reduceMotion: { default: defaultConfig.reduceMotion },
+    nonce: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const parentConfig = useMotionConfig();
+    const config = vue.computed(() => ({
+      transition: props.transition ?? parentConfig.value.transition,
+      reduceMotion: props.reduceMotion ?? parentConfig.value.reduceMotion,
+      nonce: props.nonce ?? parentConfig.value.nonce
+    }));
+    provideMotionConfig(config);
+    return (_ctx, _cache) => {
+      return vue.renderSlot(_ctx.$slots, "default");
+    };
+  }
+});
 function useForceUpdate() {
   const key = vue.ref(0);
   function forceUpdate() {
@@ -8454,9 +8732,12 @@ function nodeGroup() {
         unsubscribe();
         subscriptions.delete(node);
       }
-      dirtyAll();
     },
-    dirty: dirtyAll
+    dirty: dirtyAll,
+    didUpdate: () => {
+      var _a;
+      (_a = nodes[0]) == null ? void 0 : _a.didUpdate();
+    }
   };
 }
 function useLayoutGroupProvider(props) {
@@ -8488,7 +8769,7 @@ function getGroup(props, parentGroup) {
   const shouldInherit = props.inherit === true || props.inherit === "group";
   return shouldInherit ? (parentGroup == null ? void 0 : parentGroup.group) || nodeGroup() : nodeGroup();
 }
-const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "LayoutGroup",
   props: {
     id: {},
@@ -8496,12 +8777,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const { forceRender, key, group } = useLayoutGroupProvider(props);
-    vue.onUpdated(() => {
-    });
-    vue.onBeforeUpdate(() => {
-      group.dirty();
-    });
+    const { forceRender, key } = useLayoutGroupProvider(props);
     return (_ctx, _cache) => {
       return vue.renderSlot(_ctx.$slots, "default", {
         renderKey: vue.unref(key),
@@ -8510,31 +8786,6 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...{
-    name: "MotionConfig",
-    inheritAttrs: false
-  },
-  __name: "MotionConfig",
-  props: {
-    transition: {},
-    reduceMotion: { default: defaultConfig.reduceMotion },
-    nonce: {}
-  },
-  setup(__props) {
-    const props = __props;
-    const parentConfig = useMotionConfig();
-    const config = vue.computed(() => ({
-      transition: props.transition ?? parentConfig.value.transition,
-      reduceMotion: props.reduceMotion ?? parentConfig.value.reduceMotion,
-      nonce: props.nonce ?? parentConfig.value.nonce
-    }));
-    provideMotionConfig(config);
-    return (_ctx, _cache) => {
-      return vue.renderSlot(_ctx.$slots, "default");
-    };
-  }
-});
 function useCombineMotionValues(combineValues) {
   const value = motionValue(combineValues());
   const updateValue = () => value.set(combineValues());
@@ -8739,7 +8990,8 @@ const components = {
   motion: [
     "Motion",
     "AnimatePresence",
-    "LayoutGroup"
+    "LayoutGroup",
+    "MotionConfig"
   ]
 };
 const utilities = {
@@ -8784,14 +9036,10 @@ function useAnimate() {
   });
   return [domProxy, animate2];
 }
-Object.defineProperty(exports, "isDragActive", {
-  enumerable: true,
-  get: () => motionDom.isDragActive
-});
 exports.AnimatePresence = _sfc_main$2;
-exports.LayoutGroup = _sfc_main$1;
+exports.LayoutGroup = _sfc_main;
 exports.Motion = _sfc_main$3;
-exports.MotionConfig = _sfc_main;
+exports.MotionConfig = _sfc_main$1;
 exports.MotionValue = MotionValue;
 exports.animate = animate;
 exports.animateMini = animateMini;
@@ -8824,6 +9072,7 @@ exports.inertia = inertia;
 exports.injectLayoutGroup = injectLayoutGroup;
 exports.injectMotion = injectMotion;
 exports.interpolate = interpolate;
+exports.isDragActive = isDragActive;
 exports.isMotionValue = isMotionValue;
 exports.keyframes = keyframes;
 exports.millisecondsToSeconds = millisecondsToSeconds;