@xsolla/xui-core 0.160.2 → 0.161.0

package/index.mjs

@@ -1245,6 +1245,129 @@ var radius = {
   avatarLarge: 8,
   avatarCircle: 999
 };
+var radiusScale = {
+  "25": 2,
+  "50": 4,
+  "75": 6,
+  "100": 8,
+  "150": 12,
+  "200": 16,
+  "250": 20,
+  "300": 24,
+  "350": 28,
+  "400": 32,
+  "999": 999
+};
+var stroke = {
+  "1": 1,
+  "2": 2,
+  "3": 3
+};
+
+// src/tokens/shape.ts
+var shape = {
+  button: {
+    xl: { borderRadius: radiusScale["100"], borderWidth: stroke["1"] },
+    lg: { borderRadius: radiusScale["100"], borderWidth: stroke["1"] },
+    md: { borderRadius: radiusScale["75"], borderWidth: stroke["1"] },
+    sm: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
+    xs: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] }
+  },
+  checkbox: {
+    xl: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
+    lg: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
+    md: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
+    sm: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] }
+  },
+  input: {
+    xl: { borderRadius: radiusScale["100"], borderWidth: stroke["1"] },
+    lg: { borderRadius: radiusScale["100"], borderWidth: stroke["1"] },
+    md: { borderRadius: radiusScale["100"], borderWidth: stroke["1"] },
+    sm: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
+    xs: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] }
+  },
+  segmented: {
+    xl: { borderRadius: radiusScale["100"], borderWidth: stroke["1"] },
+    lg: { borderRadius: radiusScale["100"], borderWidth: stroke["1"] },
+    md: { borderRadius: radiusScale["100"], borderWidth: stroke["1"] },
+    sm: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] }
+  },
+  segmentedItem: {
+    xl: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
+    lg: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
+    md: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
+    sm: { borderRadius: radiusScale["25"], borderWidth: stroke["1"] }
+  },
+  switch: {
+    xl: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
+    lg: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
+    md: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
+    sm: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] }
+  },
+  knob: {
+    xl: { borderRadius: radiusScale["25"] },
+    lg: { borderRadius: radiusScale["25"] },
+    md: { borderRadius: radiusScale["25"] },
+    sm: { borderRadius: radiusScale["25"] }
+  },
+  tabItem: {
+    xl: { borderRadius: radiusScale["100"] },
+    lg: { borderRadius: radiusScale["100"] },
+    md: { borderRadius: radiusScale["50"] },
+    sm: { borderRadius: radiusScale["50"] }
+  },
+  tag: {
+    xl: { borderRadius: radiusScale["100"], borderWidth: stroke["1"] },
+    lg: { borderRadius: radiusScale["100"], borderWidth: stroke["1"] },
+    md: { borderRadius: radiusScale["75"], borderWidth: stroke["1"] },
+    sm: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
+    xs: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
+    label: { borderRadius: 0 }
+  },
+  tooltip: {
+    xl: { borderRadius: radiusScale["100"] },
+    lg: { borderRadius: radiusScale["100"] },
+    md: { borderRadius: radiusScale["100"] },
+    sm: { borderRadius: radiusScale["50"] }
+  },
+  radio: {
+    xl: { borderRadius: radiusScale["999"], borderWidth: stroke["1"] },
+    lg: { borderRadius: radiusScale["999"], borderWidth: stroke["1"] },
+    md: { borderRadius: radiusScale["999"], borderWidth: stroke["1"] },
+    sm: { borderRadius: radiusScale["999"], borderWidth: stroke["1"] }
+  },
+  contextMenu: {
+    xl: { borderRadius: radiusScale["100"] },
+    lg: { borderRadius: radiusScale["100"] },
+    md: { borderRadius: radiusScale["100"] },
+    sm: { borderRadius: radiusScale["50"] },
+    xs: { borderRadius: radiusScale["50"] }
+  },
+  avatar: {
+    xl: { borderRadius: radiusScale["100"], borderWidth: stroke["2"] },
+    lg: { borderRadius: radiusScale["75"], borderWidth: stroke["2"] },
+    md: { borderRadius: radiusScale["75"], borderWidth: stroke["2"] },
+    sm: { borderRadius: radiusScale["50"], borderWidth: stroke["2"] },
+    xs: { borderRadius: radiusScale["50"], borderWidth: stroke["2"] },
+    xxs: { borderRadius: radiusScale["25"], borderWidth: stroke["2"] }
+  },
+  modal: {
+    borderRadius: radiusScale["100"]
+  },
+  toast: {
+    borderRadius: radiusScale["50"]
+  },
+  toggleButtonGroup: {
+    xl: { borderRadius: radiusScale["100"], borderWidth: stroke["1"] },
+    lg: { borderRadius: radiusScale["100"], borderWidth: stroke["1"] },
+    md: { borderRadius: radiusScale["75"], borderWidth: stroke["1"] },
+    sm: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
+    xs: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] }
+  },
+  tagLabel: {
+    borderRadius: 0
+  }
+};
 
 // src/tokens/shadows.ts
 var shadow = {
@@ -2104,7 +2227,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
   return {
     colors: colors[mode],
     spacing,
-    radius,
+    shape,
     shadow,
     fonts: contextFonts,
     typography: {
@@ -2127,7 +2250,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             iconContainerSize: 64,
             iconPadding: 20,
             loadingPadding: 40,
-            borderRadius: 8,
+            borderRadius: shape.button.xl.borderRadius,
             labelIconSize: 18,
             labelIconGap: 6
           },
@@ -2141,7 +2264,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             iconContainerSize: 56,
             iconPadding: 20,
             loadingPadding: 36,
-            borderRadius: 8,
+            borderRadius: shape.button.lg.borderRadius,
             labelIconSize: 16,
             labelIconGap: 6
           },
@@ -2155,7 +2278,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             iconContainerSize: 48,
             iconPadding: 20,
             loadingPadding: 32,
-            borderRadius: 6,
+            borderRadius: shape.button.md.borderRadius,
             labelIconSize: 14,
             labelIconGap: 4
           },
