@nswds/app 1.113.0 → 1.114.0

package/dist/index.js

@@ -18781,7 +18781,7 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.112.2"};
+  version: "1.113.1"};
 var SluggerContext = React5__default.createContext(null);
 function flattenText(nodes) {
   if (nodes == null || typeof nodes === "boolean") return "";
@@ -21109,7 +21109,7 @@ var backIn = /* @__PURE__ */ reverseEasing(backOut);
 var backInOut = /* @__PURE__ */ mirrorEasing(backIn);
 
 // node_modules/motion-utils/dist/es/easing/anticipate.mjs
-var anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
+var anticipate = (p) => p >= 1 ? 1 : (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
 
 // node_modules/motion-utils/dist/es/easing/circ.mjs
 var circIn = (p) => 1 - Math.sin(Math.acos(p));
@@ -21206,8 +21206,7 @@ function createRenderStep(runNextFrame, stepName) {
       const queue = addToCurrentFrame ? thisFrame : nextFrame;
       if (keepAlive)
         toKeepAlive.add(callback);
-      if (!queue.has(callback))
-        queue.add(callback);
+      queue.add(callback);
       return callback;
     },
     /**
@@ -21227,7 +21226,9 @@ function createRenderStep(runNextFrame, stepName) {
         return;
       }
       isProcessing = true;
-      [thisFrame, nextFrame] = [nextFrame, thisFrame];
+      const prevFrame = thisFrame;
+      thisFrame = nextFrame;
+      nextFrame = prevFrame;
       thisFrame.forEach(triggerCallback);
       thisFrame.clear();
       isProcessing = false;
@@ -21257,9 +21258,10 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
   }, {});
   const { setup, read, resolveKeyframes, preUpdate, update, preRender, render, postRender } = steps;
   const processBatch = () => {
-    const timestamp = MotionGlobalConfig.useManualTiming ? state.timestamp : performance.now();
+    const useManualTiming = MotionGlobalConfig.useManualTiming;
+    const timestamp = useManualTiming ? state.timestamp : performance.now();
     runNextFrame = false;
-    if (!MotionGlobalConfig.useManualTiming) {
+    if (!useManualTiming) {
       state.delta = useDefaultElapsed ? 1e3 / 60 : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
     }
     state.timestamp = timestamp;
@@ -21525,8 +21527,7 @@ function analyseComplexValue(value) {
 function parseComplexValue(v) {
   return analyseComplexValue(v).values;
 }
-function createTransformer(source) {
-  const { split, types } = analyseComplexValue(source);
+function buildTransformer({ split, types }) {
   const numSections = split.length;
   return (v) => {
     let output = "";
@@ -21546,11 +21547,20 @@ function createTransformer(source) {
     return output;
   };
 }
+function createTransformer(source) {
+  return buildTransformer(analyseComplexValue(source));
+}
 var convertNumbersToZero = (v) => typeof v === "number" ? 0 : color.test(v) ? color.getAnimatableNone(v) : v;
+var convertToZero = (value, splitBefore) => {
+  if (typeof value === "number") {
+    return splitBefore?.trim().endsWith("/") ? value : 0;
+  }
+  return convertNumbersToZero(value);
+};
 function getAnimatableNone(v) {
-  const parsed = parseComplexValue(v);
-  const transformer = createTransformer(v);
-  return transformer(parsed.map(convertNumbersToZero));
+  const info = analyseComplexValue(v);
+  const transformer = buildTransformer(info);
+  return transformer(info.values.map((value, i) => convertToZero(value, info.split[i])));
 }
 var complex = {
   test,
@@ -21781,14 +21791,7 @@ function createGeneratorEasing(options, scale2 = 100, createGenerator) {
   };
 }
 
-// node_modules/motion-dom/dist/es/animation/generators/utils/velocity.mjs
-var velocitySampleDuration = 5;
-function calcGeneratorVelocity(resolveValue, t, current) {
-  const prevT = Math.max(t - velocitySampleDuration, 0);
-  return velocityPerSecond(current - resolveValue(prevT), t - prevT);
-}
-
-// node_modules/motion-dom/dist/es/animation/generators/spring/defaults.mjs
+// node_modules/motion-dom/dist/es/animation/generators/spring.mjs
 var springDefaults = {
   // Default spring physics
   stiffness: 100,
@@ -21818,8 +21821,17 @@ var springDefaults = {
   minDamping: 0.05,
   maxDamping: 1
 };
-
-// node_modules/motion-dom/dist/es/animation/generators/spring/find.mjs
+function calcAngularFreq(undampedFreq, dampingRatio) {
+  return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
+}
+var rootIterations = 12;
+function approximateRoot(envelope, derivative, initialGuess) {
+  let result = initialGuess;
+  for (let i = 1; i < rootIterations; i++) {
+    result = result - envelope(result) / derivative(result);
+  }
+  return result;
+}
 var safeMin = 1e-3;
 function findSpring({ duration = springDefaults.duration, bounce = springDefaults.bounce, velocity = springDefaults.velocity, mass = springDefaults.mass }) {
   let envelope;
@@ -21877,19 +21889,6 @@ function findSpring({ duration = springDefaults.duration, bounce = springDefault
     };
   }
 }
-var rootIterations = 12;
-function approximateRoot(envelope, derivative, initialGuess) {
-  let result = initialGuess;
-  for (let i = 1; i < rootIterations; i++) {
-    result = result - envelope(result) / derivative(result);
-  }
-  return result;
-}
-function calcAngularFreq(undampedFreq, dampingRatio) {
-  return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio);
-}
-
-// node_modules/motion-dom/dist/es/animation/generators/spring/index.mjs
 var durationKeys = ["duration", "bounce"];
 var physicsKeys = ["stiffness", "damping", "mass"];
 function isSpringType(options, keys) {
@@ -21905,6 +21904,7 @@ function getSpringOptions(options) {
     ...options
   };
   if (!isSpringType(options, physicsKeys) && isSpringType(options, durationKeys)) {
+    springOptions.velocity = 0;
     if (options.visualDuration) {
       const visualDuration = options.visualDuration;
       const root = 2 * Math.PI / (visualDuration * 1.2);
@@ -21917,7 +21917,7 @@ function getSpringOptions(options) {
         damping
       };
     } else {
-      const derived = findSpring(options);
+      const derived = findSpring({ ...options, velocity: 0 });
       springOptions = {
         ...springOptions,
         ...derived,
@@ -21950,14 +21950,28 @@ function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce
   restSpeed || (restSpeed = isGranularScale ? springDefaults.restSpeed.granular : springDefaults.restSpeed.default);
   restDelta || (restDelta = isGranularScale ? springDefaults.restDelta.granular : springDefaults.restDelta.default);
   let resolveSpring;
+  let resolveVelocity;
+  let angularFreq;
+  let A;
+  let sinCoeff;
+  let cosCoeff;
   if (dampingRatio < 1) {
-    const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
+    angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio);
+    A = (initialVelocity + dampingRatio * undampedAngularFreq * initialDelta) / angularFreq;
     resolveSpring = (t) => {
       const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
-      return target - envelope * ((initialVelocity + dampingRatio * undampedAngularFreq * initialDelta) / angularFreq * Math.sin(angularFreq * t) + initialDelta * Math.cos(angularFreq * t));
+      return target - envelope * (A * Math.sin(angularFreq * t) + initialDelta * Math.cos(angularFreq * t));
+    };
+    sinCoeff = dampingRatio * undampedAngularFreq * A + initialDelta * angularFreq;
+    cosCoeff = dampingRatio * undampedAngularFreq * initialDelta - A * angularFreq;
+    resolveVelocity = (t) => {
+      const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
+      return envelope * (sinCoeff * Math.sin(angularFreq * t) + cosCoeff * Math.cos(angularFreq * t));
     };
   } else if (dampingRatio === 1) {
     resolveSpring = (t) => target - Math.exp(-undampedAngularFreq * t) * (initialDelta + (initialVelocity + undampedAngularFreq * initialDelta) * t);
+    const C = initialVelocity + undampedAngularFreq * initialDelta;
+    resolveVelocity = (t) => Math.exp(-undampedAngularFreq * t) * (undampedAngularFreq * C * t - initialVelocity);
   } else {
     const dampedAngularFreq = undampedAngularFreq * Math.sqrt(dampingRatio * dampingRatio - 1);
     resolveSpring = (t) => {
@@ -21965,19 +21979,33 @@ function spring(optionsOrVisualDuration = springDefaults.visualDuration, bounce
       const freqForT = Math.min(dampedAngularFreq * t, 300);
       return target - envelope * ((initialVelocity + dampingRatio * undampedAngularFreq * initialDelta) * Math.sinh(freqForT) + dampedAngularFreq * initialDelta * Math.cosh(freqForT)) / dampedAngularFreq;
     };
+    const P = (initialVelocity + dampingRatio * undampedAngularFreq * initialDelta) / dampedAngularFreq;
+    const sinhCoeff = dampingRatio * undampedAngularFreq * P - initialDelta * dampedAngularFreq;
+    const coshCoeff = dampingRatio * undampedAngularFreq * initialDelta - P * dampedAngularFreq;
+    resolveVelocity = (t) => {
+      const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
+      const freqForT = Math.min(dampedAngularFreq * t, 300);
+      return envelope * (sinhCoeff * Math.sinh(freqForT) + coshCoeff * Math.cosh(freqForT));
+    };
   }
   const generator = {
     calculatedDuration: isResolvedFromDuration ? duration || null : null,
+    velocity: (t) => secondsToMilliseconds(resolveVelocity(t)),
     next: (t) => {
+      if (!isResolvedFromDuration && dampingRatio < 1) {
+        const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t);
+        const sin = Math.sin(angularFreq * t);
+        const cos = Math.cos(angularFreq * t);
+        const current2 = target - envelope * (A * sin + initialDelta * cos);
+        const currentVelocity = secondsToMilliseconds(envelope * (sinCoeff * sin + cosCoeff * cos));
+        state.done = Math.abs(currentVelocity) <= restSpeed && Math.abs(target - current2) <= restDelta;
+        state.value = state.done ? target : current2;
+        return state;
+      }
       const current = resolveSpring(t);
       if (!isResolvedFromDuration) {
-        let currentVelocity = t === 0 ? initialVelocity : 0;
-        if (dampingRatio < 1) {
-          currentVelocity = t === 0 ? secondsToMilliseconds(initialVelocity) : calcGeneratorVelocity(resolveSpring, t, current);
-        }
-        const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed;
-        const isBelowDisplacementThreshold = Math.abs(target - current) <= restDelta;
-        state.done = isBelowVelocityThreshold && isBelowDisplacementThreshold;
+        const currentVelocity = secondsToMilliseconds(resolveVelocity(t));
+        state.done = Math.abs(currentVelocity) <= restSpeed && Math.abs(target - current) <= restDelta;
       } else {
         state.done = t >= duration;
       }
@@ -22002,6 +22030,13 @@ spring.applyToOptions = (options) => {
   return options;
 };
 
+// node_modules/motion-dom/dist/es/animation/generators/utils/velocity.mjs
+var velocitySampleDuration = 5;
+function getGeneratorVelocity(resolveValue, t, current) {
+  const prevT = Math.max(t - velocitySampleDuration, 0);
+  return velocityPerSecond(current - resolveValue(prevT), t - prevT);
+}
+
 // node_modules/motion-dom/dist/es/animation/generators/inertia.mjs
 function inertia({ keyframes: keyframes2, velocity = 0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min, max, restDelta = 0.5, restSpeed }) {
   const origin = keyframes2[0];
@@ -22038,7 +22073,7 @@ function inertia({ keyframes: keyframes2, velocity = 0, power = 0.8, timeConstan
     timeReachedBoundary = t;
     spring$1 = spring({
       keyframes: [state.value, nearestBoundary(state.value)],
-      velocity: calcGeneratorVelocity(calcLatest, t, state.value),
+      velocity: getGeneratorVelocity(calcLatest, t, state.value),
       // TODO: This should be passing * 1000
       damping: bounceDamping,
       stiffness: bounceStiffness,
@@ -22221,6 +22256,10 @@ var JSAnimation = class extends WithPromise {
     this.currentTime = 0;
     this.holdTime = null;
     this.playbackSpeed = 1;
+    this.delayState = {
+      done: false,
+      value: void 0
+    };
     this.stop = () => {
       const { motionValue: motionValue2 } = this.options;
       if (motionValue2 && motionValue2.updatedAt !== time.now()) {
@@ -22321,8 +22360,14 @@ var JSAnimation = class extends WithPromise {
       }
       elapsed = clamp(0, 1, iterationProgress) * resolvedDuration;
     }
-    const state = isInDelayPhase ? { done: false, value: keyframes2[0] } : frameGenerator.next(elapsed);
-    if (mixKeyframes) {
+    let state;
+    if (isInDelayPhase) {
+      this.delayState.value = keyframes2[0];
+      state = this.delayState;
+    } else {
+      state = frameGenerator.next(elapsed);
+    }
+    if (mixKeyframes && !isInDelayPhase) {
       state.value = mixKeyframes(state.value);
     }
     let { done } = state;
@@ -22367,16 +22412,40 @@ var JSAnimation = class extends WithPromise {
     } else if (this.driver) {
       this.startTime = this.driver.now() - newTime / this.playbackSpeed;
     }
-    this.driver?.start(false);
+    if (this.driver) {
+      this.driver.start(false);
+    } else {
+      this.startTime = 0;
+      this.state = "paused";
+      this.holdTime = newTime;
+      this.tick(newTime);
+    }
+  }
+  /**
+   * Returns the generator's velocity at the current time in units/second.
+   * Uses the analytical derivative when available (springs), avoiding
+   * the MotionValue's frame-dependent velocity estimation.
+   */
+  getGeneratorVelocity() {
+    const t = this.currentTime;
+    if (t <= 0)
+      return this.options.velocity || 0;
+    if (this.generator.velocity) {
+      return this.generator.velocity(t);
+    }
+    const current = this.generator.next(t).value;
+    return getGeneratorVelocity((s) => this.generator.next(s).value, t, current);
   }
   get speed() {
     return this.playbackSpeed;
   }
   set speed(newSpeed) {
-    this.updateTime(time.now());
     const hasChanged = this.playbackSpeed !== newSpeed;
+    if (hasChanged && this.driver) {
+      this.updateTime(time.now());
+    }
     this.playbackSpeed = newSpeed;
-    if (hasChanged) {
+    if (hasChanged && this.driver) {
       this.time = millisecondsToSeconds(this.currentTime);
     }
   }
@@ -22581,8 +22650,14 @@ function removeNonTranslationalTransform(visualElement) {
 }
 var positionalValues = {
   // Dimensions
-  width: ({ x }, { paddingLeft = "0", paddingRight = "0" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight),
-  height: ({ y }, { paddingTop = "0", paddingBottom = "0" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom),
+  width: ({ x }, { paddingLeft = "0", paddingRight = "0", boxSizing }) => {
+    const width = x.max - x.min;
+    return boxSizing === "border-box" ? width : width - parseFloat(paddingLeft) - parseFloat(paddingRight);
+  },
+  height: ({ y }, { paddingTop = "0", paddingBottom = "0", boxSizing }) => {
+    const height = y.max - y.min;
+    return boxSizing === "border-box" ? height : height - parseFloat(paddingTop) - parseFloat(paddingBottom);
+  },
   top: (_bbox, { top }) => parseFloat(top),
   left: (_bbox, { left }) => parseFloat(left),
   bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),
@@ -22728,9 +22803,6 @@ function setStyle(element, name, value) {
   isCSSVar(name) ? element.style.setProperty(name, value) : element.style[name] = value;
 }
 
-// node_modules/motion-dom/dist/es/utils/supports/scroll-timeline.mjs
-var supportsScrollTimeline = /* @__PURE__ */ memo(() => window.ScrollTimeline !== void 0);
-
 // node_modules/motion-dom/dist/es/utils/supports/flags.mjs
 var supportsFlags = {};
 
@@ -22740,6 +22812,9 @@ function memoSupports(callback, supportsFlag) {
   return () => supportsFlags[supportsFlag] ?? memoized();
 }
 
+// node_modules/motion-dom/dist/es/utils/supports/scroll-timeline.mjs
+var supportsScrollTimeline = /* @__PURE__ */ memoSupports(() => window.ScrollTimeline !== void 0, "scrollTimeline");
+
 // node_modules/motion-dom/dist/es/utils/supports/linear-easing.mjs
 var supportsLinearEasing = /* @__PURE__ */ memoSupports(() => {
   try {
@@ -22846,9 +22921,8 @@ var NativeAnimation = class extends WithPromise {
         const keyframe = getFinalKeyframe(keyframes2, this.options, finalKeyframe, this.speed);
         if (this.updateMotionValue) {
           this.updateMotionValue(keyframe);
-        } else {
-          setStyle(element, name, keyframe);
         }
+        setStyle(element, name, keyframe);
         this.animation.cancel();
       }
       onComplete?.();
@@ -22922,9 +22996,13 @@ var NativeAnimation = class extends WithPromise {
     return millisecondsToSeconds(Number(this.animation.currentTime) || 0);
   }
   set time(newTime) {
+    const wasFinished = this.finishedTime !== null;
     this.manualStartTime = null;
     this.finishedTime = null;
     this.animation.currentTime = secondsToMilliseconds(newTime);
+    if (wasFinished) {
+      this.animation.pause();
+    }
   }
   /**
    * The playback speed of the animation.
@@ -22950,13 +23028,17 @@ var NativeAnimation = class extends WithPromise {
   /**
    * Attaches a timeline to the animation, for instance the `ScrollTimeline`.
    */
-  attachTimeline({ timeline, observe }) {
+  attachTimeline({ timeline, rangeStart, rangeEnd, observe }) {
     if (this.allowFlatten) {
       this.animation.effect?.updateTiming({ easing: "linear" });
     }
     this.animation.onfinish = null;
     if (timeline && supportsScrollTimeline()) {
       this.animation.timeline = timeline;
+      if (rangeStart)
+        this.animation.rangeStart = rangeStart;
+      if (rangeEnd)
+        this.animation.rangeEnd = rangeEnd;
       return noop;
     } else {
       return observe(this);
@@ -22986,7 +23068,7 @@ var NativeAnimationExtended = class extends NativeAnimation {
     replaceStringEasing(options);
     replaceTransitionType(options);
     super(options);
-    if (options.startTime !== void 0) {
+    if (options.startTime !== void 0 && options.autoplay !== false) {
       this.startTime = options.startTime;
     }
     this.options = options;
@@ -23013,7 +23095,11 @@ var NativeAnimationExtended = class extends NativeAnimation {
     });
     const sampleTime = Math.max(sampleDelta, time.now() - this.startTime);
     const delta = clamp(0, sampleDelta, sampleTime - sampleDelta);
-    motionValue2.setWithVelocity(sampleAnimation.sample(Math.max(0, sampleTime - delta)).value, sampleAnimation.sample(sampleTime).value, delta);
+    const current = sampleAnimation.sample(sampleTime).value;
+    const { name } = this.options;
+    if (element && name)
+      setStyle(element, name, current);
+    motionValue2.setWithVelocity(sampleAnimation.sample(Math.max(0, sampleTime - delta)).value, current, delta);
     sampleAnimation.stop();
   }
 };
@@ -23065,24 +23151,54 @@ function makeAnimationInstant(options) {
   options.type = "keyframes";
 }
 
-// node_modules/motion-dom/dist/es/animation/waapi/supports/waapi.mjs
+// node_modules/motion-dom/dist/es/animation/waapi/utils/accelerated-values.mjs
 var acceleratedValues = /* @__PURE__ */ new Set([
   "opacity",
   "clipPath",
   "filter",
   "transform"
-  // TODO: Could be re-enabled now we have support for linear() easing
+  // TODO: Can be accelerated but currently disabled until https://issues.chromium.org/issues/41491098 is resolved
+  // or until we implement support for linear() easing.
   // "background-color"
 ]);
+
+// node_modules/motion-dom/dist/es/animation/waapi/utils/is-browser-color.mjs
+var browserColorFunctions = /^(?:oklch|oklab|lab|lch|color|color-mix|light-dark)\(/;
+function hasBrowserOnlyColors(keyframes2) {
+  for (let i = 0; i < keyframes2.length; i++) {
+    if (typeof keyframes2[i] === "string" && browserColorFunctions.test(keyframes2[i])) {
+      return true;
+    }
+  }
+  return false;
+}
+
+// node_modules/motion-dom/dist/es/animation/waapi/supports/waapi.mjs
+var colorProperties = /* @__PURE__ */ new Set([
+  "color",
+  "backgroundColor",
+  "outlineColor",
+  "fill",
+  "stroke",
+  "borderColor",
+  "borderTopColor",
+  "borderRightColor",
+  "borderBottomColor",
+  "borderLeftColor"
+]);
 var supportsWaapi = /* @__PURE__ */ memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
 function supportsBrowserAnimation(options) {
-  const { motionValue: motionValue2, name, repeatDelay, repeatType, damping, type } = options;
+  const { motionValue: motionValue2, name, repeatDelay, repeatType, damping, type, keyframes: keyframes2 } = options;
   const subject = motionValue2?.owner?.current;
   if (!(subject instanceof HTMLElement)) {
     return false;
   }
   const { onUpdate, transformTemplate } = motionValue2.owner.getProps();
-  return supportsWaapi() && name && acceleratedValues.has(name) && (name !== "transform" || !transformTemplate) && /**
+  return supportsWaapi() && name && /**
+   * Force WAAPI for color properties with browser-only color formats
+   * (oklch, oklab, lab, lch, etc.) that the JS animation path can't parse.
+   */
+  (acceleratedValues.has(name) || colorProperties.has(name) && hasBrowserOnlyColors(keyframes2)) && (name !== "transform" || !transformTemplate) && /**
    * If we're outputting values to onUpdate then we can't use WAAPI as there's
    * no way to read the value from WAAPI every frame.
    */
@@ -23122,7 +23238,9 @@ var AsyncMotionValueAnimation = class extends WithPromise {
     this.keyframeResolver = void 0;
     const { name, type, velocity, delay: delay2, isHandoff, onUpdate } = options;
     this.resolvedAt = time.now();
+    let canAnimateValue = true;
     if (!canAnimate(keyframes2, name, type, velocity)) {
+      canAnimateValue = false;
       if (MotionGlobalConfig.instantAnimations || !delay2) {
         onUpdate?.(getFinalKeyframe(keyframes2, options, finalKeyframe));
       }
@@ -23137,12 +23255,21 @@ var AsyncMotionValueAnimation = class extends WithPromise {
       ...options,
       keyframes: keyframes2
     };
-    const useWaapi = !isHandoff && supportsBrowserAnimation(resolvedOptions);
+    const useWaapi = canAnimateValue && !isHandoff && supportsBrowserAnimation(resolvedOptions);
     const element = resolvedOptions.motionValue?.owner?.current;
-    const animation = useWaapi ? new NativeAnimationExtended({
-      ...resolvedOptions,
-      element
-    }) : new JSAnimation(resolvedOptions);
+    let animation;
+    if (useWaapi) {
+      try {
+        animation = new NativeAnimationExtended({
+          ...resolvedOptions,
+          element
+        });
+      } catch {
+        animation = new JSAnimation(resolvedOptions);
+      }
+    } else {
+      animation = new JSAnimation(resolvedOptions);
+    }
     animation.finished.then(() => {
       this.notifyFinished();
     }).catch(noop);
@@ -23285,22 +23412,43 @@ var getDefaultTransition = (valueKey, { keyframes: keyframes2 }) => {
   return ease;
 };
 
-// node_modules/motion-dom/dist/es/animation/utils/get-final-keyframe.mjs
-var isNotNull2 = (value) => value !== null;
-function getFinalKeyframe2(keyframes2, { repeat, repeatType = "loop" }, finalKeyframe) {
-  const resolvedKeyframes = keyframes2.filter(isNotNull2);
-  const index = repeat && repeatType !== "loop" && repeat % 2 === 1 ? 0 : resolvedKeyframes.length - 1;
-  return !index || finalKeyframe === void 0 ? resolvedKeyframes[index] : finalKeyframe;
+// node_modules/motion-dom/dist/es/animation/utils/resolve-transition.mjs
+function resolveTransition(transition, parentTransition) {
+  if (transition?.inherit && parentTransition) {
+    const { inherit: _, ...rest } = transition;
+    return { ...parentTransition, ...rest };
+  }
+  return transition;
 }
 
 // node_modules/motion-dom/dist/es/animation/utils/get-value-transition.mjs
 function getValueTransition(transition, key) {
-  return transition?.[key] ?? transition?.["default"] ?? transition;
+  const valueTransition = transition?.[key] ?? transition?.["default"] ?? transition;
+  if (valueTransition !== transition) {
+    return resolveTransition(valueTransition, transition);
+  }
+  return valueTransition;
 }
 
 // node_modules/motion-dom/dist/es/animation/utils/is-transition-defined.mjs
-function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) {
-  return !!Object.keys(transition).length;
+var orchestrationKeys = /* @__PURE__ */ new Set([
+  "when",
+  "delay",
+  "delayChildren",
+  "staggerChildren",
+  "staggerDirection",
+  "repeat",
+  "repeatType",
+  "repeatDelay",
+  "from",
+  "elapsed"
+]);
+function isTransitionDefined(transition) {
+  for (const key in transition) {
+    if (!orchestrationKeys.has(key))
+      return true;
+  }
+  return false;
 }
 
 // node_modules/motion-dom/dist/es/animation/interfaces/motion-value.mjs
@@ -23349,7 +23497,7 @@ var animateMotionValue = (name, value, target, transition = {}, element, isHando
   }
   options.allowFlatten = !valueTransition.type && !valueTransition.ease;
   if (shouldSkip && !isHandoff && value.get() !== void 0) {
-    const finalKeyframe = getFinalKeyframe2(options.keyframes, valueTransition);
+    const finalKeyframe = getFinalKeyframe(options.keyframes, valueTransition);
     if (finalKeyframe !== void 0) {
       frame.update(() => {
         options.onUpdate(finalKeyframe);
@@ -23748,7 +23896,9 @@ function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
   return shouldBlock;
 }
 function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0, transitionOverride, type } = {}) {
-  let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = targetAndTransition;
+  let { transition, transitionEnd, ...target } = targetAndTransition;
+  const defaultTransition = visualElement.getDefaultTransition();
+  transition = transition ? resolveTransition(transition, defaultTransition) : defaultTransition;
   const reduceMotion = transition?.reduceMotion;
   if (transitionOverride)
     transition = transitionOverride;
@@ -23765,7 +23915,8 @@ function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0,
       ...getValueTransition(transition || {}, key)
     };
     const currentValue = value.get();
-    if (currentValue !== void 0 && !value.isAnimating && !Array.isArray(valueTarget) && valueTarget === currentValue && !valueTransition.velocity) {
+    if (currentValue !== void 0 && !value.isAnimating() && !Array.isArray(valueTarget) && valueTarget === currentValue && !valueTransition.velocity) {
+      frame.update(() => value.set(valueTarget));
       continue;
     }
     let isHandoff = false;
@@ -23788,11 +23939,14 @@ function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0,
     }
   }
   if (transitionEnd) {
-    Promise.all(animations2).then(() => {
-      frame.update(() => {
-        transitionEnd && setTarget(visualElement, transitionEnd);
-      });
+    const applyTransitionEnd = () => frame.update(() => {
+      transitionEnd && setTarget(visualElement, transitionEnd);
     });
+    if (animations2.length) {
+      Promise.all(animations2).then(applyTransitionEnd);
+    } else {
+      applyTransitionEnd();
+    }
   }
   return animations2;
 }
@@ -23895,6 +24049,16 @@ var filter = {
   }
 };
 
+// node_modules/motion-dom/dist/es/value/types/complex/mask.mjs
+var mask = {
+  ...complex,
+  getAnimatableNone: (v) => {
+    const parsed = complex.parse(v);
+    const transformer = complex.createTransformer(v);
+    return transformer(parsed.map((v2) => typeof v2 === "number" ? 0 : typeof v2 === "object" ? { ...v2, alpha: 1 } : v2));
+  }
+};
+
 // node_modules/motion-dom/dist/es/value/types/int.mjs
 var int = {
   ...number,
@@ -24010,14 +24174,17 @@ var defaultValueTypes = {
   borderBottomColor: color,
   borderLeftColor: color,
   filter,
-  WebkitFilter: filter
+  WebkitFilter: filter,
+  mask,
+  WebkitMask: mask
 };
 var getDefaultValueType = (key) => defaultValueTypes[key];
 
 // node_modules/motion-dom/dist/es/value/types/utils/animatable-none.mjs
+var customTypes = /* @__PURE__ */ new Set([filter, mask]);
 function getAnimatableNone2(key, value) {
   let defaultValueType = getDefaultValueType(key);
-  if (defaultValueType !== filter)
+  if (!customTypes.has(defaultValueType))
     defaultValueType = complex;
   return defaultValueType.getAnimatableNone ? defaultValueType.getAnimatableNone(value) : void 0;
 }
@@ -24161,7 +24328,7 @@ var getValueAsType = (value, type) => {
 
 // node_modules/motion-dom/dist/es/utils/is-html-element.mjs
 function isHTMLElement(element) {
-  return isObject(element) && "offsetHeight" in element;
+  return isObject(element) && "offsetHeight" in element && !("ownerSVGElement" in element);
 }
 
 // node_modules/motion-dom/dist/es/frameloop/microtask.mjs
@@ -24218,23 +24385,55 @@ function isValidHover(event) {
 }
 function hover(elementOrSelector, onHoverStart, options = {}) {
   const [elements, eventOptions, cancel] = setupGesture(elementOrSelector, options);
-  const onPointerEnter = (enterEvent) => {
-    if (!isValidHover(enterEvent))
-      return;
-    const { target } = enterEvent;
-    const onHoverEnd = onHoverStart(target, enterEvent);
-    if (typeof onHoverEnd !== "function" || !target)
-      return;
+  elements.forEach((element) => {
+    let isPressed = false;
+    let deferredHoverEnd = false;
+    let hoverEndCallback;
+    const removePointerLeave = () => {
+      element.removeEventListener("pointerleave", onPointerLeave);
+    };
+    const endHover = (event) => {
+      if (hoverEndCallback) {
+        hoverEndCallback(event);
+        hoverEndCallback = void 0;
+      }
+      removePointerLeave();
+    };
+    const onPointerUp = (event) => {
+      isPressed = false;
+      window.removeEventListener("pointerup", onPointerUp);
+      window.removeEventListener("pointercancel", onPointerUp);
+      if (deferredHoverEnd) {
+        deferredHoverEnd = false;
+        endHover(event);
+      }
+    };
+    const onPointerDown = () => {
+      isPressed = true;
+      window.addEventListener("pointerup", onPointerUp, eventOptions);
+      window.addEventListener("pointercancel", onPointerUp, eventOptions);
+    };
     const onPointerLeave = (leaveEvent) => {
-      if (!isValidHover(leaveEvent))
+      if (leaveEvent.pointerType === "touch")
         return;
-      onHoverEnd(leaveEvent);
-      target.removeEventListener("pointerleave", onPointerLeave);
+      if (isPressed) {
+        deferredHoverEnd = true;
+        return;
+      }
+      endHover(leaveEvent);
+    };
+    const onPointerEnter = (enterEvent) => {
+      if (!isValidHover(enterEvent))
+        return;
+      deferredHoverEnd = false;
+      const onHoverEnd = onHoverStart(element, enterEvent);
+      if (typeof onHoverEnd !== "function")
+        return;
+      hoverEndCallback = onHoverEnd;
+      element.addEventListener("pointerleave", onPointerLeave, eventOptions);
     };
-    target.addEventListener("pointerleave", onPointerLeave, eventOptions);
-  };
-  elements.forEach((element) => {
     element.addEventListener("pointerenter", onPointerEnter, eventOptions);
+    element.addEventListener("pointerdown", onPointerDown, eventOptions);
   });
   return cancel;
 }
@@ -24312,13 +24511,19 @@ var enableKeyboardPress = (focusEvent, eventOptions) => {
 function isValidPressEvent(event) {
   return isPrimaryPointer(event) && !isDragActive();
 }
+var claimedPointerDownEvents = /* @__PURE__ */ new WeakSet();
 function press(targetOrSelector, onPressStart, options = {}) {
   const [targets, eventOptions, cancelEvents] = setupGesture(targetOrSelector, options);
   const startPress = (startEvent) => {
     const target = startEvent.currentTarget;
     if (!isValidPressEvent(startEvent))
       return;
+    if (claimedPointerDownEvents.has(startEvent))
+      return;
     isPressing.add(target);
+    if (options.stopPropagation) {
+      claimedPointerDownEvents.add(startEvent);
+    }
     const onPressEnd = onPressStart(target, startEvent);
     const onPointerEnd = (endEvent, success) => {
       window.removeEventListener("pointerup", onPointerUp);
@@ -24360,6 +24565,99 @@ function isSVGElement(element) {
   return isObject(element) && "ownerSVGElement" in element;
 }
 
+// node_modules/motion-dom/dist/es/resize/handle-element.mjs
+var resizeHandlers = /* @__PURE__ */ new WeakMap();
+var observer;
+var getSize = (borderBoxAxis, svgAxis, htmlAxis) => (target, borderBoxSize) => {
+  if (borderBoxSize && borderBoxSize[0]) {
+    return borderBoxSize[0][borderBoxAxis + "Size"];
+  } else if (isSVGElement(target) && "getBBox" in target) {
+    return target.getBBox()[svgAxis];
+  } else {
+    return target[htmlAxis];
+  }
+};
+var getWidth = /* @__PURE__ */ getSize("inline", "width", "offsetWidth");
+var getHeight = /* @__PURE__ */ getSize("block", "height", "offsetHeight");
+function notifyTarget({ target, borderBoxSize }) {
+  resizeHandlers.get(target)?.forEach((handler) => {
+    handler(target, {
+      get width() {
+        return getWidth(target, borderBoxSize);
+      },
+      get height() {
+        return getHeight(target, borderBoxSize);
+      }
+    });
+  });
+}
+function notifyAll(entries) {
+  entries.forEach(notifyTarget);
+}
+function createResizeObserver() {
+  if (typeof ResizeObserver === "undefined")
+    return;
+  observer = new ResizeObserver(notifyAll);
+}
+function resizeElement(target, handler) {
+  if (!observer)
+    createResizeObserver();
+  const elements = resolveElements(target);
+  elements.forEach((element) => {
+    let elementHandlers = resizeHandlers.get(element);
+    if (!elementHandlers) {
+      elementHandlers = /* @__PURE__ */ new Set();
+      resizeHandlers.set(element, elementHandlers);
+    }
+    elementHandlers.add(handler);
+    observer?.observe(element);
+  });
+  return () => {
+    elements.forEach((element) => {
+      const elementHandlers = resizeHandlers.get(element);
+      elementHandlers?.delete(handler);
+      if (!elementHandlers?.size) {
+        observer?.unobserve(element);
+      }
+    });
+  };
+}
+
+// node_modules/motion-dom/dist/es/resize/handle-window.mjs
+var windowCallbacks = /* @__PURE__ */ new Set();
+var windowResizeHandler;
+function createWindowResizeHandler() {
+  windowResizeHandler = () => {
+    const info = {
+      get width() {
+        return window.innerWidth;
+      },
+      get height() {
+        return window.innerHeight;
+      }
+    };
+    windowCallbacks.forEach((callback) => callback(info));
+  };
+  window.addEventListener("resize", windowResizeHandler);
+}
+function resizeWindow(callback) {
+  windowCallbacks.add(callback);
+  if (!windowResizeHandler)
+    createWindowResizeHandler();
+  return () => {
+    windowCallbacks.delete(callback);
+    if (!windowCallbacks.size && typeof windowResizeHandler === "function") {
+      window.removeEventListener("resize", windowResizeHandler);
+      windowResizeHandler = void 0;
+    }
+  };
+}
+
+// node_modules/motion-dom/dist/es/resize/index.mjs
+function resize(a, b) {
+  return typeof a === "function" ? resizeWindow(a) : resizeElement(a, b);
+}
+
 // node_modules/motion-dom/dist/es/utils/is-svg-svg-element.mjs
 function isSVGSVGElement(element) {
   return isSVGElement(element) && element.tagName === "svg";
@@ -24386,26 +24684,6 @@ var createBox = () => ({
   y: createAxis()
 });
 
-// node_modules/motion-dom/dist/es/render/utils/reduced-motion/state.mjs
-var prefersReducedMotion = { current: null };
-var hasReducedMotionListener = { current: false };
-
-// node_modules/motion-dom/dist/es/render/utils/reduced-motion/index.mjs
-var isBrowser2 = typeof window !== "undefined";
-function initPrefersReducedMotion() {
-  hasReducedMotionListener.current = true;
-  if (!isBrowser2)
-    return;
-  if (window.matchMedia) {
-    const motionMediaQuery = window.matchMedia("(prefers-reduced-motion)");
-    const setReducedMotionPreferences = () => prefersReducedMotion.current = motionMediaQuery.matches;
-    motionMediaQuery.addEventListener("change", setReducedMotionPreferences);
-    setReducedMotionPreferences();
-  } else {
-    prefersReducedMotion.current = false;
-  }
-}
-
 // node_modules/motion-dom/dist/es/render/store.mjs
 var visualElementStore = /* @__PURE__ */ new WeakMap();
 
@@ -24469,6 +24747,26 @@ function updateMotionValuesFromProps(element, next, prev) {
   return next;
 }
 
+// node_modules/motion-dom/dist/es/render/utils/reduced-motion/state.mjs
+var prefersReducedMotion = { current: null };
+var hasReducedMotionListener = { current: false };
+
+// node_modules/motion-dom/dist/es/render/utils/reduced-motion/index.mjs
+var isBrowser2 = typeof window !== "undefined";
+function initPrefersReducedMotion() {
+  hasReducedMotionListener.current = true;
+  if (!isBrowser2)
+    return;
+  if (window.matchMedia) {
+    const motionMediaQuery = window.matchMedia("(prefers-reduced-motion)");
+    const setReducedMotionPreferences = () => prefersReducedMotion.current = motionMediaQuery.matches;
+    motionMediaQuery.addEventListener("change", setReducedMotionPreferences);
+    setReducedMotionPreferences();
+  } else {
+    prefersReducedMotion.current = false;
+  }
+}
+
 // node_modules/motion-dom/dist/es/render/VisualElement.mjs
 var propEventHandlers = [
   "AnimationStart",
@@ -24509,6 +24807,7 @@ var VisualElement = class {
     this.features = {};
     this.valueSubscriptions = /* @__PURE__ */ new Map();
     this.prevMotionValues = {};
+    this.hasBeenMounted = false;
     this.events = {};
     this.propEventSubscriptions = {};
     this.notifyUpdate = () => this.notify("Update", this.latestValues);
@@ -24554,6 +24853,12 @@ var VisualElement = class {
     }
   }
   mount(instance) {
+    if (this.hasBeenMounted) {
+      for (const key in this.initialValues) {
+        this.values.get(key)?.jump(this.initialValues[key]);
+        this.latestValues[key] = this.initialValues[key];
+      }
+    }
     this.current = instance;
     visualElementStore.set(instance, this);
     if (this.projection && !this.projection.instance) {
@@ -24579,6 +24884,7 @@ var VisualElement = class {
     this.shouldSkipAnimations = this.skipAnimationsConfig ?? false;
     this.parent?.addChild(this);
     this.update(this.props, this.presenceContext);
+    this.hasBeenMounted = true;
   }
   unmount() {
     this.projection && this.projection.unmount();
@@ -24613,6 +24919,23 @@ var VisualElement = class {
     if (this.valueSubscriptions.has(key)) {
       this.valueSubscriptions.get(key)();
     }
+    if (value.accelerate && acceleratedValues.has(key) && this.current instanceof HTMLElement) {
+      const { factory, keyframes: keyframes2, times, ease: ease2, duration } = value.accelerate;
+      const animation = new NativeAnimation({
+        element: this.current,
+        name: key,
+        keyframes: keyframes2,
+        times,
+        ease: ease2,
+        duration: secondsToMilliseconds(duration)
+      });
+      const cleanup = factory(animation);
+      this.valueSubscriptions.set(key, () => {
+        cleanup();
+        animation.cancel();
+      });
+      return;
+    }
     const valueIsTransform = transformProps.has(key);
     if (valueIsTransform && this.onBindTransform) {
       this.onBindTransform();
@@ -24965,10 +25288,8 @@ function applyTreeDeltas(box, treeScale, treePath, isSharedTransition = false) {
       continue;
     }
     if (isSharedTransition && node.options.layoutScroll && node.scroll && node !== node.root) {
-      transformBox(box, {
-        x: -node.scroll.offset.x,
-        y: -node.scroll.offset.y
-      });
+      translateAxis(box.x, -node.scroll.offset.x);
+      translateAxis(box.y, -node.scroll.offset.y);
     }
     if (delta) {
       treeScale.x *= delta.x.scale;
@@ -24976,7 +25297,7 @@ function applyTreeDeltas(box, treeScale, treePath, isSharedTransition = false) {
       applyBoxDelta(box, delta);
     }
     if (isSharedTransition && hasTransform(node.latestValues)) {
-      transformBox(box, node.latestValues);
+      transformBox(box, node.latestValues, node.layout?.layoutBox);
     }
   }
   if (treeScale.x < TREE_SCALE_SNAP_MAX && treeScale.x > TREE_SCALE_SNAP_MIN) {
@@ -24987,16 +25308,23 @@ function applyTreeDeltas(box, treeScale, treePath, isSharedTransition = false) {
   }
 }
 function translateAxis(axis, distance2) {
-  axis.min = axis.min + distance2;
-  axis.max = axis.max + distance2;
+  axis.min += distance2;
+  axis.max += distance2;
 }
 function transformAxis(axis, axisTranslate, axisScale, boxScale, axisOrigin = 0.5) {
   const originPoint = mixNumber(axis.min, axis.max, axisOrigin);
   applyAxisDelta(axis, axisTranslate, axisScale, originPoint, boxScale);
 }
-function transformBox(box, transform) {
-  transformAxis(box.x, transform.x, transform.scaleX, transform.scale, transform.originX);
-  transformAxis(box.y, transform.y, transform.scaleY, transform.scale, transform.originY);
+function resolveAxisTranslate(value, axis) {
+  if (typeof value === "string") {
+    return parseFloat(value) / 100 * (axis.max - axis.min);
+  }
+  return value;
+}
+function transformBox(box, transform, sourceBox) {
+  const resolveBox = sourceBox ?? box;
+  transformAxis(box.x, resolveAxisTranslate(transform.x, resolveBox.x), transform.scaleX, transform.scale, transform.originX);
+  transformAxis(box.y, resolveAxisTranslate(transform.y, resolveBox.y), transform.scaleY, transform.scale, transform.originY);
 }
 
 // node_modules/motion-dom/dist/es/projection/utils/measure.mjs
@@ -25424,6 +25752,7 @@ function createAnimationState(visualElement) {
   let animate = createAnimateFunction(visualElement);
   let state = createState();
   let isInitialRender = true;
+  let wasReset = false;
   const buildResolvedTypeValues = (type) => (acc, definition) => {
     const resolved = resolveVariant(visualElement, definition, type === "exit" ? visualElement.presenceContext?.custom : void 0);
     if (resolved) {
@@ -25451,7 +25780,7 @@ function createAnimationState(visualElement) {
       if (activeDelta === false)
         removedVariantIndex = i;
       let isInherited = prop === context[type] && prop !== props[type] && propIsVariant;
-      if (isInherited && isInitialRender && visualElement.manuallyAnimateOnMount) {
+      if (isInherited && (isInitialRender || wasReset) && visualElement.manuallyAnimateOnMount) {
         isInherited = false;
       }
       typeState.protectedKeys = { ...encounteredKeys };
@@ -25463,6 +25792,15 @@ function createAnimationState(visualElement) {
       ) {
         continue;
       }
+      if (type === "exit" && typeState.isActive && activeDelta !== true) {
+        if (typeState.prevResolvedValues) {
+          encounteredKeys = {
+            ...encounteredKeys,
+            ...typeState.prevResolvedValues
+          };
+        }
+        continue;
+      }
       const variantDidChange = checkVariantsDidChange(typeState.prevProp, prop);
       let shouldAnimateType = variantDidChange || // If we're making this variant active, we want to always make it active
       type === changedActiveType && typeState.isActive && !isInherited && propIsVariant || // If we removed a higher-priority variant (i is in reverse order)
@@ -25516,7 +25854,7 @@ function createAnimationState(visualElement) {
       if (typeState.isActive) {
         encounteredKeys = { ...encounteredKeys, ...resolvedValues };
       }
-      if (isInitialRender && visualElement.blockInitialAnimation) {
+      if ((isInitialRender || wasReset) && visualElement.blockInitialAnimation) {
         shouldAnimateType = false;
       }
       const willAnimateViaParent = isInherited && variantDidChange;
@@ -25524,7 +25862,7 @@ function createAnimationState(visualElement) {
       if (shouldAnimateType && needsAnimating) {
         animations2.push(...definitionList.map((animation) => {
           const options = { type };
-          if (typeof animation === "string" && isInitialRender && !willAnimateViaParent && visualElement.manuallyAnimateOnMount && visualElement.parent) {
+          if (typeof animation === "string" && (isInitialRender || wasReset) && !willAnimateViaParent && visualElement.manuallyAnimateOnMount && visualElement.parent) {
             const { parent } = visualElement;
             const parentVariant = resolveVariant(parent, animation);
             if (parent.enteringChildren && parentVariant) {
@@ -25561,6 +25899,7 @@ function createAnimationState(visualElement) {
       shouldAnimate = false;
     }
     isInitialRender = false;
+    wasReset = false;
     return shouldAnimate ? animate(animations2) : Promise.resolve();
   }
   function setActive(type, isActive) {
@@ -25581,6 +25920,7 @@ function createAnimationState(visualElement) {
     getState: () => state,
     reset: () => {
       state = createState();
+      wasReset = true;
     }
   };
 }
@@ -25657,21 +25997,23 @@ function calcBoxDelta(delta, source, target, origin) {
   calcAxisDelta(delta.x, source.x, target.x, origin ? origin.originX : void 0);
   calcAxisDelta(delta.y, source.y, target.y, origin ? origin.originY : void 0);
 }
-function calcRelativeAxis(target, relative, parent) {
-  target.min = parent.min + relative.min;
+function calcRelativeAxis(target, relative, parent, anchor = 0) {
+  const anchorPoint = anchor ? mixNumber(parent.min, parent.max, anchor) : parent.min;
+  target.min = anchorPoint + relative.min;
   target.max = target.min + calcLength(relative);
 }
-function calcRelativeBox(target, relative, parent) {
-  calcRelativeAxis(target.x, relative.x, parent.x);
-  calcRelativeAxis(target.y, relative.y, parent.y);
+function calcRelativeBox(target, relative, parent, anchor) {
+  calcRelativeAxis(target.x, relative.x, parent.x, anchor?.x);
+  calcRelativeAxis(target.y, relative.y, parent.y, anchor?.y);
 }
-function calcRelativeAxisPosition(target, layout2, parent) {
-  target.min = layout2.min - parent.min;
+function calcRelativeAxisPosition(target, layout2, parent, anchor = 0) {
+  const anchorPoint = anchor ? mixNumber(parent.min, parent.max, anchor) : parent.min;
+  target.min = layout2.min - anchorPoint;
   target.max = target.min + calcLength(layout2);
 }
-function calcRelativePosition(target, layout2, parent) {
-  calcRelativeAxisPosition(target.x, layout2.x, parent.x);
-  calcRelativeAxisPosition(target.y, layout2.y, parent.y);
+function calcRelativePosition(target, layout2, parent, anchor) {
+  calcRelativeAxisPosition(target.x, layout2.x, parent.x, anchor?.x);
+  calcRelativeAxisPosition(target.y, layout2.y, parent.y, anchor?.y);
 }
 
 // node_modules/motion-dom/dist/es/projection/geometry/delta-remove.mjs
@@ -25774,8 +26116,13 @@ function buildProjectionTransform(delta, treeScale, latestTransform) {
 }
 
 // node_modules/motion-dom/dist/es/projection/animation/mix-values.mjs
-var borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"];
-var numBorders = borders.length;
+var borderLabels = [
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderBottomLeftRadius",
+  "borderBottomRightRadius"
+];
+var numBorders = borderLabels.length;
 var asNumber = (value) => typeof value === "string" ? parseFloat(value) : value;
 var isPx = (value) => typeof value === "number" || px.test(value);
 function mixValues(target, follow, lead, progress2, shouldCrossfadeOpacity, isOnlyMember) {
@@ -25786,7 +26133,7 @@ function mixValues(target, follow, lead, progress2, shouldCrossfadeOpacity, isOn
     target.opacity = mixNumber(follow.opacity ?? 1, lead.opacity ?? 1, progress2);
   }
   for (let i = 0; i < numBorders; i++) {
-    const borderLabel = `border${borders[i]}Radius`;
+    const borderLabel = borderLabels[i];
     let followRadius = getRadius(follow, borderLabel);
     let leadRadius = getRadius(lead, borderLabel);
     if (followRadius === void 0 && leadRadius === void 0)
@@ -25885,38 +26232,37 @@ var NodeStack = class {
   }
   add(node) {
     addUniqueItem(this.members, node);
+    for (let i = this.members.length - 1; i >= 0; i--) {
+      const member = this.members[i];
+      if (member === node || member === this.lead || member === this.prevLead)
+        continue;
+      const inst = member.instance;
+      if ((!inst || inst.isConnected === false) && !member.snapshot) {
+        removeItem(this.members, member);
+        member.unmount();
+      }
+    }
     node.scheduleRender();
   }
   remove(node) {
     removeItem(this.members, node);
-    if (node === this.prevLead) {
+    if (node === this.prevLead)
       this.prevLead = void 0;
-    }
     if (node === this.lead) {
       const prevLead = this.members[this.members.length - 1];
-      if (prevLead) {
+      if (prevLead)
         this.promote(prevLead);
-      }
     }
   }
   relegate(node) {
-    const indexOfNode = this.members.findIndex((member) => node === member);
-    if (indexOfNode === 0)
-      return false;
-    let prevLead;
-    for (let i = indexOfNode; i >= 0; i--) {
+    for (let i = this.members.indexOf(node) - 1; i >= 0; i--) {
       const member = this.members[i];
-      if (member.isPresent !== false) {
-        prevLead = member;
-        break;
+      if (member.isPresent !== false && member.instance?.isConnected !== false) {
+        this.promote(member);
+        return true;
       }
     }
-    if (prevLead) {
-      this.promote(prevLead);
-      return true;
-    } else {
-      return false;
-    }
+    return false;
   }
   promote(node, preserveFollowOpacity) {
     const prevLead = this.lead;
@@ -25926,52 +26272,37 @@ var NodeStack = class {
     this.lead = node;
     node.show();
     if (prevLead) {
-      prevLead.instance && prevLead.scheduleRender();
+      prevLead.updateSnapshot();
       node.scheduleRender();
-      const prevDep = prevLead.options.layoutDependency;
-      const nextDep = node.options.layoutDependency;
-      const dependencyMatches = prevDep !== void 0 && nextDep !== void 0 && prevDep === nextDep;
-      if (!dependencyMatches) {
+      const { layoutDependency: prevDep } = prevLead.options;
+      const { layoutDependency: nextDep } = node.options;
+      if (prevDep === void 0 || prevDep !== nextDep) {
         node.resumeFrom = prevLead;
-        if (preserveFollowOpacity) {
-          node.resumeFrom.preserveOpacity = true;
-        }
+        if (preserveFollowOpacity)
+          prevLead.preserveOpacity = true;
         if (prevLead.snapshot) {
           node.snapshot = prevLead.snapshot;
           node.snapshot.latestValues = prevLead.animationValues || prevLead.latestValues;
         }
-        if (node.root && node.root.isUpdating) {
+        if (node.root?.isUpdating)
           node.isLayoutDirty = true;
-        }
       }
-      const { crossfade } = node.options;
-      if (crossfade === false) {
+      if (node.options.crossfade === false)
         prevLead.hide();
-      }
     }
   }
   exitAnimationComplete() {
-    this.members.forEach((node) => {
-      const { options, resumingFrom } = node;
-      options.onExitComplete && options.onExitComplete();
-      if (resumingFrom) {
-        resumingFrom.options.onExitComplete && resumingFrom.options.onExitComplete();
-      }
+    this.members.forEach((member) => {
+      member.options.onExitComplete?.();
+      member.resumingFrom?.options.onExitComplete?.();
     });
   }
   scheduleRender() {
-    this.members.forEach((node) => {
-      node.instance && node.scheduleRender(false);
-    });
+    this.members.forEach((member) => member.instance && member.scheduleRender(false));
   }
-  /**
-   * Clear any leads that have been removed this render to prevent them from being
-   * used in future animations and to prevent memory leaks
-   */
   removeLeadSnapshot() {
-    if (this.lead && this.lead.snapshot) {
+    if (this.lead?.snapshot)
       this.lead.snapshot = void 0;
-    }
   }
 };
 
@@ -26220,6 +26551,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       for (let i = 0; i < this.path.length; i++) {
         const node = this.path[i];
         node.shouldResetTransform = true;
+        if (typeof node.latestValues.x === "string" || typeof node.latestValues.y === "string") {
+          node.isLayoutDirty = true;
+        }
         node.updateScroll("snapshot");
         if (node.options.layoutRoot) {
           node.willUpdate(false);
@@ -26237,8 +26571,13 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       this.updateScheduled = false;
       const updateWasBlocked = this.isUpdateBlocked();
       if (updateWasBlocked) {
+        const wasBlockedByResize = this.updateBlockedByResize;
         this.unblockUpdate();
+        this.updateBlockedByResize = false;
         this.clearAllSnapshots();
+        if (wasBlockedByResize) {
+          this.nodes.forEach(forceLayoutMeasure);
+        }
         this.nodes.forEach(clearMeasurements);
         return;
       }
@@ -26251,6 +26590,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         this.nodes.forEach(clearIsLayoutDirty);
       } else {
         this.isUpdating = false;
+        this.nodes.forEach(ensureDraggedNodesSnapshotted);
         this.nodes.forEach(resetTransformStyle);
         this.nodes.forEach(updateLayout);
         this.nodes.forEach(notifyLayoutUpdate);
@@ -26317,7 +26657,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       const prevLayout = this.layout;
       this.layout = this.measure(false);
       this.layoutVersion++;
-      this.layoutCorrected = createBox();
+      if (!this.layoutCorrected)
+        this.layoutCorrected = createBox();
       this.isLayoutDirty = false;
       this.projectionDelta = void 0;
       this.notifyListeners("measure", this.layout.layoutBox);
@@ -26403,23 +26744,21 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       }
       return boxWithoutScroll;
     }
-    applyTransform(box, transformOnly = false) {
-      const withTransforms = createBox();
+    applyTransform(box, transformOnly = false, output) {
+      const withTransforms = output || createBox();
       copyBoxInto(withTransforms, box);
       for (let i = 0; i < this.path.length; i++) {
         const node = this.path[i];
         if (!transformOnly && node.options.layoutScroll && node.scroll && node !== node.root) {
-          transformBox(withTransforms, {
-            x: -node.scroll.offset.x,
-            y: -node.scroll.offset.y
-          });
+          translateAxis(withTransforms.x, -node.scroll.offset.x);
+          translateAxis(withTransforms.y, -node.scroll.offset.y);
         }
         if (!hasTransform(node.latestValues))
           continue;
-        transformBox(withTransforms, node.latestValues);
+        transformBox(withTransforms, node.latestValues, node.layout?.layoutBox);
       }
       if (hasTransform(this.latestValues)) {
-        transformBox(withTransforms, this.latestValues);
+        transformBox(withTransforms, this.latestValues, this.layout?.layoutBox);
       }
       return withTransforms;
     }
@@ -26428,15 +26767,15 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       copyBoxInto(boxWithoutTransform, box);
       for (let i = 0; i < this.path.length; i++) {
         const node = this.path[i];
-        if (!node.instance)
-          continue;
         if (!hasTransform(node.latestValues))
           continue;
-        hasScale(node.latestValues) && node.updateSnapshot();
-        const sourceBox = createBox();
-        const nodeBox = node.measurePageBox();
-        copyBoxInto(sourceBox, nodeBox);
-        removeBoxTransforms(boxWithoutTransform, node.latestValues, node.snapshot ? node.snapshot.layoutBox : void 0, sourceBox);
+        let sourceBox;
+        if (node.instance) {
+          hasScale(node.latestValues) && node.updateSnapshot();
+          sourceBox = createBox();
+          copyBoxInto(sourceBox, node.measurePageBox());
+        }
+        removeBoxTransforms(boxWithoutTransform, node.latestValues, node.snapshot?.layoutBox, sourceBox);
       }
       if (hasTransform(this.latestValues)) {
         removeBoxTransforms(boxWithoutTransform, this.latestValues);
@@ -26489,7 +26828,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         this.removeRelativeTarget();
       }
       if (!this.targetDelta && !this.relativeTarget) {
-        if (relativeParent && relativeParent.layout) {
+        if (this.options.layoutAnchor !== false && relativeParent && relativeParent.layout) {
           this.createRelativeTarget(relativeParent, this.layout.layoutBox, relativeParent.layout.layoutBox);
         } else {
           this.removeRelativeTarget();
@@ -26503,10 +26842,10 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       }
       if (this.relativeTarget && this.relativeTargetOrigin && this.relativeParent && this.relativeParent.target) {
         this.forceRelativeParentToResolveTarget();
-        calcRelativeBox(this.target, this.relativeTarget, this.relativeParent.target);
+        calcRelativeBox(this.target, this.relativeTarget, this.relativeParent.target, this.options.layoutAnchor || void 0);
       } else if (this.targetDelta) {
         if (Boolean(this.resumingFrom)) {
-          this.target = this.applyTransform(this.layout.layoutBox);
+          this.applyTransform(this.layout.layoutBox, false, this.target);
         } else {
           copyBoxInto(this.target, this.layout.layoutBox);
         }
@@ -26516,7 +26855,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       }
       if (this.attemptToResolveRelativeTarget) {
         this.attemptToResolveRelativeTarget = false;
-        if (relativeParent && Boolean(relativeParent.resumingFrom) === Boolean(this.resumingFrom) && !relativeParent.options.layoutScroll && relativeParent.target && this.animationProgress !== 1) {
+        if (this.options.layoutAnchor !== false && relativeParent && Boolean(relativeParent.resumingFrom) === Boolean(this.resumingFrom) && !relativeParent.options.layoutScroll && relativeParent.target && this.animationProgress !== 1) {
           this.createRelativeTarget(relativeParent, this.target, relativeParent.target);
         } else {
           this.relativeParent = this.relativeTarget = void 0;
@@ -26542,7 +26881,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       this.forceRelativeParentToResolveTarget();
       this.relativeTarget = createBox();
       this.relativeTargetOrigin = createBox();
-      calcRelativePosition(this.relativeTargetOrigin, layout2, parentLayout);
+      calcRelativePosition(this.relativeTargetOrigin, layout2, parentLayout, this.options.layoutAnchor || void 0);
       copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
     }
     removeRelativeTarget() {
@@ -26605,9 +26944,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
     show() {
       this.isVisible = true;
     }
-    scheduleRender(notifyAll = true) {
+    scheduleRender(notifyAll2 = true) {
       this.options.visualElement?.scheduleRender();
-      if (notifyAll) {
+      if (notifyAll2) {
         const stack = this.getStack();
         stack && stack.scheduleRender();
       }
@@ -26644,7 +26983,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         mixAxisDelta(targetDelta.y, delta.y, progress2);
         this.setTargetDelta(targetDelta);
         if (this.relativeTarget && this.relativeTargetOrigin && this.layout && this.relativeParent && this.relativeParent.layout) {
-          calcRelativePosition(relativeLayout, this.layout.layoutBox, this.relativeParent.layout.layoutBox);
+          calcRelativePosition(relativeLayout, this.layout.layoutBox, this.relativeParent.layout.layoutBox, this.options.layoutAnchor || void 0);
           mixBox(this.relativeTarget, this.relativeTargetOrigin, relativeLayout, progress2);
           if (prevRelativeTarget && boxEquals(this.relativeTarget, prevRelativeTarget)) {
             this.isProjectionDirty = false;
@@ -26674,6 +27013,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       this.pendingAnimation = frame.update(() => {
         globalProjectionState.hasAnimatedSinceResize = true;
         this.motionValue || (this.motionValue = motionValue(0));
+        this.motionValue.jump(0, false);
         this.currentAnimation = animateSingleValue(this.motionValue, [0, 1e3], {
           ...options,
           velocity: 0,
@@ -26898,6 +27238,9 @@ function notifyLayoutUpdate(node) {
         axisSnapshot.min = layout2[axis].min;
         axisSnapshot.max = axisSnapshot.min + length;
       });
+    } else if (animationType === "x" || animationType === "y") {
+      const snapAxis = animationType === "x" ? "y" : "x";
+      copyAxisInto(isShared ? snapshot.measuredBox[snapAxis] : snapshot.layoutBox[snapAxis], layout2[snapAxis]);
     } else if (shouldAnimatePositionOnly(animationType, snapshot.layoutBox, layout2)) {
       eachAxis((axis) => {
         const axisSnapshot = isShared ? snapshot.measuredBox[axis] : snapshot.layoutBox[axis];
@@ -26924,10 +27267,11 @@ function notifyLayoutUpdate(node) {
       if (relativeParent && !relativeParent.resumeFrom) {
         const { snapshot: parentSnapshot, layout: parentLayout } = relativeParent;
         if (parentSnapshot && parentLayout) {
+          const anchor = node.options.layoutAnchor || void 0;
           const relativeSnapshot = createBox();
-          calcRelativePosition(relativeSnapshot, snapshot.layoutBox, parentSnapshot.layoutBox);
+          calcRelativePosition(relativeSnapshot, snapshot.layoutBox, parentSnapshot.layoutBox, anchor);
           const relativeLayout = createBox();
-          calcRelativePosition(relativeLayout, layout2, parentLayout.layoutBox);
+          calcRelativePosition(relativeLayout, layout2, parentLayout.layoutBox, anchor);
           if (!boxEqualsRounded(relativeSnapshot, relativeLayout)) {
             hasRelativeLayoutChanged = true;
           }
@@ -26971,9 +27315,19 @@ function clearSnapshot(node) {
 function clearMeasurements(node) {
   node.clearMeasurements();
 }
+function forceLayoutMeasure(node) {
+  node.isLayoutDirty = true;
+  node.updateLayout();
+}
 function clearIsLayoutDirty(node) {
   node.isLayoutDirty = false;
 }
+function ensureDraggedNodesSnapshotted(node) {
+  if (node.isAnimationBlocked && node.layout && !node.isLayoutDirty) {
+    node.snapshot = node.layout;
+    node.isLayoutDirty = true;
+  }
+}
 function resetTransformStyle(node) {
   const { visualElement } = node.options;
   if (visualElement && visualElement.getProps().onBeforeLayoutMeasure) {
@@ -27239,6 +27593,7 @@ var validMotionProps = /* @__PURE__ */ new Set([
   "onViewportEnter",
   "onViewportLeave",
   "globalTapTarget",
+  "propagate",
   "ignoreStrict",
   "viewport"
 ]);
@@ -27254,7 +27609,8 @@ function loadExternalIsValidProp(isValidProp) {
   shouldForward = (key) => key.startsWith("on") ? !isValidMotionProp(key) : isValidProp(key);
 }
 try {
-  loadExternalIsValidProp(__require("@emotion/is-prop-valid").default);
+  const emotionPkg = "@emotion/is-prop-valid";
+  loadExternalIsValidProp(__require(emotionPkg).default);
 } catch {
 }
 function filterProps(props, isDom, forwardMotionProps) {
@@ -27262,6 +27618,8 @@ function filterProps(props, isDom, forwardMotionProps) {
   for (const key in props) {
     if (key === "values" && typeof props.values === "object")
       continue;
+    if (isMotionValue(props[key]))
+      continue;
     if (shouldForward(key) || forwardMotionProps === true && isValidMotionProp(key) || !isDom && !isValidMotionProp(key) || // If trying to use native HTML drag events, forward drag listeners
     props["draggable"] && key.startsWith("onDrag")) {
       filteredProps[key] = props[key];
@@ -27510,9 +27868,6 @@ function useMotionRef(visualState, visualElement, externalRef) {
     if (instance) {
       visualState.onMount?.(instance);
     }
-    if (visualElement) {
-      instance ? visualElement.mount(instance) : visualElement.unmount();
-    }
     const ref = externalRefContainer.current;
     if (typeof ref === "function") {
       if (instance) {
@@ -27529,6 +27884,9 @@ function useMotionRef(visualState, visualElement, externalRef) {
     } else if (ref) {
       ref.current = instance;
     }
+    if (visualElement) {
+      instance ? visualElement.mount(instance) : visualElement.unmount();
+    }
   }, [visualElement]);
 }
 var SwitchLayoutGroupContext = createContext({});
@@ -27576,7 +27934,7 @@ function useVisualElement(Component2, visualState, props, createVisualElement, P
     }
   });
   const optimisedAppearId = props[optimizedAppearDataAttribute];
-  const wantsHandoff = useRef(Boolean(optimisedAppearId) && !window.MotionHandoffIsComplete?.(optimisedAppearId) && window.MotionHasOptimisedAnimation?.(optimisedAppearId));
+  const wantsHandoff = useRef(Boolean(optimisedAppearId) && typeof window !== "undefined" && !window.MotionHandoffIsComplete?.(optimisedAppearId) && window.MotionHasOptimisedAnimation?.(optimisedAppearId));
   useIsomorphicLayoutEffect(() => {
     hasMountedOnce.current = true;
     if (!visualElement)
@@ -27606,7 +27964,7 @@ function useVisualElement(Component2, visualState, props, createVisualElement, P
   return visualElement;
 }
 function createProjectionNode2(visualElement, props, ProjectionNodeConstructor, initialPromotionConfig) {
-  const { layoutId, layout: layout2, drag: drag2, dragConstraints, layoutScroll, layoutRoot, layoutCrossfade } = props;
+  const { layoutId, layout: layout2, drag: drag2, dragConstraints, layoutScroll, layoutRoot, layoutAnchor, layoutCrossfade } = props;
   visualElement.projection = new ProjectionNodeConstructor(visualElement.latestValues, props["data-framer-portal-id"] ? void 0 : getClosestProjectingNode(visualElement.parent));
   visualElement.projection.setOptions({
     layoutId,
@@ -27624,7 +27982,8 @@ function createProjectionNode2(visualElement, props, ProjectionNodeConstructor,
     initialPromotionConfig,
     crossfade: layoutCrossfade,
     layoutScroll,
-    layoutRoot
+    layoutRoot,
+    layoutAnchor
   });
 }
 function getClosestProjectingNode(visualElement) {
@@ -27648,7 +28007,7 @@ function createMotionComponent(Component2, { forwardMotionProps = false, type }
     const { isStatic } = configAndProps;
     const context = useCreateMotionContext(props);
     const visualState = useVisualState(props, isStatic);
-    if (!isStatic && isBrowser) {
+    if (!isStatic && typeof window !== "undefined") {
       useStrictMode(configAndProps, preloadedFeatures);
       const layoutProjection = getProjectionFunctionality(configAndProps);
       MeasureLayout2 = layoutProjection.MeasureLayout;
@@ -27764,6 +28123,7 @@ var ExitAnimationFeature = class extends Feature {
   constructor() {
     super(...arguments);
     this.id = id2++;
+    this.isExitComplete = false;
   }
   update() {
     if (!this.node.presenceContext)
@@ -27773,9 +28133,30 @@ var ExitAnimationFeature = class extends Feature {
     if (!this.node.animationState || isPresent === prevIsPresent) {
       return;
     }
+    if (isPresent && prevIsPresent === false) {
+      if (this.isExitComplete) {
+        const { initial, custom } = this.node.getProps();
+        if (typeof initial === "string") {
+          const resolved = resolveVariant(this.node, initial, custom);
+          if (resolved) {
+            const { transition, transitionEnd, ...target } = resolved;
+            for (const key in target) {
+              this.node.getValue(key)?.jump(target[key]);
+            }
+          }
+        }
+        this.node.animationState.reset();
+        this.node.animationState.animateChanges();
+      } else {
+        this.node.animationState.setActive("exit", false);
+      }
+      this.isExitComplete = false;
+      return;
+    }
     const exitAnimation = this.node.animationState.setActive("exit", !isPresent);
     if (onExitComplete && !isPresent) {
       exitAnimation.then(() => {
+        this.isExitComplete = true;
         onExitComplete(this.id);
       });
     }
@@ -27812,9 +28193,7 @@ function extractEventInfo(event) {
     }
   };
 }
-var addPointerInfo = (handler) => {
-  return (event) => isPrimaryPointer(event) && handler(event, extractEventInfo(event));
-};
+var addPointerInfo = (handler) => (event) => isPrimaryPointer(event) && handler(event, extractEventInfo(event));
 
 // node_modules/framer-motion/dist/es/events/add-pointer-event.mjs
 function addPointerEvent(target, eventName, handler, options) {
@@ -27841,6 +28220,7 @@ var PanSession = class {
     this.startEvent = null;
     this.lastMoveEvent = null;
     this.lastMoveEventInfo = null;
+    this.lastRawMoveEventInfo = null;
     this.handlers = {};
     this.contextWindow = window;
     this.scrollPositions = /* @__PURE__ */ new Map();
@@ -27854,6 +28234,9 @@ var PanSession = class {
     this.updatePoint = () => {
       if (!(this.lastMoveEvent && this.lastMoveEventInfo))
         return;
+      if (this.lastRawMoveEventInfo) {
+        this.lastMoveEventInfo = transformPoint(this.lastRawMoveEventInfo, this.transformPagePoint);
+      }
       const info2 = getPanInfo(this.lastMoveEventInfo, this.history);
       const isPanStarted = this.startEvent !== null;
       const isDistancePastThreshold = distance2D(info2.offset, { x: 0, y: 0 }) >= this.distanceThreshold;
@@ -27871,6 +28254,7 @@ var PanSession = class {
     };
     this.handlePointerMove = (event2, info2) => {
       this.lastMoveEvent = event2;
+      this.lastRawMoveEventInfo = info2;
       this.lastMoveEventInfo = transformPoint(info2, this.transformPagePoint);
       frame.update(this.updatePoint, true);
     };
@@ -27927,12 +28311,9 @@ var PanSession = class {
       y: window.scrollY
     });
     window.addEventListener("scroll", this.onElementScroll, {
-      capture: true,
-      passive: true
-    });
-    window.addEventListener("scroll", this.onWindowScroll, {
-      passive: true
+      capture: true
     });
+    window.addEventListener("scroll", this.onWindowScroll);
     this.removeScrollListeners = () => {
       window.removeEventListener("scroll", this.onElementScroll, {
         capture: true
@@ -28019,6 +28400,9 @@ function getVelocity(history, timeDelta) {
   if (!timestampedPoint) {
     return { x: 0, y: 0 };
   }
+  if (timestampedPoint === history[0] && history.length > 2 && lastPoint.timestamp - timestampedPoint.timestamp > secondsToMilliseconds(timeDelta) * 2) {
+    timestampedPoint = history[1];
+  }
   const time2 = millisecondsToSeconds(lastPoint.timestamp - timestampedPoint.timestamp);
   if (time2 === 0) {
     return { x: 0, y: 0 };
@@ -28135,14 +28519,11 @@ var VisualElementDragControls = class {
       return;
     const onSessionStart = (event) => {
       if (snapToCursor) {
-        this.stopAnimation();
         this.snapToCursor(extractEventInfo(event).point);
-      } else {
-        this.pauseAnimation();
       }
+      this.stopAnimation();
     };
     const onStart = (event, info) => {
-      this.stopAnimation();
       const { drag: drag2, dragPropagation, onDragStart } = this.getProps();
       if (drag2 && !dragPropagation) {
         if (this.openDragLock)
@@ -28209,7 +28590,12 @@ var VisualElementDragControls = class {
       this.latestPointerEvent = null;
       this.latestPanInfo = null;
     };
-    const resumeAnimation = () => eachAxis((axis) => this.getAnimationState(axis) === "paused" && this.getAxisMotionValue(axis).animation?.play());
+    const resumeAnimation = () => {
+      const { dragSnapToOrigin: snap } = this.getProps();
+      if (snap || this.constraints) {
+        this.startAnimation({ x: 0, y: 0 });
+      }
+    };
     const { dragSnapToOrigin } = this.getProps();
     this.panSession = new PanSession(originEvent, {
       onSessionStart,
@@ -28296,7 +28682,7 @@ var VisualElementDragControls = class {
       }
     }
     this.elastic = resolveDragElastic(dragElastic);
-    if (prevConstraints !== this.constraints && layout2 && this.constraints && !this.hasMutatedConstraints) {
+    if (prevConstraints !== this.constraints && !isRefObject(dragConstraints) && layout2 && this.constraints && !this.hasMutatedConstraints) {
       eachAxis((axis) => {
         if (this.constraints !== false && this.getAxisMotionValue(axis)) {
           this.constraints[axis] = rebaseAxisConstraints(layout2.layoutBox[axis], this.constraints[axis]);
@@ -28332,7 +28718,7 @@ var VisualElementDragControls = class {
         return;
       }
       let transition = constraints && constraints[axis] || {};
-      if (dragSnapToOrigin)
+      if (dragSnapToOrigin === true || dragSnapToOrigin === axis)
         transition = { min: 0, max: 0 };
       const bounceStiffness = dragElastic ? 200 : 1e6;
       const bounceDamping = dragElastic ? 40 : 1e7;
@@ -28359,12 +28745,6 @@ var VisualElementDragControls = class {
   stopAnimation() {
     eachAxis((axis) => this.getAxisMotionValue(axis).stop());
   }
-  pauseAnimation() {
-    eachAxis((axis) => this.getAxisMotionValue(axis).animation?.pause());
-  }
-  getAnimationState(axis) {
-    return this.getAxisMotionValue(axis).animation?.state;
-  }
   /**
    * Drag works differently depending on which props are provided.
    *
@@ -28416,6 +28796,7 @@ var VisualElementDragControls = class {
     this.visualElement.current.style.transform = transformTemplate ? transformTemplate({}, "") : "none";
     projection.root && projection.root.updateScroll();
     projection.updateLayout();
+    this.constraints = false;
     this.resolveConstraints();
     eachAxis((axis) => {
       if (!shouldDrag(axis, drag2, null))
@@ -28424,6 +28805,7 @@ var VisualElementDragControls = class {
       const { min, max } = this.constraints[axis];
       axisValue.set(mixNumber(min, max, boxProgress[axis]));
     });
+    this.visualElement.render();
   }
   addListeners() {
     if (!this.visualElement.current)
@@ -28438,10 +28820,14 @@ var VisualElementDragControls = class {
         this.start(event);
       }
     });
+    let stopResizeObservers;
     const measureDragConstraints = () => {
       const { dragConstraints } = this.getProps();
       if (isRefObject(dragConstraints) && dragConstraints.current) {
         this.constraints = this.resolveRefConstraints();
+        if (!stopResizeObservers) {
+          stopResizeObservers = startResizeObservers(element, dragConstraints.current, () => this.scalePositionWithinConstraints());
+        }
       }
     };
     const { projection } = this.visualElement;
@@ -28469,6 +28855,7 @@ var VisualElementDragControls = class {
       stopPointerListener();
       stopMeasureLayoutListener();
       stopLayoutUpdateListener && stopLayoutUpdateListener();
+      stopResizeObservers && stopResizeObservers();
     };
   }
   getProps() {
@@ -28485,6 +28872,24 @@ var VisualElementDragControls = class {
     };
   }
 };
+function skipFirstCall(callback) {
+  let isFirst = true;
+  return () => {
+    if (isFirst) {
+      isFirst = false;
+      return;
+    }
+    callback();
+  };
+}
+function startResizeObservers(element, constraintsElement, onResize) {
+  const stopElement = resize(element, skipFirstCall(onResize));
+  const stopContainer = resize(constraintsElement, skipFirstCall(onResize));
+  return () => {
+    stopElement();
+    stopContainer();
+  };
+}
 function shouldDrag(direction, drag2, currentDirection) {
   return (drag2 === true || drag2 === direction) && (currentDirection === null || currentDirection === direction);
 }
@@ -28637,8 +29042,10 @@ var MeasureLayoutWithContext = class extends Component {
     return null;
   }
   componentDidUpdate() {
-    const { projection } = this.props.visualElement;
+    const { visualElement, layoutAnchor } = this.props;
+    const { projection } = visualElement;
     if (projection) {
+      projection.options.layoutAnchor = layoutAnchor;
       projection.root.didUpdate();
       microtask.postRender(() => {
         if (!projection.currentAnimation && projection.isLead()) {
@@ -28762,10 +29169,14 @@ var PressGesture = class extends Feature {
     const { current } = this.node;
     if (!current)
       return;
+    const { globalTapTarget, propagate } = this.node.props;
     this.unmount = press(current, (_element, startEvent) => {
       handlePressEvent(this.node, startEvent, "Start");
       return (endEvent, { success }) => handlePressEvent(this.node, endEvent, success ? "End" : "Cancel");
-    }, { useGlobalTarget: this.node.props.globalTapTarget });
+    }, {
+      useGlobalTarget: globalTapTarget,
+      stopPropagation: propagate?.tap === false
+    });
   }
   unmount() {
   }
@@ -28815,7 +29226,7 @@ var InViewFeature = class extends Feature {
     this.isInView = false;
   }
   startObserver() {
-    this.unmount();
+    this.stopObserver?.();
     const { viewport = {} } = this.node.getProps();
     const { root, margin: rootMargin, amount = "some", once } = viewport;
     const options = {
@@ -28840,7 +29251,7 @@ var InViewFeature = class extends Feature {
       const callback = isIntersecting ? onViewportEnter : onViewportLeave;
       callback && callback(entry);
     };
-    return observeIntersection(this.node.current, options, onIntersectionUpdate);
+    this.stopObserver = observeIntersection(this.node.current, options, onIntersectionUpdate);
   }
   mount() {
     this.startObserver();
@@ -28855,6 +29266,9 @@ var InViewFeature = class extends Feature {
     }
   }
   unmount() {
+    this.stopObserver?.();
+    this.hasEnteredView = false;
+    this.isInView = false;
   }
 };
 function hasViewportOptionChanged({ viewport = {} }, { viewport: prevViewport = {} } = {}) {
@@ -29162,13 +29576,148 @@ function NavigationMenuIndicator({
     }
   );
 }
+var navigationMenuMainNavigationSurfaceStyles = cva("", {
+  variants: {
+    variant: {
+      primary: "bg-primary-800 dark:bg-primary-900",
+      secondary: "bg-[#f5f2ff] dark:bg-[#261447]",
+      tertiary: "bg-primary-600 dark:bg-primary-700",
+      white: "bg-white dark:bg-grey-950",
+      grey: "bg-grey-100 dark:bg-grey-900"
+    }
+  },
+  defaultVariants: {
+    variant: "grey"
+  }
+});
+var navigationMenuMainNavigationBorderStyles = cva("", {
+  variants: {
+    variant: {
+      primary: "border-primary-700 dark:border-primary-600",
+      secondary: "border-[#d9ccff] dark:border-[#4e3a86]",
+      tertiary: "border-primary-500 dark:border-primary-600",
+      white: "border-grey-200 dark:border-grey-800",
+      grey: "border-grey-200 dark:border-grey-800"
+    }
+  },
+  defaultVariants: {
+    variant: "grey"
+  }
+});
+var navigationMenuMainNavigationTriggerToneStyles = cva("", {
+  variants: {
+    variant: {
+      primary: "text-white dark:text-primary-50",
+      secondary: "text-primary-800 dark:text-primary-100",
+      tertiary: "text-white dark:text-primary-50",
+      white: "text-grey-900 dark:text-white",
+      grey: "text-grey-800 dark:text-grey-100"
+    }
+  },
+  defaultVariants: {
+    variant: "grey"
+  }
+});
+var navigationMenuMainNavigationTriggerActiveStyles = cva("", {
+  variants: {
+    variant: {
+      primary: "hover:bg-primary-700 hover:text-white focus:bg-primary-700 focus:text-white data-[state=open]:bg-primary-700 data-[state=open]:text-white dark:hover:bg-primary-800 dark:hover:text-white dark:focus:bg-primary-800 dark:focus:text-white dark:data-[state=open]:bg-primary-800 dark:data-[state=open]:text-white",
+      secondary: "hover:bg-[#e8e2ff] hover:text-primary-800 focus:bg-[#e8e2ff] focus:text-primary-800 data-[state=open]:bg-[#e8e2ff] data-[state=open]:text-primary-800 dark:hover:bg-[#32205a] dark:hover:text-primary-200 dark:focus:bg-[#32205a] dark:focus:text-primary-200 dark:data-[state=open]:bg-[#32205a] dark:data-[state=open]:text-primary-200",
+      tertiary: "hover:bg-primary-500 hover:text-white focus:bg-primary-500 focus:text-white data-[state=open]:bg-primary-500 data-[state=open]:text-white dark:hover:bg-primary-600 dark:hover:text-white dark:focus:bg-primary-600 dark:focus:text-white dark:data-[state=open]:bg-primary-600 dark:data-[state=open]:text-white",
+      white: "hover:bg-grey-100 hover:text-primary-800 focus:bg-grey-100 focus:text-primary-800 data-[state=open]:bg-grey-100 data-[state=open]:text-primary-800 dark:hover:bg-grey-800 dark:hover:text-primary-200 dark:focus:bg-grey-800 dark:focus:text-primary-200 dark:data-[state=open]:bg-grey-800 dark:data-[state=open]:text-primary-200",
+      grey: "hover:bg-grey-200 hover:text-primary-800 focus:bg-grey-200 focus:text-primary-800 data-[state=open]:bg-grey-200 data-[state=open]:text-primary-800 dark:hover:bg-grey-800 dark:hover:text-primary-200 dark:focus:bg-grey-800 dark:focus:text-primary-200 dark:data-[state=open]:bg-grey-800 dark:data-[state=open]:text-primary-200"
+    }
+  },
+  defaultVariants: {
+    variant: "grey"
+  }
+});
+var navigationMenuMainNavigationTriggerEdgeStyles = cva("", {
+  variants: {
+    variant: {
+      primary: "hover:before:bg-primary-700 hover:after:bg-primary-700 focus:before:bg-primary-700 focus:after:bg-primary-700 data-[state=open]:before:bg-primary-700 data-[state=open]:after:bg-primary-700 dark:hover:before:bg-primary-800 dark:hover:after:bg-primary-800 dark:focus:before:bg-primary-800 dark:focus:after:bg-primary-800 dark:data-[state=open]:before:bg-primary-800 dark:data-[state=open]:after:bg-primary-800",
+      secondary: "hover:before:bg-[#e8e2ff] hover:after:bg-[#e8e2ff] focus:before:bg-[#e8e2ff] focus:after:bg-[#e8e2ff] data-[state=open]:before:bg-[#e8e2ff] data-[state=open]:after:bg-[#e8e2ff] dark:hover:before:bg-[#32205a] dark:hover:after:bg-[#32205a] dark:focus:before:bg-[#32205a] dark:focus:after:bg-[#32205a] dark:data-[state=open]:before:bg-[#32205a] dark:data-[state=open]:after:bg-[#32205a]",
+      tertiary: "hover:before:bg-primary-500 hover:after:bg-primary-500 focus:before:bg-primary-500 focus:after:bg-primary-500 data-[state=open]:before:bg-primary-500 data-[state=open]:after:bg-primary-500 dark:hover:before:bg-primary-600 dark:hover:after:bg-primary-600 dark:focus:before:bg-primary-600 dark:focus:after:bg-primary-600 dark:data-[state=open]:before:bg-primary-600 dark:data-[state=open]:after:bg-primary-600",
+      white: "hover:before:bg-grey-100 hover:after:bg-grey-100 focus:before:bg-grey-100 focus:after:bg-grey-100 data-[state=open]:before:bg-grey-100 data-[state=open]:after:bg-grey-100 dark:hover:before:bg-grey-800 dark:hover:after:bg-grey-800 dark:focus:before:bg-grey-800 dark:focus:after:bg-grey-800 dark:data-[state=open]:before:bg-grey-800 dark:data-[state=open]:after:bg-grey-800",
+      grey: "hover:before:bg-grey-200 hover:after:bg-grey-200 focus:before:bg-grey-200 focus:after:bg-grey-200 data-[state=open]:before:bg-grey-200 data-[state=open]:after:bg-grey-200 dark:hover:before:bg-grey-800 dark:hover:after:bg-grey-800 dark:focus:before:bg-grey-800 dark:focus:after:bg-grey-800 dark:data-[state=open]:before:bg-grey-800 dark:data-[state=open]:after:bg-grey-800"
+    }
+  },
+  defaultVariants: {
+    variant: "grey"
+  }
+});
+var navigationMenuMainNavigationDropdownSurfaceStyles = cva(
+  "w-full shadow dark:shadow-black/40",
+  {
+    variants: {
+      variant: {
+        primary: "bg-white dark:bg-grey-950",
+        secondary: "bg-white dark:bg-grey-900",
+        tertiary: "bg-white dark:bg-grey-950",
+        white: "bg-white dark:bg-grey-950",
+        grey: "bg-white dark:bg-grey-950"
+      }
+    },
+    defaultVariants: {
+      variant: "grey"
+    }
+  }
+);
+var navigationMenuMainNavigationFeaturedLinkStyles = cva(
+  "group relative flex items-center px-8 py-8 text-xl font-bold whitespace-normal",
+  {
+    variants: {
+      variant: {
+        primary: "text-primary-800 hover:bg-primary-800/8 dark:text-primary-200 dark:hover:bg-primary-900/80",
+        secondary: "text-primary-800 hover:bg-[#f5f2ff] dark:text-primary-200 dark:hover:bg-[#32205a]/70",
+        tertiary: "text-primary-700 hover:bg-primary-100 dark:text-primary-200 dark:hover:bg-primary-900/70",
+        white: "text-primary-800 hover:bg-grey-100 dark:text-primary-200 dark:hover:bg-grey-800/80",
+        grey: "text-primary-800 hover:bg-grey-100 dark:text-primary-200 dark:hover:bg-grey-800/80"
+      }
+    },
+    defaultVariants: {
+      variant: "grey"
+    }
+  }
+);
+var navigationMenuMainNavigationSectionLinkStyles = cva(
+  "relative mx-2 rounded-none border-t p-4 whitespace-normal focus-within:rounded-sm focus-within:outline focus-within:outline-inherit [&:nth-last-child(-n+3)]:border-b",
+  {
+    variants: {
+      variant: {
+        primary: "border-primary-100 bg-white hover:bg-primary-50 hover:font-bold hover:text-primary-800 dark:border-primary-900 dark:bg-grey-950 dark:hover:bg-primary-900/60 dark:hover:text-primary-200",
+        secondary: "border-[#ece3ff] bg-white hover:bg-[#f8f4ff] hover:font-bold hover:text-primary-800 dark:border-[#45356e] dark:bg-grey-900 dark:hover:bg-[#32205a]/60 dark:hover:text-primary-200",
+        tertiary: "border-primary-100 bg-white hover:bg-primary-50 hover:font-bold hover:text-primary-700 dark:border-primary-900 dark:bg-grey-950 dark:hover:bg-primary-900/60 dark:hover:text-primary-200",
+        white: "border-grey-200 bg-white hover:bg-grey-50 hover:font-bold hover:text-primary-800 dark:border-grey-800 dark:bg-grey-950 dark:hover:bg-grey-800/80 dark:hover:text-primary-200",
+        grey: "border-grey-200 bg-white hover:bg-grey-50 hover:font-bold hover:text-primary-800 dark:border-grey-800 dark:bg-grey-950 dark:hover:bg-grey-800/80 dark:hover:text-primary-200"
+      }
+    },
+    defaultVariants: {
+      variant: "grey"
+    }
+  }
+);
+var navigationMenuMainNavigationSectionLinkTitleStyles = cva("text-base font-semibold", {
+  variants: {
+    variant: {
+      primary: "text-grey-900 dark:text-primary-50",
+      secondary: "text-grey-900 dark:text-grey-100",
+      tertiary: "text-grey-900 dark:text-primary-50",
+      white: "text-grey-900 dark:text-white",
+      grey: "text-grey-900 dark:text-grey-100"
+    }
+  },
+  defaultVariants: {
+    variant: "grey"
+  }
+});
 var PANEL_CLOSE_DELAY_MS = 220;
-var DEFAULT_TRIGGER_ACTIVE_CLASS_NAME = "hover:bg-primary-800/10 hover:text-primary-800 focus:bg-primary-800/10 focus:text-primary-800 data-[state=open]:bg-primary-800/10 data-[state=open]:text-primary-800 dark:hover:bg-primary-200/10 dark:hover:text-primary-200 dark:focus:bg-primary-200/10 dark:focus:text-primary-200 dark:data-[state=open]:bg-primary-200/10 dark:data-[state=open]:text-primary-200";
-var DEFAULT_TRIGGER_ACTIVE_BORDER_CLASS_NAME = "hover:before:bg-primary-800/10 hover:after:bg-primary-800/10 focus:before:bg-primary-800/10 focus:after:bg-primary-800/10 data-[state=open]:before:bg-primary-800/10 dark:hover:before:bg-primary-200/10 dark:hover:after:bg-primary-200/10 dark:focus:before:bg-primary-200/10 dark:focus:after:bg-primary-200/10 dark:data-[state=open]:before:bg-primary-200/10";
 function TopLevelItem({
   href = "#",
   title,
+  variant,
   syncBorderToSurface,
+  triggerClassName,
   triggerActiveClassName,
   triggerActiveBorderClassName
 }) {
@@ -29177,21 +29726,30 @@ function TopLevelItem({
     {
       asChild: true,
       className: cn(
-        "relative inline-flex min-h-14 h-auto w-auto flex-row items-center justify-start gap-x-1 rounded-none bg-transparent p-4 text-base leading-6 font-bold text-grey-800 transition dark:text-grey-100 lg:px-8",
-        triggerActiveClassName ?? DEFAULT_TRIGGER_ACTIVE_CLASS_NAME,
+        "relative inline-flex h-auto min-h-14 w-auto flex-row items-center justify-start gap-x-1 rounded-none bg-transparent p-4 text-base leading-6 font-bold transition lg:px-8",
+        navigationMenuMainNavigationTriggerToneStyles({ variant }),
+        navigationMenuMainNavigationTriggerActiveStyles({ variant }),
+        triggerClassName,
+        triggerActiveClassName,
         syncBorderToSurface && "before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-transparent after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-transparent",
-        syncBorderToSurface && (triggerActiveBorderClassName ?? DEFAULT_TRIGGER_ACTIVE_BORDER_CLASS_NAME)
+        syncBorderToSurface && navigationMenuMainNavigationTriggerEdgeStyles({ variant }),
+        syncBorderToSurface && triggerActiveBorderClassName
       ),
       children: /* @__PURE__ */ jsx(Link14, { href, children: title })
     }
   ) });
 }
-function FeaturedSectionLink({ href = "#", title }) {
+function FeaturedSectionLink({
+  href = "#",
+  title,
+  variant,
+  className
+}) {
   return /* @__PURE__ */ jsxs(
     Link14,
     {
       href,
-      className: "group relative flex items-center px-8 py-8 text-xl font-bold whitespace-normal text-primary-800 hover:bg-primary-800/10 dark:text-primary-200 dark:hover:bg-primary-200/10",
+      className: cn(navigationMenuMainNavigationFeaturedLinkStyles({ variant }), className),
       children: [
         /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "absolute inset-0" }),
         title,
@@ -29200,33 +29758,47 @@ function FeaturedSectionLink({ href = "#", title }) {
     }
   );
 }
-function SectionLink({ link }) {
+function SectionLink({
+  link,
+  variant,
+  className,
+  titleClassName
+}) {
   return /* @__PURE__ */ jsx(
     NavigationMenuLink,
     {
       asChild: true,
-      className: cn(
-        "relative mx-2 rounded-none border-t border-grey-200 bg-white p-4 hover:bg-primary-800/10 hover:font-bold hover:text-primary-800 dark:border-grey-700 dark:bg-grey-900 dark:hover:bg-primary-200/10 dark:hover:text-primary-200",
-        "[&:nth-last-child(-n+3)]:border-b",
-        "whitespace-normal",
-        "focus-within:rounded-sm focus-within:outline focus-within:outline-inherit"
-      ),
+      className: cn(navigationMenuMainNavigationSectionLinkStyles({ variant }), className),
       children: /* @__PURE__ */ jsxs(Link14, { href: link.href, className: "outline-none", children: [
         /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "absolute inset-0" }),
-        /* @__PURE__ */ jsx("span", { className: "text-base font-semibold text-grey-900 dark:text-grey-100", children: link.title })
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              navigationMenuMainNavigationSectionLinkTitleStyles({ variant }),
+              titleClassName
+            ),
+            children: link.title
+          }
+        )
       ] })
     }
   );
 }
 function MegaNavigationItem({
   section,
+  variant,
   fullBleed,
   panelMetrics,
   onOpenIntent,
   dropdownBackgroundClassName,
   syncBorderToSurface,
+  triggerClassName,
   triggerActiveClassName,
-  triggerActiveBorderClassName
+  triggerActiveBorderClassName,
+  featuredLinkClassName,
+  sectionLinkClassName,
+  sectionLinkTitleClassName
 }) {
   if (!section.links?.length) {
     return /* @__PURE__ */ jsx(
@@ -29234,7 +29806,9 @@ function MegaNavigationItem({
       {
         href: section.href,
         title: section.title,
+        variant,
         syncBorderToSurface,
+        triggerClassName,
         triggerActiveClassName,
         triggerActiveBorderClassName
       }
@@ -29245,11 +29819,15 @@ function MegaNavigationItem({
       NavigationMenuTrigger,
       {
         className: cn(
-          "relative mb-0 min-h-14 h-auto w-auto justify-start rounded-none bg-transparent p-4 text-base leading-6 font-bold text-grey-800 lg:px-8 dark:text-grey-100 [&_svg]:h-6 [&_svg]:w-6",
-          triggerActiveClassName ?? DEFAULT_TRIGGER_ACTIVE_CLASS_NAME,
+          "relative mb-0 h-auto min-h-14 w-auto justify-start rounded-none bg-transparent p-4 text-base leading-6 font-bold lg:px-8 [&_svg]:h-6 [&_svg]:w-6",
+          navigationMenuMainNavigationTriggerToneStyles({ variant }),
+          navigationMenuMainNavigationTriggerActiveStyles({ variant }),
+          triggerClassName,
+          triggerActiveClassName,
           "data-[state=open]:shadow-[inset_0_-2px_0_0_currentColor]",
           syncBorderToSurface && "before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-transparent after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-transparent",
-          syncBorderToSurface && (triggerActiveBorderClassName ?? DEFAULT_TRIGGER_ACTIVE_BORDER_CLASS_NAME)
+          syncBorderToSurface && navigationMenuMainNavigationTriggerEdgeStyles({ variant }),
+          syncBorderToSurface && triggerActiveBorderClassName
         ),
         onPointerEnter: onOpenIntent,
         children: section.title
@@ -29259,7 +29837,7 @@ function MegaNavigationItem({
       NavigationMenuContent,
       {
         className: cn(
-          "left-0 w-full p-0 pr-0 whitespace-normal md:w-full group-data-[viewport=false]/navigation-menu:mt-0 group-data-[viewport=false]/navigation-menu:rounded-none group-data-[viewport=false]/navigation-menu:border-0 group-data-[viewport=false]/navigation-menu:bg-transparent group-data-[viewport=false]/navigation-menu:shadow-none"
+          "left-0 w-full p-0 pr-0 whitespace-normal group-data-[viewport=false]/navigation-menu:mt-0 group-data-[viewport=false]/navigation-menu:rounded-none group-data-[viewport=false]/navigation-menu:border-0 group-data-[viewport=false]/navigation-menu:bg-transparent group-data-[viewport=false]/navigation-menu:shadow-none md:w-full"
         ),
         style: fullBleed && panelMetrics ? {
           left: `${-panelMetrics.left}px`,
@@ -29270,8 +29848,8 @@ function MegaNavigationItem({
           "div",
           {
             className: cn(
-              "w-full shadow dark:shadow-black/40",
-              dropdownBackgroundClassName ?? "bg-white dark:bg-grey-900"
+              navigationMenuMainNavigationDropdownSurfaceStyles({ variant }),
+              dropdownBackgroundClassName
             ),
             children: /* @__PURE__ */ jsxs(
               "div",
@@ -29283,8 +29861,25 @@ function MegaNavigationItem({
                   marginRight: "auto"
                 } : void 0,
                 children: [
-                  /* @__PURE__ */ jsx(FeaturedSectionLink, { href: section.href, title: section.title }),
-                  /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 overflow-hidden px-4 pb-12 sm:grid-cols-2 lg:grid-cols-3", children: section.links.map((link, index) => /* @__PURE__ */ jsx(SectionLink, { link }, `${link.title}-${link.href}-${index}`)) })
+                  /* @__PURE__ */ jsx(
+                    FeaturedSectionLink,
+                    {
+                      href: section.href,
+                      title: section.title,
+                      variant,
+                      className: featuredLinkClassName
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 overflow-hidden px-4 pb-12 sm:grid-cols-2 lg:grid-cols-3", children: section.links.map((link, index) => /* @__PURE__ */ jsx(
+                    SectionLink,
+                    {
+                      link,
+                      variant,
+                      className: sectionLinkClassName,
+                      titleClassName: sectionLinkTitleClassName
+                    },
+                    `${link.title}-${link.href}-${index}`
+                  )) })
                 ]
               }
             )
@@ -29297,6 +29892,8 @@ function MegaNavigationItem({
 function NavigationMenuMainNavigation({
   navigation,
   id: id3 = "nsw-main-navigation",
+  variant = "grey",
+  borderPosition = "none",
   className,
   responsive = true,
   sticky = true,
@@ -29304,8 +29901,12 @@ function NavigationMenuMainNavigation({
   backgroundClassName,
   dropdownBackgroundClassName,
   borderClassName,
+  triggerClassName,
   triggerActiveClassName,
   triggerActiveBorderClassName,
+  featuredLinkClassName,
+  sectionLinkClassName,
+  sectionLinkTitleClassName,
   showTopBorder = false,
   showBottomBorder = false
 }) {
@@ -29313,14 +29914,19 @@ function NavigationMenuMainNavigation({
   const containerRef = React5.useRef(null);
   const closeTimerRef = React5.useRef(null);
   const [value, setValue] = React5.useState("");
-  const syncBorderToSurface = showTopBorder || showBottomBorder;
+  const hasLegacyBorderProps = showTopBorder || showBottomBorder;
+  const resolvedBorderPosition = borderPosition !== "none" ? borderPosition : showTopBorder && showBottomBorder ? "both" : showTopBorder ? "top" : showBottomBorder ? "bottom" : "none";
+  const hasTopBorder = resolvedBorderPosition === "top" || resolvedBorderPosition === "both";
+  const hasBottomBorder = resolvedBorderPosition === "bottom" || resolvedBorderPosition === "both";
+  const hasBorder = hasTopBorder || hasBottomBorder;
+  const syncBorderToSurface = hasBorder;
   const [panelMetrics, setPanelMetrics] = React5.useState({
     left: 0,
     width: 0,
     viewportWidth: 0
   });
   const cancelCloseTimer = React5.useCallback(() => {
-    if (closeTimerRef.current) {
+    if (closeTimerRef.current !== null) {
       window.clearTimeout(closeTimerRef.current);
       closeTimerRef.current = null;
     }
@@ -29352,17 +29958,27 @@ function NavigationMenuMainNavigation({
       cancelCloseTimer();
     };
   }, [cancelCloseTimer]);
-  const handleValueChange = React5.useCallback((nextValue) => {
-    cancelCloseTimer();
-    if (nextValue) {
-      setValue(nextValue);
-      return;
+  React5.useEffect(() => {
+    if (process.env.NODE_ENV !== "production" && borderPosition !== "none" && hasLegacyBorderProps) {
+      console.warn(
+        "NavigationMenuMainNavigation: `borderPosition` overrides deprecated `showTopBorder` / `showBottomBorder` props."
+      );
     }
-    closeTimerRef.current = window.setTimeout(() => {
-      setValue("");
-      closeTimerRef.current = null;
-    }, PANEL_CLOSE_DELAY_MS);
-  }, [cancelCloseTimer]);
+  }, [borderPosition, hasLegacyBorderProps]);
+  const handleValueChange = React5.useCallback(
+    (nextValue) => {
+      cancelCloseTimer();
+      if (nextValue) {
+        setValue(nextValue);
+        return;
+      }
+      closeTimerRef.current = window.setTimeout(() => {
+        setValue("");
+        closeTimerRef.current = null;
+      }, PANEL_CLOSE_DELAY_MS);
+    },
+    [cancelCloseTimer]
+  );
   return /* @__PURE__ */ jsx(
     "nav",
     {
@@ -29371,10 +29987,12 @@ function NavigationMenuMainNavigation({
       id: id3,
       className: cn(
         "z-40 shadow-md shadow-grey-900/5 dark:shadow-none",
-        backgroundClassName ?? "bg-grey-100 dark:bg-grey-900",
-        (showTopBorder || showBottomBorder) && (borderClassName ?? "border-grey-200 dark:border-grey-800"),
-        showTopBorder && "border-t",
-        showBottomBorder && "border-b",
+        navigationMenuMainNavigationSurfaceStyles({ variant }),
+        backgroundClassName,
+        hasBorder && navigationMenuMainNavigationBorderStyles({ variant }),
+        hasBorder && borderClassName,
+        hasTopBorder && "border-t",
+        hasBottomBorder && "border-b",
         responsive ? "hidden sm:px-6 lg:block lg:px-4" : "block",
         sticky && "sticky",
         className
@@ -29397,13 +30015,18 @@ function NavigationMenuMainNavigation({
             MegaNavigationItem,
             {
               section,
+              variant,
               fullBleed,
               panelMetrics,
               onOpenIntent: cancelCloseTimer,
               dropdownBackgroundClassName,
               syncBorderToSurface,
+              triggerClassName,
               triggerActiveClassName,
-              triggerActiveBorderClassName
+              triggerActiveBorderClassName,
+              featuredLinkClassName,
+              sectionLinkClassName,
+              sectionLinkTitleClassName
             },
             `${section.title}-${section.href ?? "section"}`
           )) })
@@ -31794,7 +32417,7 @@ function useActiveSectionObserver(tableOfContents) {
     if (tableOfContents.length === 0) return;
     if (!headerHeight) return;
     const totalHeight = headerHeight + mastheadHeight + navigationHeight;
-    let observer = null;
+    let observer2 = null;
     const initializeObserver = () => {
       const ids = tableOfContents.flatMap((node) => [
         node.id,
@@ -31806,7 +32429,7 @@ function useActiveSectionObserver(tableOfContents) {
           el.style.scrollMarginTop = `${totalHeight + 16}px`;
         }
       });
-      observer = new IntersectionObserver(
+      observer2 = new IntersectionObserver(
         (entries) => {
           const visible = entries.filter((entry) => entry.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
           if (visible.length > 0) {
@@ -31820,14 +32443,14 @@ function useActiveSectionObserver(tableOfContents) {
       );
       ids.forEach((id3) => {
         const el = document.getElementById(id3);
-        if (el) observer.observe(el);
+        if (el) observer2.observe(el);
       });
     };
     const raf = requestAnimationFrame(() => {
       initializeObserver();
     });
     return () => {
-      if (observer) observer.disconnect();
+      if (observer2) observer2.disconnect();
       cancelAnimationFrame(raf);
     };
   }, [tableOfContents, headerHeight, mastheadHeight, navigationHeight]);