@coinbase/cds-web 0.0.0 → 8.13.2

package/esm/stepper/DefaultStepperStepHorizontal.js

@@ -0,0 +1,173 @@
+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"];
+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 { containsStep, isStepVisited } from '@coinbase/cds-common/stepper/utils';
+import { cx } from '../cx';
+import { HStack, VStack } from '../layout';
+import { DefaultStepperLabelHorizontal } from './DefaultStepperLabelHorizontal';
+import { DefaultStepperProgressHorizontal } from './DefaultStepperProgressHorizontal';
+import { DefaultStepperSubstepContainerHorizontal } from './DefaultStepperSubstepContainerHorizontal';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DefaultStepperStepHorizontal = /*#__PURE__*/memo(function DefaultStepperStepHorizontal(_ref) {
+  var _step$StepperIconComp, _step$StepperLabelCom, _step$StepperProgress, _step$StepperSubstepC;
+  let {
+      step,
+      parentStep,
+      activeStepId,
+      depth,
+      active,
+      visited,
+      flatStepIds,
+      complete,
+      isDescendentActive,
+      className,
+      style,
+      completedStepAccessibilityLabel,
+      styles,
+      classNames,
+      progress,
+      activeStepLabelElement,
+      setActiveStepLabelElement,
+      progressSpringConfig,
+      animate,
+      disableAnimateOnMount,
+      StepperStepComponent = DefaultStepperStepHorizontal,
+      StepperLabelComponent = DefaultStepperLabelHorizontal,
+      StepperProgressComponent = DefaultStepperProgressHorizontal,
+      StepperSubstepContainerComponent = DefaultStepperSubstepContainerHorizontal,
+      StepperIconComponent
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const RenderedIconComponent = (_step$StepperIconComp = step.StepperIconComponent) !== null && _step$StepperIconComp !== void 0 ? _step$StepperIconComp : StepperIconComponent;
+  const RenderedLabelComponent = (_step$StepperLabelCom = step.StepperLabelComponent) !== null && _step$StepperLabelCom !== void 0 ? _step$StepperLabelCom : StepperLabelComponent;
+  const RenderedProgressComponent = (_step$StepperProgress = step.StepperProgressComponent) !== null && _step$StepperProgress !== void 0 ? _step$StepperProgress : StepperProgressComponent;
+  const RenderedSubstepContainerComponent = (_step$StepperSubstepC = step.StepperSubstepContainerComponent) !== null && _step$StepperSubstepC !== void 0 ? _step$StepperSubstepC : StepperSubstepContainerComponent;
+  const flatStepIndex = flatStepIds.indexOf(step.id);
+  const accessibilityLabel = useMemo(() => {
+    var _ref2, _step$accessibilityLa;
+    const stepLabel = typeof step.label === 'string' ? step.label : null;
+    const baseLabel = (_ref2 = (_step$accessibilityLa = step.accessibilityLabel) !== null && _step$accessibilityLa !== void 0 ? _step$accessibilityLa : stepLabel) !== null && _ref2 !== void 0 ? _ref2 : "Step ".concat(flatStepIndex + 1);
+    return "".concat(baseLabel).concat(visited || complete ? " (".concat(completedStepAccessibilityLabel, ")") : '');
+  }, [step.accessibilityLabel, step.label, flatStepIndex, visited, complete, completedStepAccessibilityLabel]);
+  const containerStyle = useMemo(() => {
+    return _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.step);
+  }, [style, styles === null || styles === void 0 ? void 0 : styles.step]);
+  return /*#__PURE__*/_jsxs(VStack, _objectSpread(_objectSpread({
+    accessibilityLabel: accessibilityLabel,
+    "aria-current": step.id === activeStepId ? 'step' : undefined,
+    as: "li",
+    className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.step),
+    "data-step-active": active,
+    "data-step-complete": complete,
+    "data-step-descendent-active": isDescendentActive,
+    "data-step-visited": visited,
+    flexBasis: 0,
+    flexGrow: 1,
+    gap: 0.5,
+    style: containerStyle
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsxs(HStack, {
+      "aria-hidden": true,
+      alignItems: "center",
+      children: [RenderedIconComponent && /*#__PURE__*/_jsx(RenderedIconComponent, {
+        active: active,
+        activeStepId: activeStepId,
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.icon,
+        complete: complete,
+        depth: depth,
+        flatStepIds: flatStepIds,
+        isDescendentActive: isDescendentActive,
+        parentStep: parentStep,
+        step: step,
+        style: styles === null || styles === void 0 ? void 0 : styles.icon,
+        visited: visited
+      }), RenderedProgressComponent && /*#__PURE__*/_jsx(RenderedProgressComponent, {
+        active: active,
+        activeStepId: activeStepId,
+        activeStepLabelElement: activeStepLabelElement,
+        animate: animate,
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.progress,
+        complete: complete,
+        depth: depth,
+        disableAnimateOnMount: disableAnimateOnMount,
+        flatStepIds: flatStepIds,
+        isDescendentActive: isDescendentActive,
+        parentStep: parentStep,
+        progress: progress,
+        progressSpringConfig: progressSpringConfig,
+        step: step,
+        style: styles === null || styles === void 0 ? void 0 : styles.progress,
+        visited: visited
+      })]
+    }), RenderedLabelComponent && /*#__PURE__*/_jsx(RenderedLabelComponent, {
+      active: active,
+      activeStepId: activeStepId,
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.label,
+      complete: complete,
+      completedStepAccessibilityLabel: completedStepAccessibilityLabel,
+      depth: depth,
+      flatStepIds: flatStepIds,
+      isDescendentActive: isDescendentActive,
+      parentStep: parentStep,
+      setActiveStepLabelElement: setActiveStepLabelElement,
+      step: step,
+      style: styles === null || styles === void 0 ? void 0 : styles.label,
+      visited: visited
+    }), step.subSteps && RenderedSubstepContainerComponent && /*#__PURE__*/_jsx(RenderedSubstepContainerComponent, {
+      active: active,
+      activeStepId: activeStepId,
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.substepContainer,
+      complete: complete,
+      depth: depth,
+      flatStepIds: flatStepIds,
+      isDescendentActive: isDescendentActive,
+      parentStep: parentStep,
+      step: step,
+      style: styles === null || styles === void 0 ? void 0 : styles.substepContainer,
+      visited: visited,
+      children: step.subSteps.map((subStep, index) => {
+        var _subStep$Component;
+        const RenderedStepComponent = (_subStep$Component = subStep.Component) !== null && _subStep$Component !== void 0 ? _subStep$Component : StepperStepComponent;
+        const isDescendentActive = activeStepId ? containsStep({
+          step: subStep,
+          targetStepId: activeStepId
+        }) : false;
+        return RenderedStepComponent && /*#__PURE__*/_jsx(RenderedStepComponent, {
+          StepperIconComponent: StepperIconComponent,
+          StepperLabelComponent: StepperLabelComponent,
+          StepperProgressComponent: StepperProgressComponent,
+          StepperStepComponent: StepperStepComponent,
+          StepperSubstepContainerComponent: StepperSubstepContainerComponent,
+          active: subStep.id === activeStepId,
+          activeStepId: activeStepId,
+          activeStepLabelElement: activeStepLabelElement,
+          animate: animate,
+          classNames: classNames,
+          complete: complete,
+          completedStepAccessibilityLabel: completedStepAccessibilityLabel,
+          depth: depth + 1,
+          disableAnimateOnMount: disableAnimateOnMount,
+          flatStepIds: flatStepIds,
+          isDescendentActive: isDescendentActive,
+          parentStep: step,
+          progress: progress,
+          progressSpringConfig: progressSpringConfig,
+          setActiveStepLabelElement: setActiveStepLabelElement,
+          step: subStep,
+          styles: styles,
+          visited: activeStepId ? isStepVisited({
+            step: subStep,
+            activeStepId,
+            flatStepIds
+          }) : false
+        }, subStep.id);
+      })
+    })]
+  }));
+});