@@ -2169,7 +2292,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             iconContainerSize: 40,
             iconPadding: 20,
             loadingPadding: 28,
-            borderRadius: 4,
+            borderRadius: shape.button.sm.borderRadius,
             labelIconSize: 12,
             labelIconGap: 4
           },
@@ -2183,7 +2306,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             iconContainerSize: 32,
             iconPadding: 20,
             loadingPadding: 28,
-            borderRadius: 4,
+            borderRadius: shape.button.xs.borderRadius,
             labelIconSize: 10,
             labelIconGap: 4
           }
@@ -2198,7 +2321,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             fontSize: 16,
             spinnerSize: 28,
             iconSize: 20,
-            borderRadius: 4
+            borderRadius: radiusScale["50"]
           },
           lg: {
             height: 32,
@@ -2206,7 +2329,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             fontSize: 14,
             spinnerSize: 24,
             iconSize: 18,
-            borderRadius: 4
+            borderRadius: radiusScale["50"]
           },
           md: {
             height: 28,
@@ -2214,7 +2337,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             fontSize: 14,
             spinnerSize: 24,
             iconSize: 16,
-            borderRadius: 2
+            borderRadius: radiusScale["25"]
           },
           sm: {
             height: 22,
@@ -2222,7 +2345,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             fontSize: 12,
             spinnerSize: 16,
             iconSize: 14,
-            borderRadius: 2
+            borderRadius: radiusScale["25"]
           },
           xs: {
             height: 20,
@@ -2230,7 +2353,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             fontSize: 12,
             spinnerSize: 16,
             iconSize: 12,
-            borderRadius: 2
+            borderRadius: radiusScale["25"]
           }
         };
         return configs[size];
@@ -2243,7 +2366,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             descriptionFontSize: 16,
             labelGap: 12,
             textGap: 4,
-            borderRadius: 2
+            borderRadius: shape.checkbox.xl.borderRadius
           },
           lg: {
             size: 20,
@@ -2251,7 +2374,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             descriptionFontSize: 14,
             labelGap: 10,
             textGap: 2,
-            borderRadius: 2
+            borderRadius: shape.checkbox.lg.borderRadius
           },
           md: {
             size: 18,
@@ -2259,7 +2382,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             descriptionFontSize: 14,
             labelGap: 8,
             textGap: 2,
-            borderRadius: 2
+            borderRadius: shape.checkbox.md.borderRadius
           },
           sm: {
             size: 16,
@@ -2267,7 +2390,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             descriptionFontSize: 12,
             labelGap: 8,
             textGap: 0,
-            borderRadius: 2
+            borderRadius: shape.checkbox.sm.borderRadius
           }
         };
         return configs[size];
