@coinbase/cds-web 0.0.0 → 8.13.2

package/esm/stepper/DefaultStepperHeaderHorizontal.js

@@ -0,0 +1,87 @@
+const _excluded = ["activeStep", "complete", "flatStepIds", "className", "style", "display", "width", "paddingBottom", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "textTransform"];
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+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, useMemo } from 'react';
+import { animated, useSpring } from '@react-spring/web';
+import { HStack } from '../layout/HStack';
+import { Text } from '../typography/Text';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AnimatedHStack = animated(HStack);
+const displayStyle = {
+  phone: 'flex',
+  tablet: 'none',
+  desktop: 'none'
+};
+export const DefaultStepperHeaderHorizontal = /*#__PURE__*/memo(function DefaultStepperHeaderHorizontal(_ref) {
+  let {
+      activeStep,
+      complete,
+      flatStepIds,
+      className,
+      style,
+      display = displayStyle,
+      width = '100%',
+      paddingBottom = 1.5,
+      font = 'caption',
+      fontFamily = font,
+      fontSize = font,
+      fontWeight = font,
+      lineHeight = font,
+      textTransform
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const spring = useSpring({
+    from: {
+      opacity: 0
+    },
+    to: {
+      opacity: 1
+    },
+    reset: true
+  });
+  const styles = useMemo(() => _objectSpread(_objectSpread({}, style), spring), [style, spring]);
+  const flatStepIndex = activeStep ? flatStepIds.indexOf(activeStep.id) : -1;
+  const emptyText = /*#__PURE__*/_jsx(_Fragment, {
+    children: "\xA0"
+  });
+  return /*#__PURE__*/_jsx(AnimatedHStack, _objectSpread(_objectSpread({
+    "aria-hidden": true,
+    className: className,
+    display: display,
+    font: font,
+    fontFamily: fontFamily,
+    paddingBottom: paddingBottom,
+    position: "relative",
+    style: styles,
+    width: width
+  }, props), {}, {
+    children: /*#__PURE__*/_jsx(Text, {
+      alignItems: "center",
+      display: "flex",
+      font: font,
+      fontFamily: fontFamily,
+      fontSize: fontSize,
+      fontWeight: fontWeight,
+      lineHeight: lineHeight,
+      textTransform: textTransform,
+      children: !activeStep || complete ? emptyText : /*#__PURE__*/_jsxs(HStack, {
+        gap: 1,
+        children: [/*#__PURE__*/_jsxs(Text, {
+          "aria-hidden": true,
+          color: "fgMuted",
+          paddingEnd: 1,
+          children: [flatStepIndex + 1, "/", flatStepIds.length]
+        }), activeStep.label && typeof activeStep.label === 'string' ? /*#__PURE__*/_jsx(Text, {
+          "aria-hidden": true,
+          numberOfLines: 1,
+          children: activeStep.label
+        }) : activeStep.label]
+      })
+    })
+  }));
+});

package/esm/stepper/DefaultStepperIconVertical.js

@@ -0,0 +1,51 @@
+const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "className", "style", "defaultName", "activeName", "descendentActiveName", "visitedName", "completeName", "size", "defaultColor", "activeColor", "descendentActiveColor", "visitedColor", "completeColor"];
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+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 { Icon } from '../icons/Icon';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DefaultStepperIconVertical = /*#__PURE__*/memo(function DefaultStepperIconVertical(_ref) {
+  let {
+      step,
+      parentStep,
+      activeStepId,
+      depth,
+      active,
+      visited,
+      flatStepIds,
+      complete,
+      isDescendentActive,
+      className,
+      style,
+      defaultName = 'outline',
+      activeName = 'outline',
+      descendentActiveName = 'outline',
+      visitedName = 'circleCheckmark',
+      completeName = 'circleCheckmark',
+      size = 's',
+      defaultColor = 'bgLine',
+      activeColor = 'bgLinePrimarySubtle',
+      descendentActiveColor = 'bgLinePrimarySubtle',
+      visitedColor = 'bgPrimary',
+      completeColor = 'bgPrimary'
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  if (depth > 0) return null;
+  return /*#__PURE__*/_jsx(Icon, _objectSpread({
+    active: true,
+    className: className,
+    color: complete ? completeColor : active ? activeColor : isDescendentActive ? descendentActiveColor : visited ? visitedColor : defaultColor,
+    "data-step-active": active,
+    "data-step-complete": complete,
+    "data-step-descendent-active": isDescendentActive,
+    "data-step-visited": visited,
+    name: complete ? completeName : active ? activeName : isDescendentActive ? descendentActiveName : visited ? visitedName : defaultName,
+    size: size,
+    style: style
+  }, props));
+});

package/esm/stepper/DefaultStepperLabelHorizontal.js

@@ -0,0 +1,114 @@
+const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "className", "style", "completedStepAccessibilityLabel", "defaultColor", "activeColor", "descendentActiveColor", "visitedColor", "completeColor", "display", "alignItems", "width", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "textTransform"];
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+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, useMemo } from 'react';
+import useMeasure from 'react-use-measure';
+import { animated, useSpring } from '@react-spring/web';
+import { Box } from '../layout/Box';
+import { HStack } from '../layout/HStack';
+import { Text } from '../typography/Text';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+const AnimatedBox = animated(Box);
+const displayStyle = {
+  phone: 'none',
+  tablet: 'flex',
+  desktop: 'flex'
+};
+export const DefaultStepperLabelHorizontal = /*#__PURE__*/memo(function DefaultStepperLabelHorizontal(_ref) {
+  let {
+      step,
+      parentStep,
+      activeStepId,
+      depth,
+      active,
+      visited,
+      flatStepIds,
+      complete,
+      isDescendentActive,
+      className,
+      style,
+      completedStepAccessibilityLabel,
+      defaultColor = 'fgMuted',
+      activeColor = 'fg',
+      descendentActiveColor = 'fg',
+      visitedColor = 'fgMuted',
+      completeColor = 'fgMuted',
+      display = displayStyle,
+      alignItems = 'center',
+      width = '100%',
+      font = 'caption',
+      fontFamily = font,
+      fontSize = font,
+      fontWeight = font,
+      lineHeight = font,
+      textTransform
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const isStepGroupActive = active || isDescendentActive;
+  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,
+    fontFamily,
+    fontSize,
+    fontWeight,
+    lineHeight,
+    textTransform
+  }), [font, fontFamily, fontSize, fontWeight, lineHeight, textTransform]);
+  const paginationText = useMemo(() => /*#__PURE__*/_jsxs(Text, _objectSpread(_objectSpread({
+    color: defaultColor,
+    paddingEnd: 1
+  }, fontProps), {}, {
+    children: [flatStepIndex + 1, "/", flatStepIds.length]
+  })), [flatStepIndex, flatStepIds.length, defaultColor, fontProps]);
+  const labelElement = useMemo(() => {
+    if (!step.label) return null;
+    return typeof step.label === 'string' ? /*#__PURE__*/_jsx(Text, _objectSpread(_objectSpread({
+      color: complete ? completeColor : active ? activeColor : isDescendentActive ? descendentActiveColor : visited ? visitedColor : defaultColor,
+      numberOfLines: 1
+    }, fontProps), {}, {
+      children: step.label
+    })) : step.label;
+  }, [step.label, complete, active, isDescendentActive, descendentActiveColor, visited, defaultColor, activeColor, visitedColor, completeColor, fontProps]);
+  return /*#__PURE__*/_jsxs(HStack, _objectSpread(_objectSpread({
+    "aria-hidden": true,
+    alignItems: alignItems,
+    className: className,
+    "data-step-active": active,
+    "data-step-complete": complete,
+    "data-step-descendent-active": isDescendentActive,
+    "data-step-visited": visited,
+    display: display,
+    font: font,
+    fontFamily: fontFamily,
+    position: "relative",
+    style: style,
+    width: width
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsx(AnimatedBox, {
+      ref: paginationRef,
+      paddingEnd: 1,
+      style: paginationSpring,
+      children: paginationText
+    }), /*#__PURE__*/_jsx(AnimatedBox, {
+      maxWidth: "calc(100% - ".concat(paginationWidth, "px)"),
+      position: "absolute",
+      style: labelSpring,
+      width: "100%",
+      children: labelElement
+    })]
+  }));
+});