package/esm/stepper/DefaultStepperStepVertical.js

@@ -0,0 +1,179 @@
+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"];
+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 { containsStep, isStepVisited } from '@coinbase/cds-common/stepper/utils';
+import { cx } from '../cx';
+import { HStack, VStack } from '../layout';
+import { DefaultStepperIconVertical } from './DefaultStepperIconVertical';
+import { DefaultStepperLabelVertical } from './DefaultStepperLabelVertical';
+import { DefaultStepperProgressVertical } from './DefaultStepperProgressVertical';
+import { DefaultStepperSubstepContainerVertical } from './DefaultStepperSubstepContainerVertical';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const DefaultStepperStepVertical = /*#__PURE__*/memo(function DefaultStepperStepVertical(_ref) {
+  var _step$StepperIconComp, _step$StepperLabelCom, _step$StepperProgress, _step$StepperSubstepC;
+  let {
+      step,
+      parentStep,
+      activeStepId,
+      depth,
+      active,
+      visited,
+      flatStepIds,
+      complete,
+      isDescendentActive,
+      className,
+      style,
+      completedStepAccessibilityLabel,
+      styles,
+      classNames,
+      progress,
+      activeStepLabelElement,
+      setActiveStepLabelElement,
+      progressSpringConfig,
+      animate,
+      disableAnimateOnMount,
+      StepperStepComponent = DefaultStepperStepVertical,
+      StepperLabelComponent = DefaultStepperLabelVertical,
+      StepperProgressComponent = DefaultStepperProgressVertical,
+      StepperIconComponent = DefaultStepperIconVertical,
+      StepperSubstepContainerComponent = DefaultStepperSubstepContainerVertical
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const flatStepIndex = flatStepIds.indexOf(step.id);
+  const RenderedIconComponent = (_step$StepperIconComp = step.StepperIconComponent) !== null && _step$StepperIconComp !== void 0 ? _step$StepperIconComp : StepperIconComponent;
+  const RenderedLabelComponent = (_step$StepperLabelCom = step.StepperLabelComponent) !== null && _step$StepperLabelCom !== void 0 ? _step$StepperLabelCom : StepperLabelComponent;
+  const RenderedProgressComponent = (_step$StepperProgress = step.StepperProgressComponent) !== null && _step$StepperProgress !== void 0 ? _step$StepperProgress : StepperProgressComponent;
+  const RenderedSubstepContainerComponent = (_step$StepperSubstepC = step.StepperSubstepContainerComponent) !== null && _step$StepperSubstepC !== void 0 ? _step$StepperSubstepC : StepperSubstepContainerComponent;
+  const accessibilityLabel = useMemo(() => {
+    var _ref2, _step$accessibilityLa;
+    const stepLabel = typeof step.label === 'string' ? step.label : null;
+    const baseLabel = (_ref2 = (_step$accessibilityLa = step.accessibilityLabel) !== null && _step$accessibilityLa !== void 0 ? _step$accessibilityLa : stepLabel) !== null && _ref2 !== void 0 ? _ref2 : "Step ".concat(flatStepIndex + 1);
+    return "".concat(baseLabel).concat(visited || complete ? " (".concat(completedStepAccessibilityLabel, ")") : '');
+  }, [step.accessibilityLabel, step.label, flatStepIndex, visited, complete, completedStepAccessibilityLabel]);
+  const containerStyle = useMemo(() => {
+    return _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.step);
+  }, [style, styles === null || styles === void 0 ? void 0 : styles.step]);
+  return /*#__PURE__*/_jsx(VStack, _objectSpread(_objectSpread({
+    accessibilityLabel: accessibilityLabel,
+    "aria-current": step.id === activeStepId ? 'step' : undefined,
+    as: "li",
+    className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.step),
+    "data-step-active": active,
+    "data-step-complete": complete,
+    "data-step-descendent-active": isDescendentActive,
+    "data-step-visited": visited,
+    style: containerStyle
+  }, props), {}, {
+    children: /*#__PURE__*/_jsxs(HStack, {
+      children: [/*#__PURE__*/_jsxs(VStack, {
+        "aria-hidden": true,
+        alignItems: "center",
+        children: [RenderedIconComponent && /*#__PURE__*/_jsx(RenderedIconComponent, {
+          active: active,
+          activeStepId: activeStepId,
+          className: classNames === null || classNames === void 0 ? void 0 : classNames.icon,
+          complete: complete,
+          depth: depth,
+          flatStepIds: flatStepIds,
+          isDescendentActive: isDescendentActive,
+          parentStep: parentStep,
+          step: step,
+          style: styles === null || styles === void 0 ? void 0 : styles.icon,
+          visited: visited
+        }), RenderedProgressComponent && /*#__PURE__*/_jsx(RenderedProgressComponent, {
+          active: active,
+          activeStepId: activeStepId,
+          activeStepLabelElement: activeStepLabelElement,
+          animate: animate,
+          className: classNames === null || classNames === void 0 ? void 0 : classNames.progress,
+          complete: complete,
+          depth: depth,
+          disableAnimateOnMount: disableAnimateOnMount,
+          flatStepIds: flatStepIds,
+          isDescendentActive: isDescendentActive,
+          parentStep: parentStep,
+          progress: progress,
+          progressSpringConfig: progressSpringConfig,
+          step: step,
+          style: styles === null || styles === void 0 ? void 0 : styles.progress,
+          visited: visited
+        })]
+      }), /*#__PURE__*/_jsxs(VStack, {
+        flexShrink: 1,
+        style: {
+          paddingInlineStart: "calc(".concat(depth + 2, " * var(--space-1))")
+        },
+        children: [RenderedLabelComponent && /*#__PURE__*/_jsx(RenderedLabelComponent, {
+          active: active,
+          activeStepId: activeStepId,
+          className: classNames === null || classNames === void 0 ? void 0 : classNames.label,
+          complete: complete,
+          completedStepAccessibilityLabel: completedStepAccessibilityLabel,
+          depth: depth,
+          flatStepIds: flatStepIds,
+          isDescendentActive: isDescendentActive,
+          parentStep: parentStep,
+          setActiveStepLabelElement: setActiveStepLabelElement,
+          step: step,
+          style: styles === null || styles === void 0 ? void 0 : styles.label,
+          visited: visited
+        }), step.subSteps && RenderedSubstepContainerComponent && /*#__PURE__*/_jsx(RenderedSubstepContainerComponent, {
+          active: active,
+          activeStepId: activeStepId,
+          className: classNames === null || classNames === void 0 ? void 0 : classNames.substepContainer,
+          complete: complete,
+          depth: depth,
+          flatStepIds: flatStepIds,
+          isDescendentActive: isDescendentActive,
+          parentStep: parentStep,
+          step: step,
+          style: styles === null || styles === void 0 ? void 0 : styles.substepContainer,
+          visited: visited,
+          children: step.subSteps.map((subStep, index) => {
+            var _subStep$Component;
+            const RenderedStepComponent = (_subStep$Component = subStep.Component) !== null && _subStep$Component !== void 0 ? _subStep$Component : StepperStepComponent;
+            const isDescendentActive = activeStepId ? containsStep({
+              step: subStep,
+              targetStepId: activeStepId
+            }) : false;
+            return RenderedStepComponent && /*#__PURE__*/_jsx(RenderedStepComponent, {
+              StepperIconComponent: StepperIconComponent,
+              StepperLabelComponent: StepperLabelComponent,
+              StepperProgressComponent: StepperProgressComponent,
+              StepperStepComponent: StepperStepComponent,
+              StepperSubstepContainerComponent: StepperSubstepContainerComponent,
+              active: activeStepId ? subStep.id === activeStepId : false,
+              activeStepId: activeStepId,
+              activeStepLabelElement: activeStepLabelElement,
+              animate: animate,
+              classNames: classNames,
+              complete: complete,
+              completedStepAccessibilityLabel: completedStepAccessibilityLabel,
+              depth: depth + 1,
+              disableAnimateOnMount: disableAnimateOnMount,
+              flatStepIds: flatStepIds,
+              isDescendentActive: isDescendentActive,
+              parentStep: step,
+              progress: progress,
+              progressSpringConfig: progressSpringConfig,
+              setActiveStepLabelElement: setActiveStepLabelElement,
+              step: subStep,
+              styles: styles,
+              visited: activeStepId ? isStepVisited({
+                step: subStep,
+                activeStepId,
+                flatStepIds
+              }) : false
+            }, subStep.id);
+          })
+        })]
+      })]
+    })
+  }));
+});

