@xsolla/xui-stepper 0.69.0 → 0.71.0

package/native/index.mjs

@@ -549,8 +549,8 @@ var StepTail = ({
   if (variantUI !== "current" || isLast) {
     return null;
   }
-  const tailSize = size === "s" ? 3 : 5;
-  const verticalTailWidth = size === "s" ? 2 : 4;
+  const tailSize = size === "sm" ? 3 : 5;
+  const verticalTailWidth = size === "sm" ? 2 : 4;
   const isHorizontal = direction === "horizontal";
   let tailBgColor = "transparent";
   let tailHeight = tailSize;
@@ -954,7 +954,7 @@ var StepState = ({
       }
     }
   }, [state, variantUI, disabled, noClick, theme, paletteColor]);
-  const iconSize = size === "s" ? 18 : 18;
+  const iconSize = 18;
   return /* @__PURE__ */ jsx9(
     Box,
     {
@@ -968,11 +968,11 @@ var StepState = ({
       alignItems: "center",
       justifyContent: "center",
       flexShrink: 0,
-      children: state === "loading" ? /* @__PURE__ */ jsx9(Spinner, { size: size === "s" ? 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(
+      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 === "s" ? 12 : 14,
+          fontSize: size === "sm" ? 12 : 14,
           fontWeight: "600",
           children: step
         }
@@ -1074,13 +1074,13 @@ var Step = ({
   const titleStyles = useMemo(() => {
     if (variantUI === "simple") {
       const sizeStylesMap = {
-        s: {
+        sm: {
           fontSize: 14,
           lineHeight: 22,
           paddingTop: 1,
           paddingBottom: 1
         },
-        m: {
+        md: {
           fontSize: 16,
           lineHeight: 24,
           paddingTop: 4,
@@ -1131,12 +1131,12 @@ var Step = ({
   }, [variantUI, direction, size, state, theme, palette]);
   const descriptionStyles = useMemo(() => {
     const sizeStylesMap = {
-      s: {
+      sm: {
         fontSize: 12,
         lineHeight: variantUI === "simple" ? 20 : 18,
         marginTop: variantUI === "simple" ? 0 : 2
       },
-      m: {
+      md: {
         fontSize: 14,
         lineHeight: variantUI === "simple" ? 22 : 20,
         marginTop: variantUI === "simple" ? 0 : 4
@@ -1156,22 +1156,22 @@ var Step = ({
     if (variantUI === "simple") {
       if (direction === "horizontal") {
         return {
-          marginLeft: size === "s" ? 8 : 12,
+          marginLeft: size === "sm" ? 8 : 12,
           flex: 1
         };
       }
       return {
-        marginLeft: size === "s" ? 8 : 12
+        marginLeft: size === "sm" ? 8 : 12
       };
     } else {
       const baseStyles = {
-        marginTop: size === "s" ? 10 : 12
+        marginTop: size === "sm" ? 10 : 12
       };
       if (direction === "horizontal") {
         return {
           ...baseStyles,
-          paddingLeft: size === "s" ? 20 : 24,
-          paddingRight: size === "s" ? 20 : 24,
+          paddingLeft: size === "sm" ? 20 : 24,
+          paddingRight: size === "sm" ? 20 : 24,
           gap: 12
         };
       } else {
@@ -1187,14 +1187,14 @@ var Step = ({
           flex: 1,
           minWidth: 0,
           flexShrink: 0,
-          paddingBottom: size === "s" ? 27 : 37
+          paddingBottom: size === "sm" ? 27 : 37
         };
       } else {
         return {
-          paddingTop: size === "s" ? 20 : 24,
-          paddingBottom: size === "s" ? 20 : 24,
-          paddingLeft: size === "s" ? 24 : 32,
-          paddingRight: size === "s" ? 10 : 10,
+          paddingTop: size === "sm" ? 20 : 24,
+          paddingBottom: size === "sm" ? 20 : 24,
+          paddingLeft: size === "sm" ? 24 : 32,
+          paddingRight: size === "sm" ? 10 : 10,
           minWidth: 184
         };
       }
@@ -1202,7 +1202,7 @@ var Step = ({
       if (direction === "horizontal") {
         return {
           flexShrink: 0,
-          marginRight: isLast ? 0 : size === "s" ? 8 : 12
+          marginRight: isLast ? 0 : size === "sm" ? 8 : 12
         };
       } else {
         return {
@@ -1256,8 +1256,8 @@ var Step = ({
               alignItems: "flex-start",
               justifyContent: "flex-start",
               gap: 12,
-              paddingLeft: size === "s" ? 20 : 24,
-              paddingRight: size === "s" ? 20 : 24,
+              paddingLeft: size === "sm" ? 20 : 24,
+              paddingRight: size === "sm" ? 20 : 24,
               width: "100%",
               children: [
                 /* @__PURE__ */ jsx9(Box, { flexDirection: "column", alignItems: "flex-start", children: /* @__PURE__ */ jsx9(
@@ -1363,8 +1363,8 @@ var Step = ({
                 flexDirection: "row",
                 alignItems: "center",
                 width: "100%",
-                paddingTop: variantUI === "simple" ? size === "s" ? 1 : 4 : void 0,
-                paddingBottom: variantUI === "simple" ? size === "s" ? 1 : 4 : void 0,
+                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,
@@ -1381,7 +1381,7 @@ var Step = ({
                     Box,
                     {
                       flex: 1,
-                      marginLeft: size === "s" ? 8 : 12,
+                      marginLeft: size === "sm" ? 8 : 12,
                       alignItems: "center",
                       justifyContent: "center",
                       children: /* @__PURE__ */ jsx9(Divider, { color: theme.colors.border.secondary })
@@ -1449,8 +1449,8 @@ var Step = ({
               alignItems: "flex-start",
               justifyContent: "flex-start",
               gap: 12,
-              paddingTop: size === "s" ? 20 : 24,
-              paddingBottom: size === "s" ? 20 : 24,
+              paddingTop: size === "sm" ? 20 : 24,
+              paddingBottom: size === "sm" ? 20 : 24,
               flex: 1,
               children: [
                 /* @__PURE__ */ jsx9(Box, { flexDirection: "column", alignItems: "flex-start", children: /* @__PURE__ */ jsx9(
@@ -1594,7 +1594,7 @@ var Stepper = forwardRef3(
   ({
     direction = "horizontal",
     variantUI = "current",
-    size = "m",
+    size = "md",
     steps,
     tail = false,
     onClick,
@@ -1607,7 +1607,7 @@ var Stepper = forwardRef3(
     const { theme } = useDesignSystem3();
     const isHorizontal = direction === "horizontal";
     const isCurrentVariant = variantUI === "current";
-    const tailSize = size === "s" ? 3 : 5;
+    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;
@@ -1685,7 +1685,7 @@ import { useDesignSystem as useDesignSystem4 } from "@xsolla/xui-core";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var ProgressStepItem = ({
   state = "default",
-  size = "m",
+  size = "md",
   className,
   onPress,
   onMouseEnter,
@@ -1694,7 +1694,7 @@ var ProgressStepItem = ({
   const { theme } = useDesignSystem4();
   const isActive = state === "active";
   const isHover = state === "hover";
-  const isMD = size === "m";
+  const isMD = size === "md";
   const width = isActive ? isMD ? 24 : 18 : isMD ? 8 : 6;
   const height = isMD ? 8 : 6;
   const borderRadius = isMD ? 2 : 1;
@@ -1726,7 +1726,7 @@ import { jsx as jsx12, jsxs as jsxs2 } from "react/jsx-runtime";
 var ProgressStep = ({
   count,
   activeStep,
-  size = "m",
+  size = "md",
   arrows = true,
   onStepPress,
   className
@@ -1742,8 +1742,8 @@ var ProgressStep = ({
       onStepPress(activeStep + 1);
     }
   };
-  const arrowSize = size === "m" ? 24 : 18;
-  const iconSize = size === "m" ? 18 : 14;
+  const arrowSize = size === "md" ? 24 : 18;
+  const iconSize = size === "md" ? 18 : 14;
   const isFirst = activeStep <= 0;
   const isLast = activeStep >= count - 1;
   return /* @__PURE__ */ jsxs2(
@@ -1754,7 +1754,7 @@ var ProgressStep = ({
       alignItems: "center",
       justifyContent: "center",
       gap: 4,
-      height: size === "m" ? 24 : 18,
+      height: size === "md" ? 24 : 18,
       children: [
         arrows && /* @__PURE__ */ jsx12(
           Box,