@xsolla/xui-core 0.216.1 → 0.218.0

package/index.mjs

@@ -1,6 +1,3 @@
-// src/index.tsx
-import React3, { createContext, useContext, useState, useMemo } from "react";
-
 // src/tokens/dark.json
 var dark_default = {
   background: {
@@ -1306,6 +1303,441 @@ var ltg_dark_default = {
   }
 };
 
+// src/tokens/ltg-light.json
+var ltg_light_default = {
+  background: {
+    primary: "#ffffff",
+    secondary: "#f2f2f2",
+    brand: {
+      primary: "#c9eb6a",
+      secondary: "#eff9d2"
+    },
+    brandExtra: {
+      primary: "#535e99",
+      secondary: "#b0baee"
+    },
+    inverse: "#0d143a",
+    static: {
+      dark: "#0d143a",
+      light: "#ffffff"
+    },
+    success: {
+      primary: "#95ff80",
+      secondary: "#bfffb2"
+    },
+    warning: {
+      primary: "#ffc380",
+      secondary: "#ffdbb2"
+    },
+    alert: {
+      primary: "#f67055",
+      secondary: "#ffbfb2"
+    },
+    neutral: {
+      primary: "#888a96",
+      secondary: "#d9dadd"
+    }
+  },
+  content: {
+    primary: "#000000",
+    secondary: "#52535b",
+    tertiary: "#898b97",
+    brand: {
+      primary: "#535e99",
+      secondary: "#31cae8"
+    },
+    brandExtra: {
+      primary: "#0d143a",
+      secondary: "#535e99"
+    },
+    inverse: "#ffffff",
+    static: {
+      light: "#ffffff",
+      dark: "#000000"
+    },
+    success: {
+      primary: "#368f24",
+      secondary: "#3dc322"
+    },
+    warning: {
+      primary: "#c37822",
+      secondary: "#f6ab55"
+    },
+    alert: {
+      primary: "#e84f30",
+      secondary: "#f67055"
+    },
+    neutral: {
+      primary: "#3e4046",
+      secondary: "#6e707c"
+    },
+    on: {
+      brand: "#0d143a",
+      brandExtra: "#ffffff",
+      success: "#000000",
+      warning: "#000000",
+      alert: "#ffffff",
+      neutral: "#000000"
+    }
+  },
+  border: {
+    primary: "rgba(0, 0, 0, 0)",
+    secondary: "rgba(0, 0, 0, 0)",
+    brand: "rgba(0, 0, 0, 0)",
+    brandExtra: "rgba(0, 0, 0, 0)",
+    inverse: "rgba(0, 0, 0, 0)",
+    success: "rgba(0, 0, 0, 0)",
+    warning: "rgba(0, 0, 0, 0)",
+    alert: "rgba(0, 0, 0, 0)",
+    neutral: "rgba(0, 0, 0, 0)"
+  },
+  overlay: {
+    mono: "rgba(0, 0, 0, 0.05)",
+    brand: "rgba(201, 235, 106, 0.3)",
+    brandExtra: "rgba(83, 94, 153, 0.3)",
+    success: "rgba(149, 255, 128, 0.24)",
+    warning: "rgba(255, 195, 128, 0.28)",
+    alert: "rgba(255, 149, 128, 0.24)",
+    neutral: "rgba(136, 138, 150, 0.3)",
+    monoHover: "rgba(0, 0, 0, 0.1)"
+  },
+  layer: {
+    scrim: "rgba(0, 0, 0, 0.5)",
+    float: "rgba(255, 255, 255, 0.75)"
+  },
+  data: {
+    brand: {
+      s12: "#e5fbff",
+      s11: "#ccf6ff",
+      s10: "#b2f2ff",
+      s9: "#80eaff",
+      s8: "#b0baee",
+      s7: "#535e99",
+      s6: "#22a8c3",
+      s5: "#1b8398",
+      s4: "#0d143a",
+      s3: "#0b3841",
+      s2: "#041316"
+    },
+    contrast: {
+      pink: "#ffa5eb",
+      orange: "#d9875e",
+      yellow: "#9c8f6c",
+      green: "#c9eb6a",
+      cyan: "#67cad7",
+      grey: "#898b97",
+      lilac: "#aea0ff",
+      purple: "#5040ad"
+    },
+    neutral: {
+      n11: "rgba(0, 0, 0, 0.05)",
+      n12: "#f2f2f2",
+      n13: "#d7dee0"
+    }
+  },
+  control: {
+    brand: {
+      primary: {
+        bg: "#c9eb6a",
+        bgHover: "#eff9d2",
+        bgPress: "#aac858",
+        bgDisable: "#d0d1d5",
+        border: "rgba(0, 0, 0, 0)",
+        borderHover: "rgba(0, 0, 0, 0)",
+        borderPress: "rgba(0, 0, 0, 0)",
+        borderDisable: "rgba(0, 0, 0, 0)"
+      },
+      secondary: {
+        bg: "#eff9d2",
+        bgHover: "#e4f5b3",
+        bgPress: "#dcf29e",
+        border: "rgba(0, 0, 0, 0)",
+        borderHover: "rgba(0, 0, 0, 0)",
+        borderPress: "rgba(0, 0, 0, 0)"
+      },
+      tertiary: {
+        bg: "rgba(0, 0, 0, 0)",
+        bgHover: "rgba(201, 235, 106, 0.15)",
+        bgPress: "rgba(201, 235, 106, 0.25)",
+        border: "rgba(0, 0, 0, 0)",
+        borderHover: "rgba(0, 0, 0, 0)",
+        borderPress: "rgba(0, 0, 0, 0)"
+      },
+      text: {
+        primary: "#0d143a",
+        secondary: "#0d143a",
+        tertiary: "#63762d",
+        disable: "#898b97",
+        ghost: "#63762d"
+      },
+      ghost: {
+        bg: "rgba(0, 0, 0, 0)",
+        bgHover: "rgba(99, 118, 45, 0.04)",
+        bgPress: "rgba(99, 118, 45, 0.08)",
+        border: "rgba(0, 0, 0, 0)",
+        borderHover: "rgba(0, 0, 0, 0)",
+        borderPress: "rgba(0, 0, 0, 0)"
+      }
+    },
+    mono: {
+      primary: {
+        bg: "#1a1a1a",
+        bgHover: "#333333",
+        bgPress: "#000000",
+        border: "rgba(0, 0, 0, 0)",
+        borderHover: "rgba(0, 0, 0, 0)",
+        borderPress: "rgba(0, 0, 0, 0)"
+      },
+      secondary: {
+        bg: "rgba(26, 26, 26, 0.12)",
+        bgHover: "rgba(51, 51, 51, 0.12)",
+        bgPress: "rgba(0, 0, 0, 0.12)",
+        border: "rgba(0, 0, 0, 0)",
+        borderHover: "rgba(0, 0, 0, 0)",
+        borderPress: "rgba(0, 0, 0, 0)"
+      },
+      tertiary: {
+        bg: "rgba(0, 0, 0, 0)",
+        bgHover: "rgba(0, 0, 0, 0.1)",
+        bgPress: "rgba(0, 0, 0, 0.2)",
+        border: "rgba(0, 0, 0, 0)",
+        borderHover: "rgba(0, 0, 0, 0)",
+        borderPress: "rgba(0, 0, 0, 0)"
+      },
+      text: {
+        primary: "#ffffff",
+        secondary: "#000000",
+        tertiary: "#000000",
+        ghost: "#000000"
+      },
+      ghost: {
+        bg: "rgba(0, 0, 0, 0)",
+        bgHover: "rgba(0, 0, 0, 0.04)",
+        bgPress: "rgba(0, 0, 0, 0.08)",
+        border: "rgba(0, 0, 0, 0)",
+        borderHover: "rgba(0, 0, 0, 0)",
+        borderPress: "rgba(0, 0, 0, 0)"
+      }
+    },
+    brandExtra: {
+      primary: {
+        bg: "#535e99",
+        bgHover: "#0d143a",
+        bgPress: "#30396a",
+        border: "rgba(0, 0, 0, 0)",
+        borderHover: "rgba(0, 0, 0, 0)",
+        borderPress: "rgba(0, 0, 0, 0)"
+      },
+      secondary: {
+        bg: "#b0baee",
+        bgHover: "#949ed5",
+        bgPress: "#828cc4",
+        border: "rgba(0, 0, 0, 0)",
+        borderHover: "rgba(0, 0, 0, 0)",
+        borderPress: "rgba(0, 0, 0, 0)"
+      },
+      tertiary: {
+        bg: "rgba(0, 0, 0, 0)",
+        bgHover: "rgba(83, 94, 153, 0.1)",
+        bgPress: "rgba(83, 94, 153, 0.2)",
+        border: "rgba(0, 0, 0, 0)",
+        borderHover: "rgba(0, 0, 0, 0)",
+        borderPress: "rgba(0, 0, 0, 0)"
+      },
+      text: {
+        primary: "#ffffff",
+        secondary: "#000000",
+        tertiary: "#0d143a",
+        ghost: "#0d143a"
+      },
+      ghost: {
+        bg: "rgba(0, 0, 0, 0)",
+        bgHover: "rgba(13, 20, 58, 0.04)",
+        bgPress: "rgba(13, 20, 58, 0.08)",
+        border: "rgba(0, 0, 0, 0)",
+        borderHover: "rgba(0, 0, 0, 0)",
+        borderPress: "rgba(0, 0, 0, 0)"
+      }
+    },
+    alert: {
+      bg: "#ffbfb2",
+      border: "rgba(0, 0, 0, 0)",
+      primary: {
+        bg: "#e84f30",
+        bgHover: "#f67055",
+        bgPress: "#c33d22",
+        border: "rgba(0, 0, 0, 0)",
+        borderHover: "rgba(0, 0, 0, 0)",
+        borderPress: "rgba(0, 0, 0, 0)"
+      },
+      secondary: {
+        bg: "#ffbfb2",
+        bgHover: "#ffddd6",
+        bgPress: "#ff9580",
+        border: "rgba(0, 0, 0, 0)",
+        borderHover: "rgba(0, 0, 0, 0)",
+        borderPress: "rgba(0, 0, 0, 0)"
+      },
+      tertiary: {
+        bg: "rgba(232, 79, 48, 0)",
+        bgHover: "rgba(232, 79, 48, 0.07)",
+        bgPress: "rgba(232, 79, 48, 0.12)",
+        border: "rgba(0, 0, 0, 0)",
+        borderHover: "rgba(0, 0, 0, 0)",
+        borderPress: "rgba(0, 0, 0, 0)"
+      },
+      text: {
+        primary: "#ffffff",
+        secondary: "#000000",
+        tertiary: "#c33d22",
+        ghost: "#c33d22"
+      },
+      ghost: {
+        bg: "rgba(0, 0, 0, 0)",
+        bgHover: "rgba(195, 61, 34, 0.04)",
+        bgPress: "rgba(195, 61, 34, 0.08)",
+        border: "rgba(0, 0, 0, 0)",
+        borderHover: "rgba(0, 0, 0, 0)",
+        borderPress: "rgba(0, 0, 0, 0)"
+      }
+    },
+    input: {
+      bg: "#ffffff",
+      bgHover: "#f2f2f2",
+      bgDisable: "#d3d3d3",
+      border: "#d0d1d5",
+      borderHover: "#898b97",
+      borderDisable: "rgba(0, 0, 0, 0)",
+      text: "#000000",
+      placeholder: "#6e6e6e",
+      textDisable: "#898b97"
+    },
+    focus: {
+      bg: "#ffffff",
+      border: "#c9eb6b"
+    },
+    check: {
+      bg: "#c9eb6b",
+      bgHover: "#b8e53e",
+      bgDisable: "rgba(0, 0, 0, 0.2)",
+      border: "#c9eb6b",
+      borderHover: "#b8e53e",
+      borderDisable: "rgba(0, 0, 0, 0)",
+      icon: "#0d143a"
+    },
+    faint: {
+      bg: "rgba(0, 0, 0, 0.15)",
+      bgHover: "rgba(0, 0, 0, 0.2)",
+      border: "rgba(0, 0, 0, 0)",
+      borderHover: "rgba(0, 0, 0, 0)"
+    },
+    slider: {
+      bg: "#c9eb6b",
+      bgHover: "#d9f198",
+      bgDisable: "rgba(0, 0, 0, 0.25)"
+    },
+    switch: {
+      bg: "#c9eb6b",
+      bgHover: "#b8e53e",
+      bgDisable: "rgba(0, 0, 0, 0.25)",
+      border: "rgba(0, 0, 0, 0)",
+      borderHover: "rgba(0, 0, 0, 0)",
+      borderDisable: "rgba(0, 0, 0, 0)"
+    },
+    knob: {
+      bg: "#c9eb6b",
+      bgHover: "#eff9d2",
+      bgActive: "#c9eb6b",
+      bgActiveHover: "#eff9d2",
+      bgInactive: "#ffffff",
+      bgInactiveHover: "#f4f5f6",
+      bgDisable: "#8c8c8c"
+    },
+    text: {
+      primary: "#000000",
+      disable: "rgba(0, 0, 0, 0.36)"
+    },
+    link: {
+      primary: "#aea0ff",
+      primaryHover: "#5040ad",
+      secondary: "#aea0ff",
+      secondaryHover: "#5040ad"
+    },
+    segmented: {
+      bg: "rgba(0, 0, 0, 0.08)",
+      bgHover: "rgba(0, 0, 0, 0.08)",
+      bgActive: "#ffffff",
+      border: "rgba(0, 0, 0, 0.1)",
+      borderHover: "rgba(0, 0, 0, 0.1)",
+      borderActive: "rgba(0, 0, 0, 0)",
+      text: "#000000",
+      textDisable: "rgba(0, 0, 0, 0.36)"
+    },
+    tagLabel: {
+      product: {
+        bg: "#d9ff66",
+        text: "#000000",
+        textCompact: "rgba(0, 0, 0, 0.48)"
+      },
+      rarity: {
+        bg: "#141d1f",
+        text: "#22a8c3"
+      },
+      name: {
+        bg: "rgba(155, 165, 145, 0.1)",
+        text: "#000000"
+      },
+      account: {
+        bg: "#9580ff",
+        text: "#000000",
+        textCompact: "rgba(0, 0, 0, 0.48)"
+      },
+      id: {
+        bg: "#dddfd8",
+        bgSeries: "#000000",
+        textSeries: "#d7dee0",
+        textNumber: "#000000",
+        textCompact: "rgba(0, 0, 0, 0.48)"
+      },
+      subentity: {
+        bg: "#a9aca0",
+        text: "#000000"
+      },
+      item: {
+        bg: "#55dcf6",
+        text: "#000000",
+        textCompact: "rgba(0, 0, 0, 0.48)"
+      }
+    },
+    toast: {
+      bg: "#0d143a"
+    },
+    toggleButton: {
+      bg: "rgba(0, 0, 0, 0.08)",
+      bgHover: "rgba(0, 0, 0, 0.12)",
+      bgActive: "rgba(201, 235, 107, 0.4)",
+      bgDisable: "rgba(0, 0, 0, 0.25)",
+      border: "rgba(0, 0, 0, 0)",
+      borderHover: "rgba(0, 0, 0, 0)",
+      borderActive: "rgba(0, 0, 0, 0)",
+      borderDisable: "rgba(0, 0, 0, 0)",
+      text: "#000000",
+      textActive: "#000000",
+      textDisable: "rgba(0, 0, 0, 0.36)"
+    },
+    appButton: {
+      bg: "#dadbd7",
+      bgHover: "#c1c2bc",
+      bgPress: "#a8aaa2",
+      border: "rgba(0, 0, 0, 0)",
+      borderHover: "rgba(0, 0, 0, 0)",
+      borderPress: "rgba(0, 0, 0, 0)",
+      text: "#000000",
+      textDisable: "#999999"
+    }
+  }
+};
+
 // src/tokens/blueprints.json
 var blueprints_default = {
   background: {
@@ -2618,24 +3050,43 @@ var colors = {
   "pentagram-dark": dark_default,
   "pentagram-light": light_default,
   "ltg-dark": ltg_dark_default,
+  "ltg-light": ltg_light_default,
   blueprints: blueprints_default,
   "corpsite-dark": corpsite_dark_default,
   "corpsite-light": corpsite_light_default
 };
 
 // src/tokens/spacing.ts
+var spacingScale = {
+  "25": 2,
+  "50": 4,
+  "75": 6,
+  "100": 8,
+  "150": 12,
+  "200": 16,
+  "250": 20,
+  "300": 24,
+  "350": 28,
+  "400": 32,
+  "450": 36,
+  "500": 40,
+  "600": 48,
+  "700": 56,
+  "800": 64,
+  "900": 72
+};
 var spacing = {
-  xs: 4,
-  sm: 8,
-  md: 16,
-  lg: 24,
-  xl: 32,
+  xs: spacingScale["50"],
+  sm: spacingScale["100"],
+  md: spacingScale["200"],
+  lg: spacingScale["300"],
+  xl: spacingScale["400"],
   /** @deprecated Use `sm` instead (same 8px). Kept for backwards compatibility. */
-  s: 8,
+  s: spacingScale["100"],
   /** @deprecated Use `md` instead (same 16px). Kept for backwards compatibility. */
-  m: 16,
+  m: spacingScale["200"],
   /** @deprecated Use `lg` instead (same 24px). Kept for backwards compatibility. */
-  l: 24
+  l: spacingScale["300"]
 };
 var radius = {
   button: 4,
@@ -2700,7 +3151,8 @@ var shape = {
     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"] }
+    sm: { borderRadius: radiusScale["25"], borderWidth: stroke["1"] },
+    xs: { borderRadius: radiusScale["25"], borderWidth: stroke["1"] }
   },
   switch: {
     xl: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
@@ -2763,7 +3215,9 @@ var shape = {
     borderRadius: radiusScale["100"]
   },
   toast: {
-    borderRadius: radiusScale["50"]
+    borderRadius: radiusScale["50"],
+    /** Figma "toast/frame/border-width" is 0 — toast is borderless by design. */
+    borderWidth: 0
   },
   toggleButtonGroup: {
     xl: { borderRadius: radiusScale["100"], borderWidth: stroke["1"] },
@@ -2922,6 +3376,92 @@ var responsiveTypographyScale = {
 };
 
 // src/tokens/typography.ts
+var displayVariants = {
+  b2c: {
+    "display-lg": {
+      fontSize: fontSize["900"].common,
+      lineHeight: `${lineHeightDisplay["900"].common}px`,
+      fontWeight: 700,
+      scaleStep: "900",
+      lineHeightCategory: "display",
+      letterSpacing: -4,
+      fontRole: "display"
+    },
+    "display-md": {
+      fontSize: fontSize["850"].common,
+      lineHeight: `${lineHeightDisplay["850"].common}px`,
+      fontWeight: 700,
+      scaleStep: "850",
+      lineHeightCategory: "display",
+      letterSpacing: -3,
+      fontRole: "display"
+    },
+    "display-sm": {
+      fontSize: fontSize["300"].common,
+      lineHeight: `${lineHeightCompact["300"].common}px`,
+      fontWeight: 500,
+      scaleStep: "300",
+      lineHeightCategory: "compact",
+      fontRole: "compact"
+    }
+  },
+  b2b: {
+    "display-lg": {
+      fontSize: fontSize["900"].common,
+      lineHeight: `${lineHeightDisplay["900"].common}px`,
+      fontWeight: 300,
+      scaleStep: "900",
+      lineHeightCategory: "display",
+      letterSpacing: -4,
+      fontRole: "display"
+    },
+    "display-md": {
+      fontSize: fontSize["850"].common,
+      lineHeight: `${lineHeightDisplay["850"].common}px`,
+      fontWeight: 300,
+      scaleStep: "850",
+      lineHeightCategory: "display",
+      letterSpacing: -3,
+      fontRole: "display"
+    },
+    "display-sm": {
+      fontSize: fontSize["750"].common,
+      lineHeight: `${lineHeightDisplay["750"].common}px`,
+      fontWeight: 400,
+      scaleStep: "750",
+      lineHeightCategory: "display",
+      fontRole: "display"
+    }
+  },
+  corpsite: {
+    "display-lg": {
+      fontSize: fontSize["900"].common,
+      lineHeight: `${lineHeightDisplay["900"].common}px`,
+      fontWeight: 300,
+      scaleStep: "900",
+      lineHeightCategory: "display",
+      letterSpacing: -4,
+      fontRole: "display"
+    },
+    "display-md": {
+      fontSize: fontSize["850"].common,
+      lineHeight: `${lineHeightDisplay["850"].common}px`,
+      fontWeight: 300,
+      scaleStep: "850",
+      lineHeightCategory: "display",
+      letterSpacing: -3,
+      fontRole: "display"
+    },
+    "display-sm": {
+      fontSize: fontSize["750"].common,
+      lineHeight: `${lineHeightDisplay["750"].common}px`,
+      fontWeight: 400,
+      scaleStep: "750",
+      lineHeightCategory: "display",
+      fontRole: "display"
+    }
+  }
+};
 var typographyTokens = {
   b2c: {
     heading: {
@@ -2962,13 +3502,8 @@ var typographyTokens = {
       }
     },
     basic: {
-      display: {
-        fontSize: fontSize["550"].common,
-        lineHeight: `${lineHeightDisplay["550"].common}px`,
-        fontWeight: 800,
-        scaleStep: "550",
-        lineHeightCategory: "display"
-      },
+      ...displayVariants.b2c,
+      display: displayVariants.b2c["display-lg"],
       "body-lg": {
         fontSize: fontSize["175"].common,
         lineHeight: `${lineHeightCompact["175"].common}px`,
@@ -3075,13 +3610,8 @@ var typographyTokens = {
       }
     },
     basic: {
-      display: {
-        fontSize: fontSize["750"].common,
-        lineHeight: `${lineHeightDisplay["750"].common}px`,
-        fontWeight: 400,
-        scaleStep: "750",
-        lineHeightCategory: "display"
-      },
+      ...displayVariants.b2b,
+      display: displayVariants.b2b["display-lg"],
       "body-lg": {
         fontSize: fontSize["175"].common,
         lineHeight: `${lineHeightCompact["175"].common}px`,
@@ -3188,16 +3718,8 @@ var typographyTokens = {
       }
     },
     basic: {
-      // Figma splits corpsite display into display-lg (96px) / display-md (80px)
-      // / display-sm (64px). The app models a single `display`; mapped to
-      // display-lg (step 900) — the largest, matching Figma's primary display.
-      display: {
-        fontSize: fontSize["900"].common,
-        lineHeight: `${lineHeightDisplay["900"].common}px`,
-        fontWeight: 300,
-        scaleStep: "900",
-        lineHeightCategory: "display"
-      },
+      ...displayVariants.corpsite,
+      display: displayVariants.corpsite["display-lg"],
       "body-lg": {
         fontSize: fontSize["175"].common,
         lineHeight: `${lineHeightCompact["175"].common}px`,
@@ -3275,8 +3797,18 @@ var getTypographyVariant = (productContext, variant) => {
   if (variant in tokens.heading) {
     return tokens.heading[variant];
   }
-  if (variant === "display") {
-    return tokens.basic.display;
+  const displayVariantMap = {
+    display: "display-lg",
+    displayLg: "display-lg",
+    displayMd: "display-md",
+    displaySm: "display-sm",
+    "display-lg": "display-lg",
+    "display-md": "display-md",
+    "display-sm": "display-sm"
+  };
+  const displayKey = displayVariantMap[variant];
+  if (displayKey) {
+    return tokens.basic[displayKey];
   }
   const bodyVariantMap = {
     bodyLg: "body-lg",
@@ -3305,6 +3837,1576 @@ var getTypographyVariant = (productContext, variant) => {
   return void 0;
 };
 
+// src/theme/sizing/button.ts
+var button = (size) => {
+  const configs = {
+    xl: {
+      height: 64,
+      padding: 20,
+      fontSize: 20,
+      lineHeight: 22,
+      sublabelFontSize: 18,
+      spinnerSize: 24,
+      iconSize: 32,
+      iconContainerSize: 64,
+      borderRadius: shape.button.xl.borderRadius,
+      labelIconSize: 22,
+      labelIconGap: 6
+    },
+    lg: {
+      height: 56,
+      padding: 18,
+      fontSize: 18,
+      lineHeight: 20,
+      sublabelFontSize: 16,
+      spinnerSize: 24,
+      iconSize: 28,
+      iconContainerSize: 56,
+      borderRadius: shape.button.lg.borderRadius,
+      labelIconSize: 20,
+      labelIconGap: 4
+    },
+    md: {
+      height: 48,
+      padding: 16,
+      fontSize: 16,
+      lineHeight: 18,
+      sublabelFontSize: 14,
+      spinnerSize: 24,
+      iconSize: 24,
+      iconContainerSize: 48,
+      borderRadius: shape.button.md.borderRadius,
+      labelIconSize: 18,
+      labelIconGap: 4
+    },
+    sm: {
+      height: 40,
+      padding: 14,
+      fontSize: 14,
+      lineHeight: 16,
+      sublabelFontSize: 12,
+      spinnerSize: 24,
+      iconSize: 20,
+      iconContainerSize: 40,
+      borderRadius: shape.button.sm.borderRadius,
+      labelIconSize: 16,
+      labelIconGap: 4
+    },
+    xs: {
+      height: 32,
+      padding: 12,
+      fontSize: 12,
+      lineHeight: 14,
+      sublabelFontSize: 10,
+      spinnerSize: 16,
+      iconSize: 16,
+      iconContainerSize: 32,
+      borderRadius: shape.button.xs.borderRadius,
+      labelIconSize: 14,
+      labelIconGap: 4
+    }
+  };
+  return configs[size];
+};
+
+// src/theme/sizing/flexButton.ts
+var flexButton = (size) => {
+  const configs = {
+    xl: {
+      height: 36,
+      padding: 4,
+      fontSize: 16,
+      spinnerSize: 28,
+      iconSize: 20,
+      borderRadius: radiusScale["50"]
+    },
+    lg: {
+      height: 32,
+      padding: 4,
+      fontSize: 14,
+      spinnerSize: 24,
+      iconSize: 18,
+      borderRadius: radiusScale["50"]
+    },
+    md: {
+      height: 28,
+      padding: 2,
+      fontSize: 14,
+      spinnerSize: 24,
+      iconSize: 16,
+      borderRadius: radiusScale["25"]
+    },
+    sm: {
+      height: 22,
+      padding: 2,
+      fontSize: 12,
+      spinnerSize: 16,
+      iconSize: 14,
+      borderRadius: radiusScale["25"]
+    },
+    xs: {
+      height: 20,
+      padding: 2,
+      fontSize: 12,
+      spinnerSize: 16,
+      iconSize: 12,
+      borderRadius: radiusScale["25"]
+    }
+  };
+  return configs[size];
+};
+
+// src/theme/sizing/checkbox.ts
+var checkbox = (size) => {
+  const configs = {
+    xl: {
+      size: 22,
+      fontSize: 18,
+      descriptionFontSize: 16,
+      labelGap: 12,
+      textGap: 4,
+      borderRadius: shape.checkbox.xl.borderRadius
+    },
+    lg: {
+      size: 20,
+      fontSize: 16,
+      descriptionFontSize: 14,
+      labelGap: 10,
+      textGap: 2,
+      borderRadius: shape.checkbox.lg.borderRadius
+    },
+    md: {
+      size: 18,
+      fontSize: 16,
+      descriptionFontSize: 14,
+      labelGap: 8,
+      textGap: 2,
+      borderRadius: shape.checkbox.md.borderRadius
+    },
+    sm: {
+      size: 16,
+      fontSize: 14,
+      descriptionFontSize: 12,
+      labelGap: 8,
+      textGap: 0,
+      borderRadius: shape.checkbox.sm.borderRadius
+    }
+  };
+  return configs[size];
+};
+
+// src/theme/sizing/radio.ts
+var radio = (size) => {
+  const configs = {
+    xl: {
+      size: 24,
+      iconSize: 10,
+      fontSize: 20,
+      lineHeight: 22,
+      descriptionFontSize: 18,
+      descriptionLineHeight: 20,
+      labelGap: 12,
+      textGap: 4,
+      borderWidth: 1
+    },
+    lg: {
+      size: 20,
+      iconSize: 8,
+      fontSize: 18,
+      lineHeight: 20,
+      descriptionFontSize: 16,
+      descriptionLineHeight: 18,
+      labelGap: 10,
+      textGap: 2,
+      borderWidth: 1
+    },
+    md: {
+      size: 18,
+      iconSize: 8,
+      fontSize: 16,
+      lineHeight: 18,
+      descriptionFontSize: 14,
+      descriptionLineHeight: 16,
+      labelGap: 8,
+      textGap: 2,
+      borderWidth: 1
+    },
+    sm: {
+      size: 16,
+      iconSize: 6,
+      fontSize: 14,
+      lineHeight: 16,
+      descriptionFontSize: 12,
+      descriptionLineHeight: 14,
+      labelGap: 6,
+      textGap: 0,
+      borderWidth: 1
+    }
+  };
+  return configs[size];
+};
+
+// src/theme/sizing/input.ts
+var input = (size) => {
+  const configs = {
+    xl: {
+      height: 64,
+      paddingVertical: 12,
+      paddingHorizontal: 12,
+      fontSize: 20,
+      iconSize: 22,
+      radius: shape.input.xl.borderRadius,
+      borderWidth: 2,
+      fieldGap: 8,
+      lineHeight: 20,
+      contentGap: 10,
+      trailingGap: 10
+    },
+    lg: {
+      height: 56,
+      paddingVertical: 14,
+      paddingHorizontal: 12,
+      fontSize: 18,
+      iconSize: 20,
+      radius: shape.input.lg.borderRadius,
+      borderWidth: 2,
+      fieldGap: 6,
+      lineHeight: 18,
+      contentGap: 8,
+      trailingGap: 10
+    },
+    md: {
+      height: 48,
+      paddingVertical: 11,
+      paddingHorizontal: 12,
+      fontSize: 16,
+      iconSize: 18,
+      radius: shape.input.md.borderRadius,
+      borderWidth: 1,
+      fieldGap: 4,
+      lineHeight: 16,
+      contentGap: 6,
+      trailingGap: 8
+    },
+    sm: {
+      height: 40,
+      paddingVertical: 7,
+      paddingHorizontal: 10,
+      fontSize: 14,
+      iconSize: 16,
+      radius: shape.input.sm.borderRadius,
+      borderWidth: 1,
+      fieldGap: 4,
+      lineHeight: 14,
+      contentGap: 4,
+      trailingGap: 8
+    },
+    xs: {
+      height: 32,
+      paddingVertical: 7,
+      paddingHorizontal: 10,
+      fontSize: 12,
+      iconSize: 14,
+      radius: shape.input.xs.borderRadius,
+      borderWidth: 1,
+      fieldGap: 4,
+      lineHeight: 10,
+      contentGap: 4,
+      trailingGap: 4
+    }
+  };
+  return configs[size];
+};
+
+// src/theme/sizing/imageUploader.ts
+var imageUploader = (size) => {
+  const configs = {
+    xl: {
+      box: 200,
+      padding: 14,
+      gap: 10,
+      iconSize: 32,
+      spinnerSize: "lg",
+      labelFontSize: 20,
+      labelLineHeight: 22,
+      descriptionFontSize: 20,
+      descriptionLineHeight: 22,
+      errorFontSize: 16,
+      errorLineHeight: 18,
+      errorGap: 8,
+      radius: shape.input.xl.borderRadius,
+      borderWidth: 1
+    },
+    lg: {
+      box: 168,
+      padding: 14,
+      gap: 10,
+      iconSize: 24,
+      spinnerSize: "lg",
+      labelFontSize: 18,
+      labelLineHeight: 24,
+      descriptionFontSize: 18,
+      descriptionLineHeight: 20,
+      errorFontSize: 16,
+      errorLineHeight: 18,
+      errorGap: 8,
+      radius: shape.input.lg.borderRadius,
+      borderWidth: 1
+    },
+    md: {
+      box: 136,
+      padding: 12,
+      gap: 8,
+      iconSize: 24,
+      spinnerSize: "md",
+      labelFontSize: 16,
+      labelLineHeight: 20,
+      descriptionFontSize: 16,
+      descriptionLineHeight: 20,
+      errorFontSize: 14,
+      errorLineHeight: 16,
+      errorGap: 6,
+      radius: shape.input.md.borderRadius,
+      borderWidth: 1
+    },
+    sm: {
+      box: 104,
+      padding: 10,
+      gap: 6,
+      iconSize: 18,
+      spinnerSize: "sm",
+      labelFontSize: 14,
+      labelLineHeight: 18,
+      descriptionFontSize: 14,
+      descriptionLineHeight: 18,
+      errorFontSize: 12,
+      errorLineHeight: 14,
+      errorGap: 6,
+      radius: shape.input.sm.borderRadius,
+      borderWidth: 1
+    },
+    xs: {
+      box: 72,
+      padding: 8,
+      gap: 4,
+      iconSize: 18,
+      spinnerSize: "sm",
+      labelFontSize: 12,
+      labelLineHeight: 16,
+      descriptionFontSize: 12,
+      descriptionLineHeight: 16,
+      errorFontSize: 11,
+      errorLineHeight: 13,
+      errorGap: 4,
+      radius: shape.input.xs.borderRadius,
+      borderWidth: 1
+    }
+  };
+  return configs[size];
+};
+
+// src/theme/sizing/dragDropUploader.ts
+var dragDropUploader = (size) => {
+  const base = {
+    width: 360,
+    rootGap: 12,
+    radius: 4,
+    borderWidth: 1,
+    textGap: 6,
+    titleFontSize: 14,
+    titleLineHeight: 18,
+    descriptionFontSize: 14,
+    descriptionLineHeight: 18,
+    errorFontSize: 12,
+    errorLineHeight: 16,
+    listGap: 6,
+    itemGap: 8,
+    itemPaddingVertical: 8,
+    itemPaddingLeft: 8,
+    itemPaddingRight: 12,
+    itemIconWrapperSize: 32,
+    itemIconSize: 20,
+    itemTitleFontSize: 14,
+    itemTitleLineHeight: 16,
+    itemDescriptionFontSize: 14,
+    itemDescriptionLineHeight: 18,
+    removeIconSize: 18
+  };
+  const configs = {
+    xl: {
+      ...base,
+      areaHeight: 240,
+      areaPadding: 20,
+      areaGap: 16,
+      iconSize: 32
+    },
+    lg: {
+      ...base,
+      areaHeight: 200,
+      areaPadding: 20,
+      areaGap: 16,
+      iconSize: 24
+    },
+    md: {
+      ...base,
+      areaHeight: 160,
+      areaPadding: 20,
+      areaGap: 16,
+      iconSize: 24
+    },
+    sm: {
+      ...base,
+      areaHeight: 128,
+      areaPadding: 20,
+      areaGap: 16,
+      iconSize: 24
+    },
+    xs: {
+      ...base,
+      width: 320,
+      rootGap: 8,
+      areaHeight: 104,
+      areaPadding: 16,
+      areaGap: 8,
+      textGap: 4,
+      iconSize: 16,
+      titleFontSize: 12,
+      titleLineHeight: 16,
+      descriptionFontSize: 12,
+      descriptionLineHeight: 16,
+      listGap: 4,
+      itemGap: 4,
+      itemPaddingVertical: 4,
+      itemPaddingLeft: 4,
+      itemIconWrapperSize: 24,
+      itemIconSize: 16,
+      itemTitleFontSize: 12,
+      itemTitleLineHeight: 14,
+      itemDescriptionFontSize: 12,
+      itemDescriptionLineHeight: 16,
+      removeIconSize: 14
+    }
+  };
+  return configs[size];
+};
+
+// src/theme/sizing/inputPin.ts
+var inputPin = (size) => {
+  const configs = {
+    xl: {
+      size: 64,
+      gap: 10,
+      fontSize: 20,
+      radius: shape.input.xl.borderRadius,
+      borderWidth: 1,
+      fieldGap: 8
+    },
+    lg: {
+      size: 56,
+      gap: 8,
+      fontSize: 18,
+      radius: shape.input.lg.borderRadius,
+      borderWidth: 1,
+      fieldGap: 6
+    },
+    md: {
+      size: 48,
+      gap: 6,
+      fontSize: 16,
+      radius: shape.input.md.borderRadius,
+      borderWidth: 1,
+      fieldGap: 4
+    },
+    sm: {
+      size: 40,
+      gap: 4,
+      fontSize: 14,
+      radius: shape.input.sm.borderRadius,
+      borderWidth: 1,
+      fieldGap: 4
+    },
+    xs: {
+      size: 32,
+      gap: 4,
+      fontSize: 12,
+      radius: shape.input.xs.borderRadius,
+      borderWidth: 1,
+      fieldGap: 4
+    }
+  };
+  return configs[size];
+};
+
+// src/theme/sizing/textarea.ts
+var textarea = (size) => {
+  const configs = {
+    xl: {
+      height: 144,
+      padding: spacing.xl,
+      fontSize: 20,
+      iconSize: 32,
+      radius: shape.input.xl.borderRadius
+    },
+    lg: {
+      height: 128,
+      padding: spacing.lg,
+      fontSize: 18,
+      iconSize: 28,
+      radius: shape.input.lg.borderRadius
+    },
+    md: {
+      height: 112,
+      padding: spacing.md,
+      fontSize: 16,
+      iconSize: 24,
+      radius: shape.input.md.borderRadius
+    },
+    sm: {
+      height: 96,
+      padding: spacing.sm,
+      fontSize: 14,
+      iconSize: 20,
+      radius: shape.input.sm.borderRadius
+    },
+    xs: {
+      height: 80,
+      padding: spacing.xs,
+      fontSize: 12,
+      iconSize: 16,
+      radius: shape.input.xs.borderRadius
+    }
+  };
+  return configs[size];
+};
+
+// src/theme/sizing/switch.ts
+var switchSizing = (size) => {
+  const configs = {
+    xl: {
+      width: 40,
+      height: 22,
+      knobSize: 18,
+      fontSize: 20,
+      lineHeight: 22,
+      descriptionFontSize: 18,
+      descriptionLineHeight: 20,
+      labelGap: 12,
+      textGap: 4,
+      frameBorderRadius: shape.switch.xl.borderRadius,
+      knobBorderRadius: shape.knob.xl.borderRadius
+    },
+    lg: {
+      width: 36,
+      height: 20,
+      knobSize: 16,
+      fontSize: 18,
+      lineHeight: 20,
+      descriptionFontSize: 16,
+      descriptionLineHeight: 18,
+      labelGap: 10,
+      textGap: 2,
+      frameBorderRadius: shape.switch.lg.borderRadius,
+      knobBorderRadius: shape.knob.lg.borderRadius
+    },
+    md: {
+      width: 32,
+      height: 18,
+      knobSize: 14,
+      fontSize: 16,
+      lineHeight: 18,
+      descriptionFontSize: 14,
+      descriptionLineHeight: 16,
+      labelGap: 8,
+      textGap: 2,
+      frameBorderRadius: shape.switch.md.borderRadius,
+      knobBorderRadius: shape.knob.md.borderRadius
+    },
+    sm: {
+      width: 28,
+      height: 16,
+      knobSize: 12,
+      fontSize: 14,
+      lineHeight: 16,
+      descriptionFontSize: 12,
+      descriptionLineHeight: 14,
+      labelGap: 8,
+      textGap: 0,
+      frameBorderRadius: shape.switch.sm.borderRadius,
+      knobBorderRadius: shape.knob.sm.borderRadius
+    }
+  };
+  return configs[size];
+};
+
+// src/theme/sizing/avatar.ts
+var avatar = (size) => {
+  const configs = {
+    xl: {
+      size: 64,
+      fontSize: 20,
+      iconSize: 32,
+      badgeSize: 20,
+      badgeOffsetCircle: { right: -4, top: -4 },
+      badgeOffsetSquare: { right: -8, top: -8 },
+      borderRadiusSquare: shape.avatar.xl.borderRadius,
+      borderRadiusCircle: radiusScale["999"]
+    },
+    lg: {
+      size: 56,
+      fontSize: 20,
+      iconSize: 28,
+      badgeSize: 20,
+      badgeOffsetCircle: { right: -4, top: -4 },
+      badgeOffsetSquare: { right: -8, top: -8 },
+      borderRadiusSquare: shape.avatar.lg.borderRadius,
+      borderRadiusCircle: radiusScale["999"]
+    },
+    md: {
+      size: 48,
+      fontSize: 18,
+      iconSize: 24,
+      badgeSize: 20,
+      badgeOffsetCircle: { right: -5, top: -5 },
+      badgeOffsetSquare: { right: -8, top: -8 },
+      borderRadiusSquare: shape.avatar.md.borderRadius,
+      borderRadiusCircle: radiusScale["999"]
+    },
+    sm: {
+      size: 40,
+      fontSize: 16,
+      iconSize: 20,
+      badgeSize: 20,
+      badgeOffsetCircle: { right: -6, top: -6 },
+      badgeOffsetSquare: { right: -8, top: -8 },
+      borderRadiusSquare: shape.avatar.sm.borderRadius,
+      borderRadiusCircle: radiusScale["999"]
+    },
+    xs: {
+      size: 32,
+      fontSize: 12,
+      iconSize: 16,
+      badgeSize: 8,
+      badgeOffsetCircle: { right: -1, top: -1 },
+      badgeOffsetSquare: { right: -3, top: -3 },
+      borderRadiusSquare: shape.avatar.xs.borderRadius,
+      borderRadiusCircle: radiusScale["999"]
+    },
+    xxs: {
+      size: 24,
+      fontSize: 10,
+      iconSize: 12,
+      badgeSize: 6,
+      badgeOffsetCircle: { right: -1, top: -1 },
+      badgeOffsetSquare: { right: -2, top: -2 },
+      borderRadiusSquare: shape.avatar.xxs.borderRadius,
+      borderRadiusCircle: radiusScale["999"]
+    }
+  };
+  return configs[size];
+};
+
+// src/theme/sizing/tag.ts
+var tag = (size) => {
+  const configs = {
+    xl: {
+      height: 48,
+      padding: 13,
+      fontSize: 20,
+      lineHeight: 22,
+      gap: 6,
+      iconSize: 22,
+      radius: shape.tag.xl.borderRadius,
+      borderWidth: 1
+    },
+    lg: {
+      height: 40,
+      padding: 10,
+      fontSize: 18,
+      lineHeight: 20,
+      gap: 6,
+      iconSize: 20,
+      radius: shape.tag.lg.borderRadius,
+      borderWidth: 1
+    },
+    md: {
+      height: 32,
+      padding: 7,
+      fontSize: 16,
+      lineHeight: 18,
+      gap: 4,
+      iconSize: 18,
+      radius: shape.tag.md.borderRadius,
+      borderWidth: 1
+    },
+    sm: {
+      height: 24,
+      padding: 4,
+      fontSize: 14,
+      lineHeight: 16,
+      gap: 4,
+      iconSize: 16,
+      radius: shape.tag.sm.borderRadius,
+      borderWidth: 1
+    },
+    xs: {
+      height: 20,
+      padding: 3,
+      fontSize: 12,
+      lineHeight: 14,
+      gap: 4,
+      iconSize: 14,
+      radius: shape.tag.xs.borderRadius,
+      borderWidth: 1
+    }
+  };
+  return configs[size];
+};
+
+// src/theme/sizing/divider.ts
+var divider = (size) => {
+  const configs = {
+    lg: { height: 18, fontSize: 16, lineWeight: 1 },
+    md: { height: 16, fontSize: 14, lineWeight: 1 },
+    sm: { height: 14, fontSize: 12, lineWeight: 1 }
+  };
+  return configs[size];
+};
+
+// src/theme/sizing/spinner.ts
+var spinner = (size) => {
+  const configs = {
+    xl: { size: 96, strokeWidth: 10 },
+    lg: { size: 48, strokeWidth: 5 },
+    md: { size: 24, strokeWidth: 2 },
+    sm: { size: 16, strokeWidth: 2 },
+    xs: { size: 8, strokeWidth: 1 }
+  };
+  return configs[size];
+};
+
+// src/theme/sizing/tabs.ts
+var tabs = (size) => {
+  const configs = {
+    xl: {
+      height: 64,
+      fontSize: 20,
+      lineHeight: 22,
+      iconSize: 24,
+      gap: 10,
+      paddingHorizontal: 20
+    },
+    lg: {
+      height: 56,
+      fontSize: 18,
+      lineHeight: 20,
+      iconSize: 20,
+      gap: 8,
+      paddingHorizontal: 20
+    },
+    md: {
+      height: 48,
+      fontSize: 16,
+      lineHeight: 18,
+      iconSize: 18,
+      gap: 6,
+      paddingHorizontal: 20
+    },
+    sm: {
+      height: 40,
+      fontSize: 14,
+      lineHeight: 16,
+      iconSize: 16,
+      gap: 4,
+      paddingHorizontal: 20
+    }
+  };
+  return configs[size];
+};
+
+// src/theme/sizing/segmented.ts
+var segmented = (size) => {
+  const configs = {
+    xl: {
+      height: 64,
+      containerPadding: 3,
+      containerRadius: shape.segmented.xl.borderRadius,
+      itemHeight: 56,
+      itemPaddingHorizontal: 20,
+      itemPaddingVertical: 10,
+      itemRadius: shape.segmentedItem.xl.borderRadius,
+      fontSize: 20,
+      lineHeight: 22,
+      iconSize: 24,
+      gap: 8
+    },
+    lg: {
+      height: 56,
+      containerPadding: 3,
+      containerRadius: shape.segmented.lg.borderRadius,
+      itemHeight: 48,
+      itemPaddingHorizontal: 20,
+      itemPaddingVertical: 10,
+      itemRadius: shape.segmentedItem.lg.borderRadius,
+      fontSize: 18,
+      lineHeight: 20,
+      iconSize: 24,
+      gap: 8
+    },
+    md: {
+      height: 48,
+      containerPadding: 3,
+      containerRadius: shape.segmented.md.borderRadius,
+      itemHeight: 40,
+      itemPaddingHorizontal: 16,
+      itemPaddingVertical: 8,
+      itemRadius: shape.segmentedItem.md.borderRadius,
+      fontSize: 16,
+      lineHeight: 18,
+      iconSize: 24,
+      gap: 6
+    },
+    sm: {
+      height: 40,
+      containerPadding: 3,
+      containerRadius: shape.segmented.sm.borderRadius,
+      itemHeight: 32,
+      itemPaddingHorizontal: 12,
+      itemPaddingVertical: 6,
+      itemRadius: shape.segmentedItem.sm.borderRadius,
+      fontSize: 14,
+      lineHeight: 16,
+      iconSize: 20,
+      gap: 4
+    }
+  };
+  return configs[size];
+};
+
+// src/theme/sizing/tabsSegmented.ts
+var tabsSegmented = (size) => {
+  const configs = {
+    xl: {
+      height: 64,
+      containerPadding: 4,
+      itemPaddingHorizontal: 16,
+      itemPaddingVertical: 18,
+      fontSize: 20,
+      lineHeight: 22,
+      iconSize: 24,
+      gap: 8
+    },
+    lg: {
+      height: 56,
+      containerPadding: 4,
+      itemPaddingHorizontal: 16,
+      itemPaddingVertical: 14,
+      fontSize: 18,
+      lineHeight: 20,
+      iconSize: 24,
+      gap: 8
+    },
+    md: {
+      height: 48,
+      containerPadding: 4,
+      itemPaddingHorizontal: 12,
+      itemPaddingVertical: 11,
+      fontSize: 16,
+      lineHeight: 18,
+      iconSize: 24,
+      gap: 6
+    },
+    sm: {
+      height: 40,
+      containerPadding: 3,
+      itemPaddingHorizontal: 12,
+      itemPaddingVertical: 8,
+      fontSize: 14,
+      lineHeight: 16,
+      iconSize: 20,
+      gap: 6
+    }
+  };
+  return configs[size];
+};
+
+// src/theme/sizing/checkboxTagGroup.ts
+var checkboxTagGroup = (size) => {
+  const configs = {
+    xl: {
+      height: 64,
+      paddingHorizontal: 16,
+      paddingVertical: 21,
+      fontSize: 20,
+      lineHeight: 22,
+      gap: 8,
+      borderRadius: radiusScale["50"]
+    },
+    lg: {
+      height: 56,
+      paddingHorizontal: 16,
+      paddingVertical: 18,
+      fontSize: 18,
+      lineHeight: 20,
+      gap: 8,
+      borderRadius: radiusScale["50"]
+    },
+    md: {
+      height: 48,
+      paddingHorizontal: 12,
+      paddingVertical: 15,
+      fontSize: 16,
+      lineHeight: 18,
+      gap: 8,
+      borderRadius: radiusScale["25"]
+    },
+    sm: {
+      height: 40,
+      paddingHorizontal: 12,
+      paddingVertical: 11,
+      fontSize: 14,
+      lineHeight: 16,
+      gap: 4,
+      borderRadius: radiusScale["25"]
+    }
+  };
+  return configs[size];
+};
+
+// src/theme/sizing/badge.ts
+var badge = (size) => {
+  const configs = {
+    xl: {
+      size: 20,
+      fontSize: 12,
+      lineHeight: 14,
+      iconSize: 12,
+      padding: 6
+    },
+    lg: {
+      size: 16,
+      fontSize: 10,
+      lineHeight: 10,
+      iconSize: 10,
+      padding: 4
+    },
+    md: {
+      size: 12,
+      fontSize: 10,
+      lineHeight: 10,
+      iconSize: 8,
+      padding: 3
+    },
+    sm: { size: 8, fontSize: 8, lineHeight: 8, iconSize: 6, padding: 0 },
+    xs: { size: 4, fontSize: 4, lineHeight: 4, iconSize: 4, padding: 0 }
+  };
+  return configs[size];
+};
+
+// src/theme/sizing/notification.ts
+var notification = (type) => {
+  const configs = {
+    toast: {
+      width: 400,
+      paddingHorizontal: 20,
+      paddingVertical: 16,
+      gap: 16,
+      titleSize: 18,
+      messageSize: 14,
+      iconSize: 20,
+      iconWrapperSize: 32,
+      radius: shape.toast.borderRadius
+    },
+    inline: {
+      width: "100%",
+      paddingHorizontal: 20,
+      paddingVertical: 16,
+      gap: 28,
+      titleSize: 18,
+      messageSize: 14,
+      iconSize: 20,
+      iconWrapperSize: 32,
+      radius: shape.modal.borderRadius
+    }
+  };
+  return configs[type];
+};
+
+// src/theme/sizing/notificationPanel.ts
+var notificationPanel = (device = "desktop") => {
+  const desktop = {
+    minHeight: 66,
+    iconFrameWidth: 54,
+    iconSize: 24,
+    borderRadius: radiusScale["100"],
+    bodyPaddingHorizontal: 16,
+    bodyPaddingVertical: 12,
+    textGap: 2,
+    contentGap: 24,
+    buttonsGap: 8,
+    closeButtonSize: 32,
+    notificationCloseIconSize: 18,
+    titleFontSize: 16,
+    titleLineHeight: 20,
+    descriptionFontSize: 14,
+    descriptionLineHeight: 20,
+    // Announcement variant: slim, single-line banner
+    announcementPadding: 8,
+    announcementGap: 16,
+    announcementContentGap: 8,
+    announcementIconSize: 16,
+    announcementButtonsGap: 20,
+    announcementCloseIconSize: 16,
+    announcementBlurRadius: 4,
+    // Mobile notification: icon | content column | close column
+    mobileIconColumnPaddingVertical: 12,
+    mobileIconColumnPaddingLeft: 8,
+    mobileIconSize: 24,
+    mobileBodyPaddingHorizontal: 16,
+    mobileBodyPaddingVertical: 12,
+    mobileBodyContentGap: 24,
+    mobileNotificationActionButtonOffsetLeft: -4,
+    mobileCloseColumnPaddingVertical: 12,
+    mobileCloseColumnPaddingRight: 12
+  };
+  return desktop;
+};
+
+// src/theme/sizing/progress.ts
+var progress = (size) => {
+  const configs = {
+    xl: { height: 10, labelSize: 16, helperSize: 14, gap: 10 },
+    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 },
+    l: { height: 8, labelSize: 16, helperSize: 14, gap: 10 },
+    m: { height: 6, labelSize: 14, helperSize: 12, gap: 8 },
+    s: { height: 4, labelSize: 12, helperSize: 12, gap: 6 }
+  };
+  return configs[size];
+};
+
+// src/theme/sizing/supportingText.ts
+function createSupportingText(contextFonts, contextTypography) {
+  return (size) => {
+    const typographyBySize = {
+      xl: contextTypography.basic["body-lg"],
+      lg: contextTypography.basic["body-md"],
+      md: contextTypography.basic["body-sm"],
+      sm: contextTypography.basic["body-xs"],
+      xs: contextTypography.basic["body-xxs"]
+    };
+    const dimensions = {
+      xl: { gap: 6, iconSize: 18 },
+      lg: { gap: 6, iconSize: 18 },
+      md: { gap: 6, iconSize: 18 },
+      sm: { gap: 4, iconSize: 14 },
+      xs: { gap: 4, iconSize: 14 }
+    };
+    const requiredIndicatorSizeMap = {
+      xl: "lg",
+      lg: "md",
+      md: "sm",
+      sm: "xs",
+      xs: "xs"
+    };
+    const typography2 = typographyBySize[size];
+    const requiredTypography = typographyBySize[requiredIndicatorSizeMap[size]];
+    return {
+      fontSize: typography2.fontSize,
+      lineHeight: typography2.lineHeight,
+      fontWeight: typography2.fontWeight,
+      fontFamily: contextFonts.body,
+      requiredIndicator: {
+        fontSize: requiredTypography.fontSize,
+        lineHeight: requiredTypography.lineHeight
+      },
+      ...dimensions[size]
+    };
+  };
+}
+
+// src/theme/sizing/iconWrapper.ts
+var iconWrapper = (size) => {
+  const configs = {
+    xl: { size: 56, iconSize: 32, fontSize: 24 },
+    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 }
+  };
+  return configs[size];
+};
+
+// src/theme/sizing/stepper.ts
+var stepper = (size) => {
+  const configs = {
+    md: {
+      iconSize: 32,
+      titleSize: 16,
+      descSize: 14,
+      gap: 12,
+      currentTitleSize: 20,
+      currentDescSize: 14,
+      currentPadding: 24,
+      tailSize: 5
+    },
+    sm: {
+      iconSize: 24,
+      titleSize: 14,
+      descSize: 12,
+      gap: 8,
+      currentTitleSize: 16,
+      currentDescSize: 12,
+      currentPadding: 20,
+      tailSize: 3
+    }
+  };
+  return configs[size];
+};
+
+// src/theme/sizing/contextMenu.ts
+var contextMenu = (size) => {
+  const configs = {
+    xl: {
+      paddingVertical: 8,
+      paddingHorizontal: 8,
+      itemPaddingHorizontal: 16,
+      itemPaddingVertical: 18,
+      fontSize: 20,
+      lineHeight: 26,
+      descriptionFontSize: 18,
+      iconSize: 18,
+      gap: 12,
+      minWidth: 276,
+      panelWidth: 320,
+      statusDotSize: 12,
+      iconWrapperSize: 40,
+      triggerOffset: 4,
+      borderRadius: 8,
+      // Search sizing from Figma
+      searchPaddingHorizontal: 16,
+      searchPaddingVertical: 18,
+      searchGap: 18,
+      searchFontSize: 20,
+      searchLineHeight: 26,
+      searchIconSize: 18
+    },
+    lg: {
+      paddingVertical: 8,
+      paddingHorizontal: 8,
+      itemPaddingHorizontal: 14,
+      itemPaddingVertical: 14,
+      fontSize: 18,
+      lineHeight: 24,
+      descriptionFontSize: 16,
+      iconSize: 18,
+      gap: 10,
+      minWidth: 220,
+      panelWidth: 296,
+      statusDotSize: 10,
+      iconWrapperSize: 36,
+      triggerOffset: 4,
+      borderRadius: 8,
+      // Search sizing from Figma
+      searchPaddingHorizontal: 14,
+      searchPaddingVertical: 14,
+      searchGap: 14,
+      searchFontSize: 18,
+      searchLineHeight: 24,
+      searchIconSize: 18
+    },
+    md: {
+      paddingVertical: 8,
+      paddingHorizontal: 8,
+      itemPaddingHorizontal: 12,
+      itemPaddingVertical: 11,
+      fontSize: 16,
+      lineHeight: 20,
+      descriptionFontSize: 14,
+      iconSize: 18,
+      gap: 8,
+      minWidth: 172,
+      panelWidth: 272,
+      statusDotSize: 8,
+      iconWrapperSize: 32,
+      triggerOffset: 4,
+      borderRadius: 8,
+      // Search sizing from Figma
+      searchPaddingHorizontal: 12,
+      searchPaddingVertical: 11,
+      searchGap: 10,
+      searchFontSize: 16,
+      searchLineHeight: 20,
+      searchIconSize: 18
+    },
+    sm: {
+      paddingVertical: 8,
+      paddingHorizontal: 8,
+      itemPaddingHorizontal: 10,
+      itemPaddingVertical: 8,
+      fontSize: 14,
+      lineHeight: 18,
+      descriptionFontSize: 12,
+      iconSize: 18,
+      gap: 8,
+      minWidth: 132,
+      panelWidth: 248,
+      statusDotSize: 6,
+      iconWrapperSize: 24,
+      triggerOffset: 4,
+      borderRadius: 4,
+      // Search sizing from Figma
+      searchPaddingHorizontal: 10,
+      searchPaddingVertical: 7,
+      searchGap: 6,
+      searchFontSize: 14,
+      searchLineHeight: 18,
+      searchIconSize: 18
+    }
+  };
+  return configs[size];
+};
+
+// src/theme/sizing/modal.ts
+var modal = () => {
+  return {
+    borderRadius: shape.modal.borderRadius,
+    headerPadding: "24px 24px 0",
+    contentPadding: 24,
+    /** @deprecated Header buttons no longer use IconButton sizes. */
+    headerButtonSize: "xs",
+    /** @deprecated Header buttons are FlexButtons; size comes from `Modal`'s `closeButtonSize`. */
+    headerIconSize: 28,
+    /** @deprecated Header buttons are FlexButtons; padding is owned by FlexButton. */
+    headerButtonPadding: 4,
+    /** @deprecated Header buttons are FlexButtons; radius comes from FlexButton's size scale. */
+    headerButtonRadius: 4,
+    headerMinHeight: 44,
+    headerGap: 16,
+    footerGap: 16,
+    /** @deprecated Modal elevation comes from the scrim, not a drop shadow. */
+    shadow: "0px 8px 12px 6px rgba(7, 7, 8, 0.1), 0px 4px 4px rgba(7, 7, 8, 0.2)",
+    maxWidth: 680,
+    overlayColor: "rgba(0, 0, 0, 0.75)",
+    portalPadding: 20,
+    /** @deprecated Layering is contextual now; see OVERLAY_LAYER_BASE / useOverlayLayer. */
+    zIndex: 1e3
+  };
+};
+
+// src/theme/sizing/drawer.ts
+var drawer = () => ({
+  // Sizing values from Figma design: B2B Components Library node-id=8291-103845
+  widthSm: 480,
+  widthMd: 620,
+  widthLg: 1056,
+  headerHeight: 80,
+  headerPaddingX: 32,
+  headerPaddingY: 24,
+  headerGap: 24,
+  titleFontSize: 18,
+  titleLineHeight: 24,
+  contentPaddingX: 32,
+  footerPadding: 32,
+  outerPadding: 8,
+  containerRadius: 4,
+  contentRadius: 8,
+  stepperPadding: 16,
+  stepperRadius: 8,
+  stepperContentGap: 8,
+  scrimColor: "rgba(0, 0, 0, 0.75)",
+  animationDuration: 300,
+  /** @deprecated Layering is contextual now; see MODAL_LAYER_STEP / useOverlayLayer. */
+  zIndex: 1e3
+});
+
+// src/theme/sizing/sidebar.ts
+var sidebar = () => ({
+  // Sizing values from Figma design: B2B Components Library
+  widthExpanded: 280,
+  widthCollapsed: 48,
+  radius: 4,
+  itemHeight: 32,
+  iconSize: 18,
+  padding: 8,
+  sectionLabelHeight: 20,
+  // Aligns nested item text with parent label (padding 8 + icon 18 + gap 8 = 34)
+  // and centers the rail under the parent icon (padding 8 + iconSize/2 = 17).
+  nestedItemPaddingLeft: 34,
+  nestedItemRailLeft: 17,
+  chevronSize: 14,
+  externalIconSize: 18,
+  chatBadgeSize: 6,
+  itemBadgeSize: 4,
+  focusOutlineWidth: 2,
+  scrollbarWidth: 4,
+  popoverGap: 12,
+  popoverViewportPadding: 8,
+  popoverMinWidth: 180,
+  popoverMaxWidth: 240,
+  popoverShadow: "0 2px 25px rgba(7, 7, 8, 0.15)",
+  /** @deprecated Layering is contextual now; see useOverlayLayer / LAYER_OFFSET. */
+  popoverZIndex: 1e3,
+  transitionWidth: "0.25s ease-in-out",
+  transitionFadeIn: "opacity 0.15s ease-in-out 0.1s",
+  transitionFadeOut: "opacity 0.1s ease-in-out",
+  transitionItem: "background-color 0.15s ease-in-out, color 0.15s ease-in-out",
+  transitionRows: "grid-template-rows 0.25s ease-in-out"
+});
+
+// src/theme/sizing/stepperB2b.ts
+var stepperB2b = () => ({
+  // Sizing values from Figma design: B2B Components Library
+  // variant grid node-id=10999-17988, state grid node-id=10259-5501
+  chipSize: 32,
+  chipRadius: 2,
+  chipPaddingTop: 5,
+  chipPaddingBottom: 4,
+  chipPaddingX: 4,
+  chipIconSize: 16,
+  numberFontSize: 18,
+  numberLineHeight: 24,
+  titleFontSize: 16,
+  titleLineHeight: 20,
+  descriptionFontSize: 14,
+  descriptionLineHeight: 20,
+  captionFontSize: 12,
+  captionLineHeight: 16,
+  itemGap: 12,
+  contentGap: 4,
+  contentMinHeight: 32,
+  contentWidth: 128,
+  activeCardRadiusVertical: 4,
+  activeCardRadiusHorizontal: 6,
+  activeCardPaddingTop: 24,
+  activeCardPaddingX: 24,
+  activeCardPaddingYHorizontal: 12,
+  activeCardPaddingLeftHorizontal: 12,
+  activeCardGapHorizontal: 8,
+  innerConnectorLength: 48,
+  connectorSegment: 24,
+  connectorCellHeight: 24,
+  connectorCellWidth: 80,
+  surfaceRadius: 8,
+  surfacePaddingVertical: 16,
+  surfacePaddingHorizontal: 8,
+  horizontalItemGap: 16,
+  horizontalFirstItemWidth: 220,
+  horizontalItemWidth: 236,
+  horizontalConnectorSegment: 32,
+  horizontalConnectorGap: 12,
+  simpleCardPadding: 12,
+  simpleCardRadius: 4,
+  simpleCardGap: 4,
+  simpleItemGap: 4,
+  simpleHorizontalCellWidth: 56,
+  simpleHorizontalStubLength: 8
+});
+
+// src/theme/sizing/collapsibleB2b.ts
+var collapsibleB2b = () => ({
+  // Sizing values from Figma design: B2B Components Library node-id=10469-6509
+  triggerPadding: 16,
+  triggerGap: 12,
+  triggerMinHeight: 56,
+  surfaceRadius: radiusScale["50"],
+  // Must match surfaceRadius: the root clips with `overflow: hidden`, so a
+  // larger cell radius makes the trigger cell's corners show through the
+  // smaller root arc (XUITSD-55).
+  cellRadius: radiusScale["50"],
+  iconSlotSize: 32,
+  iconSlotRadius: radiusScale["50"],
+  chevronSize: 24,
+  trailingGap: 8,
+  textGap: 2,
+  titleFontSize: 16,
+  titleLineHeight: 20,
+  captionFontSize: 12,
+  captionLineHeight: 18,
+  panelPadding: 16,
+  accordionItemGap: 8
+});
+
+// src/theme/sizing/toast.ts
+var toast = () => {
+  return {
+    minHeight: 64,
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: shape.toast.borderRadius,
+    gap: 12,
+    iconSize: 24,
+    closeButtonSize: 24,
+    closeIconSize: 20,
+    fontSize: 16,
+    lineHeight: 20,
+    maxWidth: 400,
+    containerPadding: 12,
+    groupGap: 4
+  };
+};
+
+// src/theme/sizing/toggleButtonGroup.ts
+var toggleButtonGroup = (size) => {
+  const configs = {
+    xl: {
+      height: 64,
+      paddingHorizontal: 21,
+      fontSize: 20,
+      lineHeight: 22,
+      iconSize: 22,
+      gap: 6,
+      borderRadius: shape.toggleButtonGroup.xl.borderRadius,
+      itemGap: 8,
+      tooltipSize: "lg"
+    },
+    lg: {
+      height: 56,
+      paddingHorizontal: 18,
+      fontSize: 18,
+      lineHeight: 20,
+      iconSize: 20,
+      gap: 4,
+      borderRadius: shape.toggleButtonGroup.lg.borderRadius,
+      itemGap: 8,
+      tooltipSize: "md"
+    },
+    md: {
+      height: 48,
+      paddingHorizontal: 15,
+      fontSize: 16,
+      lineHeight: 18,
+      iconSize: 18,
+      gap: 4,
+      borderRadius: shape.toggleButtonGroup.md.borderRadius,
+      itemGap: 6,
+      tooltipSize: "md"
+    },
+    sm: {
+      height: 40,
+      paddingHorizontal: 12,
+      fontSize: 14,
+      lineHeight: 16,
+      iconSize: 16,
+      gap: 4,
+      borderRadius: shape.toggleButtonGroup.sm.borderRadius,
+      itemGap: 4,
+      tooltipSize: "sm"
+    },
+    xs: {
+      height: 32,
+      paddingHorizontal: 9,
+      fontSize: 12,
+      lineHeight: 14,
+      iconSize: 14,
+      gap: 4,
+      borderRadius: shape.toggleButtonGroup.xs.borderRadius,
+      itemGap: 4,
+      tooltipSize: "sm"
+    }
+  };
+  return configs[size];
+};
+
+// src/theme/sizing/table.ts
+var table = {
+  containerRadius: 8,
+  containerPaddingVertical: 0,
+  containerGap: 0,
+  captionFontSize: 14,
+  captionLineHeight: 20,
+  headerRowHeight: 56,
+  headerRowPaddingHorizontal: 24,
+  headerCellGap: 4,
+  headerCellFontSize: 14,
+  headerCellLineHeight: 18,
+  rowHeight: 56,
+  rowPaddingHorizontal: 24,
+  cellGap: 16,
+  cellFontSize: 14,
+  cellLineHeight: 18,
+  paginationGap: 16,
+  paginationPaddingHorizontal: 24
+};
+
+// src/theme/sizing/index.ts
+function createSizing(contextFonts, contextTypography) {
+  return {
+    button,
+    flexButton,
+    checkbox,
+    radio,
+    input,
+    imageUploader,
+    dragDropUploader,
+    inputPin,
+    textarea,
+    switch: switchSizing,
+    avatar,
+    tag,
+    divider,
+    spinner,
+    tabs,
+    segmented,
+    tabsSegmented,
+    checkboxTagGroup,
+    badge,
+    notification,
+    notificationPanel,
+    progress,
+    supportingText: createSupportingText(contextFonts, contextTypography),
+    iconWrapper,
+    stepper,
+    contextMenu,
+    modal,
+    drawer,
+    sidebar,
+    stepperB2b,
+    collapsibleB2b,
+    toast,
+    toggleButtonGroup,
+    table
+  };
+}
+
+// src/theme/themeConfig.ts
+var DEPRECATED_MODES = /* @__PURE__ */ new Set([
+  "xsolla-dark",
+  "xsolla-light",
+  "xsollaDark",
+  "xsollaLight"
+]);
+var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
+  if (DEPRECATED_MODES.has(mode)) {
+    console.warn(
+      `Theme mode "${mode}" is deprecated and will be removed in the next major update. Please migrate to "dark" or "light".`
+    );
+  }
+  const contextFonts = getFonts(productContext);
+  const contextTypography = getTypographyTokens(productContext);
+  return {
+    colors: colors[mode],
+    spacing,
+    shape,
+    shadow,
+    fonts: contextFonts,
+    typography: {
+      primary: contextFonts.body,
+      heading: contextFonts.heading,
+      body: contextFonts.body
+    },
+    typographyTokens: contextTypography,
+    productContext,
+    sizing: createSizing(contextFonts, contextTypography)
+  };
+};
+
+// src/provider.tsx
+import React3, { createContext, useContext, useMemo, useState } from "react";
+
 // src/fonts/FontLoader.tsx
 import { useEffect, useRef } from "react";
 
@@ -3587,1486 +5689,8 @@ var TypographyStyleLoader = () => {
 };
 TypographyStyleLoader.displayName = "TypographyStyleLoader";
 
-// src/index.tsx
+// src/provider.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-var DEPRECATED_MODES = /* @__PURE__ */ new Set([
-  "xsolla-dark",
-  "xsolla-light",
-  "xsollaDark",
-  "xsollaLight"
-]);
-var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
-  if (DEPRECATED_MODES.has(mode)) {
-    console.warn(
-      `Theme mode "${mode}" is deprecated and will be removed in the next major update. Please migrate to "dark" or "light".`
-    );
-  }
-  const contextFonts = getFonts(productContext);
-  const contextTypography = getTypographyTokens(productContext);
-  return {
-    colors: colors[mode],
-    spacing,
-    shape,
-    shadow,
-    fonts: contextFonts,
-    typography: {
-      primary: contextFonts.body,
-      heading: contextFonts.heading,
-      body: contextFonts.body
-    },
-    typographyTokens: contextTypography,
-    productContext,
-    sizing: {
-      button: (size) => {
-        const configs = {
-          xl: {
-            height: 64,
-            padding: 20,
-            fontSize: 20,
-            lineHeight: 22,
-            sublabelFontSize: 18,
-            spinnerSize: 24,
-            iconSize: 32,
-            iconContainerSize: 64,
-            borderRadius: shape.button.xl.borderRadius,
-            labelIconSize: 22,
-            labelIconGap: 6
-          },
-          lg: {
-            height: 56,
-            padding: 18,
-            fontSize: 18,
-            lineHeight: 20,
-            sublabelFontSize: 16,
-            spinnerSize: 24,
-            iconSize: 28,
-            iconContainerSize: 56,
-            borderRadius: shape.button.lg.borderRadius,
-            labelIconSize: 20,
-            labelIconGap: 4
-          },
-          md: {
-            height: 48,
-            padding: 16,
-            fontSize: 16,
-            lineHeight: 18,
-            sublabelFontSize: 14,
-            spinnerSize: 24,
-            iconSize: 24,
-            iconContainerSize: 48,
-            borderRadius: shape.button.md.borderRadius,
-            labelIconSize: 18,
-            labelIconGap: 4
-          },
-          sm: {
-            height: 40,
-            padding: 14,
-            fontSize: 14,
-            lineHeight: 16,
-            sublabelFontSize: 12,
-            spinnerSize: 24,
-            iconSize: 20,
-            iconContainerSize: 40,
-            borderRadius: shape.button.sm.borderRadius,
-            labelIconSize: 16,
-            labelIconGap: 4
-          },
-          xs: {
-            height: 32,
-            padding: 12,
-            fontSize: 12,
-            lineHeight: 14,
-            sublabelFontSize: 10,
-            spinnerSize: 16,
-            iconSize: 16,
-            iconContainerSize: 32,
-            borderRadius: shape.button.xs.borderRadius,
-            labelIconSize: 14,
-            labelIconGap: 4
-          }
-        };
-        return configs[size];
-      },
-      flexButton: (size) => {
-        const configs = {
-          xl: {
-            height: 36,
-            padding: 4,
-            fontSize: 16,
-            spinnerSize: 28,
-            iconSize: 20,
-            borderRadius: radiusScale["50"]
-          },
-          lg: {
-            height: 32,
-            padding: 4,
-            fontSize: 14,
-            spinnerSize: 24,
-            iconSize: 18,
-            borderRadius: radiusScale["50"]
-          },
-          md: {
-            height: 28,
-            padding: 2,
-            fontSize: 14,
-            spinnerSize: 24,
-            iconSize: 16,
-            borderRadius: radiusScale["25"]
-          },
-          sm: {
-            height: 22,
-            padding: 2,
-            fontSize: 12,
-            spinnerSize: 16,
-            iconSize: 14,
-            borderRadius: radiusScale["25"]
-          },
-          xs: {
-            height: 20,
-            padding: 2,
-            fontSize: 12,
-            spinnerSize: 16,
-            iconSize: 12,
-            borderRadius: radiusScale["25"]
-          }
-        };
-        return configs[size];
-      },
-      checkbox: (size) => {
-        const configs = {
-          xl: {
-            size: 22,
-            fontSize: 18,
-            descriptionFontSize: 16,
-            labelGap: 12,
-            textGap: 4,
-            borderRadius: shape.checkbox.xl.borderRadius
-          },
-          lg: {
-            size: 20,
-            fontSize: 16,
-            descriptionFontSize: 14,
-            labelGap: 10,
-            textGap: 2,
-            borderRadius: shape.checkbox.lg.borderRadius
-          },
-          md: {
-            size: 18,
-            fontSize: 16,
-            descriptionFontSize: 14,
-            labelGap: 8,
-            textGap: 2,
-            borderRadius: shape.checkbox.md.borderRadius
-          },
-          sm: {
-            size: 16,
-            fontSize: 14,
-            descriptionFontSize: 12,
-            labelGap: 8,
-            textGap: 0,
-            borderRadius: shape.checkbox.sm.borderRadius
-          }
-        };
-        return configs[size];
-      },
-      radio: (size) => {
-        const configs = {
-          xl: {
-            size: 24,
-            iconSize: 10,
-            fontSize: 20,
-            lineHeight: 22,
-            descriptionFontSize: 18,
-            descriptionLineHeight: 20,
-            labelGap: 12,
-            textGap: 4,
-            borderWidth: 1
-          },
-          lg: {
-            size: 20,
-            iconSize: 8,
-            fontSize: 18,
-            lineHeight: 20,
-            descriptionFontSize: 16,
-            descriptionLineHeight: 18,
-            labelGap: 10,
-            textGap: 2,
-            borderWidth: 1
-          },
-          md: {
-            size: 18,
-            iconSize: 8,
-            fontSize: 16,
-            lineHeight: 18,
-            descriptionFontSize: 14,
-            descriptionLineHeight: 16,
-            labelGap: 8,
-            textGap: 2,
-            borderWidth: 1
-          },
-          sm: {
-            size: 16,
-            iconSize: 6,
-            fontSize: 14,
-            lineHeight: 16,
-            descriptionFontSize: 12,
-            descriptionLineHeight: 14,
-            labelGap: 6,
-            textGap: 0,
-            borderWidth: 1
-          }
-        };
-        return configs[size];
-      },
-      input: (size) => {
-        const configs = {
-          xl: {
-            height: 64,
-            paddingVertical: 12,
-            paddingHorizontal: 12,
-            fontSize: 20,
-            iconSize: 22,
-            radius: shape.input.xl.borderRadius,
-            borderWidth: 2,
-            fieldGap: 8,
-            lineHeight: 20,
-            contentGap: 10,
-            trailingGap: 10
-          },
-          lg: {
-            height: 56,
-            paddingVertical: 14,
-            paddingHorizontal: 12,
-            fontSize: 18,
-            iconSize: 20,
-            radius: shape.input.lg.borderRadius,
-            borderWidth: 2,
-            fieldGap: 6,
-            lineHeight: 18,
-            contentGap: 8,
-            trailingGap: 10
-          },
-          md: {
-            height: 48,
-            paddingVertical: 11,
-            paddingHorizontal: 12,
-            fontSize: 16,
-            iconSize: 18,
-            radius: shape.input.md.borderRadius,
-            borderWidth: 1,
-            fieldGap: 4,
-            lineHeight: 16,
-            contentGap: 6,
-            trailingGap: 8
-          },
-          sm: {
-            height: 40,
-            paddingVertical: 7,
-            paddingHorizontal: 10,
-            fontSize: 14,
-            iconSize: 16,
-            radius: shape.input.sm.borderRadius,
-            borderWidth: 1,
-            fieldGap: 4,
-            lineHeight: 14,
-            contentGap: 4,
-            trailingGap: 8
-          },
-          xs: {
-            height: 32,
-            paddingVertical: 7,
-            paddingHorizontal: 10,
-            fontSize: 12,
-            iconSize: 14,
-            radius: shape.input.xs.borderRadius,
-            borderWidth: 1,
-            fieldGap: 4,
-            lineHeight: 10,
-            contentGap: 4,
-            trailingGap: 4
-          }
-        };
-        return configs[size];
-      },
-      imageUploader: (size) => {
-        const configs = {
-          xl: {
-            box: 200,
-            padding: 14,
-            gap: 10,
-            iconSize: 32,
-            spinnerSize: "lg",
-            labelFontSize: 20,
-            labelLineHeight: 22,
-            descriptionFontSize: 20,
-            descriptionLineHeight: 22,
-            errorFontSize: 16,
-            errorLineHeight: 18,
-            errorGap: 8,
-            radius: shape.input.xl.borderRadius,
-            borderWidth: 1
-          },
-          lg: {
-            box: 168,
-            padding: 14,
-            gap: 10,
-            iconSize: 24,
-            spinnerSize: "lg",
-            labelFontSize: 18,
-            labelLineHeight: 24,
-            descriptionFontSize: 18,
-            descriptionLineHeight: 20,
-            errorFontSize: 16,
-            errorLineHeight: 18,
-            errorGap: 8,
-            radius: shape.input.lg.borderRadius,
-            borderWidth: 1
-          },
-          md: {
-            box: 136,
-            padding: 12,
-            gap: 8,
-            iconSize: 24,
-            spinnerSize: "md",
-            labelFontSize: 16,
-            labelLineHeight: 20,
-            descriptionFontSize: 16,
-            descriptionLineHeight: 20,
-            errorFontSize: 14,
-            errorLineHeight: 16,
-            errorGap: 6,
-            radius: shape.input.md.borderRadius,
-            borderWidth: 1
-          },
-          sm: {
-            box: 104,
-            padding: 10,
-            gap: 6,
-            iconSize: 18,
-            spinnerSize: "sm",
-            labelFontSize: 14,
-            labelLineHeight: 18,
-            descriptionFontSize: 14,
-            descriptionLineHeight: 18,
-            errorFontSize: 12,
-            errorLineHeight: 14,
-            errorGap: 6,
-            radius: shape.input.sm.borderRadius,
-            borderWidth: 1
-          },
-          xs: {
-            box: 72,
-            padding: 8,
-            gap: 4,
-            iconSize: 18,
-            spinnerSize: "sm",
-            labelFontSize: 12,
-            labelLineHeight: 16,
-            descriptionFontSize: 12,
-            descriptionLineHeight: 16,
-            errorFontSize: 11,
-            errorLineHeight: 13,
-            errorGap: 4,
-            radius: shape.input.xs.borderRadius,
-            borderWidth: 1
-          }
-        };
-        return configs[size];
-      },
-      dragDropUploader: (size) => {
-        const base = {
-          width: 360,
-          rootGap: 12,
-          radius: 4,
-          borderWidth: 1,
-          textGap: 6,
-          titleFontSize: 14,
-          titleLineHeight: 18,
-          descriptionFontSize: 14,
-          descriptionLineHeight: 18,
-          errorFontSize: 12,
-          errorLineHeight: 16,
-          listGap: 6,
-          itemGap: 8,
-          itemPaddingVertical: 8,
-          itemPaddingLeft: 8,
-          itemPaddingRight: 12,
-          itemIconWrapperSize: 32,
-          itemIconSize: 20,
-          itemTitleFontSize: 14,
-          itemTitleLineHeight: 16,
-          itemDescriptionFontSize: 14,
-          itemDescriptionLineHeight: 18,
-          removeIconSize: 18
-        };
-        const configs = {
-          xl: {
-            ...base,
-            areaHeight: 240,
-            areaPadding: 20,
-            areaGap: 16,
-            iconSize: 32
-          },
-          lg: {
-            ...base,
-            areaHeight: 200,
-            areaPadding: 20,
-            areaGap: 16,
-            iconSize: 24
-          },
-          md: {
-            ...base,
-            areaHeight: 160,
-            areaPadding: 20,
-            areaGap: 16,
-            iconSize: 24
-          },
-          sm: {
-            ...base,
-            areaHeight: 128,
-            areaPadding: 20,
-            areaGap: 16,
-            iconSize: 24
-          },
-          xs: {
-            ...base,
-            width: 320,
-            rootGap: 8,
-            areaHeight: 104,
-            areaPadding: 16,
-            areaGap: 8,
-            textGap: 4,
-            iconSize: 16,
-            titleFontSize: 12,
-            titleLineHeight: 16,
-            descriptionFontSize: 12,
-            descriptionLineHeight: 16,
-            listGap: 4,
-            itemGap: 4,
-            itemPaddingVertical: 4,
-            itemPaddingLeft: 4,
-            itemIconWrapperSize: 24,
-            itemIconSize: 16,
-            itemTitleFontSize: 12,
-            itemTitleLineHeight: 14,
-            itemDescriptionFontSize: 12,
-            itemDescriptionLineHeight: 16,
-            removeIconSize: 14
-          }
-        };
-        return configs[size];
-      },
-      inputPin: (size) => {
-        const configs = {
-          xl: {
-            size: 64,
-            gap: 10,
-            fontSize: 20,
-            radius: shape.input.xl.borderRadius,
-            borderWidth: 1,
-            fieldGap: 8
-          },
-          lg: {
-            size: 56,
-            gap: 8,
-            fontSize: 18,
-            radius: shape.input.lg.borderRadius,
-            borderWidth: 1,
-            fieldGap: 6
-          },
-          md: {
-            size: 48,
-            gap: 6,
-            fontSize: 16,
-            radius: shape.input.md.borderRadius,
-            borderWidth: 1,
-            fieldGap: 4
-          },
-          sm: {
-            size: 40,
-            gap: 4,
-            fontSize: 14,
-            radius: shape.input.sm.borderRadius,
-            borderWidth: 1,
-            fieldGap: 4
-          },
-          xs: {
-            size: 32,
-            gap: 4,
-            fontSize: 12,
-            radius: shape.input.xs.borderRadius,
-            borderWidth: 1,
-            fieldGap: 4
-          }
-        };
-        return configs[size];
-      },
-      textarea: (size) => {
-        const configs = {
-          xl: {
-            height: 144,
-            padding: spacing.xl,
-            fontSize: 20,
-            iconSize: 32,
-            radius: shape.input.xl.borderRadius
-          },
-          lg: {
-            height: 128,
-            padding: spacing.lg,
-            fontSize: 18,
-            iconSize: 28,
-            radius: shape.input.lg.borderRadius
-          },
-          md: {
-            height: 112,
-            padding: spacing.md,
-            fontSize: 16,
-            iconSize: 24,
-            radius: shape.input.md.borderRadius
-          },
-          sm: {
-            height: 96,
-            padding: spacing.sm,
-            fontSize: 14,
-            iconSize: 20,
-            radius: shape.input.sm.borderRadius
-          },
-          xs: {
-            height: 80,
-            padding: spacing.xs,
-            fontSize: 12,
-            iconSize: 16,
-            radius: shape.input.xs.borderRadius
-          }
-        };
-        return configs[size];
-      },
-      switch: (size) => {
-        const configs = {
-          xl: {
-            width: 40,
-            height: 22,
-            knobSize: 18,
-            fontSize: 20,
-            lineHeight: 22,
-            descriptionFontSize: 18,
-            descriptionLineHeight: 20,
-            labelGap: 12,
-            textGap: 4,
-            frameBorderRadius: shape.switch.xl.borderRadius,
-            knobBorderRadius: shape.knob.xl.borderRadius
-          },
-          lg: {
-            width: 36,
-            height: 20,
-            knobSize: 16,
-            fontSize: 18,
-            lineHeight: 20,
-            descriptionFontSize: 16,
-            descriptionLineHeight: 18,
-            labelGap: 10,
-            textGap: 2,
-            frameBorderRadius: shape.switch.lg.borderRadius,
-            knobBorderRadius: shape.knob.lg.borderRadius
-          },
-          md: {
-            width: 32,
-            height: 18,
-            knobSize: 14,
-            fontSize: 16,
-            lineHeight: 18,
-            descriptionFontSize: 14,
-            descriptionLineHeight: 16,
-            labelGap: 8,
-            textGap: 2,
-            frameBorderRadius: shape.switch.md.borderRadius,
-            knobBorderRadius: shape.knob.md.borderRadius
-          },
-          sm: {
-            width: 28,
-            height: 16,
-            knobSize: 12,
-            fontSize: 14,
-            lineHeight: 16,
-            descriptionFontSize: 12,
-            descriptionLineHeight: 14,
-            labelGap: 8,
-            textGap: 0,
-            frameBorderRadius: shape.switch.sm.borderRadius,
-            knobBorderRadius: shape.knob.sm.borderRadius
-          }
-        };
-        return configs[size];
-      },
-      avatar: (size) => {
-        const configs = {
-          xl: {
-            size: 64,
-            fontSize: 20,
-            iconSize: 32,
-            badgeSize: 20,
-            badgeOffsetCircle: { right: -4, top: -4 },
-            badgeOffsetSquare: { right: -8, top: -8 },
-            borderRadiusSquare: shape.avatar.xl.borderRadius,
-            borderRadiusCircle: radiusScale["999"]
-          },
-          lg: {
-            size: 56,
-            fontSize: 20,
-            iconSize: 28,
-            badgeSize: 20,
-            badgeOffsetCircle: { right: -4, top: -4 },
-            badgeOffsetSquare: { right: -8, top: -8 },
-            borderRadiusSquare: shape.avatar.lg.borderRadius,
-            borderRadiusCircle: radiusScale["999"]
-          },
-          md: {
-            size: 48,
-            fontSize: 18,
-            iconSize: 24,
-            badgeSize: 20,
-            badgeOffsetCircle: { right: -5, top: -5 },
-            badgeOffsetSquare: { right: -8, top: -8 },
-            borderRadiusSquare: shape.avatar.md.borderRadius,
-            borderRadiusCircle: radiusScale["999"]
-          },
-          sm: {
-            size: 40,
-            fontSize: 16,
-            iconSize: 20,
-            badgeSize: 20,
-            badgeOffsetCircle: { right: -6, top: -6 },
-            badgeOffsetSquare: { right: -8, top: -8 },
-            borderRadiusSquare: shape.avatar.sm.borderRadius,
-            borderRadiusCircle: radiusScale["999"]
-          },
-          xs: {
-            size: 32,
-            fontSize: 12,
-            iconSize: 16,
-            badgeSize: 8,
-            badgeOffsetCircle: { right: -1, top: -1 },
-            badgeOffsetSquare: { right: -3, top: -3 },
-            borderRadiusSquare: shape.avatar.xs.borderRadius,
-            borderRadiusCircle: radiusScale["999"]
-          },
-          xxs: {
-            size: 24,
-            fontSize: 10,
-            iconSize: 12,
-            badgeSize: 6,
-            badgeOffsetCircle: { right: -1, top: -1 },
-            badgeOffsetSquare: { right: -2, top: -2 },
-            borderRadiusSquare: shape.avatar.xxs.borderRadius,
-            borderRadiusCircle: radiusScale["999"]
-          }
-        };
-        return configs[size];
-      },
-      tag: (size) => {
-        const configs = {
-          xl: {
-            height: 48,
-            padding: 13,
-            fontSize: 20,
-            lineHeight: 22,
-            gap: 6,
-            iconSize: 22,
-            radius: shape.tag.xl.borderRadius,
-            borderWidth: 1
-          },
-          lg: {
-            height: 40,
-            padding: 10,
-            fontSize: 18,
-            lineHeight: 20,
-            gap: 6,
-            iconSize: 20,
-            radius: shape.tag.lg.borderRadius,
-            borderWidth: 1
-          },
-          md: {
-            height: 32,
-            padding: 7,
-            fontSize: 16,
-            lineHeight: 18,
-            gap: 4,
-            iconSize: 18,
-            radius: shape.tag.md.borderRadius,
-            borderWidth: 1
-          },
-          sm: {
-            height: 24,
-            padding: 4,
-            fontSize: 14,
-            lineHeight: 16,
-            gap: 4,
-            iconSize: 16,
-            radius: shape.tag.sm.borderRadius,
-            borderWidth: 1
-          },
-          xs: {
-            height: 20,
-            padding: 3,
-            fontSize: 12,
-            lineHeight: 14,
-            gap: 4,
-            iconSize: 14,
-            radius: shape.tag.xs.borderRadius,
-            borderWidth: 1
-          }
-        };
-        return configs[size];
-      },
-      divider: (size) => {
-        const configs = {
-          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 },
-          lg: { size: 48, strokeWidth: 5 },
-          md: { size: 24, strokeWidth: 2 },
-          sm: { size: 16, strokeWidth: 2 },
-          xs: { size: 8, strokeWidth: 1 }
-        };
-        return configs[size];
-      },
-      tabs: (size) => {
-        const configs = {
-          xl: {
-            height: 64,
-            fontSize: 20,
-            lineHeight: 22,
-            iconSize: 24,
-            gap: 10,
-            paddingHorizontal: 20
-          },
-          lg: {
-            height: 56,
-            fontSize: 18,
-            lineHeight: 20,
-            iconSize: 20,
-            gap: 8,
-            paddingHorizontal: 20
-          },
-          md: {
-            height: 48,
-            fontSize: 16,
-            lineHeight: 18,
-            iconSize: 18,
-            gap: 6,
-            paddingHorizontal: 20
-          },
-          sm: {
-            height: 40,
-            fontSize: 14,
-            lineHeight: 16,
-            iconSize: 16,
-            gap: 4,
-            paddingHorizontal: 20
-          }
-        };
-        return configs[size];
-      },
-      segmented: (size) => {
-        const configs = {
-          xl: {
-            height: 64,
-            containerPadding: 3,
-            containerRadius: shape.segmented.xl.borderRadius,
-            itemHeight: 56,
-            itemPaddingHorizontal: 20,
-            itemPaddingVertical: 10,
-            itemRadius: shape.segmentedItem.xl.borderRadius,
-            fontSize: 20,
-            lineHeight: 22,
-            iconSize: 24,
-            gap: 8
-          },
-          lg: {
-            height: 56,
-            containerPadding: 3,
-            containerRadius: shape.segmented.lg.borderRadius,
-            itemHeight: 48,
-            itemPaddingHorizontal: 20,
-            itemPaddingVertical: 10,
-            itemRadius: shape.segmentedItem.lg.borderRadius,
-            fontSize: 18,
-            lineHeight: 20,
-            iconSize: 24,
-            gap: 8
-          },
-          md: {
-            height: 48,
-            containerPadding: 3,
-            containerRadius: shape.segmented.md.borderRadius,
-            itemHeight: 40,
-            itemPaddingHorizontal: 16,
-            itemPaddingVertical: 8,
-            itemRadius: shape.segmentedItem.md.borderRadius,
-            fontSize: 16,
-            lineHeight: 18,
-            iconSize: 24,
-            gap: 6
-          },
-          sm: {
-            height: 40,
-            containerPadding: 3,
-            containerRadius: shape.segmented.sm.borderRadius,
-            itemHeight: 32,
-            itemPaddingHorizontal: 12,
-            itemPaddingVertical: 6,
-            itemRadius: shape.segmentedItem.sm.borderRadius,
-            fontSize: 14,
-            lineHeight: 16,
-            iconSize: 20,
-            gap: 4
-          }
-        };
-        return configs[size];
-      },
-      tabsSegmented: (size) => {
-        const configs = {
-          xl: {
-            height: 64,
-            containerPadding: 4,
-            itemPaddingHorizontal: 16,
-            itemPaddingVertical: 18,
-            fontSize: 20,
-            lineHeight: 22,
-            iconSize: 24,
-            gap: 8
-          },
-          lg: {
-            height: 56,
-            containerPadding: 4,
-            itemPaddingHorizontal: 16,
-            itemPaddingVertical: 14,
-            fontSize: 18,
-            lineHeight: 20,
-            iconSize: 24,
-            gap: 8
-          },
-          md: {
-            height: 48,
-            containerPadding: 4,
-            itemPaddingHorizontal: 12,
-            itemPaddingVertical: 11,
-            fontSize: 16,
-            lineHeight: 18,
-            iconSize: 24,
-            gap: 6
-          },
-          sm: {
-            height: 40,
-            containerPadding: 3,
-            itemPaddingHorizontal: 12,
-            itemPaddingVertical: 8,
-            fontSize: 14,
-            lineHeight: 16,
-            iconSize: 20,
-            gap: 6
-          }
-        };
-        return configs[size];
-      },
-      checkboxTagGroup: (size) => {
-        const configs = {
-          xl: {
-            height: 64,
-            paddingHorizontal: 16,
-            paddingVertical: 21,
-            fontSize: 20,
-            lineHeight: 22,
-            gap: 8,
-            borderRadius: radiusScale["50"]
-          },
-          lg: {
-            height: 56,
-            paddingHorizontal: 16,
-            paddingVertical: 18,
-            fontSize: 18,
-            lineHeight: 20,
-            gap: 8,
-            borderRadius: radiusScale["50"]
-          },
-          md: {
-            height: 48,
-            paddingHorizontal: 12,
-            paddingVertical: 15,
-            fontSize: 16,
-            lineHeight: 18,
-            gap: 8,
-            borderRadius: radiusScale["25"]
-          },
-          sm: {
-            height: 40,
-            paddingHorizontal: 12,
-            paddingVertical: 11,
-            fontSize: 14,
-            lineHeight: 16,
-            gap: 4,
-            borderRadius: radiusScale["25"]
-          }
-        };
-        return configs[size];
-      },
-      badge: (size) => {
-        const configs = {
-          xl: {
-            size: 20,
-            fontSize: 12,
-            lineHeight: 14,
-            iconSize: 12,
-            padding: 6
-          },
-          lg: {
-            size: 16,
-            fontSize: 10,
-            lineHeight: 10,
-            iconSize: 10,
-            padding: 4
-          },
-          md: {
-            size: 12,
-            fontSize: 10,
-            lineHeight: 10,
-            iconSize: 8,
-            padding: 3
-          },
-          sm: { size: 8, fontSize: 8, lineHeight: 8, iconSize: 6, padding: 0 },
-          xs: { size: 4, fontSize: 4, lineHeight: 4, iconSize: 4, padding: 0 }
-        };
-        return configs[size];
-      },
-      notification: (type) => {
-        const configs = {
-          toast: {
-            width: 400,
-            paddingHorizontal: 20,
-            paddingVertical: 16,
-            gap: 16,
-            titleSize: 18,
-            messageSize: 14,
-            iconSize: 20,
-            iconWrapperSize: 32,
-            radius: shape.toast.borderRadius
-          },
-          inline: {
-            width: "100%",
-            paddingHorizontal: 20,
-            paddingVertical: 16,
-            gap: 28,
-            titleSize: 18,
-            messageSize: 14,
-            iconSize: 20,
-            iconWrapperSize: 32,
-            radius: shape.modal.borderRadius
-          }
-        };
-        return configs[type];
-      },
-      notificationPanel: (device = "desktop") => {
-        const desktop = {
-          minHeight: 66,
-          iconFrameWidth: 54,
-          iconSize: 24,
-          borderRadius: radiusScale["100"],
-          bodyPaddingHorizontal: 16,
-          bodyPaddingVertical: 12,
-          textGap: 2,
-          contentGap: 24,
-          buttonsGap: 8,
-          closeButtonSize: 32,
-          notificationCloseIconSize: 18,
-          titleFontSize: 16,
-          titleLineHeight: 20,
-          descriptionFontSize: 14,
-          descriptionLineHeight: 20,
-          // Announcement variant: slim, single-line banner
-          announcementPadding: 8,
-          announcementGap: 16,
-          announcementContentGap: 8,
-          announcementIconSize: 16,
-          announcementButtonsGap: 20,
-          announcementCloseIconSize: 16,
-          announcementBlurRadius: 4,
-          // Mobile notification: icon | content column | close column
-          mobileIconColumnPaddingVertical: 12,
-          mobileIconColumnPaddingLeft: 8,
-          mobileIconSize: 24,
-          mobileBodyPaddingHorizontal: 16,
-          mobileBodyPaddingVertical: 12,
-          mobileBodyContentGap: 24,
-          mobileNotificationActionButtonOffsetLeft: -4,
-          mobileCloseColumnPaddingVertical: 12,
-          mobileCloseColumnPaddingRight: 12
-        };
-        return desktop;
-      },
-      progress: (size) => {
-        const configs = {
-          xl: { height: 10, labelSize: 16, helperSize: 14, gap: 10 },
-          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 },
-          l: { height: 8, labelSize: 16, helperSize: 14, gap: 10 },
-          m: { height: 6, labelSize: 14, helperSize: 12, gap: 8 },
-          s: { height: 4, labelSize: 12, helperSize: 12, gap: 6 }
-        };
-        return configs[size];
-      },
-      /**
-       * SupportingText sizing.
-       *
-       * Typography is bound to the `Theme / Typography` body tokens rather than
-       * hardcoded px values, so a change to the Figma-synced scale propagates
-       * automatically. Each size maps to the body token whose font-size and
-       * compact line-height match the corresponding Figma size variant:
-       *
-       * | size | typography token | font-size / line-height | icon | gap |
-       * | ---- | ---------------- | ----------------------- | ---- | --- |
-       * | xl   | `body-lg`        | 18 / 24                 | 18   | 6   |
-       * | lg   | `body-md`        | 16 / 20                 | 18   | 6   |
-       * | md   | `body-sm`        | 14 / 18                 | 18   | 6   |
-       * | sm   | `body-xs`        | 12 / 16                 | 14   | 4   |
-       * | xs   | `body-xxs`       | 10 / 14                 | 14   | 4   |
-       *
-       * `requiredIndicator` is the required-field asterisk that sits beside a
-       * label. Figma renders it one step down the same scale, so it aliases the
-       * next-smaller size's token instead of carrying its own table.
-       *
-       * `gap` is the spacing between the text and its trailing icon (Figma
-       * `Label & icon` frame item-spacing).
-       *
-       * @see https://www.figma.com/design/m0qqLlCvR29fvqj0EzlLAU/Xsolla-UI-Toolkit?node-id=5680-33147
-       */
-      supportingText: (size) => {
-        const typographyBySize = {
-          xl: contextTypography.basic["body-lg"],
-          lg: contextTypography.basic["body-md"],
-          md: contextTypography.basic["body-sm"],
-          sm: contextTypography.basic["body-xs"],
-          xs: contextTypography.basic["body-xxs"]
-        };
-        const dimensions = {
-          xl: { gap: 6, iconSize: 18 },
-          lg: { gap: 6, iconSize: 18 },
-          md: { gap: 6, iconSize: 18 },
-          sm: { gap: 4, iconSize: 14 },
-          xs: { gap: 4, iconSize: 14 }
-        };
-        const requiredIndicatorSizeMap = {
-          xl: "lg",
-          lg: "md",
-          md: "sm",
-          sm: "xs",
-          xs: "xs"
-        };
-        const typography2 = typographyBySize[size];
-        const requiredTypography = typographyBySize[requiredIndicatorSizeMap[size]];
-        return {
-          fontSize: typography2.fontSize,
-          lineHeight: typography2.lineHeight,
-          fontWeight: typography2.fontWeight,
-          fontFamily: contextFonts.body,
-          requiredIndicator: {
-            fontSize: requiredTypography.fontSize,
-            lineHeight: requiredTypography.lineHeight
-          },
-          ...dimensions[size]
-        };
-      },
-      iconWrapper: (size) => {
-        const configs = {
-          xl: { size: 56, iconSize: 32, fontSize: 24 },
-          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 }
-        };
-        return configs[size];
-      },
-      stepper: (size) => {
-        const configs = {
-          md: {
-            iconSize: 32,
-            titleSize: 16,
-            descSize: 14,
-            gap: 12,
-            currentTitleSize: 20,
-            currentDescSize: 14,
-            currentPadding: 24,
-            tailSize: 5
-          },
-          sm: {
-            iconSize: 24,
-            titleSize: 14,
-            descSize: 12,
-            gap: 8,
-            currentTitleSize: 16,
-            currentDescSize: 12,
-            currentPadding: 20,
-            tailSize: 3
-          }
-        };
-        return configs[size];
-      },
-      contextMenu: (size) => {
-        const configs = {
-          xl: {
-            paddingVertical: 8,
-            paddingHorizontal: 8,
-            itemPaddingHorizontal: 16,
-            itemPaddingVertical: 18,
-            fontSize: 20,
-            lineHeight: 26,
-            descriptionFontSize: 18,
-            iconSize: 18,
-            gap: 12,
-            minWidth: 276,
-            panelWidth: 320,
-            statusDotSize: 12,
-            iconWrapperSize: 40,
-            triggerOffset: 4,
-            borderRadius: 8,
-            // Search sizing from Figma
-            searchPaddingHorizontal: 16,
-            searchPaddingVertical: 18,
-            searchGap: 18,
-            searchFontSize: 20,
-            searchLineHeight: 26,
-            searchIconSize: 18
-          },
-          lg: {
-            paddingVertical: 8,
-            paddingHorizontal: 8,
-            itemPaddingHorizontal: 14,
-            itemPaddingVertical: 14,
-            fontSize: 18,
-            lineHeight: 24,
-            descriptionFontSize: 16,
-            iconSize: 18,
-            gap: 10,
-            minWidth: 220,
-            panelWidth: 296,
-            statusDotSize: 10,
-            iconWrapperSize: 36,
-            triggerOffset: 4,
-            borderRadius: 8,
-            // Search sizing from Figma
-            searchPaddingHorizontal: 14,
-            searchPaddingVertical: 14,
-            searchGap: 14,
-            searchFontSize: 18,
-            searchLineHeight: 24,
-            searchIconSize: 18
-          },
-          md: {
-            paddingVertical: 8,
-            paddingHorizontal: 8,
-            itemPaddingHorizontal: 12,
-            itemPaddingVertical: 11,
-            fontSize: 16,
-            lineHeight: 20,
-            descriptionFontSize: 14,
-            iconSize: 18,
-            gap: 8,
-            minWidth: 172,
-            panelWidth: 272,
-            statusDotSize: 8,
-            iconWrapperSize: 32,
-            triggerOffset: 4,
-            borderRadius: 8,
-            // Search sizing from Figma
-            searchPaddingHorizontal: 12,
-            searchPaddingVertical: 11,
-            searchGap: 10,
-            searchFontSize: 16,
-            searchLineHeight: 20,
-            searchIconSize: 18
-          },
-          sm: {
-            paddingVertical: 8,
-            paddingHorizontal: 8,
-            itemPaddingHorizontal: 10,
-            itemPaddingVertical: 8,
-            fontSize: 14,
-            lineHeight: 18,
-            descriptionFontSize: 12,
-            iconSize: 18,
-            gap: 8,
-            minWidth: 132,
-            panelWidth: 248,
-            statusDotSize: 6,
-            iconWrapperSize: 24,
-            triggerOffset: 4,
-            borderRadius: 4,
-            // Search sizing from Figma
-            searchPaddingHorizontal: 10,
-            searchPaddingVertical: 7,
-            searchGap: 6,
-            searchFontSize: 14,
-            searchLineHeight: 18,
-            searchIconSize: 18
-          }
-        };
-        return configs[size];
-      },
-      modal: () => {
-        return {
-          borderRadius: shape.modal.borderRadius,
-          headerPadding: "24px 24px 0",
-          contentPadding: 24,
-          /** @deprecated Header buttons no longer use IconButton sizes. */
-          headerButtonSize: "xs",
-          /** @deprecated Header buttons are FlexButtons; size comes from `Modal`'s `closeButtonSize`. */
-          headerIconSize: 28,
-          /** @deprecated Header buttons are FlexButtons; padding is owned by FlexButton. */
-          headerButtonPadding: 4,
-          /** @deprecated Header buttons are FlexButtons; radius comes from FlexButton's size scale. */
-          headerButtonRadius: 4,
-          headerMinHeight: 44,
-          headerGap: 16,
-          footerGap: 16,
-          /** @deprecated Modal elevation comes from the scrim, not a drop shadow. */
-          shadow: "0px 8px 12px 6px rgba(7, 7, 8, 0.1), 0px 4px 4px rgba(7, 7, 8, 0.2)",
-          maxWidth: 680,
-          overlayColor: "rgba(0, 0, 0, 0.75)",
-          portalPadding: 20,
-          /** @deprecated Layering is contextual now; see OVERLAY_LAYER_BASE / useOverlayLayer. */
-          zIndex: 1e3
-        };
-      },
-      drawer: () => ({
-        // Sizing values from Figma design: B2B Components Library node-id=8291-103845
-        widthSm: 480,
-        widthMd: 620,
-        widthLg: 1056,
-        headerHeight: 80,
-        headerPaddingX: 32,
-        headerPaddingY: 24,
-        headerGap: 24,
-        titleFontSize: 18,
-        titleLineHeight: 24,
-        contentPaddingX: 32,
-        footerPadding: 32,
-        outerPadding: 8,
-        containerRadius: 4,
-        contentRadius: 8,
-        stepperPadding: 16,
-        stepperRadius: 8,
-        stepperContentGap: 8,
-        scrimColor: "rgba(0, 0, 0, 0.75)",
-        animationDuration: 300,
-        /** @deprecated Layering is contextual now; see MODAL_LAYER_STEP / useOverlayLayer. */
-        zIndex: 1e3
-      }),
-      sidebar: () => ({
-        // Sizing values from Figma design: B2B Components Library
-        widthExpanded: 280,
-        widthCollapsed: 48,
-        radius: 4,
-        itemHeight: 32,
-        iconSize: 18,
-        padding: 8,
-        sectionLabelHeight: 20,
-        // Aligns nested item text with parent label (padding 8 + icon 18 + gap 8 = 34)
-        // and centers the rail under the parent icon (padding 8 + iconSize/2 = 17).
-        nestedItemPaddingLeft: 34,
-        nestedItemRailLeft: 17,
-        chevronSize: 14,
-        externalIconSize: 18,
-        chatBadgeSize: 6,
-        itemBadgeSize: 4,
-        focusOutlineWidth: 2,
-        scrollbarWidth: 4,
-        popoverGap: 12,
-        popoverViewportPadding: 8,
-        popoverMinWidth: 180,
-        popoverMaxWidth: 240,
-        popoverShadow: "0 2px 25px rgba(7, 7, 8, 0.15)",
-        /** @deprecated Layering is contextual now; see useOverlayLayer / LAYER_OFFSET. */
-        popoverZIndex: 1e3,
-        transitionWidth: "0.25s ease-in-out",
-        transitionFadeIn: "opacity 0.15s ease-in-out 0.1s",
-        transitionFadeOut: "opacity 0.1s ease-in-out",
-        transitionItem: "background-color 0.15s ease-in-out, color 0.15s ease-in-out",
-        transitionRows: "grid-template-rows 0.25s ease-in-out"
-      }),
-      stepperB2b: () => ({
-        // Sizing values from Figma design: B2B Components Library
-        // variant grid node-id=10999-17988, state grid node-id=10259-5501
-        chipSize: 32,
-        chipRadius: 2,
-        chipPaddingTop: 5,
-        chipPaddingBottom: 4,
-        chipPaddingX: 4,
-        chipIconSize: 16,
-        numberFontSize: 18,
-        numberLineHeight: 24,
-        titleFontSize: 16,
-        titleLineHeight: 20,
-        descriptionFontSize: 14,
-        descriptionLineHeight: 20,
-        captionFontSize: 12,
-        captionLineHeight: 16,
-        itemGap: 12,
-        contentGap: 4,
-        contentMinHeight: 32,
-        contentWidth: 128,
-        activeCardRadiusVertical: 4,
-        activeCardRadiusHorizontal: 6,
-        activeCardPaddingTop: 24,
-        activeCardPaddingX: 24,
-        activeCardPaddingYHorizontal: 12,
-        activeCardPaddingLeftHorizontal: 12,
-        activeCardGapHorizontal: 8,
-        innerConnectorLength: 48,
-        connectorSegment: 24,
-        connectorCellHeight: 24,
-        connectorCellWidth: 80,
-        surfaceRadius: 8,
-        surfacePaddingVertical: 16,
-        surfacePaddingHorizontal: 8,
-        horizontalItemGap: 16,
-        horizontalFirstItemWidth: 220,
-        horizontalItemWidth: 236,
-        horizontalConnectorSegment: 32,
-        horizontalConnectorGap: 12,
-        simpleCardPadding: 12,
-        simpleCardRadius: 4,
-        simpleCardGap: 4,
-        simpleItemGap: 4,
-        simpleHorizontalCellWidth: 56,
-        simpleHorizontalStubLength: 8
-      }),
-      collapsibleB2b: () => ({
-        // Sizing values from Figma design: B2B Components Library node-id=10469-6509
-        triggerPadding: 16,
-        triggerGap: 12,
-        triggerMinHeight: 56,
-        surfaceRadius: radiusScale["50"],
-        cellRadius: radiusScale["100"],
-        iconSlotSize: 32,
-        iconSlotRadius: radiusScale["50"],
-        chevronSize: 24,
-        trailingGap: 8,
-        textGap: 2,
-        titleFontSize: 16,
-        titleLineHeight: 20,
-        captionFontSize: 12,
-        captionLineHeight: 18,
-        panelPadding: 16,
-        accordionItemGap: 8
-      }),
-      toast: () => {
-        return {
-          minHeight: 64,
-          paddingHorizontal: 12,
-          paddingVertical: 8,
-          borderRadius: shape.toast.borderRadius,
-          gap: 12,
-          iconSize: 24,
-          closeButtonSize: 24,
-          closeIconSize: 20,
-          fontSize: 16,
-          lineHeight: 20,
-          maxWidth: 400,
-          containerPadding: 12,
-          groupGap: 4
-        };
-      },
-      toggleButtonGroup: (size) => {
-        const configs = {
-          xl: {
-            height: 64,
-            paddingHorizontal: 21,
-            fontSize: 20,
-            lineHeight: 22,
-            iconSize: 22,
-            gap: 6,
-            borderRadius: shape.toggleButtonGroup.xl.borderRadius,
-            itemGap: 8,
-            tooltipSize: "lg"
-          },
-          lg: {
-            height: 56,
-            paddingHorizontal: 18,
-            fontSize: 18,
-            lineHeight: 20,
-            iconSize: 20,
-            gap: 4,
-            borderRadius: shape.toggleButtonGroup.lg.borderRadius,
-            itemGap: 8,
-            tooltipSize: "md"
-          },
-          md: {
-            height: 48,
-            paddingHorizontal: 15,
-            fontSize: 16,
-            lineHeight: 18,
-            iconSize: 18,
-            gap: 4,
-            borderRadius: shape.toggleButtonGroup.md.borderRadius,
-            itemGap: 6,
-            tooltipSize: "md"
-          },
-          sm: {
-            height: 40,
-            paddingHorizontal: 12,
-            fontSize: 14,
-            lineHeight: 16,
-            iconSize: 16,
-            gap: 4,
-            borderRadius: shape.toggleButtonGroup.sm.borderRadius,
-            itemGap: 4,
-            tooltipSize: "sm"
-          },
-          xs: {
-            height: 32,
-            paddingHorizontal: 9,
-            fontSize: 12,
-            lineHeight: 14,
-            iconSize: 14,
-            gap: 4,
-            borderRadius: shape.toggleButtonGroup.xs.borderRadius,
-            itemGap: 4,
-            tooltipSize: "sm"
-          }
-        };
-        return configs[size];
-      },
-      table: {
-        containerRadius: 8,
-        containerPaddingVertical: 0,
-        containerGap: 0,
-        captionFontSize: 14,
-        captionLineHeight: 20,
-        headerRowHeight: 56,
-        headerRowPaddingHorizontal: 24,
-        headerCellGap: 4,
-        headerCellFontSize: 14,
-        headerCellLineHeight: 18,
-        rowHeight: 56,
-        rowPaddingHorizontal: 24,
-        cellGap: 16,
-        cellFontSize: 14,
-        cellLineHeight: 18,
-        paginationGap: 16,
-        paginationPaddingHorizontal: 24
-      }
-    }
-  };
-};
 var DesignSystemContext = createContext(
   void 0
 );
@@ -5146,6 +5770,9 @@ var useIdFallback = () => {
 var useId = hasReactUseId ? React3.useId : useIdFallback;
 var ModalIdContext = createContext(null);
 var useModalId = () => useContext(ModalIdContext);
+
+// src/overlay.ts
+import { createContext as createContext2, useContext as useContext2 } from "react";
 var OVERLAY_LAYER_BASE = 1e3;
 var LAYER_OFFSET = {
   /** Trigger-anchored value lists: dropdown, select, multi-select, autocomplete. */
@@ -5157,12 +5784,12 @@ var LAYER_OFFSET = {
 };
 var MODAL_LAYER_STEP = 1e3;
 var TOAST_LAYER = 9999;
-var OverlayLayerContext = createContext(OVERLAY_LAYER_BASE);
+var OverlayLayerContext = createContext2(OVERLAY_LAYER_BASE);
 var OverlayLayerProvider = OverlayLayerContext.Provider;
-var useOverlayLayer = () => useContext(OverlayLayerContext);
-var ModalStackContext = createContext(0);
+var useOverlayLayer = () => useContext2(OverlayLayerContext);
+var ModalStackContext = createContext2(0);
 var ModalStackProvider = ModalStackContext.Provider;
-var useModalStackDepth = () => useContext(ModalStackContext);
+var useModalStackDepth = () => useContext2(ModalStackContext);
 export {
   DISPLAY_SCALE_STEPS,
   FontLoader,
@@ -5201,6 +5828,7 @@ export {
   shadow,
   shape,
   spacing,
+  spacingScale,
   stroke,
   themeConfig,
   typography,