@eightshift/ui-components 6.0.8 → 6.0.10

package/dist/{proxy-DkQpcQgI.js → proxy-CcjltLEW.js}

@@ -35,7 +35,7 @@ let warning = () => {
 };
 let invariant = () => {
 };
-if (process.env.NODE_ENV !== "production") {
+if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") {
   warning = (check, message, errorCode) => {
     if (!check && typeof console !== "undefined") {
       console.warn(formatErrorMessage(message, errorCode));
@@ -341,6 +341,11 @@ const isCSSVariableToken = (value) => {
   return singleCssVariableRegex.test(value.split("/*")[0].trim());
 };
 const singleCssVariableRegex = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu;
+function containsCSSVariable(value) {
+  if (typeof value !== "string")
+    return false;
+  return value.split("/*")[0].includes("var(--");
+}
 const number = {
   test: (v) => typeof v === "number",
   parse: parseFloat,
@@ -1717,6 +1722,7 @@ class NativeAnimation extends WithPromise {
     super();
     this.finishedTime = null;
     this.isStopped = false;
+    this.manualStartTime = null;
     if (!options)
       return;
     const { element, name, keyframes: keyframes2, pseudoElement, allowFlatten = false, finalKeyframe, onComplete } = options;
@@ -1747,6 +1753,7 @@ class NativeAnimation extends WithPromise {
   play() {
     if (this.isStopped)
       return;
+    this.manualStartTime = null;
     this.animation.play();
     if (this.state === "finished") {
       this.updateFinished();
@@ -1809,6 +1816,7 @@ class NativeAnimation extends WithPromise {
     return /* @__PURE__ */ millisecondsToSeconds(Number(this.animation.currentTime) || 0);
   }
   set time(newTime) {
+    this.manualStartTime = null;
     this.finishedTime = null;
     this.animation.currentTime = /* @__PURE__ */ secondsToMilliseconds(newTime);
   }
@@ -1828,10 +1836,10 @@ class NativeAnimation extends WithPromise {
     return this.finishedTime !== null ? "finished" : this.animation.playState;
   }
   get startTime() {
-    return Number(this.animation.startTime);
+    return this.manualStartTime ?? Number(this.animation.startTime);
   }
   set startTime(newStartTime) {
-    this.animation.startTime = newStartTime;
+    this.manualStartTime = this.animation.startTime = newStartTime;
   }
   /**
    * Attaches a timeline to the animation, for instance the `ScrollTimeline`.
@@ -1868,7 +1876,7 @@ class NativeAnimationExtended extends NativeAnimation {
     replaceStringEasing(options);
     replaceTransitionType(options);
     super(options);
-    if (options.startTime) {
+    if (options.startTime !== void 0) {
       this.startTime = options.startTime;
     }
     this.options = options;
@@ -1876,7 +1884,7 @@ class NativeAnimationExtended extends NativeAnimation {
   /**
    * WAAPI doesn't natively have any interruption capabilities.
    *
-   * Rather than read commited styles back out of the DOM, we can
+   * Rather than read committed styles back out of the DOM, we can
    * create a renderless JS animation and sample it twice to calculate
    * its current value, "previous" value, and therefore allow
    * Motion to calculate velocity for any subsequent animation.
@@ -1893,8 +1901,9 @@ class NativeAnimationExtended extends NativeAnimation {
       ...options,
       autoplay: false
     });
-    const sampleTime = /* @__PURE__ */ secondsToMilliseconds(this.finishedTime ?? this.time);
-    motionValue2.setWithVelocity(sampleAnimation.sample(sampleTime - sampleDelta).value, sampleAnimation.sample(sampleTime).value, sampleDelta);
+    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);
     sampleAnimation.stop();
   }
 }
@@ -2210,17 +2219,36 @@ const numberValueTypes = {
   right: px,
   bottom: px,
   left: px,
+  inset: px,
+  insetBlock: px,
+  insetBlockStart: px,
+  insetBlockEnd: px,
+  insetInline: px,
+  insetInlineStart: px,
+  insetInlineEnd: px,
   // Spacing props
   padding: px,
   paddingTop: px,
   paddingRight: px,
   paddingBottom: px,
   paddingLeft: px,
+  paddingBlock: px,
+  paddingBlockStart: px,
+  paddingBlockEnd: px,
+  paddingInline: px,
+  paddingInlineStart: px,
+  paddingInlineEnd: px,
   margin: px,
   marginTop: px,
   marginRight: px,
   marginBottom: px,
   marginLeft: px,
+  marginBlock: px,
+  marginBlockStart: px,
+  marginBlockEnd: px,
+  marginInline: px,
+  marginInlineStart: px,
+  marginInlineEnd: px,
   // Misc
   backgroundPositionX: px,
   backgroundPositionY: px,
@@ -2303,6 +2331,12 @@ class DOMKeyframesResolver extends KeyframeResolver {
     const [origin, target] = unresolvedKeyframes;
     const originType = findDimensionValueType(origin);
     const targetType = findDimensionValueType(target);
+    const originHasVar = containsCSSVariable(origin);
+    const targetHasVar = containsCSSVariable(target);
+    if (originHasVar !== targetHasVar && positionalValues[name]) {
+      this.needsMeasurement = true;
+      return;
+    }
     if (originType === targetType)
       return;
     if (isNumOrPxType(originType) && isNumOrPxType(targetType)) {
@@ -2736,7 +2770,7 @@ const isPrimaryPointer = (event) => {
     return event.isPrimary !== false;
   }
 };
-const focusableElements = /* @__PURE__ */ new Set([
+const interactiveElements = /* @__PURE__ */ new Set([
   "BUTTON",
   "INPUT",
   "SELECT",
@@ -2744,7 +2778,7 @@ const focusableElements = /* @__PURE__ */ new Set([
   "A"
 ]);
 function isElementKeyboardAccessible(element) {
-  return focusableElements.has(element.tagName) || element.tabIndex !== -1;
+  return interactiveElements.has(element.tagName) || element.isContentEditable === true;
 }
 const isPressing = /* @__PURE__ */ new WeakSet();
 function filterEvents(callback) {
@@ -2903,7 +2937,8 @@ function PopChild({ children, isPresent, anchorX, root }) {
     right: 0
   });
   const { nonce } = useContext(MotionConfigContext);
-  const composedRef = useComposedRefs(ref, children?.ref);
+  const childRef = children.props?.ref ?? children?.ref;
+  const composedRef = useComposedRefs(ref, childRef);
   useInsertionEffect(() => {
     const { width, height, top, left, right } = size.current;
     if (isPresent || !ref.current || !width || !height)
@@ -3006,6 +3041,7 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, pre
   const isInitialRender = useRef(true);
   const pendingPresentChildren = useRef(presentChildren);
   const exitComplete = useConstant(() => /* @__PURE__ */ new Map());
+  const exitingComponents = useRef(/* @__PURE__ */ new Set());
   const [diffedChildren, setDiffedChildren] = useState(presentChildren);
   const [renderedChildren, setRenderedChildren] = useState(presentChildren);
   useIsomorphicLayoutEffect(() => {
@@ -3019,6 +3055,7 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, pre
         }
       } else {
         exitComplete.delete(key);
+        exitingComponents.current.delete(key);
       }
     }
   }, [renderedChildren, presentKeys.length, presentKeys.join("-")]);
@@ -3048,6 +3085,10 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, pre
     const key = getChildKey(child);
     const isPresent = propagate && !isParentPresent ? false : presentChildren === renderedChildren || presentKeys.includes(key);
     const onExit = () => {
+      if (exitingComponents.current.has(key)) {
+        return;
+      }
+      exitingComponents.current.add(key);
       if (exitComplete.has(key)) {
         exitComplete.set(key, true);
       } else {
@@ -3200,15 +3241,63 @@ function useCreateMotionContext(props) {
 function variantLabelsAsDependency(prop) {
   return Array.isArray(prop) ? prop.join(" ") : prop;
 }
-const scaleCorrectors = {};
-function addScaleCorrector(correctors) {
-  for (const key in correctors) {
-    scaleCorrectors[key] = correctors[key];
-    if (isCSSVariableName(key)) {
-      scaleCorrectors[key].isCSSVariable = true;
+function pixelsToPercent(pixels, axis) {
+  if (axis.max === axis.min)
+    return 0;
+  return pixels / (axis.max - axis.min) * 100;
+}
+const correctBorderRadius = {
+  correct: (latest, node) => {
+    if (!node.target)
+      return latest;
+    if (typeof latest === "string") {
+      if (px.test(latest)) {
+        latest = parseFloat(latest);
+      } else {
+        return latest;
+      }
     }
+    const x = pixelsToPercent(latest, node.target.x);
+    const y = pixelsToPercent(latest, node.target.y);
+    return `${x}% ${y}%`;
   }
-}
+};
+const correctBoxShadow = {
+  correct: (latest, { treeScale, projectionDelta }) => {
+    const original = latest;
+    const shadow = complex.parse(latest);
+    if (shadow.length > 5)
+      return original;
+    const template = complex.createTransformer(latest);
+    const offset = typeof shadow[0] !== "number" ? 1 : 0;
+    const xScale = projectionDelta.x.scale * treeScale.x;
+    const yScale = projectionDelta.y.scale * treeScale.y;
+    shadow[0 + offset] /= xScale;
+    shadow[1 + offset] /= yScale;
+    const averageScale = mixNumber$1(xScale, yScale, 0.5);
+    if (typeof shadow[2 + offset] === "number")
+      shadow[2 + offset] /= averageScale;
+    if (typeof shadow[3 + offset] === "number")
+      shadow[3 + offset] /= averageScale;
+    return template(shadow);
+  }
+};
+const scaleCorrectors = {
+  borderRadius: {
+    ...correctBorderRadius,
+    applyTo: [
+      "borderTopLeftRadius",
+      "borderTopRightRadius",
+      "borderBottomLeftRadius",
+      "borderBottomRightRadius"
+    ]
+  },
+  borderTopLeftRadius: correctBorderRadius,
+  borderTopRightRadius: correctBorderRadius,
+  borderBottomLeftRadius: correctBorderRadius,
+  borderBottomRightRadius: correctBorderRadius,
+  boxShadow: correctBoxShadow
+};
 function isForcedMotionValue(key, { layout: layout2, layoutId }) {
   return transformProps.has(key) || key.startsWith("origin") || (layout2 || layoutId !== void 0) && (!!scaleCorrectors[key] || key === "opacity");
 }
@@ -3344,6 +3433,12 @@ function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true
   const pathSpacing = px.transform(spacing);
   attrs[keys.array] = `${pathLength} ${pathSpacing}`;
 }
+const cssMotionPathProperties = [
+  "offsetDistance",
+  "offsetPath",
+  "offsetRotate",
+  "offsetAnchor"
+];
 function buildSVGAttrs(state, {
   attrX,
   attrY,
@@ -3376,6 +3471,12 @@ function buildSVGAttrs(state, {
     style.transformBox = styleProp?.transformBox ?? "fill-box";
     delete attrs.transformBox;
   }
+  for (const key of cssMotionPathProperties) {
+    if (attrs[key] !== void 0) {
+      style[key] = attrs[key];
+      delete attrs[key];
+    }
+  }
   if (attrX !== void 0)
     attrs.x = attrX;
   if (attrY !== void 0)
@@ -3459,8 +3560,8 @@ function isSVGComponent(Component2) {
   }
   return false;
 }
-function useRender(Component2, props, ref, { latestValues }, isStatic, forwardMotionProps = false) {
-  const useVisualProps = isSVGComponent(Component2) ? useSVGProps : useHTMLProps;
+function useRender(Component2, props, ref, { latestValues }, isStatic, forwardMotionProps = false, isSVG) {
+  const useVisualProps = isSVG ?? isSVGComponent(Component2) ? useSVGProps : useHTMLProps;
   const visualProps = useVisualProps(props, latestValues, isStatic, Component2);
   const filteredProps = filterProps(props, typeof Component2 === "string", forwardMotionProps);
   const elementProps = Component2 !== Fragment$1 ? { ...filteredProps, ...visualProps, ref } : {};
@@ -3579,43 +3680,46 @@ const useSVGVisualState = /* @__PURE__ */ makeUseVisualState({
   scrapeMotionValuesFromProps,
   createRenderState: createSvgRenderState
 });
-const motionComponentSymbol = Symbol.for("motionComponentSymbol");
-function isRefObject(ref) {
-  return ref && typeof ref === "object" && Object.prototype.hasOwnProperty.call(ref, "current");
-}
+const motionComponentSymbol = /* @__PURE__ */ Symbol.for("motionComponentSymbol");
 function useMotionRef(visualState, visualElement, externalRef) {
-  return useCallback(
-    (instance) => {
+  const externalRefContainer = useRef(externalRef);
+  useInsertionEffect(() => {
+    externalRefContainer.current = externalRef;
+  });
+  const refCleanup = useRef(null);
+  return useCallback((instance) => {
+    if (instance) {
+      visualState.onMount?.(instance);
+    }
+    if (visualElement) {
+      instance ? visualElement.mount(instance) : visualElement.unmount();
+    }
+    const ref = externalRefContainer.current;
+    if (typeof ref === "function") {
       if (instance) {
-        visualState.onMount && visualState.onMount(instance);
-      }
-      if (visualElement) {
-        if (instance) {
-          visualElement.mount(instance);
-        } else {
-          visualElement.unmount();
-        }
-      }
-      if (externalRef) {
-        if (typeof externalRef === "function") {
-          externalRef(instance);
-        } else if (isRefObject(externalRef)) {
-          externalRef.current = instance;
+        const cleanup = ref(instance);
+        if (typeof cleanup === "function") {
+          refCleanup.current = cleanup;
         }
+      } else if (refCleanup.current) {
+        refCleanup.current();
+        refCleanup.current = null;
+      } else {
+        ref(instance);
       }
-    },
-    /**
-     * Include externalRef in dependencies to ensure the callback updates
-     * when the ref changes, allowing proper ref forwarding.
-     */
-    [visualElement]
-  );
+    } else if (ref) {
+      ref.current = instance;
+    }
+  }, [visualElement]);
 }
 const camelToDash = (str) => str.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase();
 const optimizedAppearDataId = "framerAppearId";
 const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
 const SwitchLayoutGroupContext = createContext({});
-function useVisualElement(Component2, visualState, props, createVisualElement, ProjectionNodeConstructor) {
+function isRefObject(ref) {
+  return ref && typeof ref === "object" && Object.prototype.hasOwnProperty.call(ref, "current");
+}
+function useVisualElement(Component2, visualState, props, createVisualElement, ProjectionNodeConstructor, isSVG) {
   const { visualElement: parent } = useContext(MotionContext);
   const lazyContext = useContext(LazyContext);
   const presenceContext = useContext(PresenceContext);
@@ -3629,7 +3733,8 @@ function useVisualElement(Component2, visualState, props, createVisualElement, P
       props,
       presenceContext,
       blockInitialAnimation: presenceContext ? presenceContext.initial === false : false,
-      reducedMotionConfig
+      reducedMotionConfig,
+      isSVG
     });
   }
   const visualElement = visualElementRef.current;
@@ -3699,9 +3804,10 @@ function getClosestProjectingNode(visualElement) {
     return void 0;
   return visualElement.options.allowProjection !== false ? visualElement.projection : getClosestProjectingNode(visualElement.parent);
 }
-function createMotionComponent(Component2, { forwardMotionProps = false } = {}, preloadedFeatures, createVisualElement) {
+function createMotionComponent(Component2, { forwardMotionProps = false, type } = {}, preloadedFeatures, createVisualElement) {
   preloadedFeatures && loadFeatures(preloadedFeatures);
-  const useVisualState = isSVGComponent(Component2) ? useSVGVisualState : useHTMLVisualState;
+  const isSVG = type ? type === "svg" : isSVGComponent(Component2);
+  const useVisualState = isSVG ? useSVGVisualState : useHTMLVisualState;
   function MotionDOMComponent(props, externalRef) {
     let MeasureLayout2;
     const configAndProps = {
@@ -3716,9 +3822,9 @@ function createMotionComponent(Component2, { forwardMotionProps = false } = {},
       useStrictMode(configAndProps, preloadedFeatures);
       const layoutProjection = getProjectionFunctionality(configAndProps);
       MeasureLayout2 = layoutProjection.MeasureLayout;
-      context.visualElement = useVisualElement(Component2, visualState, configAndProps, createVisualElement, layoutProjection.ProjectionNode);
+      context.visualElement = useVisualElement(Component2, visualState, configAndProps, createVisualElement, layoutProjection.ProjectionNode, isSVG);
     }
-    return jsxs(MotionContext.Provider, { value: context, children: [MeasureLayout2 && context.visualElement ? jsx(MeasureLayout2, { visualElement: context.visualElement, ...configAndProps }) : null, useRender(Component2, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, forwardMotionProps)] });
+    return jsxs(MotionContext.Provider, { value: context, children: [MeasureLayout2 && context.visualElement ? jsx(MeasureLayout2, { visualElement: context.visualElement, ...configAndProps }) : null, useRender(Component2, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, forwardMotionProps, isSVG)] });
   }
   MotionDOMComponent.displayName = `motion.${typeof Component2 === "string" ? Component2 : `create(${Component2.displayName ?? Component2.name ?? ""})`}`;
   const ForwardRefMotionComponent = forwardRef(MotionDOMComponent);
@@ -4036,10 +4142,16 @@ class VisualElement {
       this.removeFromVariantTree = this.parent.addVariantChild(this);
     }
     this.values.forEach((value, key) => this.bindToMotionValue(key, value));
-    if (!hasReducedMotionListener.current) {
-      initPrefersReducedMotion();
+    if (this.reducedMotionConfig === "never") {
+      this.shouldReduceMotion = false;
+    } else if (this.reducedMotionConfig === "always") {
+      this.shouldReduceMotion = true;
+    } else {
+      if (!hasReducedMotionListener.current) {
+        initPrefersReducedMotion();
+      }
+      this.shouldReduceMotion = prefersReducedMotion.current;
     }
-    this.shouldReduceMotion = this.reducedMotionConfig === "never" ? false : this.reducedMotionConfig === "always" ? true : prefersReducedMotion.current;
     if (process.env.NODE_ENV !== "production") {
       warnOnce(this.shouldReduceMotion !== true, "You have Reduced Motion enabled on your device. Animations may not appear as expected.", "reduced-motion-disabled");
     }
@@ -4443,7 +4555,8 @@ class SVGVisualElement extends DOMVisualElement {
   }
 }
 const createDomVisualElement = (Component2, options) => {
-  return isSVGComponent(Component2) ? new SVGVisualElement(options) : new HTMLVisualElement(options, {
+  const isSVG = options.isSVG ?? isSVGComponent(Component2);
+  return isSVG ? new SVGVisualElement(options) : new HTMLVisualElement(options, {
     allowProjection: Component2 !== Fragment$1
   });
 };
@@ -5074,13 +5187,22 @@ function distance2D(a, b) {
   const yDelta = distance(a.y, b.y);
   return Math.sqrt(xDelta ** 2 + yDelta ** 2);
 }
+const overflowStyles = /* @__PURE__ */ new Set(["auto", "scroll"]);
 class PanSession {
-  constructor(event, handlers, { transformPagePoint, contextWindow = window, dragSnapToOrigin = false, distanceThreshold = 3 } = {}) {
+  constructor(event, handlers, { transformPagePoint, contextWindow = window, dragSnapToOrigin = false, distanceThreshold = 3, element } = {}) {
     this.startEvent = null;
     this.lastMoveEvent = null;
     this.lastMoveEventInfo = null;
     this.handlers = {};
     this.contextWindow = window;
+    this.scrollPositions = /* @__PURE__ */ new Map();
+    this.removeScrollListeners = null;
+    this.onElementScroll = (event2) => {
+      this.handleScroll(event2.target);
+    };
+    this.onWindowScroll = () => {
+      this.handleScroll(window);
+    };
     this.updatePoint = () => {
       if (!(this.lastMoveEvent && this.lastMoveEventInfo))
         return;
@@ -5107,8 +5229,9 @@ class PanSession {
     this.handlePointerUp = (event2, info2) => {
       this.end();
       const { onEnd, onSessionEnd, resumeAnimation } = this.handlers;
-      if (this.dragSnapToOrigin)
+      if (this.dragSnapToOrigin || !this.startEvent) {
         resumeAnimation && resumeAnimation();
+      }
       if (!(this.lastMoveEvent && this.lastMoveEventInfo))
         return;
       const panInfo = getPanInfo(event2.type === "pointercancel" ? this.lastMoveEventInfo : transformPoint(info2, this.transformPagePoint), this.history);
@@ -5132,12 +5255,82 @@ class PanSession {
     const { onSessionStart } = handlers;
     onSessionStart && onSessionStart(event, getPanInfo(initialInfo, this.history));
     this.removeListeners = pipe(addPointerEvent(this.contextWindow, "pointermove", this.handlePointerMove), addPointerEvent(this.contextWindow, "pointerup", this.handlePointerUp), addPointerEvent(this.contextWindow, "pointercancel", this.handlePointerUp));
+    if (element) {
+      this.startScrollTracking(element);
+    }
+  }
+  /**
+   * Start tracking scroll on ancestors and window.
+   */
+  startScrollTracking(element) {
+    let current = element.parentElement;
+    while (current) {
+      const style = getComputedStyle(current);
+      if (overflowStyles.has(style.overflowX) || overflowStyles.has(style.overflowY)) {
+        this.scrollPositions.set(current, {
+          x: current.scrollLeft,
+          y: current.scrollTop
+        });
+      }
+      current = current.parentElement;
+    }
+    this.scrollPositions.set(window, {
+      x: window.scrollX,
+      y: window.scrollY
+    });
+    window.addEventListener("scroll", this.onElementScroll, {
+      capture: true,
+      passive: true
+    });
+    window.addEventListener("scroll", this.onWindowScroll, {
+      passive: true
+    });
+    this.removeScrollListeners = () => {
+      window.removeEventListener("scroll", this.onElementScroll, {
+        capture: true
+      });
+      window.removeEventListener("scroll", this.onWindowScroll);
+    };
+  }
+  /**
+   * Handle scroll compensation during drag.
+   *
+   * For element scroll: adjusts history origin since pageX/pageY doesn't change.
+   * For window scroll: adjusts lastMoveEventInfo since pageX/pageY would change.
+   */
+  handleScroll(target) {
+    const initial = this.scrollPositions.get(target);
+    if (!initial)
+      return;
+    const isWindow = target === window;
+    const current = isWindow ? { x: window.scrollX, y: window.scrollY } : {
+      x: target.scrollLeft,
+      y: target.scrollTop
+    };
+    const delta = { x: current.x - initial.x, y: current.y - initial.y };
+    if (delta.x === 0 && delta.y === 0)
+      return;
+    if (isWindow) {
+      if (this.lastMoveEventInfo) {
+        this.lastMoveEventInfo.point.x += delta.x;
+        this.lastMoveEventInfo.point.y += delta.y;
+      }
+    } else {
+      if (this.history.length > 0) {
+        this.history[0].x -= delta.x;
+        this.history[0].y -= delta.y;
+      }
+    }
+    this.scrollPositions.set(target, current);
+    frame.update(this.updatePoint, true);
   }
   updateHandlers(handlers) {
     this.handlers = handlers;
   }
   end() {
     this.removeListeners && this.removeListeners();
+    this.removeScrollListeners && this.removeScrollListeners();
+    this.scrollPositions.clear();
     cancelFrame(this.updatePoint);
   }
 }
@@ -5289,13 +5482,15 @@ class VisualElementDragControls {
     if (presenceContext && presenceContext.isPresent === false)
       return;
     const onSessionStart = (event) => {
-      const { dragSnapToOrigin: dragSnapToOrigin2 } = this.getProps();
-      dragSnapToOrigin2 ? this.pauseAnimation() : this.stopAnimation();
       if (snapToCursor) {
+        this.stopAnimation();
         this.snapToCursor(extractEventInfo(event).point);
+      } else {
+        this.pauseAnimation();
       }
     };
     const onStart = (event, info) => {
+      this.stopAnimation();
       const { drag: drag2, dragPropagation, onDragStart } = this.getProps();
       if (drag2 && !dragPropagation) {
         if (this.openDragLock)
@@ -5372,7 +5567,8 @@ class VisualElementDragControls {
       transformPagePoint: this.visualElement.getTransformPagePoint(),
       dragSnapToOrigin,
       distanceThreshold,
-      contextWindow: getContextWindow(this.visualElement)
+      contextWindow: getContextWindow(this.visualElement),
+      element: this.visualElement.current
     });
   }
   /**
@@ -5527,7 +5723,8 @@ class VisualElementDragControls {
       const axisValue = this.getAxisMotionValue(axis);
       if (projection && projection.layout) {
         const { min, max } = projection.layout.layoutBox[axis];
-        axisValue.set(point[axis] - mixNumber$1(min, max, 0.5));
+        const current = axisValue.get() || 0;
+        axisValue.set(point[axis] - mixNumber$1(min, max, 0.5) + current);
       }
     });
   }
@@ -5572,7 +5769,9 @@ class VisualElementDragControls {
     const element = this.visualElement.current;
     const stopPointerListener = addPointerEvent(element, "pointerdown", (event) => {
       const { drag: drag2, dragListener = true } = this.getProps();
-      drag2 && dragListener && this.start(event);
+      if (drag2 && dragListener && !isElementKeyboardAccessible(event.target)) {
+        this.start(event);
+      }
     });
     const measureDragConstraints = () => {
       const { dragConstraints } = this.getProps();
@@ -5647,6 +5846,16 @@ class DragGesture extends Feature {
     }
     this.removeListeners = this.controls.addListeners() || noop;
   }
+  update() {
+    const { dragControls } = this.node.getProps();
+    const { dragControls: prevDragControls } = this.node.prevProps || {};
+    if (dragControls !== prevDragControls) {
+      this.removeGroupControls();
+      if (dragControls) {
+        this.removeGroupControls = dragControls.subscribe(this.controls);
+      }
+    }
+  }
   unmount() {
     this.removeGroupControls();
     this.removeListeners();
@@ -5705,47 +5914,6 @@ const globalProjectionState = {
    */
   hasEverUpdated: false
 };
-function pixelsToPercent(pixels, axis) {
-  if (axis.max === axis.min)
-    return 0;
-  return pixels / (axis.max - axis.min) * 100;
-}
-const correctBorderRadius = {
-  correct: (latest, node) => {
-    if (!node.target)
-      return latest;
-    if (typeof latest === "string") {
-      if (px.test(latest)) {
-        latest = parseFloat(latest);
-      } else {
-        return latest;
-      }
-    }
-    const x = pixelsToPercent(latest, node.target.x);
-    const y = pixelsToPercent(latest, node.target.y);
-    return `${x}% ${y}%`;
-  }
-};
-const correctBoxShadow = {
-  correct: (latest, { treeScale, projectionDelta }) => {
-    const original = latest;
-    const shadow = complex.parse(latest);
-    if (shadow.length > 5)
-      return original;
-    const template = complex.createTransformer(latest);
-    const offset = typeof shadow[0] !== "number" ? 1 : 0;
-    const xScale = projectionDelta.x.scale * treeScale.x;
-    const yScale = projectionDelta.y.scale * treeScale.y;
-    shadow[0 + offset] /= xScale;
-    shadow[1 + offset] /= yScale;
-    const averageScale = mixNumber$1(xScale, yScale, 0.5);
-    if (typeof shadow[2 + offset] === "number")
-      shadow[2 + offset] /= averageScale;
-    if (typeof shadow[3 + offset] === "number")
-      shadow[3 + offset] /= averageScale;
-    return template(shadow);
-  }
-};
 let hasTakenAnySnapshot = false;
 class MeasureLayoutWithContext extends Component {
   /**
@@ -5756,7 +5924,6 @@ class MeasureLayoutWithContext extends Component {
   componentDidMount() {
     const { visualElement, layoutGroup, switchLayoutGroup, layoutId } = this.props;
     const { projection } = visualElement;
-    addScaleCorrector(defaultScaleCorrectors);
     if (projection) {
       if (layoutGroup.group)
         layoutGroup.group.add(projection);
@@ -5838,22 +6005,6 @@ function MeasureLayout(props) {
   const layoutGroup = useContext(LayoutGroupContext);
   return jsx(MeasureLayoutWithContext, { ...props, layoutGroup, switchLayoutGroup: useContext(SwitchLayoutGroupContext), isPresent, safeToRemove });
 }
-const defaultScaleCorrectors = {
-  borderRadius: {
-    ...correctBorderRadius,
-    applyTo: [
-      "borderTopLeftRadius",
-      "borderTopRightRadius",
-      "borderBottomLeftRadius",
-      "borderBottomRightRadius"
-    ]
-  },
-  borderTopLeftRadius: correctBorderRadius,
-  borderTopRightRadius: correctBorderRadius,
-  borderBottomLeftRadius: correctBorderRadius,
-  borderBottomRightRadius: correctBorderRadius,
-  boxShadow: correctBoxShadow
-};
 function animateSingleValue(value, keyframes2, options) {
   const motionValue$1 = isMotionValue(value) ? value : motionValue(value);
   motionValue$1.start(animateMotionValue("", motionValue$1, keyframes2, options));