package/esm/stepper/DefaultStepperLabelVertical.js

@@ -0,0 +1,72 @@
+const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "className", "style", "completedStepAccessibilityLabel", "setActiveStepLabelElement", "defaultColor", "activeColor", "descendentActiveColor", "visitedColor", "completeColor", "paddingBottom", "font", "fontFamily", "fontSize", "fontWeight", "lineHeight", "textTransform"];
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+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, useMemo } from 'react';
+import { Box } from '../layout/Box';
+import { Text } from '../typography/Text';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DefaultStepperLabelVertical = /*#__PURE__*/memo(function DefaultStepperLabelVertical(_ref) {
+  let {
+      step,
+      parentStep,
+      activeStepId,
+      depth,
+      active,
+      visited,
+      flatStepIds,
+      complete,
+      isDescendentActive,
+      className,
+      style,
+      completedStepAccessibilityLabel,
+      setActiveStepLabelElement,
+      defaultColor = 'fgMuted',
+      activeColor = 'fgPrimary',
+      descendentActiveColor = 'fgPrimary',
+      visitedColor = 'fgMuted',
+      completeColor = 'fgMuted',
+      paddingBottom = 3,
+      font = depth === 0 ? 'label1' : 'label2',
+      fontFamily = font,
+      fontSize = font,
+      fontWeight = font,
+      lineHeight = font,
+      textTransform
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const labelElement = useMemo(() => typeof step.label === 'string' ? /*#__PURE__*/_jsx(Text, {
+    color: complete ? completeColor : active ? activeColor : isDescendentActive ? descendentActiveColor : visited ? visitedColor : defaultColor,
+    font: font,
+    fontFamily: fontFamily,
+    fontSize: fontSize,
+    fontWeight: fontWeight,
+    lineHeight: lineHeight,
+    numberOfLines: 1,
+    textTransform: textTransform,
+    children: step.label
+  }) : step.label, [active, visited, completeColor, activeColor, isDescendentActive, descendentActiveColor, complete, visitedColor, defaultColor, font, fontFamily, fontSize, fontWeight, lineHeight, textTransform, step.label]);
+  const registerActiveStepLabel = useCallback(node => {
+    if (!active) return;
+    if (node) setActiveStepLabelElement(node);
+  }, [active, setActiveStepLabelElement]);
+  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
+    ref: registerActiveStepLabel,
+    "aria-hidden": true,
+    className: className,
+    "data-step-active": active,
+    "data-step-complete": complete,
+    "data-step-descendent-active": isDescendentActive,
+    "data-step-visited": visited,
+    font: font,
+    fontFamily: fontFamily,
+    paddingBottom: paddingBottom,
+    style: style
+  }, props), {}, {
+    children: !!step.label && labelElement
+  }));
+});

