@xsolla/xui-stepper 0.64.0-pr56.1768440195

package/web/index.mjs

@@ -0,0 +1,1773 @@
+// src/Stepper.tsx
+import { forwardRef as forwardRef3 } from "react";
+
+// ../primitives-web/src/Box.tsx
+import React from "react";
+import styled from "styled-components";
+import { jsx } from "react/jsx-runtime";
+var StyledBox = styled.div`
+  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"};
+
+  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 = React.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,
+    ...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,
+        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,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Box.displayName = "Box";
+
+// ../primitives-web/src/Text.tsx
+import styled2 from "styled-components";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var StyledText = styled2.span`
+  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 || '"Pilat Wide Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important'};
+  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,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx2(
+    StyledText,
+    {
+      ...props,
+      style,
+      className,
+      id,
+      role
+    }
+  );
+};
+
+// ../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 StyledSpinner = styled3.div`
+  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";
+
+// ../primitives-web/src/Icon.tsx
+import styled4 from "styled-components";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var StyledIcon = styled4.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
+  height: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
+  color: ${(props) => props.color || "currentColor"};
+
+  svg {
+    width: 100%;
+    height: 100%;
+    fill: none;
+    stroke: currentColor;
+  }
+`;
+
+// ../primitives-web/src/Divider.tsx
+import styled5 from "styled-components";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var StyledDivider = styled5.div`
+  background-color: ${(props) => props.dashStroke ? "transparent" : props.color || "rgba(255, 255, 255, 0.15)"};
+  width: ${(props) => props.vertical ? typeof props.width === "number" ? `${props.width}px` : props.width || "1px" : "100%"};
+  height: ${(props) => props.vertical ? "100%" : typeof props.height === "number" ? `${props.height}px` : props.height || "1px"};
+
+  ${(props) => props.dashStroke && `
+    border-style: dashed;
+    border-color: ${props.color || "rgba(255, 255, 255, 0.15)"};
+    border-width: 0;
+    ${props.vertical ? `
+      border-left-width: ${typeof props.width === "number" ? `${props.width}px` : props.width || "1px"};
+      height: 100%;
+    ` : `
+      border-top-width: ${typeof props.height === "number" ? `${props.height}px` : props.height || "1px"};
+      width: 100%;
+    `}
+  `}
+`;
+var Divider = (props) => {
+  return /* @__PURE__ */ jsx5(StyledDivider, { ...props });
+};
+
+// ../primitives-web/src/Input.tsx
+import { forwardRef } from "react";
+import styled6 from "styled-components";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var StyledInput = styled6.input`
+  background: transparent;
+  border: none;
+  outline: none;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  color: ${(props) => props.color || "inherit"};
+  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
+  font-family: inherit;
+  text-align: inherit;
+
+  &::placeholder {
+    color: ${(props) => props.placeholderTextColor || "rgba(255, 255, 255, 0.5)"};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;
+var InputPrimitive = forwardRef(
+  ({
+    value,
+    placeholder,
+    onChange,
+    onChangeText,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    disabled,
+    secureTextEntry,
+    style,
+    color,
+    fontSize,
+    placeholderTextColor,
+    maxLength,
+    name,
+    type,
+    inputMode,
+    autoComplete,
+    id,
+    "aria-invalid": ariaInvalid,
+    "aria-describedby": ariaDescribedBy,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel,
+    "aria-disabled": ariaDisabled,
+    "data-testid": dataTestId,
+    ...rest
+  }, ref) => {
+    const handleChange = (e) => {
+      if (onChange) {
+        onChange(e);
+      }
+      if (onChangeText) {
+        onChangeText(e.target.value);
+      }
+    };
+    const inputValue = value !== void 0 ? value : "";
+    return /* @__PURE__ */ jsx6(
+      StyledInput,
+      {
+        ref,
+        id,
+        value: inputValue,
+        name,
+        placeholder,
+        onChange: handleChange,
+        onFocus,
+        onBlur,
+        onKeyDown,
+        disabled,
+        type: secureTextEntry ? "password" : type || "text",
+        inputMode,
+        autoComplete,
+        style,
+        color,
+        fontSize,
+        placeholderTextColor,
+        maxLength,
+        "aria-invalid": ariaInvalid,
+        "aria-describedby": ariaDescribedBy,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-label": ariaLabel,
+        "aria-disabled": ariaDisabled,
+        "data-testid": dataTestId,
+        ...rest
+      }
+    );
+  }
+);
+InputPrimitive.displayName = "InputPrimitive";
+
+// ../primitives-web/src/TextArea.tsx
+import { forwardRef as forwardRef2 } from "react";
+import styled7 from "styled-components";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var StyledTextArea = styled7.textarea`
+  background: transparent;
+  border: none;
+  outline: none;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  color: ${(props) => props.color || "inherit"};
+  font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
+  font-family: inherit;
+  text-align: inherit;
+  resize: none;
+
+  &::placeholder {
+    color: ${(props) => props.placeholderTextColor || "rgba(255, 255, 255, 0.5)"};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;
+var TextAreaPrimitive = forwardRef2(
+  ({
+    value,
+    placeholder,
+    onChangeText,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    disabled,
+    style,
+    color,
+    fontSize,
+    placeholderTextColor,
+    maxLength,
+    rows
+  }, ref) => {
+    return /* @__PURE__ */ jsx7(
+      StyledTextArea,
+      {
+        ref,
+        value,
+        placeholder,
+        onChange: (e) => onChangeText?.(e.target.value),
+        onFocus,
+        onBlur,
+        onKeyDown,
+        disabled,
+        style,
+        color,
+        fontSize,
+        placeholderTextColor,
+        maxLength,
+        rows
+      }
+    );
+  }
+);
+TextAreaPrimitive.displayName = "TextAreaPrimitive";
+
+// src/Stepper.tsx
+import { useDesignSystem as useDesignSystem3 } from "@xsolla/xui-core";
+
+// src/Step.tsx
+import { useCallback, useMemo } from "react";
+import { useDesignSystem as useDesignSystem2 } from "@xsolla/xui-core";
+import { Check, X, AlertCircle } from "@xsolla/xui-icons";
+
+// src/utils/colors.ts
+var getPaletteColor = (palette, theme, type = "text") => {
+  const fallback = type === "active" ? "#00d4ff" : "#00d4ff";
+  if (palette === "brand") {
+    const brandText2 = theme.colors?.content?.brand?.secondary;
+    const brandActive2 = theme.colors?.control?.brand?.primary?.bgHover || brandText2;
+    if (type === "active") {
+      return brandActive2 || fallback;
+    }
+    return brandText2 || fallback;
+  }
+  if (palette === "brandSecondary") {
+    const extraText = theme.colors?.content?.brandExtra?.primary;
+    const extraActive = theme.colors?.control?.brandExtra?.primary?.bgHover || extraText;
+    if (type === "active") {
+      return extraActive || "#d9ff66";
+    }
+    return extraText || "#d9ff66";
+  }
+  const brandText = theme.colors?.content?.brand?.secondary;
+  const brandActive = theme.colors?.control?.brand?.primary?.bgHover || brandText;
+  return (type === "active" ? brandActive : brandText) || fallback;
+};
+var hexToRgba = (hex, opacity) => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (result) {
+    const r = parseInt(result[1], 16);
+    const g = parseInt(result[2], 16);
+    const b = parseInt(result[3], 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  }
+  return hex;
+};
+
+// src/utils/platform.ts
+var isWeb = () => {
+  return typeof window !== "undefined" && typeof document !== "undefined";
+};
+
+// src/StepTail.tsx
+import { useDesignSystem } from "@xsolla/xui-core";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var StepTail = ({
+  variantUI,
+  direction,
+  size,
+  state,
+  isLast,
+  isFirstColoredTail,
+  isLastColoredTail,
+  palette
+}) => {
+  const { theme } = useDesignSystem();
+  if (variantUI !== "current" || isLast) {
+    return null;
+  }
+  const tailSize = size === "sm" ? 3 : 5;
+  const verticalTailWidth = size === "sm" ? 2 : 4;
+  const isHorizontal = direction === "horizontal";
+  let tailBgColor = "transparent";
+  let tailHeight = tailSize;
+  let tailWidth = tailSize;
+  let borderRadius = 0;
+  let borderRadiusStyle;
+  try {
+    if (isFirstColoredTail && isLastColoredTail) {
+      borderRadius = 4;
+    } else if (isFirstColoredTail) {
+      if (isWeb()) {
+        borderRadiusStyle = isHorizontal ? { borderRadius: "4px 0 0 4px" } : { borderRadius: "4px 4px 0 0" };
+      } else {
+        if (isHorizontal) {
+          borderRadiusStyle = {
+            borderTopLeftRadius: 4,
+            borderBottomLeftRadius: 4
+          };
+        } else {
+          borderRadiusStyle = {
+            borderTopLeftRadius: 4,
+            borderTopRightRadius: 4
+          };
+        }
+      }
+    } else if (isLastColoredTail) {
+      if (isWeb()) {
+        borderRadiusStyle = isHorizontal ? { borderRadius: "0 4px 4px 0" } : { borderRadius: "0 0 4px 4px" };
+      } else {
+        if (isHorizontal) {
+          borderRadiusStyle = {
+            borderTopRightRadius: 4,
+            borderBottomRightRadius: 4
+          };
+        } else {
+          borderRadiusStyle = {
+            borderBottomLeftRadius: 4,
+            borderBottomRightRadius: 4
+          };
+        }
+      }
+    }
+    if (state === "current" || state === "loading") {
+      tailBgColor = getPaletteColor(palette, theme, "active");
+      tailHeight = tailSize;
+      tailWidth = isHorizontal ? tailSize : verticalTailWidth;
+    } else if (state === "alert") {
+      tailBgColor = theme.colors.content.alert.primary;
+      tailHeight = tailSize;
+      tailWidth = isHorizontal ? tailSize : verticalTailWidth;
+    } else if (state === "warning") {
+      tailBgColor = theme.colors.content.warning.primary;
+      tailHeight = tailSize;
+      tailWidth = isHorizontal ? tailSize : verticalTailWidth;
+    } else if (state === "complete") {
+      return null;
+    } else {
+      const paletteColor = getPaletteColor(palette, theme, "active");
+      tailBgColor = hexToRgba(paletteColor, 0.15);
+      tailHeight = 2;
+      tailWidth = isHorizontal ? 2 : 2;
+      borderRadius = 0;
+    }
+  } catch {
+    return null;
+  }
+  const borderOffset = isHorizontal ? -(tailHeight / 2 + 0.5) : -3;
+  if (isHorizontal) {
+    return /* @__PURE__ */ jsx8(
+      Box,
+      {
+        position: "absolute",
+        bottom: borderOffset,
+        left: 0,
+        width: "100%",
+        height: tailHeight,
+        backgroundColor: tailBgColor,
+        borderRadius,
+        zIndex: 1,
+        style: borderRadiusStyle
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx8(
+    Box,
+    {
+      position: "absolute",
+      top: 0,
+      left: borderOffset,
+      height: "100%",
+      width: tailWidth,
+      backgroundColor: tailBgColor,
+      borderRadius,
+      zIndex: 1,
+      style: borderRadiusStyle
+    }
+  );
+};
+
+// src/hooks/useStepHoverStyles.ts
+import { useEffect } from "react";
+var useStepHoverStyles = (variantUI, state, className, theme, isLast, disabled, noClick, palette) => {
+  useEffect(() => {
+    if (!isWeb()) {
+      return;
+    }
+    const styleId = `step-hover-styles-${className}`;
+    let styleElement = document.getElementById(
+      styleId
+    );
+    if (!styleElement) {
+      styleElement = document.createElement("style");
+      styleElement.id = styleId;
+      document.head.appendChild(styleElement);
+    }
+    const getHoverTextColor = () => {
+      if (state === "alert") {
+        return theme.colors.content.alert.primary;
+      } else if (state === "warning") {
+        return theme.colors.content.warning.primary;
+      } else {
+        return getPaletteColor(palette, theme, "text");
+      }
+    };
+    let hoverCss = "";
+    if (!disabled && !noClick) {
+      const hoverTextColor = getHoverTextColor();
+      const hoverPaletteColor = getPaletteColor(palette, theme, "active");
+      let circleHoverCss = "";
+      if (isLast) {
+        const whiteColor = theme.colors.content.static.light;
+        circleHoverCss = `
+          .step-icon-${className} {
+            background-color: ${hoverPaletteColor} !important;
+            border-color: ${hoverPaletteColor} !important;
+            color: ${whiteColor} !important;
+          }
+        `;
+      } else {
+        if (variantUI === "simple") {
+          if (state === "incomplete") {
+            const whiteColor = theme.colors.content.static.light;
+            circleHoverCss = `
+              .step-icon-${className} {
+                background-color: ${hoverPaletteColor} !important;
+                border-color: ${hoverPaletteColor} !important;
+                color: ${whiteColor} !important;
+              }
+            `;
+          } else if (state === "complete") {
+            circleHoverCss = `
+              .step-icon-${className} {
+                border-color: ${hoverPaletteColor} !important;
+                color: ${hoverPaletteColor} !important;
+              }
+            `;
+          } else if (state === "loading") {
+            circleHoverCss = `
+              .step-icon-${className} {
+                color: ${hoverPaletteColor} !important;
+              }
+            `;
+          }
+        } else {
+          if (state === "incomplete") {
+            const whiteColor = theme.colors.content.static.light;
+            circleHoverCss = `
+              .step-icon-${className} {
+                background-color: ${hoverPaletteColor} !important;
+                border-color: ${hoverPaletteColor} !important;
+                color: ${whiteColor} !important;
+              }
+            `;
+          } else if (state === "complete") {
+            circleHoverCss = `
+              .step-icon-${className} {
+                border-color: ${hoverPaletteColor} !important;
+                color: ${hoverPaletteColor} !important;
+              }
+            `;
+          } else if (state === "loading") {
+            circleHoverCss = `
+              .step-icon-${className} {
+                color: ${hoverPaletteColor} !important;
+              }
+            `;
+          }
+        }
+      }
+      hoverCss = `
+        &:hover {
+          .step-title-${className} {
+            color: ${hoverTextColor} !important;
+          }
+          .step-description-${className} {
+            color: ${hoverTextColor} !important;
+          }
+          ${circleHoverCss}
+        }
+      `;
+    }
+    const css = `
+      .${className} {
+        ${hoverCss}
+      }
+    `;
+    styleElement.textContent = css;
+    return () => {
+      if (styleElement && styleElement.parentNode) {
+        styleElement.parentNode.removeChild(styleElement);
+      }
+    };
+  }, [variantUI, state, className, isLast, disabled, noClick, palette, theme]);
+};
+
+// src/Step.tsx
+import { jsx as jsx9, jsxs } from "react/jsx-runtime";
+var StepState = ({
+  state,
+  size,
+  step,
+  variantUI,
+  disabled,
+  noClick,
+  palette,
+  theme,
+  mode,
+  sizeStyles,
+  className,
+  isLast = false
+}) => {
+  const paletteColor = getPaletteColor(palette, theme, "active");
+  const paletteTextColor = getPaletteColor(palette, theme, "text");
+  const iconStyles = useMemo(() => {
+    if (variantUI === "simple") {
+      switch (state) {
+        case "current":
+          return {
+            backgroundColor: paletteColor,
+            borderColor: paletteColor,
+            color: theme.colors.content.static.light
+          };
+        case "incomplete":
+          return {
+            backgroundColor: "transparent",
+            borderColor: theme.colors.control.input.bgDisable,
+            color: theme.colors.control.input.textDisable
+          };
+        case "loading":
+          const loadingBg = hexToRgba(paletteColor, 0.05);
+          return {
+            backgroundColor: loadingBg,
+            borderColor: "transparent",
+            color: paletteColor
+          };
+        case "complete":
+          return {
+            backgroundColor: "transparent",
+            borderColor: paletteColor,
+            color: paletteColor
+          };
+        case "alert":
+          return {
+            backgroundColor: theme.colors.content.alert.primary,
+            borderColor: theme.colors.content.alert.primary,
+            color: theme.colors.content.static.light
+          };
+        case "warning":
+          return {
+            backgroundColor: theme.colors.content.warning.primary,
+            borderColor: theme.colors.content.warning.primary,
+            color: theme.colors.content.static.light
+          };
+        default:
+          return {
+            backgroundColor: "transparent",
+            borderColor: theme.colors.control.input.bgDisable,
+            color: theme.colors.control.input.textDisable
+          };
+      }
+    } else {
+      switch (state) {
+        case "current":
+          return {
+            backgroundColor: paletteColor,
+            borderColor: paletteColor,
+            color: theme.colors.content.static.light
+          };
+        case "incomplete":
+          if (mode === "light") {
+            return {
+              backgroundColor: theme.colors.content.static.dark,
+              borderColor: theme.colors.content.static.dark,
+              color: theme.colors.content.static.light
+            };
+          } else {
+            return {
+              backgroundColor: theme.colors.content.static.light,
+              borderColor: theme.colors.content.static.light,
+              color: theme.colors.content.static.dark
+            };
+          }
+        case "loading":
+          const loadingBg = hexToRgba(paletteColor, 0.05);
+          return {
+            backgroundColor: loadingBg,
+            borderColor: "transparent",
+            color: paletteColor
+          };
+        case "complete":
+          return {
+            backgroundColor: paletteColor,
+            borderColor: paletteColor,
+            color: theme.colors.content.static.light
+          };
+        case "alert":
+          return {
+            backgroundColor: theme.colors.content.alert.primary,
+            borderColor: theme.colors.content.alert.primary,
+            color: theme.colors.content.static.light
+          };
+        case "warning":
+          return {
+            backgroundColor: theme.colors.content.warning.primary,
+            borderColor: theme.colors.content.warning.primary,
+            color: theme.colors.content.static.light
+          };
+        default:
+          return {
+            backgroundColor: theme.colors.control.input.bg,
+            borderColor: theme.colors.control.input.bg,
+            color: theme.colors.control.brand.primary.text.primary
+          };
+      }
+    }
+  }, [state, variantUI, theme, paletteColor]);
+  const iconHoverStyles = useMemo(() => {
+    if (disabled || noClick) return {};
+    if (variantUI === "simple") {
+      if (isLast) {
+        return {
+          backgroundColor: paletteColor,
+          borderColor: paletteColor,
+          color: theme.colors.content.static.light,
+          opacity: 0.9
+        };
+      }
+      switch (state) {
+        case "current":
+          return {
+            backgroundColor: paletteColor,
+            borderColor: paletteColor,
+            opacity: 0.9
+          };
+        case "incomplete":
+          return {
+            borderColor: paletteColor,
+            color: paletteColor,
+            opacity: 0.9
+          };
+        case "loading":
+          return {
+            color: paletteColor,
+            opacity: 0.9
+          };
+        case "complete":
+          return {
+            borderColor: paletteColor,
+            color: paletteColor,
+            opacity: 0.9
+          };
+        case "alert":
+        case "warning":
+          return {};
+        default:
+          return {};
+      }
+    } else {
+      switch (state) {
+        case "current":
+          return {
+            backgroundColor: theme.colors.control.brand.primary.bgHover
+          };
+        case "incomplete":
+          return {
+            backgroundColor: theme.colors.control.input.bgHover || theme.colors.control.input.bg
+          };
+        case "loading":
+          return {
+            color: theme.colors.control.brand.primary.bgHover
+          };
+        case "complete":
+          return {
+            backgroundColor: theme.colors.control.brand.primary.bgHover
+          };
+        case "alert":
+        case "warning":
+          return {};
+        default:
+          return {};
+      }
+    }
+  }, [state, variantUI, disabled, noClick, theme, paletteColor]);
+  const iconSize = size === "sm" ? 18 : 18;
+  return /* @__PURE__ */ jsx9(
+    Box,
+    {
+      className,
+      width: sizeStyles.iconSize,
+      height: sizeStyles.iconSize,
+      borderRadius: sizeStyles.iconSize / 2,
+      backgroundColor: iconStyles.backgroundColor,
+      borderColor: iconStyles.borderColor,
+      borderWidth: iconStyles.borderColor !== "transparent" ? 1 : 0,
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      children: state === "loading" ? /* @__PURE__ */ jsx9(Spinner, { size: size === "sm" ? 16 : 20, color: iconStyles.color }) : state === "complete" ? /* @__PURE__ */ jsx9(Check, { size: iconSize, color: iconStyles.color }) : state === "alert" ? /* @__PURE__ */ jsx9(X, { size: iconSize, color: iconStyles.color }) : state === "warning" ? /* @__PURE__ */ jsx9(AlertCircle, { size: iconSize, color: iconStyles.color }) : /* @__PURE__ */ jsx9(
+        Text,
+        {
+          color: iconStyles.color,
+          fontSize: size === "sm" ? 12 : 14,
+          fontWeight: "600",
+          children: step
+        }
+      )
+    }
+  );
+};
+var Step = ({
+  title,
+  state = "incomplete",
+  description,
+  size,
+  onClick,
+  tail,
+  stepNumber,
+  disabled = false,
+  direction,
+  variantUI,
+  noClick = false,
+  palette = "brand",
+  isLast = false,
+  isFirstColoredTail = false,
+  isLastColoredTail = false
+}) => {
+  const { theme, mode } = useDesignSystem2();
+  const sizeStyles = theme.sizing.stepper(size);
+  const stepClassName = useMemo(
+    () => `step-${stepNumber}-${variantUI}-${direction}-${size}-${state}-${palette}`,
+    [stepNumber, variantUI, direction, size, state, palette]
+  );
+  useStepHoverStyles(
+    variantUI,
+    state,
+    stepClassName,
+    theme,
+    isLast,
+    disabled,
+    noClick,
+    palette
+  );
+  const stepClick = useCallback(() => {
+    if (onClick && !disabled && !noClick) {
+      onClick({
+        number: stepNumber,
+        step: {
+          title,
+          description,
+          state,
+          disabled
+        }
+      });
+    }
+  }, [onClick, disabled, noClick, stepNumber, title, description, state]);
+  const stepAriaLabel = useMemo(() => {
+    const stepNum = stepNumber + 1;
+    const titleText = typeof title === "string" ? title : "Step";
+    const descriptionText = description && typeof description === "string" ? description : "";
+    const stateText = {
+      current: "current",
+      incomplete: "incomplete",
+      loading: "loading",
+      complete: "complete",
+      alert: "alert",
+      warning: "warning"
+    }[state] || "incomplete";
+    let label = `Step ${stepNum}: ${titleText}`;
+    if (descriptionText) {
+      label += `, ${descriptionText}`;
+    }
+    label += `, ${stateText}`;
+    if (isLast) {
+      label += ", last step";
+    }
+    return label;
+  }, [stepNumber, title, description, state, isLast]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Enter" && !disabled && !noClick) {
+        event.preventDefault();
+        stepClick();
+      }
+      if (event.key === " " && !disabled && !noClick) {
+        event.preventDefault();
+      }
+    },
+    [stepClick, disabled, noClick]
+  );
+  const handleKeyUp = useCallback(
+    (event) => {
+      if (event.key === " " && !disabled && !noClick) {
+        event.preventDefault();
+        stepClick();
+      }
+    },
+    [stepClick, disabled, noClick]
+  );
+  const isInteractive = !disabled && !noClick && !!onClick;
+  const isCurrent = state === "current";
+  const titleStyles = useMemo(() => {
+    if (variantUI === "simple") {
+      const sizeStylesMap = {
+        sm: {
+          fontSize: 14,
+          lineHeight: 22,
+          paddingTop: 1,
+          paddingBottom: 1
+        },
+        md: {
+          fontSize: 16,
+          lineHeight: 24,
+          paddingTop: 4,
+          paddingBottom: 4
+        }
+      };
+      return {
+        ...sizeStylesMap[size],
+        color: state === "incomplete" ? theme.colors.control.input.textDisable : theme.colors.content.primary,
+        fontWeight: "500"
+      };
+    } else {
+      const sizeDirectionStyles = {
+        sm_horizontal: {
+          fontSize: 16,
+          lineHeight: 20,
+          fontWeight: "500"
+        },
+        md_horizontal: {
+          fontSize: 18,
+          lineHeight: 24,
+          fontWeight: "500"
+        },
+        sm_vertical: {
+          fontSize: 18,
+          lineHeight: 20,
+          fontWeight: "500"
+        },
+        md_vertical: {
+          fontSize: 18,
+          lineHeight: 24,
+          fontWeight: "500"
+        }
+      };
+      const stateColors = {
+        incomplete: theme.colors.content.secondary,
+        current: getPaletteColor(palette, theme, "text"),
+        loading: getPaletteColor(palette, theme, "text"),
+        alert: theme.colors.content.primary,
+        warning: theme.colors.content.primary,
+        complete: theme.colors.content.primary
+      };
+      return {
+        ...sizeDirectionStyles[`${size}_${direction}`],
+        color: stateColors[state] || theme.colors.content.primary
+      };
+    }
+  }, [variantUI, direction, size, state, theme, palette]);
+  const descriptionStyles = useMemo(() => {
+    const sizeStylesMap = {
+      sm: {
+        fontSize: 12,
+        lineHeight: variantUI === "simple" ? 20 : 18,
+        marginTop: variantUI === "simple" ? 0 : 2
+      },
+      md: {
+        fontSize: 14,
+        lineHeight: variantUI === "simple" ? 22 : 20,
+        marginTop: variantUI === "simple" ? 0 : 4
+      }
+    };
+    let descriptionColor = theme.colors.content.secondary;
+    if (variantUI === "current" && (state === "incomplete" || !state)) {
+      descriptionColor = theme.colors.content.tertiary || "rgba(24, 23, 28, 0.5)";
+    }
+    return {
+      ...sizeStylesMap[size],
+      color: descriptionColor,
+      fontWeight: "400"
+    };
+  }, [size, variantUI, state, theme]);
+  const contentWrapperStyles = useMemo(() => {
+    if (variantUI === "simple") {
+      if (direction === "horizontal") {
+        return {
+          marginLeft: size === "sm" ? 8 : 12,
+          flex: 1
+        };
+      }
+      return {
+        marginLeft: size === "sm" ? 8 : 12
+      };
+    } else {
+      const baseStyles = {
+        marginTop: size === "sm" ? 10 : 12
+      };
+      if (direction === "horizontal") {
+        return {
+          ...baseStyles,
+          paddingLeft: size === "sm" ? 20 : 24,
+          paddingRight: size === "sm" ? 20 : 24,
+          gap: 12
+        };
+      } else {
+        return {};
+      }
+      return baseStyles;
+    }
+  }, [variantUI, direction, size]);
+  const stepWrapperStyles = useMemo(() => {
+    if (variantUI === "current") {
+      if (direction === "horizontal") {
+        return {
+          flex: 1,
+          minWidth: 0,
+          flexShrink: 0,
+          paddingBottom: size === "sm" ? 27 : 37
+        };
+      } else {
+        return {
+          paddingTop: size === "sm" ? 20 : 24,
+          paddingBottom: size === "sm" ? 20 : 24,
+          paddingLeft: size === "sm" ? 24 : 32,
+          paddingRight: size === "sm" ? 10 : 10,
+          minWidth: 184
+        };
+      }
+    } else {
+      if (direction === "horizontal") {
+        return {
+          flexShrink: 0,
+          marginRight: isLast ? 0 : size === "sm" ? 8 : 12
+        };
+      } else {
+        return {
+          marginBottom: isLast ? 0 : 8,
+          minHeight: 56
+        };
+      }
+    }
+  }, [variantUI, direction, size, isLast]);
+  if (variantUI === "current" && direction === "horizontal") {
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        role: isWeb() ? "button" : void 0,
+        "aria-label": isWeb() ? stepAriaLabel : void 0,
+        "aria-current": isWeb() && isCurrent ? "step" : void 0,
+        "aria-disabled": isWeb() && (disabled || noClick) ? true : void 0,
+        tabIndex: isWeb() && isInteractive ? 0 : void 0,
+        onPress: stepClick,
+        onKeyDown: isWeb() && isInteractive ? handleKeyDown : void 0,
+        onKeyUp: isWeb() && isInteractive ? handleKeyUp : void 0,
+        disabled,
+        "data-testid": "step",
+        className: stepClassName,
+        flexDirection: "column",
+        alignItems: "flex-start",
+        justifyContent: "flex-start",
+        position: "relative",
+        ...stepWrapperStyles,
+        ...isWeb() && {
+          cursor: disabled || noClick ? "default" : "pointer"
+        },
+        children: [
+          /* @__PURE__ */ jsx9(
+            StepTail,
+            {
+              variantUI,
+              direction,
+              size,
+              state,
+              isLast,
+              isFirstColoredTail,
+              isLastColoredTail,
+              palette
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              flexDirection: "column",
+              alignItems: "flex-start",
+              justifyContent: "flex-start",
+              gap: 12,
+              paddingLeft: size === "sm" ? 20 : 24,
+              paddingRight: size === "sm" ? 20 : 24,
+              width: "100%",
+              children: [
+                /* @__PURE__ */ jsx9(Box, { flexDirection: "column", alignItems: "flex-start", children: /* @__PURE__ */ jsx9(
+                  StepState,
+                  {
+                    state,
+                    size,
+                    step: stepNumber + 1,
+                    variantUI,
+                    disabled,
+                    noClick,
+                    palette,
+                    theme,
+                    mode,
+                    sizeStyles,
+                    className: `step-icon-${stepClassName}`,
+                    isLast
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    flexDirection: "column",
+                    alignItems: "flex-start",
+                    justifyContent: "flex-start",
+                    gap: 4,
+                    width: "100%",
+                    children: [
+                      typeof title === "string" ? /* @__PURE__ */ jsx9(
+                        Text,
+                        {
+                          className: `step-title-${stepClassName}`,
+                          color: titleStyles.color,
+                          fontSize: titleStyles.fontSize,
+                          fontWeight: titleStyles.fontWeight,
+                          lineHeight: titleStyles.lineHeight,
+                          children: title
+                        }
+                      ) : title,
+                      description && /* @__PURE__ */ jsx9(Box, { width: "100%", alignItems: "flex-start", children: typeof description === "string" || typeof description === "number" ? /* @__PURE__ */ jsx9(
+                        Text,
+                        {
+                          className: `step-description-${stepClassName}`,
+                          color: descriptionStyles.color,
+                          fontSize: descriptionStyles.fontSize,
+                          fontWeight: descriptionStyles.fontWeight,
+                          lineHeight: descriptionStyles.lineHeight,
+                          children: description
+                        }
+                      ) : description })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (variantUI === "simple" && direction === "horizontal") {
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        role: isWeb() ? "button" : void 0,
+        "aria-label": isWeb() ? stepAriaLabel : void 0,
+        "aria-current": isWeb() && isCurrent ? "step" : void 0,
+        "aria-disabled": isWeb() && (disabled || noClick) ? true : void 0,
+        tabIndex: isWeb() && isInteractive ? 0 : void 0,
+        onPress: stepClick,
+        onKeyDown: isWeb() && isInteractive ? handleKeyDown : void 0,
+        onKeyUp: isWeb() && isInteractive ? handleKeyUp : void 0,
+        disabled,
+        "data-testid": "step",
+        className: stepClassName,
+        flexDirection: "row",
+        alignItems: "flex-start",
+        ...stepWrapperStyles,
+        ...isWeb() && {
+          cursor: disabled || noClick ? "default" : "pointer"
+        },
+        children: [
+          /* @__PURE__ */ jsx9(Box, { flexDirection: "column", children: /* @__PURE__ */ jsx9(
+            StepState,
+            {
+              state,
+              size,
+              step: stepNumber + 1,
+              variantUI,
+              disabled,
+              noClick,
+              palette,
+              theme,
+              mode,
+              sizeStyles,
+              isLast
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(Box, { ...contentWrapperStyles, children: [
+            /* @__PURE__ */ jsxs(
+              Box,
+              {
+                flexDirection: "row",
+                alignItems: "center",
+                width: "100%",
+                paddingTop: variantUI === "simple" ? size === "sm" ? 1 : 4 : void 0,
+                paddingBottom: variantUI === "simple" ? size === "sm" ? 1 : 4 : void 0,
+                children: [
+                  typeof title === "string" ? /* @__PURE__ */ jsx9(
+                    Text,
+                    {
+                      className: `step-title-${stepClassName}`,
+                      color: titleStyles.color,
+                      fontSize: titleStyles.fontSize,
+                      fontWeight: titleStyles.fontWeight,
+                      lineHeight: titleStyles.lineHeight,
+                      children: title
+                    }
+                  ) : title,
+                  tail && /* @__PURE__ */ jsx9(
+                    Box,
+                    {
+                      flex: 1,
+                      marginLeft: size === "sm" ? 8 : 12,
+                      alignItems: "center",
+                      justifyContent: "center",
+                      children: /* @__PURE__ */ jsx9(Divider, { color: theme.colors.border.secondary })
+                    }
+                  )
+                ]
+              }
+            ),
+            description && /* @__PURE__ */ jsx9(Box, { children: typeof description === "string" || typeof description === "number" ? /* @__PURE__ */ jsx9(
+              Text,
+              {
+                className: `step-description-${stepClassName}`,
+                color: descriptionStyles.color,
+                fontSize: descriptionStyles.fontSize,
+                fontWeight: descriptionStyles.fontWeight,
+                lineHeight: descriptionStyles.lineHeight,
+                children: description
+              }
+            ) : description })
+          ] })
+        ]
+      }
+    );
+  }
+  if (variantUI === "current" && direction === "vertical") {
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        role: isWeb() ? "button" : void 0,
+        "aria-label": isWeb() ? stepAriaLabel : void 0,
+        "aria-current": isWeb() && isCurrent ? "step" : void 0,
+        "aria-disabled": isWeb() && (disabled || noClick) ? true : void 0,
+        tabIndex: isWeb() && isInteractive ? 0 : void 0,
+        onPress: stepClick,
+        onKeyDown: isWeb() && isInteractive ? handleKeyDown : void 0,
+        onKeyUp: isWeb() && isInteractive ? handleKeyUp : void 0,
+        disabled,
+        "data-testid": "step",
+        className: stepClassName,
+        flexDirection: "row",
+        alignItems: "flex-start",
+        position: "relative",
+        ...stepWrapperStyles,
+        ...isWeb() && {
+          cursor: disabled || noClick ? "default" : "pointer"
+        },
+        children: [
+          /* @__PURE__ */ jsx9(
+            StepTail,
+            {
+              variantUI,
+              direction,
+              size,
+              state,
+              isLast,
+              isFirstColoredTail,
+              isLastColoredTail,
+              palette
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Box,
+            {
+              flexDirection: "column",
+              alignItems: "flex-start",
+              justifyContent: "flex-start",
+              gap: 12,
+              paddingTop: size === "sm" ? 20 : 24,
+              paddingBottom: size === "sm" ? 20 : 24,
+              flex: 1,
+              children: [
+                /* @__PURE__ */ jsx9(Box, { flexDirection: "column", alignItems: "flex-start", children: /* @__PURE__ */ jsx9(
+                  StepState,
+                  {
+                    state,
+                    size,
+                    step: stepNumber + 1,
+                    variantUI,
+                    disabled,
+                    noClick,
+                    palette,
+                    theme,
+                    mode,
+                    sizeStyles,
+                    className: `step-icon-${stepClassName}`,
+                    isLast
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    flexDirection: "column",
+                    alignItems: "flex-start",
+                    justifyContent: "flex-start",
+                    gap: 4,
+                    width: "100%",
+                    children: [
+                      typeof title === "string" ? /* @__PURE__ */ jsx9(
+                        Text,
+                        {
+                          className: `step-title-${stepClassName}`,
+                          color: titleStyles.color,
+                          fontSize: titleStyles.fontSize,
+                          fontWeight: titleStyles.fontWeight,
+                          lineHeight: titleStyles.lineHeight,
+                          children: title
+                        }
+                      ) : title,
+                      description && /* @__PURE__ */ jsx9(Box, { children: typeof description === "string" || typeof description === "number" ? /* @__PURE__ */ jsx9(
+                        Text,
+                        {
+                          className: `step-description-${stepClassName}`,
+                          color: descriptionStyles.color,
+                          fontSize: descriptionStyles.fontSize,
+                          fontWeight: descriptionStyles.fontWeight,
+                          lineHeight: descriptionStyles.lineHeight,
+                          children: description
+                        }
+                      ) : description })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      role: isWeb() ? "button" : void 0,
+      "aria-label": isWeb() ? stepAriaLabel : void 0,
+      "aria-current": isWeb() && isCurrent ? "step" : void 0,
+      "aria-disabled": isWeb() && (disabled || noClick) ? true : void 0,
+      tabIndex: isWeb() && isInteractive ? 0 : void 0,
+      onPress: stepClick,
+      onKeyDown: isWeb() && isInteractive ? handleKeyDown : void 0,
+      onKeyUp: isWeb() && isInteractive ? handleKeyUp : void 0,
+      disabled,
+      "data-testid": "step",
+      className: stepClassName,
+      flexDirection: "row",
+      alignItems: "flex-start",
+      ...stepWrapperStyles,
+      ...isWeb() && { cursor: disabled || noClick ? "default" : "pointer" },
+      children: [
+        /* @__PURE__ */ jsxs(Box, { flexDirection: "column", alignItems: "center", flexShrink: 0, children: [
+          /* @__PURE__ */ jsx9(
+            StepState,
+            {
+              state,
+              size,
+              step: stepNumber + 1,
+              variantUI,
+              disabled,
+              noClick,
+              palette,
+              theme,
+              mode,
+              sizeStyles
+            }
+          ),
+          tail && !isLast && /* @__PURE__ */ jsx9(
+            Box,
+            {
+              width: 1,
+              flex: 1,
+              minHeight: 24,
+              marginTop: 8,
+              alignItems: "stretch",
+              justifyContent: "flex-start",
+              position: "relative",
+              backgroundColor: theme.colors.border.secondary
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { ...contentWrapperStyles, flex: 1, children: [
+          typeof title === "string" ? /* @__PURE__ */ jsx9(
+            Text,
+            {
+              color: titleStyles.color,
+              fontSize: titleStyles.fontSize,
+              fontWeight: titleStyles.fontWeight,
+              lineHeight: titleStyles.lineHeight,
+              children: title
+            }
+          ) : title,
+          description && /* @__PURE__ */ jsx9(Box, { marginTop: descriptionStyles.marginTop, children: typeof description === "string" || typeof description === "number" ? /* @__PURE__ */ jsx9(
+            Text,
+            {
+              color: descriptionStyles.color,
+              fontSize: descriptionStyles.fontSize,
+              fontWeight: descriptionStyles.fontWeight,
+              lineHeight: descriptionStyles.lineHeight,
+              children: description
+            }
+          ) : description })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/Stepper.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+import { createElement } from "react";
+var Stepper = forwardRef3(
+  ({
+    direction = "horizontal",
+    variantUI = "current",
+    size = "md",
+    steps,
+    tail = false,
+    onClick,
+    className,
+    customClass,
+    palette = "brand",
+    "aria-label": ariaLabel,
+    ...rest
+  }, ref) => {
+    const { theme } = useDesignSystem3();
+    const isHorizontal = direction === "horizontal";
+    const isCurrentVariant = variantUI === "current";
+    const tailSize = size === "sm" ? 3 : 5;
+    const tailOffset = tailSize / 2;
+    const defaultAriaLabel = `Stepper with ${steps.length} step${steps.length !== 1 ? "s" : ""}`;
+    const stepperAriaLabel = ariaLabel || defaultAriaLabel;
+    return /* @__PURE__ */ jsx10(
+      Box,
+      {
+        ref,
+        role: "navigation",
+        "aria-label": stepperAriaLabel,
+        flexDirection: isHorizontal ? "row" : "column",
+        justifyContent: isHorizontal ? "flex-start" : void 0,
+        width: "100%",
+        height: "auto",
+        overflowX: isHorizontal ? "auto" : void 0,
+        overflowY: isHorizontal ? "hidden" : void 0,
+        paddingBottom: isHorizontal && isCurrentVariant ? tailOffset : void 0,
+        borderBottomWidth: isHorizontal && isCurrentVariant ? 1 : 0,
+        borderBottomColor: isHorizontal && isCurrentVariant ? theme.colors.border.secondary : void 0,
+        borderLeftWidth: !isHorizontal && isCurrentVariant ? 1 : 0,
+        borderLeftColor: !isHorizontal && isCurrentVariant ? theme.colors.border.secondary : void 0,
+        className: [className, customClass].filter(Boolean).join(" "),
+        ...rest,
+        children: (() => {
+          const coloredTailStates = [
+            "current",
+            "loading",
+            "alert",
+            "warning"
+          ];
+          let firstColoredTailIndex = -1;
+          let lastColoredTailIndex = -1;
+          steps.forEach((step, index) => {
+            if (step.state && coloredTailStates.includes(step.state) && index < steps.length - 1) {
+              if (firstColoredTailIndex === -1) {
+                firstColoredTailIndex = index;
+              }
+              lastColoredTailIndex = index;
+            }
+          });
+          return steps.map((step, index) => {
+            const isLast = index === steps.length - 1;
+            const isFirstColoredTail = index === firstColoredTailIndex;
+            const isLastColoredTail = index === lastColoredTailIndex;
+            return /* @__PURE__ */ createElement(
+              Step,
+              {
+                size,
+                ...step,
+                key: step.key || `stepper-${index}`,
+                onClick,
+                stepNumber: index,
+                tail: tail && variantUI === "simple" && !isLast,
+                direction,
+                variantUI,
+                palette,
+                isLast,
+                isFirstColoredTail,
+                isLastColoredTail
+              }
+            );
+          });
+        })()
+      }
+    );
+  }
+);
+Stepper.displayName = "Stepper";
+
+// src/ProgressStep.tsx
+import { useDesignSystem as useDesignSystem5 } from "@xsolla/xui-core";
+import { ArrowLeft, ArrowRight } from "@xsolla/xui-icons";
+
+// src/ProgressStepItem.tsx
+import { useDesignSystem as useDesignSystem4 } from "@xsolla/xui-core";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var ProgressStepItem = ({
+  state = "default",
+  size = "md",
+  className,
+  onPress,
+  onMouseEnter,
+  onMouseLeave
+}) => {
+  const { theme } = useDesignSystem4();
+  const isActive = state === "active";
+  const isHover = state === "hover";
+  const isMD = size === "md";
+  const width = isActive ? isMD ? 24 : 18 : isMD ? 8 : 6;
+  const height = isMD ? 8 : 6;
+  const borderRadius = isMD ? 2 : 1;
+  let backgroundColor = theme.colors.content.primary;
+  let opacity = 1;
+  if (!isActive) {
+    backgroundColor = theme.colors.content.tertiary || "rgba(0, 0, 0, 0.6)";
+    opacity = isHover ? 0.5 : 0.2;
+  }
+  return /* @__PURE__ */ jsx11(
+    Box,
+    {
+      className,
+      width,
+      height,
+      borderRadius,
+      backgroundColor,
+      opacity,
+      onPress,
+      onMouseEnter,
+      onMouseLeave,
+      cursor: onPress ? "pointer" : "default"
+    }
+  );
+};
+
+// src/ProgressStep.tsx
+import { jsx as jsx12, jsxs as jsxs2 } from "react/jsx-runtime";
+var ProgressStep = ({
+  count,
+  activeStep,
+  size = "md",
+  arrows = true,
+  onStepPress,
+  className
+}) => {
+  const { theme } = useDesignSystem5();
+  const handlePrev = () => {
+    if (activeStep > 0 && onStepPress) {
+      onStepPress(activeStep - 1);
+    }
+  };
+  const handleNext = () => {
+    if (activeStep < count - 1 && onStepPress) {
+      onStepPress(activeStep + 1);
+    }
+  };
+  const arrowSize = size === "md" ? 24 : 18;
+  const iconSize = size === "md" ? 18 : 14;
+  const isFirst = activeStep <= 0;
+  const isLast = activeStep >= count - 1;
+  return /* @__PURE__ */ jsxs2(
+    Box,
+    {
+      className,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 4,
+      height: size === "md" ? 24 : 18,
+      children: [
+        arrows && /* @__PURE__ */ jsx12(
+          Box,
+          {
+            onPress: handlePrev,
+            width: arrowSize,
+            height: arrowSize,
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: 4,
+            opacity: isFirst ? 0.2 : 1,
+            cursor: isFirst ? "default" : "pointer",
+            children: /* @__PURE__ */ jsx12(ArrowLeft, { size: iconSize, color: theme.colors.content.primary })
+          }
+        ),
+        /* @__PURE__ */ jsx12(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx12(
+          ProgressStepItem,
+          {
+            size,
+            state: i === activeStep ? "active" : "default",
+            onPress: onStepPress ? () => onStepPress(i) : void 0
+          },
+          i
+        )) }),
+        arrows && /* @__PURE__ */ jsx12(
+          Box,
+          {
+            onPress: handleNext,
+            width: arrowSize,
+            height: arrowSize,
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: 4,
+            opacity: isLast ? 0.2 : 1,
+            cursor: isLast ? "default" : "pointer",
+            children: /* @__PURE__ */ jsx12(ArrowRight, { size: iconSize, color: theme.colors.content.primary })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  ProgressStep,
+  ProgressStepItem,
+  Step,
+  Stepper
+};
+//# sourceMappingURL=index.mjs.map