motion-v 0.5.0-beta.2 → 0.5.1

package/dist/cjs/index.js

@@ -1,6 +1,23 @@
 "use strict";
 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;
+if (process.env.NODE_ENV !== "production") {
+  warning = (check, message) => {
+    if (!check && typeof console !== "undefined") {
+      console.warn(message);
+    }
+  };
+  exports.invariant = (check, message) => {
+    if (!check) {
+      throw new Error(message);
+    }
+  };
+}
 function addUniqueItem$1(arr, item) {
   if (arr.indexOf(item) === -1)
     arr.push(item);
@@ -52,7 +69,6 @@ const MotionGlobalConfig = {
   skipAnimations: false,
   useManualTiming: false
 };
-const noop$1 = (any) => any;
 function createRenderStep(runNextFrame) {
   let thisFrame = /* @__PURE__ */ new Set();
   let nextFrame = /* @__PURE__ */ new Set();
@@ -102,8 +118,8 @@ function createRenderStep(runNextFrame) {
       }
       isProcessing = true;
       [thisFrame, nextFrame] = [nextFrame, thisFrame];
-      nextFrame.clear();
       thisFrame.forEach(triggerCallback);
+      thisFrame.clear();
       isProcessing = false;
       if (flushNextFrame) {
         flushNextFrame = false;
@@ -183,7 +199,7 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
   };
   return { schedule, cancel, state: state2, steps: steps2 };
 }
-const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop$1, true);
+const { schedule: frame, cancel: cancelFrame, state: frameData, steps: frameSteps } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
 let now;
 function clearTime() {
   now = void 0;
@@ -217,7 +233,7 @@ class MotionValue {
    * @internal
    */
   constructor(init, options = {}) {
-    this.version = "11.11.11";
+    this.version = "11.15.0";
     this.canTrackVelocity = null;
     this.events = {};
     this.updateAndNotify = (v, render = true) => {
@@ -540,6 +556,9 @@ class GroupPlaybackControls {
   runAll(methodName) {
     this.animations.forEach((controls) => controls[methodName]());
   }
+  flatten() {
+    this.runAll("flatten");
+  }
   play() {
     this.runAll("play");
   }
@@ -553,46 +572,69 @@ class GroupPlaybackControls {
     this.runAll("complete");
   }
 }
-const secondsToMilliseconds = (seconds) => seconds * 1e3;
-const millisecondsToSeconds = (milliseconds) => milliseconds / 1e3;
+const progress$1 = (from, to, value) => {
+  const toFromDifference = to - from;
+  return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
+};
+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)) + ", ";
+  }
+  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);
 }
