@xsolla/xui-core 0.160.2 → 0.161.0

package/index.js

@@ -55,9 +55,12 @@ __export(index_exports, {
   lineHeightDisplay: () => lineHeightDisplay,
   lineHeightText: () => lineHeightText,
   radius: () => radius,
+  radiusScale: () => radiusScale,
   responsiveTypographyScale: () => responsiveTypographyScale,
   shadow: () => shadow,
+  shape: () => shape,
   spacing: () => spacing,
+  stroke: () => stroke,
   themeConfig: () => themeConfig,
   typography: () => typography,
   typographyTokens: () => typographyTokens,
@@ -1313,6 +1316,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 = {
@@ -2172,7 +2298,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
   return {
     colors: colors[mode],
     spacing,
-    radius,
+    shape,
     shadow,
     fonts: contextFonts,
     typography: {
@@ -2195,7 +2321,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             iconContainerSize: 64,
             iconPadding: 20,
             loadingPadding: 40,
-            borderRadius: 8,
+            borderRadius: shape.button.xl.borderRadius,
             labelIconSize: 18,
             labelIconGap: 6
           },
@@ -2209,7 +2335,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             iconContainerSize: 56,
             iconPadding: 20,
             loadingPadding: 36,
-            borderRadius: 8,
+            borderRadius: shape.button.lg.borderRadius,
             labelIconSize: 16,
             labelIconGap: 6
           },
@@ -2223,7 +2349,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             iconContainerSize: 48,
             iconPadding: 20,
             loadingPadding: 32,
-            borderRadius: 6,
+            borderRadius: shape.button.md.borderRadius,
             labelIconSize: 14,
             labelIconGap: 4
           },
@@ -2237,7 +2363,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             iconContainerSize: 40,
             iconPadding: 20,
             loadingPadding: 28,
-            borderRadius: 4,
+            borderRadius: shape.button.sm.borderRadius,
             labelIconSize: 12,
             labelIconGap: 4
           },
@@ -2251,7 +2377,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             iconContainerSize: 32,
             iconPadding: 20,
             loadingPadding: 28,
-            borderRadius: 4,
+            borderRadius: shape.button.xs.borderRadius,
             labelIconSize: 10,
             labelIconGap: 4
           }
@@ -2266,7 +2392,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             fontSize: 16,
             spinnerSize: 28,
             iconSize: 20,
-            borderRadius: 4
+            borderRadius: radiusScale["50"]
           },
           lg: {
             height: 32,
@@ -2274,7 +2400,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             fontSize: 14,
             spinnerSize: 24,
             iconSize: 18,
-            borderRadius: 4
+            borderRadius: radiusScale["50"]
           },
           md: {
             height: 28,
@@ -2282,7 +2408,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             fontSize: 14,
             spinnerSize: 24,
             iconSize: 16,
-            borderRadius: 2
+            borderRadius: radiusScale["25"]
           },
           sm: {
             height: 22,
@@ -2290,7 +2416,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             fontSize: 12,
             spinnerSize: 16,
             iconSize: 14,
-            borderRadius: 2
+            borderRadius: radiusScale["25"]
           },
           xs: {
             height: 20,
@@ -2298,7 +2424,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             fontSize: 12,
             spinnerSize: 16,
             iconSize: 12,
-            borderRadius: 2
+            borderRadius: radiusScale["25"]
           }
         };
         return configs[size];
@@ -2311,7 +2437,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             descriptionFontSize: 16,
             labelGap: 12,
             textGap: 4,
-            borderRadius: 2
+            borderRadius: shape.checkbox.xl.borderRadius
           },
           lg: {
             size: 20,
@@ -2319,7 +2445,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             descriptionFontSize: 14,
             labelGap: 10,
             textGap: 2,
-            borderRadius: 2
+            borderRadius: shape.checkbox.lg.borderRadius
           },
           md: {
             size: 18,
@@ -2327,7 +2453,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             descriptionFontSize: 14,
             labelGap: 8,
             textGap: 2,
-            borderRadius: 2
+            borderRadius: shape.checkbox.md.borderRadius
           },
           sm: {
             size: 16,
@@ -2335,7 +2461,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             descriptionFontSize: 12,
             labelGap: 8,
             textGap: 0,
-            borderRadius: 2
+            borderRadius: shape.checkbox.sm.borderRadius
           }
         };
         return configs[size];
