@xsolla/xui-core 0.69.0 → 0.70.0

package/index.js

@@ -622,7 +622,7 @@ var themeConfig = (mode = "dark") => ({
           iconPadding: 16,
           loadingPadding: 40
         },
-        l: {
+        lg: {
           height: 56,
           padding: 20,
           fontSize: 18,
@@ -632,7 +632,7 @@ var themeConfig = (mode = "dark") => ({
           iconPadding: 14,
           loadingPadding: 36
         },
-        m: {
+        md: {
           height: 48,
           padding: 20,
           fontSize: 16,
@@ -642,7 +642,7 @@ var themeConfig = (mode = "dark") => ({
           iconPadding: 12,
           loadingPadding: 32
         },
-        s: {
+        sm: {
           height: 40,
           padding: 20,
           fontSize: 14,
@@ -675,7 +675,7 @@ var themeConfig = (mode = "dark") => ({
           iconSize: 20,
           borderRadius: 4
         },
-        l: {
+        lg: {
           height: 32,
           padding: 4,
           fontSize: 14,
@@ -683,7 +683,7 @@ var themeConfig = (mode = "dark") => ({
           iconSize: 18,
           borderRadius: 4
         },
-        m: {
+        md: {
           height: 28,
           padding: 2,
           fontSize: 14,
@@ -691,7 +691,7 @@ var themeConfig = (mode = "dark") => ({
           iconSize: 16,
           borderRadius: 2
         },
-        s: {
+        sm: {
           height: 22,
           padding: 2,
           fontSize: 12,
@@ -720,7 +720,7 @@ var themeConfig = (mode = "dark") => ({
           textGap: 4,
           borderRadius: 2
         },
-        l: {
+        lg: {
           size: 20,
           fontSize: 16,
           descriptionFontSize: 14,
@@ -728,7 +728,7 @@ var themeConfig = (mode = "dark") => ({
           textGap: 2,
           borderRadius: 2
         },
-        m: {
+        md: {
           size: 18,
           fontSize: 16,
           descriptionFontSize: 14,
@@ -736,7 +736,7 @@ var themeConfig = (mode = "dark") => ({
           textGap: 2,
           borderRadius: 2
         },
-        s: {
+        sm: {
           size: 16,
           fontSize: 14,
           descriptionFontSize: 12,
@@ -759,7 +759,7 @@ var themeConfig = (mode = "dark") => ({
           textGap: 4,
           borderWidth: 2
         },
-        l: {
+        lg: {
           size: 20,
           fontSize: 18,
           lineHeight: 20,
@@ -769,7 +769,7 @@ var themeConfig = (mode = "dark") => ({
           textGap: 2,
           borderWidth: 2
         },
-        m: {
+        md: {
           size: 18,
           fontSize: 16,
           lineHeight: 18,
@@ -779,7 +779,7 @@ var themeConfig = (mode = "dark") => ({
           textGap: 2,
           borderWidth: 1
         },
-        s: {
+        sm: {
           size: 16,
           fontSize: 14,
           lineHeight: 16,
@@ -803,7 +803,7 @@ var themeConfig = (mode = "dark") => ({
           radius: 4,
           borderWidth: 2
         },
-        l: {
+        lg: {
           height: 56,
           paddingVertical: 14,
           paddingHorizontal: 12,
@@ -812,7 +812,7 @@ var themeConfig = (mode = "dark") => ({
           radius: 4,
           borderWidth: 2
         },
-        m: {
+        md: {
           height: 48,
           paddingVertical: 11,
           paddingHorizontal: 12,
@@ -821,7 +821,7 @@ var themeConfig = (mode = "dark") => ({
           radius: 2,
           borderWidth: 1
         },
-        s: {
+        sm: {
           height: 40,
           paddingVertical: 7,
           paddingHorizontal: 10,
@@ -845,9 +845,9 @@ var themeConfig = (mode = "dark") => ({
     inputPin: (size) => {
       const configs = {
         xl: { size: 64, gap: 10, fontSize: 20, radius: 4, borderWidth: 2 },
-        l: { size: 56, gap: 8, fontSize: 18, radius: 4, borderWidth: 2 },
-        m: { size: 48, gap: 6, fontSize: 16, radius: 2, borderWidth: 1 },
-        s: { size: 40, gap: 4, fontSize: 14, radius: 2, borderWidth: 1 },
+        lg: { size: 56, gap: 8, fontSize: 18, radius: 4, borderWidth: 2 },
+        md: { size: 48, gap: 6, fontSize: 16, radius: 2, borderWidth: 1 },
+        sm: { size: 40, gap: 4, fontSize: 14, radius: 2, borderWidth: 1 },
         xs: { size: 32, gap: 4, fontSize: 12, radius: 2, borderWidth: 1 }
       };
       return configs[size];
@@ -855,9 +855,9 @@ var themeConfig = (mode = "dark") => ({
     textarea: (size) => {
       const configs = {
         xl: { height: 144, padding: spacing.xl, fontSize: 20, iconSize: 32 },
-        l: { height: 128, padding: spacing.l, fontSize: 18, iconSize: 28 },
-        m: { height: 112, padding: spacing.m, fontSize: 16, iconSize: 24 },
-        s: { height: 96, padding: spacing.s, fontSize: 14, iconSize: 20 },
+        lg: { height: 128, padding: spacing.l, fontSize: 18, iconSize: 28 },
+        md: { height: 112, padding: spacing.m, fontSize: 16, iconSize: 24 },
+        sm: { height: 96, padding: spacing.s, fontSize: 14, iconSize: 20 },
         xs: { height: 80, padding: spacing.xs, fontSize: 12, iconSize: 16 }
       };
       return configs[size];
@@ -877,7 +877,7 @@ var themeConfig = (mode = "dark") => ({
           frameBorderRadius: 4,
           knobBorderRadius: 2
         },
-        l: {
+        lg: {
           width: 36,
           height: 20,
           knobSize: 16,
@@ -890,7 +890,7 @@ var themeConfig = (mode = "dark") => ({
           frameBorderRadius: 4,
           knobBorderRadius: 2
         },
-        m: {
+        md: {
           width: 32,
           height: 18,
           knobSize: 14,
@@ -903,7 +903,7 @@ var themeConfig = (mode = "dark") => ({
           frameBorderRadius: 2,
           knobBorderRadius: 2
         },
-        s: {
+        sm: {
           width: 28,
           height: 16,
           knobSize: 12,
@@ -931,7 +931,7 @@ var themeConfig = (mode = "dark") => ({
           borderRadiusSquare: radius.avatarLarge,
           borderRadiusCircle: radius.avatarCircle
         },
-        l: {
+        lg: {
           size: 56,
           fontSize: 20,
           iconSize: 28,
@@ -941,7 +941,7 @@ var themeConfig = (mode = "dark") => ({
           borderRadiusSquare: radius.avatarLarge,
           borderRadiusCircle: radius.avatarCircle
         },
-        m: {
+        md: {
           size: 48,
           fontSize: 18,
           iconSize: 24,
@@ -951,7 +951,7 @@ var themeConfig = (mode = "dark") => ({
           borderRadiusSquare: radius.avatarLarge,
           borderRadiusCircle: radius.avatarCircle
         },
-        s: {
+        sm: {
           size: 40,
           fontSize: 16,
           iconSize: 20,
@@ -984,7 +984,7 @@ var themeConfig = (mode = "dark") => ({
           iconSize: 24,
           radius: radius.tagLarge
         },
-        l: {
+        lg: {
           height: 40,
           padding: 16,
           fontSize: 18,
@@ -992,7 +992,7 @@ var themeConfig = (mode = "dark") => ({
           iconSize: 24,
           radius: radius.tagLarge
         },
-        m: {
+        md: {
           height: 32,
           padding: 12,
           fontSize: 16,
@@ -1000,7 +1000,7 @@ var themeConfig = (mode = "dark") => ({
           iconSize: 16,
           radius: radius.tagSmall
         },
-        s: {
+        sm: {
           height: 24,
           padding: 8,
           fontSize: 14,
@@ -1021,18 +1021,18 @@ var themeConfig = (mode = "dark") => ({
     },
     divider: (size) => {
       const configs = {
-        l: { height: 18, fontSize: 16, lineWeight: 1 },
-        m: { height: 16, fontSize: 14, lineWeight: 1 },
-        s: { height: 14, fontSize: 12, lineWeight: 1 }
+        lg: { height: 18, fontSize: 16, lineWeight: 1 },
+        md: { height: 16, fontSize: 14, lineWeight: 1 },
+        sm: { height: 14, fontSize: 12, lineWeight: 1 }
       };
       return configs[size];
     },
     spinner: (size) => {
       const configs = {
         xl: { size: 96, strokeWidth: 10 },
-        l: { size: 48, strokeWidth: 5 },
-        m: { size: 24, strokeWidth: 2 },
-        s: { size: 16, strokeWidth: 2 },
+        lg: { size: 48, strokeWidth: 5 },
+        md: { size: 24, strokeWidth: 2 },
+        sm: { size: 16, strokeWidth: 2 },
         xs: { size: 8, strokeWidth: 1 }
       };
       return configs[size];
@@ -1046,21 +1046,21 @@ var themeConfig = (mode = "dark") => ({
           gap: 6,
           paddingHorizontal: 20
         },
-        l: {
+        lg: {
           height: 56,
           fontSize: 18,
           iconSize: 18,
           gap: 6,
           paddingHorizontal: 20
         },
-        m: {
+        md: {
           height: 48,
           fontSize: 16,
           iconSize: 18,
           gap: 6,
           paddingHorizontal: 20
         },
-        s: {
+        sm: {
           height: 40,
           fontSize: 14,
           iconSize: 18,
@@ -1079,21 +1079,21 @@ var themeConfig = (mode = "dark") => ({
           gap: 8,
           padding: 20
         },
-        l: {
+        lg: {
           height: 56,
           fontSize: 18,
           iconSize: 24,
           gap: 8,
           padding: 16
         },
-        m: {
+        md: {
           height: 48,
           fontSize: 16,
           iconSize: 24,
           gap: 8,
           padding: 12
         },
-        s: {
+        sm: {
           height: 40,
           fontSize: 14,
           iconSize: 20,
@@ -1112,9 +1112,15 @@ var themeConfig = (mode = "dark") => ({
           iconSize: 12,
           padding: 4
         },
-        l: { size: 16, fontSize: 10, lineHeight: 10, iconSize: 10, padding: 4 },
-        m: { size: 12, fontSize: 10, lineHeight: 10, iconSize: 8, padding: 4 },
-        s: { size: 8, fontSize: 8, lineHeight: 8, iconSize: 6, padding: 0 },
+        lg: {
+          size: 16,
+          fontSize: 10,
+          lineHeight: 10,
+          iconSize: 10,
+          padding: 4
+        },
+        md: { size: 12, fontSize: 10, lineHeight: 10, iconSize: 8, padding: 4 },
+        sm: { size: 8, fontSize: 8, lineHeight: 8, iconSize: 6, padding: 0 },
         xs: { size: 6, fontSize: 6, lineHeight: 6, iconSize: 4, padding: 0 }
       };
       return configs[size];
@@ -1149,9 +1155,9 @@ var themeConfig = (mode = "dark") => ({
     progress: (size) => {
       const configs = {
         xl: { height: 10, labelSize: 16, helperSize: 14, gap: 10 },
-        l: { height: 8, labelSize: 14, helperSize: 12, gap: 8 },
-        m: { height: 6, labelSize: 12, helperSize: 12, gap: 6 },
-        s: { height: 4, labelSize: 12, helperSize: 12, gap: 4 },
+        lg: { height: 8, labelSize: 14, helperSize: 12, gap: 8 },
+        md: { height: 6, labelSize: 12, helperSize: 12, gap: 6 },
+        sm: { height: 4, labelSize: 12, helperSize: 12, gap: 4 },
         xs: { height: 2, labelSize: 10, helperSize: 10, gap: 2 },
         xxs: { height: 2, labelSize: 10, helperSize: 10, gap: 2 }
       };
@@ -1160,9 +1166,9 @@ var themeConfig = (mode = "dark") => ({
     supportingText: (size) => {
       const configs = {
         xl: { fontSize: 18, lineHeight: "20px", gap: 6, iconSize: 18 },
-        l: { fontSize: 16, lineHeight: "18px", gap: 6, iconSize: 18 },
-        m: { fontSize: 14, lineHeight: "16px", gap: 6, iconSize: 18 },
-        s: { fontSize: 12, lineHeight: "14px", gap: 4, iconSize: 16 },
+        lg: { fontSize: 16, lineHeight: "18px", gap: 6, iconSize: 18 },
+        md: { fontSize: 14, lineHeight: "16px", gap: 6, iconSize: 18 },
+        sm: { fontSize: 12, lineHeight: "14px", gap: 4, iconSize: 16 },
         xs: { fontSize: 10, lineHeight: "10px", gap: 4, iconSize: 16 }
       };
       return configs[size];
@@ -1170,9 +1176,9 @@ var themeConfig = (mode = "dark") => ({
     iconWrapper: (size) => {
       const configs = {
         xl: { size: 56, iconSize: 32, fontSize: 24 },
-        l: { size: 48, iconSize: 28, fontSize: 20 },
-        m: { size: 40, iconSize: 24, fontSize: 18 },
-        s: { size: 32, iconSize: 20, fontSize: 16 },
+        lg: { size: 48, iconSize: 28, fontSize: 20 },
+        md: { size: 40, iconSize: 24, fontSize: 18 },
+        sm: { size: 32, iconSize: 20, fontSize: 16 },
         xs: { size: 24, iconSize: 16, fontSize: 14 },
         xxs: { size: 18, iconSize: 12, fontSize: 12 }
       };
@@ -1180,7 +1186,7 @@ var themeConfig = (mode = "dark") => ({
     },
     stepper: (size) => {
       const configs = {
-        m: {
+        md: {
           iconSize: 32,
           titleSize: 16,
           descSize: 14,
@@ -1190,7 +1196,7 @@ var themeConfig = (mode = "dark") => ({
           currentPadding: 24,
           tailSize: 5
         },
-        s: {
+        sm: {
           iconSize: 24,
           titleSize: 14,
           descSize: 12,
@@ -1223,7 +1229,7 @@ var themeConfig = (mode = "dark") => ({
           searchLineHeight: 22,
           searchIconSize: 18
         },
-        l: {
+        lg: {
           paddingVertical: 8,
           itemPaddingHorizontal: 14,
           itemPaddingVertical: 14,
@@ -1241,7 +1247,7 @@ var themeConfig = (mode = "dark") => ({
           searchLineHeight: 20,
           searchIconSize: 18
         },
-        m: {
+        md: {
           paddingVertical: 8,
           itemPaddingHorizontal: 12,
           itemPaddingVertical: 11,
@@ -1259,7 +1265,7 @@ var themeConfig = (mode = "dark") => ({
           searchLineHeight: 18,
           searchIconSize: 18
         },
-        s: {
+        sm: {
           paddingVertical: 8,
           itemPaddingHorizontal: 10,
           itemPaddingVertical: 8,