@xsolla/xui-core 0.161.3 → 0.162.0

package/index.d.mts

@@ -2493,172 +2493,575 @@ 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;
+    blueprints: {
+        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;
+            };
+        };
+    };
+};
+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;
+        };
+    };
+    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: {
@@ -2791,216 +3194,618 @@ declare const shape: {
     readonly toast: {
         readonly borderRadius: 4;
     };
-    readonly toggleButtonGroup: {
-        readonly xl: {
-            readonly borderRadius: 8;
-            readonly borderWidth: 1;
+    readonly toggleButtonGroup: {
+        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 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;
+    desktop: 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 (desktop) */
+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, registered at weights 400, 600, 700, 800.
+ *
+ * Pilat — B2B heading/display font, registered at weights 300, 400, 600, 700, 800.
+ *
+ * Aktiv Grotesk — body font for all contexts,
+ * mapped from the Sharp Grotesk CDN files (same typeface under a legacy name).
+ * Registered at weights 300, 400, 500, 600, 700.
+ */
+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/strapi-v2-bucket-prod/Pilat_Test_Medium_/Pilat_Test_Medium.ttf') format('truetype');\n    font-weight: 400;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Pilat Wide';\n    src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Demi_Bold_bee67c470a/Pilat_Test_Demi_Bold_bee67c470a.ttf') format('truetype');\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/strapi-v2-bucket-prod/Pilat_Test_Bold_b12b40d234/Pilat_Test_Bold_b12b40d234.ttf') format('truetype');\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/strapi-v2-bucket-prod/Pilat_Test_Heavy_2885678ca4/Pilat_Test_Heavy_2885678ca4.otf') format('opentype');\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/merchant-bucket-prod/files/uploaded/722279/55a03110b2400b778d485de2c8d064c0.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/merchant-bucket-prod/files/uploaded/722279/e968c9cc76e48ff6111c90534549bbf9.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/merchant-bucket-prod/files/uploaded/722279/ed4fe74e88aaacc6978f06a862e75b08.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/merchant-bucket-prod/files/uploaded/722279/7450f429979af7eaa8fa4d4d91cee927.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/merchant-bucket-prod/files/uploaded/722279/218d647ff7690c1e312f6943e29af375.woff2') format('woff2');\n    font-weight: 800;\n    font-style: normal;\n    font-display: swap;\n  }\n\n  /* \u2500\u2500 Aktiv Grotesk (body) \u2014 served from Sharp Grotesk CDN files \u2500\u2500 */\n\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Light_c4650750bb/Pilat_Test_Light_c4650750bb.otf') format('opentype');\n    font-weight: 300;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Book_5cb49cd592/Pilat_Test_Book_5cb49cd592.otf') format('opentype');\n    font-weight: 400;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Demi_e9bed59107/Pilat_Test_Demi_e9bed59107.otf') format('opentype');\n    font-weight: 500;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');\n    font-weight: 600;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');\n    font-weight: 700;\n    font-style: normal;\n    font-display: swap;\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;
+            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 lg: {
-            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 md: {
-            readonly borderRadius: 6;
-            readonly borderWidth: 1;
+        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;
         };
-        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;
-    desktop: 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 (desktop) */
-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, registered at weights 400, 600, 700, 800.
- *
- * Pilat — B2B heading/display font, registered at weights 300, 400, 600, 700, 800.
- *
- * Aktiv Grotesk — body font for all contexts,
- * mapped from the Sharp Grotesk CDN files (same typeface under a legacy name).
- * Registered at weights 300, 400, 500, 600, 700.
- */
-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/strapi-v2-bucket-prod/Pilat_Test_Medium_/Pilat_Test_Medium.ttf') format('truetype');\n    font-weight: 400;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Pilat Wide';\n    src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Demi_Bold_bee67c470a/Pilat_Test_Demi_Bold_bee67c470a.ttf') format('truetype');\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/strapi-v2-bucket-prod/Pilat_Test_Bold_b12b40d234/Pilat_Test_Bold_b12b40d234.ttf') format('truetype');\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/strapi-v2-bucket-prod/Pilat_Test_Heavy_2885678ca4/Pilat_Test_Heavy_2885678ca4.otf') format('opentype');\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/merchant-bucket-prod/files/uploaded/722279/55a03110b2400b778d485de2c8d064c0.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/merchant-bucket-prod/files/uploaded/722279/e968c9cc76e48ff6111c90534549bbf9.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/merchant-bucket-prod/files/uploaded/722279/ed4fe74e88aaacc6978f06a862e75b08.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/merchant-bucket-prod/files/uploaded/722279/7450f429979af7eaa8fa4d4d91cee927.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/merchant-bucket-prod/files/uploaded/722279/218d647ff7690c1e312f6943e29af375.woff2') format('woff2');\n    font-weight: 800;\n    font-style: normal;\n    font-display: swap;\n  }\n\n  /* \u2500\u2500 Aktiv Grotesk (body) \u2014 served from Sharp Grotesk CDN files \u2500\u2500 */\n\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Light_c4650750bb/Pilat_Test_Light_c4650750bb.otf') format('opentype');\n    font-weight: 300;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Book_5cb49cd592/Pilat_Test_Book_5cb49cd592.otf') format('opentype');\n    font-weight: 400;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Demi_e9bed59107/Pilat_Test_Demi_e9bed59107.otf') format('opentype');\n    font-weight: 500;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');\n    font-weight: 600;\n    font-style: normal;\n    font-display: swap;\n  }\n  @font-face {\n    font-family: 'Aktiv Grotesk';\n    src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');\n    font-weight: 700;\n    font-style: normal;\n    font-display: swap;\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";
-declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) => {
-    colors: {
+    } | {
         background: {
             primary: string;
             secondary: string;
@@ -5812,7 +6617,16 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
             lineHeight: number;
             iconSize: number;
             gap: number;
-            borderRadius: 6;
+            borderRadius: 6;
+            itemGap: number;
+        } | {
+            height: number;
+            paddingHorizontal: number;
+            fontSize: number;
+            lineHeight: number;
+            iconSize: number;
+            gap: number;
+            borderRadius: 4;
             itemGap: number;
         } | {
             height: number;
@@ -5823,65 +6637,458 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
             gap: number;
             borderRadius: 4;
             itemGap: number;
+        };
+        table: {
+            containerRadius: number;
+            containerPaddingVertical: number;
+            containerGap: number;
+            captionFontSize: number;
+            captionLineHeight: number;
+            headerRowHeight: number;
+            headerRowPaddingHorizontal: number;
+            headerCellGap: number;
+            headerCellFontSize: number;
+            headerCellLineHeight: number;
+            rowHeight: number;
+            rowPaddingHorizontal: number;
+            cellGap: number;
+            cellFontSize: number;
+            cellLineHeight: number;
+            paginationGap: number;
+            paginationPaddingHorizontal: number;
+        };
+    };
+};
+interface DesignSystemContextType {
+    mode: ThemeMode;
+    setMode: (mode: ThemeMode) => void;
+    productContext: ProductContext;
+    setProductContext: (productContext: ProductContext) => void;
+    theme: ReturnType<typeof themeConfig>;
+}
+declare const XUIProvider: React.FC<{
+    children: React.ReactNode;
+    initialMode?: ThemeMode;
+    initialProductContext?: ProductContext;
+    /** Use `initialProductContext` instead. */
+    productContext?: never;
+    /** Load toolkit fonts from the Xsolla CDN. Defaults to true on web, no-ops on native. */
+    loadFonts?: boolean;
+}>;
+declare const useDesignSystem: () => DesignSystemContextType;
+interface ThemeOverrideProps {
+    /** Override the global theme mode for this component */
+    themeMode?: ThemeMode;
+    /** Override the global product context (fonts/typography) for this component */
+    themeProductContext?: ProductContext;
+}
+declare const useResolvedTheme: (overrides?: ThemeOverrideProps) => {
+    mode: ThemeMode;
+    productContext: ProductContext;
+    theme: {
+        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;
+                };
+            };
+            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;
+                };
+            };
         } | {
-            height: number;
-            paddingHorizontal: number;
-            fontSize: number;
-            lineHeight: number;
-            iconSize: number;
-            gap: number;
-            borderRadius: 4;
-            itemGap: number;
-        };
-        table: {
-            containerRadius: number;
-            containerPaddingVertical: number;
-            containerGap: number;
-            captionFontSize: number;
-            captionLineHeight: number;
-            headerRowHeight: number;
-            headerRowPaddingHorizontal: number;
-            headerCellGap: number;
-            headerCellFontSize: number;
-            headerCellLineHeight: number;
-            rowHeight: number;
-            rowPaddingHorizontal: number;
-            cellGap: number;
-            cellFontSize: number;
-            cellLineHeight: number;
-            paginationGap: number;
-            paginationPaddingHorizontal: number;
-        };
-    };
-};
-interface DesignSystemContextType {
-    mode: ThemeMode;
-    setMode: (mode: ThemeMode) => void;
-    productContext: ProductContext;
-    setProductContext: (productContext: ProductContext) => void;
-    theme: ReturnType<typeof themeConfig>;
-}
-declare const XUIProvider: React.FC<{
-    children: React.ReactNode;
-    initialMode?: ThemeMode;
-    initialProductContext?: ProductContext;
-    /** Use `initialProductContext` instead. */
-    productContext?: never;
-    /** Load toolkit fonts from the Xsolla CDN. Defaults to true on web, no-ops on native. */
-    loadFonts?: boolean;
-}>;
-declare const useDesignSystem: () => DesignSystemContextType;
-interface ThemeOverrideProps {
-    /** Override the global theme mode for this component */
-    themeMode?: ThemeMode;
-    /** Override the global product context (fonts/typography) for this component */
-    themeProductContext?: ProductContext;
-}
-declare const useResolvedTheme: (overrides?: ThemeOverrideProps) => {
-    mode: ThemeMode;
-    productContext: ProductContext;
-    theme: {
-        colors: {
             background: {
                 primary: string;
                 secondary: string;