@xsolla/xui-b2b-stepper 0.147.1

package/web/index.mjs

@@ -0,0 +1,972 @@
+// src/Stepper.tsx
+import { forwardRef } from "react";
+
+// ../../foundation/primitives-web/src/Box.tsx
+import React2 from "react";
+import styled from "styled-components";
+
+// ../../foundation/primitives-web/src/filterDOMProps.ts
+import React from "react";
+
+// ../../../node_modules/@emotion/memoize/dist/memoize.esm.js
+function memoize(fn) {
+  var cache = {};
+  return function(arg) {
+    if (cache[arg] === void 0) cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+var memoize_esm_default = memoize;
+
+// ../../../node_modules/@emotion/is-prop-valid/dist/is-prop-valid.esm.js
+var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|inert|itemProp|itemScope|itemType|itemID|itemRef|on|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/;
+var index = memoize_esm_default(
+  function(prop) {
+    return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110 && prop.charCodeAt(2) < 91;
+  }
+  /* Z+1 */
+);
+var is_prop_valid_esm_default = index;
+
+// ../../foundation/primitives-web/src/filterDOMProps.ts
+var ADDITIONAL_BLOCKED_PROPS = /* @__PURE__ */ new Set([
+  // RN-only event handlers (pass isPropValid's on* pattern)
+  "onPress",
+  "onChangeText",
+  "onLayout",
+  "onMoveShouldSetResponder",
+  "onResponderGrant",
+  "onResponderMove",
+  "onResponderRelease",
+  "onResponderTerminate",
+  // SVG attributes that pass isPropValid
+  "strokeWidth",
+  // CSS properties that pass isPropValid but are used as component props
+  "overflow",
+  "cursor",
+  "fontSize",
+  "fontWeight",
+  "fontFamily",
+  "textDecoration"
+]);
+function shouldForwardProp(key) {
+  if (ADDITIONAL_BLOCKED_PROPS.has(key)) return false;
+  return is_prop_valid_esm_default(key);
+}
+function createFilteredElement(defaultTag) {
+  const Component = React.forwardRef(
+    ({ children, elementType, ...props }, ref) => {
+      const Tag = elementType || defaultTag;
+      const htmlProps = {};
+      for (const key of Object.keys(props)) {
+        if (shouldForwardProp(key)) {
+          htmlProps[key] = props[key];
+        }
+      }
+      return React.createElement(
+        Tag,
+        { ref, ...htmlProps },
+        children
+      );
+    }
+  );
+  Component.displayName = `Filtered(${defaultTag})`;
+  return Component;
+}
+
+// ../../foundation/primitives-web/src/Box.tsx
+import { jsx } from "react/jsx-runtime";
+var FilteredDiv = createFilteredElement("div");
+var StyledBox = styled(FilteredDiv)`
+  display: flex;
+  box-sizing: border-box;
+  background-color: ${(props) => props.backgroundColor || "transparent"};
+  border-color: ${(props) => props.borderColor || "transparent"};
+  border-width: ${(props) => typeof props.borderWidth === "number" ? `${props.borderWidth}px` : props.borderWidth || 0};
+
+  ${(props) => props.borderBottomWidth !== void 0 && `
+    border-bottom-width: ${typeof props.borderBottomWidth === "number" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};
+    border-bottom-color: ${props.borderBottomColor || props.borderColor || "transparent"};
+    border-bottom-style: solid;
+  `}
+  ${(props) => props.borderTopWidth !== void 0 && `
+    border-top-width: ${typeof props.borderTopWidth === "number" ? `${props.borderTopWidth}px` : props.borderTopWidth};
+    border-top-color: ${props.borderTopColor || props.borderColor || "transparent"};
+    border-top-style: solid;
+  `}
+  ${(props) => props.borderLeftWidth !== void 0 && `
+    border-left-width: ${typeof props.borderLeftWidth === "number" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};
+    border-left-color: ${props.borderLeftColor || props.borderColor || "transparent"};
+    border-left-style: solid;
+  `}
+  ${(props) => props.borderRightWidth !== void 0 && `
+    border-right-width: ${typeof props.borderRightWidth === "number" ? `${props.borderRightWidth}px` : props.borderRightWidth};
+    border-right-color: ${props.borderRightColor || props.borderColor || "transparent"};
+    border-right-style: solid;
+  `}
+
+  border-style: ${(props) => props.borderStyle || (props.borderWidth || props.borderBottomWidth || props.borderTopWidth || props.borderLeftWidth || props.borderRightWidth ? "solid" : "none")};
+  border-radius: ${(props) => typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius || 0};
+  height: ${(props) => typeof props.height === "number" ? `${props.height}px` : props.height || "auto"};
+  width: ${(props) => typeof props.width === "number" ? `${props.width}px` : props.width || "auto"};
+  min-width: ${(props) => typeof props.minWidth === "number" ? `${props.minWidth}px` : props.minWidth || "auto"};
+  min-height: ${(props) => typeof props.minHeight === "number" ? `${props.minHeight}px` : props.minHeight || "auto"};
+  max-width: ${(props) => typeof props.maxWidth === "number" ? `${props.maxWidth}px` : props.maxWidth || "none"};
+  max-height: ${(props) => typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight || "none"};
+
+  padding: ${(props) => typeof props.padding === "number" ? `${props.padding}px` : props.padding || 0};
+  ${(props) => props.paddingHorizontal && `
+    padding-left: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
+    padding-right: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
+  `}
+  ${(props) => props.paddingVertical && `
+    padding-top: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
+    padding-bottom: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
+  `}
+  ${(props) => props.paddingTop !== void 0 && `padding-top: ${typeof props.paddingTop === "number" ? `${props.paddingTop}px` : props.paddingTop};`}
+  ${(props) => props.paddingBottom !== void 0 && `padding-bottom: ${typeof props.paddingBottom === "number" ? `${props.paddingBottom}px` : props.paddingBottom};`}
+  ${(props) => props.paddingLeft !== void 0 && `padding-left: ${typeof props.paddingLeft === "number" ? `${props.paddingLeft}px` : props.paddingLeft};`}
+  ${(props) => props.paddingRight !== void 0 && `padding-right: ${typeof props.paddingRight === "number" ? `${props.paddingRight}px` : props.paddingRight};`}
+
+  margin: ${(props) => typeof props.margin === "number" ? `${props.margin}px` : props.margin || 0};
+  ${(props) => props.marginTop !== void 0 && `margin-top: ${typeof props.marginTop === "number" ? `${props.marginTop}px` : props.marginTop};`}
+  ${(props) => props.marginBottom !== void 0 && `margin-bottom: ${typeof props.marginBottom === "number" ? `${props.marginBottom}px` : props.marginBottom};`}
+  ${(props) => props.marginLeft !== void 0 && `margin-left: ${typeof props.marginLeft === "number" ? `${props.marginLeft}px` : props.marginLeft};`}
+  ${(props) => props.marginRight !== void 0 && `margin-right: ${typeof props.marginRight === "number" ? `${props.marginRight}px` : props.marginRight};`}
+
+  flex-direction: ${(props) => props.flexDirection || "column"};
+  flex-wrap: ${(props) => props.flexWrap || "nowrap"};
+  align-items: ${(props) => props.alignItems || "stretch"};
+  justify-content: ${(props) => props.justifyContent || "flex-start"};
+  cursor: ${(props) => props.cursor ? props.cursor : props.onClick || props.onPress ? "pointer" : "inherit"};
+  position: ${(props) => props.position || "static"};
+  top: ${(props) => typeof props.top === "number" ? `${props.top}px` : props.top};
+  bottom: ${(props) => typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom};
+  left: ${(props) => typeof props.left === "number" ? `${props.left}px` : props.left};
+  right: ${(props) => typeof props.right === "number" ? `${props.right}px` : props.right};
+  flex: ${(props) => props.flex};
+  flex-shrink: ${(props) => props.flexShrink ?? 1};
+  gap: ${(props) => typeof props.gap === "number" ? `${props.gap}px` : props.gap || 0};
+  align-self: ${(props) => props.alignSelf || "auto"};
+  overflow: ${(props) => props.overflow || "visible"};
+  overflow-x: ${(props) => props.overflowX || "visible"};
+  overflow-y: ${(props) => props.overflowY || "visible"};
+  z-index: ${(props) => props.zIndex};
+  opacity: ${(props) => props.disabled ? 0.5 : 1};
+  pointer-events: ${(props) => props.disabled ? "none" : "auto"};
+
+  &:hover {
+    ${(props) => props.hoverStyle?.backgroundColor && `background-color: ${props.hoverStyle.backgroundColor};`}
+    ${(props) => props.hoverStyle?.borderColor && `border-color: ${props.hoverStyle.borderColor};`}
+  }
+
+  &:active {
+    ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
+  }
+`;
+var Box = React2.forwardRef(
+  ({
+    children,
+    onPress,
+    onKeyDown,
+    onKeyUp,
+    role,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-current": ariaCurrent,
+    "aria-disabled": ariaDisabled,
+    "aria-live": ariaLive,
+    "aria-busy": ariaBusy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-expanded": ariaExpanded,
+    "aria-haspopup": ariaHasPopup,
+    "aria-pressed": ariaPressed,
+    "aria-controls": ariaControls,
+    tabIndex,
+    as,
+    src,
+    alt,
+    type,
+    disabled,
+    id,
+    testID,
+    "data-testid": dataTestId,
+    ...props
+  }, ref) => {
+    if (as === "img" && src) {
+      return /* @__PURE__ */ jsx(
+        "img",
+        {
+          src,
+          alt: alt || "",
+          style: {
+            display: "block",
+            objectFit: "cover",
+            width: typeof props.width === "number" ? `${props.width}px` : props.width,
+            height: typeof props.height === "number" ? `${props.height}px` : props.height,
+            borderRadius: typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius,
+            position: props.position,
+            top: typeof props.top === "number" ? `${props.top}px` : props.top,
+            left: typeof props.left === "number" ? `${props.left}px` : props.left,
+            right: typeof props.right === "number" ? `${props.right}px` : props.right,
+            bottom: typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom
+          }
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      StyledBox,
+      {
+        ref,
+        elementType: as,
+        id,
+        type: as === "button" ? type || "button" : void 0,
+        disabled: as === "button" ? disabled : void 0,
+        onClick: onPress,
+        onKeyDown,
+        onKeyUp,
+        role,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-current": ariaCurrent,
+        "aria-disabled": ariaDisabled,
+        "aria-busy": ariaBusy,
+        "aria-describedby": ariaDescribedBy,
+        "aria-expanded": ariaExpanded,
+        "aria-haspopup": ariaHasPopup,
+        "aria-pressed": ariaPressed,
+        "aria-controls": ariaControls,
+        "aria-live": ariaLive,
+        tabIndex: tabIndex !== void 0 ? tabIndex : void 0,
+        "data-testid": dataTestId || testID,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Box.displayName = "Box";
+
+// ../../foundation/primitives-web/src/Text.tsx
+import styled2 from "styled-components";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var FilteredSpan = createFilteredElement("span");
+var StyledText = styled2(FilteredSpan)`
+  color: ${(props) => props.color || "inherit"};
+  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
+  font-weight: ${(props) => props.fontWeight || "normal"};
+  font-family: ${(props) => props.fontFamily || '"Aktiv Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'};
+  line-height: ${(props) => typeof props.lineHeight === "number" ? `${props.lineHeight}px` : props.lineHeight || "inherit"};
+  white-space: ${(props) => props.whiteSpace || "normal"};
+  text-align: ${(props) => props.textAlign || "inherit"};
+  text-decoration: ${(props) => props.textDecoration || "none"};
+`;
+var Text = ({
+  style,
+  className,
+  id,
+  role,
+  numberOfLines: _numberOfLines,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx2(
+    StyledText,
+    {
+      ...props,
+      style,
+      className,
+      id,
+      role
+    }
+  );
+};
+
+// ../../foundation/primitives-web/src/Spinner.tsx
+import styled3, { keyframes } from "styled-components";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var rotate = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+`;
+var FilteredDiv2 = createFilteredElement("div");
+var StyledSpinner = styled3(FilteredDiv2)`
+  width: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
+  height: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
+  border: ${(props) => props.strokeWidth || 2}px solid
+    ${(props) => props.color || "currentColor"};
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: ${rotate} 1s linear infinite;
+`;
+var Spinner = ({
+  role = "status",
+  "aria-label": ariaLabel,
+  "aria-live": ariaLive = "polite",
+  "aria-describedby": ariaDescribedBy,
+  testID,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx3(
+    StyledSpinner,
+    {
+      role,
+      "aria-label": ariaLabel,
+      "aria-live": ariaLive,
+      "aria-describedby": ariaDescribedBy,
+      "data-testid": testID,
+      ...props
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
+// src/Stepper.tsx
+import { useResolvedTheme } from "@xsolla/xui-core";
+
+// src/Step.tsx
+import { useCallback, useMemo } from "react";
+
+// src/StepChip.tsx
+import { memo } from "react";
+import { Check, InfoCr, Remove } from "@xsolla/xui-icons-base";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var getChipBackground = (state, theme) => {
+  switch (state) {
+    case "current":
+      return theme.colors.background.brand.secondary;
+    case "loading":
+      return theme.colors.overlay.brand;
+    case "complete":
+      return theme.colors.background.success.secondary;
+    case "warning":
+      return theme.colors.background.warning.secondary;
+    case "alert":
+      return theme.colors.background.alert.secondary;
+    case "incomplete":
+    default:
+      return theme.colors.overlay.mono;
+  }
+};
+var StepChip = memo(
+  ({ state, stepNumber, sizing, theme }) => {
+    const numberColor = theme.colors.content.primary;
+    const bg = getChipBackground(state, theme);
+    const renderContent = () => {
+      switch (state) {
+        case "loading":
+          return /* @__PURE__ */ jsx4(
+            Spinner,
+            {
+              size: sizing.chipIconSize,
+              color: theme.colors.content.brand.primary,
+              strokeWidth: 2
+            }
+          );
+        case "complete":
+          return /* @__PURE__ */ jsx4(
+            Check,
+            {
+              size: sizing.chipIconSize,
+              color: theme.colors.content.success.primary
+            }
+          );
+        case "warning":
+          return /* @__PURE__ */ jsx4(
+            InfoCr,
+            {
+              size: sizing.chipIconSize,
+              color: theme.colors.content.warning.primary
+            }
+          );
+        case "alert":
+          return /* @__PURE__ */ jsx4(
+            Remove,
+            {
+              size: sizing.chipIconSize,
+              color: theme.colors.content.alert.primary
+            }
+          );
+        case "current":
+        case "incomplete":
+        default:
+          return /* @__PURE__ */ jsx4(
+            Text,
+            {
+              color: numberColor,
+              fontSize: sizing.numberFontSize,
+              lineHeight: sizing.numberLineHeight,
+              fontWeight: "500",
+              textAlign: "center",
+              children: stepNumber
+            }
+          );
+      }
+    };
+    return /* @__PURE__ */ jsx4(
+      Box,
+      {
+        width: sizing.chipSize,
+        height: sizing.chipSize,
+        borderRadius: sizing.chipRadius,
+        backgroundColor: bg,
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        style: {
+          paddingTop: sizing.chipPaddingTop,
+          paddingBottom: sizing.chipPaddingBottom,
+          paddingLeft: sizing.chipPaddingX,
+          paddingRight: sizing.chipPaddingX
+        },
+        children: renderContent()
+      }
+    );
+  }
+);
+StepChip.displayName = "StepChip";
+
+// src/StepConnector.tsx
+import { memo as memo2 } from "react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var StepConnector = memo2(
+  ({ direction, color, length }) => {
+    if (direction === "vertical") {
+      return /* @__PURE__ */ jsx5(
+        Box,
+        {
+          style: {
+            width: 1,
+            height: length ?? 48,
+            backgroundColor: color,
+            flexShrink: 0
+          }
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx5(
+      Box,
+      {
+        style: {
+          height: 1,
+          flex: 1,
+          minWidth: length ?? 24,
+          backgroundColor: color,
+          alignSelf: "center"
+        }
+      }
+    );
+  }
+);
+StepConnector.displayName = "StepConnector";
+
+// src/Step.tsx
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+var ACTIVE_CARD_STATES = [
+  "current",
+  "loading",
+  "warning",
+  "alert"
+];
+var Step = ({
+  step,
+  stepNumber,
+  isLast,
+  isFirst,
+  direction,
+  simple = false,
+  overlapBottom = 0,
+  zIndex,
+  onClick,
+  sizing,
+  theme
+}) => {
+  const {
+    title,
+    description,
+    caption,
+    state = "incomplete",
+    disabled = false,
+    noClick = false
+  } = step;
+  const isHorizontal = direction === "horizontal";
+  const isActive = ACTIVE_CARD_STATES.includes(state);
+  const isCurrent = state === "current";
+  const isInteractive = !!onClick && !disabled && !noClick;
+  const handleClick = useCallback(() => {
+    if (isInteractive) {
+      onClick({ number: stepNumber, step });
+    }
+  }, [isInteractive, onClick, stepNumber, step]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (!isInteractive) return;
+      if (event.key === "Enter") {
+        event.preventDefault();
+        handleClick();
+      } else if (event.key === " ") {
+        event.preventDefault();
+      }
+    },
+    [isInteractive, handleClick]
+  );
+  const handleKeyUp = useCallback(
+    (event) => {
+      if (!isInteractive) return;
+      if (event.key === " ") {
+        event.preventDefault();
+        handleClick();
+      }
+    },
+    [isInteractive, handleClick]
+  );
+  const ariaLabel = useMemo(() => {
+    const titleText = typeof title === "string" ? title : `Step ${stepNumber}`;
+    const descText = typeof description === "string" ? `, ${description}` : "";
+    return `Step ${stepNumber}: ${titleText}${descText}, ${state}`;
+  }, [stepNumber, title, description, state]);
+  const interactiveProps = isInteractive ? {
+    role: "button",
+    tabIndex: 0,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp,
+    style: { cursor: "pointer" }
+  } : {
+    "aria-disabled": disabled || noClick ? true : void 0
+  };
+  const textBlockSizing = isHorizontal ? { flex: 1, minWidth: 0 } : { width: sizing.contentWidth, flexShrink: 0 };
+  const textBlock = /* @__PURE__ */ jsxs(
+    Box,
+    {
+      flexDirection: "column",
+      alignItems: "flex-start",
+      justifyContent: "center",
+      style: {
+        gap: sizing.contentGap,
+        minHeight: sizing.contentMinHeight,
+        ...textBlockSizing
+      },
+      children: [
+        caption !== null && (typeof caption === "string" || typeof caption === "number" ? /* @__PURE__ */ jsx6(
+          Text,
+          {
+            color: theme.colors.content.tertiary,
+            fontSize: sizing.captionFontSize,
+            lineHeight: sizing.captionLineHeight,
+            fontWeight: "400",
+            children: caption
+          }
+        ) : caption),
+        typeof title === "string" || typeof title === "number" ? /* @__PURE__ */ jsx6(
+          Text,
+          {
+            color: theme.colors.content.primary,
+            fontSize: sizing.titleFontSize,
+            lineHeight: sizing.titleLineHeight,
+            fontWeight: "500",
+            children: title
+          }
+        ) : title,
+        description !== null && (typeof description === "string" || typeof description === "number" ? /* @__PURE__ */ jsx6(
+          Text,
+          {
+            color: theme.colors.content.tertiary,
+            fontSize: sizing.descriptionFontSize,
+            lineHeight: sizing.descriptionLineHeight,
+            fontWeight: "400",
+            children: description
+          }
+        ) : description)
+      ]
+    }
+  );
+  if (simple) {
+    if (isHorizontal) {
+      return /* @__PURE__ */ jsxs(
+        Box,
+        {
+          flexDirection: "row",
+          alignItems: "center",
+          flex: isLast ? void 0 : 1,
+          "data-testid": "step",
+          "data-step-state": state,
+          "aria-current": isCurrent ? "step" : void 0,
+          "aria-label": ariaLabel,
+          ...interactiveProps,
+          children: [
+            /* @__PURE__ */ jsx6(
+              Box,
+              {
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: isActive ? theme.colors.background.primary : void 0,
+                borderRadius: isActive ? sizing.simpleCardRadius : void 0,
+                style: {
+                  padding: sizing.simpleCardPadding,
+                  gap: sizing.simpleCardGap,
+                  flexShrink: 0
+                },
+                children: /* @__PURE__ */ jsx6(
+                  StepChip,
+                  {
+                    state,
+                    stepNumber,
+                    sizing,
+                    theme
+                  }
+                )
+              }
+            ),
+            !isLast && /* @__PURE__ */ jsx6(
+              Box,
+              {
+                flexDirection: "row",
+                alignItems: "center",
+                style: { flex: 1, minWidth: sizing.simpleHorizontalCellWidth },
+                children: /* @__PURE__ */ jsx6(
+                  Box,
+                  {
+                    style: {
+                      flex: 1,
+                      height: 1,
+                      backgroundColor: theme.colors.border.secondary
+                    }
+                  }
+                )
+              }
+            )
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        flexDirection: "column",
+        alignItems: "flex-start",
+        "data-testid": "step",
+        "data-step-state": state,
+        "aria-current": isCurrent ? "step" : void 0,
+        "aria-label": ariaLabel,
+        ...interactiveProps,
+        style: {
+          ...isInteractive ? { cursor: "pointer" } : {},
+          gap: sizing.simpleItemGap
+        },
+        children: [
+          /* @__PURE__ */ jsx6(
+            Box,
+            {
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: isActive ? theme.colors.background.primary : void 0,
+              borderRadius: isActive ? sizing.simpleCardRadius : void 0,
+              style: {
+                padding: sizing.simpleCardPadding,
+                gap: sizing.simpleCardGap
+              },
+              children: /* @__PURE__ */ jsx6(
+                StepChip,
+                {
+                  state,
+                  stepNumber,
+                  sizing,
+                  theme
+                }
+              )
+            }
+          ),
+          !isLast && /* @__PURE__ */ jsx6(
+            Box,
+            {
+              style: {
+                marginLeft: sizing.simpleCardPadding + sizing.chipSize / 2 - 0.5
+              },
+              children: /* @__PURE__ */ jsx6(
+                StepConnector,
+                {
+                  direction: "vertical",
+                  color: theme.colors.border.secondary,
+                  length: sizing.connectorCellHeight
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (isHorizontal) {
+    const cardBackground = isActive ? theme.colors.background.primary : void 0;
+    const cardWidth = isFirst ? sizing.horizontalFirstItemWidth : sizing.horizontalItemWidth;
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        flexDirection: "row",
+        alignItems: "center",
+        flex: 1,
+        "data-testid": "step",
+        "data-step-state": state,
+        "aria-current": isCurrent ? "step" : void 0,
+        "aria-label": ariaLabel,
+        ...interactiveProps,
+        children: [
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              flexDirection: "row",
+              alignItems: "center",
+              backgroundColor: cardBackground,
+              borderRadius: isActive ? sizing.activeCardRadiusHorizontal : void 0,
+              style: {
+                gap: sizing.activeCardGapHorizontal,
+                width: cardWidth,
+                flexShrink: 0,
+                paddingTop: sizing.activeCardPaddingYHorizontal,
+                paddingBottom: sizing.activeCardPaddingYHorizontal,
+                paddingLeft: sizing.activeCardPaddingLeftHorizontal,
+                paddingRight: 0
+              },
+              children: [
+                /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    flexDirection: "row",
+                    alignItems: "flex-start",
+                    style: {
+                      gap: sizing.itemGap,
+                      flex: 1,
+                      minWidth: 0
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx6(
+                        StepChip,
+                        {
+                          state,
+                          stepNumber,
+                          sizing,
+                          theme
+                        }
+                      ),
+                      textBlock
+                    ]
+                  }
+                ),
+                !isLast && /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    flexDirection: "row",
+                    alignItems: "center",
+                    style: { flexShrink: 0 },
+                    children: [
+                      /* @__PURE__ */ jsx6(
+                        Box,
+                        {
+                          style: {
+                            width: sizing.horizontalConnectorSegment,
+                            height: 1,
+                            backgroundColor: theme.colors.border.secondary
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsx6(
+                        Box,
+                        {
+                          style: {
+                            width: sizing.horizontalConnectorGap,
+                            height: 1,
+                            backgroundColor: theme.colors.border.secondary
+                          }
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          !isLast && /* @__PURE__ */ jsx6(
+            StepConnector,
+            {
+              direction: "horizontal",
+              color: theme.colors.border.secondary
+            }
+          )
+        ]
+      }
+    );
+  }
+  const innerConnectorOffset = sizing.activeCardPaddingX + sizing.chipSize / 2 - 0.5;
+  const verticalContainerStyle = {
+    ...interactiveProps.style,
+    marginBottom: overlapBottom ? -overlapBottom : void 0,
+    position: zIndex !== void 0 ? "relative" : void 0,
+    zIndex
+  };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      flexDirection: "column",
+      alignItems: "flex-start",
+      "data-testid": "step",
+      "data-step-state": state,
+      "aria-current": isCurrent ? "step" : void 0,
+      "aria-label": ariaLabel,
+      ...interactiveProps,
+      style: verticalContainerStyle,
+      children: [
+        /* @__PURE__ */ jsxs(
+          Box,
+          {
+            flexDirection: "row",
+            alignItems: "flex-start",
+            gap: sizing.itemGap,
+            style: {
+              paddingTop: sizing.activeCardPaddingTop,
+              paddingLeft: sizing.activeCardPaddingX,
+              paddingRight: sizing.activeCardPaddingX,
+              paddingBottom: 0,
+              backgroundColor: isActive ? theme.colors.background.primary : void 0,
+              borderRadius: isActive ? sizing.activeCardRadiusVertical : void 0
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                Box,
+                {
+                  flexDirection: "column",
+                  alignItems: "center",
+                  gap: 8,
+                  style: { flexShrink: 0 },
+                  children: [
+                    /* @__PURE__ */ jsx6(
+                      StepChip,
+                      {
+                        state,
+                        stepNumber,
+                        sizing,
+                        theme
+                      }
+                    ),
+                    /* @__PURE__ */ jsx6(
+                      Box,
+                      {
+                        style: { visibility: isLast ? "hidden" : "visible" },
+                        "aria-hidden": isLast ? "true" : void 0,
+                        children: /* @__PURE__ */ jsx6(
+                          StepConnector,
+                          {
+                            direction: "vertical",
+                            color: theme.colors.border.secondary,
+                            length: sizing.innerConnectorLength
+                          }
+                        )
+                      }
+                    )
+                  ]
+                }
+              ),
+              textBlock
+            ]
+          }
+        ),
+        !isLast && /* @__PURE__ */ jsx6(
+          Box,
+          {
+            alignItems: "flex-start",
+            justifyContent: "flex-start",
+            style: {
+              height: sizing.connectorCellHeight,
+              width: sizing.connectorCellWidth,
+              paddingLeft: innerConnectorOffset,
+              flexShrink: 0
+            },
+            children: /* @__PURE__ */ jsx6(
+              StepConnector,
+              {
+                direction: "vertical",
+                color: theme.colors.border.secondary,
+                length: sizing.connectorCellHeight
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+Step.displayName = "Step";
+
+// src/Stepper.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Stepper = forwardRef(
+  ({
+    steps,
+    direction = "vertical",
+    surface = false,
+    simple = false,
+    onClick,
+    className,
+    "aria-label": ariaLabel,
+    themeMode,
+    themeProductContext,
+    ...rest
+  }, ref) => {
+    const { theme } = useResolvedTheme({ themeMode, themeProductContext });
+    const sizing = theme.sizing.stepperB2b();
+    const isHorizontal = direction === "horizontal";
+    const isSurface = surface;
+    const defaultAriaLabel = `Stepper with ${steps.length} step${steps.length === 1 ? "" : "s"}`;
+    const surfaceBackground = isSurface ? `linear-gradient(0deg, ${theme.colors.overlay.mono} 0%, ${theme.colors.overlay.mono} 100%), ${theme.colors.background.secondary}` : void 0;
+    const useOverlap = !isHorizontal && !simple;
+    return /* @__PURE__ */ jsx7(
+      Box,
+      {
+        ref,
+        role: "navigation",
+        "aria-label": ariaLabel ?? defaultAriaLabel,
+        className,
+        flexDirection: isHorizontal ? "row" : "column",
+        alignItems: isHorizontal ? "flex-start" : "stretch",
+        borderRadius: isSurface ? sizing.surfaceRadius : void 0,
+        style: {
+          background: surfaceBackground,
+          padding: isSurface ? isHorizontal ? sizing.surfacePaddingHorizontal : sizing.surfacePaddingVertical : 0,
+          gap: isHorizontal ? sizing.horizontalItemGap : 0,
+          width: isHorizontal ? "100%" : void 0,
+          isolation: useOverlap ? "isolate" : void 0
+        },
+        ...rest,
+        children: steps.map((step, i) => /* @__PURE__ */ jsx7(
+          Step,
+          {
+            step,
+            stepNumber: i + 1,
+            isFirst: i === 0,
+            isLast: i === steps.length - 1,
+            direction,
+            simple,
+            onClick,
+            sizing,
+            theme,
+            zIndex: useOverlap ? steps.length - i : void 0,
+            overlapBottom: useOverlap && i < steps.length - 1 ? 16 : 0
+          },
+          step.key ?? `stepper-${i}`
+        ))
+      }
+    );
+  }
+);
+Stepper.displayName = "Stepper";
+export {
+  Stepper
+};
+//# sourceMappingURL=index.mjs.map