@@ -2329,7 +2452,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             paddingHorizontal: 12,
             fontSize: 20,
             iconSize: 18,
-            radius: 8,
+            radius: shape.input.xl.borderRadius,
             borderWidth: 2,
             fieldGap: 8,
             lineHeight: 20
@@ -2340,7 +2463,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             paddingHorizontal: 12,
             fontSize: 18,
             iconSize: 18,
-            radius: 8,
+            radius: shape.input.lg.borderRadius,
             borderWidth: 2,
             fieldGap: 6,
             lineHeight: 18
@@ -2351,7 +2474,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             paddingHorizontal: 12,
             fontSize: 16,
             iconSize: 18,
-            radius: 8,
+            radius: shape.input.md.borderRadius,
             borderWidth: 1,
             fieldGap: 4,
             lineHeight: 16
@@ -2362,7 +2485,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             paddingHorizontal: 10,
             fontSize: 14,
             iconSize: 18,
-            radius: 4,
+            radius: shape.input.sm.borderRadius,
             borderWidth: 1,
             fieldGap: 4,
             lineHeight: 14
@@ -2373,7 +2496,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             paddingHorizontal: 10,
             fontSize: 12,
             iconSize: 18,
-            radius: 4,
+            radius: shape.input.xs.borderRadius,
             borderWidth: 1,
             fieldGap: 4,
             lineHeight: 10
@@ -2395,7 +2518,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             errorFontSize: 16,
             errorLineHeight: 18,
             errorGap: 8,
-            radius: 8,
+            radius: shape.input.xl.borderRadius,
             borderWidth: 1
           },
           lg: {
@@ -2410,7 +2533,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             errorFontSize: 16,
             errorLineHeight: 18,
             errorGap: 8,
-            radius: 8,
+            radius: shape.input.lg.borderRadius,
             borderWidth: 1
           },
           md: {
@@ -2425,7 +2548,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             errorFontSize: 14,
             errorLineHeight: 16,
             errorGap: 6,
-            radius: 8,
+            radius: shape.input.md.borderRadius,
             borderWidth: 1
           },
           sm: {
@@ -2440,7 +2563,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             errorFontSize: 12,
             errorLineHeight: 14,
             errorGap: 6,
-            radius: 4,
+            radius: shape.input.sm.borderRadius,
             borderWidth: 1
           },
           xs: {
@@ -2455,7 +2578,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             errorFontSize: 11,
             errorLineHeight: 13,
             errorGap: 4,
-            radius: 4,
+            radius: shape.input.xs.borderRadius,
             borderWidth: 1
           }
         };
@@ -2550,7 +2673,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             size: 64,
             gap: 10,
             fontSize: 20,
-            radius: 8,
+            radius: shape.input.xl.borderRadius,
             borderWidth: 1,
             fieldGap: 8
           },
@@ -2558,7 +2681,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             size: 56,
             gap: 8,
             fontSize: 18,
-            radius: 8,
+            radius: shape.input.lg.borderRadius,
             borderWidth: 1,
             fieldGap: 6
           },
@@ -2566,7 +2689,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             size: 48,
             gap: 6,
             fontSize: 16,
-            radius: 8,
+            radius: shape.input.md.borderRadius,
             borderWidth: 1,
             fieldGap: 4
           },
@@ -2574,7 +2697,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             size: 40,
             gap: 4,
             fontSize: 14,
-            radius: 4,
+            radius: shape.input.sm.borderRadius,
             borderWidth: 1,
             fieldGap: 4
           },
@@ -2582,7 +2705,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             size: 32,
             gap: 4,
             fontSize: 12,
-            radius: 4,
+            radius: shape.input.xs.borderRadius,
             borderWidth: 1,
             fieldGap: 4
           }
@@ -2596,35 +2719,35 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             padding: spacing.xl,
             fontSize: 20,
             iconSize: 32,
