@xsolla/xui-core 0.173.1 → 0.174.0

package/index.d.ts

@@ -6676,12 +6676,40 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
         };
     };
 };
+/**
+ * The fully-resolved theme object returned by {@link themeConfig} and exposed to
+ * components via `useDesignSystem().theme` and `useResolvedTheme().theme`.
+ *
+ * This is the single canonical theme type. Import it when building custom
+ * components that need to receive, store, or pass the theme around:
+ *
+ * ```tsx
+ * import { useResolvedTheme, type Theme } from "@xsolla/xui-core";
+ *
+ * const surface = (theme: Theme) => theme.colors.background.secondary;
+ * ```
+ */
+type Theme = ReturnType<typeof themeConfig>;
+/** Resolved color tokens for the active theme mode (`theme.colors`). */
+type ThemeColorScheme = Theme["colors"];
+/** Spacing scale — `xs`…`xl` (`theme.spacing`). */
+type ThemeSpacing = Theme["spacing"];
+/** Semantic shape tokens: border-radius + border-width (`theme.shape`). */
+type ThemeShape = Theme["shape"];
+/** Elevation / shadow tokens (`theme.shadow`). */
+type ThemeShadow = Theme["shadow"];
+/** Resolved font families for the active product context (`theme.fonts`). */
+type ThemeFonts = Theme["fonts"];
+/** Typography role families — `primary` / `heading` / `body` (`theme.typography`). */
+type ThemeTypographyRoles = Theme["typography"];
+/** Per-component sizing-config accessors (`theme.sizing`). */
+type ThemeSizing = Theme["sizing"];
 interface DesignSystemContextType {
     mode: ThemeMode;
     setMode: (mode: ThemeMode) => void;
     productContext: ProductContext;
     setProductContext: (productContext: ProductContext) => void;
-    theme: ReturnType<typeof themeConfig>;
+    theme: Theme;
     /** Whether the app uses responsive typography (CSS vars + @media). Defaults to true. */
     responsive: boolean;
 }