package/esm/stepper/DefaultStepperProgressHorizontal.js

@@ -0,0 +1,65 @@
+const _excluded = ["step", "parentStep", "progress", "activeStepId", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "progressSpringConfig", "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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+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 { Box } from '../layout/Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DefaultStepperProgressHorizontal = /*#__PURE__*/memo(function DefaultStepperProgressHorizontal(_ref) {
+  let {
+      step,
+      parentStep,
+      progress,
+      activeStepId,
+      depth,
+      active,
+      visited,
+      flatStepIds,
+      complete,
+      isDescendentActive,
+      progressSpringConfig,
+      className,
+      style,
+      background = 'bgLine',
+      defaultFill = 'bgPrimary',
+      activeFill = 'bgPrimary',
+      descendentActiveFill = 'bgPrimary',
+      visitedFill = 'bgLinePrimarySubtle',
+      completeFill = 'bgLinePrimarySubtle',
+      width = '100%',
+      borderRadius = 200,
+      height = 4
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
+    background: background,
+    borderRadius: borderRadius,
+    className: className,
+    "data-step-active": active,
+    "data-step-complete": complete,
+    "data-step-descendent-active": isDescendentActive,
+    "data-step-visited": visited,
+    height: height,
+    style: style,
+    width: width
+  }, props), {}, {
+    children: /*#__PURE__*/_jsx(Box, {
+      borderRadius: borderRadius,
+      color: complete ? completeFill : active ? activeFill : isDescendentActive ? descendentActiveFill : visited ? visitedFill : defaultFill,
+      height: "100%",
+      overflow: "hidden",
+      width: "100%",
+      children: /*#__PURE__*/_jsx(animated.div, {
+        style: {
+          backgroundColor: 'currentColor',
+          width: progress.to(p => "".concat(p * 100, "%"))
+        }
+      })
+    })
+  }));
+});

package/esm/stepper/DefaultStepperProgressVertical.js

@@ -0,0 +1,111 @@
+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"];
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+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 { defaultRect } from '@coinbase/cds-common/types/Rect';
+import { animated, to, useSpring } from '@react-spring/web';
+import { useHasMounted } from '../hooks/useHasMounted';
+import { Box } from '../layout/Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DefaultStepperProgressVertical = /*#__PURE__*/memo(function DefaultStepperProgressVertical(_ref) {
+  let {
+      step,
+      parentStep,
+      activeStepId,
+      depth,
+      active,
+      visited,
+      flatStepIds,
+      complete,
+      isDescendentActive,
+      className,
+      style,
+      activeStepLabelElement,
+      progressSpringConfig,
+      animate = true,
+      disableAnimateOnMount,
+      background = 'bgLine',
+      defaultFill = 'bgLinePrimarySubtle',
+      activeFill = 'bgLinePrimarySubtle',
+      descendentActiveFill = 'bgLinePrimarySubtle',
+      visitedFill = 'bgPrimary',
+      completeFill = 'bgPrimary',
+      minHeight = 16,
+      width = 2,
+      progress
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const hasMounted = useHasMounted();
+  const containerRef = useRef(null);
+  const [renderTick, setRenderTick] = useState(0);
+  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 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) {
+      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;
+    }
+    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]);
+  if (depth > 0 || isLastStep) return null;
+  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
+    ref: containerRef,
+    background: background,
+    className: className,
+    "data-step-active": active,
+    "data-step-complete": complete,
+    "data-step-descendent-active": isDescendentActive,
+    "data-step-visited": visited,
+    flexGrow: 1,
+    minHeight: minHeight,
+    position: "relative",
+    style: style,
+    width: width
+  }, props), {}, {
+    children: /*#__PURE__*/_jsx(Box, {
+      color: complete ? completeFill : active ? activeFill : isDescendentActive ? descendentActiveFill : visited ? visitedFill : defaultFill,
+      children: /*#__PURE__*/_jsx(animated.div, {
+        style: {
+          position: 'absolute',
+          width: '100%',
+          backgroundColor: 'currentColor',
+          height: to([progress, fillHeight], (p, f) => "".concat(p * f, "px"))
+        }
+      })
+    })
+  }));
+});