-            radius: 8
+            radius: shape.input.xl.borderRadius
           },
           lg: {
             height: 128,
             padding: spacing.l,
             fontSize: 18,
             iconSize: 28,
-            radius: 8
+            radius: shape.input.lg.borderRadius
           },
           md: {
             height: 112,
             padding: spacing.m,
             fontSize: 16,
             iconSize: 24,
-            radius: 8
+            radius: shape.input.md.borderRadius
           },
           sm: {
             height: 96,
             padding: spacing.s,
             fontSize: 14,
             iconSize: 20,
-            radius: 4
+            radius: shape.input.sm.borderRadius
           },
           xs: {
             height: 80,
             padding: spacing.xs,
             fontSize: 12,
             iconSize: 16,
-            radius: 4
+            radius: shape.input.xs.borderRadius
           }
         };
         return configs[size];
@@ -2641,8 +2764,8 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             descriptionLineHeight: 20,
             labelGap: 12,
             textGap: 4,
-            frameBorderRadius: 4,
-            knobBorderRadius: 2
+            frameBorderRadius: shape.switch.xl.borderRadius,
+            knobBorderRadius: shape.knob.xl.borderRadius
           },
           lg: {
             width: 36,
@@ -2654,8 +2777,8 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             descriptionLineHeight: 18,
             labelGap: 10,
             textGap: 2,
-            frameBorderRadius: 4,
-            knobBorderRadius: 2
+            frameBorderRadius: shape.switch.lg.borderRadius,
+            knobBorderRadius: shape.knob.lg.borderRadius
           },
           md: {
             width: 32,
@@ -2667,8 +2790,8 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             descriptionLineHeight: 16,
             labelGap: 8,
             textGap: 2,
-            frameBorderRadius: 2,
-            knobBorderRadius: 2
+            frameBorderRadius: shape.switch.md.borderRadius,
+            knobBorderRadius: shape.knob.md.borderRadius
           },
           sm: {
             width: 28,
@@ -2680,8 +2803,8 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             descriptionLineHeight: 14,
             labelGap: 8,
             textGap: 0,
-            frameBorderRadius: 2,
-            knobBorderRadius: 2
+            frameBorderRadius: shape.switch.sm.borderRadius,
+            knobBorderRadius: shape.knob.sm.borderRadius
           }
         };
         return configs[size];
@@ -2695,8 +2818,8 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             badgeSize: 20,
             badgeOffsetCircle: { right: -4, top: -4 },
             badgeOffsetSquare: { right: -8, top: -8 },
-            borderRadiusSquare: 8,
-            borderRadiusCircle: radius.avatarCircle
+            borderRadiusSquare: shape.avatar.xl.borderRadius,
+            borderRadiusCircle: radiusScale["999"]
           },
           lg: {
             size: 56,
@@ -2705,8 +2828,8 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             badgeSize: 20,
             badgeOffsetCircle: { right: -4, top: -4 },
             badgeOffsetSquare: { right: -8, top: -8 },
-            borderRadiusSquare: 6,
-            borderRadiusCircle: radius.avatarCircle
+            borderRadiusSquare: shape.avatar.lg.borderRadius,
+            borderRadiusCircle: radiusScale["999"]
           },
           md: {
             size: 48,
@@ -2715,8 +2838,8 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             badgeSize: 20,
             badgeOffsetCircle: { right: -5, top: -5 },
             badgeOffsetSquare: { right: -8, top: -8 },
-            borderRadiusSquare: 6,
-            borderRadiusCircle: radius.avatarCircle
+            borderRadiusSquare: shape.avatar.md.borderRadius,
+            borderRadiusCircle: radiusScale["999"]
           },
           sm: {
             size: 40,
@@ -2725,8 +2848,8 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             badgeSize: 20,
             badgeOffsetCircle: { right: -6, top: -6 },
             badgeOffsetSquare: { right: -8, top: -8 },
-            borderRadiusSquare: radius.avatarSmall,
-            borderRadiusCircle: radius.avatarCircle
+            borderRadiusSquare: shape.avatar.sm.borderRadius,
+            borderRadiusCircle: radiusScale["999"]
           },
           xs: {
             size: 32,
@@ -2735,8 +2858,8 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             badgeSize: 8,
             badgeOffsetCircle: { right: -1, top: -1 },
             badgeOffsetSquare: { right: -3, top: -3 },
-            borderRadiusSquare: radius.avatarSmall,
-            borderRadiusCircle: radius.avatarCircle
+            borderRadiusSquare: shape.avatar.xs.borderRadius,
+            borderRadiusCircle: radiusScale["999"]
           },
           xxs: {
             size: 24,
@@ -2745,8 +2868,8 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             badgeSize: 6,
             badgeOffsetCircle: { right: -1, top: -1 },
             badgeOffsetSquare: { right: -2, top: -2 },
-            borderRadiusSquare: 2,
-            borderRadiusCircle: radius.avatarCircle
+            borderRadiusSquare: shape.avatar.xxs.borderRadius,
+            borderRadiusCircle: radiusScale["999"]
           }
         };
         return configs[size];
