@xsolla/xui-core 0.69.0 → 0.70.0

package/index.mjs

@@ -575,7 +575,7 @@ var themeConfig = (mode = "dark") => ({
           iconPadding: 16,
           loadingPadding: 40
         },
-        l: {
+        lg: {
           height: 56,
           padding: 20,
           fontSize: 18,
@@ -585,7 +585,7 @@ var themeConfig = (mode = "dark") => ({
           iconPadding: 14,
           loadingPadding: 36
         },
-        m: {
+        md: {
           height: 48,
           padding: 20,
           fontSize: 16,
@@ -595,7 +595,7 @@ var themeConfig = (mode = "dark") => ({
           iconPadding: 12,
           loadingPadding: 32
         },
-        s: {
+        sm: {
           height: 40,
           padding: 20,
           fontSize: 14,
@@ -628,7 +628,7 @@ var themeConfig = (mode = "dark") => ({
           iconSize: 20,
           borderRadius: 4
         },
-        l: {
+        lg: {
           height: 32,
           padding: 4,
           fontSize: 14,
@@ -636,7 +636,7 @@ var themeConfig = (mode = "dark") => ({
           iconSize: 18,
           borderRadius: 4
         },
-        m: {
+        md: {
           height: 28,
           padding: 2,
           fontSize: 14,
@@ -644,7 +644,7 @@ var themeConfig = (mode = "dark") => ({
           iconSize: 16,
           borderRadius: 2
         },
-        s: {
+        sm: {
           height: 22,
           padding: 2,
           fontSize: 12,
@@ -673,7 +673,7 @@ var themeConfig = (mode = "dark") => ({
           textGap: 4,
           borderRadius: 2
         },
-        l: {
+        lg: {
           size: 20,
           fontSize: 16,
           descriptionFontSize: 14,
@@ -681,7 +681,7 @@ var themeConfig = (mode = "dark") => ({
           textGap: 2,
           borderRadius: 2
         },
-        m: {
+        md: {
           size: 18,
           fontSize: 16,
           descriptionFontSize: 14,
@@ -689,7 +689,7 @@ var themeConfig = (mode = "dark") => ({
           textGap: 2,
           borderRadius: 2
         },
-        s: {
+        sm: {
           size: 16,
           fontSize: 14,
           descriptionFontSize: 12,
@@ -712,7 +712,7 @@ var themeConfig = (mode = "dark") => ({
           textGap: 4,
           borderWidth: 2
         },
-        l: {
+        lg: {
           size: 20,
           fontSize: 18,
           lineHeight: 20,
@@ -722,7 +722,7 @@ var themeConfig = (mode = "dark") => ({
           textGap: 2,
           borderWidth: 2
         },
-        m: {
+        md: {
           size: 18,
           fontSize: 16,
           lineHeight: 18,
@@ -732,7 +732,7 @@ var themeConfig = (mode = "dark") => ({
           textGap: 2,
           borderWidth: 1
         },
-        s: {
+        sm: {
           size: 16,
           fontSize: 14,
           lineHeight: 16,
@@ -756,7 +756,7 @@ var themeConfig = (mode = "dark") => ({
           radius: 4,
           borderWidth: 2
         },
-        l: {
+        lg: {
           height: 56,
           paddingVertical: 14,
           paddingHorizontal: 12,
@@ -765,7 +765,7 @@ var themeConfig = (mode = "dark") => ({
           radius: 4,
           borderWidth: 2
         },
-        m: {
+        md: {
           height: 48,
           paddingVertical: 11,
           paddingHorizontal: 12,
@@ -774,7 +774,7 @@ var themeConfig = (mode = "dark") => ({
           radius: 2,
           borderWidth: 1
         },
-        s: {
+        sm: {
           height: 40,
           paddingVertical: 7,
           paddingHorizontal: 10,
@@ -798,9 +798,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];
@@ -808,9 +808,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];
@@ -830,7 +830,7 @@ var themeConfig = (mode = "dark") => ({
           frameBorderRadius: 4,
           knobBorderRadius: 2
         },
-        l: {
+        lg: {
           width: 36,
           height: 20,
           knobSize: 16,
@@ -843,7 +843,7 @@ var themeConfig = (mode = "dark") => ({
           frameBorderRadius: 4,
           knobBorderRadius: 2
         },
-        m: {
+        md: {
           width: 32,
           height: 18,
           knobSize: 14,
@@ -856,7 +856,7 @@ var themeConfig = (mode = "dark") => ({
           frameBorderRadius: 2,
           knobBorderRadius: 2
         },
-        s: {
+        sm: {
           width: 28,
           height: 16,
           knobSize: 12,
@@ -884,7 +884,7 @@ var themeConfig = (mode = "dark") => ({
           borderRadiusSquare: radius.avatarLarge,
           borderRadiusCircle: radius.avatarCircle
         },
-        l: {
+        lg: {
           size: 56,
           fontSize: 20,
           iconSize: 28,
@@ -894,7 +894,7 @@ var themeConfig = (mode = "dark") => ({
           borderRadiusSquare: radius.avatarLarge,
           borderRadiusCircle: radius.avatarCircle
         },
-        m: {
+        md: {
           size: 48,
           fontSize: 18,
           iconSize: 24,
@@ -904,7 +904,7 @@ var themeConfig = (mode = "dark") => ({
           borderRadiusSquare: radius.avatarLarge,
           borderRadiusCircle: radius.avatarCircle
         },
-        s: {
+        sm: {
           size: 40,
           fontSize: 16,
           iconSize: 20,
@@ -937,7 +937,7 @@ var themeConfig = (mode = "dark") => ({
           iconSize: 24,
           radius: radius.tagLarge
         },
-        l: {
+        lg: {
           height: 40,
           padding: 16,
           fontSize: 18,
@@ -945,7 +945,7 @@ var themeConfig = (mode = "dark") => ({
           iconSize: 24,
           radius: radius.tagLarge
         },
-        m: {
+        md: {
           height: 32,
           padding: 12,
           fontSize: 16,
@@ -953,7 +953,7 @@ var themeConfig = (mode = "dark") => ({
           iconSize: 16,
           radius: radius.tagSmall
         },
-        s: {
+        sm: {
           height: 24,
           padding: 8,
           fontSize: 14,
@@ -974,18 +974,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];
@@ -999,21 +999,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,
@@ -1032,21 +1032,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,
@@ -1065,9 +1065,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];
@@ -1102,9 +1108,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 }
       };
@@ -1113,9 +1119,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];
@@ -1123,9 +1129,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 }
       };
@@ -1133,7 +1139,7 @@ var themeConfig = (mode = "dark") => ({
     },
     stepper: (size) => {
       const configs = {
-        m: {
+        md: {
           iconSize: 32,
           titleSize: 16,
           descSize: 14,
@@ -1143,7 +1149,7 @@ var themeConfig = (mode = "dark") => ({
           currentPadding: 24,
           tailSize: 5
         },
-        s: {
+        sm: {
           iconSize: 24,
           titleSize: 14,
           descSize: 12,
@@ -1176,7 +1182,7 @@ var themeConfig = (mode = "dark") => ({
           searchLineHeight: 22,
           searchIconSize: 18
         },
-        l: {
+        lg: {
           paddingVertical: 8,
           itemPaddingHorizontal: 14,
           itemPaddingVertical: 14,
@@ -1194,7 +1200,7 @@ var themeConfig = (mode = "dark") => ({
           searchLineHeight: 20,
           searchIconSize: 18
         },
-        m: {
+        md: {
           paddingVertical: 8,
           itemPaddingHorizontal: 12,
           itemPaddingVertical: 11,
@@ -1212,7 +1218,7 @@ var themeConfig = (mode = "dark") => ({
           searchLineHeight: 18,
           searchIconSize: 18
         },
-        s: {
+        sm: {
           paddingVertical: 8,
           itemPaddingHorizontal: 10,
           itemPaddingVertical: 8,