@@ -6707,3278 +6735,7 @@ interface ThemeOverrideProps {
     /** 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;
-                };
-            };
-        } | {
-            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;
-                };
-            };
-        } | {
-            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;
-                };
-            };
-        } | {
-            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;
-                };
-            };
-        };
-        spacing: {
-            xs: number;
-            s: number;
-            m: number;
-            l: number;
-            xl: number;
-        };
-        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: {
-                    readonly borderRadius: 2;
-                };
-                readonly md: {
-                    readonly borderRadius: 2;
-                };
-                readonly sm: {
-                    readonly borderRadius: 2;
-                };
-            };
-            readonly tabItem: {
-                readonly xl: {
-                    readonly borderRadius: 8;
-                };
-                readonly lg: {
-                    readonly borderRadius: 8;
-                };
-                readonly md: {
-                    readonly borderRadius: 4;
-                };
-                readonly sm: {
-                    readonly borderRadius: 4;
-                };
-            };
-            readonly tag: {
-                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 label: {
-                    readonly borderRadius: 0;
-                };
-            };
-            readonly tooltip: {
-                readonly xl: {
-                    readonly borderRadius: 8;
-                };
-                readonly lg: {
-                    readonly borderRadius: 8;
-                };
-                readonly md: {
-                    readonly borderRadius: 8;
-                };
-                readonly sm: {
-                    readonly borderRadius: 4;
-                };
-            };
-            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: 8;
-                    readonly borderWidth: 2;
-                };
-                readonly lg: {
-                    readonly borderRadius: 6;
-                    readonly borderWidth: 2;
-                };
-                readonly md: {
-                    readonly borderRadius: 6;
-                    readonly borderWidth: 2;
-                };
-                readonly sm: {
-                    readonly borderRadius: 4;
-                    readonly borderWidth: 2;
-                };
-                readonly xs: {
-                    readonly borderRadius: 4;
-                    readonly borderWidth: 2;
-                };
-                readonly xxs: {
-                    readonly borderRadius: 2;
-                    readonly borderWidth: 2;
-                };
-            };
-            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: 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;
-            };
-        };
-        shadow: {
-            active: string;
-            surface: string;
-            surfaceHover: string;
-            popover: string;
-            modal: string;
-            contextMenu: string;
-        };
-        fonts: {
-            heading: string;
-            body: string;
-            text: string;
-            primary: string;
-        };
-        typography: {
-            primary: string;
-            heading: string;
-            body: string;
-        };
-        typographyTokens: TypographyTokens;
-        productContext: ProductContext;
-        sizing: {
-            button: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
-                height: number;
-                padding: number;
-                fontSize: number;
-                lineHeight: number;
-                sublabelFontSize: number;
-                spinnerSize: number;
-                iconSize: number;
-                iconContainerSize: number;
-                borderRadius: 8;
-                labelIconSize: number;
-                labelIconGap: number;
-            } | {
-                height: number;
-                padding: number;
-                fontSize: number;
-                lineHeight: number;
-                sublabelFontSize: number;
-                spinnerSize: number;
-                iconSize: number;
-                iconContainerSize: number;
-                borderRadius: 8;
-                labelIconSize: number;
-                labelIconGap: number;
-            } | {
-                height: number;
-                padding: number;
-                fontSize: number;
-                lineHeight: number;
-                sublabelFontSize: number;
-                spinnerSize: number;
-                iconSize: number;
-                iconContainerSize: number;
-                borderRadius: 6;
-                labelIconSize: number;
-                labelIconGap: number;
-            } | {
-                height: number;
-                padding: number;
-                fontSize: number;
-                lineHeight: number;
-                sublabelFontSize: number;
-                spinnerSize: number;
-                iconSize: number;
-                iconContainerSize: number;
-                borderRadius: 4;
-                labelIconSize: number;
-                labelIconGap: number;
-            } | {
-                height: number;
-                padding: number;
-                fontSize: number;
-                lineHeight: number;
-                sublabelFontSize: number;
-                spinnerSize: number;
-                iconSize: number;
-                iconContainerSize: number;
-                borderRadius: 4;
-                labelIconSize: number;
-                labelIconGap: number;
-            };
-            flexButton: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
-                height: number;
-                padding: number;
-                fontSize: number;
-                spinnerSize: number;
-                iconSize: number;
-                borderRadius: 4;
-            } | {
-                height: number;
-                padding: number;
-                fontSize: number;
-                spinnerSize: number;
-                iconSize: number;
-                borderRadius: 4;
-            } | {
-                height: number;
-                padding: number;
-                fontSize: number;
-                spinnerSize: number;
-                iconSize: number;
-                borderRadius: 2;
-            } | {
-                height: number;
-                padding: number;
-                fontSize: number;
-                spinnerSize: number;
-                iconSize: number;
-                borderRadius: 2;
-            } | {
-                height: number;
-                padding: number;
-                fontSize: number;
-                spinnerSize: number;
-                iconSize: number;
-                borderRadius: 2;
-            };
-            checkbox: (size: "xl" | "lg" | "md" | "sm") => {
-                size: number;
-                fontSize: number;
-                descriptionFontSize: number;
-                labelGap: number;
-                textGap: number;
-                borderRadius: 4;
-            } | {
-                size: number;
-                fontSize: number;
-                descriptionFontSize: number;
-                labelGap: number;
-                textGap: number;
-                borderRadius: 4;
-            } | {
-                size: number;
-                fontSize: number;
-                descriptionFontSize: number;
-                labelGap: number;
-                textGap: number;
-                borderRadius: 4;
-            } | {
-                size: number;
-                fontSize: number;
-                descriptionFontSize: number;
-                labelGap: number;
-                textGap: number;
-                borderRadius: 4;
-            };
-            radio: (size: "xl" | "lg" | "md" | "sm") => {
-                size: number;
-                iconSize: number;
-                fontSize: number;
-                lineHeight: number;
-                descriptionFontSize: number;
-                descriptionLineHeight: number;
-                labelGap: number;
-                textGap: number;
-                borderWidth: number;
-            } | {
-                size: number;
-                iconSize: number;
-                fontSize: number;
-                lineHeight: number;
-                descriptionFontSize: number;
-                descriptionLineHeight: number;
-                labelGap: number;
-                textGap: number;
-                borderWidth: number;
-            } | {
-                size: number;
-                iconSize: number;
-                fontSize: number;
-                lineHeight: number;
-                descriptionFontSize: number;
-                descriptionLineHeight: number;
-                labelGap: number;
-                textGap: number;
-                borderWidth: number;
-            } | {
-                size: number;
-                iconSize: number;
-                fontSize: number;
-                lineHeight: number;
-                descriptionFontSize: number;
-                descriptionLineHeight: number;
-                labelGap: number;
-                textGap: number;
-                borderWidth: number;
-            };
-            input: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
-                height: number;
-                paddingVertical: number;
-                paddingHorizontal: number;
-                fontSize: number;
-                iconSize: number;
-                radius: 8;
-                borderWidth: number;
-                fieldGap: number;
-                lineHeight: number;
-            } | {
-                height: number;
-                paddingVertical: number;
-                paddingHorizontal: number;
-                fontSize: number;
-                iconSize: number;
-                radius: 8;
-                borderWidth: number;
-                fieldGap: number;
-                lineHeight: number;
-            } | {
-                height: number;
-                paddingVertical: number;
-                paddingHorizontal: number;
-                fontSize: number;
-                iconSize: number;
-                radius: 8;
-                borderWidth: number;
-                fieldGap: number;
-                lineHeight: number;
-            } | {
-                height: number;
-                paddingVertical: number;
-                paddingHorizontal: number;
-                fontSize: number;
-                iconSize: number;
-                radius: 4;
-                borderWidth: number;
-                fieldGap: number;
-                lineHeight: number;
-            } | {
-                height: number;
-                paddingVertical: number;
-                paddingHorizontal: number;
-                fontSize: number;
-                iconSize: number;
-                radius: 4;
-                borderWidth: number;
-                fieldGap: number;
-                lineHeight: number;
-            };
-            imageUploader: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
-                box: number;
-                padding: number;
-                gap: number;
-                iconSize: number;
-                spinnerSize: "lg";
-                labelFontSize: number;
-                labelLineHeight: number;
-                descriptionFontSize: number;
-                descriptionLineHeight: number;
-                errorFontSize: number;
-                errorLineHeight: number;
-                errorGap: number;
-                radius: 8;
-                borderWidth: number;
-            } | {
-                box: number;
-                padding: number;
-                gap: number;
-                iconSize: number;
-                spinnerSize: "lg";
-                labelFontSize: number;
-                labelLineHeight: number;
-                descriptionFontSize: number;
-                descriptionLineHeight: number;
-                errorFontSize: number;
-                errorLineHeight: number;
-                errorGap: number;
-                radius: 8;
-                borderWidth: number;
-            } | {
-                box: number;
-                padding: number;
-                gap: number;
-                iconSize: number;
-                spinnerSize: "md";
-                labelFontSize: number;
-                labelLineHeight: number;
-                descriptionFontSize: number;
-                descriptionLineHeight: number;
-                errorFontSize: number;
-                errorLineHeight: number;
-                errorGap: number;
-                radius: 8;
-                borderWidth: number;
-            } | {
-                box: number;
-                padding: number;
-                gap: number;
-                iconSize: number;
-                spinnerSize: "sm";
-                labelFontSize: number;
-                labelLineHeight: number;
-                descriptionFontSize: number;
-                descriptionLineHeight: number;
-                errorFontSize: number;
-                errorLineHeight: number;
-                errorGap: number;
-                radius: 4;
-                borderWidth: number;
-            } | {
-                box: number;
-                padding: number;
-                gap: number;
-                iconSize: number;
-                spinnerSize: "sm";
-                labelFontSize: number;
-                labelLineHeight: number;
-                descriptionFontSize: number;
-                descriptionLineHeight: number;
-                errorFontSize: number;
-                errorLineHeight: number;
-                errorGap: number;
-                radius: 4;
-                borderWidth: number;
-            };
-            dragDropUploader: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
-                areaHeight: number;
-                areaPadding: number;
-                areaGap: number;
-                iconSize: number;
-                width: number;
-                rootGap: number;
-                radius: number;
-                borderWidth: number;
-                textGap: number;
-                titleFontSize: number;
-                titleLineHeight: number;
-                descriptionFontSize: number;
-                descriptionLineHeight: number;
-                errorFontSize: number;
-                errorLineHeight: number;
-                listGap: number;
-                itemGap: number;
-                itemPaddingVertical: number;
-                itemPaddingLeft: number;
-                itemPaddingRight: number;
-                itemIconWrapperSize: number;
-                itemIconSize: number;
-                itemTitleFontSize: number;
-                itemTitleLineHeight: number;
-                itemDescriptionFontSize: number;
-                itemDescriptionLineHeight: number;
-                removeIconSize: number;
-            } | {
-                areaHeight: number;
-                areaPadding: number;
-                areaGap: number;
-                iconSize: number;
-                width: number;
-                rootGap: number;
-                radius: number;
-                borderWidth: number;
-                textGap: number;
-                titleFontSize: number;
-                titleLineHeight: number;
-                descriptionFontSize: number;
-                descriptionLineHeight: number;
-                errorFontSize: number;
-                errorLineHeight: number;
-                listGap: number;
-                itemGap: number;
-                itemPaddingVertical: number;
-                itemPaddingLeft: number;
-                itemPaddingRight: number;
-                itemIconWrapperSize: number;
-                itemIconSize: number;
-                itemTitleFontSize: number;
-                itemTitleLineHeight: number;
-                itemDescriptionFontSize: number;
-                itemDescriptionLineHeight: number;
-                removeIconSize: number;
-            } | {
-                areaHeight: number;
-                areaPadding: number;
-                areaGap: number;
-                iconSize: number;
-                width: number;
-                rootGap: number;
-                radius: number;
-                borderWidth: number;
-                textGap: number;
-                titleFontSize: number;
-                titleLineHeight: number;
-                descriptionFontSize: number;
-                descriptionLineHeight: number;
-                errorFontSize: number;
-                errorLineHeight: number;
-                listGap: number;
-                itemGap: number;
-                itemPaddingVertical: number;
-                itemPaddingLeft: number;
-                itemPaddingRight: number;
-                itemIconWrapperSize: number;
-                itemIconSize: number;
-                itemTitleFontSize: number;
-                itemTitleLineHeight: number;
-                itemDescriptionFontSize: number;
-                itemDescriptionLineHeight: number;
-                removeIconSize: number;
-            } | {
-                areaHeight: number;
-                areaPadding: number;
-                areaGap: number;
-                iconSize: number;
-                width: number;
-                rootGap: number;
-                radius: number;
-                borderWidth: number;
-                textGap: number;
-                titleFontSize: number;
-                titleLineHeight: number;
-                descriptionFontSize: number;
-                descriptionLineHeight: number;
-                errorFontSize: number;
-                errorLineHeight: number;
-                listGap: number;
-                itemGap: number;
-                itemPaddingVertical: number;
-                itemPaddingLeft: number;
-                itemPaddingRight: number;
-                itemIconWrapperSize: number;
-                itemIconSize: number;
-                itemTitleFontSize: number;
-                itemTitleLineHeight: number;
-                itemDescriptionFontSize: number;
-                itemDescriptionLineHeight: number;
-                removeIconSize: number;
-            } | {
-                width: number;
-                rootGap: number;
-                areaHeight: number;
-                areaPadding: number;
-                areaGap: number;
-                textGap: number;
-                iconSize: number;
-                titleFontSize: number;
-                titleLineHeight: number;
-                descriptionFontSize: number;
-                descriptionLineHeight: number;
-                listGap: number;
-                itemGap: number;
-                itemPaddingVertical: number;
-                itemPaddingLeft: number;
-                itemIconWrapperSize: number;
-                itemIconSize: number;
-                itemTitleFontSize: number;
-                itemTitleLineHeight: number;
-                itemDescriptionFontSize: number;
-                itemDescriptionLineHeight: number;
-                removeIconSize: number;
-                radius: number;
-                borderWidth: number;
-                errorFontSize: number;
-                errorLineHeight: number;
-                itemPaddingRight: number;
-            };
-            inputPin: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
-                size: number;
-                gap: number;
-                fontSize: number;
-                radius: 8;
-                borderWidth: number;
-                fieldGap: number;
-            } | {
-                size: number;
-                gap: number;
-                fontSize: number;
-                radius: 8;
-                borderWidth: number;
-                fieldGap: number;
-            } | {
-                size: number;
-                gap: number;
-                fontSize: number;
-                radius: 8;
-                borderWidth: number;
-                fieldGap: number;
-            } | {
-                size: number;
-                gap: number;
-                fontSize: number;
-                radius: 4;
-                borderWidth: number;
-                fieldGap: number;
-            } | {
-                size: number;
-                gap: number;
-                fontSize: number;
-                radius: 4;
-                borderWidth: number;
-                fieldGap: number;
-            };
-            textarea: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
-                height: number;
-                padding: number;
-                fontSize: number;
-                iconSize: number;
-                radius: 8;
-            } | {
-                height: number;
-                padding: number;
-                fontSize: number;
-                iconSize: number;
-                radius: 8;
-            } | {
-                height: number;
-                padding: number;
-                fontSize: number;
-                iconSize: number;
-                radius: 8;
-            } | {
-                height: number;
-                padding: number;
-                fontSize: number;
-                iconSize: number;
-                radius: 4;
-            } | {
-                height: number;
-                padding: number;
-                fontSize: number;
-                iconSize: number;
-                radius: 4;
-            };
-            switch: (size: "xl" | "lg" | "md" | "sm") => {
-                width: number;
-                height: number;
-                knobSize: number;
-                fontSize: number;
-                lineHeight: number;
-                descriptionFontSize: number;
-                descriptionLineHeight: number;
-                labelGap: number;
-                textGap: number;
-                frameBorderRadius: 4;
-                knobBorderRadius: 2;
-            } | {
-                width: number;
-                height: number;
-                knobSize: number;
-                fontSize: number;
-                lineHeight: number;
-                descriptionFontSize: number;
-                descriptionLineHeight: number;
-                labelGap: number;
-                textGap: number;
-                frameBorderRadius: 4;
-                knobBorderRadius: 2;
-            } | {
-                width: number;
-                height: number;
-                knobSize: number;
-                fontSize: number;
-                lineHeight: number;
-                descriptionFontSize: number;
-                descriptionLineHeight: number;
-                labelGap: number;
-                textGap: number;
-                frameBorderRadius: 4;
-                knobBorderRadius: 2;
-            } | {
-                width: number;
-                height: number;
-                knobSize: number;
-                fontSize: number;
-                lineHeight: number;
-                descriptionFontSize: number;
-                descriptionLineHeight: number;
-                labelGap: number;
-                textGap: number;
-                frameBorderRadius: 4;
-                knobBorderRadius: 2;
-            };
-            avatar: (size: "xl" | "lg" | "md" | "sm" | "xs" | "xxs") => {
-                size: number;
-                fontSize: number;
-                iconSize: number;
-                badgeSize: number;
-                badgeOffsetCircle: {
-                    right: number;
-                    top: number;
-                };
-                badgeOffsetSquare: {
-                    right: number;
-                    top: number;
-                };
-                borderRadiusSquare: 8;
-                borderRadiusCircle: 999;
-            } | {
-                size: number;
-                fontSize: number;
-                iconSize: number;
-                badgeSize: number;
-                badgeOffsetCircle: {
-                    right: number;
-                    top: number;
-                };
-                badgeOffsetSquare: {
-                    right: number;
-                    top: number;
-                };
-                borderRadiusSquare: 6;
-                borderRadiusCircle: 999;
-            } | {
-                size: number;
-                fontSize: number;
-                iconSize: number;
-                badgeSize: number;
-                badgeOffsetCircle: {
-                    right: number;
-                    top: number;
-                };
-                badgeOffsetSquare: {
-                    right: number;
-                    top: number;
-                };
-                borderRadiusSquare: 6;
-                borderRadiusCircle: 999;
-            } | {
-                size: number;
-                fontSize: number;
-                iconSize: number;
-                badgeSize: number;
-                badgeOffsetCircle: {
-                    right: number;
-                    top: number;
-                };
-                badgeOffsetSquare: {
-                    right: number;
-                    top: number;
-                };
-                borderRadiusSquare: 4;
-                borderRadiusCircle: 999;
-            } | {
-                size: number;
-                fontSize: number;
-                iconSize: number;
-                badgeSize: number;
-                badgeOffsetCircle: {
-                    right: number;
-                    top: number;
-                };
-                badgeOffsetSquare: {
-                    right: number;
-                    top: number;
-                };
-                borderRadiusSquare: 4;
-                borderRadiusCircle: 999;
-            } | {
-                size: number;
-                fontSize: number;
-                iconSize: number;
-                badgeSize: number;
-                badgeOffsetCircle: {
-                    right: number;
-                    top: number;
-                };
-                badgeOffsetSquare: {
-                    right: number;
-                    top: number;
-                };
-                borderRadiusSquare: 2;
-                borderRadiusCircle: 999;
-            };
-            tag: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
-                height: number;
-                padding: number;
-                fontSize: number;
-                lineHeight: number;
-                gap: number;
-                iconSize: number;
-                radius: 8;
-                borderWidth: number;
-            } | {
-                height: number;
-                padding: number;
-                fontSize: number;
-                lineHeight: number;
-                gap: number;
-                iconSize: number;
-                radius: 8;
-                borderWidth: number;
-            } | {
-                height: number;
-                padding: number;
-                fontSize: number;
-                lineHeight: number;
-                gap: number;
-                iconSize: number;
-                radius: 6;
-                borderWidth: number;
-            } | {
-                height: number;
-                padding: number;
-                fontSize: number;
-                lineHeight: number;
-                gap: number;
-                iconSize: number;
-                radius: 4;
-                borderWidth: number;
-            } | {
-                height: number;
-                padding: number;
-                fontSize: number;
-                lineHeight: number;
-                gap: number;
-                iconSize: number;
-                radius: 4;
-                borderWidth: number;
-            };
-            divider: (size: "lg" | "md" | "sm") => {
-                height: number;
-                fontSize: number;
-                lineWeight: number;
-            } | {
-                height: number;
-                fontSize: number;
-                lineWeight: number;
-            } | {
-                height: number;
-                fontSize: number;
-                lineWeight: number;
-            };
-            spinner: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
-                size: number;
-                strokeWidth: number;
-            } | {
-                size: number;
-                strokeWidth: number;
-            } | {
-                size: number;
-                strokeWidth: number;
-            } | {
-                size: number;
-                strokeWidth: number;
-            } | {
-                size: number;
-                strokeWidth: number;
-            };
-            tabs: (size: "xl" | "lg" | "md" | "sm") => {
-                height: number;
-                fontSize: number;
-                lineHeight: number;
-                iconSize: number;
-                gap: number;
-                paddingHorizontal: number;
-            } | {
-                height: number;
-                fontSize: number;
-                lineHeight: number;
-                iconSize: number;
-                gap: number;
-                paddingHorizontal: number;
-            } | {
-                height: number;
-                fontSize: number;
-                lineHeight: number;
-                iconSize: number;
-                gap: number;
-                paddingHorizontal: number;
-            } | {
-                height: number;
-                fontSize: number;
-                lineHeight: number;
-                iconSize: number;
-                gap: number;
-                paddingHorizontal: number;
-            };
-            segmented: (size: "xl" | "lg" | "md" | "sm") => {
-                height: number;
-                containerPadding: number;
-                containerRadius: 8;
-                itemHeight: number;
-                itemPaddingHorizontal: number;
-                itemPaddingVertical: number;
-                itemRadius: 4;
-                fontSize: number;
-                lineHeight: number;
-                iconSize: number;
-                gap: number;
-            } | {
-                height: number;
-                containerPadding: number;
-                containerRadius: 8;
-                itemHeight: number;
-                itemPaddingHorizontal: number;
-                itemPaddingVertical: number;
-                itemRadius: 4;
-                fontSize: number;
-                lineHeight: number;
-                iconSize: number;
-                gap: number;
-            } | {
-                height: number;
-                containerPadding: number;
-                containerRadius: 8;
-                itemHeight: number;
-                itemPaddingHorizontal: number;
-                itemPaddingVertical: number;
-                itemRadius: 4;
-                fontSize: number;
-                lineHeight: number;
-                iconSize: number;
-                gap: number;
-            } | {
-                height: number;
-                containerPadding: number;
-                containerRadius: 4;
-                itemHeight: number;
-                itemPaddingHorizontal: number;
-                itemPaddingVertical: number;
-                itemRadius: 2;
-                fontSize: number;
-                lineHeight: number;
-                iconSize: number;
-                gap: number;
-            };
-            tabsSegmented: (size: "xl" | "lg" | "md" | "sm") => {
-                height: number;
-                containerPadding: number;
-                itemPaddingHorizontal: number;
-                itemPaddingVertical: number;
-                fontSize: number;
-                lineHeight: number;
-                iconSize: number;
-                gap: number;
-            } | {
-                height: number;
-                containerPadding: number;
-                itemPaddingHorizontal: number;
-                itemPaddingVertical: number;
-                fontSize: number;
-                lineHeight: number;
-                iconSize: number;
-                gap: number;
-            } | {
-                height: number;
-                containerPadding: number;
-                itemPaddingHorizontal: number;
-                itemPaddingVertical: number;
-                fontSize: number;
-                lineHeight: number;
-                iconSize: number;
-                gap: number;
-            } | {
-                height: number;
-                containerPadding: number;
-                itemPaddingHorizontal: number;
-                itemPaddingVertical: number;
-                fontSize: number;
-                lineHeight: number;
-                iconSize: number;
-                gap: number;
-            };
-            checkboxTagGroup: (size: "xl" | "lg" | "md" | "sm") => {
-                height: number;
-                paddingHorizontal: number;
-                paddingVertical: number;
-                fontSize: number;
-                lineHeight: number;
-                gap: number;
-                borderRadius: 4;
-            } | {
-                height: number;
-                paddingHorizontal: number;
-                paddingVertical: number;
-                fontSize: number;
-                lineHeight: number;
-                gap: number;
-                borderRadius: 4;
-            } | {
-                height: number;
-                paddingHorizontal: number;
-                paddingVertical: number;
-                fontSize: number;
-                lineHeight: number;
-                gap: number;
-                borderRadius: 2;
-            } | {
-                height: number;
-                paddingHorizontal: number;
-                paddingVertical: number;
-                fontSize: number;
-                lineHeight: number;
-                gap: number;
-                borderRadius: 2;
-            };
-            badge: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
-                size: number;
-                fontSize: number;
-                lineHeight: number;
-                iconSize: number;
-                padding: number;
-            } | {
-                size: number;
-                fontSize: number;
-                lineHeight: number;
-                iconSize: number;
-                padding: number;
-            } | {
-                size: number;
-                fontSize: number;
-                lineHeight: number;
-                iconSize: number;
-                padding: number;
-            } | {
-                size: number;
-                fontSize: number;
-                lineHeight: number;
-                iconSize: number;
-                padding: number;
-            } | {
-                size: number;
-                fontSize: number;
-                lineHeight: number;
-                iconSize: number;
-                padding: number;
-            };
-            notification: (type: "toast" | "inline") => {
-                width: number;
-                paddingHorizontal: number;
-                paddingVertical: number;
-                gap: number;
-                titleSize: number;
-                messageSize: number;
-                iconSize: number;
-                iconWrapperSize: number;
-                radius: 4;
-            } | {
-                width: string;
-                paddingHorizontal: number;
-                paddingVertical: number;
-                gap: number;
-                titleSize: number;
-                messageSize: number;
-                iconSize: number;
-                iconWrapperSize: number;
-                radius: 8;
-            };
-            notificationPanel: () => {
-                minHeight: number;
-                iconFrameWidth: number;
-                iconSize: number;
-                borderRadius: 8;
-                bodyPaddingHorizontal: number;
-                bodyPaddingVertical: number;
-                textGap: number;
-                contentGap: number;
-                buttonsGap: number;
-                closeButtonSize: number;
-                titleFontSize: number;
-                titleLineHeight: number;
-                descriptionFontSize: number;
-                descriptionLineHeight: number;
-            };
-            progress: (size: "xl" | "lg" | "md" | "sm" | "xs" | "xxs" | "l" | "m" | "s") => {
-                height: number;
-                labelSize: number;
-                helperSize: number;
-                gap: number;
-            } | {
-                height: number;
-                labelSize: number;
-                helperSize: number;
-                gap: number;
-            } | {
-                height: number;
-                labelSize: number;
-                helperSize: number;
-                gap: number;
-            } | {
-                height: number;
-                labelSize: number;
-                helperSize: number;
-                gap: number;
-            } | {
-                height: number;
-                labelSize: number;
-                helperSize: number;
-                gap: number;
-            } | {
-                height: number;
-                labelSize: number;
-                helperSize: number;
-                gap: number;
-            } | {
-                height: number;
-                labelSize: number;
-                helperSize: number;
-                gap: number;
-            } | {
-                height: number;
-                labelSize: number;
-                helperSize: number;
-                gap: number;
-            } | {
-                height: number;
-                labelSize: number;
-                helperSize: number;
-                gap: number;
-            };
-            supportingText: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
-                fontSize: number;
-                lineHeight: string;
-                gap: number;
-                iconSize: number;
-            } | {
-                fontSize: number;
-                lineHeight: string;
-                gap: number;
-                iconSize: number;
-            } | {
-                fontSize: number;
-                lineHeight: string;
-                gap: number;
-                iconSize: number;
-            } | {
-                fontSize: number;
-                lineHeight: string;
-                gap: number;
-                iconSize: number;
-            } | {
-                fontSize: number;
-                lineHeight: string;
-                gap: number;
-                iconSize: number;
-            };
-            iconWrapper: (size: "xl" | "lg" | "md" | "sm" | "xs" | "xxs") => {
-                size: number;
-                iconSize: number;
-                fontSize: number;
-            } | {
-                size: number;
-                iconSize: number;
-                fontSize: number;
-            } | {
-                size: number;
-                iconSize: number;
-                fontSize: number;
-            } | {
-                size: number;
-                iconSize: number;
-                fontSize: number;
-            } | {
-                size: number;
-                iconSize: number;
-                fontSize: number;
-            } | {
-                size: number;
-                iconSize: number;
-                fontSize: number;
-            };
-            stepper: (size: "md" | "sm") => {
-                iconSize: number;
-                titleSize: number;
-                descSize: number;
-                gap: number;
-                currentTitleSize: number;
-                currentDescSize: number;
-                currentPadding: number;
-                tailSize: number;
-            } | {
-                iconSize: number;
-                titleSize: number;
-                descSize: number;
-                gap: number;
-                currentTitleSize: number;
-                currentDescSize: number;
-                currentPadding: number;
-                tailSize: number;
-            };
-            contextMenu: (size: "xl" | "lg" | "md" | "sm") => {
-                paddingVertical: number;
-                itemPaddingHorizontal: number;
-                itemPaddingVertical: number;
-                fontSize: number;
-                lineHeight: number;
-                descriptionFontSize: number;
-                iconSize: number;
-                gap: number;
-                minWidth: number;
-                panelWidth: number;
-                statusDotSize: number;
-                iconWrapperSize: number;
-                triggerOffset: number;
-                borderRadius: number;
-                searchPaddingHorizontal: number;
-                searchPaddingVertical: number;
-                searchGap: number;
-                searchFontSize: number;
-                searchLineHeight: number;
-                searchIconSize: number;
-            } | {
-                paddingVertical: number;
-                itemPaddingHorizontal: number;
-                itemPaddingVertical: number;
-                fontSize: number;
-                lineHeight: number;
-                descriptionFontSize: number;
-                iconSize: number;
-                gap: number;
-                minWidth: number;
-                panelWidth: number;
-                statusDotSize: number;
-                iconWrapperSize: number;
-                triggerOffset: number;
-                borderRadius: number;
-                searchPaddingHorizontal: number;
-                searchPaddingVertical: number;
-                searchGap: number;
-                searchFontSize: number;
-                searchLineHeight: number;
-                searchIconSize: number;
-            } | {
-                paddingVertical: number;
-                itemPaddingHorizontal: number;
-                itemPaddingVertical: number;
-                fontSize: number;
-                lineHeight: number;
-                descriptionFontSize: number;
-                iconSize: number;
-                gap: number;
-                minWidth: number;
-                panelWidth: number;
-                statusDotSize: number;
-                iconWrapperSize: number;
-                triggerOffset: number;
-                borderRadius: number;
-                searchPaddingHorizontal: number;
-                searchPaddingVertical: number;
-                searchGap: number;
-                searchFontSize: number;
-                searchLineHeight: number;
-                searchIconSize: number;
-            } | {
-                paddingVertical: number;
-                itemPaddingHorizontal: number;
-                itemPaddingVertical: number;
-                fontSize: number;
-                lineHeight: number;
-                descriptionFontSize: number;
-                iconSize: number;
-                gap: number;
-                minWidth: number;
-                panelWidth: number;
-                statusDotSize: number;
-                iconWrapperSize: number;
-                triggerOffset: number;
-                borderRadius: number;
-                searchPaddingHorizontal: number;
-                searchPaddingVertical: number;
-                searchGap: number;
-                searchFontSize: number;
-                searchLineHeight: number;
-                searchIconSize: number;
-            };
-            modal: () => {
-                borderRadius: 8;
-                headerPadding: string;
-                contentPadding: number;
-                /** @deprecated Header buttons no longer use IconButton sizes. */
-                headerButtonSize: "xs";
-                headerIconSize: number;
-                headerButtonPadding: number;
-                headerButtonRadius: number;
-                headerMinHeight: number;
-                headerGap: number;
-                footerGap: number;
-                /** @deprecated Modal elevation comes from the scrim, not a drop shadow. */
-                shadow: string;
-                maxWidth: number;
-                overlayColor: string;
-                portalPadding: number;
-                zIndex: number;
-            };
-            drawer: () => {
-                widthSm: number;
-                widthMd: number;
-                widthLg: number;
-                headerHeight: number;
-                headerPaddingX: number;
-                headerPaddingY: number;
-                headerGap: number;
-                titleFontSize: number;
-                titleLineHeight: number;
-                contentPaddingX: number;
-                footerPadding: number;
-                outerPadding: number;
-                containerRadius: number;
-                contentRadius: number;
-                stepperPadding: number;
-                stepperRadius: number;
-                stepperContentGap: number;
-                scrimColor: string;
-                animationDuration: number;
-                zIndex: number;
-            };
-            sidebar: () => {
-                widthExpanded: number;
-                widthCollapsed: number;
-                radius: number;
-                itemHeight: number;
-                iconSize: number;
-                padding: number;
-                sectionLabelHeight: number;
-                nestedItemPaddingLeft: number;
-                nestedItemRailLeft: number;
-                chevronSize: number;
-                externalIconSize: number;
-                chatBadgeSize: number;
-                itemBadgeSize: number;
-                focusOutlineWidth: number;
-                scrollbarWidth: number;
-                popoverGap: number;
-                popoverViewportPadding: number;
-                popoverMinWidth: number;
-                popoverMaxWidth: number;
-                popoverShadow: string;
-                popoverZIndex: number;
-                transitionWidth: string;
-                transitionFadeIn: string;
-                transitionFadeOut: string;
-                transitionItem: string;
-                transitionRows: string;
-            };
-            stepperB2b: () => {
-                chipSize: number;
-                chipRadius: number;
-                chipPaddingTop: number;
-                chipPaddingBottom: number;
-                chipPaddingX: number;
-                chipIconSize: number;
-                numberFontSize: number;
-                numberLineHeight: number;
-                titleFontSize: number;
-                titleLineHeight: number;
-                descriptionFontSize: number;
-                descriptionLineHeight: number;
-                captionFontSize: number;
-                captionLineHeight: number;
-                itemGap: number;
-                contentGap: number;
-                contentMinHeight: number;
-                contentWidth: number;
-                activeCardRadiusVertical: number;
-                activeCardRadiusHorizontal: number;
-                activeCardPaddingTop: number;
-                activeCardPaddingX: number;
-                activeCardPaddingYHorizontal: number;
-                activeCardPaddingLeftHorizontal: number;
-                activeCardGapHorizontal: number;
-                innerConnectorLength: number;
-                connectorSegment: number;
-                connectorCellHeight: number;
-                connectorCellWidth: number;
-                surfaceRadius: number;
-                surfacePaddingVertical: number;
-                surfacePaddingHorizontal: number;
-                horizontalItemGap: number;
-                horizontalFirstItemWidth: number;
-                horizontalItemWidth: number;
-                horizontalConnectorSegment: number;
-                horizontalConnectorGap: number;
-                simpleCardPadding: number;
-                simpleCardRadius: number;
-                simpleCardGap: number;
-                simpleItemGap: number;
-                simpleHorizontalCellWidth: number;
-                simpleHorizontalStubLength: number;
-            };
-            collapsibleB2b: () => {
-                triggerPadding: number;
-                triggerGap: number;
-                triggerMinHeight: number;
-                surfaceRadius: 4;
-                cellRadius: 8;
-                iconSlotSize: number;
-                iconSlotRadius: 4;
-                chevronSize: number;
-                trailingGap: number;
-                textGap: number;
-                titleFontSize: number;
-                titleLineHeight: number;
-                captionFontSize: number;
-                captionLineHeight: number;
-                panelPadding: number;
-                accordionItemGap: number;
-            };
-            toast: () => {
-                minHeight: number;
-                paddingHorizontal: number;
-                paddingVertical: number;
-                borderRadius: 4;
-                gap: number;
-                iconSize: number;
-                closeButtonSize: number;
-                closeIconSize: number;
-                fontSize: number;
-                lineHeight: number;
-                maxWidth: number;
-                containerPadding: number;
-                groupGap: number;
-            };
-            toggleButtonGroup: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
-                height: number;
-                paddingHorizontal: number;
-                fontSize: number;
-                lineHeight: number;
-                iconSize: number;
-                gap: number;
-                borderRadius: 8;
-                itemGap: number;
-            } | {
-                height: number;
-                paddingHorizontal: number;
-                fontSize: number;
-                lineHeight: number;
-                iconSize: number;
-                gap: number;
-                borderRadius: 8;
-                itemGap: number;
-            } | {
-                height: number;
-                paddingHorizontal: number;
-                fontSize: number;
-                lineHeight: number;
-                iconSize: number;
-                gap: number;
-                borderRadius: 6;
-                itemGap: number;
-            } | {
-                height: number;
-                paddingHorizontal: number;
-                fontSize: number;
-                lineHeight: number;
-                iconSize: number;
-                gap: number;
-                borderRadius: 4;
-                itemGap: number;
-            } | {
-                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;
-            };
-        };
-    };
-    setMode: (mode: ThemeMode) => void;
-    setProductContext: (productContext: ProductContext) => void;
-    /** Whether the app uses responsive typography (CSS vars + @media). Defaults to true. */
-    responsive: boolean;
-};
+declare const useResolvedTheme: (overrides?: ThemeOverrideProps) => DesignSystemContextType;
 declare const useId: () => string;
 /**
  * Context for the current modal's ID.
@@ -9993,4 +6750,4 @@ declare const ModalIdContext: React.Context<string | null>;
  */
 declare const useModalId: () => string | null;
 
-export { type BreakpointKey, FontLoader, MOBILE_MAX_WIDTH, ModalIdContext, type ProductContext, type ResponsiveValue, SCALE_STEPS, type ScaleStep, type ThemeColors, type ThemeMode, type ThemeOverrideProps, 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 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 };