@@ -2760,7 +2883,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             lineHeight: 22,
             gap: 6,
             iconSize: 22,
-            radius: 8,
+            radius: shape.tag.xl.borderRadius,
             borderWidth: 1
           },
           lg: {
@@ -2770,7 +2893,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             lineHeight: 20,
             gap: 6,
             iconSize: 20,
-            radius: 8,
+            radius: shape.tag.lg.borderRadius,
             borderWidth: 1
           },
           md: {
@@ -2780,7 +2903,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             lineHeight: 18,
             gap: 4,
             iconSize: 18,
-            radius: 6,
+            radius: shape.tag.md.borderRadius,
             borderWidth: 1
           },
           sm: {
@@ -2790,7 +2913,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             lineHeight: 16,
             gap: 4,
             iconSize: 16,
-            radius: 4,
+            radius: shape.tag.sm.borderRadius,
             borderWidth: 1
           },
           xs: {
@@ -2800,7 +2923,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             lineHeight: 14,
             gap: 4,
             iconSize: 14,
-            radius: 4,
+            radius: shape.tag.xs.borderRadius,
             borderWidth: 1
           }
         };
@@ -2866,11 +2989,11 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
           xl: {
             height: 64,
             containerPadding: 4,
-            containerRadius: 8,
+            containerRadius: shape.segmented.xl.borderRadius,
             itemHeight: 56,
             itemPaddingHorizontal: 20,
             itemPaddingVertical: 10,
-            itemRadius: 6,
+            itemRadius: shape.segmentedItem.xl.borderRadius,
             fontSize: 20,
             lineHeight: 22,
             iconSize: 24,
@@ -2879,11 +3002,11 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
           lg: {
             height: 56,
             containerPadding: 4,
-            containerRadius: 8,
+            containerRadius: shape.segmented.lg.borderRadius,
             itemHeight: 48,
             itemPaddingHorizontal: 20,
             itemPaddingVertical: 10,
-            itemRadius: 6,
+            itemRadius: shape.segmentedItem.lg.borderRadius,
             fontSize: 18,
             lineHeight: 20,
             iconSize: 24,
@@ -2892,11 +3015,11 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
           md: {
             height: 48,
             containerPadding: 4,
-            containerRadius: 8,
+            containerRadius: shape.segmented.md.borderRadius,
             itemHeight: 40,
             itemPaddingHorizontal: 16,
             itemPaddingVertical: 8,
-            itemRadius: 6,
+            itemRadius: shape.segmentedItem.md.borderRadius,
             fontSize: 16,
             lineHeight: 18,
             iconSize: 24,
@@ -2905,11 +3028,11 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
           sm: {
             height: 40,
             containerPadding: 4,
-            containerRadius: 4,
+            containerRadius: shape.segmented.sm.borderRadius,
             itemHeight: 32,
             itemPaddingHorizontal: 12,
             itemPaddingVertical: 6,
-            itemRadius: 2,
+            itemRadius: shape.segmentedItem.sm.borderRadius,
             fontSize: 14,
             lineHeight: 16,
             iconSize: 20,
@@ -2923,10 +3046,8 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
           xl: {
             height: 64,
             containerPadding: 4,
-            containerRadius: 4,
             itemPaddingHorizontal: 16,
             itemPaddingVertical: 18,
-            itemRadius: 2,
             fontSize: 20,
             lineHeight: 22,
             iconSize: 24,
@@ -2935,10 +3056,8 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
           lg: {
             height: 56,
             containerPadding: 4,
-            containerRadius: 4,
             itemPaddingHorizontal: 16,
             itemPaddingVertical: 14,
-            itemRadius: 2,
             fontSize: 18,
             lineHeight: 20,
             iconSize: 24,
@@ -2947,10 +3066,8 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
           md: {
             height: 48,
             containerPadding: 4,
-            containerRadius: 4,
             itemPaddingHorizontal: 12,
             itemPaddingVertical: 11,
-            itemRadius: 2,
             fontSize: 16,
             lineHeight: 18,
             iconSize: 24,
@@ -2959,10 +3076,8 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
           sm: {
             height: 40,
             containerPadding: 3,
-            containerRadius: 2,
             itemPaddingHorizontal: 12,
             itemPaddingVertical: 8,
-            itemRadius: 2,
             fontSize: 14,
             lineHeight: 16,
             iconSize: 20,
@@ -2980,7 +3095,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             fontSize: 20,
             lineHeight: 22,
             gap: 8,
-            borderRadius: 4
+            borderRadius: radiusScale["50"]
           },
           lg: {
             height: 56,
@@ -2989,7 +3104,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             fontSize: 18,
             lineHeight: 20,
             gap: 8,
-            borderRadius: 4
+            borderRadius: radiusScale["50"]
           },
           md: {
             height: 48,
@@ -2998,7 +3113,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             fontSize: 16,
             lineHeight: 18,
             gap: 8,
-            borderRadius: 2
+            borderRadius: radiusScale["25"]
           },
           sm: {
             height: 40,
@@ -3007,7 +3122,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             fontSize: 14,
             lineHeight: 16,
             gap: 4,
-            borderRadius: 2
+            borderRadius: radiusScale["25"]
           }
         };
         return configs[size];
@@ -3051,7 +3166,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             messageSize: 14,
             iconSize: 20,
             iconWrapperSize: 32,
-            radius: radius.card
+            radius: shape.toast.borderRadius
           },
           inline: {
             width: "100%",
@@ -3062,7 +3177,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             messageSize: 14,
             iconSize: 20,
             iconWrapperSize: 32,
-            radius: radius.card
+            radius: shape.modal.borderRadius
           }
         };
         return configs[type];
@@ -3071,7 +3186,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
         minHeight: 66,
         iconFrameWidth: 54,
         iconSize: 24,
-        borderRadius: 8,
+        borderRadius: radiusScale["100"],
         bodyPaddingHorizontal: 16,
         bodyPaddingVertical: 12,
         textGap: 2,
@@ -3242,7 +3357,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
       },
       modal: () => {
         return {
-          borderRadius: 8,
+          borderRadius: shape.modal.borderRadius,
           headerPadding: "28px 24px 0",
           contentPadding: 24,
           headerButtonSize: "xs",
@@ -3379,7 +3494,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
           minHeight: 64,
           paddingHorizontal: 12,
           paddingVertical: 8,
-          borderRadius: 4,
+          borderRadius: shape.toast.borderRadius,
           gap: 12,
           iconSize: 24,
           closeButtonSize: 24,
@@ -3400,7 +3515,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             lineHeight: 22,
             iconSize: 24,
             gap: 6,
-            borderRadius: 8,
+            borderRadius: shape.toggleButtonGroup.xl.borderRadius,
             itemGap: 8
           },
           lg: {
@@ -3410,7 +3525,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             lineHeight: 20,
             iconSize: 24,
             gap: 4,
-            borderRadius: 8,
+            borderRadius: shape.toggleButtonGroup.lg.borderRadius,
             itemGap: 8
           },
           md: {
@@ -3420,7 +3535,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             lineHeight: 18,
             iconSize: 24,
             gap: 4,
-            borderRadius: 8,
+            borderRadius: shape.toggleButtonGroup.md.borderRadius,
             itemGap: 8
           },
           sm: {
@@ -3430,7 +3545,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             lineHeight: 16,
             iconSize: 24,
             gap: 2,
-            borderRadius: 4,
+            borderRadius: shape.toggleButtonGroup.sm.borderRadius,
             itemGap: 4
           },
           xs: {
@@ -3440,7 +3555,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             lineHeight: 16,
             iconSize: 24,
             gap: 2,
-            borderRadius: 4,
+            borderRadius: shape.toggleButtonGroup.xs.borderRadius,
             itemGap: 4
           }
         };
@@ -3570,9 +3685,12 @@ export {
   lineHeightDisplay,
   lineHeightText,
   radius,
+  radiusScale,
   responsiveTypographyScale,
   shadow,
+  shape,
   spacing,
+  stroke,
   themeConfig,
   typography,
   typographyTokens,