@xsolla/xui-stepper 0.89.0 → 0.91.0

package/native/index.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.tsx
@@ -38,7 +28,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Stepper.tsx
-var import_react6 = require("react");
+var import_react3 = require("react");
 
 // ../primitives-native/src/Box.tsx
 var import_react_native = require("react-native");
@@ -272,14 +262,9 @@ var Spinner = ({
 };
 Spinner.displayName = "Spinner";
 
-// ../primitives-native/src/Icon.tsx
-var import_react = __toESM(require("react"));
+// ../primitives-native/src/Divider.tsx
 var import_react_native4 = require("react-native");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-
-// ../primitives-native/src/Divider.tsx
-var import_react_native5 = require("react-native");
-var import_jsx_runtime5 = require("react/jsx-runtime");
 var Divider = ({
   color,
   height,
@@ -298,227 +283,14 @@ var Divider = ({
       ...vertical ? { borderLeftWidth: typeof width === "number" ? width : 1 } : { borderTopWidth: typeof height === "number" ? height : 1 }
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.View, { style });
-};
-
-// ../primitives-native/src/Input.tsx
-var import_react2 = require("react");
-var import_react_native6 = require("react-native");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var keyboardTypeMap = {
-  text: "default",
-  number: "numeric",
-  email: "email-address",
-  tel: "phone-pad",
-  url: "url",
-  decimal: "decimal-pad"
-};
-var inputModeToKeyboardType = {
-  none: "default",
-  text: "default",
-  decimal: "decimal-pad",
-  numeric: "number-pad",
-  tel: "phone-pad",
-  search: "default",
-  email: "email-address",
-  url: "url"
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style });
 };
-var autoCompleteToTextContentType = {
-  "one-time-code": "oneTimeCode",
-  email: "emailAddress",
-  username: "username",
-  password: "password",
-  "new-password": "newPassword",
-  tel: "telephoneNumber",
-  "postal-code": "postalCode",
-  name: "name"
-};
-var InputPrimitive = (0, import_react2.forwardRef)(
-  ({
-    value,
-    placeholder,
-    onChange,
-    onChangeText,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    disabled,
-    secureTextEntry,
-    style,
-    color,
-    fontSize,
-    placeholderTextColor,
-    maxLength,
-    type,
-    inputMode,
-    autoComplete,
-    id,
-    "aria-describedby": ariaDescribedBy,
-    "aria-label": ariaLabel,
-    "aria-disabled": ariaDisabled,
-    "data-testid": dataTestId
-  }, ref) => {
-    const handleChangeText = (text) => {
-      onChangeText?.(text);
-      if (onChange) {
-        const syntheticEvent = {
-          target: { value: text },
-          currentTarget: { value: text },
-          type: "change",
-          nativeEvent: { text },
-          preventDefault: () => {
-          },
-          stopPropagation: () => {
-          },
-          isTrusted: false
-        };
-        onChange(syntheticEvent);
-      }
-    };
-    const keyboardType = inputMode ? inputModeToKeyboardType[inputMode] || "default" : type ? keyboardTypeMap[type] || "default" : "default";
-    const textContentType = autoComplete ? autoCompleteToTextContentType[autoComplete] : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_react_native6.TextInput,
-      {
-        ref,
-        value,
-        placeholder,
-        onChangeText: handleChangeText,
-        onFocus,
-        onBlur,
-        onKeyPress: (e) => {
-          if (onKeyDown) {
-            onKeyDown({
-              key: e.nativeEvent.key,
-              preventDefault: () => {
-              }
-            });
-          }
-        },
-        editable: !disabled,
-        secureTextEntry: secureTextEntry || type === "password",
-        keyboardType,
-        textContentType,
-        style: [
-          {
-            color,
-            fontSize: typeof fontSize === "number" ? fontSize : void 0,
-            flex: 1,
-            padding: 0,
-            textAlign: style?.textAlign || "left"
-          },
-          style
-        ],
-        placeholderTextColor,
-        maxLength,
-        testID: dataTestId || id,
-        accessibilityLabel: ariaLabel,
-        accessibilityHint: ariaDescribedBy,
-        accessibilityState: {
-          disabled: disabled || ariaDisabled
-        },
-        accessible: true
-      }
-    );
-  }
-);
-InputPrimitive.displayName = "InputPrimitive";
-
-// ../primitives-native/src/TextArea.tsx
-var import_react3 = require("react");
-var import_react_native7 = require("react-native");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var TextAreaPrimitive = (0, import_react3.forwardRef)(
-  ({
-    value,
-    placeholder,
-    onChange,
-    onChangeText,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    disabled,
-    style,
-    color,
-    fontSize,
-    placeholderTextColor,
-    maxLength,
-    rows,
-    id,
-    "aria-describedby": ariaDescribedBy,
-    "aria-label": ariaLabel,
-    "aria-disabled": ariaDisabled,
-    "data-testid": dataTestId
-  }, ref) => {
-    const handleChangeText = (text) => {
-      onChangeText?.(text);
-      if (onChange) {
-        const syntheticEvent = {
-          target: { value: text },
-          currentTarget: { value: text },
-          type: "change",
-          nativeEvent: { text },
-          preventDefault: () => {
-          },
-          stopPropagation: () => {
-          },
-          isTrusted: false
-        };
-        onChange(syntheticEvent);
-      }
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-      import_react_native7.TextInput,
-      {
-        ref,
-        value,
-        placeholder,
-        onChangeText: handleChangeText,
-        onFocus,
-        onBlur,
-        onKeyPress: (e) => {
-          if (onKeyDown) {
-            onKeyDown({
-              key: e.nativeEvent.key,
-              preventDefault: () => {
-              }
-            });
-          }
-        },
-        editable: !disabled,
-        multiline: true,
-        numberOfLines: rows || 4,
-        style: [
-          {
-            color,
-            fontSize: typeof fontSize === "number" ? fontSize : void 0,
-            flex: 1,
-            padding: 0,
-            textAlignVertical: "top",
-            textAlign: style?.textAlign || "left"
-          },
-          style
-        ],
-        placeholderTextColor,
-        maxLength,
-        testID: dataTestId || id,
-        accessibilityLabel: ariaLabel,
-        accessibilityHint: ariaDescribedBy,
-        accessibilityState: {
-          disabled: disabled || ariaDisabled
-        },
-        accessible: true
-      }
-    );
-  }
-);
-TextAreaPrimitive.displayName = "TextAreaPrimitive";
 
 // src/Stepper.tsx
 var import_xui_core3 = require("@xsolla/xui-core");
 
 // src/Step.tsx
