@xsolla/xui-core 0.184.0 → 0.185.1

package/index.d.ts

@@ -4,7 +4,7 @@ import React from 'react';
  * Typography token definitions for different product contexts.
  *
  * ProductContext determines typography scales — font sizes, line heights,
- * and font weights vary between B2B, B2C, Pay Station, and Presentation.
+ * and font weights vary between B2B, B2C, and Corpsite.
  *
  * Values are synced from the Figma "Theme / Typography" variable collection.
  * Each semantic token (e.g., heading/h1/font-size) aliases into the responsive
@@ -16,7 +16,7 @@ import React from 'react';
  *   - Body default/accent use "compact" line-heights (moderate)
  *   - Body paragraph uses "text" line-heights (generous, for reading)
  */
-type ProductContext = "b2c" | "b2b";
+type ProductContext = "b2c" | "b2b" | "corpsite";
 interface TypographyVariant {
     fontSize: number;
     lineHeight: string;
@@ -2896,172 +2896,984 @@ declare const colors: {
             };
         };
     };
-};
-type ThemeColors = typeof pentagramDark;
-
-declare const spacing: {
-    xs: number;
-    s: number;
-    m: number;
-    l: number;
-    xl: number;
-};
-declare const radius: {
-    button: number;
-    card: number;
-    contextMenu: number;
-    input: number;
-    tagSmall: number;
-    tagMedium: number;
-    tagLarge: number;
-    avatarSmall: number;
-    avatarLarge: number;
-    avatarCircle: number;
-};
-/** Primitive radius scale. Mirrors Figma "Scale / radius/*" variables. */
-declare const radiusScale: {
-    readonly "25": 2;
-    readonly "50": 4;
-    readonly "75": 6;
-    readonly "100": 8;
-    readonly "150": 12;
-    readonly "200": 16;
-    readonly "250": 20;
-    readonly "300": 24;
-    readonly "350": 28;
-    readonly "400": 32;
-    readonly "999": 999;
-};
-/** Primitive border-width scale. Mirrors Figma "Scale / stroke/*" variables. */
-declare const stroke: {
-    readonly "1": 1;
-    readonly "2": 2;
-    readonly "3": 3;
-};
-
-/**
- * Semantic shape tokens. Mirrors Figma "Theme / Shape" variable collection,
- * Xsolla Default mode. Values alias into the radiusScale and stroke primitives.
- */
-declare const shape: {
-    readonly button: {
-        readonly xl: {
-            readonly borderRadius: 8;
-            readonly borderWidth: 1;
-        };
-        readonly lg: {
-            readonly borderRadius: 8;
-            readonly borderWidth: 1;
-        };
-        readonly md: {
-            readonly borderRadius: 6;
-            readonly borderWidth: 1;
-        };
-        readonly sm: {
-            readonly borderRadius: 4;
-            readonly borderWidth: 1;
-        };
-        readonly xs: {
-            readonly borderRadius: 4;
-            readonly borderWidth: 1;
-        };
-    };
-    readonly checkbox: {
-        readonly xl: {
-            readonly borderRadius: 4;
-            readonly borderWidth: 1;
-        };
-        readonly lg: {
-            readonly borderRadius: 4;
-            readonly borderWidth: 1;
-        };
-        readonly md: {
-            readonly borderRadius: 4;
-            readonly borderWidth: 1;
-        };
-        readonly sm: {
-            readonly borderRadius: 4;
-            readonly borderWidth: 1;
-        };
-    };
-    readonly input: {
-        readonly xl: {
-            readonly borderRadius: 8;
-            readonly borderWidth: 1;
-        };
-        readonly lg: {
-            readonly borderRadius: 8;
-            readonly borderWidth: 1;
-        };
-        readonly md: {
-            readonly borderRadius: 8;
-            readonly borderWidth: 1;
-        };
-        readonly sm: {
-            readonly borderRadius: 4;
-            readonly borderWidth: 1;
-        };
-        readonly xs: {
-            readonly borderRadius: 4;
-            readonly borderWidth: 1;
-        };
-    };
-    readonly segmented: {
-        readonly xl: {
-            readonly borderRadius: 8;
-            readonly borderWidth: 1;
-        };
-        readonly lg: {
-            readonly borderRadius: 8;
-            readonly borderWidth: 1;
-        };
-        readonly md: {
-            readonly borderRadius: 8;
-            readonly borderWidth: 1;
-        };
-        readonly sm: {
-            readonly borderRadius: 4;
-            readonly borderWidth: 1;
-        };
-    };
-    readonly segmentedItem: {
-        readonly xl: {
-            readonly borderRadius: 4;
-            readonly borderWidth: 1;
-        };
-        readonly lg: {
-            readonly borderRadius: 4;
-            readonly borderWidth: 1;
-        };
-        readonly md: {
-            readonly borderRadius: 4;
-            readonly borderWidth: 1;
-        };
-        readonly sm: {
-            readonly borderRadius: 2;
-            readonly borderWidth: 1;
+    "corpsite-dark": {
+        background: {
+            primary: string;
+            secondary: string;
+            brand: {
+                primary: string;
+                secondary: string;
+            };
+            brandExtra: {
+                primary: string;
+                secondary: string;
+            };
+            inverse: string;
+            static: {
+                dark: string;
+                light: string;
+            };
+            success: {
+                primary: string;
+                secondary: string;
+            };
+            warning: {
+                primary: string;
+                secondary: string;
+            };
+            alert: {
+                primary: string;
+                secondary: string;
+            };
+            neutral: {
+                primary: string;
+                secondary: string;
+            };
         };
-    };
-    readonly switch: {
-        readonly xl: {
-            readonly borderRadius: 4;
-            readonly borderWidth: 1;
+        content: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            brand: {
+                primary: string;
+                secondary: string;
+            };
+            brandExtra: {
+                primary: string;
+                secondary: string;
+            };
+            inverse: string;
+            static: {
+                light: string;
+                dark: string;
+            };
+            success: {
+                primary: string;
+                secondary: string;
+            };
+            warning: {
+                primary: string;
+                secondary: string;
+            };
+            alert: {
+                primary: string;
+                secondary: string;
+            };
+            neutral: {
+                primary: string;
+                secondary: string;
+            };
+            on: {
+                brand: string;
+                brandExtra: string;
+                success: string;
+                warning: string;
+                alert: string;
+                neutral: string;
+            };
         };
-        readonly lg: {
-            readonly borderRadius: 4;
-            readonly borderWidth: 1;
+        border: {
+            primary: string;
+            secondary: string;
+            brand: string;
+            brandExtra: string;
+            inverse: string;
+            success: string;
+            warning: string;
+            alert: string;
+            neutral: string;
         };
-        readonly md: {
-            readonly borderRadius: 4;
-            readonly borderWidth: 1;
+        overlay: {
+            mono: string;
+            brand: string;
+            brandExtra: string;
+            success: string;
+            warning: string;
+            alert: string;
+            neutral: string;
+            monoHover: string;
         };
-        readonly sm: {
-            readonly borderRadius: 4;
-            readonly borderWidth: 1;
+        layer: {
+            scrim: string;
+            float: string;
         };
-    };
-    readonly knob: {
-        readonly xl: {
+        control: {
+            brand: {
+                primary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    bgDisable: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                    borderDisable: string;
+                };
+                secondary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                tertiary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                text: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    disable: string;
+                    ghost: string;
+                };
+                ghost: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+            };
+            mono: {
+                primary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                secondary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                tertiary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                text: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    ghost: string;
+                };
+                ghost: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+            };
+            brandExtra: {
+                primary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                secondary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                tertiary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                text: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    ghost: string;
+                };
+                ghost: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+            };
+            alert: {
+                bg: string;
+                border: string;
+                primary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                secondary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                tertiary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                text: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    ghost: string;
+                };
+                ghost: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+            };
+            input: {
+                bg: string;
+                bgHover: string;
+                bgDisable: string;
+                border: string;
+                borderHover: string;
+                borderDisable: string;
+                text: string;
+                placeholder: string;
+                textDisable: string;
+            };
+            focus: {
+                bg: string;
+                border: string;
+            };
+            check: {
+                bg: string;
+                bgHover: string;
+                bgDisable: string;
+                border: string;
+                borderHover: string;
+                borderDisable: string;
+                icon: string;
+            };
+            faint: {
+                bg: string;
+                bgHover: string;
+                border: string;
+                borderHover: string;
+            };
+            slider: {
+                bg: string;
+                bgHover: string;
+                bgDisable: string;
+            };
+            switch: {
+                bg: string;
+                bgHover: string;
+                bgDisable: string;
+                border: string;
+                borderHover: string;
+                borderDisable: string;
+            };
+            knob: {
+                bg: string;
+                bgHover: string;
+                bgActive: string;
+                bgActiveHover: string;
+                bgInactive: string;
+                bgInactiveHover: string;
+                bgDisable: string;
+            };
+            text: {
+                primary: string;
+                disable: string;
+            };
+            link: {
+                primary: string;
+                primaryHover: string;
+                secondary: string;
+                secondaryHover: string;
+            };
+            segmented: {
+                bg: string;
+                bgHover: string;
+                bgActive: string;
+                border: string;
+                borderHover: string;
+                borderActive: string;
+                text: string;
+                textDisable: string;
+            };
+            tagLabel: {
+                product: {
+                    bg: string;
+                    text: string;
+                    textCompact: string;
+                };
+                rarity: {
+                    bg: string;
+                    text: string;
+                };
+                name: {
+                    bg: string;
+                    text: string;
+                };
+                account: {
+                    bg: string;
+                    text: string;
+                    textCompact: string;
+                };
+                id: {
+                    bg: string;
+                    bgSeries: string;
+                    textSeries: string;
+                    textNumber: string;
+                    textCompact: string;
+                };
+                subentity: {
+                    bg: string;
+                    text: string;
+                };
+                item: {
+                    bg: string;
+                    text: string;
+                    textCompact: string;
+                };
+            };
+            toast: {
+                bg: string;
+            };
+            toggleButton: {
+                bg: string;
+                bgHover: string;
+                bgActive: string;
+                bgDisable: string;
+                border: string;
+                borderHover: string;
+                borderActive: string;
+                borderDisable: string;
+                text: string;
+                textActive: string;
+                textDisable: string;
+            };
+            appButton: {
+                bg: string;
+                bgHover: string;
+                bgPress: string;
+                border: string;
+                borderHover: string;
+                borderPress: string;
+                text: string;
+                textDisable: string;
+            };
+        };
+    };
+    "corpsite-light": {
+        background: {
+            primary: string;
+            secondary: string;
+            brand: {
+                primary: string;
+                secondary: string;
+            };
+            brandExtra: {
+                primary: string;
+                secondary: string;
+            };
+            inverse: string;
+            static: {
+                dark: string;
+                light: string;
+            };
+            success: {
+                primary: string;
+                secondary: string;
+            };
+            warning: {
+                primary: string;
+                secondary: string;
+            };
+            alert: {
+                primary: string;
+                secondary: string;
+            };
+            neutral: {
+                primary: string;
+                secondary: string;
+            };
+        };
+        content: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            brand: {
+                primary: string;
+                secondary: string;
+            };
+            brandExtra: {
+                primary: string;
+                secondary: string;
+            };
+            inverse: string;
+            static: {
+                light: string;
+                dark: string;
+            };
+            success: {
+                primary: string;
+                secondary: string;
+            };
+            warning: {
+                primary: string;
+                secondary: string;
+            };
+            alert: {
+                primary: string;
+                secondary: string;
+            };
+            neutral: {
+                primary: string;
+                secondary: string;
+            };
+            on: {
+                brand: string;
+                brandExtra: string;
+                success: string;
+                warning: string;
+                alert: string;
+                neutral: string;
+            };
+        };
+        border: {
+            primary: string;
+            secondary: string;
+            brand: string;
+            brandExtra: string;
+            inverse: string;
+            success: string;
+            warning: string;
+            alert: string;
+            neutral: string;
+        };
+        overlay: {
+            mono: string;
+            brand: string;
+            brandExtra: string;
+            success: string;
+            warning: string;
+            alert: string;
+            neutral: string;
+            monoHover: string;
+        };
+        layer: {
+            scrim: string;
+            float: string;
+        };
+        control: {
+            brand: {
+                primary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    bgDisable: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                    borderDisable: string;
+                };
+                secondary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                tertiary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                text: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    disable: string;
+                    ghost: string;
+                };
+                ghost: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+            };
+            mono: {
+                primary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                secondary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                tertiary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                text: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    ghost: string;
+                };
+                ghost: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+            };
+            brandExtra: {
+                primary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                secondary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                tertiary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                text: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    ghost: string;
+                };
+                ghost: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+            };
+            alert: {
+                bg: string;
+                border: string;
+                primary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                secondary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                tertiary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                text: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    ghost: string;
+                };
+                ghost: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+            };
+            input: {
+                bg: string;
+                bgHover: string;
+                bgDisable: string;
+                border: string;
+                borderHover: string;
+                borderDisable: string;
+                text: string;
+                placeholder: string;
+                textDisable: string;
+            };
+            focus: {
+                bg: string;
+                border: string;
+            };
+            check: {
+                bg: string;
+                bgHover: string;
+                bgDisable: string;
+                border: string;
+                borderHover: string;
+                borderDisable: string;
+                icon: string;
+            };
+            faint: {
+                bg: string;
+                bgHover: string;
+                border: string;
+                borderHover: string;
+            };
+            slider: {
+                bg: string;
+                bgHover: string;
+                bgDisable: string;
+            };
+            switch: {
+                bg: string;
+                bgHover: string;
+                bgDisable: string;
+                border: string;
+                borderHover: string;
+                borderDisable: string;
+            };
+            knob: {
+                bg: string;
+                bgHover: string;
+                bgActive: string;
+                bgActiveHover: string;
+                bgInactive: string;
+                bgInactiveHover: string;
+                bgDisable: string;
+            };
+            text: {
+                primary: string;
+                disable: string;
+            };
+            link: {
+                primary: string;
+                primaryHover: string;
+                secondary: string;
+                secondaryHover: string;
+            };
+            segmented: {
+                bg: string;
+                bgHover: string;
+                bgActive: string;
+                border: string;
+                borderHover: string;
+                borderActive: string;
+                text: string;
+                textDisable: string;
+            };
+            tagLabel: {
+                product: {
+                    bg: string;
+                    text: string;
+                    textCompact: string;
+                };
+                rarity: {
+                    bg: string;
+                    text: string;
+                };
+                name: {
+                    bg: string;
+                    text: string;
+                };
+                account: {
+                    bg: string;
+                    text: string;
+                    textCompact: string;
+                };
+                id: {
+                    bg: string;
+                    bgSeries: string;
+                    textSeries: string;
+                    textNumber: string;
+                    textCompact: string;
+                };
+                subentity: {
+                    bg: string;
+                    text: string;
+                };
+                item: {
+                    bg: string;
+                    text: string;
+                    textCompact: string;
+                };
+            };
+            toast: {
+                bg: string;
+            };
+            toggleButton: {
+                bg: string;
+                bgHover: string;
+                bgActive: string;
+                bgDisable: string;
+                border: string;
+                borderHover: string;
+                borderActive: string;
+                borderDisable: string;
+                text: string;
+                textActive: string;
+                textDisable: string;
+            };
+            appButton: {
+                bg: string;
+                bgHover: string;
+                bgPress: string;
+                border: string;
+                borderHover: string;
+                borderPress: string;
+                text: string;
+                textDisable: string;
+            };
+        };
+    };
+};
+type ThemeColors = typeof pentagramDark;
+
+declare const spacing: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    /** @deprecated Use `sm` instead (same 8px). Kept for backwards compatibility. */
+    s: number;
+    /** @deprecated Use `md` instead (same 16px). Kept for backwards compatibility. */
+    m: number;
+    /** @deprecated Use `lg` instead (same 24px). Kept for backwards compatibility. */
+    l: number;
+};
+declare const radius: {
+    button: number;
+    card: number;
+    contextMenu: number;
+    input: number;
+    tagSmall: number;
+    tagMedium: number;
+    tagLarge: number;
+    avatarSmall: number;
+    avatarLarge: number;
+    avatarCircle: number;
+};
+/** Primitive radius scale. Mirrors Figma "Scale / radius/*" variables. */
+declare const radiusScale: {
+    readonly "25": 2;
+    readonly "50": 4;
+    readonly "75": 6;
+    readonly "100": 8;
+    readonly "150": 12;
+    readonly "200": 16;
+    readonly "250": 20;
+    readonly "300": 24;
+    readonly "350": 28;
+    readonly "400": 32;
+    readonly "999": 999;
+};
+/** Primitive border-width scale. Mirrors Figma "Scale / stroke/*" variables. */
+declare const stroke: {
+    readonly "1": 1;
+    readonly "2": 2;
+    readonly "3": 3;
+};
+
+/**
+ * Semantic shape tokens. Mirrors Figma "Theme / Shape" variable collection,
+ * Xsolla Default mode. Values alias into the radiusScale and stroke primitives.
+ */
+declare const shape: {
+    readonly button: {
+        readonly xl: {
+            readonly borderRadius: 8;
+            readonly borderWidth: 1;
+        };
+        readonly lg: {
+            readonly borderRadius: 8;
+            readonly borderWidth: 1;
+        };
+        readonly md: {
+            readonly borderRadius: 6;
+            readonly borderWidth: 1;
+        };
+        readonly sm: {
+            readonly borderRadius: 4;
+            readonly borderWidth: 1;
+        };
+        readonly xs: {
+            readonly borderRadius: 4;
+            readonly borderWidth: 1;
+        };
+    };
+    readonly checkbox: {
+        readonly xl: {
+            readonly borderRadius: 4;
+            readonly borderWidth: 1;
+        };
+        readonly lg: {
+            readonly borderRadius: 4;
+            readonly borderWidth: 1;
+        };
+        readonly md: {
+            readonly borderRadius: 4;
+            readonly borderWidth: 1;
+        };
+        readonly sm: {
+            readonly borderRadius: 4;
+            readonly borderWidth: 1;
+        };
+    };
+    readonly input: {
+        readonly xl: {
+            readonly borderRadius: 8;
+            readonly borderWidth: 1;
+        };
+        readonly lg: {
+            readonly borderRadius: 8;
+            readonly borderWidth: 1;
+        };
+        readonly md: {
+            readonly borderRadius: 6;
+            readonly borderWidth: 1;
+        };
+        readonly sm: {
+            readonly borderRadius: 4;
+            readonly borderWidth: 1;
+        };
+        readonly xs: {
+            readonly borderRadius: 4;
+            readonly borderWidth: 1;
+        };
+    };
+    readonly segmented: {
+        readonly xl: {
+            readonly borderRadius: 8;
+            readonly borderWidth: 1;
+        };
+        readonly lg: {
+            readonly borderRadius: 8;
+            readonly borderWidth: 1;
+        };
+        readonly md: {
+            readonly borderRadius: 8;
+            readonly borderWidth: 1;
+        };
+        readonly sm: {
+            readonly borderRadius: 4;
+            readonly borderWidth: 1;
+        };
+    };
+    readonly segmentedItem: {
+        readonly xl: {
+            readonly borderRadius: 4;
+            readonly borderWidth: 1;
+        };
+        readonly lg: {
+            readonly borderRadius: 4;
+            readonly borderWidth: 1;
+        };
+        readonly md: {
+            readonly borderRadius: 4;
+            readonly borderWidth: 1;
+        };
+        readonly sm: {
+            readonly borderRadius: 2;
+            readonly borderWidth: 1;
+        };
+    };
+    readonly switch: {
+        readonly xl: {
+            readonly borderRadius: 4;
+            readonly borderWidth: 1;
+        };
+        readonly lg: {
+            readonly borderRadius: 4;
+            readonly borderWidth: 1;
+        };
+        readonly md: {
+            readonly borderRadius: 4;
+            readonly borderWidth: 1;
+        };
+        readonly sm: {
+            readonly borderRadius: 4;
+            readonly borderWidth: 1;
+        };
+    };
+    readonly knob: {
+        readonly xl: {
             readonly borderRadius: 2;
         };
         readonly lg: {
@@ -3127,293 +3939,1120 @@ declare const shape: {
             readonly borderRadius: 4;
         };
     };
-    readonly radio: {
+    readonly radio: {
+        readonly xl: {
+            readonly borderRadius: 999;
+            readonly borderWidth: 1;
+        };
+        readonly lg: {
+            readonly borderRadius: 999;
+            readonly borderWidth: 1;
+        };
+        readonly md: {
+            readonly borderRadius: 999;
+            readonly borderWidth: 1;
+        };
+        readonly sm: {
+            readonly borderRadius: 999;
+            readonly borderWidth: 1;
+        };
+    };
+    readonly contextMenu: {
+        readonly xl: {
+            readonly borderRadius: 8;
+        };
+        readonly lg: {
+            readonly borderRadius: 8;
+        };
+        readonly md: {
+            readonly borderRadius: 8;
+        };
+        readonly sm: {
+            readonly borderRadius: 4;
+        };
+        readonly xs: {
+            readonly borderRadius: 4;
+        };
+    };
+    readonly avatar: {
         readonly xl: {
-            readonly borderRadius: 999;
+            readonly borderRadius: 8;
             readonly borderWidth: 1;
         };
         readonly lg: {
-            readonly borderRadius: 999;
+            readonly borderRadius: 6;
             readonly borderWidth: 1;
         };
         readonly md: {
-            readonly borderRadius: 999;
+            readonly borderRadius: 6;
             readonly borderWidth: 1;
         };
         readonly sm: {
-            readonly borderRadius: 999;
+            readonly borderRadius: 4;
+            readonly borderWidth: 1;
+        };
+        readonly xs: {
+            readonly borderRadius: 4;
+            readonly borderWidth: 1;
+        };
+        readonly xxs: {
+            readonly borderRadius: 2;
             readonly borderWidth: 1;
         };
     };
-    readonly contextMenu: {
+    readonly cell: {
+        readonly borderRadius: 8;
+        readonly borderWidth: 1;
+    };
+    readonly modal: {
+        readonly borderRadius: 8;
+    };
+    readonly toast: {
+        readonly borderRadius: 4;
+    };
+    readonly toggleButtonGroup: {
         readonly xl: {
             readonly borderRadius: 8;
+            readonly borderWidth: 1;
         };
         readonly lg: {
             readonly borderRadius: 8;
+            readonly borderWidth: 1;
         };
         readonly md: {
-            readonly borderRadius: 8;
+            readonly borderRadius: 6;
+            readonly borderWidth: 1;
         };
         readonly sm: {
             readonly borderRadius: 4;
+            readonly borderWidth: 1;
         };
         readonly xs: {
             readonly borderRadius: 4;
+            readonly borderWidth: 1;
+        };
+    };
+    readonly tagLabel: {
+        readonly borderRadius: 0;
+    };
+};
+
+declare const shadow: {
+    active: string;
+    surface: string;
+    surfaceHover: string;
+    popover: string;
+    modal: string;
+    contextMenu: string;
+};
+
+/**
+ * Font family definitions per ProductContext.
+ *
+ * Figma "Font" variable collection defines 3 roles:
+ *   - display: heading/display font (Pilat or Pilat Wide)
+ *   - compact: body/UI font (Aktiv Grotesk or Montserrat)
+ *   - text: paragraph/reading font (same families as compact)
+ *
+ * The `heading` and `body` exports map to these Figma roles:
+ *   heading → display
+ *   body → compact (also used for text contexts)
+ */
+
+/** Static fonts object (defaults to B2B for backwards compatibility) */
+declare const fonts: {
+    heading: string;
+    body: string;
+    /** Paragraph/reading font — Figma `text` role */
+    text: string;
+    /** @deprecated Use `heading` or `body` instead */
+    primary: string;
+};
+/** Returns context-aware font families */
+declare const getFonts: (productContext?: ProductContext) => {
+    heading: string;
+    body: string;
+    /** Paragraph/reading font — Figma `text` role (differs from `body` for corpsite) */
+    text: string;
+    /** @deprecated Use `heading` or `body` instead */
+    primary: string;
+};
+declare const typography: {
+    button: {
+        fontFamily: string;
+        fontWeight: string;
+    };
+};
+
+/**
+ * Responsive breakpoint definitions for the design system.
+ *
+ * Derived from the Figma "Responsive / Typography" variable collection,
+ * which has three modes: Common, Mobile, Desktop.
+ * Common and Desktop share identical values; Mobile scales down.
+ *
+ * Usage (CSS):
+ *   @media (max-width: 767px) { ... }   // Mobile
+ *   @media (min-width: 768px) { ... }    // Desktop
+ *
+ * Usage (JS):
+ *   import { breakpoints } from '@xsolla/xui-core';
+ *   const isMobile = window.innerWidth < breakpoints.desktop;
+ */
+declare const breakpoints: {
+    /** Mobile: 0 – 767px */
+    readonly mobile: 0;
+    /** Desktop: 768px and above */
+    readonly desktop: 768;
+};
+type BreakpointKey = keyof typeof breakpoints;
+/**
+ * Max-width media query value for targeting mobile devices.
+ * Use in CSS: `@media (max-width: ${MOBILE_MAX_WIDTH}px)`
+ */
+declare const MOBILE_MAX_WIDTH: number;
+
+/**
+ * Responsive typography scale tokens sourced from the Figma
+ * "Responsive / Typography" variable collection.
+ *
+ * Three device modes: Common (default), Mobile, Desktop.
+ * Common and Desktop have identical values. Mobile scales down.
+ *
+ * These are the raw building blocks. Semantic tokens in typography.ts
+ * alias into this scale (e.g., B2B heading/h1/font-size → font-size/650).
+ *
+ * On web, these are injected as CSS custom properties (--xui-font-size-*, --xui-lh-*)
+ * with @media overrides for mobile. Components consume a single CSS variable
+ * and scale automatically by viewport.
+ *
+ * @see {@link ../styles/typography-css.ts} for CSS generation
+ * @see {@link ./breakpoints.ts} for breakpoint definitions
+ */
+interface ResponsiveValue {
+    common: number;
+    mobile: number;
+}
+type ScaleStep = "75" | "100" | "125" | "150" | "175" | "200" | "250" | "300" | "350" | "450" | "550" | "650" | "750";
+declare const SCALE_STEPS: ScaleStep[];
+/**
+ * The display/font-size axis extends the base scale with three larger steps
+ * (800/850/900) used by Corpsite display typography. Only `fontSize` and
+ * `lineHeightDisplay` define these — `lineHeightCompact`/`lineHeightText` stop
+ * at 750, mirroring the Figma "Responsive / Typography" collection.
+ */
+type DisplayScaleStep = ScaleStep | "800" | "850" | "900";
+declare const DISPLAY_SCALE_STEPS: DisplayScaleStep[];
+/** Font-size scale: 16 steps from 10px to 96px */
+declare const fontSize: Record<DisplayScaleStep, ResponsiveValue>;
+/** Line-height/display: tight line-heights for headings (roughly 1:1 with font-size) */
+declare const lineHeightDisplay: Record<DisplayScaleStep, ResponsiveValue>;
+/** Line-height/compact: moderate line-heights for UI body text */
+declare const lineHeightCompact: Record<ScaleStep, ResponsiveValue>;
+/** Line-height/text: generous line-heights for paragraphs and reading text */
+declare const lineHeightText: Record<ScaleStep, ResponsiveValue>;
+declare const responsiveTypographyScale: {
+    readonly fontSize: Record<DisplayScaleStep, ResponsiveValue>;
+    readonly lineHeightDisplay: Record<DisplayScaleStep, ResponsiveValue>;
+    readonly lineHeightCompact: Record<ScaleStep, ResponsiveValue>;
+    readonly lineHeightText: Record<ScaleStep, ResponsiveValue>;
+};
+
+declare const isWeb: boolean;
+declare const isNative: boolean;
+declare const isIOS: boolean;
+declare const isAndroid: boolean;
+
+/**
+ * React component that loads the toolkit's font-face declarations.
+ * Drop-in for any framework — works in Next.js, Vite, CRA, etc.
+ *
+ * Renders nothing to the DOM. Injects a single `<style>` tag into `<head>` on mount.
+ */
+declare const FontLoader: React.FC;
+
+/**
+ * @font-face CSS for all toolkit fonts, loaded from Xsolla CDN.
+ *
+ * Pilat Wide — B2C heading/display font, weights 600, 700, 800.
+ * Pilat — B2B heading/display font, weights 300, 400, 500, 600, 700, 800.
+ * Aktiv Grotesk — body font for all contexts, weights 400, 500, 600.
+ *   Four editions loaded via unicode-range: Latin, CN/SG, JP, KR.
+ *   The browser downloads only the subset needed for characters on the page.
+ *
+ * Weight coverage notes (intentional gaps — licensing constraint, Xsolla
+ * does not hold rights to the omitted cuts):
+ *   - Pilat Wide 400 — not licensed. Components using weight 400 on Pilat
+ *     Wide will render at 600 via browser substitution (heavier).
+ *   - Aktiv Grotesk 300 — not licensed. (No component currently requests it.)
+ *   - Aktiv Grotesk 700 — not licensed. Substitutes to 600 (lighter).
+ *   - CJK editions (cn-sg, jp, kr) — 400/500/600 only; no 700/800.
+ *     Heavy weights on CJK text fall back to the Latin file (no glyphs)
+ *     and then to the system fallback stack.
+ *
+ * Do not add @font-face entries for the omitted weights without first
+ * confirming the licence has been extended.
+ */
+declare const fontFacesCSS = "\n  /* \u2500\u2500 Pilat Wide (B2C headings) \u2500\u2500 */\n\n  @font-face {\n    font-family: 'Pilat Wide';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/pilat-wide/pilat-wide-600.woff2') format('woff2');\n    font-weight: 600;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Pilat Wide';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/pilat-wide/pilat-wide-700.woff2') format('woff2');\n    font-weight: 700;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Pilat Wide';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/pilat-wide/pilat-wide-800.woff2') format('woff2');\n    font-weight: 800;\n    font-style: normal;\n    font-display: swap;\n  }\n\n  /* \u2500\u2500 Pilat (B2B headings) \u2500\u2500 */\n\n  @font-face {\n    font-family: 'Pilat';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/pilat/pilat-300.woff2') format('woff2');\n    font-weight: 300;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Pilat';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/pilat/pilat-400.woff2') format('woff2');\n    font-weight: 400;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Pilat';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/pilat/pilat-500.woff2') format('woff2');\n    font-weight: 500;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Pilat';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/pilat/pilat-600.woff2') format('woff2');\n    font-weight: 600;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Pilat';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/pilat/pilat-700.woff2') format('woff2');\n    font-weight: 700;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Pilat';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/pilat/pilat-800.woff2') format('woff2');\n    font-weight: 800;\n    font-style: normal;\n    font-display: swap;\n  }\n\n  /* \u2500\u2500 Aktiv Grotesk (body) \u2014 Latin \u2500\u2500 */\n\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/aktiv-grotesk/latin/aktiv-grotesk-latin-400.woff2') format('woff2');\n    font-weight: 400;\n    font-style: normal;\n    font-display: swap;\n    unicode-range: U+0000-024F, U+0250-02AF, U+0300-036F, U+0370-03FF, U+0400-04FF, U+2000-206F, U+20A0-20CF, U+2100-214F;\n  }\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/aktiv-grotesk/latin/aktiv-grotesk-latin-500.woff2') format('woff2');\n    font-weight: 500;\n    font-style: normal;\n    font-display: swap;\n    unicode-range: U+0000-024F, U+0250-02AF, U+0300-036F, U+0370-03FF, U+0400-04FF, U+2000-206F, U+20A0-20CF, U+2100-214F;\n  }\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/aktiv-grotesk/latin/aktiv-grotesk-latin-600.woff2') format('woff2');\n    font-weight: 600;\n    font-style: normal;\n    font-display: swap;\n    unicode-range: U+0000-024F, U+0250-02AF, U+0300-036F, U+0370-03FF, U+0400-04FF, U+2000-206F, U+20A0-20CF, U+2100-214F;\n  }\n\n  /* \u2500\u2500 Aktiv Grotesk (body) \u2014 Chinese / SG \u2500\u2500 */\n\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/aktiv-grotesk/cn-sg/aktiv-grotesk-cn-sg-400.woff2') format('woff2');\n    font-weight: 400;\n    font-style: normal;\n    font-display: swap;\n    unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF;\n  }\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/aktiv-grotesk/cn-sg/aktiv-grotesk-cn-sg-500.woff2') format('woff2');\n    font-weight: 500;\n    font-style: normal;\n    font-display: swap;\n    unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF;\n  }\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/aktiv-grotesk/cn-sg/aktiv-grotesk-cn-sg-600.woff2') format('woff2');\n    font-weight: 600;\n    font-style: normal;\n    font-display: swap;\n    unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF;\n  }\n\n  /* \u2500\u2500 Aktiv Grotesk (body) \u2014 Japanese \u2500\u2500 */\n\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/aktiv-grotesk/jp/aktiv-grotesk-jp-400.woff2') format('woff2');\n    font-weight: 400;\n    font-style: normal;\n    font-display: swap;\n    unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+31F0-31FF, U+FF65-FF9F;\n  }\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/aktiv-grotesk/jp/aktiv-grotesk-jp-500.woff2') format('woff2');\n    font-weight: 500;\n    font-style: normal;\n    font-display: swap;\n    unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+31F0-31FF, U+FF65-FF9F;\n  }\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/aktiv-grotesk/jp/aktiv-grotesk-jp-600.woff2') format('woff2');\n    font-weight: 600;\n    font-style: normal;\n    font-display: swap;\n    unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+31F0-31FF, U+FF65-FF9F;\n  }\n\n  /* \u2500\u2500 Aktiv Grotesk (body) \u2014 Korean \u2500\u2500 */\n\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/aktiv-grotesk/kr/aktiv-grotesk-kr-400.woff2') format('woff2');\n    font-weight: 400;\n    font-style: normal;\n    font-display: swap;\n    unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF, U+FFA0-FFDC;\n  }\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/aktiv-grotesk/kr/aktiv-grotesk-kr-500.woff2') format('woff2');\n    font-weight: 500;\n    font-style: normal;\n    font-display: swap;\n    unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF, U+FFA0-FFDC;\n  }\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/aktiv-grotesk/kr/aktiv-grotesk-kr-600.woff2') format('woff2');\n    font-weight: 600;\n    font-style: normal;\n    font-display: swap;\n    unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF, U+FFA0-FFDC;\n  }\n";
+
+declare const TypographyStyleLoader: React.FC;
+
+/**
+ * Generates the CSS custom properties string for responsive typography.
+ *
+ * Produces two blocks:
+ * 1. :root — Desktop/Common values (the default)
+ * 2. @media (max-width: 767px) :root — Mobile overrides
+ *
+ * CSS variable naming convention (mirrors Figma variable names):
+ *   --xui-font-size-{step}       → e.g. --xui-font-size-150: 16px
+ *   --xui-lh-display-{step}      → e.g. --xui-lh-display-150: 16px
+ *   --xui-lh-compact-{step}      → e.g. --xui-lh-compact-150: 20px
+ *   --xui-lh-text-{step}         → e.g. --xui-lh-text-150: 22px
+ *
+ * Consumers can use these in CSS or styled-components:
+ *   font-size: var(--xui-font-size-350);
+ *   line-height: var(--xui-lh-compact-350);
+ *
+ * @see {@link ../tokens/responsive-typography.ts} for raw token data
+ * @see {@link ../tokens/breakpoints.ts} for breakpoint definitions
+ */
+/**
+ * Returns the full CSS string for responsive typography custom properties.
+ * The result is memoized — safe to call multiple times.
+ */
+declare function generateTypographyCSS(): string;
+/**
+ * Returns the CSS variable name for a given font-size scale step.
+ * Useful when the Typography component needs to reference a CSS variable.
+ *
+ * @example cssVar.fontSize("350") → "var(--xui-font-size-350)"
+ */
+declare const cssVar: {
+    readonly fontSize: (step: string) => string;
+    readonly lhDisplay: (step: string) => string;
+    readonly lhCompact: (step: string) => string;
+    readonly lhText: (step: string) => string;
+};
+
+type ThemeMode = "dark" | "light" | "pentagram-dark" | "pentagram-light" | "ltg-dark" | "blueprints" | "corpsite-dark" | "corpsite-light";
+/**
+ * Shared component size scale used across the toolkit (button, avatar, input,
+ * select, tag, badge, …). Import this instead of re-declaring the union inline.
+ *
+ * ```tsx
+ * import type { ComponentSize } from "@xsolla/xui-core";
+ *
+ * interface MyProps { size?: ComponentSize; }
+ * ```
+ */
+type ComponentSize = "xs" | "sm" | "md" | "lg" | "xl";
+declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) => {
+    colors: {
+        background: {
+            primary: string;
+            secondary: string;
+            brand: {
+                primary: string;
+                secondary: string;
+            };
+            brandExtra: {
+                primary: string;
+                secondary: string;
+            };
+            inverse: string;
+            static: {
+                dark: string;
+                light: string;
+            };
+            success: {
+                primary: string;
+                secondary: string;
+            };
+            warning: {
+                primary: string;
+                secondary: string;
+            };
+            alert: {
+                primary: string;
+                secondary: string;
+            };
+            neutral: {
+                primary: string;
+                secondary: string;
+            };
         };
-    };
-    readonly avatar: {
-        readonly xl: {
-            readonly borderRadius: 8;
-            readonly borderWidth: 2;
+        content: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            brand: {
+                primary: string;
+                secondary: string;
+            };
+            brandExtra: {
+                primary: string;
+                secondary: string;
+            };
+            inverse: string;
+            static: {
+                light: string;
+                dark: string;
+            };
+            success: {
+                primary: string;
+                secondary: string;
+            };
+            warning: {
+                primary: string;
+                secondary: string;
+            };
+            alert: {
+                primary: string;
+                secondary: string;
+            };
+            neutral: {
+                primary: string;
+                secondary: string;
+            };
+            on: {
+                brand: string;
+                brandExtra: string;
+                success: string;
+                warning: string;
+                alert: string;
+                neutral: string;
+            };
         };
-        readonly lg: {
-            readonly borderRadius: 6;
-            readonly borderWidth: 2;
+        border: {
+            primary: string;
+            secondary: string;
+            brand: string;
+            brandExtra: string;
+            inverse: string;
+            success: string;
+            warning: string;
+            alert: string;
+            neutral: string;
         };
-        readonly md: {
-            readonly borderRadius: 6;
-            readonly borderWidth: 2;
+        overlay: {
+            mono: string;
+            brand: string;
+            brandExtra: string;
+            success: string;
+            warning: string;
+            alert: string;
+            neutral: string;
+            monoHover: string;
         };
-        readonly sm: {
-            readonly borderRadius: 4;
-            readonly borderWidth: 2;
+        layer: {
+            scrim: string;
+            float: string;
         };
-        readonly xs: {
-            readonly borderRadius: 4;
-            readonly borderWidth: 2;
+        control: {
+            brand: {
+                primary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    bgDisable: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                    borderDisable: string;
+                };
+                secondary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                tertiary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                text: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    disable: string;
+                    ghost: string;
+                };
+                ghost: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+            };
+            mono: {
+                primary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                secondary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                tertiary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                text: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    ghost: string;
+                };
+                ghost: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+            };
+            brandExtra: {
+                primary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                secondary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                tertiary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                text: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    ghost: string;
+                };
+                ghost: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+            };
+            alert: {
+                bg: string;
+                border: string;
+                primary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                secondary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                tertiary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                text: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    ghost: string;
+                };
+                ghost: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+            };
+            input: {
+                bg: string;
+                bgHover: string;
+                bgDisable: string;
+                border: string;
+                borderHover: string;
+                borderDisable: string;
+                text: string;
+                placeholder: string;
+                textDisable: string;
+            };
+            focus: {
+                bg: string;
+                border: string;
+            };
+            check: {
+                bg: string;
+                bgHover: string;
+                bgDisable: string;
+                border: string;
+                borderHover: string;
+                borderDisable: string;
+                icon: string;
+            };
+            faint: {
+                bg: string;
+                bgHover: string;
+                border: string;
+                borderHover: string;
+            };
+            slider: {
+                bg: string;
+                bgHover: string;
+                bgDisable: string;
+            };
+            switch: {
+                bg: string;
+                bgHover: string;
+                bgDisable: string;
+                border: string;
+                borderHover: string;
+                borderDisable: string;
+            };
+            knob: {
+                bg: string;
+                bgHover: string;
+                bgActive: string;
+                bgActiveHover: string;
+                bgInactive: string;
+                bgInactiveHover: string;
+                bgDisable: string;
+            };
+            text: {
+                primary: string;
+                disable: string;
+            };
+            link: {
+                primary: string;
+                primaryHover: string;
+                secondary: string;
+                secondaryHover: string;
+            };
+            segmented: {
+                bg: string;
+                bgHover: string;
+                bgActive: string;
+                border: string;
+                borderHover: string;
+                borderActive: string;
+                text: string;
+                textDisable: string;
+            };
+            tagLabel: {
+                product: {
+                    bg: string;
+                    text: string;
+                    textCompact: string;
+                };
+                rarity: {
+                    bg: string;
+                    text: string;
+                };
+                name: {
+                    bg: string;
+                    text: string;
+                };
+                account: {
+                    bg: string;
+                    text: string;
+                    textCompact: string;
+                };
+                id: {
+                    bg: string;
+                    bgSeries: string;
+                    textSeries: string;
+                    textNumber: string;
+                    textCompact: string;
+                };
+                subentity: {
+                    bg: string;
+                    text: string;
+                };
+                item: {
+                    bg: string;
+                    text: string;
+                    textCompact: string;
+                };
+            };
+            toast: {
+                bg: string;
+            };
+            toggleButton: {
+                bg: string;
+                bgHover: string;
+                bgActive: string;
+                bgDisable: string;
+                border: string;
+                borderHover: string;
+                borderActive: string;
+                borderDisable: string;
+                text: string;
+                textActive: string;
+                textDisable: string;
+            };
+            appButton: {
+                bg: string;
+                bgHover: string;
+                bgPress: string;
+                border: string;
+                borderHover: string;
+                borderPress: string;
+                text: string;
+                textDisable: string;
+            };
         };
-        readonly xxs: {
-            readonly borderRadius: 2;
-            readonly borderWidth: 2;
+    } | {
+        background: {
+            primary: string;
+            secondary: string;
+            brand: {
+                primary: string;
+                secondary: string;
+            };
+            brandExtra: {
+                primary: string;
+                secondary: string;
+            };
+            inverse: string;
+            static: {
+                dark: string;
+                light: string;
+            };
+            success: {
+                primary: string;
+                secondary: string;
+            };
+            warning: {
+                primary: string;
+                secondary: string;
+            };
+            alert: {
+                primary: string;
+                secondary: string;
+            };
+            neutral: {
+                primary: string;
+                secondary: string;
+            };
         };
-    };
-    readonly modal: {
-        readonly borderRadius: 8;
-    };
-    readonly toast: {
-        readonly borderRadius: 4;
-    };
-    readonly toggleButtonGroup: {
-        readonly xl: {
-            readonly borderRadius: 8;
-            readonly borderWidth: 1;
+        content: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            brand: {
+                primary: string;
+                secondary: string;
+            };
+            brandExtra: {
+                primary: string;
+                secondary: string;
+            };
+            inverse: string;
+            static: {
+                light: string;
+                dark: string;
+            };
+            success: {
+                primary: string;
+                secondary: string;
+            };
+            warning: {
+                primary: string;
+                secondary: string;
+            };
+            alert: {
+                primary: string;
+                secondary: string;
+            };
+            neutral: {
+                primary: string;
+                secondary: string;
+            };
+            on: {
+                brand: string;
+                brandExtra: string;
+                success: string;
+                warning: string;
+                alert: string;
+                neutral: string;
+            };
         };
-        readonly lg: {
-            readonly borderRadius: 8;
-            readonly borderWidth: 1;
+        border: {
+            primary: string;
+            secondary: string;
+            brand: string;
+            brandExtra: string;
+            inverse: string;
+            success: string;
+            warning: string;
+            alert: string;
+            neutral: string;
         };
-        readonly md: {
-            readonly borderRadius: 6;
-            readonly borderWidth: 1;
+        overlay: {
+            mono: string;
+            brand: string;
+            brandExtra: string;
+            success: string;
+            warning: string;
+            alert: string;
+            neutral: string;
+            monoHover: string;
         };
-        readonly sm: {
-            readonly borderRadius: 4;
-            readonly borderWidth: 1;
+        layer: {
+            scrim: string;
+            float: string;
         };
-        readonly xs: {
-            readonly borderRadius: 4;
-            readonly borderWidth: 1;
+        control: {
+            brand: {
+                primary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    bgDisable: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                    borderDisable: string;
+                };
+                secondary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                tertiary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                text: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    disable: string;
+                    ghost: string;
+                };
+                ghost: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+            };
+            mono: {
+                primary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                secondary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                tertiary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                text: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    ghost: string;
+                };
+                ghost: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+            };
+            brandExtra: {
+                primary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                secondary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                tertiary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                text: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    ghost: string;
+                };
+                ghost: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+            };
+            alert: {
+                bg: string;
+                border: string;
+                primary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                secondary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                tertiary: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+                text: {
+                    primary: string;
+                    secondary: string;
+                    tertiary: string;
+                    ghost: string;
+                };
+                ghost: {
+                    bg: string;
+                    bgHover: string;
+                    bgPress: string;
+                    border: string;
+                    borderHover: string;
+                    borderPress: string;
+                };
+            };
+            input: {
+                bg: string;
+                bgHover: string;
+                bgDisable: string;
+                border: string;
+                borderHover: string;
+                borderDisable: string;
+                text: string;
+                placeholder: string;
+                textDisable: string;
+            };
+            focus: {
+                bg: string;
+                border: string;
+            };
+            check: {
+                bg: string;
+                bgHover: string;
+                bgDisable: string;
+                border: string;
+                borderHover: string;
+                borderDisable: string;
+                icon: string;
+            };
+            faint: {
+                bg: string;
+                bgHover: string;
+                border: string;
+                borderHover: string;
+            };
+            slider: {
+                bg: string;
+                bgHover: string;
+                bgDisable: string;
+            };
+            switch: {
+                bg: string;
+                bgHover: string;
+                bgDisable: string;
+                border: string;
+                borderHover: string;
+                borderDisable: string;
+            };
+            knob: {
+                bg: string;
+                bgHover: string;
+                bgActive: string;
+                bgActiveHover: string;
+                bgInactive: string;
+                bgInactiveHover: string;
+                bgDisable: string;
+            };
+            text: {
+                primary: string;
+                disable: string;
+            };
+            link: {
+                primary: string;
+                primaryHover: string;
+                secondary: string;
+                secondaryHover: string;
+            };
+            segmented: {
+                bg: string;
+                bgHover: string;
+                bgActive: string;
+                border: string;
+                borderHover: string;
+                borderActive: string;
+                text: string;
+                textDisable: string;
+            };
+            tagLabel: {
+                product: {
+                    bg: string;
+                    text: string;
+                    textCompact: string;
+                };
+                rarity: {
+                    bg: string;
+                    text: string;
+                };
+                name: {
+                    bg: string;
+                    text: string;
+                };
+                account: {
+                    bg: string;
+                    text: string;
+                    textCompact: string;
+                };
+                id: {
+                    bg: string;
+                    bgSeries: string;
+                    textSeries: string;
+                    textNumber: string;
+                    textCompact: string;
+                };
+                subentity: {
+                    bg: string;
+                    text: string;
+                };
+                item: {
+                    bg: string;
+                    text: string;
+                    textCompact: string;
+                };
+            };
+            toast: {
+                bg: string;
+            };
+            toggleButton: {
+                bg: string;
+                bgHover: string;
+                bgActive: string;
+                bgDisable: string;
+                border: string;
+                borderHover: string;
+                borderActive: string;
+                borderDisable: string;
+                text: string;
+                textActive: string;
+                textDisable: string;
+            };
+            appButton: {
+                bg: string;
+                bgHover: string;
+                bgPress: string;
+                border: string;
+                borderHover: string;
+                borderPress: string;
+                text: string;
+                textDisable: string;
+            };
         };
-    };
-    readonly tagLabel: {
-        readonly borderRadius: 0;
-    };
-};
-
-declare const shadow: {
-    active: string;
-    surface: string;
-    surfaceHover: string;
-    popover: string;
-    modal: string;
-    contextMenu: string;
-};
-
-/**
- * Font family definitions per ProductContext.
- *
- * Figma "Font" variable collection defines 3 roles:
- *   - display: heading/display font (Pilat or Pilat Wide)
- *   - compact: body/UI font (Aktiv Grotesk or Montserrat)
- *   - text: paragraph/reading font (same families as compact)
- *
- * The `heading` and `body` exports map to these Figma roles:
- *   heading → display
- *   body → compact (also used for text contexts)
- */
-
-/** Static fonts object (defaults to B2B for backwards compatibility) */
-declare const fonts: {
-    heading: string;
-    body: string;
-    /** Paragraph/reading font — same families as body */
-    text: string;
-    /** @deprecated Use `heading` or `body` instead */
-    primary: string;
-};
-/** Returns context-aware font families */
-declare const getFonts: (productContext?: ProductContext) => {
-    heading: string;
-    body: string;
-    /** Paragraph/reading font — same families as body */
-    text: string;
-    /** @deprecated Use `heading` or `body` instead */
-    primary: string;
-};
-declare const typography: {
-    button: {
-        fontFamily: string;
-        fontWeight: string;
-    };
-};
-
-/**
- * Responsive breakpoint definitions for the design system.
- *
- * Derived from the Figma "Responsive / Typography" variable collection,
- * which has three modes: Common, Mobile, Desktop.
- * Common and Desktop share identical values; Mobile scales down.
- *
- * Usage (CSS):
- *   @media (max-width: 767px) { ... }   // Mobile
- *   @media (min-width: 768px) { ... }    // Desktop
- *
- * Usage (JS):
- *   import { breakpoints } from '@xsolla/xui-core';
- *   const isMobile = window.innerWidth < breakpoints.desktop;
- */
-declare const breakpoints: {
-    /** Mobile: 0 – 767px */
-    readonly mobile: 0;
-    /** Desktop: 768px and above */
-    readonly desktop: 768;
-};
-type BreakpointKey = keyof typeof breakpoints;
-/**
- * Max-width media query value for targeting mobile devices.
- * Use in CSS: `@media (max-width: ${MOBILE_MAX_WIDTH}px)`
- */
-declare const MOBILE_MAX_WIDTH: number;
-
-/**
- * Responsive typography scale tokens sourced from the Figma
- * "Responsive / Typography" variable collection.
- *
- * Three device modes: Common (default), Mobile, Desktop.
- * Common and Desktop have identical values. Mobile scales down.
- *
- * These are the raw building blocks. Semantic tokens in typography.ts
- * alias into this scale (e.g., B2B heading/h1/font-size → font-size/650).
- *
- * On web, these are injected as CSS custom properties (--xui-font-size-*, --xui-lh-*)
- * with @media overrides for mobile. Components consume a single CSS variable
- * and scale automatically by viewport.
- *
- * @see {@link ../styles/typography-css.ts} for CSS generation
- * @see {@link ./breakpoints.ts} for breakpoint definitions
- */
-interface ResponsiveValue {
-    common: number;
-    mobile: number;
-}
-type ScaleStep = "75" | "100" | "125" | "150" | "175" | "200" | "250" | "300" | "350" | "450" | "550" | "650" | "750";
-declare const SCALE_STEPS: ScaleStep[];
-/** Font-size scale: 13 steps from 10px to 64px */
-declare const fontSize: Record<ScaleStep, ResponsiveValue>;
-/** Line-height/display: tight line-heights for headings (roughly 1:1 with font-size) */
-declare const lineHeightDisplay: Record<ScaleStep, ResponsiveValue>;
-/** Line-height/compact: moderate line-heights for UI body text */
-declare const lineHeightCompact: Record<ScaleStep, ResponsiveValue>;
-/** Line-height/text: generous line-heights for paragraphs and reading text */
-declare const lineHeightText: Record<ScaleStep, ResponsiveValue>;
-declare const responsiveTypographyScale: {
-    readonly fontSize: Record<ScaleStep, ResponsiveValue>;
-    readonly lineHeightDisplay: Record<ScaleStep, ResponsiveValue>;
-    readonly lineHeightCompact: Record<ScaleStep, ResponsiveValue>;
-    readonly lineHeightText: Record<ScaleStep, ResponsiveValue>;
-};
-
-declare const isWeb: boolean;
-declare const isNative: boolean;
-declare const isIOS: boolean;
-declare const isAndroid: boolean;
-
-/**
- * React component that loads the toolkit's font-face declarations.
- * Drop-in for any framework — works in Next.js, Vite, CRA, etc.
- *
- * Renders nothing to the DOM. Injects a single `<style>` tag into `<head>` on mount.
- */
-declare const FontLoader: React.FC;
-
-/**
- * @font-face CSS for all toolkit fonts, loaded from Xsolla CDN.
- *
- * Pilat Wide — B2C heading/display font, weights 600, 700, 800.
- * Pilat — B2B heading/display font, weights 300, 400, 500, 600, 700, 800.
- * Aktiv Grotesk — body font for all contexts, weights 400, 500, 600.
- *   Four editions loaded via unicode-range: Latin, CN/SG, JP, KR.
- *   The browser downloads only the subset needed for characters on the page.
- *
- * Weight coverage notes (intentional gaps — licensing constraint, Xsolla
- * does not hold rights to the omitted cuts):
- *   - Pilat Wide 400 — not licensed. Components using weight 400 on Pilat
- *     Wide will render at 600 via browser substitution (heavier).
- *   - Aktiv Grotesk 300 — not licensed. (No component currently requests it.)
- *   - Aktiv Grotesk 700 — not licensed. Substitutes to 600 (lighter).
- *   - CJK editions (cn-sg, jp, kr) — 400/500/600 only; no 700/800.
- *     Heavy weights on CJK text fall back to the Latin file (no glyphs)
- *     and then to the system fallback stack.
- *
- * Do not add @font-face entries for the omitted weights without first
- * confirming the licence has been extended.
- */
-declare const fontFacesCSS = "\n  /* \u2500\u2500 Pilat Wide (B2C headings) \u2500\u2500 */\n\n  @font-face {\n    font-family: 'Pilat Wide';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/pilat-wide/pilat-wide-600.woff2') format('woff2');\n    font-weight: 600;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Pilat Wide';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/pilat-wide/pilat-wide-700.woff2') format('woff2');\n    font-weight: 700;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Pilat Wide';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/pilat-wide/pilat-wide-800.woff2') format('woff2');\n    font-weight: 800;\n    font-style: normal;\n    font-display: swap;\n  }\n\n  /* \u2500\u2500 Pilat (B2B headings) \u2500\u2500 */\n\n  @font-face {\n    font-family: 'Pilat';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/pilat/pilat-300.woff2') format('woff2');\n    font-weight: 300;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Pilat';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/pilat/pilat-400.woff2') format('woff2');\n    font-weight: 400;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Pilat';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/pilat/pilat-500.woff2') format('woff2');\n    font-weight: 500;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Pilat';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/pilat/pilat-600.woff2') format('woff2');\n    font-weight: 600;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Pilat';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/pilat/pilat-700.woff2') format('woff2');\n    font-weight: 700;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Pilat';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/pilat/pilat-800.woff2') format('woff2');\n    font-weight: 800;\n    font-style: normal;\n    font-display: swap;\n  }\n\n  /* \u2500\u2500 Aktiv Grotesk (body) \u2014 Latin \u2500\u2500 */\n\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/aktiv-grotesk/latin/aktiv-grotesk-latin-400.woff2') format('woff2');\n    font-weight: 400;\n    font-style: normal;\n    font-display: swap;\n    unicode-range: U+0000-024F, U+0250-02AF, U+0300-036F, U+0370-03FF, U+0400-04FF, U+2000-206F, U+20A0-20CF, U+2100-214F;\n  }\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/aktiv-grotesk/latin/aktiv-grotesk-latin-500.woff2') format('woff2');\n    font-weight: 500;\n    font-style: normal;\n    font-display: swap;\n    unicode-range: U+0000-024F, U+0250-02AF, U+0300-036F, U+0370-03FF, U+0400-04FF, U+2000-206F, U+20A0-20CF, U+2100-214F;\n  }\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/aktiv-grotesk/latin/aktiv-grotesk-latin-600.woff2') format('woff2');\n    font-weight: 600;\n    font-style: normal;\n    font-display: swap;\n    unicode-range: U+0000-024F, U+0250-02AF, U+0300-036F, U+0370-03FF, U+0400-04FF, U+2000-206F, U+20A0-20CF, U+2100-214F;\n  }\n\n  /* \u2500\u2500 Aktiv Grotesk (body) \u2014 Chinese / SG \u2500\u2500 */\n\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/aktiv-grotesk/cn-sg/aktiv-grotesk-cn-sg-400.woff2') format('woff2');\n    font-weight: 400;\n    font-style: normal;\n    font-display: swap;\n    unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF;\n  }\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/aktiv-grotesk/cn-sg/aktiv-grotesk-cn-sg-500.woff2') format('woff2');\n    font-weight: 500;\n    font-style: normal;\n    font-display: swap;\n    unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF;\n  }\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/aktiv-grotesk/cn-sg/aktiv-grotesk-cn-sg-600.woff2') format('woff2');\n    font-weight: 600;\n    font-style: normal;\n    font-display: swap;\n    unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF;\n  }\n\n  /* \u2500\u2500 Aktiv Grotesk (body) \u2014 Japanese \u2500\u2500 */\n\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/aktiv-grotesk/jp/aktiv-grotesk-jp-400.woff2') format('woff2');\n    font-weight: 400;\n    font-style: normal;\n    font-display: swap;\n    unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+31F0-31FF, U+FF65-FF9F;\n  }\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/aktiv-grotesk/jp/aktiv-grotesk-jp-500.woff2') format('woff2');\n    font-weight: 500;\n    font-style: normal;\n    font-display: swap;\n    unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+31F0-31FF, U+FF65-FF9F;\n  }\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/aktiv-grotesk/jp/aktiv-grotesk-jp-600.woff2') format('woff2');\n    font-weight: 600;\n    font-style: normal;\n    font-display: swap;\n    unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+31F0-31FF, U+FF65-FF9F;\n  }\n\n  /* \u2500\u2500 Aktiv Grotesk (body) \u2014 Korean \u2500\u2500 */\n\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/aktiv-grotesk/kr/aktiv-grotesk-kr-400.woff2') format('woff2');\n    font-weight: 400;\n    font-style: normal;\n    font-display: swap;\n    unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF, U+FFA0-FFDC;\n  }\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/aktiv-grotesk/kr/aktiv-grotesk-kr-500.woff2') format('woff2');\n    font-weight: 500;\n    font-style: normal;\n    font-display: swap;\n    unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF, U+FFA0-FFDC;\n  }\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1/aktiv-grotesk/kr/aktiv-grotesk-kr-600.woff2') format('woff2');\n    font-weight: 600;\n    font-style: normal;\n    font-display: swap;\n    unicode-range: U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF, U+FFA0-FFDC;\n  }\n";
-
-declare const TypographyStyleLoader: React.FC;
-
-/**
- * Generates the CSS custom properties string for responsive typography.
- *
- * Produces two blocks:
- * 1. :root — Desktop/Common values (the default)
- * 2. @media (max-width: 767px) :root — Mobile overrides
- *
- * CSS variable naming convention (mirrors Figma variable names):
- *   --xui-font-size-{step}       → e.g. --xui-font-size-150: 16px
- *   --xui-lh-display-{step}      → e.g. --xui-lh-display-150: 16px
- *   --xui-lh-compact-{step}      → e.g. --xui-lh-compact-150: 20px
- *   --xui-lh-text-{step}         → e.g. --xui-lh-text-150: 22px
- *
- * Consumers can use these in CSS or styled-components:
- *   font-size: var(--xui-font-size-350);
- *   line-height: var(--xui-lh-compact-350);
- *
- * @see {@link ../tokens/responsive-typography.ts} for raw token data
- * @see {@link ../tokens/breakpoints.ts} for breakpoint definitions
- */
-/**
- * Returns the full CSS string for responsive typography custom properties.
- * The result is memoized — safe to call multiple times.
- */
-declare function generateTypographyCSS(): string;
-/**
- * Returns the CSS variable name for a given font-size scale step.
- * Useful when the Typography component needs to reference a CSS variable.
- *
- * @example cssVar.fontSize("350") → "var(--xui-font-size-350)"
- */
-declare const cssVar: {
-    readonly fontSize: (step: string) => string;
-    readonly lhDisplay: (step: string) => string;
-    readonly lhCompact: (step: string) => string;
-    readonly lhText: (step: string) => string;
-};
-
-type ThemeMode = "dark" | "light" | "pentagram-dark" | "pentagram-light" | "ltg-dark" | "blueprints";
-declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) => {
-    colors: {
+    } | {
         background: {
             primary: string;
             secondary: string;
@@ -5024,10 +6663,13 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
     };
     spacing: {
         xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
         s: number;
         m: number;
         l: number;
-        xl: number;
     };
     shape: {
         readonly button: {
@@ -5080,7 +6722,7 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
                 readonly borderWidth: 1;
             };
             readonly md: {
-                readonly borderRadius: 8;
+                readonly borderRadius: 6;
                 readonly borderWidth: 1;
             };
             readonly sm: {
@@ -5251,29 +6893,33 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
         readonly avatar: {
             readonly xl: {
                 readonly borderRadius: 8;
-                readonly borderWidth: 2;
+                readonly borderWidth: 1;
             };
             readonly lg: {
                 readonly borderRadius: 6;
-                readonly borderWidth: 2;
+                readonly borderWidth: 1;
             };
             readonly md: {
                 readonly borderRadius: 6;
-                readonly borderWidth: 2;
+                readonly borderWidth: 1;
             };
             readonly sm: {
                 readonly borderRadius: 4;
-                readonly borderWidth: 2;
+                readonly borderWidth: 1;
             };
             readonly xs: {
                 readonly borderRadius: 4;
-                readonly borderWidth: 2;
+                readonly borderWidth: 1;
             };
             readonly xxs: {
                 readonly borderRadius: 2;
-                readonly borderWidth: 2;
+                readonly borderWidth: 1;
             };
         };
+        readonly cell: {
+            readonly borderRadius: 8;
+            readonly borderWidth: 1;
+        };
         readonly modal: {
             readonly borderRadius: 8;
         };
@@ -5521,7 +7167,7 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
             paddingHorizontal: number;
             fontSize: number;
             iconSize: number;
-            radius: 8;
+            radius: 6;
             borderWidth: number;
             fieldGap: number;
             lineHeight: number;
@@ -5589,7 +7235,7 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
             errorFontSize: number;
             errorLineHeight: number;
             errorGap: number;
-            radius: 8;
+            radius: 6;
             borderWidth: number;
         } | {
             box: number;
@@ -5781,7 +7427,7 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
             size: number;
             gap: number;
             fontSize: number;
-            radius: 8;
+            radius: 6;
             borderWidth: number;
             fieldGap: number;
         } | {
@@ -5816,7 +7462,7 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
             padding: number;
             fontSize: number;
             iconSize: number;
-            radius: 8;
+            radius: 6;
         } | {
             height: number;
             padding: number;
@@ -6762,4 +8408,4 @@ declare const ModalIdContext: React.Context<string | null>;
  */
 declare const useModalId: () => string | null;
 
-export { type BreakpointKey, type DesignSystemContextType, FontLoader, MOBILE_MAX_WIDTH, ModalIdContext, type ProductContext, type ResponsiveValue, SCALE_STEPS, type ScaleStep, type Theme, type ThemeColorScheme, type ThemeColors, type ThemeFonts, type ThemeMode, type ThemeOverrideProps, type ThemeShadow, type ThemeShape, type ThemeSizing, type ThemeSpacing, type ThemeTypographyRoles, type TypographyBodyVariant, TypographyStyleLoader, type TypographyTokens, type TypographyVariant, XUIProvider, breakpoints, colors, cssVar, defaultProductContext, fontFacesCSS, fontSize, fonts, generateTypographyCSS, getFonts, getTypographyTokens, getTypographyVariant, isAndroid, isIOS, isNative, isWeb, lineHeightCompact, lineHeightDisplay, lineHeightText, radius, radiusScale, responsiveTypographyScale, shadow, shape, spacing, stroke, themeConfig, typography, typographyTokens, useDesignSystem, useId, useModalId, useResolvedTheme };
+export { type BreakpointKey, type ComponentSize, DISPLAY_SCALE_STEPS, type DesignSystemContextType, type DisplayScaleStep, FontLoader, MOBILE_MAX_WIDTH, ModalIdContext, type ProductContext, type ResponsiveValue, SCALE_STEPS, type ScaleStep, type Theme, type ThemeColorScheme, type ThemeColors, type ThemeFonts, type ThemeMode, type ThemeOverrideProps, type ThemeShadow, type ThemeShape, type ThemeSizing, type ThemeSpacing, type ThemeTypographyRoles, type TypographyBodyVariant, TypographyStyleLoader, type TypographyTokens, type TypographyVariant, XUIProvider, breakpoints, colors, cssVar, defaultProductContext, fontFacesCSS, fontSize, fonts, generateTypographyCSS, getFonts, getTypographyTokens, getTypographyVariant, isAndroid, isIOS, isNative, isWeb, lineHeightCompact, lineHeightDisplay, lineHeightText, radius, radiusScale, responsiveTypographyScale, shadow, shape, spacing, stroke, themeConfig, typography, typographyTokens, useDesignSystem, useId, useModalId, useResolvedTheme };