package/esm/stepper/DefaultStepperSubstepContainerHorizontal.js

@@ -0,0 +1,37 @@
+const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "className", "style", "children"];
+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 { HStack } from '../layout';
+import { horizontalStepGap } from './Stepper';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DefaultStepperSubstepContainerHorizontal = /*#__PURE__*/memo(_ref => {
+  let {
+      step,
+      parentStep,
+      activeStepId,
+      depth,
+      active,
+      visited,
+      flatStepIds,
+      complete,
+      isDescendentActive,
+      className,
+      style,
+      children
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(HStack, _objectSpread(_objectSpread({
+    as: "ol",
+    className: className,
+    gap: horizontalStepGap,
+    style: style
+  }, props), {}, {
+    children: children
+  }));
+});

package/esm/stepper/DefaultStepperSubstepContainerVertical.js

@@ -0,0 +1,35 @@
+const _excluded = ["step", "parentStep", "activeStepId", "depth", "active", "visited", "flatStepIds", "complete", "isDescendentActive", "className", "style", "children"];
+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 { VStack } from '../layout';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const DefaultStepperSubstepContainerVertical = /*#__PURE__*/memo(_ref => {
+  let {
+      step,
+      parentStep,
+      activeStepId,
+      depth,
+      active,
+      visited,
+      flatStepIds,
+      complete,
+      isDescendentActive,
+      className,
+      style,
+      children
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(VStack, _objectSpread(_objectSpread({
+    as: "ol",
+    className: className,
+    style: style
+  }, props), {}, {
+    children: children
+  }));
+});