@xsolla/xui-b2b-chip-stepper 0.195.0

package/web/index.mjs

@@ -0,0 +1,514 @@
+// src/ChipStepper.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,
+    onError,
+    onLoad,
+    type,
+    disabled,
+    id,
+    testID,
+    "data-testid": dataTestId,
+    ...props
+  }, ref) => {
+    if (as === "img" && src) {
+      return /* @__PURE__ */ jsx(
+        "img",
+        {
+          src,
+          alt: alt || "",
+          onError,
+          onLoad,
+          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,
+            ...props.style
+          }
+        }
+      );
+    }
+    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,
+  testID,
+  "data-testid": dataTestId,
+  numberOfLines: _numberOfLines,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx2(
+    StyledText,
+    {
+      ...props,
+      style,
+      className,
+      id,
+      role,
+      "data-testid": dataTestId || testID
+    }
+  );
+};
+
+// src/ChipStepper.tsx
+import { useResolvedTheme } from "@xsolla/xui-core";
+import { ChevronRight } from "@xsolla/xui-icons-base";
+
+// src/ChipStep.tsx
+import { useCallback } from "react";
+import { Warning } from "@xsolla/xui-icons-base";
+
+// src/sizing.ts
+var SMALL = {
+  itemGap: 4,
+  chipPaddingTop: 4,
+  chipPaddingBottom: 4,
+  chipPaddingLeft: 4,
+  chipPaddingRight: 6,
+  chipRadius: 4,
+  chipBorderWidth: 1,
+  chipIconSize: 12,
+  separatorIconSize: 12,
+  labelFontSize: 10,
+  labelLineHeight: 14
+};
+var MEDIUM = {
+  itemGap: 4,
+  chipPaddingTop: 6,
+  chipPaddingBottom: 6,
+  chipPaddingLeft: 6,
+  chipPaddingRight: 8,
+  chipRadius: 4,
+  chipBorderWidth: 1,
+  chipIconSize: 16,
+  separatorIconSize: 16,
+  labelFontSize: 12,
+  labelLineHeight: 16
+};
+var chipStepperSizing = {
+  sm: SMALL,
+  md: MEDIUM
+};
+var getExtraLeftPadding = (sizing) => sizing.itemGap;
+
+// src/ChipStep.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var getChipPalette = (status, theme) => {
+  switch (status) {
+    case "active":
+      return {
+        background: theme.colors.overlay.brand,
+        border: theme.colors.border.brand,
+        text: theme.colors.content.primary
+      };
+    case "done":
+      return {
+        background: theme.colors.background.primary,
+        border: theme.colors.border.secondary,
+        text: theme.colors.content.primary
+      };
+    case "error":
+      return {
+        background: theme.colors.overlay.alert,
+        border: theme.colors.border.alert,
+        text: theme.colors.content.alert.primary
+      };
+    case "disabled":
+      return {
+        background: theme.colors.background.neutral.secondary,
+        border: "transparent",
+        text: theme.colors.control.text.disable
+      };
+    case "next":
+    default:
+      return {
+        background: theme.colors.background.primary,
+        border: theme.colors.border.secondary,
+        text: theme.colors.content.tertiary
+      };
+  }
+};
+var ChipStep = ({
+  step,
+  stepNumber,
+  showStepNumber,
+  sizing,
+  theme,
+  onActivate
+}) => {
+  const {
+    label,
+    status = "next",
+    leftIcon,
+    showLeftExtraPadding = false,
+    onClick
+  } = step;
+  const isDisabled = status === "disabled";
+  const isActive = status === "active";
+  const isInteractive = !isDisabled && (!!onClick || !!onActivate);
+  const palette = getChipPalette(status, theme);
+  const handlePress = useCallback(() => {
+    if (isDisabled) return;
+    onClick?.();
+    onActivate?.();
+  }, [isDisabled, onClick, onActivate]);
+  const icon = status === "error" ? /* @__PURE__ */ jsx3(Warning, { size: sizing.chipIconSize, color: palette.text }) : leftIcon;
+  const paddingLeft = sizing.chipPaddingLeft + (showLeftExtraPadding ? getExtraLeftPadding(sizing) : 0);
+  const textStyle = {
+    color: palette.text,
+    fontSize: sizing.labelFontSize,
+    lineHeight: sizing.labelLineHeight,
+    fontWeight: "500"
+  };
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      as: isInteractive ? "button" : void 0,
+      onPress: isInteractive ? handlePress : void 0,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: palette.background,
+      borderColor: palette.border,
+      borderWidth: sizing.chipBorderWidth,
+      borderRadius: sizing.chipRadius,
+      "data-testid": "chip-step",
+      "data-step-status": status,
+      "aria-current": isActive ? "step" : void 0,
+      "aria-disabled": isDisabled ? true : void 0,
+      style: {
+        gap: sizing.itemGap,
+        paddingTop: sizing.chipPaddingTop,
+        paddingBottom: sizing.chipPaddingBottom,
+        paddingLeft,
+        paddingRight: sizing.chipPaddingRight,
+        flexShrink: 0,
+        cursor: isInteractive ? "pointer" : "default"
+      },
+      children: [
+        icon,
+        showStepNumber && /* @__PURE__ */ jsx3(Text, { ...textStyle, children: `${stepNumber}.` }),
+        typeof label === "string" || typeof label === "number" ? /* @__PURE__ */ jsx3(Text, { ...textStyle, children: label }) : label
+      ]
+    }
+  );
+};
+ChipStep.displayName = "ChipStep";
+
+// src/ChipStepper.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var ChipStepper = forwardRef(
+  ({
+    steps,
+    size = "sm",
+    onStepClick,
+    showStepNumbers = true,
+    showSeparators = true,
+    className,
+    "aria-label": ariaLabel,
+    testID,
+    themeMode,
+    themeProductContext,
+    ...rest
+  }, ref) => {
+    const { theme } = useResolvedTheme({ themeMode, themeProductContext });
+    const sizing = chipStepperSizing[size];
+    const defaultAriaLabel = `Progress: ${steps.length} step${steps.length === 1 ? "" : "s"}`;
+    return /* @__PURE__ */ jsx4(
+      Box,
+      {
+        ref,
+        as: "nav",
+        role: "navigation",
+        "aria-label": ariaLabel ?? defaultAriaLabel,
+        className,
+        testID,
+        "data-chip-stepper-size": size,
+        flexDirection: "row",
+        alignItems: "center",
+        flexWrap: "wrap",
+        style: { gap: sizing.itemGap },
+        ...rest,
+        children: steps.map((step, i) => {
+          const isLast = i === steps.length - 1;
+          return /* @__PURE__ */ jsxs2(
+            Box,
+            {
+              flexDirection: "row",
+              alignItems: "center",
+              style: { gap: sizing.itemGap },
+              children: [
+                /* @__PURE__ */ jsx4(
+                  ChipStep,
+                  {
+                    step,
+                    stepNumber: i + 1,
+                    showStepNumber: showStepNumbers,
+                    sizing,
+                    theme,
+                    onActivate: onStepClick ? () => onStepClick({ number: i + 1, step }) : void 0
+                  }
+                ),
+                !isLast && showSeparators && // Decorative: the ordered labels already convey sequence.
+                /* @__PURE__ */ jsx4(
+                  ChevronRight,
+                  {
+                    size: sizing.separatorIconSize,
+                    color: theme.colors.content.tertiary,
+                    "aria-hidden": true
+                  }
+                )
+              ]
+            },
+            step.key ?? `chip-step-${i}`
+          );
+        })
+      }
+    );
+  }
+);
+ChipStepper.displayName = "ChipStepper";
+export {
+  ChipStepper,
+  chipStepperSizing
+};
+//# sourceMappingURL=index.mjs.map