@@ -2397,7 +2523,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
@@ -2408,7 +2534,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
@@ -2419,7 +2545,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
@@ -2430,7 +2556,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
@@ -2441,7 +2567,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
@@ -2463,7 +2589,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             errorFontSize: 16,
             errorLineHeight: 18,
             errorGap: 8,
-            radius: 8,
+            radius: shape.input.xl.borderRadius,
             borderWidth: 1
           },
           lg: {
@@ -2478,7 +2604,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             errorFontSize: 16,
             errorLineHeight: 18,
             errorGap: 8,
-            radius: 8,
+            radius: shape.input.lg.borderRadius,
             borderWidth: 1
           },
           md: {
@@ -2493,7 +2619,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             errorFontSize: 14,
             errorLineHeight: 16,
             errorGap: 6,
-            radius: 8,
+            radius: shape.input.md.borderRadius,
             borderWidth: 1
           },
           sm: {
@@ -2508,7 +2634,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             errorFontSize: 12,
             errorLineHeight: 14,
             errorGap: 6,
-            radius: 4,
+            radius: shape.input.sm.borderRadius,
             borderWidth: 1
           },
           xs: {
@@ -2523,7 +2649,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             errorFontSize: 11,
             errorLineHeight: 13,
             errorGap: 4,
-            radius: 4,
+            radius: shape.input.xs.borderRadius,
             borderWidth: 1
           }
         };
@@ -2618,7 +2744,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             size: 64,
             gap: 10,
             fontSize: 20,
-            radius: 8,
+            radius: shape.input.xl.borderRadius,
             borderWidth: 1,
             fieldGap: 8
           },
@@ -2626,7 +2752,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             size: 56,
             gap: 8,
             fontSize: 18,
-            radius: 8,
+            radius: shape.input.lg.borderRadius,
             borderWidth: 1,
             fieldGap: 6
           },
@@ -2634,7 +2760,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             size: 48,
             gap: 6,
             fontSize: 16,
-            radius: 8,
+            radius: shape.input.md.borderRadius,
             borderWidth: 1,
             fieldGap: 4
           },
@@ -2642,7 +2768,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             size: 40,
             gap: 4,
             fontSize: 14,
-            radius: 4,
+            radius: shape.input.sm.borderRadius,
             borderWidth: 1,
             fieldGap: 4
           },
@@ -2650,7 +2776,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             size: 32,
             gap: 4,
             fontSize: 12,
-            radius: 4,
+            radius: shape.input.xs.borderRadius,
             borderWidth: 1,
             fieldGap: 4
           }
@@ -2664,35 +2790,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];
@@ -2709,8 +2835,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,
@@ -2722,8 +2848,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,
@@ -2735,8 +2861,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,
@@ -2748,8 +2874,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];
@@ -2763,8 +2889,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,
@@ -2773,8 +2899,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,
@@ -2783,8 +2909,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,
@@ -2793,8 +2919,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,
@@ -2803,8 +2929,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,
@@ -2813,8 +2939,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];
@@ -2828,7 +2954,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             lineHeight: 22,
             gap: 6,
             iconSize: 22,
-            radius: 8,
+            radius: shape.tag.xl.borderRadius,
             borderWidth: 1
           },
           lg: {
@@ -2838,7 +2964,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             lineHeight: 20,
             gap: 6,
             iconSize: 20,
-            radius: 8,
+            radius: shape.tag.lg.borderRadius,
             borderWidth: 1
           },
           md: {
@@ -2848,7 +2974,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             lineHeight: 18,
             gap: 4,
             iconSize: 18,
-            radius: 6,
+            radius: shape.tag.md.borderRadius,
             borderWidth: 1
           },
           sm: {
@@ -2858,7 +2984,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             lineHeight: 16,
             gap: 4,
             iconSize: 16,
-            radius: 4,
+            radius: shape.tag.sm.borderRadius,
             borderWidth: 1
           },
           xs: {
@@ -2868,7 +2994,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             lineHeight: 14,
             gap: 4,
             iconSize: 14,
-            radius: 4,
+            radius: shape.tag.xs.borderRadius,
             borderWidth: 1
           }
         };