-var import_react5 = require("react");
+var import_react2 = require("react");
 var import_xui_core2 = require("@xsolla/xui-core");
 var import_xui_icons = require("@xsolla/xui-icons");
 
@@ -563,7 +335,7 @@ var isWeb = () => {
 
 // src/StepTail.tsx
 var import_xui_core = require("@xsolla/xui-core");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var StepTail = ({
   variantUI,
   direction,
@@ -648,7 +420,7 @@ var StepTail = ({
   }
   const borderOffset = isHorizontal ? -(tailHeight / 2 + 0.5) : -3;
   if (isHorizontal) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       Box,
       {
         position: "absolute",
@@ -663,7 +435,7 @@ var StepTail = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     Box,
     {
       position: "absolute",
@@ -680,9 +452,9 @@ var StepTail = ({
 };
 
 // src/hooks/useStepHoverStyles.ts
-var import_react4 = require("react");
+var import_react = require("react");
 var useStepHoverStyles = (variantUI, state, className, theme, isLast, disabled, noClick, palette) => {
-  (0, import_react4.useEffect)(() => {
+  (0, import_react.useEffect)(() => {
     if (!isWeb()) {
       return;
     }
@@ -796,7 +568,7 @@ var useStepHoverStyles = (variantUI, state, className, theme, isLast, disabled,
 };
 
 // src/Step.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var StepState = ({
   state,
   size,
@@ -809,7 +581,7 @@ var StepState = ({
   className
 }) => {
   const paletteColor = getPaletteColor(palette, theme, "active");
-  const iconStyles = (0, import_react5.useMemo)(() => {
+  const iconStyles = (0, import_react2.useMemo)(() => {
     if (variantUI === "simple") {
       switch (state) {
         case "current":
@@ -913,7 +685,7 @@ var StepState = ({
     }
   }, [state, variantUI, theme, paletteColor]);
   const iconSize = 18;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     Box,
     {
       className,
@@ -926,7 +698,7 @@ var StepState = ({
       alignItems: "center",
       justifyContent: "center",
       flexShrink: 0,
-      children: state === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Spinner, { size: size === "sm" ? 16 : 20, color: iconStyles.color }) : state === "complete" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_xui_icons.Check, { size: iconSize, color: iconStyles.color }) : state === "alert" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_xui_icons.X, { size: iconSize, color: iconStyles.color }) : state === "warning" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_xui_icons.AlertCircle, { size: iconSize, color: iconStyles.color }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      children: state === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Spinner, { size: size === "sm" ? 16 : 20, color: iconStyles.color }) : state === "complete" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_xui_icons.Check, { size: iconSize, color: iconStyles.color }) : state === "alert" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_xui_icons.X, { size: iconSize, color: iconStyles.color }) : state === "warning" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_xui_icons.AlertCircle, { size: iconSize, color: iconStyles.color }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         Text,
         {
           color: iconStyles.color,
@@ -957,7 +729,7 @@ var Step = ({
 }) => {
   const { theme, mode } = (0, import_xui_core2.useDesignSystem)();
   const sizeStyles = theme.sizing.stepper(size);
-  const stepClassName = (0, import_react5.useMemo)(
+  const stepClassName = (0, import_react2.useMemo)(
     () => `step-${stepNumber}-${variantUI}-${direction}-${size}-${state}-${palette}`,
     [stepNumber, variantUI, direction, size, state, palette]
   );
@@ -971,7 +743,7 @@ var Step = ({
     noClick,
     palette
   );
-  const stepClick = (0, import_react5.useCallback)(() => {
+  const stepClick = (0, import_react2.useCallback)(() => {
     if (onClick && !disabled && !noClick) {
       onClick({
         number: stepNumber,
@@ -984,7 +756,7 @@ var Step = ({
       });
     }
   }, [onClick, disabled, noClick, stepNumber, title, description, state]);
-  const stepAriaLabel = (0, import_react5.useMemo)(() => {
+  const stepAriaLabel = (0, import_react2.useMemo)(() => {
     const stepNum = stepNumber + 1;
     const titleText = typeof title === "string" ? title : "Step";
     const descriptionText = description && typeof description === "string" ? description : "";
@@ -1006,7 +778,7 @@ var Step = ({
     }
     return label;
   }, [stepNumber, title, description, state, isLast]);
-  const handleKeyDown = (0, import_react5.useCallback)(
+  const handleKeyDown = (0, import_react2.useCallback)(
     (event) => {
       if (event.key === "Enter" && !disabled && !noClick) {
         event.preventDefault();
@@ -1018,7 +790,7 @@ var Step = ({
     },
     [stepClick, disabled, noClick]
   );
-  const handleKeyUp = (0, import_react5.useCallback)(
+  const handleKeyUp = (0, import_react2.useCallback)(
     (event) => {
       if (event.key === " " && !disabled && !noClick) {
         event.preventDefault();
@@ -1029,7 +801,7 @@ var Step = ({
   );
   const isInteractive = !disabled && !noClick && !!onClick;
   const isCurrent = state === "current";
-  const titleStyles = (0, import_react5.useMemo)(() => {
+  const titleStyles = (0, import_react2.useMemo)(() => {
     if (variantUI === "simple") {
       const sizeStylesMap = {
         sm: {
@@ -1087,7 +859,7 @@ var Step = ({
       };
     }
   }, [variantUI, direction, size, state, theme, palette]);
-  const descriptionStyles = (0, import_react5.useMemo)(() => {
+  const descriptionStyles = (0, import_react2.useMemo)(() => {
     const sizeStylesMap = {
       sm: {
         fontSize: 12,
@@ -1110,7 +882,7 @@ var Step = ({
       fontWeight: "400"
     };
   }, [size, variantUI, state, theme]);
-  const contentWrapperStyles = (0, import_react5.useMemo)(() => {
+  const contentWrapperStyles = (0, import_react2.useMemo)(() => {
     if (variantUI === "simple") {
       if (direction === "horizontal") {
         return {
@@ -1138,7 +910,7 @@ var Step = ({
       return baseStyles;
     }
   }, [variantUI, direction, size]);
-  const stepWrapperStyles = (0, import_react5.useMemo)(() => {
+  const stepWrapperStyles = (0, import_react2.useMemo)(() => {
     if (variantUI === "current") {
       if (direction === "horizontal") {
         return {
@@ -1171,7 +943,7 @@ var Step = ({
     }
   }, [variantUI, direction, size, isLast]);
   if (variantUI === "current" && direction === "horizontal") {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       Box,
       {
         role: isWeb() ? "button" : void 0,
@@ -1194,7 +966,7 @@ var Step = ({
           cursor: disabled || noClick ? "default" : "pointer"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             StepTail,
             {
               variantUI,
@@ -1207,7 +979,7 @@ var Step = ({
               palette
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
             Box,
             {
               flexDirection: "column",
@@ -1218,7 +990,7 @@ var Step = ({
               paddingRight: size === "sm" ? 20 : 24,
               width: "100%",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { flexDirection: "column", alignItems: "flex-start", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Box, { flexDirection: "column", alignItems: "flex-start", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   StepState,
                   {
                     state,
@@ -1235,7 +1007,7 @@ var Step = ({
                     isLast
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                   Box,
                   {
                     flexDirection: "column",
@@ -1244,7 +1016,7 @@ var Step = ({
                     gap: 4,
                     width: "100%",
                     children: [
-                      typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                         Text,
                         {
                           className: `step-title-${stepClassName}`,
@@ -1255,7 +1027,7 @@ var Step = ({
                           children: title
                         }
                       ) : title,
-                      description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { width: "100%", alignItems: "flex-start", children: typeof description === "string" || typeof description === "number" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Box, { width: "100%", alignItems: "flex-start", children: typeof description === "string" || typeof description === "number" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                         Text,
                         {
                           className: `step-description-${stepClassName}`,
@@ -1277,7 +1049,7 @@ var Step = ({
     );
   }
   if (variantUI === "simple" && direction === "horizontal") {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       Box,
       {
         role: isWeb() ? "button" : void 0,
@@ -1298,7 +1070,7 @@ var Step = ({
           cursor: disabled || noClick ? "default" : "pointer"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { flexDirection: "column", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Box, { flexDirection: "column", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             StepState,
             {
               state,
@@ -1314,8 +1086,8 @@ var Step = ({
               isLast
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Box, { ...contentWrapperStyles, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Box, { ...contentWrapperStyles, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
               Box,
               {
                 flexDirection: "row",
@@ -1324,7 +1096,7 @@ var Step = ({
                 paddingTop: variantUI === "simple" ? size === "sm" ? 1 : 4 : void 0,
                 paddingBottom: variantUI === "simple" ? size === "sm" ? 1 : 4 : void 0,
                 children: [
-                  typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     Text,
                     {
                       className: `step-title-${stepClassName}`,
@@ -1335,20 +1107,20 @@ var Step = ({
                       children: title
                     }
                   ) : title,
-                  tail && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  tail && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                     Box,
                     {
                       flex: 1,
                       marginLeft: size === "sm" ? 8 : 12,
                       alignItems: "center",
                       justifyContent: "center",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Divider, { color: theme.colors.border.secondary })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Divider, { color: theme.colors.border.secondary })
                     }
                   )
                 ]
               }
             ),
-            description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { children: typeof description === "string" || typeof description === "number" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Box, { children: typeof description === "string" || typeof description === "number" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
               Text,
               {
                 className: `step-description-${stepClassName}`,
@@ -1365,7 +1137,7 @@ var Step = ({
     );
   }
   if (variantUI === "current" && direction === "vertical") {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
       Box,
       {
         role: isWeb() ? "button" : void 0,
@@ -1387,7 +1159,7 @@ var Step = ({
           cursor: disabled || noClick ? "default" : "pointer"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             StepTail,
             {
               variantUI,
@@ -1400,7 +1172,7 @@ var Step = ({
               palette
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
             Box,
             {
               flexDirection: "column",
@@ -1411,7 +1183,7 @@ var Step = ({
               paddingBottom: size === "sm" ? 20 : 24,
               flex: 1,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { flexDirection: "column", alignItems: "flex-start", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Box, { flexDirection: "column", alignItems: "flex-start", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                   StepState,
                   {
                     state,
@@ -1428,7 +1200,7 @@ var Step = ({
                     isLast
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
                   Box,
                   {
                     flexDirection: "column",
@@ -1437,7 +1209,7 @@ var Step = ({
                     gap: 4,
                     width: "100%",
                     children: [
-                      typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                         Text,
                         {
                           className: `step-title-${stepClassName}`,
@@ -1448,7 +1220,7 @@ var Step = ({
                           children: title
                         }
                       ) : title,
-                      description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { children: typeof description === "string" || typeof description === "number" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Box, { children: typeof description === "string" || typeof description === "number" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                         Text,
                         {
                           className: `step-description-${stepClassName}`,
@@ -1469,7 +1241,7 @@ var Step = ({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     Box,
     {
       role: isWeb() ? "button" : void 0,
@@ -1488,8 +1260,8 @@ var Step = ({
       ...stepWrapperStyles,
       ...isWeb() && { cursor: disabled || noClick ? "default" : "pointer" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Box, { flexDirection: "column", alignItems: "center", flexShrink: 0, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Box, { flexDirection: "column", alignItems: "center", flexShrink: 0, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             StepState,
             {
               state,
@@ -1504,7 +1276,7 @@ var Step = ({
               sizeStyles
             }
           ),
-          tail && !isLast && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          tail && !isLast && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             Box,
             {
               width: 1,
@@ -1518,8 +1290,8 @@ var Step = ({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Box, { ...contentWrapperStyles, flex: 1, children: [
-          typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Box, { ...contentWrapperStyles, flex: 1, children: [
+          typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             Text,
             {
               color: titleStyles.color,
@@ -1529,7 +1301,7 @@ var Step = ({
               children: title
             }
           ) : title,
-          description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { marginTop: descriptionStyles.marginTop, children: typeof description === "string" || typeof description === "number" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Box, { marginTop: descriptionStyles.marginTop, children: typeof description === "string" || typeof description === "number" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             Text,
             {
               color: descriptionStyles.color,
@@ -1546,9 +1318,9 @@ var Step = ({
 };
 
 // src/Stepper.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var import_react7 = require("react");
-var Stepper = (0, import_react6.forwardRef)(
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react4 = require("react");
+var Stepper = (0, import_react3.forwardRef)(
   ({
     direction = "horizontal",
     variantUI = "current",
@@ -1569,7 +1341,7 @@ var Stepper = (0, import_react6.forwardRef)(
     const tailOffset = tailSize / 2;
     const defaultAriaLabel = `Stepper with ${steps.length} step${steps.length !== 1 ? "s" : ""}`;
     const stepperAriaLabel = ariaLabel || defaultAriaLabel;
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       Box,
       {
         ref,
@@ -1609,7 +1381,7 @@ var Stepper = (0, import_react6.forwardRef)(
             const isLast = index === steps.length - 1;
             const isFirstColoredTail = index === firstColoredTailIndex;
             const isLastColoredTail = index === lastColoredTailIndex;
-            return /* @__PURE__ */ (0, import_react7.createElement)(
+            return /* @__PURE__ */ (0, import_react4.createElement)(
               Step,
               {
                 size,
@@ -1640,7 +1412,7 @@ var import_xui_icons2 = require("@xsolla/xui-icons");
 
 // src/ProgressStepItem.tsx
 var import_xui_core4 = require("@xsolla/xui-core");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var ProgressStepItem = ({
   state = "default",
   size = "md",
@@ -1662,7 +1434,7 @@ var ProgressStepItem = ({
     backgroundColor = theme.colors.content.tertiary || "rgba(0, 0, 0, 0.6)";
     opacity = isHover ? 0.5 : 0.2;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     Box,
     {
       className,
@@ -1680,7 +1452,7 @@ var ProgressStepItem = ({
 };
 
 // src/ProgressStep.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var ProgressStep = ({
   count,
   activeStep,
@@ -1704,7 +1476,7 @@ var ProgressStep = ({
   const iconSize = size === "md" ? 18 : 14;
   const isFirst = activeStep <= 0;
   const isLast = activeStep >= count - 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     Box,
     {
       className,
@@ -1714,7 +1486,7 @@ var ProgressStep = ({
       gap: 4,
       height: size === "md" ? 24 : 18,
       children: [
-        arrows && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        arrows && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           Box,
           {
             onPress: handlePrev,
@@ -1725,10 +1497,10 @@ var ProgressStep = ({
             borderRadius: 4,
             opacity: isFirst ? 0.2 : 1,
             cursor: isFirst ? "default" : "pointer",
-            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_xui_icons2.ArrowLeft, { size: iconSize, color: theme.colors.content.primary })
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_xui_icons2.ArrowLeft, { size: iconSize, color: theme.colors.content.primary })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Box, { flexDirection: "row", alignItems: "center", gap: 4, children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           ProgressStepItem,
           {
             size,
@@ -1737,7 +1509,7 @@ var ProgressStep = ({
           },
           i
         )) }),
-        arrows && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        arrows && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           Box,
           {
             onPress: handleNext,
@@ -1748,7 +1520,7 @@ var ProgressStep = ({
             borderRadius: 4,
             opacity: isLast ? 0.2 : 1,
             cursor: isLast ? "default" : "pointer",
-            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_xui_icons2.ArrowRight, { size: iconSize, color: theme.colors.content.primary })
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_xui_icons2.ArrowRight, { size: iconSize, color: theme.colors.content.primary })
           }
         )
       ]