package/web/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ChipStepper.tsx","../../../../foundation/primitives-web/src/Box.tsx","../../../../foundation/primitives-web/src/filterDOMProps.ts","../../../../../node_modules/@emotion/memoize/dist/memoize.esm.js","../../../../../node_modules/@emotion/is-prop-valid/dist/is-prop-valid.esm.js","../../../../foundation/primitives-web/src/Text.tsx","../../src/ChipStep.tsx","../../src/sizing.ts"],"sourcesContent":["import { forwardRef } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme } from \"@xsolla/xui-core\";\nimport { ChevronRight } from \"@xsolla/xui-icons-base\";\nimport { ChipStep, type ChipStepperTheme } from \"./ChipStep\";\nimport { chipStepperSizing } from \"./sizing\";\nimport type { ChipStepperProps } from \"./types\";\n\n/**\n * A horizontal, pill-per-step progress indicator for B2B surfaces.\n *\n * Each step renders as a small chip (`\"1. Label\"`, optionally with a leading\n * icon) and steps are separated by chevron glyphs. Step numbers are derived\n * from array position — callers pass labels only.\n *\n * Distinct from `@xsolla/xui-b2b-stepper`, which renders numbered circles with\n * title/description blocks and supports a vertical layout. Reach for this one\n * in tight horizontal spaces such as form and drawer headers.\n *\n * ```tsx\n * <ChipStepper\n *   steps={[\n *     { label: \"Details\", status: \"done\" },\n *     { label: \"Billing\", status: \"active\" },\n *     { label: \"Confirm\" },\n *   ]}\n *   onStepClick={({ number }) => goTo(number)}\n * />\n * ```\n */\nexport const ChipStepper = forwardRef<HTMLDivElement, ChipStepperProps>(\n  (\n    {\n      steps,\n      size = \"sm\",\n      onStepClick,\n      showStepNumbers = true,\n      showSeparators = true,\n      className,\n      \"aria-label\": ariaLabel,\n      testID,\n      themeMode,\n      themeProductContext,\n      ...rest\n    },\n    ref\n  ) => {\n    const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n    const sizing = chipStepperSizing[size];\n\n    const defaultAriaLabel = `Progress: ${steps.length} step${\n      steps.length === 1 ? \"\" : \"s\"\n    }`;\n\n    return (\n      <Box\n        ref={ref}\n        as=\"nav\"\n        // `role` is redundant on a real <nav> but is the only semantic the\n        // native Box can honour, where `as` is ignored.\n        role=\"navigation\"\n        aria-label={ariaLabel ?? defaultAriaLabel}\n        className={className}\n        testID={testID}\n        data-chip-stepper-size={size}\n        flexDirection=\"row\"\n        alignItems=\"center\"\n        flexWrap=\"wrap\"\n        style={{ gap: sizing.itemGap }}\n        {...rest}\n      >\n        {steps.map((step, i) => {\n          const isLast = i === steps.length - 1;\n          return (\n            <Box\n              key={step.key ?? `chip-step-${i}`}\n              flexDirection=\"row\"\n              alignItems=\"center\"\n              style={{ gap: sizing.itemGap }}\n            >\n              <ChipStep\n                step={step}\n                stepNumber={i + 1}\n                showStepNumber={showStepNumbers}\n                sizing={sizing}\n                theme={theme as ChipStepperTheme}\n                onActivate={\n                  onStepClick\n                    ? () => onStepClick({ number: i + 1, step })\n                    : undefined\n                }\n              />\n              {!isLast && showSeparators && (\n                // Decorative: the ordered labels already convey sequence.\n                <ChevronRight\n                  size={sizing.separatorIconSize}\n                  color={theme.colors.content.tertiary}\n                  aria-hidden\n                />\n              )}\n            </Box>\n          );\n        })}\n      </Box>\n    );\n  }\n);\n\nChipStepper.displayName = \"ChipStepper\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\nimport { createFilteredElement } from \"./filterDOMProps\";\n\nconst FilteredDiv = createFilteredElement(\"div\");\n\nconst StyledBox = styled(FilteredDiv)<BoxProps>`\n  display: flex;\n  box-sizing: border-box;\n  background-color: ${(props) => props.backgroundColor || \"transparent\"};\n  border-color: ${(props) => props.borderColor || \"transparent\"};\n  border-width: ${(props) =>\n    typeof props.borderWidth === \"number\"\n      ? `${props.borderWidth}px`\n      : props.borderWidth || 0};\n\n  ${(props) =>\n    props.borderBottomWidth !== undefined &&\n    `\n    border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n    border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n    border-bottom-style: solid;\n  `}\n  ${(props) =>\n    props.borderTopWidth !== undefined &&\n    `\n    border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n    border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n    border-top-style: solid;\n  `}\n  ${(props) =>\n    props.borderLeftWidth !== undefined &&\n    `\n    border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n    border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n    border-left-style: solid;\n  `}\n  ${(props) =>\n    props.borderRightWidth !== undefined &&\n    `\n    border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n    border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n    border-right-style: solid;\n  `}\n\n  border-style: ${(props) =>\n    props.borderStyle ||\n    (props.borderWidth ||\n    props.borderBottomWidth ||\n    props.borderTopWidth ||\n    props.borderLeftWidth ||\n    props.borderRightWidth\n      ? \"solid\"\n      : \"none\")};\n  border-radius: ${(props) =>\n    typeof props.borderRadius === \"number\"\n      ? `${props.borderRadius}px`\n      : props.borderRadius || 0};\n  height: ${(props) =>\n    typeof props.height === \"number\"\n      ? `${props.height}px`\n      : props.height || \"auto\"};\n  width: ${(props) =>\n    typeof props.width === \"number\"\n      ? `${props.width}px`\n      : props.width || \"auto\"};\n  min-width: ${(props) =>\n    typeof props.minWidth === \"number\"\n      ? `${props.minWidth}px`\n      : props.minWidth || \"auto\"};\n  min-height: ${(props) =>\n    typeof props.minHeight === \"number\"\n      ? `${props.minHeight}px`\n      : props.minHeight || \"auto\"};\n  max-width: ${(props) =>\n    typeof props.maxWidth === \"number\"\n      ? `${props.maxWidth}px`\n      : props.maxWidth || \"none\"};\n  max-height: ${(props) =>\n    typeof props.maxHeight === \"number\"\n      ? `${props.maxHeight}px`\n      : props.maxHeight || \"none\"};\n\n  padding: ${(props) =>\n    typeof props.padding === \"number\"\n      ? `${props.padding}px`\n      : props.padding || 0};\n  ${(props) =>\n    props.paddingHorizontal &&\n    `\n    padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n    padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n  `}\n  ${(props) =>\n    props.paddingVertical &&\n    `\n    padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n    padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n  `}\n  ${(props) =>\n    props.paddingTop !== undefined &&\n    `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n  ${(props) =>\n    props.paddingBottom !== undefined &&\n    `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n  ${(props) =>\n    props.paddingLeft !== undefined &&\n    `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n  ${(props) =>\n    props.paddingRight !== undefined &&\n    `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n  margin: ${(props) =>\n    typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n  ${(props) =>\n    props.marginTop !== undefined &&\n    `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n  ${(props) =>\n    props.marginBottom !== undefined &&\n    `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n  ${(props) =>\n    props.marginLeft !== undefined &&\n    `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n  ${(props) =>\n    props.marginRight !== undefined &&\n    `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n  flex-direction: ${(props) => props.flexDirection || \"column\"};\n  flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n  align-items: ${(props) => props.alignItems || \"stretch\"};\n  justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n  cursor: ${(props) =>\n    props.cursor\n      ? props.cursor\n      : props.onClick || props.onPress\n        ? \"pointer\"\n        : \"inherit\"};\n  position: ${(props) => props.position || \"static\"};\n  top: ${(props) =>\n    typeof props.top === \"number\" ? `${props.top}px` : props.top};\n  bottom: ${(props) =>\n    typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n  left: ${(props) =>\n    typeof props.left === \"number\" ? `${props.left}px` : props.left};\n  right: ${(props) =>\n    typeof props.right === \"number\" ? `${props.right}px` : props.right};\n  flex: ${(props) => props.flex};\n  flex-shrink: ${(props) => props.flexShrink ?? 1};\n  gap: ${(props) =>\n    typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n  align-self: ${(props) => props.alignSelf || \"auto\"};\n  overflow: ${(props) => props.overflow || \"visible\"};\n  overflow-x: ${(props) => props.overflowX || \"visible\"};\n  overflow-y: ${(props) => props.overflowY || \"visible\"};\n  z-index: ${(props) => props.zIndex};\n  opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n  pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n  &:hover {\n    ${(props) =>\n      props.hoverStyle?.backgroundColor &&\n      `background-color: ${props.hoverStyle.backgroundColor};`}\n    ${(props) =>\n      props.hoverStyle?.borderColor &&\n      `border-color: ${props.hoverStyle.borderColor};`}\n  }\n\n  &:active {\n    ${(props) =>\n      props.pressStyle?.backgroundColor &&\n      `background-color: ${props.pressStyle.backgroundColor};`}\n  }\n`;\n\nexport const Box = React.forwardRef<\n  HTMLDivElement | HTMLButtonElement,\n  BoxProps\n>(\n  (\n    {\n      children,\n      onPress,\n      onKeyDown,\n      onKeyUp,\n      role,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-current\": ariaCurrent,\n      \"aria-disabled\": ariaDisabled,\n      \"aria-live\": ariaLive,\n      \"aria-busy\": ariaBusy,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-expanded\": ariaExpanded,\n      \"aria-haspopup\": ariaHasPopup,\n      \"aria-pressed\": ariaPressed,\n      \"aria-controls\": ariaControls,\n      tabIndex,\n      as,\n      src,\n      alt,\n      onError,\n      onLoad,\n      type,\n      disabled,\n      id,\n      testID,\n      \"data-testid\": dataTestId,\n      ...props\n    },\n    ref\n  ) => {\n    // Handle as=\"img\" for rendering images with proper border-radius\n    if (as === \"img\" && src) {\n      return (\n        <img\n          src={src}\n          alt={alt || \"\"}\n          onError={onError}\n          onLoad={onLoad}\n          style={{\n            display: \"block\",\n            objectFit: \"cover\",\n            width:\n              typeof props.width === \"number\"\n                ? `${props.width}px`\n                : props.width,\n            height:\n              typeof props.height === \"number\"\n                ? `${props.height}px`\n                : props.height,\n            borderRadius:\n              typeof props.borderRadius === \"number\"\n                ? `${props.borderRadius}px`\n                : props.borderRadius,\n            position: props.position,\n            top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n            left:\n              typeof props.left === \"number\" ? `${props.left}px` : props.left,\n            right:\n              typeof props.right === \"number\"\n                ? `${props.right}px`\n                : props.right,\n            bottom:\n              typeof props.bottom === \"number\"\n                ? `${props.bottom}px`\n                : props.bottom,\n            ...props.style,\n          }}\n        />\n      );\n    }\n\n    return (\n      <StyledBox\n        ref={ref}\n        elementType={as}\n        id={id}\n        type={as === \"button\" ? type || \"button\" : undefined}\n        disabled={as === \"button\" ? disabled : undefined}\n        onClick={onPress}\n        onKeyDown={onKeyDown}\n        onKeyUp={onKeyUp}\n        role={role}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-current={ariaCurrent}\n        aria-disabled={ariaDisabled}\n        aria-busy={ariaBusy}\n        aria-describedby={ariaDescribedBy}\n        aria-expanded={ariaExpanded}\n        aria-haspopup={ariaHasPopup}\n        aria-pressed={ariaPressed}\n        aria-controls={ariaControls}\n        aria-live={ariaLive}\n        tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n        data-testid={dataTestId || testID}\n        {...props}\n      >\n        {children}\n      </StyledBox>\n    );\n  }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport isPropValid from \"@emotion/is-prop-valid\";\n\n// Props that @emotion/is-prop-valid incorrectly treats as valid HTML.\n// These are React Native or component-specific props that match\n// valid HTML patterns (on* event handlers, SVG attributes).\nexport const ADDITIONAL_BLOCKED_PROPS = new Set([\n  // RN-only event handlers (pass isPropValid's on* pattern)\n  \"onPress\",\n  \"onChangeText\",\n  \"onLayout\",\n  \"onMoveShouldSetResponder\",\n  \"onResponderGrant\",\n  \"onResponderMove\",\n  \"onResponderRelease\",\n  \"onResponderTerminate\",\n  // SVG attributes that pass isPropValid\n  \"strokeWidth\",\n  // CSS properties that pass isPropValid but are used as component props\n  \"overflow\",\n  \"cursor\",\n  \"fontSize\",\n  \"fontWeight\",\n  \"fontFamily\",\n  \"textDecoration\",\n]);\n\nfunction shouldForwardProp(key: string): boolean {\n  if (ADDITIONAL_BLOCKED_PROPS.has(key)) return false;\n  return isPropValid(key);\n}\n\n/**\n * Creates a React component that renders the given HTML tag\n * but filters out non-HTML props before they reach the DOM.\n *\n * Uses @emotion/is-prop-valid (same library styled-components v4\n * uses internally) to automatically block invalid HTML attributes,\n * plus a small blocklist for false positives (RN on* handlers, SVG attrs).\n *\n * Usage: `const FilteredDiv = createFilteredElement(\"div\");`\n * Then:  `const StyledBox = styled(FilteredDiv)<BoxProps>\\`...\\`;`\n *\n * styled-components can still read ALL props for CSS interpolation,\n * but only valid HTML attributes are forwarded to the DOM element.\n */\nexport function createFilteredElement(defaultTag: string) {\n  const Component = React.forwardRef<HTMLElement, Record<string, unknown>>(\n    ({ children, elementType, ...props }, ref) => {\n      const Tag = (elementType as string) || defaultTag;\n      const htmlProps: Record<string, unknown> = {};\n      for (const key of Object.keys(props)) {\n        if (shouldForwardProp(key)) {\n          htmlProps[key] = props[key];\n        }\n      }\n      return React.createElement(\n        Tag,\n        { ref, ...htmlProps },\n        children as React.ReactNode\n      );\n    }\n  );\n  Component.displayName = `Filtered(${defaultTag})`;\n  return Component;\n}\n","function memoize(fn) {\n  var cache = {};\n  return function (arg) {\n    if (cache[arg] === undefined) cache[arg] = fn(arg);\n    return cache[arg];\n  };\n}\n\nexport default memoize;\n","import memoize from '@emotion/memoize';\n\nvar 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)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23\n\nvar index = memoize(function (prop) {\n  return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111\n  /* o */\n  && prop.charCodeAt(1) === 110\n  /* n */\n  && prop.charCodeAt(2) < 91;\n}\n/* Z+1 */\n);\n\nexport default index;\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\nimport { createFilteredElement } from \"./filterDOMProps\";\n\nconst FilteredSpan = createFilteredElement(\"span\");\n\nconst StyledText = styled(FilteredSpan)<TextProps>`\n  color: ${(props) => props.color || \"inherit\"};\n  font-size: ${(props) =>\n    typeof props.fontSize === \"number\"\n      ? `${props.fontSize}px`\n      : props.fontSize || \"inherit\"};\n  font-weight: ${(props) => props.fontWeight || \"normal\"};\n  font-family: ${(props) =>\n    props.fontFamily ||\n    '\"Aktiv Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif'};\n  line-height: ${(props) =>\n    typeof props.lineHeight === \"number\"\n      ? `${props.lineHeight}px`\n      : props.lineHeight || \"inherit\"};\n  white-space: ${(props) => props.whiteSpace || \"normal\"};\n  text-align: ${(props) => props.textAlign || \"inherit\"};\n  text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n  style,\n  className,\n  id,\n  role,\n  testID,\n  \"data-testid\": dataTestId,\n  numberOfLines: _numberOfLines,\n  ...props\n}) => {\n  return (\n    <StyledText\n      {...props}\n      style={style}\n      className={className}\n      id={id}\n      role={role}\n      data-testid={dataTestId || testID}\n    />\n  );\n};\n","import React, { useCallback } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text } from \"@xsolla/xui-primitives\";\nimport { Warning } from \"@xsolla/xui-icons-base\";\nimport { getExtraLeftPadding, type ChipStepperSizing } from \"./sizing\";\nimport type { ChipStepStatus, ChipStepType } from \"./types\";\n\n/**\n * Relaxed theme shape — only the token paths this component reads. Mirrors the\n * pattern used by `@xsolla/xui-b2b-stepper`'s `StepperTheme`.\n */\nexport type ChipStepperTheme = {\n  colors: {\n    background: {\n      primary: string;\n      neutral: { secondary: string };\n    };\n    border: {\n      brand: string;\n      secondary: string;\n      alert: string;\n    };\n    overlay: {\n      brand: string;\n      alert: string;\n    };\n    content: {\n      primary: string;\n      tertiary: string;\n      alert: { primary: string };\n    };\n    control: {\n      text: { disable: string };\n    };\n  };\n};\n\ntype ChipPalette = {\n  background: string;\n  border: string;\n  text: string;\n};\n\n/**\n * Per-status colour resolution. Every value comes from the active theme, so\n * the chip follows whichever theme mode is in effect.\n */\nexport const getChipPalette = (\n  status: ChipStepStatus,\n  theme: ChipStepperTheme\n): ChipPalette => {\n  switch (status) {\n    case \"active\":\n      return {\n        background: theme.colors.overlay.brand,\n        border: theme.colors.border.brand,\n        text: theme.colors.content.primary,\n      };\n    case \"done\":\n      // Same neutral chip as `next`; only the text colour differs, so a\n      // completed step reads as \"settled\" rather than \"upcoming\".\n      return {\n        background: theme.colors.background.primary,\n        border: theme.colors.border.secondary,\n        text: theme.colors.content.primary,\n      };\n    case \"error\":\n      return {\n        background: theme.colors.overlay.alert,\n        border: theme.colors.border.alert,\n        text: theme.colors.content.alert.primary,\n      };\n    case \"disabled\":\n      return {\n        background: theme.colors.background.neutral.secondary,\n        border: \"transparent\",\n        text: theme.colors.control.text.disable,\n      };\n    case \"next\":\n    default:\n      return {\n        background: theme.colors.background.primary,\n        border: theme.colors.border.secondary,\n        text: theme.colors.content.tertiary,\n      };\n  }\n};\n\nexport interface ChipStepProps {\n  step: ChipStepType;\n  /** 1-based position, computed by the container. */\n  stepNumber: number;\n  showStepNumber: boolean;\n  sizing: ChipStepperSizing;\n  theme: ChipStepperTheme;\n  onActivate?: () => void;\n}\n\nexport const ChipStep: React.FC<ChipStepProps> = ({\n  step,\n  stepNumber,\n  showStepNumber,\n  sizing,\n  theme,\n  onActivate,\n}) => {\n  const {\n    label,\n    status = \"next\",\n    leftIcon,\n    showLeftExtraPadding = false,\n    onClick,\n  } = step;\n\n  const isDisabled = status === \"disabled\";\n  const isActive = status === \"active\";\n  const isInteractive = !isDisabled && (!!onClick || !!onActivate);\n  const palette = getChipPalette(status, theme);\n\n  const handlePress = useCallback(() => {\n    if (isDisabled) return;\n    onClick?.();\n    onActivate?.();\n  }, [isDisabled, onClick, onActivate]);\n\n  // `error` always shows the warning glyph, overriding any caller icon — the\n  // error state must not be colour-only (WCAG 1.4.1).\n  const icon =\n    status === \"error\" ? (\n      <Warning size={sizing.chipIconSize} color={palette.text} />\n    ) : (\n      leftIcon\n    );\n\n  const paddingLeft =\n    sizing.chipPaddingLeft +\n    (showLeftExtraPadding ? getExtraLeftPadding(sizing) : 0);\n\n  const textStyle = {\n    color: palette.text,\n    fontSize: sizing.labelFontSize,\n    lineHeight: sizing.labelLineHeight,\n    fontWeight: \"500\" as const,\n  };\n\n  return (\n    <Box\n      as={isInteractive ? \"button\" : undefined}\n      onPress={isInteractive ? handlePress : undefined}\n      flexDirection=\"row\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      backgroundColor={palette.background}\n      borderColor={palette.border}\n      borderWidth={sizing.chipBorderWidth}\n      borderRadius={sizing.chipRadius}\n      data-testid=\"chip-step\"\n      data-step-status={status}\n      aria-current={isActive ? \"step\" : undefined}\n      aria-disabled={isDisabled ? true : undefined}\n      style={{\n        gap: sizing.itemGap,\n        paddingTop: sizing.chipPaddingTop,\n        paddingBottom: sizing.chipPaddingBottom,\n        paddingLeft,\n        paddingRight: sizing.chipPaddingRight,\n        flexShrink: 0,\n        cursor: isInteractive ? \"pointer\" : \"default\",\n      }}\n    >\n      {icon}\n      {/* Figma keeps the ordinal and the label as two separate TEXT nodes\n          separated by the 4px auto-layout gap, not one concatenated string. */}\n      {showStepNumber && <Text {...textStyle}>{`${stepNumber}.`}</Text>}\n      {typeof label === \"string\" || typeof label === \"number\" ? (\n        <Text {...textStyle}>{label}</Text>\n      ) : (\n        label\n      )}\n    </Box>\n  );\n};\n\nChipStep.displayName = \"ChipStep\";\n","import type { ChipStepSize } from \"./types\";\n\n/**\n * Chip-stepper metrics, measured from the Figma `.Step-item` component set\n * (file `fGm4yji206wAW2ZU7hhRRV`, node `15643:9363`) rather than derived from\n * prose. Read via the Figma API on 2026-07-30.\n *\n * Kept local to the package rather than added to `theme.sizing` (where the\n * circle-based `stepperB2b()` lives) because these values are specific to the\n * pill layout and are not shared with any other component. If a second\n * consumer appears, promote this into `theme.sizing.chipStepperB2b()`.\n *\n * Colours are NOT defined here — every colour is read from the active theme so\n * the component follows all theme modes.\n */\nexport type ChipStepperSizing = {\n  /** Auto-layout gap between chip children, and between chip and separator. */\n  itemGap: number;\n  chipPaddingTop: number;\n  chipPaddingBottom: number;\n  /** Leading inset. Measured smaller than the trailing inset in both sizes. */\n  chipPaddingLeft: number;\n  chipPaddingRight: number;\n  chipRadius: number;\n  chipBorderWidth: number;\n  chipIconSize: number;\n  separatorIconSize: number;\n  labelFontSize: number;\n  labelLineHeight: number;\n};\n\n/**\n * Figma Size=S — 22px tall chip. The design's default variant.\n */\nconst SMALL: ChipStepperSizing = {\n  itemGap: 4,\n  chipPaddingTop: 4,\n  chipPaddingBottom: 4,\n  chipPaddingLeft: 4,\n  chipPaddingRight: 6,\n  chipRadius: 4,\n  chipBorderWidth: 1,\n  chipIconSize: 12,\n  separatorIconSize: 12,\n  labelFontSize: 10,\n  labelLineHeight: 14,\n};\n\n/**\n * Figma Size=M — 28px tall chip.\n */\nconst MEDIUM: ChipStepperSizing = {\n  itemGap: 4,\n  chipPaddingTop: 6,\n  chipPaddingBottom: 6,\n  chipPaddingLeft: 6,\n  chipPaddingRight: 8,\n  chipRadius: 4,\n  chipBorderWidth: 1,\n  chipIconSize: 16,\n  separatorIconSize: 16,\n  labelFontSize: 12,\n  labelLineHeight: 16,\n};\n\nexport const chipStepperSizing: Record<ChipStepSize, ChipStepperSizing> = {\n  sm: SMALL,\n  md: MEDIUM,\n};\n\n/**\n * `showLeftExtraPadding` in Figma is a zero-width spacer frame toggled by a\n * boolean, so enabling it adds exactly one auto-layout gap (not a bespoke\n * padding value).\n */\nexport const getExtraLeftPadding = (sizing: ChipStepperSizing): number =>\n  sizing.itemGap;\n"],"mappings":"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","names":["React","React","styled","jsx","styled","jsx","jsx","jsxs"]}