@@ -2934,11 +3060,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,
@@ -2947,11 +3073,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,
@@ -2960,11 +3086,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,
@@ -2973,11 +3099,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,
@@ -2991,10 +3117,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,
@@ -3003,10 +3127,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,
@@ -3015,10 +3137,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,
@@ -3027,10 +3147,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,
@@ -3048,7 +3166,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             fontSize: 20,
             lineHeight: 22,
             gap: 8,
-            borderRadius: 4
+            borderRadius: radiusScale["50"]
           },
           lg: {
             height: 56,
@@ -3057,7 +3175,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             fontSize: 18,
             lineHeight: 20,
             gap: 8,
-            borderRadius: 4
+            borderRadius: radiusScale["50"]
           },
           md: {
             height: 48,
@@ -3066,7 +3184,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             fontSize: 16,
             lineHeight: 18,
             gap: 8,
-            borderRadius: 2
+            borderRadius: radiusScale["25"]
           },
           sm: {
             height: 40,
@@ -3075,7 +3193,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             fontSize: 14,
             lineHeight: 16,
             gap: 4,
-            borderRadius: 2
+            borderRadius: radiusScale["25"]
           }
         };
         return configs[size];
@@ -3119,7 +3237,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             messageSize: 14,
             iconSize: 20,
             iconWrapperSize: 32,
-            radius: radius.card
+            radius: shape.toast.borderRadius
           },
           inline: {
             width: "100%",
@@ -3130,7 +3248,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             messageSize: 14,
             iconSize: 20,
             iconWrapperSize: 32,
-            radius: radius.card
+            radius: shape.modal.borderRadius
           }
         };
         return configs[type];
@@ -3139,7 +3257,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
         minHeight: 66,
         iconFrameWidth: 54,
         iconSize: 24,
-        borderRadius: 8,
+        borderRadius: radiusScale["100"],
         bodyPaddingHorizontal: 16,
         bodyPaddingVertical: 12,
         textGap: 2,
@@ -3310,7 +3428,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
       },
       modal: () => {
         return {
-          borderRadius: 8,
+          borderRadius: shape.modal.borderRadius,
           headerPadding: "28px 24px 0",
           contentPadding: 24,
           headerButtonSize: "xs",
@@ -3447,7 +3565,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,
@@ -3468,7 +3586,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             lineHeight: 22,
             iconSize: 24,
             gap: 6,
-            borderRadius: 8,
+            borderRadius: shape.toggleButtonGroup.xl.borderRadius,
             itemGap: 8
           },
           lg: {
@@ -3478,7 +3596,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             lineHeight: 20,
             iconSize: 24,
             gap: 4,
-            borderRadius: 8,
+            borderRadius: shape.toggleButtonGroup.lg.borderRadius,
             itemGap: 8
           },
           md: {
@@ -3488,7 +3606,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             lineHeight: 18,
             iconSize: 24,
             gap: 4,
-            borderRadius: 8,
+            borderRadius: shape.toggleButtonGroup.md.borderRadius,
             itemGap: 8
           },
           sm: {
@@ -3498,7 +3616,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             lineHeight: 16,
             iconSize: 24,
             gap: 2,
-            borderRadius: 4,
+            borderRadius: shape.toggleButtonGroup.sm.borderRadius,
             itemGap: 4
           },
           xs: {
@@ -3508,7 +3626,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
             lineHeight: 16,
             iconSize: 24,
             gap: 2,
-            borderRadius: 4,
+            borderRadius: shape.toggleButtonGroup.xs.borderRadius,
             itemGap: 4
           }
         };
@@ -3639,9 +3757,12 @@ var useModalId = () => (0, import_react3.useContext)(ModalIdContext);
   lineHeightDisplay,
   lineHeightText,
   radius,
+  radiusScale,
   responsiveTypographyScale,
   shadow,
+  shape,
   spacing,
+  stroke,
   themeConfig,
   typography,
   typographyTokens,