@xsolla/xui-stepper 0.69.0 → 0.71.0

package/web/index.mjs

@@ -516,8 +516,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;
@@ -921,7 +921,7 @@ var StepState = ({
       }
     }
   }, [state, variantUI, disabled, noClick, theme, paletteColor]);
-  const iconSize = size === "s" ? 18 : 18;
+  const iconSize = 18;
   return /* @__PURE__ */ jsx9(
     Box,
     {
@@ -935,11 +935,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
         }
@@ -1041,13 +1041,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,
@@ -1098,12 +1098,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
@@ -1123,22 +1123,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 {
@@ -1154,14 +1154,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
         };
       }
@@ -1169,7 +1169,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 {
@@ -1223,8 +1223,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(
@@ -1330,8 +1330,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,
@@ -1348,7 +1348,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 })
@@ -1416,8 +1416,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(
@@ -1561,7 +1561,7 @@ var Stepper = forwardRef3(
   ({
     direction = "horizontal",
     variantUI = "current",
-    size = "m",
+    size = "md",
     steps,
     tail = false,
     onClick,
@@ -1574,7 +1574,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;
@@ -1652,7 +1652,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,
@@ -1661,7 +1661,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;
@@ -1693,7 +1693,7 @@ import { jsx as jsx12, jsxs as jsxs2 } from "react/jsx-runtime";
 var ProgressStep = ({
   count,
   activeStep,
-  size = "m",
+  size = "md",
   arrows = true,
   onStepPress,
   className
@@ -1709,8 +1709,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(
@@ -1721,7 +1721,7 @@ var ProgressStep = ({
       alignItems: "center",
       justifyContent: "center",
       gap: 4,
-      height: size === "m" ? 24 : 18,
+      height: size === "md" ? 24 : 18,
       children: [
         arrows && /* @__PURE__ */ jsx12(
           Box,