-exports.warning = noop$1;
-exports.invariant = noop$1;
-if (process.env.NODE_ENV !== "production") {
-  exports.warning = (check, message) => {
-    if (!check && typeof console !== "undefined") {
-      console.warn(message);
-    }
-  };
-  exports.invariant = (check, message) => {
-    if (!check) {
-      throw new Error(message);
-    }
-  };
-}
-const clamp = (min, max, v) => {
+const clamp$1 = (min, max, v) => {
   if (v > max)
     return max;
   if (v < min)
     return min;
   return v;
 };
+const springDefaults = {
+  // Default spring physics
+  stiffness: 100,
+  damping: 10,
+  mass: 1,
+  velocity: 0,
+  // Default duration/bounce-based options
+  duration: 800,
+  // in ms
+  bounce: 0.3,
+  visualDuration: 0.3,
+  // in seconds
+  // Rest thresholds
+  restSpeed: {
+    granular: 0.01,
+    default: 2
+  },
+  restDelta: {
+    granular: 5e-3,
+    default: 0.5
+  },
+  // Limits
+  minDuration: 0.01,
+  // in seconds
+  maxDuration: 10,
+  // in seconds
+  minDamping: 0.05,
+  maxDamping: 1
+};
 const safeMin = 1e-3;
-const minDuration = 0.01;
-const maxDuration$1 = 10;
-const minDamping = 0.05;
-const maxDamping = 1;
-function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1 }) {
+function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, velocity = springDefaults.velocity, mass = springDefaults.mass }) {
   let envelope;
   let derivative;
-  exports.warning(duration <= secondsToMilliseconds(maxDuration$1), "Spring duration must be 10 seconds or less");
+  warning(duration <= secondsToMilliseconds$1(springDefaults.maxDuration), "Spring duration must be 10 seconds or less");
   let dampingRatio = 1 - bounce;
-  dampingRatio = clamp(minDamping, maxDamping, dampingRatio);
-  duration = clamp(minDuration, maxDuration$1, millisecondsToSeconds(duration));
+  dampingRatio = clamp$1(springDefaults.minDamping, springDefaults.maxDamping, dampingRatio);
+  duration = clamp$1(springDefaults.minDuration, springDefaults.maxDuration, millisecondsToSeconds$1(duration));
   if (dampingRatio < 1) {
     envelope = (undampedFreq2) => {
       const exponentialDecay = undampedFreq2 * dampingRatio;
@@ -626,11 +668,11 @@ function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1 }) {
   }
   const initialGuess = 5 / duration;
   const undampedFreq = approximateRoot(envelope, derivative, initialGuess);
-  duration = secondsToMilliseconds(duration);
+  duration = secondsToMilliseconds$1(duration);
   if (isNaN(undampedFreq)) {
     return {
-      stiffness: 100,
-      damping: 10,
+      stiffness: springDefaults.stiffness,
+      damping: springDefaults.damping,
       duration
     };
   } else {
@@ -653,6 +695,17 @@ 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) {
@@ -660,39 +713,58 @@ function isSpringType(options, keys2) {
 }
 function getSpringOptions(options) {
   let springOptions = {
-    velocity: 0,
-    stiffness: 100,
-    damping: 10,
-    mass: 1,
+    velocity: springDefaults.velocity,
+    stiffness: springDefaults.stiffness,
+    damping: springDefaults.damping,
+    mass: springDefaults.mass,
     isResolvedFromDuration: false,
     ...options
   };
   if (!isSpringType(options, physicsKeys) && isSpringType(options, durationKeys)) {
-    const derived = findSpring(options);
-    springOptions = {
-      ...springOptions,
-      ...derived,
-      mass: 1
-    };
-    springOptions.isResolvedFromDuration = true;
+    if (options.visualDuration) {
+      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);
+      springOptions = {
+        ...springOptions,
+        mass: springDefaults.mass,
+        stiffness,
+        damping
+      };
+    } else {
+      const derived = findSpring(options);
+      springOptions = {
+        ...springOptions,
+        ...derived,
+        mass: springDefaults.mass
+      };
+      springOptions.isResolvedFromDuration = true;
+    }
   }
   return springOptions;
 }
-function spring({ keyframes: keyframes2, restDelta, restSpeed, ...options }) {
-  const origin = keyframes2[0];
-  const target = keyframes2[keyframes2.length - 1];
+function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce = springDefaults.bounce) {
+  const options = typeof optionsOrVisualDuration !== "object" ? {
+    visualDuration: optionsOrVisualDuration,
+    keyframes: [0, 1],
+    bounce
+  } : optionsOrVisualDuration;
+  let { restSpeed, restDelta } = options;
+  const origin = options.keyframes[0];
+  const target = options.keyframes[options.keyframes.length - 1];
   const state2 = { done: false, value: origin };
   const { stiffness, damping, mass, duration, velocity, isResolvedFromDuration } = getSpringOptions({
     ...options,
-    velocity: -millisecondsToSeconds(options.velocity || 0)
+    velocity: -millisecondsToSeconds$1(options.velocity || 0)
   });
   const initialVelocity = velocity || 0;
   const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
   const initialDelta = target - origin;
-  const undampedAngularFreq = millisecondsToSeconds(Math.sqrt(stiffness / mass));
+  const undampedAngularFreq = millisecondsToSeconds$1(Math.sqrt(stiffness / mass));
   const isGranularScale = Math.abs(initialDelta) < 5;
-  restSpeed || (restSpeed = isGranularScale ? 0.01 : 2);
-  restDelta || (restDelta = isGranularScale ? 5e-3 : 0.5);
+  restSpeed || (restSpeed = isGranularScale ? springDefaults.restSpeed.granular : springDefaults.restSpeed.default);
+  restDelta || (restDelta = isGranularScale ? springDefaults.restDelta.granular : springDefaults.restDelta.default);
   let resolveSpring;
   if (dampingRatio < 1) {
     const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
@@ -710,14 +782,14 @@ function spring({ keyframes: keyframes2, restDelta, restSpeed, ...options }) {
       return target - envelope * ((initialVelocity + dampingRatio * undampedAngularFreq * initialDelta) * Math.sinh(freqForT) + dampedAngularFreq * initialDelta * Math.cosh(freqForT)) / dampedAngularFreq;
     };
   }
-  return {
+  const generator = {
     calculatedDuration: isResolvedFromDuration ? duration || null : null,
     next: (t) => {
       const current = resolveSpring(t);
       if (!isResolvedFromDuration) {
         let currentVelocity = 0;
         if (dampingRatio < 1) {
-          currentVelocity = t === 0 ? secondsToMilliseconds(initialVelocity) : calcGeneratorVelocity(resolveSpring, t, current);
+          currentVelocity = t === 0 ? secondsToMilliseconds$1(initialVelocity) : calcGeneratorVelocity(resolveSpring, t, current);
         }
         const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;
         const isBelowDisplacementThreshold = Math.abs(target - current) <= restDelta;
@@ -727,19 +799,14 @@ function spring({ keyframes: keyframes2, restDelta, restSpeed, ...options }) {
       }
       state2.value = state2.done ? target : current;
       return state2;
+    },
+    toString: () => {
+      const calculatedDuration = Math.min(calcGeneratorDuration(generator), maxGeneratorDuration);
+      const easing = generateLinearEasing((progress2) => generator.next(calculatedDuration * progress2).value, calculatedDuration, 30);
+      return calculatedDuration + "ms " + easing;
     }
   };
-}
-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;
+  return generator;
 }
 function createGeneratorEasing(options, scale2 = 100, createGenerator) {
   const generator = createGenerator({ ...options, keyframes: [0, scale2] });
@@ -747,21 +814,17 @@ function createGeneratorEasing(options, scale2 = 100, createGenerator) {
   return {
     type: "keyframes",
     ease: (progress2) => generator.next(duration * progress2).value / scale2,
-    duration: millisecondsToSeconds(duration)
+    duration: millisecondsToSeconds$1(duration)
   };
 }
-const mixNumber$1 = (from, to, progress2) => {
+const mixNumber$2 = (from, to, progress2) => {
   return from + (to - from) * progress2;
 };
-const progress = (from, to, value) => {
-  const toFromDifference = to - from;
-  return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
-};
 function fillOffset(offset, remaining) {
   const min = offset[offset.length - 1];
   for (let i = 1; i <= remaining; i++) {
-    const offsetProgress = progress(0, remaining, i);
-    offset.push(mixNumber$1(min, 1, offsetProgress));
+    const offsetProgress = progress$1(0, remaining, i);
+    offset.push(mixNumber$2(min, 1, offsetProgress));
   }
 }
 function defaultOffset$1(arr) {
@@ -770,31 +833,12 @@ function defaultOffset$1(arr) {
   return offset;
 }
 const isMotionValue$1 = (value) => Boolean(value && value.getVelocity);
-function resolveElements(elements, scope, selectorCache) {
-  var _a;
-  if (typeof elements === "string") {
-    let root = document;
-    if (scope) {
-      exports.invariant(Boolean(scope.current), "Scope provided, but no element detected.");
-      root = scope.current;
-    }
-    if (selectorCache) {
-      (_a = selectorCache[elements]) !== null && _a !== void 0 ? _a : selectorCache[elements] = root.querySelectorAll(elements);
-      elements = selectorCache[elements];
-    } else {
-      elements = root.querySelectorAll(elements);
-    }
-  } else if (elements instanceof Element) {
-    elements = [elements];
-  }
-  return Array.from(elements || []);
-}
 function isDOMKeyframes(keyframes2) {
   return typeof keyframes2 === "object" && !Array.isArray(keyframes2);
 }
 function resolveSubjects(subject, keyframes2, scope, selectorCache) {
   if (typeof subject === "string" && isDOMKeyframes(keyframes2)) {
-    return resolveElements(subject, scope, selectorCache);
+    return motionDom.resolveElements(subject, scope, selectorCache);
   } else if (subject instanceof NodeList) {
     return Array.from(subject);
   } else if (Array.isArray(subject)) {
@@ -842,7 +886,7 @@ function addKeyframes(sequence, keyframes2, easing, offset, startTime, endTime)
   for (let i = 0; i < keyframes2.length; i++) {
     sequence.push({
       value: keyframes2[i],
-      at: mixNumber$1(startTime, endTime, offset[i]),
+      at: mixNumber$2(startTime, endTime, offset[i]),
       easing: getEasingForSegment(easing, i)
     });
   }
@@ -858,7 +902,16 @@ 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) {
   const defaultDuration = defaultTransition.duration || 0.3;
   const animationDefinitions = /* @__PURE__ */ new Map();
@@ -884,7 +937,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
     let maxDuration2 = 0;
     const resolveValueSequence = (valueKeyframes, valueTransition, valueSequence, elementIndex = 0, numSubjects = 0) => {
       const valueKeyframesAsList = keyframesAsList(valueKeyframes);
-      const { delay: delay2 = 0, times = defaultOffset$1(valueKeyframesAsList), type = "keyframes", ...remainingTransition } = valueTransition;
+      const { delay: delay2 = 0, times = defaultOffset$1(valueKeyframesAsList), type = "keyframes", repeat, repeatType, repeatDelay = 0, ...remainingTransition } = valueTransition;
       let { ease: ease2 = defaultTransition.ease || "easeOut", duration } = valueTransition;
       const calculatedDelay = typeof delay2 === "function" ? delay2(elementIndex, numSubjects) : delay2;
       const numKeyframes = valueKeyframesAsList.length;
@@ -897,7 +950,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
         }
         const springTransition = { ...remainingTransition };
         if (duration !== void 0) {
-          springTransition.duration = secondsToMilliseconds(duration);
+          springTransition.duration = secondsToMilliseconds$1(duration);
         }
         const springEasing = createGeneratorEasing(springTransition, absoluteDelta, createGenerator);
         ease2 = springEasing.ease;
@@ -905,13 +958,29 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
       }
       duration !== null && duration !== void 0 ? duration : duration = defaultDuration;
       const startTime = currentTime + calculatedDelay;
-      const targetTime = startTime + duration;
       if (times.length === 1 && times[0] === 0) {
         times[1] = 1;
       }
       const remainder = times.length - valueKeyframesAsList.length;
       remainder > 0 && fillOffset(times, remainder);
       valueKeyframesAsList.length === 1 && valueKeyframesAsList.unshift(null);
+      if (repeat) {
+        exports.invariant(repeat < MAX_REPEAT, "Repeat count too high, must be less than 20");
+        duration = calculateRepeatDuration(duration, repeat);
+        const originalKeyframes = [...valueKeyframesAsList];
+        const originalTimes = [...times];
+        ease2 = Array.isArray(ease2) ? [...ease2] : [ease2];
+        const originalEase = [...ease2];
+        for (let repeatIndex = 0; repeatIndex < repeat; repeatIndex++) {
+          valueKeyframesAsList.push(...originalKeyframes);
+          for (let keyframeIndex = 0; keyframeIndex < originalKeyframes.length; keyframeIndex++) {
+            times.push(originalTimes[keyframeIndex] + (repeatIndex + 1));
+            ease2.push(keyframeIndex === 0 ? "linear" : getEasingForSegment(originalEase, keyframeIndex - 1));
+          }
+        }
+        normalizeTimes(times, repeat);
+      }
+      const targetTime = startTime + duration;
       addKeyframes(valueSequence, valueKeyframesAsList, ease2, times, startTime, targetTime);
       maxDuration2 = Math.max(calculatedDelay + duration, maxDuration2);
       totalDuration = Math.max(targetTime, totalDuration);
@@ -945,7 +1014,7 @@ function createAnimationsFromSequence(sequence, { defaultTransition = {}, ...seq
       for (let i = 0; i < valueSequence.length; i++) {
         const { at, value, easing } = valueSequence[i];
         keyframes2.push(value);
-        valueOffset.push(progress(0, totalDuration, at));
+        valueOffset.push(progress$1(0, totalDuration, at));
         valueEasing.push(easing || "easeOut");
       }
       if (valueOffset[0] !== 0) {
@@ -1075,7 +1144,7 @@ function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) {
 }
 function cubicBezier(mX1, mY1, mX2, mY2) {
   if (mX1 === mY1 && mX2 === mY2)
-    return noop$1;
+    return noop;
   const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2);
   return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
 }
@@ -1140,26 +1209,26 @@ const number = {
 };
 const alpha = {
   ...number,
-  transform: (v) => clamp(0, 1, v)
+  transform: (v) => clamp$1(0, 1, v)
 };
 const scale = {
   ...number,
   default: 1
 };
-const createUnitType = (unit) => ({
+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("deg");
-const percent = /* @__PURE__ */ createUnitType("%");
-const px = /* @__PURE__ */ createUnitType("px");
-const vh = /* @__PURE__ */ createUnitType("vh");
-const vw = /* @__PURE__ */ createUnitType("vw");
+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,
-  parse: (v) => percent.parse(v) / 100,
-  transform: (v) => percent.transform(v * 100)
+  ...percent$1,
+  parse: (v) => percent$1.parse(v) / 100,
+  transform: (v) => percent$1.transform(v * 100)
 };
 const positionalKeys = /* @__PURE__ */ new Set([
   "width",
@@ -1222,7 +1291,7 @@ const auto = {
   test: (v) => v === "auto",
   parse: (v) => v
 };
-const dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto];
+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;
@@ -1372,7 +1441,7 @@ const splitColor = (aName, bName, cName) => (v) => {
     alpha: alpha2 !== void 0 ? parseFloat(alpha2) : 1
   };
 };
-const clampRgbUnit = (v) => clamp(0, 255, v);
+const clampRgbUnit = (v) => clamp$1(0, 255, v);
 const rgbUnit = {
   ...number,
   transform: (v) => Math.round(clampRgbUnit(v))
@@ -1418,7 +1487,7 @@ const hsla = {
   test: /* @__PURE__ */ isColorString("hsl", "hue"),
   parse: /* @__PURE__ */ splitColor("hue", "saturation", "lightness"),
   transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {
-    return "hsla(" + Math.round(hue) + ", " + percent.transform(sanitize(saturation)) + ", " + percent.transform(sanitize(lightness)) + ", " + sanitize(alpha.transform(alpha$1)) + ")";
+    return "hsla(" + Math.round(hue) + ", " + percent$1.transform(sanitize(saturation)) + ", " + percent$1.transform(sanitize(lightness)) + ", " + sanitize(alpha.transform(alpha$1)) + ")";
   }
 };
 const color = {
@@ -1774,7 +1843,7 @@ function canAnimate(keyframes2, name, type, velocity) {
   const targetKeyframe = keyframes2[keyframes2.length - 1];
   const isOriginAnimatable = isAnimatable(originKeyframe, name);
   const isTargetAnimatable = isAnimatable(targetKeyframe, name);
-  exports.warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${name} from "${originKeyframe}" to "${targetKeyframe}". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \`style\` property.`);
+  warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${name} from "${originKeyframe}" to "${targetKeyframe}". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \`style\` property.`);
   if (!isOriginAnimatable || !isTargetAnimatable) {
     return false;
   }
@@ -1862,6 +1931,10 @@ class BaseAnimation {
   then(resolve, reject) {
     return this.currentFinishedPromise.then(resolve, reject);
   }
+  flatten() {
+    this.options.type = "keyframes";
+    this.options.ease = "linear";
+  }
   updateFinishedPromise() {
     this.currentFinishedPromise = new Promise((resolve) => {
       this.resolveFinishedPromise = resolve;
@@ -1935,7 +2008,7 @@ 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$1,
+  linear: noop,
   easeIn,
   easeInOut,
   easeOut,
@@ -2008,7 +2081,7 @@ const colorTypes = [hex, rgba, hsla];
 const getColorType = (v) => colorTypes.find((type) => type.test(v));
 function asRGBA(color2) {
   const type = getColorType(color2);
-  exports.warning(Boolean(type), `'${color2}' is not an animatable color. Use the equivalent color code instead.`);
+  warning(Boolean(type), `'${color2}' is not an animatable color. Use the equivalent color code instead.`);
   if (!Boolean(type))
     return false;
   let model = type.parse(color2);
@@ -2028,7 +2101,7 @@ const mixColor = (from, to) => {
     blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v);
     blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v);
     blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v);
-    blended.alpha = mixNumber$1(fromRGBA.alpha, toRGBA.alpha, v);
+    blended.alpha = mixNumber$2(fromRGBA.alpha, toRGBA.alpha, v);
     return rgba.transform(blended);
   };
 };
@@ -2040,12 +2113,12 @@ function mixVisibility(origin, target) {
     return (p) => p >= 1 ? target : origin;
   }
 }
-function mixNumber(a, b) {
-  return (p) => mixNumber$1(a, b, p);
+function mixNumber$1(a, b) {
+  return (p) => mixNumber$2(a, b, p);
 }
 function getMixer$1(a) {
   if (typeof a === "number") {
-    return mixNumber;
+    return mixNumber$1;
   } else if (typeof a === "string") {
     return isCSSVariableToken(a) ? mixImmediate : color.test(a) ? mixColor : mixComplex;
   } else if (Array.isArray(a)) {
@@ -2105,13 +2178,13 @@ const mixComplex = (origin, target) => {
     }
     return pipe(mixArray(matchOrder(originStats, targetStats), targetStats.values), template);
   } else {
-    exports.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.`);
+    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$1(from, to, p);
+    return mixNumber$2(from, to, p);
   }
   const mixer = getMixer$1(from);
   return mixer(from, to);
@@ -2123,7 +2196,7 @@ function createMixers(output, ease2, customMixer) {
   for (let i = 0; i < numMixers; i++) {
     let mixer = mixerFactory(output[i], output[i + 1]);
     if (ease2) {
-      const easingFunction = Array.isArray(ease2) ? ease2[i] || noop$1 : ease2;
+      const easingFunction = Array.isArray(ease2) ? ease2[i] || noop : ease2;
       mixer = pipe(easingFunction, mixer);
     }
     mixers.push(mixer);
@@ -2151,10 +2224,10 @@ function interpolate(input, output, { clamp: isClamp = true, ease: ease2, mixer
           break;
       }
     }
-    const progressInRange = progress(input[i], input[i + 1], v);
+    const progressInRange = progress$1(input[i], input[i + 1], v);
     return mixers[i](progressInRange);
   };
-  return isClamp ? (v) => interpolator(clamp(input[0], input[inputLength - 1], v)) : interpolator;
+  return isClamp ? (v) => interpolator(clamp$1(input[0], input[inputLength - 1], v)) : interpolator;
 }
 function convertOffsetToTimes(offset, duration) {
   return offset.map((o) => o * duration);
@@ -2231,6 +2304,12 @@ class MainThreadAnimation extends BaseAnimation {
     this.resolver = new KeyframeResolver$1(keyframes2, onResolved, name, motionValue2, element);
     this.resolver.scheduleResolve();
   }
+  flatten() {
+    super.flatten();
+    if (this._resolved) {
+      Object.assign(this._resolved, this.initPlayback(this._resolved.keyframes));
+    }
+  }
   initPlayback(keyframes$1) {
     const { type = "keyframes", repeat = 0, repeatDelay = 0, repeatType, velocity = 0 } = this.options;
     const generatorFactory = isGenerator(type) ? type : generators[type] || keyframes;
@@ -2325,7 +2404,7 @@ class MainThreadAnimation extends BaseAnimation {
           frameGenerator = mirroredGenerator;
         }
       }
-      elapsed = clamp(0, 1, iterationProgress) * resolvedDuration;
+      elapsed = clamp$1(0, 1, iterationProgress) * resolvedDuration;
     }
     const state2 = isInDelayPhase ? { done: false, value: keyframes2[0] } : frameGenerator.next(elapsed);
     if (mapPercentToKeyframes) {
@@ -2349,13 +2428,13 @@ class MainThreadAnimation extends BaseAnimation {
   }
   get duration() {
     const { resolved } = this;
-    return resolved ? millisecondsToSeconds(resolved.calculatedDuration) : 0;
+    return resolved ? millisecondsToSeconds$1(resolved.calculatedDuration) : 0;
   }
   get time() {
-    return millisecondsToSeconds(this.currentTime);
+    return millisecondsToSeconds$1(this.currentTime);
   }
   set time(newTime) {
-    newTime = secondsToMilliseconds(newTime);
+    newTime = secondsToMilliseconds$1(newTime);
     this.currentTime = newTime;
     if (this.holdTime !== null || this.speed === 0) {
       this.holdTime = newTime;
@@ -2370,7 +2449,7 @@ class MainThreadAnimation extends BaseAnimation {
     const hasChanged2 = this.playbackSpeed !== newSpeed;
     this.playbackSpeed = newSpeed;
     if (hasChanged2) {
-      this.time = millisecondsToSeconds(this.currentTime);
+      this.time = millisecondsToSeconds$1(this.currentTime);
     }
   }
   play() {
@@ -2464,15 +2543,6 @@ const acceleratedValues = /* @__PURE__ */ new Set([
   // or until we implement support for linear() easing.
   // "background-color"
 ]);
-const resolution = 10;
-const generateLinearEasing = (easing, duration) => {
-  let points = "";
-  const numPoints = Math.max(Math.round(duration / resolution), 2);
-  for (let i = 0; i < numPoints; i++) {
-    points += easing(progress(0, numPoints - 1, i)) + ", ";
-  }
-  return `linear(${points.substring(0, points.length - 2)})`;
-};
 const supportsFlags = {
   linearEasing: void 0
 };
@@ -2519,7 +2589,7 @@ function mapEasingToNativeEasing(easing, duration) {
     return supportedWaapiEasing[easing];
   }
 }
-function startWaapiAnimation(element, valueName, keyframes2, { delay: delay2 = 0, duration = 300, repeat = 0, repeatType = "loop", ease: ease2, times } = {}) {
+function startWaapiAnimation(element, valueName, keyframes2, { delay: delay2 = 0, duration = 300, repeat = 0, repeatType = "loop", ease: ease2 = "easeInOut", times } = {}) {
   const keyframeOptions = { [valueName]: keyframes2 };
   if (times)
     keyframeOptions.offset = times;
@@ -2632,21 +2702,21 @@ class AcceleratedAnimation extends BaseAnimation {
     if (!resolved)
       return 0;
     const { duration } = resolved;
-    return millisecondsToSeconds(duration);
+    return millisecondsToSeconds$1(duration);
   }
   get time() {
     const { resolved } = this;
     if (!resolved)
       return 0;
     const { animation } = resolved;
-    return millisecondsToSeconds(animation.currentTime || 0);
+    return millisecondsToSeconds$1(animation.currentTime || 0);
   }
   set time(newTime) {
     const { resolved } = this;
     if (!resolved)
       return;
     const { animation } = resolved;
-    animation.currentTime = secondsToMilliseconds(newTime);
+    animation.currentTime = secondsToMilliseconds$1(newTime);
   }
   get speed() {
     const { resolved } = this;
@@ -2686,11 +2756,11 @@ class AcceleratedAnimation extends BaseAnimation {
     } else {
       const { resolved } = this;
       if (!resolved)
-        return noop$1;
+        return noop;
       const { animation } = resolved;
       attachTimeline(animation, timeline);
     }
-    return noop$1;
+    return noop;
   }
   play() {
     if (this.isStopped)
@@ -2736,7 +2806,7 @@ class AcceleratedAnimation extends BaseAnimation {
         times,
         isGenerator: true
       });
-      const sampleTime = secondsToMilliseconds(this.time);
+      const sampleTime = secondsToMilliseconds$1(this.time);
       motionValue2.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta);
     }
     const { onStop } = this.options;
@@ -2771,7 +2841,7 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
   const valueTransition = getValueTransition(transition, name) || {};
   const delay2 = valueTransition.delay || transition.delay || 0;
   let { elapsed = 0 } = transition;
-  elapsed = elapsed - secondsToMilliseconds(delay2);
+  elapsed = elapsed - secondsToMilliseconds$1(delay2);
   let options = {
     keyframes: Array.isArray(target) ? target : [null, target],
     ease: "easeOut",
@@ -2797,10 +2867,10 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
     };
   }
   if (options.duration) {
-    options.duration = secondsToMilliseconds(options.duration);
+    options.duration = secondsToMilliseconds$1(options.duration);
   }
   if (options.repeatDelay) {
-    options.repeatDelay = secondsToMilliseconds(options.repeatDelay);
+    options.repeatDelay = secondsToMilliseconds$1(options.repeatDelay);
   }
   if (options.from !== void 0) {
     options.keyframes[0] = options.from;
@@ -2885,12 +2955,12 @@ const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId
 function getOptimisedAppearId(visualElement) {
   return visualElement.props[optimizedAppearDataAttribute];
 }
-function isWillChangeMotionValue(value) {
+function isWillChangeMotionValue$1(value) {
   return Boolean(isMotionValue$1(value) && value.add);
 }
-function addValueToWillChange(visualElement, key) {
+function addValueToWillChange$1(visualElement, key) {
   const willChange = visualElement.getValue("willChange");
-  if (isWillChangeMotionValue(willChange)) {
+  if (isWillChangeMotionValue$1(willChange)) {
     return willChange.add(key);
   }
 }
@@ -2927,7 +2997,7 @@ function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0,
         }
       }
     }
-    addValueToWillChange(visualElement, key);
+    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) {
@@ -3019,7 +3089,7 @@ function updateMotionValuesFromProps(element, next, prev) {
     if (isMotionValue$1(nextValue)) {
       element.addValue(key, nextValue);
       if (process.env.NODE_ENV === "development") {
-        warnOnce(nextValue.version === "11.11.11", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.11.11 may not work as expected.`);
+        warnOnce(nextValue.version === "11.15.0", `Attempting to mix Motion versions ${nextValue.version} with 11.15.0 may not work as expected.`);
       }
     } else if (isMotionValue$1(prevValue)) {
       element.addValue(key, motionValue(nextValue, { owner: element }));
@@ -3081,10 +3151,10 @@ const createDelta = () => ({
   x: createAxisDelta(),
   y: createAxisDelta()
 });
-const createAxis = () => ({ min: 0, max: 0 });
-const createBox = () => ({
-  x: createAxis(),
-  y: createAxis()
+const createAxis$1 = () => ({ min: 0, max: 0 });
+const createBox$1 = () => ({
+  x: createAxis$1(),
+  y: createAxis$1()
 });
 const propEventHandlers = [
   "AnimationStart",
@@ -3264,7 +3334,7 @@ class VisualElement {
    * removed with a re-render to work.
    */
   measureViewportBox() {
-    return this.current ? this.measureInstanceViewportBox(this.current, this.props) : createBox();
+    return this.current ? this.measureInstanceViewportBox(this.current, this.props) : createBox$1();
   }
   getStaticValue(key) {
     return this.latestValues[key];
@@ -3449,6 +3519,20 @@ class DOMVisualElement extends VisualElement {
     delete vars[key];
     delete style2[key];
   }
+  handleChildMotionValue() {
+    if (this.childSubscription) {
+      this.childSubscription();
+      delete this.childSubscription;
+    }
+    const { children } = this.props;
+    if (isMotionValue$1(children)) {
+      this.childSubscription = children.on("change", (latest) => {
+        if (this.current) {
+          this.current.textContent = `${latest}`;
+        }
+      });
+    }
+  }
 }
 const getValueAsType = (value, type) => {
   return type && typeof value === "number" ? type.transform(value) : value;
@@ -3528,12 +3612,12 @@ function buildHTMLStyles(state2, latestValues, transformTemplate) {
     style2.transformOrigin = `${originX} ${originY} ${originZ}`;
   }
 }
-function calcOrigin(origin, offset, size) {
+function calcOrigin$1(origin, offset, size) {
   return typeof origin === "string" ? origin : px.transform(offset + size * origin);
 }
 function calcSVGTransformOrigin(dimensions, originX, originY) {
-  const pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width);
-  const pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height);
+  const pxOriginX = calcOrigin$1(originX, dimensions.x, dimensions.width);
+  const pxOriginY = calcOrigin$1(originY, dimensions.y, dimensions.height);
   return `${pxOriginX} ${pxOriginY}`;
 }
 const dashKeys = {
@@ -3635,7 +3719,7 @@ class SVGVisualElement extends DOMVisualElement {
     super(...arguments);
     this.type = "svg";
     this.isSVGTag = false;
-    this.measureInstanceViewportBox = createBox;
+    this.measureInstanceViewportBox = createBox$1;
   }
   getBaseTargetFromProps(props, key) {
     return props[key];
@@ -3662,17 +3746,17 @@ class SVGVisualElement extends DOMVisualElement {
     super.mount(instance);
   }
 }
-function convertBoundingBoxToBox({ top, left, right, bottom }) {
+function convertBoundingBoxToBox$1({ top, left, right, bottom }) {
   return {
     x: { min: left, max: right },
     y: { min: top, max: bottom }
   };
 }
-function transformBoxPoints(point2, transformPoint) {
-  if (!transformPoint)
+function transformBoxPoints$1(point2, transformPoint2) {
+  if (!transformPoint2)
     return point2;
-  const topLeft = transformPoint({ x: point2.left, y: point2.top });
-  const bottomRight = transformPoint({ x: point2.right, y: point2.bottom });
+  const topLeft = transformPoint2({ x: point2.left, y: point2.top });
+  const bottomRight = transformPoint2({ x: point2.right, y: point2.bottom });
   return {
     top: topLeft.y,
     left: topLeft.x,
@@ -3752,20 +3836,20 @@ function applyTreeDeltas(box, treeScale, treePath, isSharedTransition = false) {
     treeScale.y = 1;
   }
 }
-function translateAxis(axis, distance2) {
+function translateAxis$1(axis, distance2) {
   axis.min = axis.min + distance2;
   axis.max = axis.max + distance2;
 }
 function transformAxis(axis, axisTranslate, axisScale, boxScale, axisOrigin = 0.5) {
-  const originPoint = mixNumber$1(axis.min, axis.max, axisOrigin);
+  const originPoint = mixNumber$2(axis.min, axis.max, axisOrigin);
   applyAxisDelta(axis, axisTranslate, axisScale, originPoint, boxScale);
 }
 function transformBox(box, transform2) {
   transformAxis(box.x, transform2.x, transform2.scaleX, transform2.scale, transform2.originX);
   transformAxis(box.y, transform2.y, transform2.scaleY, transform2.scale, transform2.originY);
 }
-function measureViewportBox(instance, transformPoint) {
-  return convertBoundingBoxToBox(transformBoxPoints(instance.getBoundingClientRect(), transformPoint));
+function measureViewportBox$1(instance, transformPoint2) {
+  return convertBoundingBoxToBox$1(transformBoxPoints$1(instance.getBoundingClientRect(), transformPoint2));
 }
 function getComputedStyle$1(element) {
   return window.getComputedStyle(element);
@@ -3787,7 +3871,7 @@ class HTMLVisualElement extends DOMVisualElement {
     }
   }
   measureInstanceViewportBox(instance, { transformPagePoint }) {
-    return measureViewportBox(instance, transformPagePoint);
+    return measureViewportBox$1(instance, transformPagePoint);
   }
   build(renderState, latestValues, props) {
     buildHTMLStyles(renderState, latestValues, props.transformTemplate);
@@ -3795,19 +3879,6 @@ class HTMLVisualElement extends DOMVisualElement {
   scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     return scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
   }
-  handleChildMotionValue() {
-    if (this.childSubscription) {
-      this.childSubscription();
-      delete this.childSubscription;
-    }
-    const { children } = this.props;
-    if (isMotionValue$1(children)) {
-      this.childSubscription = children.on("change", (latest) => {
-        if (this.current)
-          this.current.textContent = `${latest}`;
-      });
-    }
-  }
 }
 function isObjectKey(key, object) {
   return key in object;
@@ -3833,7 +3904,7 @@ class ObjectVisualElement extends VisualElement {
     delete renderState.output[key];
   }
   measureInstanceViewportBox() {
-    return createBox();
+    return createBox$1();
   }
   build(renderState, latestValues) {
     Object.assign(renderState.output, latestValues);
@@ -3992,7 +4063,7 @@ class NativeAnimation {
     if (isGenerator(options.type)) {
       const generatorOptions = createGeneratorEasing(options, 100, options.type);
       options.ease = supportsLinearEasing() ? generatorOptions.ease : defaultEasing;
-      options.duration = secondsToMilliseconds(generatorOptions.duration);
+      options.duration = secondsToMilliseconds$1(generatorOptions.duration);
       options.type = "keyframes";
     } else {
       options.ease = options.ease || defaultEasing;
@@ -4021,18 +4092,18 @@ class NativeAnimation {
     }
   }
   get duration() {
-    return millisecondsToSeconds(this.options.duration || 300);
+    return millisecondsToSeconds$1(this.options.duration || 300);
   }
   get time() {
     var _a;
     if (this.animation) {
-      return millisecondsToSeconds(((_a = this.animation) === null || _a === void 0 ? void 0 : _a.currentTime) || 0);
+      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(newTime);
+      this.animation.currentTime = secondsToMilliseconds$1(newTime);
     }
   }
   get speed() {
@@ -4049,6 +4120,12 @@ class NativeAnimation {
   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();
@@ -4096,11 +4173,11 @@ class NativeAnimation {
     } else {
       attachTimeline(this.animation, timeline);
     }
-    return noop$1;
+    return noop;
   }
 }
 function animateElements(elementOrSelector, keyframes2, options, scope) {
-  const elements = resolveElements(elementOrSelector, scope);
+  const elements = motionDom.resolveElements(elementOrSelector, scope);
   const numElements = elements.length;
   exports.invariant(Boolean(numElements), "No valid element provided.");
   const animations = [];
@@ -4113,10 +4190,10 @@ function animateElements(elementOrSelector, keyframes2, options, scope) {
     for (const valueName in keyframes2) {
       const valueKeyframes = keyframes2[valueName];
       const valueOptions = {
-        ...getValueTransition(options, valueName)
+        ...getValueTransition(elementTransition, valueName)
       };
-      valueOptions.duration = valueOptions.duration ? secondsToMilliseconds(valueOptions.duration) : valueOptions.duration;
-      valueOptions.delay = secondsToMilliseconds(valueOptions.delay || 0);
+      valueOptions.duration = valueOptions.duration ? secondsToMilliseconds$1(valueOptions.duration) : valueOptions.duration;
+      valueOptions.delay = secondsToMilliseconds$1(valueOptions.delay || 0);
       animations.push(new NativeAnimation(element, valueName, valueKeyframes, valueOptions));
     }
   }
@@ -4167,7 +4244,7 @@ function createResizeObserver() {
 function resizeElement(target, handler) {
   if (!observer)
     createResizeObserver();
-  const elements = resolveElements(target);
+  const elements = motionDom.resolveElements(target);
   elements.forEach((element) => {
     let elementHandlers = resizeHandlers.get(element);
     if (!elementHandlers) {
@@ -4254,7 +4331,7 @@ function updateAxisInfo(element, axisName, info, time2) {
   axis.offset.length = 0;
   axis.offset[0] = 0;
   axis.offset[1] = axis.scrollLength;
-  axis.progress = progress(0, axis.scrollLength, axis.current);
+  axis.progress = progress$1(0, axis.scrollLength, axis.current);
   const elapsed = time2 - prevTime;
   axis.velocity = elapsed > maxElapsed ? 0 : velocityPerSecond(axis.current - prev, elapsed);
 }
@@ -4537,6 +4614,7 @@ function scrollFunction(onScroll, options) {
   }
 }
 function scrollAnimation(animation, options) {
+  animation.flatten();
   if (needsElementTracking(options)) {
     animation.pause();
     return scrollInfo((info) => {
@@ -4544,12 +4622,16 @@ function scrollAnimation(animation, options) {
     }, options);
   } else {
     const timeline = getTimeline(options);
-    return animation.attachTimeline(timeline, (valueAnimation) => {
-      valueAnimation.pause();
-      return observeTimeline((progress2) => {
-        valueAnimation.time = valueAnimation.duration * progress2;
-      }, timeline);
-    });
+    if (animation.attachTimeline) {
+      return animation.attachTimeline(timeline, (valueAnimation) => {
+        valueAnimation.pause();
+        return observeTimeline((progress2) => {
+          valueAnimation.time = valueAnimation.duration * progress2;
+        }, timeline);
+      });
+    } else {
+      return noop;
+    }
   }
 }
 function scroll(onScroll, { axis = "y", ...options } = {}) {
@@ -4561,7 +4643,7 @@ const thresholds = {
   all: 1
 };
 function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount = "some" } = {}) {
-  const elements = resolveElements(elementOrSelector);
+  const elements = motionDom.resolveElements(elementOrSelector);
   const activeIntersections = /* @__PURE__ */ new WeakMap();
   const onIntersectionChange = (entries) => {
     entries.forEach((entry) => {
@@ -4594,7 +4676,7 @@ function steps(numSteps, direction = "end") {
     progress2 = direction === "end" ? Math.min(progress2, 0.999) : Math.max(progress2, 1e-3);
     const expanded = progress2 * numSteps;
     const rounded = direction === "end" ? Math.floor(expanded) : Math.ceil(expanded);
-    return clamp(0, 1, rounded / numSteps);
+    return clamp$1(0, 1, rounded / numSteps);
   };
 }
 function getOriginIndex(from, total) {
@@ -4648,7 +4730,7 @@ function delay(callback, timeout) {
   return () => cancelFrame(checkElapsed);
 }
 function delayInSeconds(callback, timeout) {
-  return delay(callback, secondsToMilliseconds(timeout));
+  return delay(callback, secondsToMilliseconds$1(timeout));
 }
 const distance = (a, b) => Math.abs(a - b);
 function distance2D(a, b) {
@@ -4720,6 +4802,13 @@ function useAnimationFrame(callback) {
   vue.onUnmounted(() => cancel());
   frame.update(provideTimeSinceStart, true);
 }
+const secondsToMilliseconds = (seconds) => seconds * 1e3;
+function millisecondsToSeconds(milliseconds) {
+  return milliseconds / 1e3;
+}
+function getContextWindow({ current }) {
+  return current ? current.ownerDocument.defaultView : null;
+}
 const [injectMotion, provideMotion] = createContext("Motion");
 const [injectLayoutGroup, provideLayoutGroup] = createContext("LayoutGroup");
 function shouldInheritGroup(inherit) {
@@ -4766,8 +4855,6 @@ function getOptions(options, key) {
 function isCssVar(name) {
   return name == null ? void 0 : name.startsWith("--");
 }
-function noop() {
-}
 const noopReturn = (v) => v;
 function isNumber(value) {
   return typeof value === "number";
@@ -5065,244 +5152,1156 @@ const Primitive = vue.defineComponent({
     return () => vue.h(Slot, attrs, { default: slots.default });
   }
 });
-var warning = function() {
-};
-var invariant = function() {
-};
-if (process.env.NODE_ENV !== "production") {
-  warning = function(check, message) {
-    if (!check && typeof console !== "undefined") {
-      console.warn(message);
-    }
-  };
-  invariant = function(check, message) {
-    if (!check) {
-      throw new Error(message);
-    }
-  };
-}
 class Feature {
   constructor(state2) {
     this.state = state2;
   }
-  update() {
-  }
-}
-class EventFeature extends Feature {
-  constructor() {
-    super(...arguments);
-    this.handlers = {};
+  beforeMount() {
   }
   mount() {
-    const element = this.state.element;
-    if (!element)
-      return;
-    this.handlers.motionstart = (event) => {
-      var _a, _b;
-      const target = event.detail.target;
-      (_b = (_a = this.state.getOptions()).onMotionStart) == null ? void 0 : _b.call(_a, target);
-    };
-    this.handlers.motioncomplete = (event) => {
-      var _a, _b;
-      const target = event.detail.target;
-      (_b = (_a = this.state.getOptions()).onMotionComplete) == null ? void 0 : _b.call(_a, target);
-    };
-    this.handlers.hoverstart = (event) => {
-      var _a, _b;
-      const e = event.detail;
-      (_b = (_a = this.state.getOptions()).onHoverStart) == null ? void 0 : _b.call(_a, e);
-    };
-    this.handlers.hoverend = (event) => {
-      var _a, _b;
-      const e = event.detail;
-      (_b = (_a = this.state.getOptions()).onHoverEnd) == null ? void 0 : _b.call(_a, e);
-    };
-    this.handlers.pressstart = (event) => {
-      var _a, _b;
-      const e = event.detail;
-      (_b = (_a = this.state.getOptions()).onPressStart) == null ? void 0 : _b.call(_a, e);
-    };
-    this.handlers.pressend = (event) => {
-      var _a, _b;
-      const e = event.detail;
-      (_b = (_a = this.state.getOptions()).onPressEnd) == null ? void 0 : _b.call(_a, e);
-    };
-    this.handlers.viewenter = (event) => {
-      var _a, _b;
-      const target = event.detail.target;
-      (_b = (_a = this.state.getOptions()).onViewEnter) == null ? void 0 : _b.call(_a, target);
-    };
-    this.handlers.viewleave = (event) => {
-      var _a, _b;
-      const target = event.detail.target;
-      (_b = (_a = this.state.getOptions()).onViewLeave) == null ? void 0 : _b.call(_a, target);
-    };
-    Object.entries(this.handlers).forEach(([event, handler]) => {
-      element.addEventListener(event, handler);
-    });
   }
   unmount() {
-    const element = this.state.element;
-    if (!element)
-      return;
-    Object.entries(this.handlers).forEach(([event, handler]) => {
-      if (handler) {
-        element.removeEventListener(event, handler);
-        delete this.handlers[event];
-      }
-    });
   }
-}
-function dispatchPointerEvent(element, name, event) {
-  element.dispatchEvent(
-    new CustomEvent(name, { detail: { originalEvent: event } })
-  );
-}
-class BaseGesture extends Feature {
-  updateGestureSubscriptions() {
-    const isActive = this.isActive();
-    if (isActive && !this.removeGestureSubscriptions) {
-      this.removeGestureSubscriptions = this.subscribeEvents();
-    } else if (!isActive && this.removeGestureSubscriptions) {
-      this.removeGestureSubscriptions();
-      this.removeGestureSubscriptions = void 0;
-    }
+  update() {
   }
-  unmount() {
-    var _a;
-    (_a = this.removeGestureSubscriptions) == null ? void 0 : _a.call(this);
+  beforeUpdate() {
+  }
+  beforeUnmount() {
   }
 }
-function mouseEvent(element, name, action) {
-  return (event) => {
-    if (event.pointerType && event.pointerType !== "mouse")
-      return;
-    action();
-    dispatchPointerEvent(element, name, event);
-  };
+function handleHoverEvent$1(state2, event, lifecycle) {
+  const props = state2.options;
+  if (props.hover) {
+    state2.setActive("hover", lifecycle === "Start");
+  }
+  const eventName = `onHover${lifecycle}`;
+  const callback = props[eventName];
+  if (callback) {
+    frame.postRender(() => callback(event, extractEventInfo$1(event)));
+  }
 }
-class HoverGesture extends BaseGesture {
+class HoverGesture extends Feature {
   isActive() {
     return Boolean(this.state.getOptions().hover);
   }
   constructor(state2) {
     super(state2);
-    this.subscribeEvents = () => {
-      const element = this.state.element;
-      const onEnter = mouseEvent(element, "hoverstart", () => {
-        this.state.setActive("hover", true);
-      });
-      const onLeave = mouseEvent(element, "hoverend", () => {
-        var _a;
-        this.state.setActive("hover", false);
-        (_a = this.state.visualElement.variantChildren) == null ? void 0 : _a.forEach((child) => {
-          child.state.setActive("hover", false);
-        });
-      });
-      element.addEventListener("pointerenter", onEnter);
-      element.addEventListener("pointerleave", onLeave);
-      return () => {
-        element.removeEventListener("pointerenter", onEnter);
-        element.removeEventListener("pointerleave", onLeave);
-      };
-    };
   }
   mount() {
-    this.updateGestureSubscriptions();
+    const element = this.state.element;
+    if (!element)
+      return;
+    this.unmount = motionDom.hover(
+      element,
+      (startEvent) => {
+        handleHoverEvent$1(this.state, startEvent, "Start");
+        return (endEvent) => {
+          handleHoverEvent$1(this.state, endEvent, "End");
+        };
+      }
+    );
   }
-  update() {
-    this.updateGestureSubscriptions();
+}
+function extractEventInfo$1(event) {
+  return {
+    point: {
+      x: event.pageX,
+      y: event.pageY
+    }
+  };
+}
+function handlePressEvent(state2, event, lifecycle) {
+  const props = state2.options;
+  if (props.press) {
+    state2.setActive("press", lifecycle === "Start");
+  }
+  const eventName = `onPress${lifecycle === "End" ? "" : lifecycle}`;
+  const callback = props[eventName];
+  if (callback) {
+    frame.postRender(() => callback(event, extractEventInfo$1(event)));
   }
 }
-class PressGesture extends BaseGesture {
+class PressGesture extends Feature {
   isActive() {
-    return Boolean(this.state.getOptions().press);
+    return Boolean(this.state.options.press);
   }
   constructor(state2) {
     super(state2);
-    this.subscribeEvents = () => {
-      const element = this.state.element;
-      const onPointerUp = (event) => {
-        this.state.setActive("press", false);
-        dispatchPointerEvent(element, "pressend", event);
-        window.removeEventListener("pointerup", onPointerUp);
-      };
-      const onPointerDown = (event) => {
-        this.state.setActive("press", true);
-        dispatchPointerEvent(element, "pressstart", event);
-        window.addEventListener("pointerup", onPointerUp);
-      };
-      element.addEventListener("pointerdown", onPointerDown);
-      return () => {
-        element.removeEventListener("pointerdown", onPointerDown);
-        window.removeEventListener("pointerup", onPointerUp);
-      };
-    };
   }
   mount() {
-    this.updateGestureSubscriptions();
+    const element = this.state.element;
+    if (!element)
+      return;
+    this.unmount = motionDom.press(
+      element,
+      (startEvent) => {
+        handlePressEvent(this.state, startEvent, "Start");
+        return (endEvent, { success }) => handlePressEvent(
+          this.state,
+          endEvent,
+          success ? "End" : "Cancel"
+        );
+      },
+      { useGlobalTarget: this.state.options.globalPressTarget }
+    );
   }
-  update() {
-    this.updateGestureSubscriptions();
+}
+function handleHoverEvent(state2, entry, lifecycle) {
+  const props = state2.options;
+  if (props.inView) {
+    state2.setActive("inView", lifecycle === "Enter");
+  }
+  const eventName = `onViewport${lifecycle}`;
+  const callback = props[eventName];
+  if (callback) {
+    frame.postRender(() => callback(entry));
   }
 }
-class InViewGesture extends BaseGesture {
+class InViewGesture extends Feature {
   isActive() {
     return Boolean(this.state.getOptions().inView);
   }
   constructor(state2) {
     super(state2);
-    this.subscribeEvents = () => {
-      var _a;
-      const element = this.state.element;
-      const { once, ...viewOptions } = ((_a = this.state.getOptions()) == null ? void 0 : _a.inViewOptions) || {};
-      return inView(element, (enterEntry) => {
-        var _a2;
-        this.state.setActive("inView", true);
-        (_a2 = this.state.visualElement.variantChildren) == null ? void 0 : _a2.forEach((child) => {
-          child.state.setActive("inView", true);
-        });
-        dispatchPointerEvent(element, "viewenter", enterEntry);
-        if (!once) {
-          return (leaveEntry) => {
-            this.state.setActive("inView", false);
-            dispatchPointerEvent(element, "viewleave", leaveEntry);
-          };
-        }
-      }, viewOptions);
-    };
-  }
-  mount() {
-    this.updateGestureSubscriptions();
-  }
-  update() {
-    this.updateGestureSubscriptions();
   }
-}
-function isSVGElement(element) {
-  return element instanceof SVGElement && element.tagName !== "svg";
-}
-class SVGFeature extends Feature {
   mount() {
-    const instance = this.state.element;
-    if (!isSVGElement(instance)) {
+    const element = this.state.element;
+    if (!element)
       return;
-    }
-    const visualElement = this.state.visualElement;
-    frame.read(() => {
-      try {
-        visualElement.renderState.dimensions = typeof instance.getBBox === "function" ? instance.getBBox() : instance.getBoundingClientRect();
-      } catch (e) {
-        visualElement.renderState.dimensions = {
-          x: 0,
-          y: 0,
-          width: 0,
-          height: 0
+    this.unmount = inView(
+      element,
+      (entry) => {
+        handleHoverEvent(this.state, entry, "Enter");
+        return (endEvent) => {
+          handleHoverEvent(this.state, entry, "Leave");
         };
       }
-    });
-  }
-  unmount() {
+    );
+  }
+}
+function isPrimaryPointer(event) {
+  if (event.pointerType === "mouse") {
+    return typeof event.button !== "number" || event.button <= 0;
+  } else {
+    return event.isPrimary !== false;
+  }
+}
+function addPointerEvent(target, eventName, handler, options) {
+  return addDomEvent$1(target, eventName, addPointerInfo(handler), options);
+}
+function extractEventInfo(event, pointType = "page") {
+  return {
+    point: {
+      x: event[`${pointType}X`],
+      y: event[`${pointType}Y`]
+    }
+  };
+}
+function addPointerInfo(handler) {
+  return (event) => isPrimaryPointer(event) && handler(event, extractEventInfo(event));
+}
+function addDomEvent$1(target, eventName, handler, options = { passive: true }) {
+  target.addEventListener(eventName, handler, options);
+  return () => target.removeEventListener(eventName, handler);
+}
+function createLock(name) {
+  let lock = null;
+  return () => {
+    const openLock = () => {
+      lock = null;
+    };
+    if (lock === null) {
+      lock = name;
+      return openLock;
+    }
+    return false;
+  };
+}
+const globalHorizontalLock = createLock("dragHorizontal");
+const globalVerticalLock = createLock("dragVertical");
+function getGlobalLock(drag) {
+  let lock = false;
+  if (drag === "y") {
+    lock = globalVerticalLock();
+  } else if (drag === "x") {
+    lock = globalHorizontalLock();
+  } else {
+    const openHorizontal = globalHorizontalLock();
+    const openVertical = globalVerticalLock();
+    if (openHorizontal && openVertical) {
+      lock = () => {
+        openHorizontal();
+        openVertical();
+      };
+    } else {
+      if (openHorizontal)
+        openHorizontal();
+      if (openVertical)
+        openVertical();
+    }
+  }
+  return lock;
+}
+function calcLength$1(axis) {
+  return axis.max - axis.min;
+}
+function clamp(min, max, v) {
+  if (v > max)
+    return max;
+  if (v < min)
+    return min;
+  return v;
+}
+function mixNumber(from, to, progress2) {
+  return from + (to - from) * progress2;
+}
+function progress(from, to, value) {
+  const toFromDifference = to - from;
+  return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
+}
+function applyConstraints(point2, { min, max }, elastic) {
+  if (min !== void 0 && point2 < min) {
+    point2 = elastic ? mixNumber(min, point2, elastic.min) : Math.max(point2, min);
+  } else if (max !== void 0 && point2 > max) {
+    point2 = elastic ? mixNumber(max, point2, elastic.max) : Math.min(point2, max);
+  }
+  return point2;
+}
+const defaultElastic = 0.35;
+function calcRelativeConstraints(layoutBox, { top, left, bottom, right }) {
+  return {
+    x: calcRelativeAxisConstraints(layoutBox.x, left, right),
+    y: calcRelativeAxisConstraints(layoutBox.y, top, bottom)
+  };
+}
+function calcRelativeAxisConstraints(axis, min, max) {
+  return {
+    min: min !== void 0 ? axis.min + min : void 0,
+    max: max !== void 0 ? axis.max + max - (axis.max - axis.min) : void 0
+  };
+}
+function resolveDragElastic(dragElastic = defaultElastic) {
+  if (dragElastic === false) {
+    dragElastic = 0;
+  } else if (dragElastic === true) {
+    dragElastic = defaultElastic;
+  }
+  return {
+    x: resolveAxisElastic(dragElastic, "left", "right"),
+    y: resolveAxisElastic(dragElastic, "top", "bottom")
+  };
+}
+function resolveAxisElastic(dragElastic, minLabel, maxLabel) {
+  return {
+    min: resolvePointElastic(dragElastic, minLabel),
+    max: resolvePointElastic(dragElastic, maxLabel)
+  };
+}
+function resolvePointElastic(dragElastic, label) {
+  return typeof dragElastic === "number" ? dragElastic : dragElastic[label] || 0;
+}
+function rebaseAxisConstraints(layout, constraints) {
+  const relativeConstraints = {};
+  if (constraints.min !== void 0) {
+    relativeConstraints.min = constraints.min - layout.min;
+  }
+  if (constraints.max !== void 0) {
+    relativeConstraints.max = constraints.max - layout.min;
+  }
+  return relativeConstraints;
+}
+function calcViewportConstraints(layoutBox, constraintsBox) {
+  return {
+    x: calcViewportAxisConstraints(layoutBox.x, constraintsBox.x),
+    y: calcViewportAxisConstraints(layoutBox.y, constraintsBox.y)
+  };
+}
+function calcViewportAxisConstraints(layoutAxis, constraintsAxis) {
+  let min = constraintsAxis.min - layoutAxis.min;
+  let max = constraintsAxis.max - layoutAxis.max;
+  if (constraintsAxis.max - constraintsAxis.min < layoutAxis.max - layoutAxis.min) {
+    [min, max] = [max, min];
+  }
+  return { min, max };
+}
+function calcOrigin(source, target) {
+  let origin = 0.5;
+  const sourceLength = calcLength$1(source);
+  const targetLength = calcLength$1(target);
+  if (targetLength > sourceLength) {
+    origin = progress(target.min, target.max - sourceLength, source.min);
+  } else if (sourceLength > targetLength) {
+    origin = progress(source.min, source.max - targetLength, target.min);
+  }
+  return clamp(0, 1, origin);
+}
+function isHTMLElement(value) {
+  return typeof value === "object" && value !== null && "nodeType" in value;
+}
+class PanSession {
+  constructor(event, handlers, { transformPagePoint, contextWindow, dragSnapToOrigin = false } = {}) {
+    this.startEvent = null;
+    this.lastMoveEvent = null;
+    this.lastMoveEventInfo = null;
+    this.handlers = {};
+    this.contextWindow = window;
+    this.updatePoint = () => {
+      if (!(this.lastMoveEvent && this.lastMoveEventInfo))
+        return;
+      const info2 = getPanInfo(this.lastMoveEventInfo, this.history);
+      const isPanStarted = this.startEvent !== null;
+      const isDistancePastThreshold = distance2D(info2.offset, { x: 0, y: 0 }) >= 3;
+      if (!isPanStarted && !isDistancePastThreshold)
+        return;
+      const { point: point3 } = info2;
+      const { timestamp: timestamp2 } = frameData;
+      this.history.push({ ...point3, timestamp: timestamp2 });
+      const { onStart, onMove } = this.handlers;
+      if (!isPanStarted) {
+        onStart && onStart(this.lastMoveEvent, info2);
+        this.startEvent = this.lastMoveEvent;
+      }
+      onMove && onMove(this.lastMoveEvent, info2);
+    };
+    this.handlePointerMove = (event2, info2) => {
+      this.lastMoveEvent = event2;
+      this.lastMoveEventInfo = transformPoint(info2, this.transformPagePoint);
+      frame.update(this.updatePoint, true);
+    };
+    this.handlePointerUp = (event2, info2) => {
+      this.end();
+      const { onEnd, onSessionEnd, resumeAnimation } = this.handlers;
+      if (this.dragSnapToOrigin)
+        resumeAnimation && resumeAnimation();
+      if (!(this.lastMoveEvent && this.lastMoveEventInfo))
+        return;
+      const panInfo = getPanInfo(
+        event2.type === "pointercancel" ? this.lastMoveEventInfo : transformPoint(info2, this.transformPagePoint),
+        this.history
+      );
+      if (this.startEvent && onEnd) {
+        onEnd(event2, panInfo);
+      }
+      onSessionEnd && onSessionEnd(event2, panInfo);
+    };
+    if (!isPrimaryPointer(event))
+      return;
+    this.dragSnapToOrigin = dragSnapToOrigin;
+    this.handlers = handlers;
+    this.transformPagePoint = transformPagePoint;
+    this.contextWindow = contextWindow || window;
+    const info = extractEventInfo(event);
+    const initialInfo = transformPoint(info, this.transformPagePoint);
+    const { point: point2 } = initialInfo;
+    const { timestamp } = frameData;
+    this.history = [{ ...point2, timestamp }];
+    const { onSessionStart } = handlers;
+    onSessionStart && onSessionStart(event, getPanInfo(initialInfo, this.history));
+    this.removeListeners = pipe(
+      addPointerEvent(
+        this.contextWindow,
+        "pointermove",
+        this.handlePointerMove
+      ),
+      addPointerEvent(
+        this.contextWindow,
+        "pointerup",
+        this.handlePointerUp
+      ),
+      addPointerEvent(
+        this.contextWindow,
+        "pointercancel",
+        this.handlePointerUp
+      )
+    );
+  }
+  updateHandlers(handlers) {
+    this.handlers = handlers;
+  }
+  end() {
+    this.removeListeners && this.removeListeners();
+    cancelFrame(this.updatePoint);
+  }
+}
+function transformPoint(info, transformPagePoint) {
+  return transformPagePoint ? { point: transformPagePoint(info.point) } : info;
+}
+function subtractPoint(a, b) {
+  return { x: a.x - b.x, y: a.y - b.y };
+}
+function getPanInfo({ point: point2 }, history) {
+  return {
+    point: point2,
+    delta: subtractPoint(point2, lastDevicePoint(history)),
+    offset: subtractPoint(point2, startDevicePoint(history)),
+    velocity: getVelocity(history, 0.1)
+  };
+}
+function startDevicePoint(history) {
+  return history[0];
+}
+function lastDevicePoint(history) {
+  return history[history.length - 1];
+}
+function getVelocity(history, timeDelta) {
+  if (history.length < 2) {
+    return { x: 0, y: 0 };
+  }
+  let i = history.length - 1;
+  let timestampedPoint = null;
+  const lastPoint = lastDevicePoint(history);
+  while (i >= 0) {
+    timestampedPoint = history[i];
+    if (lastPoint.timestamp - timestampedPoint.timestamp > secondsToMilliseconds(timeDelta)) {
+      break;
+    }
+    i--;
+  }
+  if (!timestampedPoint) {
+    return { x: 0, y: 0 };
+  }
+  const time2 = millisecondsToSeconds(
+    lastPoint.timestamp - timestampedPoint.timestamp
+  );
+  if (time2 === 0) {
+    return { x: 0, y: 0 };
+  }
+  const currentVelocity = {
+    x: (lastPoint.x - timestampedPoint.x) / time2,
+    y: (lastPoint.y - timestampedPoint.y) / time2
+  };
+  if (currentVelocity.x === Infinity) {
+    currentVelocity.x = 0;
+  }
+  if (currentVelocity.y === Infinity) {
+    currentVelocity.y = 0;
+  }
+  return currentVelocity;
+}
+const createAxis = () => ({ min: 0, max: 0 });
+function createBox() {
+  return {
+    x: createAxis(),
+    y: createAxis()
+  };
+}
+function eachAxis$1(callback) {
+  return [callback("x"), callback("y")];
+}
+function createUnitType(unit) {
+  return {
+    test: (v) => typeof v === "string" && v.endsWith(unit) && v.split(" ").length === 1,
+    parse: parseFloat,
+    transform: (v) => `${v}${unit}`
+  };
+}
+const percent = /* @__PURE__ */ createUnitType("%");
+function isWillChangeMotionValue(value) {
+  return Boolean(isMotionValue(value) && value.add);
+}
+function addValueToWillChange(visualElement, key) {
+  const willChange = visualElement.getValue("willChange");
+  if (isWillChangeMotionValue(willChange)) {
+    return willChange.add(key);
+  }
+}
+function convertBoundingBoxToBox({
+  top,
+  left,
+  right,
+  bottom
+}) {
+  return {
+    x: { min: left, max: right },
+    y: { min: top, max: bottom }
+  };
+}
+function transformBoxPoints(point2, transformPoint2) {
+  if (!transformPoint2)
+    return point2;
+  const topLeft = transformPoint2({ x: point2.left, y: point2.top });
+  const bottomRight = transformPoint2({ x: point2.right, y: point2.bottom });
+  return {
+    top: topLeft.y,
+    left: topLeft.x,
+    bottom: bottomRight.y,
+    right: bottomRight.x
+  };
+}
+function convertBoxToBoundingBox({ x, y }) {
+  return { top: y.min, right: x.max, bottom: y.max, left: x.min };
+}
+function translateAxis(axis, distance2) {
+  axis.min = axis.min + distance2;
+  axis.max = axis.max + distance2;
+}
+function measureViewportBox(instance, transformPoint2) {
+  return convertBoundingBoxToBox(
+    transformBoxPoints(instance.getBoundingClientRect(), transformPoint2)
+  );
+}
+function measurePageBox(element, rootProjectionNode2, transformPagePoint) {
+  const viewportBox = measureViewportBox(element, transformPagePoint);
+  const { scroll: scroll2 } = rootProjectionNode2;
+  if (scroll2) {
+    translateAxis(viewportBox.x, scroll2.offset.x);
+    translateAxis(viewportBox.y, scroll2.offset.y);
+  }
+  return viewportBox;
+}
+const doneCallbacks = /* @__PURE__ */ new WeakMap();
+vue.ref(/* @__PURE__ */ new WeakMap());
+function removeDoneCallback(element) {
+  const prevDoneCallback = doneCallbacks.get(element);
+  if (prevDoneCallback) {
+    element.removeEventListener("motioncomplete", prevDoneCallback);
+  }
+  doneCallbacks.delete(element);
+}
+const [injectAnimatePresence, provideAnimatePresence] = createContext("AnimatePresenceContext");
+function isPresent(visualElement) {
+  return !doneCallbacks.has(visualElement.current);
+}
+const elementDragControls = /* @__PURE__ */ new WeakMap();
+class VisualElementDragControls {
+  constructor(visualElement) {
+    this.openGlobalLock = null;
+    this.isDragging = false;
+    this.currentDirection = null;
+    this.originPoint = { x: 0, y: 0 };
+    this.constraints = false;
+    this.hasMutatedConstraints = false;
+    this.elastic = createBox();
+    this.visualElement = visualElement;
+  }
+  start(originEvent, { snapToCursor = false } = {}) {
+    if (!isPresent(this.visualElement))
+      return;
+    const onSessionStart = (event) => {
+      const { dragSnapToOrigin: dragSnapToOrigin2 } = this.getProps();
+      dragSnapToOrigin2 ? this.pauseAnimation() : this.stopAnimation();
+      if (snapToCursor) {
+        this.snapToCursor(extractEventInfo(event, "page").point);
+      }
+    };
+    const onStart = (event, info) => {
+      const { drag, dragPropagation, onDragStart } = this.getProps();
+      if (drag && !dragPropagation) {
+        if (this.openGlobalLock)
+          this.openGlobalLock();
+        this.openGlobalLock = getGlobalLock(drag);
+        if (!this.openGlobalLock)
+          return;
+      }
+      this.isDragging = true;
+      this.currentDirection = null;
+      this.resolveConstraints();
+      if (this.visualElement.projection) {
+        this.visualElement.projection.isAnimationBlocked = true;
+        this.visualElement.projection.target = void 0;
+      }
+      eachAxis$1((axis) => {
+        let current = this.getAxisMotionValue(axis).get() || 0;
+        if (percent.test(current)) {
+          const { projection } = this.visualElement;
+          if (projection && projection.layout) {
+            const measuredAxis = projection.layout.layoutBox[axis];
+            if (measuredAxis) {
+              const length = calcLength$1(measuredAxis);
+              current = length * (parseFloat(current) / 100);
+            }
+          }
+        }
+        this.originPoint[axis] = current;
+      });
+      if (onDragStart) {
+        frame.postRender(() => onDragStart(event, info));
+      }
+      addValueToWillChange(this.visualElement, "transform");
+      const state2 = this.visualElement.state;
+      state2.setActive("whileDrag", true);
+    };
+    const onMove = (event, info) => {
+      const {
+        dragPropagation,
+        dragDirectionLock,
+        onDirectionLock,
+        onDrag
+      } = this.getProps();
+      if (!dragPropagation && !this.openGlobalLock)
+        return;
+      const { offset } = info;
+      if (dragDirectionLock && this.currentDirection === null) {
+        this.currentDirection = getCurrentDirection(offset);
+        if (this.currentDirection !== null) {
+          onDirectionLock && onDirectionLock(this.currentDirection);
+        }
+        return;
+      }
+      this.updateAxis("x", info.point, offset);
+      this.updateAxis("y", info.point, offset);
+      this.visualElement.render();
+      onDrag && onDrag(event, info);
+    };
+    const onSessionEnd = (event, info) => this.stop(event, info);
+    const resumeAnimation = () => eachAxis$1(
+      (axis) => {
+        var _a;
+        return this.getAnimationState(axis) === "paused" && ((_a = this.getAxisMotionValue(axis).animation) == null ? void 0 : _a.play());
+      }
+    );
+    const { dragSnapToOrigin } = this.getProps();
+    this.panSession = new PanSession(
+      originEvent,
+      {
+        onSessionStart,
+        onStart,
+        onMove,
+        onSessionEnd,
+        resumeAnimation
+      },
+      {
+        transformPagePoint: this.visualElement.getTransformPagePoint(),
+        dragSnapToOrigin,
+        contextWindow: getContextWindow(this.visualElement)
+      }
+    );
+  }
+  stop(event, info) {
+    const isDragging = this.isDragging;
+    this.cancel();
+    if (!isDragging)
+      return;
+    const { velocity } = info;
+    this.startAnimation(velocity);
+    const { onDragEnd } = this.getProps();
+    if (onDragEnd) {
+      frame.postRender(() => onDragEnd(event, info));
+    }
+  }
+  cancel() {
+    this.isDragging = false;
+    const { projection, animationState } = this.visualElement;
+    if (projection) {
+      projection.isAnimationBlocked = false;
+    }
+    this.panSession && this.panSession.end();
+    this.panSession = void 0;
+    const { dragPropagation } = this.getProps();
+    if (!dragPropagation && this.openGlobalLock) {
+      this.openGlobalLock();
+      this.openGlobalLock = null;
+    }
+    const state2 = this.visualElement.state;
+    state2.setActive("whileDrag", false);
+  }
+  updateAxis(axis, _point, offset) {
+    const { drag } = this.getProps();
+    if (!offset || !shouldDrag(axis, drag, this.currentDirection))
+      return;
+    const axisValue = this.getAxisMotionValue(axis);
+    let next = this.originPoint[axis] + offset[axis];
+    if (this.constraints && this.constraints[axis]) {
+      next = applyConstraints(
+        next,
+        this.constraints[axis],
+        this.elastic[axis]
+      );
+    }
+    axisValue.set(next);
+  }
+  resolveConstraints() {
+    var _a;
+    const { dragConstraints, dragElastic } = this.getProps();
+    const layout = this.visualElement.projection && !this.visualElement.projection.layout ? this.visualElement.projection.measure(false) : (_a = this.visualElement.projection) == null ? void 0 : _a.layout;
+    const prevConstraints = this.constraints;
+    if (dragConstraints && isHTMLElement(dragConstraints)) {
+      if (!this.constraints) {
+        this.constraints = this.resolveRefConstraints();
+      }
+    } else {
+      if (dragConstraints && layout) {
+        this.constraints = calcRelativeConstraints(
+          layout.layoutBox,
+          dragConstraints
+        );
+      } else {
+        this.constraints = false;
+      }
+    }
+    this.elastic = resolveDragElastic(dragElastic);
+    if (prevConstraints !== this.constraints && layout && this.constraints && !this.hasMutatedConstraints) {
+      eachAxis$1((axis) => {
+        if (this.constraints !== false && this.getAxisMotionValue(axis)) {
+          this.constraints[axis] = rebaseAxisConstraints(
+            layout.layoutBox[axis],
+            this.constraints[axis]
+          );
+        }
+      });
+    }
+  }
+  resolveRefConstraints() {
+    const { dragConstraints: constraints, onMeasureDragConstraints } = this.getProps();
+    if (!constraints || !isHTMLElement(constraints))
+      return false;
+    const constraintsElement = constraints;
+    heyListen.invariant(
+      constraintsElement !== null,
+      "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop."
+    );
+    const { projection } = this.visualElement;
+    if (!projection || !projection.layout)
+      return false;
+    const constraintsBox = measurePageBox(
+      constraintsElement,
+      projection.root,
+      this.visualElement.getTransformPagePoint()
+    );
+    let measuredConstraints = calcViewportConstraints(
+      projection.layout.layoutBox,
+      constraintsBox
+    );
+    if (onMeasureDragConstraints) {
+      const userConstraints = onMeasureDragConstraints(
+        convertBoxToBoundingBox(measuredConstraints)
+      );
+      this.hasMutatedConstraints = !!userConstraints;
+      if (userConstraints) {
+        measuredConstraints = convertBoundingBoxToBox(userConstraints);
+      }
+    }
+    return measuredConstraints;
+  }
+  startAnimation(velocity) {
+    const {
+      drag,
+      dragMomentum,
+      dragElastic,
+      dragTransition,
+      dragSnapToOrigin,
+      onDragTransitionEnd
+    } = this.getProps();
+    const constraints = this.constraints || {};
+    const momentumAnimations = eachAxis$1((axis) => {
+      if (!shouldDrag(axis, drag, this.currentDirection)) {
+        return;
+      }
+      let transition = constraints && constraints[axis] || {};
+      if (dragSnapToOrigin)
+        transition = { min: 0, max: 0 };
+      const bounceStiffness = dragElastic ? 200 : 1e6;
+      const bounceDamping = dragElastic ? 40 : 1e7;
+      const inertia2 = {
+        type: "inertia",
+        velocity: dragMomentum ? velocity[axis] : 0,
+        bounceStiffness,
+        bounceDamping,
+        timeConstant: 750,
+        restDelta: 1,
+        restSpeed: 10,
+        ...dragTransition,
+        ...transition
+      };
+      return this.startAxisValueAnimation(axis, inertia2);
+    });
+    return Promise.all(momentumAnimations).then(onDragTransitionEnd);
+  }
+  startAxisValueAnimation(axis, transition) {
+    const axisValue = this.getAxisMotionValue(axis);
+    addValueToWillChange(this.visualElement, axis);
+    return axisValue.start(
+      animateMotionValue(
+        axis,
+        axisValue,
+        0,
+        transition,
+        this.visualElement,
+        false
+      )
+    );
+  }
+  stopAnimation() {
+    if (!isPresent(this.visualElement))
+      return;
+    eachAxis$1((axis) => this.getAxisMotionValue(axis).stop());
+  }
+  pauseAnimation() {
+    eachAxis$1((axis) => {
+      var _a;
+      return (_a = this.getAxisMotionValue(axis).animation) == null ? void 0 : _a.pause();
+    });
+  }
+  getAnimationState(axis) {
+    var _a;
+    return (_a = this.getAxisMotionValue(axis).animation) == null ? void 0 : _a.state;
+  }
+  /**
+   * Drag works differently depending on which props are provided.
+   *
+   * - If _dragX and _dragY are provided, we output the gesture delta directly to those motion values.
+   * - Otherwise, we apply the delta to the x/y motion values.
+   */
+  getAxisMotionValue(axis) {
+    const dragKey = `_drag${axis.toUpperCase()}`;
+    const props = this.visualElement.getProps();
+    const externalMotionValue = props[dragKey];
+    return externalMotionValue || this.visualElement.getValue(
+      axis,
+      (props.initial ? props.initial[axis] : void 0) || 0
+    );
+  }
+  snapToCursor(point2) {
+    eachAxis$1((axis) => {
+      const { drag } = this.getProps();
+      if (!shouldDrag(axis, drag, this.currentDirection))
+        return;
+      const { projection } = this.visualElement;
+      const axisValue = this.getAxisMotionValue(axis);
+      if (projection && projection.layout) {
+        const { min, max } = projection.layout.layoutBox[axis];
+        axisValue.set(point2[axis] - mixNumber(min, max, 0.5));
+      }
+    });
+  }
+  /**
+   * When the viewport resizes we want to check if the measured constraints
+   * have changed and, if so, reposition the element within those new constraints
+   * relative to where it was before the resize.
+   */
+  scalePositionWithinConstraints() {
+    if (!this.visualElement.current)
+      return;
+    const { drag, dragConstraints } = this.getProps();
+    const { projection } = this.visualElement;
+    if (!isHTMLElement(dragConstraints) || !projection || !this.constraints)
+      return;
+    this.stopAnimation();
+    const boxProgress = { x: 0, y: 0 };
+    eachAxis$1((axis) => {
+      const axisValue = this.getAxisMotionValue(axis);
+      if (axisValue && this.constraints !== false) {
+        const latest = axisValue.get();
+        boxProgress[axis] = calcOrigin(
+          { min: latest, max: latest },
+          this.constraints[axis]
+        );
+      }
+    });
+    const { transformTemplate } = this.visualElement.getProps();
+    this.visualElement.current.style.transform = transformTemplate ? transformTemplate({}, "") : "none";
+    projection.root && projection.root.updateScroll();
+    projection.updateLayout();
+    this.resolveConstraints();
+    eachAxis$1((axis) => {
+      if (!shouldDrag(axis, drag, null))
+        return;
+      const axisValue = this.getAxisMotionValue(axis);
+      const { min, max } = this.constraints[axis];
+      axisValue.set(mixNumber(min, max, boxProgress[axis]));
+    });
+  }
+  addListeners() {
+    if (!this.visualElement.current)
+      return;
+    elementDragControls.set(this.visualElement, this);
+    const element = this.visualElement.current;
+    const stopPointerListener = addPointerEvent(
+      element,
+      "pointerdown",
+      (event) => {
+        const { drag, dragListener = true } = this.getProps();
+        drag && dragListener && this.start(event);
+      }
+    );
+    const measureDragConstraints = () => {
+      const { dragConstraints } = this.getProps();
+      if (isHTMLElement(dragConstraints)) {
+        this.constraints = this.resolveRefConstraints();
+      }
+    };
+    const { projection } = this.visualElement;
+    const stopMeasureLayoutListener = projection.addEventListener(
+      "measure",
+      measureDragConstraints
+    );
+    if (projection && !projection.layout) {
+      projection.root && projection.root.updateScroll();
+      projection.updateLayout();
+    }
+    frame.read(measureDragConstraints);
+    const stopResizeListener = addDomEvent$1(window, "resize", () => this.scalePositionWithinConstraints());
+    const stopLayoutUpdateListener = projection.addEventListener(
+      "didUpdate",
+      ({ delta, hasLayoutChanged }) => {
+        if (this.isDragging && hasLayoutChanged) {
+          eachAxis$1((axis) => {
+            const motionValue2 = this.getAxisMotionValue(axis);
+            if (!motionValue2)
+              return;
+            this.originPoint[axis] += delta[axis].translate;
+            motionValue2.set(
+              motionValue2.get() + delta[axis].translate
+            );
+          });
+          this.visualElement.render();
+        }
+      }
+    );
+    return () => {
+      stopResizeListener();
+      stopPointerListener();
+      stopMeasureLayoutListener();
+      stopLayoutUpdateListener && stopLayoutUpdateListener();
+    };
+  }
+  getProps() {
+    const props = this.visualElement.getProps();
+    const {
+      drag = false,
+      dragDirectionLock = false,
+      dragPropagation = false,
+      dragConstraints = false,
+      dragElastic = defaultElastic,
+      dragMomentum = true
+    } = props;
+    return {
+      ...props,
+      drag,
+      dragDirectionLock,
+      dragPropagation,
+      dragConstraints,
+      dragElastic,
+      dragMomentum
+    };
+  }
+}
+function shouldDrag(direction, drag, currentDirection) {
+  return (drag === true || drag === direction) && (currentDirection === null || currentDirection === direction);
+}
+function getCurrentDirection(offset, lockThreshold = 10) {
+  let direction = null;
+  if (Math.abs(offset.y) > lockThreshold) {
+    direction = "y";
+  } else if (Math.abs(offset.x) > lockThreshold) {
+    direction = "x";
+  }
+  return direction;
+}
+class DragGesture extends Feature {
+  constructor(state2) {
+    super(state2);
+    this.removeGroupControls = noop;
+    this.removeListeners = noop;
+    this.controls = new VisualElementDragControls(state2.visualElement);
+  }
+  mount() {
+    const { dragControls } = this.state.options;
+    if (dragControls) {
+      this.removeGroupControls = dragControls.subscribe(this.controls);
+    }
+    this.removeListeners = this.controls.addListeners() || noop;
+  }
+  unmount() {
+    this.removeGroupControls();
+    this.removeListeners();
+  }
+}
+function isSVGElement(element) {
+  return element instanceof SVGElement && element.tagName !== "svg";
+}
+class SVGFeature extends Feature {
+  mount() {
+    const instance = this.state.element;
+    if (!isSVGElement(instance)) {
+      return;
+    }
+    const visualElement = this.state.visualElement;
+    frame.read(() => {
+      try {
+        visualElement.renderState.dimensions = typeof instance.getBBox === "function" ? instance.getBBox() : instance.getBoundingClientRect();
+      } catch (e) {
+        visualElement.renderState.dimensions = {
+          x: 0,
+          y: 0,
+          width: 0,
+          height: 0
+        };
+      }
+    });
+  }
+  unmount() {
+  }
+}
+function pixelsToPercent(pixels, axis) {
+  if (axis.max === axis.min)
+    return 0;
+  return pixels / (axis.max - axis.min) * 100;
+}
+const correctBorderRadius = {
+  correct: (latest, node) => {
+    if (!node.target)
+      return latest;
+    if (typeof latest === "string") {
+      if (px.test(latest)) {
+        latest = parseFloat(latest);
+      } else {
+        return latest;
+      }
+    }
+    const x = pixelsToPercent(latest, node.target.x);
+    const y = pixelsToPercent(latest, node.target.y);
+    return `${x}% ${y}%`;
+  }
+};
+const correctBoxShadow = {
+  correct: (latest, { treeScale, projectionDelta }) => {
+    const original = latest;
+    const shadow = complex.parse(latest);
+    if (shadow.length > 5)
+      return original;
+    const template = complex.createTransformer(latest);
+    const offset = typeof shadow[0] !== "number" ? 1 : 0;
+    const xScale = projectionDelta.x.scale * treeScale.x;
+    const yScale = projectionDelta.y.scale * treeScale.y;
+    shadow[0 + offset] /= xScale;
+    shadow[1 + offset] /= yScale;
+    const averageScale = mixNumber$2(xScale, yScale, 0.5);
+    if (typeof shadow[2 + offset] === "number")
+      shadow[2 + offset] /= averageScale;
+    if (typeof shadow[3 + offset] === "number")
+      shadow[3 + offset] /= averageScale;
+    return template(shadow);
+  }
+};
+const defaultScaleCorrector = {
+  borderRadius: {
+    ...correctBorderRadius,
+    applyTo: [
+      "borderTopLeftRadius",
+      "borderTopRightRadius",
+      "borderBottomLeftRadius",
+      "borderBottomRightRadius"
+    ]
+  },
+  borderTopLeftRadius: correctBorderRadius,
+  borderTopRightRadius: correctBorderRadius,
+  borderBottomLeftRadius: correctBorderRadius,
+  borderBottomRightRadius: correctBorderRadius,
+  boxShadow: correctBoxShadow
+};
+const globalProjectionState = {
+  /**
+   * Global flag as to whether the tree has animated since the last time
+   * we resized the window
+   */
+  hasAnimatedSinceResize: true,
+  /**
+   * We set this to true once, on the first update. Any nodes added to the tree beyond that
+   * update will be given a `data-projection-id` attribute.
+   */
+  hasEverUpdated: false
+};
+class LayoutFeature extends Feature {
+  constructor(state2) {
+    super(state2);
+    addScaleCorrector(defaultScaleCorrector);
+  }
+  beforeUpdate() {
+    var _a;
+    (_a = this.state.visualElement.projection) == null ? void 0 : _a.willUpdate();
+  }
+  update() {
+    var _a, _b;
+    (_a = this.state.visualElement.projection) == null ? void 0 : _a.setOptions(this.state.options);
+    (_b = this.state.visualElement.projection) == null ? void 0 : _b.root.didUpdate();
+  }
+  beforeMount() {
+  }
+  mount() {
+    var _a;
+    const options = this.state.options;
+    const layoutGroup = this.state.options.layoutGroup;
+    if (options.layout || options.layoutId) {
+      const projection = this.state.visualElement.projection;
+      if (projection) {
+        (_a = layoutGroup == null ? void 0 : layoutGroup.group) == null ? void 0 : _a.add(projection);
+      }
+      globalProjectionState.hasEverUpdated = true;
+      projection == null ? void 0 : projection.root.didUpdate();
+    }
+  }
+  beforeUnmount() {
+    if (this.state.visualElement.projection) {
+      this.state.visualElement.projection.willUpdate();
+    }
+  }
+  unmount() {
+    if (this.state.visualElement.projection) {
+      this.state.visualElement.projection.unmount();
+      const layoutGroup = this.state.options.layoutGroup;
+      if (layoutGroup == null ? void 0 : layoutGroup.group)
+        layoutGroup.group.remove(this.state.visualElement.projection);
+    }
+  }
+}
+function asyncHandler(handler) {
+  return (event, info) => {
+    if (handler) {
+      frame.postRender(() => handler(event, info));
+    }
+  };
+}
+class PanGesture extends Feature {
+  constructor() {
+    super(...arguments);
+    this.removePointerDownListener = noop;
+  }
+  onPointerDown(pointerDownEvent) {
+    this.session = new PanSession(
+      pointerDownEvent,
+      this.createPanHandlers(),
+      {
+        transformPagePoint: this.state.visualElement.getTransformPagePoint(),
+        contextWindow: getContextWindow(this.state.visualElement)
+      }
+    );
+  }
+  createPanHandlers() {
+    return {
+      onSessionStart: asyncHandler((_, info) => {
+        const { onPanSessionStart } = this.state.options;
+        onPanSessionStart && onPanSessionStart(_, info);
+      }),
+      onStart: asyncHandler((_, info) => {
+        const { onPanStart } = this.state.options;
+        onPanStart && onPanStart(_, info);
+      }),
+      onMove: (event, info) => {
+        const { onPan } = this.state.options;
+        onPan && onPan(event, info);
+      },
+      onEnd: (event, info) => {
+        const { onPanEnd } = this.state.options;
+        delete this.session;
+        if (onPanEnd) {
+          frame.postRender(() => onPanEnd(event, info));
+        }
+      }
+    };
+  }
+  mount() {
+    this.removePointerDownListener = addPointerEvent(
+      this.state.element,
+      "pointerdown",
+      this.onPointerDown.bind(this)
+    );
+  }
+  update() {
+  }
+  unmount() {
+    this.removePointerDownListener();
+    this.session && this.session.end();
   }
 }
 const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
@@ -5311,15 +6310,15 @@ const asNumber = (value) => typeof value === "string" ? parseFloat(value) : valu
 const isPx = (value) => typeof value === "number" || px.test(value);
 function mixValues(target, follow, lead, progress2, shouldCrossfadeOpacity, isOnlyMember) {
   if (shouldCrossfadeOpacity) {
-    target.opacity = mixNumber$1(
+    target.opacity = mixNumber$2(
       0,
       // TODO Reinstate this if only child
       lead.opacity !== void 0 ? lead.opacity : 1,
       easeCrossfadeIn(progress2)
     );
-    target.opacityExit = mixNumber$1(follow.opacity !== void 0 ? follow.opacity : 1, 0, easeCrossfadeOut(progress2));
+    target.opacityExit = mixNumber$2(follow.opacity !== void 0 ? follow.opacity : 1, 0, easeCrossfadeOut(progress2));
   } else if (isOnlyMember) {
-    target.opacity = mixNumber$1(follow.opacity !== void 0 ? follow.opacity : 1, lead.opacity !== void 0 ? lead.opacity : 1, progress2);
+    target.opacity = mixNumber$2(follow.opacity !== void 0 ? follow.opacity : 1, lead.opacity !== void 0 ? lead.opacity : 1, progress2);
   }
   for (let i = 0; i < numBorders; i++) {
     const borderLabel = `border${borders[i]}Radius`;
@@ -5331,8 +6330,8 @@ function mixValues(target, follow, lead, progress2, shouldCrossfadeOpacity, isOn
     leadRadius || (leadRadius = 0);
     const canMix = followRadius === 0 || leadRadius === 0 || isPx(followRadius) === isPx(leadRadius);
     if (canMix) {
-      target[borderLabel] = Math.max(mixNumber$1(asNumber(followRadius), asNumber(leadRadius), progress2), 0);
-      if (percent.test(leadRadius) || percent.test(followRadius)) {
+      target[borderLabel] = Math.max(mixNumber$2(asNumber(followRadius), asNumber(leadRadius), progress2), 0);
+      if (percent$1.test(leadRadius) || percent$1.test(followRadius)) {
         target[borderLabel] += "%";
       }
     } else {
@@ -5340,21 +6339,21 @@ function mixValues(target, follow, lead, progress2, shouldCrossfadeOpacity, isOn
     }
   }
   if (follow.rotate || lead.rotate) {
-    target.rotate = mixNumber$1(follow.rotate || 0, lead.rotate || 0, progress2);
+    target.rotate = mixNumber$2(follow.rotate || 0, lead.rotate || 0, progress2);
   }
 }
 function getRadius(values, radiusName) {
   return values[radiusName] !== void 0 ? values[radiusName] : values.borderRadius;
 }
 const easeCrossfadeIn = /* @__PURE__ */ compress(0, 0.5, circOut);
-const easeCrossfadeOut = /* @__PURE__ */ compress(0.5, 0.95, noop$1);
+const easeCrossfadeOut = /* @__PURE__ */ compress(0.5, 0.95, noop);
 function compress(min, max, easing) {
   return (p) => {
     if (p < min)
       return 0;
     if (p > max)
       return 1;
-    return easing(progress(min, max, p));
+    return easing(progress$1(min, max, p));
   };
 }
 function copyAxisInto(axis, originAxis) {
@@ -5385,9 +6384,9 @@ function isNear(value, target, maxDistance) {
 }
 function calcAxisDelta(delta, source, target, origin = 0.5) {
   delta.origin = origin;
-  delta.originPoint = mixNumber$1(source.min, source.max, delta.origin);
+  delta.originPoint = mixNumber$2(source.min, source.max, delta.origin);
   delta.scale = calcLength(target) / calcLength(source);
-  delta.translate = mixNumber$1(target.min, target.max, delta.origin) - delta.originPoint;
+  delta.translate = mixNumber$2(target.min, target.max, delta.origin) - delta.originPoint;
   if (delta.scale >= SCALE_MIN && delta.scale <= SCALE_MAX || isNaN(delta.scale)) {
     delta.scale = 1;
   }
@@ -5424,14 +6423,14 @@ function removePointDelta(point2, translate, scale2, originPoint, boxScale) {
   return point2;
 }
 function removeAxisDelta(axis, translate = 0, scale2 = 1, origin = 0.5, boxScale, originAxis = axis, sourceAxis = axis) {
-  if (percent.test(translate)) {
+  if (percent$1.test(translate)) {
     translate = parseFloat(translate);
-    const relativeProgress = mixNumber$1(sourceAxis.min, sourceAxis.max, translate / 100);
+    const relativeProgress = mixNumber$2(sourceAxis.min, sourceAxis.max, translate / 100);
     translate = relativeProgress - sourceAxis.min;
   }
   if (typeof translate !== "number")
     return;
-  let originPoint = mixNumber$1(originAxis.min, originAxis.max, origin);
+  let originPoint = mixNumber$2(originAxis.min, originAxis.max, origin);
   if (axis === originAxis)
     originPoint -= translate;
   axis.min = removePointDelta(axis.min, translate, scale2, originPoint, boxScale);
@@ -5620,18 +6619,6 @@ function resolveMotionValue(value) {
   const unwrappedValue = isMotionValue$1(value) ? value.get() : value;
   return isCustomValue(unwrappedValue) ? unwrappedValue.toValue() : unwrappedValue;
 }
-const globalProjectionState = {
-  /**
-   * Global flag as to whether the tree has animated since the last time
-   * we resized the window
-   */
-  hasAnimatedSinceResize: true,
-  /**
-   * We set this to true once, on the first update. Any nodes added to the tree beyond that
-   * update will be given a `data-projection-id` attribute.
-   */
-  hasEverUpdated: false
-};
 const { schedule: microtask, cancel: cancelMicrotask } = createRenderBatcher(queueMicrotask, false);
 const metrics = {
   type: "projectionFrame",
@@ -5898,7 +6885,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       this.nodes.forEach(notifyLayoutUpdate);
       this.clearAllSnapshots();
       const now2 = time.now();
-      frameData.delta = clamp(0, 1e3 / 60, now2 - frameData.timestamp);
+      frameData.delta = clamp$1(0, 1e3 / 60, now2 - frameData.timestamp);
       frameData.timestamp = now2;
       frameData.isProcessing = true;
       frameSteps.update.process(frameData);
@@ -5954,7 +6941,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       }
       const prevLayout = this.layout;
       this.layout = this.measure(false);
-      this.layoutCorrected = createBox();
+      this.layoutCorrected = createBox$1();
       this.isLayoutDirty = false;
       this.projectionDelta = void 0;
       this.notifyListeners("measure", this.layout.layoutBox);
@@ -6010,21 +6997,21 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       var _a;
       const { visualElement } = this.options;
       if (!visualElement)
-        return createBox();
+        return createBox$1();
       const box = visualElement.measureViewportBox();
       const wasInScrollRoot = ((_a = this.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot) || this.path.some(checkNodeWasScrollRoot);
       if (!wasInScrollRoot) {
         const { scroll: scroll2 } = this.root;
         if (scroll2) {
-          translateAxis(box.x, scroll2.offset.x);
-          translateAxis(box.y, scroll2.offset.y);
+          translateAxis$1(box.x, scroll2.offset.x);
+          translateAxis$1(box.y, scroll2.offset.y);
         }
       }
       return box;
     }
     removeElementScroll(box) {
       var _a;
-      const boxWithoutScroll = createBox();
+      const boxWithoutScroll = createBox$1();
       copyBoxInto(boxWithoutScroll, box);
       if ((_a = this.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot) {
         return boxWithoutScroll;
@@ -6036,14 +7023,14 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
           if (scroll2.wasRoot) {
             copyBoxInto(boxWithoutScroll, box);
           }
-          translateAxis(boxWithoutScroll.x, scroll2.offset.x);
-          translateAxis(boxWithoutScroll.y, scroll2.offset.y);
+          translateAxis$1(boxWithoutScroll.x, scroll2.offset.x);
+          translateAxis$1(boxWithoutScroll.y, scroll2.offset.y);
         }
       }
       return boxWithoutScroll;
     }
     applyTransform(box, transformOnly = false) {
-      const withTransforms = createBox();
+      const withTransforms = createBox$1();
       copyBoxInto(withTransforms, box);
       for (let i = 0; i < this.path.length; i++) {
         const node = this.path[i];
@@ -6063,7 +7050,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       return withTransforms;
     }
     removeTransform(box) {
-      const boxWithoutTransform = createBox();
+      const boxWithoutTransform = createBox$1();
       copyBoxInto(boxWithoutTransform, box);
       for (let i = 0; i < this.path.length; i++) {
         const node = this.path[i];
@@ -6072,7 +7059,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         if (!hasTransform(node.latestValues))
           continue;
         hasScale(node.latestValues) && node.updateSnapshot();
-        const sourceBox = createBox();
+        const sourceBox = createBox$1();
         const nodeBox = node.measurePageBox();
         copyBoxInto(sourceBox, nodeBox);
         removeBoxTransforms(boxWithoutTransform, node.latestValues, node.snapshot ? node.snapshot.layoutBox : void 0, sourceBox);
@@ -6129,8 +7116,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         if (relativeParent && relativeParent.layout && this.animationProgress !== 1) {
           this.relativeParent = relativeParent;
           this.forceRelativeParentToResolveTarget();
-          this.relativeTarget = createBox();
-          this.relativeTargetOrigin = createBox();
+          this.relativeTarget = createBox$1();
+          this.relativeTargetOrigin = createBox$1();
           calcRelativePosition(this.relativeTargetOrigin, this.layout.layoutBox, relativeParent.layout.layoutBox);
           copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
         } else {
@@ -6140,8 +7127,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       if (!this.relativeTarget && !this.targetDelta)
         return;
       if (!this.target) {
-        this.target = createBox();
-        this.targetWithTransforms = createBox();
+        this.target = createBox$1();
+        this.targetWithTransforms = createBox$1();
       }
       if (this.relativeTarget && this.relativeTargetOrigin && this.relativeParent && this.relativeParent.target) {
         this.forceRelativeParentToResolveTarget();
@@ -6162,8 +7149,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         if (relativeParent && Boolean(relativeParent.resumingFrom) === Boolean(this.resumingFrom) && !relativeParent.options.layoutScroll && relativeParent.target && this.animationProgress !== 1) {
           this.relativeParent = relativeParent;
           this.forceRelativeParentToResolveTarget();
-          this.relativeTarget = createBox();
-          this.relativeTargetOrigin = createBox();
+          this.relativeTarget = createBox$1();
+          this.relativeTargetOrigin = createBox$1();
           calcRelativePosition(this.relativeTargetOrigin, this.target, relativeParent.target);
           copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
         } else {
@@ -6216,7 +7203,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       applyTreeDeltas(this.layoutCorrected, this.treeScale, this.path, isShared);
       if (lead.layout && !lead.target && (this.treeScale.x !== 1 || this.treeScale.y !== 1)) {
         lead.target = lead.layout.layoutBox;
-        lead.targetWithTransforms = createBox();
+        lead.targetWithTransforms = createBox$1();
       }
       const { target } = lead;
       if (!target) {
@@ -6273,7 +7260,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         this.relativeTarget = this.relativeTargetOrigin = void 0;
       }
       this.attemptToResolveRelativeTarget = !hasOnlyRelativeTargetChanged;
-      const relativeLayout = createBox();
+      const relativeLayout = createBox$1();
       const snapshotSource = snapshot ? snapshot.source : void 0;
       const layoutSource = this.layout ? this.layout.source : void 0;
       const isSharedLayoutAnimation = snapshotSource !== layoutSource;
@@ -6294,7 +7281,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             this.isProjectionDirty = false;
           }
           if (!prevRelativeTarget)
-            prevRelativeTarget = createBox();
+            prevRelativeTarget = createBox$1();
           copyBoxInto(prevRelativeTarget, this.relativeTarget);
         }
         if (isSharedLayoutAnimation) {
@@ -6359,7 +7346,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       if (!targetWithTransforms || !target || !layout)
         return;
       if (this !== lead && this.layout && layout && shouldAnimatePositionOnly(this.options.animationType, this.layout.layoutBox, layout.layoutBox)) {
-        target = this.target || createBox();
+        target = this.target || createBox$1();
         const xLength = calcLength(this.layout.layoutBox.x);
         target.x.min = lead.target.x.min;
         target.x.max = target.x.min + xLength;
@@ -6569,9 +7556,9 @@ function notifyLayoutUpdate(node) {
       if (relativeParent && !relativeParent.resumeFrom) {
         const { snapshot: parentSnapshot, layout: parentLayout } = relativeParent;
         if (parentSnapshot && parentLayout) {
-          const relativeSnapshot = createBox();
+          const relativeSnapshot = createBox$1();
           calcRelativePosition(relativeSnapshot, snapshot.layoutBox, parentSnapshot.layoutBox);
-          const relativeLayout = createBox();
+          const relativeLayout = createBox$1();
           calcRelativePosition(relativeLayout, layout, parentLayout.layoutBox);
           if (!boxEqualsRounded(relativeSnapshot, relativeLayout)) {
             hasRelativeTargetChanged = true;
@@ -6647,14 +7634,14 @@ function removeLeadSnapshots(stack) {
   stack.removeLeadSnapshot();
 }
 function mixAxisDelta(output, delta, p) {
-  output.translate = mixNumber$1(delta.translate, 0, p);
-  output.scale = mixNumber$1(delta.scale, 1, p);
+  output.translate = mixNumber$2(delta.translate, 0, p);
+  output.scale = mixNumber$2(delta.scale, 1, p);
   output.origin = delta.origin;
   output.originPoint = delta.originPoint;
 }
 function mixAxis(output, from, to, p) {
-  output.min = mixNumber$1(from.min, to.min, p);
-  output.max = mixNumber$1(from.max, to.max, p);
+  output.min = mixNumber$2(from.min, to.min, p);
+  output.max = mixNumber$2(from.max, to.max, p);
 }
 function mixBox(output, from, to, p) {
   mixAxis(output.x, from.x, to.x, p);
@@ -6668,7 +7655,7 @@ const defaultLayoutTransition = {
   ease: [0.4, 0, 0.1, 1]
 };
 const userAgentContains = (string) => typeof navigator !== "undefined" && navigator.userAgent && navigator.userAgent.toLowerCase().includes(string);
-const roundPoint = userAgentContains("applewebkit/") && !userAgentContains("chrome/") ? Math.round : noop$1;
+const roundPoint = userAgentContains("applewebkit/") && !userAgentContains("chrome/") ? Math.round : noop;
 function roundAxis(axis) {
   axis.min = roundPoint(axis.min);
   axis.max = roundPoint(axis.max);
@@ -6723,127 +7710,35 @@ function getClosestProjectingNode(visualElement) {
     return void 0;
   return visualElement.options.allowProjection !== false ? visualElement.projection : getClosestProjectingNode(visualElement.parent);
 }
-function pixelsToPercent(pixels, axis) {
-  if (axis.max === axis.min)
-    return 0;
-  return pixels / (axis.max - axis.min) * 100;
-}
-const correctBorderRadius = {
-  correct: (latest, node) => {
-    if (!node.target)
-      return latest;
-    if (typeof latest === "string") {
-      if (px.test(latest)) {
-        latest = parseFloat(latest);
-      } else {
-        return latest;
-      }
-    }
-    const x = pixelsToPercent(latest, node.target.x);
-    const y = pixelsToPercent(latest, node.target.y);
-    return `${x}% ${y}%`;
-  }
-};
-const correctBoxShadow = {
-  correct: (latest, { treeScale, projectionDelta }) => {
-    const original = latest;
-    const shadow = complex.parse(latest);
-    if (shadow.length > 5)
-      return original;
-    const template = complex.createTransformer(latest);
-    const offset = typeof shadow[0] !== "number" ? 1 : 0;
-    const xScale = projectionDelta.x.scale * treeScale.x;
-    const yScale = projectionDelta.y.scale * treeScale.y;
-    shadow[0 + offset] /= xScale;
-    shadow[1 + offset] /= yScale;
-    const averageScale = mixNumber$1(xScale, yScale, 0.5);
-    if (typeof shadow[2 + offset] === "number")
-      shadow[2 + offset] /= averageScale;
-    if (typeof shadow[3 + offset] === "number")
-      shadow[3 + offset] /= averageScale;
-    return template(shadow);
-  }
-};
-const defaultScaleCorrector = {
-  borderRadius: {
-    ...correctBorderRadius,
-    applyTo: [
-      "borderTopLeftRadius",
-      "borderTopRightRadius",
-      "borderBottomLeftRadius",
-      "borderBottomRightRadius"
-    ]
-  },
-  borderTopLeftRadius: correctBorderRadius,
-  borderTopRightRadius: correctBorderRadius,
-  borderBottomLeftRadius: correctBorderRadius,
-  borderBottomRightRadius: correctBorderRadius,
-  boxShadow: correctBoxShadow
-};
-class LayoutFeature extends Feature {
+class ProjectionFeature extends Feature {
   constructor(state2) {
     super(state2);
-    const options = this.state.getOptions();
-    const visualElement = this.state.visualElement;
-    if (options.layout || options.layoutId) {
-      addScaleCorrector(defaultScaleCorrector);
-      this.layoutGroup = injectLayoutGroup({});
-      vue.onBeforeMount(() => {
-        visualElement.projection = new HTMLProjectionNode(
-          visualElement.latestValues,
-          options["data-framer-portal-id"] ? void 0 : getClosestProjectingNode(visualElement.parent)
-        );
-        visualElement.projection.setOptions({
-          layout: options.layout,
-          layoutId: options.layoutId,
-          // TODO: drag
-          alwaysMeasureLayout: false,
-          visualElement,
-          animationType: typeof options.layout === "string" ? options.layout : "both",
-          // initialPromotionConfig
-          layoutRoot: options.layoutRoot,
-          layoutScroll: options.layoutScroll
-        });
-      });
-      vue.onBeforeUpdate(() => {
-        var _a;
-        (_a = visualElement.projection) == null ? void 0 : _a.willUpdate();
-      });
-      vue.onUpdated(() => {
-        var _a;
-        (_a = visualElement.projection) == null ? void 0 : _a.root.didUpdate();
-      });
-      vue.onBeforeUnmount(() => {
-        if (visualElement.projection) {
-          visualElement.projection.willUpdate();
-        }
-      });
-    }
+    addScaleCorrector(defaultScaleCorrector);
   }
-  update() {
-    var _a;
-    (_a = this.state.visualElement.projection) == null ? void 0 : _a.setOptions(this.state.getOptions());
+  initProjection() {
+    const options = this.state.options;
+    this.state.visualElement.projection = new HTMLProjectionNode(
+      this.state.visualElement.latestValues,
+      options["data-framer-portal-id"] ? void 0 : getClosestProjectingNode(this.state.visualElement.parent)
+    );
+    this.state.visualElement.projection.setOptions({
+      layout: options.layout,
+      layoutId: options.layoutId,
+      // TODO: drag
+      alwaysMeasureLayout: false,
+      visualElement: this.state.visualElement,
+      animationType: typeof options.layout === "string" ? options.layout : "both",
+      // initialPromotionConfig
+      layoutRoot: options.layoutRoot,
+      layoutScroll: options.layoutScroll
+    });
   }
-  mount() {
-    var _a, _b;
-    const options = this.state.getOptions();
-    if (options.layout || options.layoutId) {
-      const projection = this.state.visualElement.projection;
-      if (projection) {
-        (_b = (_a = this.layoutGroup) == null ? void 0 : _a.group) == null ? void 0 : _b.add(projection);
-      }
-      globalProjectionState.hasEverUpdated = true;
-      projection == null ? void 0 : projection.mount(this.state.element);
-      projection == null ? void 0 : projection.root.didUpdate();
-    }
+  beforeMount() {
+    this.initProjection();
   }
-  unmount() {
+  mount() {
     var _a;
-    if (this.state.visualElement.projection) {
-      this.state.visualElement.projection.unmount();
-      if ((_a = this.layoutGroup) == null ? void 0 : _a.group)
-        this.layoutGroup.group.remove(this.state.visualElement.projection);
-    }
+    (_a = this.state.visualElement.projection) == null ? void 0 : _a.mount(this.state.element);
   }
 }
 class FeatureManager {
@@ -6854,18 +7749,35 @@ class FeatureManager {
       new PressGesture(state2),
       new InViewGesture(state2),
       new SVGFeature(state2),
-      new EventFeature(state2),
-      new LayoutFeature(state2)
+      new LayoutFeature(state2),
+      new ProjectionFeature(state2),
+      new PanGesture(state2),
+      new DragGesture(state2)
     ];
   }
   mount() {
     this.features.forEach((feature) => feature.mount());
   }
+  beforeMount() {
+    this.features.forEach((feature) => {
+      var _a;
+      return (_a = feature.beforeMount) == null ? void 0 : _a.call(feature);
+    });
+  }
   unmount() {
     this.features.forEach((feature) => feature.unmount());
   }
   update() {
-    this.features.forEach((feature) => feature.update());
+    this.features.forEach((feature) => {
+      var _a;
+      return (_a = feature.update) == null ? void 0 : _a.call(feature);
+    });
+  }
+  beforeUpdate() {
+    this.features.forEach((feature) => feature.beforeUpdate());
+  }
+  beforeUnmount() {
+    this.features.forEach((feature) => feature.beforeUnmount());
   }
 }
 let scheduled;
@@ -6964,7 +7876,7 @@ function animateVariantsChildren(state2, activeState) {
     getAnimations: () => Promise.all(animationFactories.map((factory) => factory()))
   };
 }
-const STATE_TYPES = ["initial", "animate", "inView", "hover", "press", "exit", "drag"];
+const STATE_TYPES = ["initial", "animate", "inView", "hover", "press", "whileDrag", "exit"];
 const mountedStates = /* @__PURE__ */ new WeakMap();
 let id = 0;
 class MotionState {
@@ -7024,16 +7936,20 @@ class MotionState {
     return isDef(this.options.initial) ? this.options.initial : this.context.initial;
   }
   updateOptions() {
-    var _a;
     this.visualElement.update({
       ...this.options,
       whileHover: this.options.hover,
       whileTap: this.options.press,
       whileInView: this.options.inView
-    }, (_a = this.parent) == null ? void 0 : _a.context);
+    }, {
+      isPresent: !doneCallbacks.has(this.element)
+    });
+  }
+  beforeMount() {
+    this.featureManager.beforeMount();
   }
   mount(element, options) {
-    invariant(
+    heyListen.invariant(
       Boolean(element),
       "Animation state must be mounted with valid Element"
     );
@@ -7058,6 +7974,9 @@ class MotionState {
     this.featureManager.mount();
     scheduleAnimation(this);
   }
+  beforeUnmount() {
+    this.featureManager.beforeUnmount();
+  }
   unmount() {
     var _a;
     mountedStates.delete(this.element);
@@ -7065,6 +7984,9 @@ class MotionState {
     (_a = visualElementStore.get(this.element)) == null ? void 0 : _a.unmount();
     this.featureManager.unmount();
   }
+  beforeUpdate() {
+    this.featureManager.beforeUpdate();
+  }
   update(options) {
     this.options = options;
     this.updateOptions();
@@ -7072,9 +7994,13 @@ class MotionState {
     scheduleAnimation(this);
   }
   setActive(name, isActive) {
+    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);
+    });
     scheduleAnimation(this);
   }
   *animateUpdates() {
@@ -7190,16 +8116,6 @@ class MotionState {
     return this.options;
   }
 }
-const doneCallbacks = /* @__PURE__ */ new WeakMap();
-const unPresenceDom = vue.ref(/* @__PURE__ */ new WeakMap());
-function removeDoneCallback(element) {
-  const prevDoneCallback = doneCallbacks.get(element);
-  if (prevDoneCallback) {
-    element.removeEventListener("motioncomplete", prevDoneCallback);
-  }
-  doneCallbacks.delete(element);
-}
-const [injectAnimatePresence, provideAnimatePresence] = createContext("AnimatePresenceContext");
 function getMotionElement(el) {
   if ((el == null ? void 0 : el.nodeType) === 3 || (el == null ? void 0 : el.nodeType) === 8)
     return getMotionElement(el.nextSibling);
@@ -7215,10 +8131,6 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     as: {},
     asChild: { type: Boolean },
     custom: {},
-    inViewOptions: {},
-    inView: {},
-    press: {},
-    hover: {},
     initial: { type: [String, Object, Boolean] },
     animate: {},
     exit: {},
@@ -7226,19 +8138,44 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     style: {},
     transformTemplate: { type: Function },
     transition: {},
-    onMotionStart: { type: Function },
-    onMotionComplete: { type: Function },
-    onHoverStart: { type: Function },
-    onHoverEnd: { type: Function },
-    onPressStart: { type: Function },
-    onPressEnd: { type: Function },
-    onViewEnter: { type: Function },
-    onViewLeave: { type: Function },
+    layoutGroup: {},
     layout: { type: [Boolean, String] },
     layoutId: {},
     layoutScroll: { type: Boolean },
     layoutRoot: { type: Boolean },
-    "data-framer-portal-id": {}
+    "data-framer-portal-id": {},
+    globalPressTarget: { type: Boolean },
+    press: {},
+    onPressStart: { type: Function },
+    onPress: { type: Function },
+    onPressCancel: { type: Function },
+    hover: {},
+    onHoverStart: { type: Function },
+    onHoverEnd: { type: Function },
+    inViewOptions: {},
+    inView: {},
+    onViewportEnter: { type: Function },
+    onViewportLeave: { type: Function },
+    drag: { type: [Boolean, String] },
+    dragSnapToOrigin: { type: Boolean },
+    dragDirectionLock: { type: Boolean },
+    dragPropagation: { type: Boolean },
+    dragConstraints: { type: [Boolean, Object] },
+    dragElastic: { type: [Boolean, Number, Object] },
+    dragMomentum: { type: Boolean },
+    dragTransition: {},
+    dragListener: { type: Boolean },
+    dragControls: {},
+    onDragStart: { type: Function },
+    onDragEnd: { type: Function },
+    onDrag: { type: Function },
+    onDirectionLock: { type: Function },
+    onDragTransitionEnd: { type: Function },
+    onMeasureDragConstraints: { type: Function },
+    onPanSessionStart: { type: Function },
+    onPanStart: { type: Function },
+    onPan: { type: Function },
+    onPanEnd: { type: Function }
   }, {
     as: "div",
     asChild: false,
@@ -7249,7 +8186,10 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     layout: false,
     layoutId: void 0,
     layoutScroll: false,
-    layoutRoot: false
+    layoutRoot: false,
+    dragListener: true,
+    dragElastic: 0.2,
+    dragMomentum: true
   }),
   setup(__props) {
     const props = __props;
@@ -7260,23 +8200,34 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     const state2 = new MotionState(
       {
         ...attrs,
-        ...props
+        ...props,
+        layoutGroup
       },
       parentState
     );
     provideMotion(state2);
     const instance = vue.getCurrentInstance().proxy;
+    vue.onBeforeMount(() => {
+      state2.beforeMount();
+    });
     vue.onMounted(() => {
       state2.mount(getMotionElement(instance.$el), {
         ...attrs,
         ...props,
+        layoutGroup,
         initial: presenceInitial.value === false ? presenceInitial.value : props.initial === true ? void 0 : props.initial
       });
     });
+    vue.onBeforeUnmount(() => {
+      state2.beforeUnmount();
+    });
     vue.onUnmounted(() => {
       if (safeUnmount(getMotionElement(instance.$el)))
         state2.unmount();
     });
+    vue.onBeforeUpdate(() => {
+      state2.beforeUpdate();
+    });
     vue.onUpdated(() => {
       state2.update({
         ...attrs,
@@ -7298,12 +8249,23 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
       if (isSVG) {
         const { attributes, style: style2 } = convertSvgStyleToAttributes(state2.target);
         Object.assign(attrsProps, attributes);
-        Object.assign(styleProps, style2, props.style);
+        Object.assign(styleProps, style2);
       }
       if (!state2.isMounted()) {
-        Object.assign(styleProps, state2.target, props.style);
+        Object.assign(styleProps, state2.target);
+      }
+      if (props.drag && props.dragListener !== false) {
+        Object.assign(styleProps, {
+          userSelect: "none",
+          WebkitUserSelect: "none",
+          WebkitTouchCallout: "none",
+          touchAction: props.drag === true ? "none" : `pan-${props.drag === "x" ? "y" : "x"}`
+        });
       }
-      styleProps = createStyles(styleProps);
+      styleProps = createStyles({
+        ...styleProps,
+        ...props.style
+      });
       attrsProps.style = styleProps;
       return attrsProps;
     }
@@ -7456,12 +8418,10 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
       }
       removeDoneCallback(el);
       state2.setActive("exit", false);
-      unPresenceDom.value.delete(el);
     }
     const layoutGroup = useLayoutGroup(props);
     const { addPopStyle, removePopStyle } = usePopLayout(props);
     function exit(el, done) {
-      unPresenceDom.value.set(el, true);
       const state2 = mountedStates.get(el);
       if (!state2) {
         return done();
@@ -7473,7 +8433,6 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
         removePopStyle(state2);
         if ((_a = e == null ? void 0 : e.detail) == null ? void 0 : _a.isExit) {
           removeDoneCallback(el);
-          unPresenceDom.value.delete(el);
           (_b = state2.visualElement.projection) == null ? void 0 : _b.willUpdate();
           (_c = layoutGroup.forceRender) == null ? void 0 : _c.call(layoutGroup);
           done();
@@ -7639,13 +8598,12 @@ function useSpring(source, config = {}) {
     });
   };
   vue.watch(() => JSON.stringify(config), () => {
-    const cleanup = value.attach((v, set) => {
+    value.attach((v, set) => {
       latestValue = v;
       latestSetter = set;
       frame.update(startAnimation);
       return value.get();
     }, stopAnimation);
-    vue.onBeforeUnmount(() => cleanup());
   }, { immediate: true });
   if (isMotionValue(source)) {
     source.on("change", (v) => {
@@ -7655,7 +8613,7 @@ function useSpring(source, config = {}) {
   return value;
 }
 function refWarning(name, ref) {
-  warning(
+  heyListen.warning(
     Boolean(!ref || ref.value),
     `You have defined a ${name} options but the provided ref is not yet hydrated, probably because it's defined higher up the tree. Try calling useScroll() in the same component as the ref.`
   );
@@ -7765,6 +8723,10 @@ function useAnimate() {
   });
   return [domProxy, animate2];
 }
+Object.defineProperty(exports, "isDragActive", {
+  enumerable: true,
+  get: () => motionDom.isDragActive
+});
 exports.AnimatePresence = _sfc_main$1;
 exports.LayoutGroup = _sfc_main;
 exports.Motion = _sfc_main$2;
@@ -7780,7 +8742,7 @@ exports.cancelSync = cancelSync;
 exports.circIn = circIn;
 exports.circInOut = circInOut;
 exports.circOut = circOut;
-exports.clamp = clamp;
+exports.clamp = clamp$1;
 exports.components = components;
 exports.createContext = createContext;
 exports.createScopedAnimate = createScopedAnimate;
@@ -7794,6 +8756,7 @@ exports.easeOut = easeOut;
 exports.frame = frame;
 exports.frameData = frameData;
 exports.frameSteps = frameSteps;
+exports.getContextWindow = getContextWindow;
 exports.inView = inView;
 exports.inertia = inertia;
 exports.injectLayoutGroup = injectLayoutGroup;
@@ -7801,22 +8764,26 @@ exports.injectMotion = injectMotion;
 exports.interpolate = interpolate;
 exports.isMotionValue = isMotionValue;
 exports.keyframes = keyframes;
+exports.millisecondsToSeconds = millisecondsToSeconds;
 exports.mirrorEasing = mirrorEasing;
 exports.mix = mix;
 exports.motionValue = motionValue;
+exports.noop = noop;
 exports.pipe = pipe;
-exports.progress = progress;
+exports.progress = progress$1;
 exports.provideLayoutGroup = provideLayoutGroup;
 exports.provideMotion = provideMotion;
 exports.reverseEasing = reverseEasing;
 exports.scroll = scroll;
 exports.scrollInfo = scrollInfo;
+exports.secondsToMilliseconds = secondsToMilliseconds;
 exports.shouldInheritGroup = shouldInheritGroup;
 exports.shouldInheritId = shouldInheritId;
 exports.spring = spring;
 exports.stagger = stagger;
 exports.steps = steps;
 exports.sync = sync;
+exports.time = time;
 exports.transform = transform;
 exports.useAnimate = useAnimate;
 exports.useAnimationFrame = useAnimationFrame;