@eightshift/ui-components 1.3.2 → 1.4.1

package/dist/components/animated-visibility/animated-visibility.js

@@ -8,7 +8,7 @@ const MotionConfigContext = createContext({
 });
 const MotionContext = createContext({});
 const PresenceContext = createContext(null);
-const isBrowser = typeof document !== "undefined";
+const isBrowser = typeof window !== "undefined";
 const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
 const LazyContext = createContext({ strict: false });
 const camelToDash = (str) => str.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase();
@@ -18,37 +18,24 @@ const MotionGlobalConfig = {
   skipAnimations: false,
   useManualTiming: false
 };
-class Queue {
-  constructor() {
-    this.order = [];
-    this.scheduled = /* @__PURE__ */ new Set();
-  }
-  add(process2) {
-    if (!this.scheduled.has(process2)) {
-      this.scheduled.add(process2);
-      this.order.push(process2);
-      return true;
-    }
-  }
-  remove(process2) {
-    const index = this.order.indexOf(process2);
-    if (index !== -1) {
-      this.order.splice(index, 1);
-      this.scheduled.delete(process2);
-    }
-  }
-  clear() {
-    this.order.length = 0;
-    this.scheduled.clear();
-  }
-}
 function createRenderStep(runNextFrame) {
-  let thisFrame = new Queue();
-  let nextFrame = new Queue();
-  let numToRun = 0;
+  let thisFrame = /* @__PURE__ */ new Set();
+  let nextFrame = /* @__PURE__ */ new Set();
   let isProcessing = false;
   let flushNextFrame = false;
   const toKeepAlive = /* @__PURE__ */ new WeakSet();
+  let latestFrameData = {
+    delta: 0,
+    timestamp: 0,
+    isProcessing: false
+  };
+  function triggerCallback(callback) {
+    if (toKeepAlive.has(callback)) {
+      step.schedule(callback);
+      runNextFrame();
+    }
+    callback(latestFrameData);
+  }
   const step = {
     /**
      * Schedule a process to run on the next frame.
@@ -58,22 +45,22 @@ function createRenderStep(runNextFrame) {
       const queue = addToCurrentFrame ? thisFrame : nextFrame;
       if (keepAlive)
         toKeepAlive.add(callback);
-      if (queue.add(callback) && addToCurrentFrame && isProcessing) {
-        numToRun = thisFrame.order.length;
-      }
+      if (!queue.has(callback))
+        queue.add(callback);
       return callback;
     },
     /**
      * Cancel the provided callback from running on the next frame.
      */
     cancel: (callback) => {
-      nextFrame.remove(callback);
+      nextFrame.delete(callback);
       toKeepAlive.delete(callback);
     },
     /**
      * Execute all schedule callbacks.
      */
     process: (frameData2) => {
+      latestFrameData = frameData2;
       if (isProcessing) {
         flushNextFrame = true;
         return;
@@ -81,17 +68,7 @@ function createRenderStep(runNextFrame) {
       isProcessing = true;
       [thisFrame, nextFrame] = [nextFrame, thisFrame];
       nextFrame.clear();
-      numToRun = thisFrame.order.length;
-      if (numToRun) {
-        for (let i = 0; i < numToRun; i++) {
-          const callback = thisFrame.order[i];
-          if (toKeepAlive.has(callback)) {
-            step.schedule(callback);
-            runNextFrame();
-          }
-          callback(frameData2);
-        }
-      }
+      thisFrame.forEach(triggerCallback);
       isProcessing = false;
       if (flushNextFrame) {
         flushNextFrame = false;
@@ -124,20 +101,24 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     timestamp: 0,
     isProcessing: false
   };
+  const flagRunNextFrame = () => runNextFrame = true;
   const steps2 = stepsOrder.reduce((acc, key) => {
-    acc[key] = createRenderStep(() => runNextFrame = true);
+    acc[key] = createRenderStep(flagRunNextFrame);
     return acc;
   }, {});
-  const processStep = (stepId) => {
-    steps2[stepId].process(state);
-  };
+  const { read, resolveKeyframes, update, preRender, render, postRender } = steps2;
   const processBatch = () => {
     const timestamp = performance.now();
     runNextFrame = false;
     state.delta = useDefaultElapsed ? 1e3 / 60 : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);
     state.timestamp = timestamp;
     state.isProcessing = true;
-    stepsOrder.forEach(processStep);
+    read.process(state);
+    resolveKeyframes.process(state);
+    update.process(state);
+    preRender.process(state);
+    render.process(state);
+    postRender.process(state);
     state.isProcessing = false;
     if (runNextFrame && allowKeepAlive) {
       useDefaultElapsed = false;
@@ -160,7 +141,11 @@ function createRenderBatcher(scheduleNextBatch, allowKeepAlive) {
     };
     return acc;
   }, {});
-  const cancel = (process2) => stepsOrder.forEach((key) => steps2[key].cancel(process2));
+  const cancel = (process2) => {
+    for (let i = 0; i < stepsOrder.length; i++) {
+      steps2[stepsOrder[i]].cancel(process2);
+    }
+  };
   return { schedule, cancel, state, steps: steps2 };
 }
 const { schedule: microtask, cancel: cancelMicrotask } = createRenderBatcher(queueMicrotask, false);
@@ -231,7 +216,6 @@ function createProjectionNode$1(visualElement, props, ProjectionNodeConstructor,
     layout: layout2,
     alwaysMeasureLayout: Boolean(drag2) || dragConstraints && isRefObject(dragConstraints),
     visualElement,
-    scheduleRender: () => visualElement.scheduleRender(),
     /**
      * TODO: Update options in an effect. This could be tricky as it'll be too late
      * to update by the time layout animations run.
@@ -521,7 +505,7 @@ const translateAlias = {
   transformPerspective: "perspective"
 };
 const numTransforms = transformPropOrder.length;
-function buildTransform(transform, { enableHardwareAcceleration = true, allowTransformNone = true }, transformIsDefault, transformTemplate) {
+function buildTransform(transform, transformIsDefault, transformTemplate) {
   let transformString = "";
   for (let i = 0; i < numTransforms; i++) {
     const key = transformPropOrder[i];
@@ -530,13 +514,10 @@ function buildTransform(transform, { enableHardwareAcceleration = true, allowTra
       transformString += `${transformName}(${transform[key]}) `;
     }
   }
-  if (enableHardwareAcceleration && !transform.z) {
-    transformString += "translateZ(0)";
-  }
   transformString = transformString.trim();
   if (transformTemplate) {
     transformString = transformTemplate(transform, transformIsDefault ? "" : transformString);
-  } else if (allowTransformNone && transformIsDefault) {
+  } else if (transformIsDefault) {
     transformString = "none";
   }
   return transformString;
@@ -581,6 +562,9 @@ const singleColorRegex = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){
 function isString(v) {
   return typeof v === "string";
 }
+function isNullish(v) {
+  return v == null;
+}
 const createUnitType = (unit) => ({
   test: (v) => isString(v) && v.endsWith(unit) && v.split(" ").length === 1,
   parse: parseFloat,
@@ -668,7 +652,7 @@ const numberValueTypes = {
   strokeOpacity: alpha,
   numOctaves: int
 };
-function buildHTMLStyles(state, latestValues, options, transformTemplate) {
+function buildHTMLStyles(state, latestValues, transformTemplate) {
   const { style, vars, transform, transformOrigin } = state;
   let hasTransform2 = false;
   let hasTransformOrigin = false;
@@ -697,7 +681,7 @@ function buildHTMLStyles(state, latestValues, options, transformTemplate) {
   }
   if (!latestValues.transform) {
     if (hasTransform2 || transformTemplate) {
-      style.transform = buildTransform(state.transform, options, transformIsNone, transformTemplate);
+      style.transform = buildTransform(state.transform, transformIsNone, transformTemplate);
     } else if (style.transform) {
       style.transform = "none";
     }
@@ -720,23 +704,23 @@ function copyRawValuesOnly(target, source, props) {
     }
   }
 }
-function useInitialMotionValues({ transformTemplate }, visualState, isStatic) {
+function useInitialMotionValues({ transformTemplate }, visualState) {
   return useMemo(() => {
     const state = createHtmlRenderState();
-    buildHTMLStyles(state, visualState, { enableHardwareAcceleration: !isStatic }, transformTemplate);
+    buildHTMLStyles(state, visualState, transformTemplate);
     return Object.assign({}, state.vars, state.style);
   }, [visualState]);
 }
-function useStyle(props, visualState, isStatic) {
+function useStyle(props, visualState) {
   const styleProp = props.style || {};
   const style = {};
   copyRawValuesOnly(style, styleProp, props);
-  Object.assign(style, useInitialMotionValues(props, visualState, isStatic));
+  Object.assign(style, useInitialMotionValues(props, visualState));
   return style;
 }
-function useHTMLProps(props, visualState, isStatic) {
+function useHTMLProps(props, visualState) {
   const htmlProps = {};
-  const style = useStyle(props, visualState, isStatic);
+  const style = useStyle(props, visualState);
   if (props.drag && props.dragListener !== false) {
     htmlProps.draggable = false;
     style.userSelect = style.WebkitUserSelect = style.WebkitTouchCallout = "none";
@@ -840,8 +824,8 @@ function buildSVGAttrs(state, {
   pathOffset = 0,
   // This is object creation, which we try to avoid per-frame.
   ...latest
-}, options, isSVGTag2, transformTemplate) {
-  buildHTMLStyles(state, latest, options, transformTemplate);
+}, isSVGTag2, transformTemplate) {
+  buildHTMLStyles(state, latest, transformTemplate);
   if (isSVGTag2) {
     if (state.style.viewBox) {
       state.attrs.viewBox = state.style.viewBox;
@@ -877,7 +861,7 @@ const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg"
 function useSVGProps(props, visualState, _isStatic, Component2) {
   const visualProps = useMemo(() => {
     const state = createSvgRenderState();
-    buildSVGAttrs(state, visualState, { enableHardwareAcceleration: false }, isSVGTag(Component2), props.transformTemplate);
+    buildSVGAttrs(state, visualState, isSVGTag(Component2), props.transformTemplate);
     return {
       ...state.attrs,
       style: { ...state.style }
@@ -951,6 +935,9 @@ function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
       newValues[key] = style[key];
     }
   }
+  if (visualElement && style && typeof style.willChange === "string") {
+    visualElement.applyWillChange = false;
+  }
   return newValues;
 }
 function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
@@ -1005,9 +992,34 @@ function resolveMotionValue(value) {
   const unwrappedValue = isMotionValue(value) ? value.get() : value;
   return isCustomValue(unwrappedValue) ? unwrappedValue.toValue() : unwrappedValue;
 }
-function makeState({ scrapeMotionValuesFromProps: scrapeMotionValuesFromProps2, createRenderState, onMount }, props, context, presenceContext) {
+const acceleratedValues = /* @__PURE__ */ new Set([
+  "opacity",
+  "clipPath",
+  "filter",
+  "transform"
+  // 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"
+]);
+function getWillChangeName(name) {
+  if (transformProps.has(name)) {
+    return "transform";
+  } else if (acceleratedValues.has(name)) {
+    return camelToDash(name);
+  }
+}
+function addUniqueItem(arr, item) {
+  if (arr.indexOf(item) === -1)
+    arr.push(item);
+}
+function removeItem(arr, item) {
+  const index = arr.indexOf(item);
+  if (index > -1)
+    arr.splice(index, 1);
+}
+function makeState({ applyWillChange = false, scrapeMotionValuesFromProps: scrapeMotionValuesFromProps2, createRenderState, onMount }, props, context, presenceContext, isStatic) {
   const state = {
-    latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps2),
+    latestValues: makeLatestValues(props, context, presenceContext, isStatic ? false : applyWillChange, scrapeMotionValuesFromProps2),
     renderState: createRenderState()
   };
   if (onMount) {
@@ -1018,11 +1030,30 @@ function makeState({ scrapeMotionValuesFromProps: scrapeMotionValuesFromProps2,
 const makeUseVisualState = (config) => (props, isStatic) => {
   const context = useContext(MotionContext);
   const presenceContext = useContext(PresenceContext);
-  const make = () => makeState(config, props, context, presenceContext);
+  const make = () => makeState(config, props, context, presenceContext, isStatic);
   return isStatic ? make() : useConstant(make);
 };
-function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
+function addWillChange(willChange, name) {
+  const memberName = getWillChangeName(name);
+  if (memberName) {
+    addUniqueItem(willChange, memberName);
+  }
+}
+function forEachDefinition(props, definition, callback) {
+  const list = Array.isArray(definition) ? definition : [definition];
+  for (let i = 0; i < list.length; i++) {
+    const resolved = resolveVariantFromProps(props, list[i]);
+    if (resolved) {
+      const { transitionEnd, transition, ...target } = resolved;
+      callback(target, transitionEnd);
+    }
+  }
+}
+function makeLatestValues(props, context, presenceContext, shouldApplyWillChange, scrapeMotionValues) {
+  var _a;
   const values = {};
+  const willChange = [];
+  const applyWillChange = shouldApplyWillChange && ((_a = props.style) === null || _a === void 0 ? void 0 : _a.willChange) === void 0;
   const motionValues = scrapeMotionValues(props, {});
   for (const key in motionValues) {
     values[key] = resolveMotionValue(motionValues[key]);
@@ -1040,12 +1071,7 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
   isInitialAnimationBlocked = isInitialAnimationBlocked || initial === false;
   const variantToSet = isInitialAnimationBlocked ? animate : initial;
   if (variantToSet && typeof variantToSet !== "boolean" && !isAnimationControls(variantToSet)) {
-    const list = Array.isArray(variantToSet) ? variantToSet : [variantToSet];
-    list.forEach((definition) => {
-      const resolved = resolveVariantFromProps(props, definition);
-      if (!resolved)
-        return;
-      const { transitionEnd, transition, ...target } = resolved;
+    forEachDefinition(props, variantToSet, (target, transitionEnd) => {
       for (const key in target) {
         let valueTarget = target[key];
         if (Array.isArray(valueTarget)) {
@@ -1056,10 +1082,23 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
           values[key] = valueTarget;
         }
       }
-      for (const key in transitionEnd)
+      for (const key in transitionEnd) {
         values[key] = transitionEnd[key];
+      }
     });
   }
+  if (applyWillChange) {
+    if (animate && initial !== false && !isAnimationControls(animate)) {
+      forEachDefinition(props, animate, (target) => {
+        for (const key in target) {
+          addWillChange(willChange, key);
+        }
+      });
+    }
+    if (willChange.length) {
+      values.willChange = willChange.join(",");
+    }
+  }
   return values;
 }
 const { schedule: frame, cancel: cancelFrame, state: frameData, steps } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop, true);
@@ -1081,7 +1120,7 @@ const svgMotionConfig = {
         }
       });
       frame.render(() => {
-        buildSVGAttrs(renderState, latestValues, { enableHardwareAcceleration: false }, isSVGTag(instance.tagName), props.transformTemplate);
+        buildSVGAttrs(renderState, latestValues, isSVGTag(instance.tagName), props.transformTemplate);
         renderSVG(instance, renderState);
       });
     }
@@ -1089,6 +1128,7 @@ const svgMotionConfig = {
 };
 const htmlMotionConfig = {
   useVisualState: makeUseVisualState({
+    applyWillChange: true,
     scrapeMotionValuesFromProps: scrapeMotionValuesFromProps$1,
     createRenderState: createHtmlRenderState
   })
@@ -1755,7 +1795,7 @@ class KeyframeResolver {
   }
 }
 const isColorString = (type, testProp) => (v) => {
-  return Boolean(isString(v) && singleColorRegex.test(v) && v.startsWith(type) || testProp && Object.prototype.hasOwnProperty.call(v, testProp));
+  return Boolean(isString(v) && singleColorRegex.test(v) && v.startsWith(type) || testProp && !isNullish(v) && Object.prototype.hasOwnProperty.call(v, testProp));
 };
 const splitColor = (aName, bName, cName) => (v) => {
   if (!isString(v))
@@ -3032,19 +3072,10 @@ function animateStyle(element, valueName, keyframes2, { delay: delay2 = 0, durat
   });
 }
 const supportsWaapi = memo(() => Object.hasOwnProperty.call(Element.prototype, "animate"));
-const acceleratedValues = /* @__PURE__ */ new Set([
-  "opacity",
-  "clipPath",
-  "filter",
-  "transform"
-  // 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"
-]);
 const sampleDelta = 10;
 const maxDuration = 2e4;
 function requiresPregeneratedKeyframes(options) {
-  return options.type === "spring" || options.name === "backgroundColor" || !isWaapiSupportedEasing(options.ease);
+  return options.type === "spring" || !isWaapiSupportedEasing(options.ease);
 }
 function pregenerateKeyframes(keyframes2, options) {
   const sampleAnimation = new MainThreadAnimation({
@@ -3221,6 +3252,8 @@ class AcceleratedAnimation extends BaseAnimation {
       const sampleTime = secondsToMilliseconds(this.time);
       motionValue2.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta);
     }
+    const { onStop } = this.options;
+    onStop && onStop();
     this.cancel();
   }
   complete() {
@@ -3332,7 +3365,7 @@ class GroupPlaybackControls {
     this.runAll("complete");
   }
 }
-const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
+const animateMotionValue = (name, value, target, transition = {}, element, isHandoff, onEnd) => (onComplete) => {
   const valueTransition = getValueTransition(transition, name) || {};
   const delay2 = valueTransition.delay || transition.delay || 0;
   let { elapsed = 0 } = transition;
@@ -3350,7 +3383,9 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
     onComplete: () => {
       onComplete();
       valueTransition.onComplete && valueTransition.onComplete();
+      onEnd && onEnd();
     },
+    onStop: onEnd,
     name,
     motionValue: value,
     element: isHandoff ? void 0 : element
@@ -3393,18 +3428,6 @@ const animateMotionValue = (name, value, target, transition = {}, element, isHan
     return new MainThreadAnimation(options);
   }
 };
-function isWillChangeMotionValue(value) {
-  return Boolean(isMotionValue(value) && value.add);
-}
-function addUniqueItem(arr, item) {
-  if (arr.indexOf(item) === -1)
-    arr.push(item);
-}
-function removeItem(arr, item) {
-  const index = arr.indexOf(item);
-  if (index > -1)
-    arr.splice(index, 1);
-}
 class SubscriptionManager {
   constructor() {
     this.subscriptions = [];
@@ -3454,7 +3477,7 @@ class MotionValue {
    * @internal
    */
   constructor(init, options = {}) {
-    this.version = "11.2.12";
+    this.version = "11.3.17";
     this.canTrackVelocity = null;
     this.events = {};
     this.updateAndNotify = (v, render = true) => {
@@ -3725,6 +3748,55 @@ function setTarget(visualElement, definition) {
 function getOptimisedAppearId(visualElement) {
   return visualElement.getProps()[optimizedAppearDataAttribute];
 }
+class WillChangeMotionValue extends MotionValue {
+  constructor() {
+    super(...arguments);
+    this.output = [];
+    this.counts = /* @__PURE__ */ new Map();
+  }
+  add(name) {
+    const styleName = getWillChangeName(name);
+    if (!styleName)
+      return;
+    const prevCount = this.counts.get(styleName) || 0;
+    this.counts.set(styleName, prevCount + 1);
+    if (prevCount === 0) {
+      this.output.push(styleName);
+      this.update();
+    }
+    let hasRemoved = false;
+    return () => {
+      if (hasRemoved)
+        return;
+      hasRemoved = true;
+      const newCount = this.counts.get(styleName) - 1;
+      this.counts.set(styleName, newCount);
+      if (newCount === 0) {
+        removeItem(this.output, styleName);
+        this.update();
+      }
+    };
+  }
+  update() {
+    this.set(this.output.length ? this.output.join(", ") : "auto");
+  }
+}
+function isWillChangeMotionValue(value) {
+  return Boolean(isMotionValue(value) && value.add);
+}
+function addValueToWillChange(visualElement, key) {
+  var _a;
+  if (!visualElement.applyWillChange)
+    return;
+  let willChange = visualElement.getValue("willChange");
+  if (!willChange && !((_a = visualElement.props.style) === null || _a === void 0 ? void 0 : _a.willChange)) {
+    willChange = new WillChangeMotionValue("auto");
+    visualElement.addValue("willChange", willChange);
+  }
+  if (isWillChangeMotionValue(willChange)) {
+    return willChange.add(key);
+  }
+}
 function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
   const shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== true;
   needsAnimating[key] = false;
@@ -3733,7 +3805,6 @@ function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
 function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0, transitionOverride, type } = {}) {
   var _a;
   let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = targetAndTransition;
-  const willChange = visualElement.getValue("willChange");
   if (transitionOverride)
     transition = transitionOverride;
   const animations2 = [];
@@ -3760,13 +3831,9 @@ function animateTarget(visualElement, targetAndTransition, { delay: delay2 = 0,
         }
       }
     }
-    value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key) ? { type: false } : valueTransition, visualElement, isHandoff));
+    value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key) ? { type: false } : valueTransition, visualElement, isHandoff, addValueToWillChange(visualElement, key)));
     const animation = value.animation;
     if (animation) {
-      if (isWillChangeMotionValue(willChange)) {
-        willChange.add(key);
-        animation.then(() => willChange.remove(key));
-      }
       animations2.push(animation);
     }
   }
@@ -4212,21 +4279,29 @@ function getVelocity(history, timeDelta) {
   }
   return currentVelocity;
 }
+const SCALE_PRECISION = 1e-4;
+const SCALE_MIN = 1 - SCALE_PRECISION;
+const SCALE_MAX = 1 + SCALE_PRECISION;
+const TRANSLATE_PRECISION = 0.01;
+const TRANSLATE_MIN = 0 - TRANSLATE_PRECISION;
+const TRANSLATE_MAX = 0 + TRANSLATE_PRECISION;
 function calcLength(axis) {
   return axis.max - axis.min;
 }
-function isNear(value, target = 0, maxDistance = 0.01) {
+function isNear(value, target, maxDistance) {
   return Math.abs(value - target) <= maxDistance;
 }
 function calcAxisDelta(delta, source, target, origin = 0.5) {
   delta.origin = origin;
   delta.originPoint = mixNumber$1(source.min, source.max, delta.origin);
   delta.scale = calcLength(target) / calcLength(source);
-  if (isNear(delta.scale, 1, 1e-4) || isNaN(delta.scale))
-    delta.scale = 1;
   delta.translate = mixNumber$1(target.min, target.max, delta.origin) - delta.originPoint;
-  if (isNear(delta.translate) || isNaN(delta.translate))
+  if (delta.scale >= SCALE_MIN && delta.scale <= SCALE_MAX || isNaN(delta.scale)) {
+    delta.scale = 1;
+  }
+  if (delta.translate >= TRANSLATE_MIN && delta.translate <= TRANSLATE_MAX || isNaN(delta.translate)) {
     delta.translate = 0;
+  }
 }
 function calcBoxDelta(delta, source, target, origin) {
   calcAxisDelta(delta.x, source.x, target.x, origin ? origin.originX : void 0);
@@ -4397,6 +4472,8 @@ function applyBoxDelta(box, { x, y }) {
   applyAxisDelta(box.x, x.translate, x.scale, x.originPoint);
   applyAxisDelta(box.y, y.translate, y.scale, y.originPoint);
 }
+const TREE_SCALE_SNAP_MIN = 0.999999999999;
+const TREE_SCALE_SNAP_MAX = 1.0000000000001;
 function applyTreeDeltas(box, treeScale, treePath, isSharedTransition = false) {
   const treeLength = treePath.length;
   if (!treeLength)
@@ -4407,8 +4484,8 @@ function applyTreeDeltas(box, treeScale, treePath, isSharedTransition = false) {
   for (let i = 0; i < treeLength; i++) {
     node = treePath[i];
     delta = node.projectionDelta;
-    const instance = node.instance;
-    if (instance && instance.style && instance.style.display === "contents") {
+    const { visualElement } = node.options;
+    if (visualElement && visualElement.props.style && visualElement.props.style.display === "contents") {
       continue;
     }
     if (isSharedTransition && node.options.layoutScroll && node.scroll && node !== node.root) {
@@ -4426,28 +4503,24 @@ function applyTreeDeltas(box, treeScale, treePath, isSharedTransition = false) {
       transformBox(box, node.latestValues);
     }
   }
-  treeScale.x = snapToDefault(treeScale.x);
-  treeScale.y = snapToDefault(treeScale.y);
-}
-function snapToDefault(scale2) {
-  if (Number.isInteger(scale2))
-    return scale2;
-  return scale2 > 1.0000000000001 || scale2 < 0.999999999999 ? scale2 : 1;
+  if (treeScale.x < TREE_SCALE_SNAP_MAX && treeScale.x > TREE_SCALE_SNAP_MIN) {
+    treeScale.x = 1;
+  }
+  if (treeScale.y < TREE_SCALE_SNAP_MAX && treeScale.y > TREE_SCALE_SNAP_MIN) {
+    treeScale.y = 1;
+  }
 }
 function translateAxis(axis, distance2) {
   axis.min = axis.min + distance2;
   axis.max = axis.max + distance2;
 }
-function transformAxis(axis, transforms, [key, scaleKey, originKey]) {
-  const axisOrigin = transforms[originKey] !== void 0 ? transforms[originKey] : 0.5;
+function transformAxis(axis, axisTranslate, axisScale, boxScale, axisOrigin = 0.5) {
   const originPoint = mixNumber$1(axis.min, axis.max, axisOrigin);
-  applyAxisDelta(axis, transforms[key], transforms[scaleKey], originPoint, transforms.scale);
+  applyAxisDelta(axis, axisTranslate, axisScale, originPoint, boxScale);
 }
-const xKeys$1 = ["x", "scaleX", "originX"];
-const yKeys$1 = ["y", "scaleY", "originY"];
 function transformBox(box, transform) {
-  transformAxis(box.x, transform, xKeys$1);
-  transformAxis(box.y, transform, yKeys$1);
+  transformAxis(box.x, transform.x, transform.scaleX, transform.scale, transform.originX);
+  transformAxis(box.y, transform.y, transform.scaleY, transform.scale, transform.originY);
 }
 function measureViewportBox(instance, transformPoint2) {
   return convertBoundingBoxToBox(transformBoxPoints(instance.getBoundingClientRect(), transformPoint2));
@@ -4488,6 +4561,7 @@ class VisualElementDragControls {
       }
     };
     const onStart = (event, info) => {
+      var _a;
       const { drag: drag2, dragPropagation, onDragStart } = this.getProps();
       if (drag2 && !dragPropagation) {
         if (this.openGlobalLock)
@@ -4520,6 +4594,8 @@ class VisualElementDragControls {
       if (onDragStart) {
         frame.postRender(() => onDragStart(event, info));
       }
+      (_a = this.removeWillChange) === null || _a === void 0 ? void 0 : _a.call(this);
+      this.removeWillChange = addValueToWillChange(this.visualElement, "transform");
       const { animationState } = this.visualElement;
       animationState && animationState.setActive("whileDrag", true);
     };
@@ -4559,6 +4635,8 @@ class VisualElementDragControls {
     });
   }
   stop(event, info) {
+    var _a;
+    (_a = this.removeWillChange) === null || _a === void 0 ? void 0 : _a.call(this);
     const isDragging = this.isDragging;
     this.cancel();
     if (!isDragging)
@@ -4670,7 +4748,7 @@ class VisualElementDragControls {
   }
   startAxisValueAnimation(axis, transition) {
     const axisValue = this.getAxisMotionValue(axis);
-    return axisValue.start(animateMotionValue(axis, axisValue, 0, transition, this.visualElement));
+    return axisValue.start(animateMotionValue(axis, axisValue, 0, transition, this.visualElement, false, addValueToWillChange(this.visualElement, axis)));
   }
   stopAnimation() {
     eachAxis((axis) => this.getAxisMotionValue(axis).stop());
@@ -4879,7 +4957,7 @@ function usePresence() {
   const { isPresent, onExitComplete, register } = context;
   const id2 = useId();
   useEffect(() => register(id2), []);
-  const safeToRemove = () => onExitComplete && onExitComplete(id2);
+  const safeToRemove = useCallback(() => onExitComplete && onExitComplete(id2), [id2, onExitComplete]);
   return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
 }
 const globalProjectionState = {
@@ -5098,6 +5176,12 @@ function copyBoxInto(box, originBox) {
   copyAxisInto(box.x, originBox.x);
   copyAxisInto(box.y, originBox.y);
 }
+function copyAxisDeltaInto(delta, originDelta) {
+  delta.translate = originDelta.translate;
+  delta.scale = originDelta.scale;
+  delta.originPoint = originDelta.originPoint;
+  delta.origin = originDelta.origin;
+}
 function removePointDelta(point, translate, scale2, originPoint, boxScale) {
   point -= translate;
   point = scalePoint(point, 1 / scale2, originPoint);
@@ -5135,15 +5219,24 @@ function isAxisDeltaZero(delta) {
 function isDeltaZero(delta) {
   return isAxisDeltaZero(delta.x) && isAxisDeltaZero(delta.y);
 }
+function axisEquals(a, b) {
+  return a.min === b.min && a.max === b.max;
+}
 function boxEquals(a, b) {
-  return a.x.min === b.x.min && a.x.max === b.x.max && a.y.min === b.y.min && a.y.max === b.y.max;
+  return axisEquals(a.x, b.x) && axisEquals(a.y, b.y);
+}
+function axisEqualsRounded(a, b) {
+  return Math.round(a.min) === Math.round(b.min) && Math.round(a.max) === Math.round(b.max);
 }
 function boxEqualsRounded(a, b) {
-  return Math.round(a.x.min) === Math.round(b.x.min) && Math.round(a.x.max) === Math.round(b.x.max) && Math.round(a.y.min) === Math.round(b.y.min) && Math.round(a.y.max) === Math.round(b.y.max);
+  return axisEqualsRounded(a.x, b.x) && axisEqualsRounded(a.y, b.y);
 }
 function aspectRatio(box) {
   return calcLength(box.x) / calcLength(box.y);
 }
+function axisDeltaEquals(a, b) {
+  return a.translate === b.translate && a.scale === b.scale && a.originPoint === b.originPoint;
+}
 class NodeStack {
   constructor() {
     this.members = [];
@@ -5299,11 +5392,6 @@ function delay(callback, timeout) {
   frame.read(checkElapsed, true);
   return () => cancelFrame(checkElapsed);
 }
-function record(data) {
-  if (window.MotionDebug) {
-    window.MotionDebug.record(data);
-  }
-}
 function isSVGElement(element) {
   return element instanceof SVGElement && element.tagName !== "svg";
 }
@@ -5312,16 +5400,17 @@ function animateSingleValue(value, keyframes2, options) {
   motionValue$1.start(animateMotionValue("", motionValue$1, keyframes2, options));
   return motionValue$1.animation;
 }
-const transformAxes = ["", "X", "Y", "Z"];
-const hiddenVisibility = { visibility: "hidden" };
-const animationTarget = 1e3;
-let id = 0;
-const projectionFrameData = {
+const metrics = {
   type: "projectionFrame",
   totalNodes: 0,
   resolvedTargetDeltas: 0,
   recalculatedProjection: 0
 };
+const isDebug = typeof window !== "undefined" && window.MotionDebug !== void 0;
+const transformAxes = ["", "X", "Y", "Z"];
+const hiddenVisibility = { visibility: "hidden" };
+const animationTarget = 1e3;
+let id = 0;
 function resetDistortingTransform(key, visualElement, values, sharedAnimationValues) {
   const { latestValues } = visualElement;
   if (latestValues[key]) {
@@ -5381,13 +5470,18 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       };
       this.updateProjection = () => {
         this.projectionUpdateScheduled = false;
-        projectionFrameData.totalNodes = projectionFrameData.resolvedTargetDeltas = projectionFrameData.recalculatedProjection = 0;
+        if (isDebug) {
+          metrics.totalNodes = metrics.resolvedTargetDeltas = metrics.recalculatedProjection = 0;
+        }
         this.nodes.forEach(propagateDirtyNodes);
         this.nodes.forEach(resolveTargetDelta);
         this.nodes.forEach(calcProjection);
         this.nodes.forEach(cleanDirtyNodes);
-        record(projectionFrameData);
+        if (isDebug) {
+          window.MotionDebug.record(metrics);
+        }
       };
+      this.resolvedRelativeTargetAt = 0;
       this.hasProjected = false;
       this.isVisible = true;
       this.animationProgress = 0;
@@ -5638,11 +5732,13 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         needsMeasurement = false;
       }
       if (needsMeasurement) {
+        const isRoot = checkIsScrollRoot(this.instance);
         this.scroll = {
           animationId: this.root.animationId,
           phase,
-          isRoot: checkIsScrollRoot(this.instance),
-          offset: measureScroll(this.instance)
+          isRoot,
+          offset: measureScroll(this.instance),
+          wasRoot: this.scroll ? this.scroll.isRoot : isRoot
         };
       }
     }
@@ -5676,31 +5772,34 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       };
     }
     measurePageBox() {
+      var _a;
       const { visualElement } = this.options;
       if (!visualElement)
         return createBox();
       const box = visualElement.measureViewportBox();
-      const { scroll } = this.root;
-      if (scroll) {
-        translateAxis(box.x, scroll.offset.x);
-        translateAxis(box.y, scroll.offset.y);
+      const wasInScrollRoot = ((_a = this.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot) || this.path.some(checkNodeWasScrollRoot);
+      if (!wasInScrollRoot) {
+        const { scroll } = this.root;
+        if (scroll) {
+          translateAxis(box.x, scroll.offset.x);
+          translateAxis(box.y, scroll.offset.y);
+        }
       }
       return box;
     }
     removeElementScroll(box) {
+      var _a;
       const boxWithoutScroll = createBox();
       copyBoxInto(boxWithoutScroll, box);
+      if ((_a = this.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot) {
+        return boxWithoutScroll;
+      }
       for (let i = 0; i < this.path.length; i++) {
         const node = this.path[i];
         const { scroll, options } = node;
         if (node !== this.root && scroll && options.layoutScroll) {
-          if (scroll.isRoot) {
+          if (scroll.wasRoot) {
             copyBoxInto(boxWithoutScroll, box);
-            const { scroll: rootScroll } = this.root;
-            if (rootScroll) {
-              translateAxis(boxWithoutScroll.x, -rootScroll.offset.x);
-              translateAxis(boxWithoutScroll.y, -rootScroll.offset.y);
-            }
           }
           translateAxis(boxWithoutScroll.x, scroll.offset.x);
           translateAxis(boxWithoutScroll.y, scroll.offset.y);
@@ -5783,7 +5882,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       this.isTransformDirty || (this.isTransformDirty = lead.isTransformDirty);
       this.isSharedProjectionDirty || (this.isSharedProjectionDirty = lead.isSharedProjectionDirty);
       const isShared = Boolean(this.resumingFrom) || this !== lead;
-      const canSkip = !(forceRecalculation || isShared && this.isSharedProjectionDirty || this.isProjectionDirty || ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty) || this.attemptToResolveRelativeTarget);
+      const canSkip = !(forceRecalculation || isShared && this.isSharedProjectionDirty || this.isProjectionDirty || ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty) || this.attemptToResolveRelativeTarget || this.root.updateBlockedByResize);
       if (canSkip)
         return;
       const { layout: layout2, layoutId } = this.options;
@@ -5836,7 +5935,9 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
           this.relativeParent = this.relativeTarget = void 0;
         }
       }
-      projectionFrameData.resolvedTargetDeltas++;
+      if (isDebug) {
+        metrics.resolvedTargetDeltas++;
+      }
     }
     getClosestProjectingParent() {
       if (!this.parent || hasScale(this.parent.latestValues) || has2DTranslate(this.parent.latestValues)) {
@@ -5884,26 +5985,27 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       }
       const { target } = lead;
       if (!target) {
-        if (this.projectionTransform) {
-          this.projectionDelta = createDelta();
-          this.projectionTransform = "none";
+        if (this.prevProjectionDelta) {
+          this.createProjectionDeltas();
           this.scheduleRender();
         }
         return;
       }
-      if (!this.projectionDelta) {
-        this.projectionDelta = createDelta();
-        this.projectionDeltaWithTransform = createDelta();
+      if (!this.projectionDelta || !this.prevProjectionDelta) {
+        this.createProjectionDeltas();
+      } else {
+        copyAxisDeltaInto(this.prevProjectionDelta.x, this.projectionDelta.x);
+        copyAxisDeltaInto(this.prevProjectionDelta.y, this.projectionDelta.y);
       }
-      const prevProjectionTransform = this.projectionTransform;
       calcBoxDelta(this.projectionDelta, this.layoutCorrected, target, this.latestValues);
-      this.projectionTransform = buildProjectionTransform(this.projectionDelta, this.treeScale);
-      if (this.projectionTransform !== prevProjectionTransform || this.treeScale.x !== prevTreeScaleX || this.treeScale.y !== prevTreeScaleY) {
+      if (this.treeScale.x !== prevTreeScaleX || this.treeScale.y !== prevTreeScaleY || !axisDeltaEquals(this.projectionDelta.x, this.prevProjectionDelta.x) || !axisDeltaEquals(this.projectionDelta.y, this.prevProjectionDelta.y)) {
         this.hasProjected = true;
         this.scheduleRender();
         this.notifyListeners("projectionUpdate", target);
       }
-      projectionFrameData.recalculatedProjection++;
+      if (isDebug) {
+        metrics.recalculatedProjection++;
+      }
     }
     hide() {
       this.isVisible = false;
@@ -5912,7 +6014,8 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
       this.isVisible = true;
     }
     scheduleRender(notifyAll = true) {
-      this.options.scheduleRender && this.options.scheduleRender();
+      var _a;
+      (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.scheduleRender();
       if (notifyAll) {
         const stack = this.getStack();
         stack && stack.scheduleRender();
@@ -5921,6 +6024,11 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         this.resumingFrom = void 0;
       }
     }
+    createProjectionDeltas() {
+      this.prevProjectionDelta = createDelta();
+      this.projectionDelta = createDelta();
+      this.projectionDeltaWithTransform = createDelta();
+    }
     setAnimationOrigin(delta, hasOnlyRelativeTargetChanged = false) {
       const snapshot = this.snapshot;
       const snapshotLatestValues = snapshot ? snapshot.latestValues : {};
@@ -6256,7 +6364,9 @@ function notifyLayoutUpdate(node) {
   node.options.transition = void 0;
 }
 function propagateDirtyNodes(node) {
-  projectionFrameData.totalNodes++;
+  if (isDebug) {
+    metrics.totalNodes++;
+  }
   if (!node.parent)
     return;
   if (!node.isProjecting()) {
@@ -6335,6 +6445,10 @@ function roundBox(box) {
 function shouldAnimatePositionOnly(animationType, snapshot, layout2) {
   return animationType === "position" || animationType === "preserve-aspect" && !isNear(aspectRatio(snapshot), aspectRatio(layout2), 0.2);
 }
+function checkNodeWasScrollRoot(node) {
+  var _a;
+  return node !== node.root && ((_a = node.scroll) === null || _a === void 0 ? void 0 : _a.wasRoot);
+}
 const DocumentProjectionNode = createProjectionNode({
   attachResizeListener: (ref, notify) => addDomEvent(ref, "resize", notify),
   measureScroll: () => ({
@@ -6391,23 +6505,16 @@ function initPrefersReducedMotion() {
   }
 }
 function updateMotionValuesFromProps(element, next, prev) {
-  const { willChange } = next;
   for (const key in next) {
     const nextValue = next[key];
     const prevValue = prev[key];
     if (isMotionValue(nextValue)) {
       element.addValue(key, nextValue);
-      if (isWillChangeMotionValue(willChange)) {
-        willChange.add(key);
-      }
       if (process.env.NODE_ENV === "development") {
-        warnOnce(nextValue.version === "11.2.12", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.2.12 may not work as expected.`);
+        warnOnce(nextValue.version === "11.3.17", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.3.17 may not work as expected.`);
       }
     } else if (isMotionValue(prevValue)) {
       element.addValue(key, motionValue(nextValue, { owner: element }));
-      if (isWillChangeMotionValue(willChange)) {
-        willChange.remove(key);
-      }
     } else if (prevValue !== nextValue) {
       if (element.hasValue(key)) {
         const existingValue = element.getValue(key);
@@ -6453,6 +6560,7 @@ class VisualElement {
     return {};
   }
   constructor({ parent, props, presenceContext, reducedMotionConfig, blockInitialAnimation, visualState }, options = {}) {
+    this.applyWillChange = false;
     this.resolveKeyframes = (keyframes2, onComplete, name, value) => {
       return new this.KeyframeResolver(keyframes2, onComplete, name, value, this);
     };
@@ -6470,12 +6578,19 @@ class VisualElement {
     this.propEventSubscriptions = {};
     this.notifyUpdate = () => this.notify("Update", this.latestValues);
     this.render = () => {
+      this.isRenderScheduled = false;
       if (!this.current)
         return;
       this.triggerBuild();
       this.renderInstance(this.current, this.renderState, this.props.style, this.projection);
     };
-    this.scheduleRender = () => frame.render(this.render, false, true);
+    this.isRenderScheduled = false;
+    this.scheduleRender = () => {
+      if (!this.isRenderScheduled) {
+        this.isRenderScheduled = true;
+        frame.render(this.render, false, true);
+      }
+    };
     const { latestValues, renderState } = visualState;
     this.latestValues = latestValues;
     this.baseTarget = { ...latestValues };
@@ -6499,9 +6614,6 @@ class VisualElement {
       const value = initialMotionValues[key];
       if (latestValues[key] !== void 0 && isMotionValue(value)) {
         value.set(latestValues[key], false);
-        if (isWillChangeMotionValue(willChange)) {
-          willChange.add(key);
-        }
       }
     }
   }
@@ -6591,7 +6703,7 @@ class VisualElement {
     }
   }
   triggerBuild() {
-    this.build(this.renderState, this.latestValues, this.options, this.props);
+    this.build(this.renderState, this.latestValues, this.props);
   }
   /**
    * Measure the current viewport box with or without transforms.
@@ -6813,6 +6925,8 @@ class HTMLVisualElement extends DOMVisualElement {
   constructor() {
     super(...arguments);
     this.type = "html";
+    this.applyWillChange = true;
+    this.renderInstance = renderHTML;
   }
   readValueFromInstance(instance, key) {
     if (transformProps.has(key)) {
@@ -6827,8 +6941,8 @@ class HTMLVisualElement extends DOMVisualElement {
   measureInstanceViewportBox(instance, { transformPagePoint }) {
     return measureViewportBox(instance, transformPagePoint);
   }
-  build(renderState, latestValues, options, props) {
-    buildHTMLStyles(renderState, latestValues, options, props.transformTemplate);
+  build(renderState, latestValues, props) {
+    buildHTMLStyles(renderState, latestValues, props.transformTemplate);
   }
   scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     return scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
@@ -6846,15 +6960,13 @@ class HTMLVisualElement extends DOMVisualElement {
       });
     }
   }
-  renderInstance(instance, renderState, styleProp, projection) {
-    renderHTML(instance, renderState, styleProp, projection);
-  }
 }
 class SVGVisualElement extends DOMVisualElement {
   constructor() {
     super(...arguments);
     this.type = "svg";
     this.isSVGTag = false;
+    this.measureInstanceViewportBox = createBox;
   }
   getBaseTargetFromProps(props, key) {
     return props[key];
@@ -6867,14 +6979,11 @@ class SVGVisualElement extends DOMVisualElement {
     key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;
     return instance.getAttribute(key);
   }
-  measureInstanceViewportBox() {
-    return createBox();
-  }
   scrapeMotionValuesFromProps(props, prevProps, visualElement) {
     return scrapeMotionValuesFromProps(props, prevProps, visualElement);
   }
-  build(renderState, latestValues, options, props) {
-    buildSVGAttrs(renderState, latestValues, options, this.isSVGTag, props.transformTemplate);
+  build(renderState, latestValues, props) {
+    buildSVGAttrs(renderState, latestValues, this.isSVGTag, props.transformTemplate);
   }
   renderInstance(instance, renderState, styleProp, projection) {
     renderSVG(instance, renderState, styleProp, projection);
@@ -6885,9 +6994,8 @@ class SVGVisualElement extends DOMVisualElement {
   }
 }
 const createDomVisualElement = (Component2, options) => {
-  return isSVGComponent(Component2) ? new SVGVisualElement(options, { enableHardwareAcceleration: false }) : new HTMLVisualElement(options, {
-    allowProjection: Component2 !== Fragment,
-    enableHardwareAcceleration: true
+  return isSVGComponent(Component2) ? new SVGVisualElement(options) : new HTMLVisualElement(options, {
+    allowProjection: Component2 !== Fragment
   });
 };
 const layout = {
@@ -7130,7 +7238,7 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi
  *
  * @returns {JSX.Element} The AnimatedVisibility component.
  *
- * @typedef {'slideFade' |'scaleFade' | 'scaleRotateFade'} ElementTransition
+ * @typedef {'fade' | 'slideFade' |'scaleFade' | 'scaleRotateFade'} ElementTransition
  *
  * @example
  * const [visible, setVisible] = useState(false);
@@ -7144,6 +7252,11 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi
 const AnimatedVisibility = (props) => {
   const { visible, className, children, noInitial = false, transition = "slideFade", ...other } = props;
   const transitions = {
+    fade: {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 }
+    },
     slideFade: {
       initial: { opacity: 0, y: -5 },
       animate: { opacity: 1, y: 0 },