@coinbase/cds-web 8.66.2 → 9.0.0-rc.1

package/esm/stepper/DefaultStepperLabelHorizontal.js

@@ -1,4 +1,4 @@
-const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "className", "style", "completedStepAccessibilityLabel", "setActiveStepLabelElement", "defaultColor", "activeColor", "descendentActiveColor", "visitedColor", "completeColor", "display", "alignItems", "width", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "textTransform"];
+const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "className", "style", "completedStepAccessibilityLabel", "progressTimingConfig", "setActiveStepLabelElement", "defaultColor", "activeColor", "descendentActiveColor", "visitedColor", "completeColor", "display", "alignItems", "width", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "textTransform", "disableAnimateOnMount"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -8,12 +8,13 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { memo, useMemo } from 'react';
 import useMeasure from 'react-use-measure';
-import { animated, useSpring } from '@react-spring/web';
+import { m as motion } from 'framer-motion';
 import { Box } from '../layout/Box';
 import { HStack } from '../layout/HStack';
 import { Text } from '../typography/Text';
+import { defaultProgressTimingConfig } from './Stepper';
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-const AnimatedBox = animated(Box);
+const MotionBox = motion(Box);
 const displayStyle = {
   phone: 'none',
   tablet: 'flex',
@@ -33,6 +34,7 @@ export const DefaultStepperLabelHorizontal = /*#__PURE__*/memo(function DefaultS
       className,
       style,
       completedStepAccessibilityLabel,
+      progressTimingConfig = defaultProgressTimingConfig,
       setActiveStepLabelElement,
       defaultColor = 'fgMuted',
       activeColor = 'fg',
@@ -47,19 +49,15 @@ export const DefaultStepperLabelHorizontal = /*#__PURE__*/memo(function DefaultS
       fontSize = font,
       fontWeight = font,
       lineHeight = font,
-      textTransform
+      textTransform,
+      disableAnimateOnMount
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const isStepGroupActive = active || isDescendentActive;
+  const showPagination = isStepGroupActive && !complete && !visited;
   const [paginationRef, {
     width: paginationWidth
   }] = useMeasure();
-  const paginationSpring = useSpring({
-    opacity: isStepGroupActive && !complete && !visited ? 1 : 0
-  });
-  const labelSpring = useSpring({
-    left: isStepGroupActive && !complete && !visited ? paginationWidth : 0
-  });
   const flatStepIndex = flatStepIds.indexOf(step.id);
   const fontProps = useMemo(() => ({
     font,
@@ -99,15 +97,21 @@ export const DefaultStepperLabelHorizontal = /*#__PURE__*/memo(function DefaultS
     style: style,
     width: width
   }, props), {}, {
-    children: [/*#__PURE__*/_jsx(AnimatedBox, {
+    children: [/*#__PURE__*/_jsx(MotionBox, {
       ref: paginationRef,
+      animate: {
+        opacity: showPagination ? 1 : 0
+      },
       paddingEnd: 1,
-      style: paginationSpring,
+      transition: progressTimingConfig,
       children: paginationText
-    }), /*#__PURE__*/_jsx(AnimatedBox, {
+    }), /*#__PURE__*/_jsx(MotionBox, {
+      animate: {
+        left: showPagination ? paginationWidth : 0
+      },
       maxWidth: "calc(100% - ".concat(paginationWidth, "px)"),
       position: "absolute",
-      style: labelSpring,
+      transition: progressTimingConfig,
       width: "100%",
       children: labelElement
     })]

package/esm/stepper/DefaultStepperProgressHorizontal.js

@@ -1,4 +1,4 @@
-const _excluded = ["step", "parentStep", "progress", "activeStepId", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "progressSpringConfig", "activeStepLabelElement", "animate", "disableAnimateOnMount", "className", "style", "background", "defaultFill", "activeFill", "descendentActiveFill", "visitedFill", "completeFill", "width", "borderRadius", "height"];
+const _excluded = ["step", "parentStep", "progress", "activeStepId", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "progressTimingConfig", "activeStepLabelElement", "animate", "disableAnimateOnMount", "className", "style", "background", "defaultFill", "activeFill", "descendentActiveFill", "visitedFill", "completeFill", "width", "borderRadius", "height"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -6,9 +6,10 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import { memo } from 'react';
-import { animated } from '@react-spring/web';
+import { memo, useMemo } from 'react';
+import { m as motion } from 'framer-motion';
 import { Box } from '../layout/Box';
+import { defaultProgressTimingConfig } from './Stepper';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const DefaultStepperProgressHorizontal = /*#__PURE__*/memo(function DefaultStepperProgressHorizontal(_ref) {
   let {
@@ -22,7 +23,7 @@ export const DefaultStepperProgressHorizontal = /*#__PURE__*/memo(function Defau
       flatStepIds,
       complete,
       isDescendentActive,
-      progressSpringConfig,
+      progressTimingConfig,
       activeStepLabelElement,
       animate,
       disableAnimateOnMount,
@@ -39,6 +40,10 @@ export const DefaultStepperProgressHorizontal = /*#__PURE__*/memo(function Defau
       height = 4
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
+  const transition = useMemo(() => animate ? progressTimingConfig !== null && progressTimingConfig !== void 0 ? progressTimingConfig : defaultProgressTimingConfig : {
+    type: 'tween',
+    duration: 0
+  }, [animate, progressTimingConfig]);
   return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
     background: background,
     borderRadius: borderRadius,
@@ -57,11 +62,18 @@ export const DefaultStepperProgressHorizontal = /*#__PURE__*/memo(function Defau
       height: "100%",
       overflow: "hidden",
       width: "100%",
-      children: /*#__PURE__*/_jsx(animated.div, {
+      children: /*#__PURE__*/_jsx(motion.div, {
+        animate: {
+          width: "".concat(progress * 100, "%")
+        },
+        initial: {
+          width: disableAnimateOnMount ? "".concat(progress * 100, "%") : '0%'
+        },
         style: {
           backgroundColor: 'currentColor',
-          width: progress.to(p => "".concat(p * 100, "%"))
-        }
+          height: '100%'
+        },
+        transition: transition
       })
     })
   }));

package/esm/stepper/DefaultStepperProgressVertical.js

@@ -1,4 +1,4 @@
-const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "className", "style", "activeStepLabelElement", "progressSpringConfig", "animate", "disableAnimateOnMount", "background", "defaultFill", "activeFill", "descendentActiveFill", "visitedFill", "completeFill", "minHeight", "width", "progress"];
+const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "className", "style", "activeStepLabelElement", "progressTimingConfig", "animate", "disableAnimateOnMount", "background", "defaultFill", "activeFill", "descendentActiveFill", "visitedFill", "completeFill", "minHeight", "width", "progress"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -6,11 +6,11 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { defaultRect } from '@coinbase/cds-common/types/Rect';
-import { animated, to, useSpring } from '@react-spring/web';
-import { useHasMounted } from '../hooks/useHasMounted';
+import { m as motion } from 'framer-motion';
 import { Box } from '../layout/Box';
+import { defaultProgressTimingConfig } from './Stepper';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const DefaultStepperProgressVertical = /*#__PURE__*/memo(function DefaultStepperProgressVertical(_ref) {
   let {
@@ -26,7 +26,7 @@ export const DefaultStepperProgressVertical = /*#__PURE__*/memo(function Default
       className,
       style,
       activeStepLabelElement,
-      progressSpringConfig,
+      progressTimingConfig = defaultProgressTimingConfig,
       animate = true,
       disableAnimateOnMount,
       background = 'bgLine',
@@ -40,47 +40,46 @@ export const DefaultStepperProgressVertical = /*#__PURE__*/memo(function Default
       progress
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  const hasMounted = useHasMounted();
   const containerRef = useRef(null);
-  const [renderTick, setRenderTick] = useState(0);
+  const [fillHeight, setFillHeight] = useState(0);
+  const [hasReceivedFillHeight, setHasReceivedFillHeight] = useState(false);
   const isStepGroupActive = active || isDescendentActive;
   const isLastStep = flatStepIds[flatStepIds.length - 1] === step.id;
-  useEffect(() => {
-    if (!containerRef.current) return;
-    const observer = new window.ResizeObserver(entries => {
-      setRenderTick(prev => prev + 1);
-    });
-    observer.observe(containerRef.current);
-    return () => observer.disconnect();
-  }, []);
-  const getFillHeight = useCallback(() => {
-    var _step$subSteps, _containerRef$current, _containerRef$current2;
+  const recalculateFillHeight = useCallback(() => {
+    var _step$subSteps;
+    const container = containerRef.current;
+    if (!container) return;
     const hasSubSteps = Boolean((_step$subSteps = step.subSteps) === null || _step$subSteps === void 0 ? void 0 : _step$subSteps.length);
-    const containerRect = (_containerRef$current = (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.getBoundingClientRect()) !== null && _containerRef$current !== void 0 ? _containerRef$current : defaultRect;
-
-    // Complete progress fill
-    if (complete || visited && !isStepGroupActive || !hasSubSteps && active) return containerRect.height;
-    // Partial progress fill
-    if (hasSubSteps && isDescendentActive) {
+    const containerRect = container.getBoundingClientRect();
+    let height;
+    if (complete || visited && !isStepGroupActive || !hasSubSteps && active) {
+      height = containerRect.height;
+    } else if (hasSubSteps && isDescendentActive) {
       var _activeStepLabelEleme, _step$subSteps2;
       const activeStepLabelRect = (_activeStepLabelEleme = activeStepLabelElement === null || activeStepLabelElement === void 0 ? void 0 : activeStepLabelElement.getBoundingClientRect()) !== null && _activeStepLabelEleme !== void 0 ? _activeStepLabelEleme : defaultRect;
       const lastSubstep = (_step$subSteps2 = step.subSteps) === null || _step$subSteps2 === void 0 ? void 0 : _step$subSteps2[step.subSteps.length - 1];
       const isLastSubstepActive = activeStepId === (lastSubstep === null || lastSubstep === void 0 ? void 0 : lastSubstep.id);
       const activeStepLabelBottom = activeStepLabelRect.y + activeStepLabelRect.height;
       const halfLabelHeight = isLastSubstepActive ? 0 : 0.5 * activeStepLabelRect.height;
-      return activeStepLabelBottom - containerRect.y - halfLabelHeight;
+      height = activeStepLabelBottom - containerRect.y - halfLabelHeight;
+    } else {
+      height = 0;
     }
-    return 0;
-    // renderTick is used to force a new height calculation when it changes by the observer
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [step.subSteps, complete, visited, isStepGroupActive, active, renderTick, isDescendentActive, activeStepLabelElement, activeStepId]);
-  const [{
-    fillHeight
-  }] = useSpring(() => ({
-    fillHeight: getFillHeight(),
-    config: progressSpringConfig,
-    immediate: !animate || disableAnimateOnMount && !hasMounted
-  }), [getFillHeight, animate, disableAnimateOnMount, hasMounted]);
+    setFillHeight(height);
+    if (height) setHasReceivedFillHeight(true);
+  }, [step.subSteps, complete, visited, isStepGroupActive, active, isDescendentActive, activeStepLabelElement, activeStepId]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const observer = new window.ResizeObserver(recalculateFillHeight);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [recalculateFillHeight]);
+  const animatedHeight = progress * fillHeight;
+  const transition = useMemo(() => animate ? progressTimingConfig : {
+    type: 'tween',
+    duration: 0
+  }, [animate, progressTimingConfig]);
   if (depth > 0 || isLastStep) return null;
   return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
     ref: containerRef,
@@ -98,13 +97,26 @@ export const DefaultStepperProgressVertical = /*#__PURE__*/memo(function Default
   }, props), {}, {
     children: /*#__PURE__*/_jsx(Box, {
       color: complete ? completeFill : active ? activeFill : isDescendentActive ? descendentActiveFill : visited ? visitedFill : defaultFill,
-      children: /*#__PURE__*/_jsx(animated.div, {
+      children: disableAnimateOnMount && !hasReceivedFillHeight ? /*#__PURE__*/_jsx("div", {
         style: {
           position: 'absolute',
           width: '100%',
-          backgroundColor: 'currentColor',
-          height: to([progress, fillHeight], (p, f) => "".concat(p * f, "px"))
+          height: animatedHeight,
+          backgroundColor: 'currentColor'
         }
+      }) : /*#__PURE__*/_jsx(motion.div, {
+        animate: {
+          height: animatedHeight
+        },
+        initial: {
+          height: disableAnimateOnMount ? animatedHeight : 0
+        },
+        style: {
+          position: 'absolute',
+          width: '100%',
+          backgroundColor: 'currentColor'
+        },
+        transition: transition
       })
     })
   }));

package/esm/stepper/DefaultStepperStepHorizontal.js

@@ -1,4 +1,4 @@
-const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "className", "style", "completedStepAccessibilityLabel", "styles", "classNames", "progress", "activeStepLabelElement", "setActiveStepLabelElement", "progressSpringConfig", "animate", "disableAnimateOnMount", "StepperStepComponent", "StepperLabelComponent", "StepperProgressComponent", "StepperSubstepContainerComponent", "StepperIconComponent"];
+const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "className", "style", "completedStepAccessibilityLabel", "styles", "classNames", "progress", "activeStepLabelElement", "setActiveStepLabelElement", "progressTimingConfig", "animate", "disableAnimateOnMount", "StepperStepComponent", "StepperLabelComponent", "StepperProgressComponent", "StepperSubstepContainerComponent", "StepperIconComponent"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -34,7 +34,7 @@ export const DefaultStepperStepHorizontal = /*#__PURE__*/memo(function DefaultSt
       progress,
       activeStepLabelElement,
       setActiveStepLabelElement,
-      progressSpringConfig,
+      progressTimingConfig,
       animate,
       disableAnimateOnMount,
       StepperStepComponent = DefaultStepperStepHorizontal,
@@ -100,7 +100,7 @@ export const DefaultStepperStepHorizontal = /*#__PURE__*/memo(function DefaultSt
         isDescendentActive: isDescendentActive,
         parentStep: parentStep,
         progress: progress,
-        progressSpringConfig: progressSpringConfig,
+        progressTimingConfig: progressTimingConfig,
         step: step,
         style: styles === null || styles === void 0 ? void 0 : styles.progress,
         visited: visited
@@ -112,9 +112,11 @@ export const DefaultStepperStepHorizontal = /*#__PURE__*/memo(function DefaultSt
       complete: complete,
       completedStepAccessibilityLabel: completedStepAccessibilityLabel,
       depth: depth,
+      disableAnimateOnMount: disableAnimateOnMount,
       flatStepIds: flatStepIds,
       isDescendentActive: isDescendentActive,
       parentStep: parentStep,
+      progressTimingConfig: progressTimingConfig,
       setActiveStepLabelElement: setActiveStepLabelElement,
       step: step,
       style: styles === null || styles === void 0 ? void 0 : styles.label,
@@ -157,7 +159,7 @@ export const DefaultStepperStepHorizontal = /*#__PURE__*/memo(function DefaultSt
           isDescendentActive: isDescendentActive,
           parentStep: step,
           progress: progress,
-          progressSpringConfig: progressSpringConfig,
+          progressTimingConfig: progressTimingConfig,
           setActiveStepLabelElement: setActiveStepLabelElement,
           step: subStep,
           styles: styles,

package/esm/stepper/DefaultStepperStepVertical.js

@@ -1,4 +1,4 @@
-const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "className", "style", "completedStepAccessibilityLabel", "styles", "classNames", "progress", "activeStepLabelElement", "setActiveStepLabelElement", "progressSpringConfig", "animate", "disableAnimateOnMount", "StepperStepComponent", "StepperLabelComponent", "StepperProgressComponent", "StepperIconComponent", "StepperSubstepContainerComponent"];
+const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "className", "style", "completedStepAccessibilityLabel", "styles", "classNames", "progress", "activeStepLabelElement", "setActiveStepLabelElement", "progressTimingConfig", "animate", "disableAnimateOnMount", "StepperStepComponent", "StepperLabelComponent", "StepperProgressComponent", "StepperIconComponent", "StepperSubstepContainerComponent"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -35,7 +35,7 @@ export const DefaultStepperStepVertical = /*#__PURE__*/memo(function DefaultStep
       progress,
       activeStepLabelElement,
       setActiveStepLabelElement,
-      progressSpringConfig,
+      progressTimingConfig,
       animate,
       disableAnimateOnMount,
       StepperStepComponent = DefaultStepperStepVertical,
@@ -99,7 +99,7 @@ export const DefaultStepperStepVertical = /*#__PURE__*/memo(function DefaultStep
           isDescendentActive: isDescendentActive,
           parentStep: parentStep,
           progress: progress,
-          progressSpringConfig: progressSpringConfig,
+          progressTimingConfig: progressTimingConfig,
           step: step,
           style: styles === null || styles === void 0 ? void 0 : styles.progress,
           visited: visited
@@ -135,7 +135,7 @@ export const DefaultStepperStepVertical = /*#__PURE__*/memo(function DefaultStep
           step: step,
           style: styles === null || styles === void 0 ? void 0 : styles.substepContainer,
           visited: visited,
-          children: step.subSteps.map((subStep, index) => {
+          children: step.subSteps.map(subStep => {
             var _subStep$Component;
             const RenderedStepComponent = (_subStep$Component = subStep.Component) !== null && _subStep$Component !== void 0 ? _subStep$Component : StepperStepComponent;
             const isDescendentActive = activeStepId ? containsStep({
@@ -161,7 +161,7 @@ export const DefaultStepperStepVertical = /*#__PURE__*/memo(function DefaultStep
               isDescendentActive: isDescendentActive,
               parentStep: step,
               progress: progress,
-              progressSpringConfig: progressSpringConfig,
+              progressTimingConfig: progressTimingConfig,
               setActiveStepLabelElement: setActiveStepLabelElement,
               step: subStep,
               styles: styles,

package/esm/stepper/Stepper.js

@@ -1,4 +1,4 @@
-const _excluded = ["direction", "activeStepId", "steps", "complete", "style", "className", "completedStepAccessibilityLabel", "styles", "classNames", "gap", "accessibilityLabel", "StepperStepComponent", "StepperSubstepContainerComponent", "StepperLabelComponent", "StepperProgressComponent", "StepperIconComponent", "StepperHeaderComponent", "progressSpringConfig", "animate", "disableAnimateOnMount"],
+const _excluded = ["direction", "activeStepId", "steps", "complete", "style", "className", "completedStepAccessibilityLabel", "styles", "classNames", "gap", "accessibilityLabel", "StepperStepComponent", "StepperSubstepContainerComponent", "StepperLabelComponent", "StepperProgressComponent", "StepperIconComponent", "StepperHeaderComponent", "progressTimingConfig", "animate", "disableAnimateOnMount"],
   _excluded2 = ["root"],
   _excluded3 = ["root"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -8,13 +8,11 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { forwardRef, memo, useEffect, useMemo, useState } from 'react';
-import { usePreviousValue } from '@coinbase/cds-common/hooks/usePreviousValue';
+import React, { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { curves, durations } from '@coinbase/cds-common/motion/tokens';
 import { containsStep, flattenSteps, isStepVisited } from '@coinbase/cds-common/stepper/utils';
-import { useSprings } from '@react-spring/web';
 import { cx } from '../cx';
 import { useComponentConfig } from '../hooks/useComponentConfig';
-import { useHasMounted } from '../hooks/useHasMounted';
 import { Box } from '../layout/Box';
 import { VStack } from '../layout/VStack';
 import { DefaultStepperHeaderHorizontal } from './DefaultStepperHeaderHorizontal';
@@ -39,18 +37,30 @@ import { DefaultStepperSubstepContainerVertical } from './DefaultStepperSubstepC
 // ------------ STEPPER COMPONENT PROPS ------------
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const stepperDefaultElement = 'div';
+const cascadeStaggerMs = durations.moderate2;
 export const horizontalStepGap = {
   phone: 0.5,
   tablet: 1,
   desktop: 1
 };
+
+/** Default progress transition: tween with CDS duration (seconds) and global curve. */
+export const defaultProgressTimingConfig = {
+  type: 'tween',
+  duration: durations.slow2 / 1000,
+  ease: curves.global
+};
+
+/**
+ * @deprecated Use {@link defaultProgressTimingConfig}. Retained for migration only; Stepper no longer uses react-spring for progress. This will be removed in a future major release.
+ * @deprecationExpectedRemoval v10
+ */
 export const defaultProgressSpringConfig = {
   friction: 0,
   tension: 100,
   clamp: true
 };
 const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
-  var _usePreviousValue, _usePreviousValue2;
   const mergedProps = useComponentConfig('Stepper', _props);
   const {
       direction,
@@ -70,12 +80,11 @@ const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
       StepperProgressComponent = direction === 'vertical' ? DefaultStepperProgressVertical : DefaultStepperProgressHorizontal,
       StepperIconComponent = direction === 'vertical' ? DefaultStepperIconVertical : null,
       StepperHeaderComponent = direction === 'vertical' ? null : DefaultStepperHeaderHorizontal,
-      progressSpringConfig = defaultProgressSpringConfig,
+      progressTimingConfig = defaultProgressTimingConfig,
       animate = true,
       disableAnimateOnMount
     } = mergedProps,
     props = _objectWithoutProperties(mergedProps, _excluded);
-  const hasMounted = useHasMounted();
   const flatStepIds = useMemo(() => flattenSteps(steps).map(step => step.id), [steps]);
 
   // Derive activeStep from activeStepId
@@ -120,69 +129,52 @@ const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
       targetStepId: activeStepId
     })) : -1;
   }, [activeStepId, steps]);
-  const previousComplete = (_usePreviousValue = usePreviousValue(complete)) !== null && _usePreviousValue !== void 0 ? _usePreviousValue : false;
-  const previousActiveStepIndex = (_usePreviousValue2 = usePreviousValue(activeStepIndex)) !== null && _usePreviousValue2 !== void 0 ? _usePreviousValue2 : -1;
-  const [progressSprings, progressSpringsApi] = useSprings(steps.length, index => ({
-    from: {
-      progress: complete ? 1 : 0
-    },
-    config: progressSpringConfig
-  }));
-  useEffect(() => {
-    // update the previous values for next render
-    let stepsToAnimate = [];
-    let isAnimatingForward = false;
 
-    // Case when going from not-complete to complete
-    if (Boolean(complete) !== previousComplete) {
-      if (complete) {
-        // Going to complete: animate remaining steps to filled.
-        // Use previousActiveStepIndex to determine which steps are already filled before the completion state update,
-        const lastFilledIndex = Math.max(activeStepIndex, previousActiveStepIndex);
-        stepsToAnimate = Array.from({
-          length: steps.length - lastFilledIndex - 1
-        }, (_, i) => lastFilledIndex + 1 + i);
-        isAnimatingForward = true;
+  // the target step index for the cascade animation
+  const cascadeTargetIndex = useMemo(() => complete ? steps.length - 1 : activeStepIndex, [complete, steps, activeStepIndex]);
+  // reference to the previous cascade targetIndex
+  const cascadeTargetIndexRef = useRef(cascadeTargetIndex);
+  // the index of the last filled step
+  const [filledStepIndex, setFilledStepIndex] = useState(disableAnimateOnMount ? cascadeTargetIndex : -1);
+  const filledStepTimeoutRef = useRef(null);
+  useEffect(() => {
+    if (filledStepTimeoutRef.current) {
+      clearTimeout(filledStepTimeoutRef.current);
+      filledStepTimeoutRef.current = null;
+    }
+    if (!animate) {
+      if (filledStepIndex !== cascadeTargetIndex) setFilledStepIndex(cascadeTargetIndex);
+    } else if (cascadeTargetIndex < filledStepIndex) {
+      if (cascadeTargetIndexRef.current !== cascadeTargetIndex) {
+        setFilledStepIndex(prev => prev - 1);
+        cascadeTargetIndexRef.current = cascadeTargetIndex;
       } else {
-        // Going from complete: animate from end down to activeStepIndex+1
-        stepsToAnimate = Array.from({
-          length: steps.length - activeStepIndex - 1
-        }, (_, i) => steps.length - 1 - i);
-        isAnimatingForward = false;
+        filledStepTimeoutRef.current = setTimeout(() => setFilledStepIndex(prev => prev - 1), cascadeStaggerMs);
       }
-    }
-
-    // Case for normal step navigation (e.g. step 1 => step 2)
-    else if (activeStepIndex !== previousActiveStepIndex) {
-      if (activeStepIndex > previousActiveStepIndex) {
-        // Forward: animate from previousActiveStepIndex+1 to activeStepIndex
-        stepsToAnimate = Array.from({
-          length: activeStepIndex - previousActiveStepIndex
-        }, (_, i) => previousActiveStepIndex + 1 + i);
-        isAnimatingForward = true;
+    } else if (cascadeTargetIndex > filledStepIndex) {
+      if (cascadeTargetIndexRef.current !== cascadeTargetIndex) {
+        setFilledStepIndex(prev => prev + 1);
+        cascadeTargetIndexRef.current = cascadeTargetIndex;
       } else {
-        // Backward: animate from previousActiveStepIndex down to activeStepIndex+1
-        stepsToAnimate = Array.from({
-          length: previousActiveStepIndex - activeStepIndex
-        }, (_, i) => previousActiveStepIndex - i);
-        isAnimatingForward = false;
+        filledStepTimeoutRef.current = setTimeout(() => setFilledStepIndex(prev => prev + 1), cascadeStaggerMs);
       }
     }
-    const animateNextStep = () => {
-      if (stepsToAnimate.length === 0) return;
-      const stepIndex = stepsToAnimate.shift();
-      if (stepIndex === undefined) return;
-      progressSpringsApi.start(index => index === stepIndex ? {
-        progress: isAnimatingForward ? 1 : 0,
-        config: progressSpringConfig,
-        onRest: animateNextStep,
-        immediate: !animate || disableAnimateOnMount && !hasMounted
-      } : {});
+    return () => {
+      if (filledStepTimeoutRef.current) {
+        clearTimeout(filledStepTimeoutRef.current);
+        filledStepTimeoutRef.current = null;
+      }
     };
-
-    // start the animation loop for relevant springs (stepsToAnimate)
-    animateNextStep();
-  }, [progressSpringsApi, complete, steps.length, steps, activeStepIndex, previousActiveStepIndex, previousComplete, progressSpringConfig, animate, disableAnimateOnMount, hasMounted]);
+  }, [animate, cascadeTargetIndex, filledStepIndex]);
+  const getStepProgress = useCallback(index => {
+    if (!animate) {
+      // if animation is disabled, return 0 if the step index is less than the active step index, otherwise return 1
+      if (filledStepIndex < 0) return 0;
+      return index <= activeStepIndex ? 1 : 0;
+    }
+    if (filledStepIndex < 0) return 0;
+    return index <= filledStepIndex ? 1 : 0;
+  }, [animate, activeStepIndex, filledStepIndex]);
   return /*#__PURE__*/_jsxs(VStack, _objectSpread(_objectSpread({
     ref: ref,
     as: stepperDefaultElement,
@@ -193,6 +185,7 @@ const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
       activeStep: activeStep,
       className: classNames === null || classNames === void 0 ? void 0 : classNames.header,
       complete: complete,
+      disableAnimateOnMount: disableAnimateOnMount,
       flatStepIds: flatStepIds,
       style: styles === null || styles === void 0 ? void 0 : styles.header
     }), /*#__PURE__*/_jsx(Box, {
@@ -225,8 +218,8 @@ const StepperBase = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_props, ref) => {
           flatStepIds: flatStepIds,
           isDescendentActive: isDescendentActive,
           parentStep: null,
-          progress: progressSprings[index].progress,
-          progressSpringConfig: progressSpringConfig,
+          progress: getStepProgress(index),
+          progressTimingConfig: progressTimingConfig,
           setActiveStepLabelElement: setActiveStepLabelElement,
           step: step,
           styles: stepStyles,

package/esm/styles/styleProps.js

@@ -107,6 +107,9 @@ export const dynamicPixelProps = {
   right: 1,
   flexBasis: 1
 };
+
+/** Position-related style props using CSS types. Use this instead of common's PositionStyles for web. */
+
 export const getStyles = (styleProps, inlineStyle) => {
   const style = {};
   let className = '';

package/esm/system/Interactable.css

@@ -1,4 +1,4 @@
-@layer cds{.baseCss-b17wmk8f{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;background-color:var(--interactable-background);border-color:var(--interactable-border-color);}.baseCss-b17wmk8f::-moz-focus-inner{border:0;padding:0;margin:0;}.baseCss-b17wmk8f:hover{background-color:var(--interactable-hovered-background);border-color:var(--interactable-hovered-border-color);}.baseCss-b17wmk8f:hover > *{opacity:var(--interactable-hovered-opacity);}.baseCss-b17wmk8f:active,.baseCss-b17wmk8f[aria-pressed='true']{background-color:var(--interactable-pressed-background);border-color:var(--interactable-pressed-border-color);}.baseCss-b17wmk8f:active > *,.baseCss-b17wmk8f[aria-pressed='true'] > *{opacity:var(--interactable-pressed-opacity);}.baseCss-b17wmk8f:disabled,.baseCss-b17wmk8f[aria-disabled='true']{opacity:0.5;cursor:default;pointer-events:none;touch-action:none;background-color:var(--interactable-disabled-background);border-color:var(--interactable-disabled-border-color);}.baseCss-b17wmk8f:focus{outline:none;}.baseCss-b17wmk8f:focus-visible{outline-style:solid;outline-width:2px;outline-offset:2px;outline-color:var(--color-bgPrimary);}
+@layer cds{.baseCss-b17wmk8f{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-text-decoration:none;text-decoration:none;background-color:var(--inter-bg);border-color:var(--inter-borderColor);}.baseCss-b17wmk8f::-moz-focus-inner{border:0;padding:0;margin:0;}.baseCss-b17wmk8f:hover{background-color:var(--inter-hover-bg);border-color:var(--inter-hover-borderColor);}.baseCss-b17wmk8f:hover > *{opacity:var(--inter-hover-opacity);}.baseCss-b17wmk8f:active,.baseCss-b17wmk8f[aria-pressed='true']{background-color:var(--inter-press-bg);border-color:var(--inter-press-borderColor);}.baseCss-b17wmk8f:active > *,.baseCss-b17wmk8f[aria-pressed='true'] > *{opacity:var(--inter-press-opacity);}.baseCss-b17wmk8f:disabled,.baseCss-b17wmk8f[aria-disabled='true']{opacity:0.5;cursor:default;pointer-events:none;touch-action:none;background-color:var(--inter-disable-bg);border-color:var(--inter-disable-borderColor);}.baseCss-b17wmk8f:focus{outline:none;}.baseCss-b17wmk8f:focus-visible{outline-style:solid;outline-width:2px;outline-offset:2px;outline-color:var(--color-bgPrimary);}
 .blockCss-b1ytinjt{display:block;width:100%;}
 .transparentActiveCss-t10ei5ro:active{background-color:var(--color-transparent);border-color:var(--color-transparent);}
 .transparentWhileInactiveCss-te5q23s{background-color:var(--color-transparent);border-color:var(--color-transparent);}.transparentWhileInactiveCss-te5q23s:disabled,.transparentWhileInactiveCss-te5q23s[aria-disabled='true']{background-color:var(--color-transparent);border-color:var(--color-transparent);}}

package/esm/system/Interactable.js

@@ -10,6 +10,7 @@ import React, { forwardRef, useMemo } from 'react';
 import { getBlendedColor } from '@coinbase/cds-common/color/getBlendedColor';
 import { accessibleOpacityDisabled, opacityDisabled, opacityHovered, opacityPressed } from '@coinbase/cds-common/tokens/interactable';
 import { cx } from '../cx';
+import { useResolveResponsiveProp } from '../hooks/useResolveResponsiveProp';
 import { useTheme } from '../hooks/useTheme';
 import { Box } from '../layout/Box';
 import { interactableBackground, interactableBorderColor, interactableDisabledBackground, interactableDisabledBorderColor, interactableHoveredBackground, interactableHoveredBorderColor, interactableHoveredOpacity, interactablePressedBackground, interactablePressedBorderColor, interactablePressedOpacity } from './interactableCSSProperties';
@@ -59,12 +60,13 @@ export const Interactable = /*#__PURE__*/forwardRef((_ref, ref) => {
     props = _objectWithoutProperties(_ref, _excluded);
   const Component = as !== null && as !== void 0 ? as : interactableDefaultElement;
   const theme = useTheme();
+  const resolvedBorderColor = useResolveResponsiveProp(borderColor);
   const interactableStyle = useMemo(() => _objectSpread(_objectSpread({}, getInteractableStyles({
     theme,
     background,
     blendStyles,
-    borderColor
-  })), style), [style, background, theme, blendStyles, borderColor]);
+    borderColor: resolvedBorderColor
+  })), style), [style, background, theme, blendStyles, resolvedBorderColor]);
   return /*#__PURE__*/_jsx(Box, _objectSpread({
     ref: ref,
     "aria-busy": loading,

package/esm/system/Pressable.css

@@ -1,3 +1,3 @@
 @layer cds{.scaledDownCss-s1o6alxd{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}.scaledDownCss-s1o6alxd:active,.scaledDownCss-s1o6alxd[data-active='true']{-webkit-transform:scale(0.98);-ms-transform:scale(0.98);transform:scale(0.98);}
-.baseCss-b1nrmodp[data-active='true']{background-color:var(--interactable-pressed-background);}.baseCss-b1nrmodp[data-active='true'] > *{opacity:var(--interactable-pressed-opacity);}.baseCss-b1nrmodp[data-loading='true']{opacity:1;background-color:var(--interactable-pressed-background);}.baseCss-b1nrmodp[data-loading='true'] > *{opacity:var(--interactable-pressed-opacity);}
+.baseCss-b1nrmodp[data-active='true']{background-color:var(--inter-press-bg);}.baseCss-b1nrmodp[data-active='true'] > *{opacity:var(--inter-press-opacity);}.baseCss-b1nrmodp[data-loading='true']{opacity:1;background-color:var(--inter-press-bg);}.baseCss-b1nrmodp[data-loading='true'] > *{opacity:var(--inter-press-opacity);}
 .transparentActiveCss-t14zsnbw[data-active='true']{background-color:var(--color-transparent);}}