@xsolla/xui-core 0.216.0 → 0.217.0

package/index.d.mts

@@ -25,6 +25,18 @@ interface TypographyVariant {
     scaleStep?: string;
     /** The line-height category: "display", "compact", or "text" */
     lineHeightCategory?: "display" | "compact" | "text";
+    /**
+     * Tracking in px, as authored in Figma (negative values tighten).
+     * Only the display variants define it; omitted means "normal".
+     */
+    letterSpacing?: number;
+    /**
+     * Which Figma "Font" role this variant renders in — `display` (heading font),
+     * `compact` (body/UI font) or `text` (paragraph font). Defaults per variant
+     * family when omitted; B2C `display-sm` is the one display token that opts
+     * into the `compact` role.
+     */
+    fontRole?: "display" | "compact" | "text";
 }
 interface TypographyBodyVariant extends TypographyVariant {
     accent?: {
@@ -46,7 +58,15 @@ interface TypographyTokens {
         h5: TypographyVariant;
     };
     basic: {
+        /**
+         * @deprecated Figma models three display sizes. `display` is kept as an
+         * alias of `display-lg` for source compatibility — migrate consumers to
+         * `display-lg` / `display-md` / `display-sm`.
+         */
         display: TypographyVariant;
+        "display-lg": TypographyVariant;
+        "display-md": TypographyVariant;
+        "display-sm": TypographyVariant;
         "body-lg": TypographyBodyVariant;
         "body-md": TypographyBodyVariant;
         "body-sm": TypographyBodyVariant;
@@ -3979,18 +3999,43 @@ declare const colors: {
 };
 type ThemeColors = typeof pentagramDark;
 
+/**
+ * Primitive spacing scale. Mirrors Figma "Scale / spacing/*" variables.
+ *
+ * The numeric step name is the Figma contract — prefer it over inventing new
+ * named aliases. The semantic `spacing` object below aliases the five steps
+ * that already had names.
+ */
+declare const spacingScale: {
+    readonly "25": 2;
+    readonly "50": 4;
+    readonly "75": 6;
+    readonly "100": 8;
+    readonly "150": 12;
+    readonly "200": 16;
+    readonly "250": 20;
+    readonly "300": 24;
+    readonly "350": 28;
+    readonly "400": 32;
+    readonly "450": 36;
+    readonly "500": 40;
+    readonly "600": 48;
+    readonly "700": 56;
+    readonly "800": 64;
+    readonly "900": 72;
+};
 declare const spacing: {
-    xs: number;
-    sm: number;
-    md: number;
-    lg: number;
-    xl: number;
+    xs: 4;
+    sm: 8;
+    md: 16;
+    lg: 24;
+    xl: 32;
     /** @deprecated Use `sm` instead (same 8px). Kept for backwards compatibility. */
-    s: number;
+    s: 8;
     /** @deprecated Use `md` instead (same 16px). Kept for backwards compatibility. */
-    m: number;
+    m: 16;
     /** @deprecated Use `lg` instead (same 24px). Kept for backwards compatibility. */
-    l: number;
+    l: 24;
 };
 declare const radius: {
     button: number;
@@ -4127,6 +4172,10 @@ declare const shape: {
             readonly borderRadius: 2;
             readonly borderWidth: 1;
         };
+        readonly xs: {
+            readonly borderRadius: 2;
+            readonly borderWidth: 1;
+        };
     };
     readonly switch: {
         readonly xl: {
@@ -4283,6 +4332,8 @@ declare const shape: {
     };
     readonly toast: {
         readonly borderRadius: 4;
+        /** Figma "toast/frame/border-width" is 0 — toast is borderless by design. */
+        readonly borderWidth: 0;
     };
     readonly toggleButtonGroup: {
         readonly xl: {
@@ -7116,14 +7167,14 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
         };
     };
     spacing: {
-        xs: number;
-        sm: number;
-        md: number;
-        lg: number;
-        xl: number;
-        s: number;
-        m: number;
-        l: number;
+        xs: 4;
+        sm: 8;
+        md: 16;
+        lg: 24;
+        xl: 32;
+        s: 8;
+        m: 16;
+        l: 24;
     };
     shape: {
         readonly button: {
@@ -7223,6 +7274,10 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
                 readonly borderRadius: 2;
                 readonly borderWidth: 1;
             };
+            readonly xs: {
+                readonly borderRadius: 2;
+                readonly borderWidth: 1;
+            };
         };
         readonly switch: {
             readonly xl: {
@@ -7379,6 +7434,7 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
         };
         readonly toast: {
             readonly borderRadius: 4;
+            readonly borderWidth: 0;
         };
         readonly toggleButtonGroup: {
             readonly xl: {
@@ -7911,31 +7967,31 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
         };
         textarea: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
             height: number;
-            padding: number;
+            padding: 32;
             fontSize: number;
             iconSize: number;
             radius: 8;
         } | {
             height: number;
-            padding: number;
+            padding: 24;
             fontSize: number;
             iconSize: number;
             radius: 8;
         } | {
             height: number;
-            padding: number;
+            padding: 16;
             fontSize: number;
             iconSize: number;
             radius: 6;
         } | {
             height: number;
-            padding: number;
+            padding: 8;
             fontSize: number;
             iconSize: number;
             radius: 4;
         } | {
             height: number;
-            padding: number;
+            padding: 4;
             fontSize: number;
             iconSize: number;
             radius: 4;
@@ -8773,7 +8829,7 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
             triggerGap: number;
             triggerMinHeight: number;
             surfaceRadius: 4;
-            cellRadius: 8;
+            cellRadius: 4;
             iconSlotSize: number;
             iconSlotRadius: 4;
             chevronSize: number;
@@ -9014,4 +9070,4 @@ declare const ModalStackProvider: React.Provider<number>;
 /** Returns the number of currently-open modals. */
 declare const useModalStackDepth: () => number;
 
-export { type BreakpointKey, type ComponentSize, DISPLAY_SCALE_STEPS, type DesignSystemContextType, type DisplayScaleStep, FontLoader, LAYER_OFFSET, MOBILE_MAX_WIDTH, MODAL_LAYER_STEP, ModalIdContext, ModalStackProvider, OVERLAY_LAYER_BASE, OverlayLayerProvider, type ProductContext, type ResponsiveValue, SCALE_STEPS, type ScaleStep, TOAST_LAYER, 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, useModalStackDepth, useOverlayLayer, useResolvedTheme };
+export { type BreakpointKey, type ComponentSize, DISPLAY_SCALE_STEPS, type DesignSystemContextType, type DisplayScaleStep, FontLoader, LAYER_OFFSET, MOBILE_MAX_WIDTH, MODAL_LAYER_STEP, ModalIdContext, ModalStackProvider, OVERLAY_LAYER_BASE, OverlayLayerProvider, type ProductContext, type ResponsiveValue, SCALE_STEPS, type ScaleStep, TOAST_LAYER, 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, spacingScale, stroke, themeConfig, typography, typographyTokens, useDesignSystem, useId, useModalId, useModalStackDepth, useOverlayLayer, useResolvedTheme };

package/index.d.ts

@@ -25,6 +25,18 @@ interface TypographyVariant {
     scaleStep?: string;
     /** The line-height category: "display", "compact", or "text" */
     lineHeightCategory?: "display" | "compact" | "text";
+    /**
+     * Tracking in px, as authored in Figma (negative values tighten).
+     * Only the display variants define it; omitted means "normal".
+     */
+    letterSpacing?: number;
+    /**
+     * Which Figma "Font" role this variant renders in — `display` (heading font),
+     * `compact` (body/UI font) or `text` (paragraph font). Defaults per variant
+     * family when omitted; B2C `display-sm` is the one display token that opts
+     * into the `compact` role.
+     */
+    fontRole?: "display" | "compact" | "text";
 }
 interface TypographyBodyVariant extends TypographyVariant {
     accent?: {
@@ -46,7 +58,15 @@ interface TypographyTokens {
         h5: TypographyVariant;
     };
     basic: {
+        /**
+         * @deprecated Figma models three display sizes. `display` is kept as an
+         * alias of `display-lg` for source compatibility — migrate consumers to
+         * `display-lg` / `display-md` / `display-sm`.
+         */
         display: TypographyVariant;
+        "display-lg": TypographyVariant;
+        "display-md": TypographyVariant;
+        "display-sm": TypographyVariant;
         "body-lg": TypographyBodyVariant;
         "body-md": TypographyBodyVariant;
         "body-sm": TypographyBodyVariant;
@@ -3979,18 +3999,43 @@ declare const colors: {
 };
 type ThemeColors = typeof pentagramDark;
 
+/**
+ * Primitive spacing scale. Mirrors Figma "Scale / spacing/*" variables.
+ *
+ * The numeric step name is the Figma contract — prefer it over inventing new
+ * named aliases. The semantic `spacing` object below aliases the five steps
+ * that already had names.
+ */
+declare const spacingScale: {
+    readonly "25": 2;
+    readonly "50": 4;
+    readonly "75": 6;
+    readonly "100": 8;
+    readonly "150": 12;
+    readonly "200": 16;
+    readonly "250": 20;
+    readonly "300": 24;
+    readonly "350": 28;
+    readonly "400": 32;
+    readonly "450": 36;
+    readonly "500": 40;
+    readonly "600": 48;
+    readonly "700": 56;
+    readonly "800": 64;
+    readonly "900": 72;
+};
 declare const spacing: {
-    xs: number;
-    sm: number;
-    md: number;
-    lg: number;
-    xl: number;
+    xs: 4;
+    sm: 8;
+    md: 16;
+    lg: 24;
+    xl: 32;
     /** @deprecated Use `sm` instead (same 8px). Kept for backwards compatibility. */
-    s: number;
+    s: 8;
     /** @deprecated Use `md` instead (same 16px). Kept for backwards compatibility. */
-    m: number;
+    m: 16;
     /** @deprecated Use `lg` instead (same 24px). Kept for backwards compatibility. */
-    l: number;
+    l: 24;
 };
 declare const radius: {
     button: number;
@@ -4127,6 +4172,10 @@ declare const shape: {
             readonly borderRadius: 2;
             readonly borderWidth: 1;
         };
+        readonly xs: {
+            readonly borderRadius: 2;
+            readonly borderWidth: 1;
+        };
     };
     readonly switch: {
         readonly xl: {
@@ -4283,6 +4332,8 @@ declare const shape: {
     };
     readonly toast: {
         readonly borderRadius: 4;
+        /** Figma "toast/frame/border-width" is 0 — toast is borderless by design. */
+        readonly borderWidth: 0;
     };
     readonly toggleButtonGroup: {
         readonly xl: {
@@ -7116,14 +7167,14 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
         };
     };
     spacing: {
-        xs: number;
-        sm: number;
-        md: number;
-        lg: number;
-        xl: number;
-        s: number;
-        m: number;
-        l: number;
+        xs: 4;
+        sm: 8;
+        md: 16;
+        lg: 24;
+        xl: 32;
+        s: 8;
+        m: 16;
+        l: 24;
     };
     shape: {
         readonly button: {
@@ -7223,6 +7274,10 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
                 readonly borderRadius: 2;
                 readonly borderWidth: 1;
             };
+            readonly xs: {
+                readonly borderRadius: 2;
+                readonly borderWidth: 1;
+            };
         };
         readonly switch: {
             readonly xl: {
@@ -7379,6 +7434,7 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
         };
         readonly toast: {
             readonly borderRadius: 4;
+            readonly borderWidth: 0;
         };
         readonly toggleButtonGroup: {
             readonly xl: {
@@ -7911,31 +7967,31 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
         };
         textarea: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
             height: number;
-            padding: number;
+            padding: 32;
             fontSize: number;
             iconSize: number;
             radius: 8;
         } | {
             height: number;
-            padding: number;
+            padding: 24;
             fontSize: number;
             iconSize: number;
             radius: 8;
         } | {
             height: number;
-            padding: number;
+            padding: 16;
             fontSize: number;
             iconSize: number;
             radius: 6;
         } | {
             height: number;
-            padding: number;
+            padding: 8;
             fontSize: number;
             iconSize: number;
             radius: 4;
         } | {
             height: number;
-            padding: number;
+            padding: 4;
             fontSize: number;
             iconSize: number;
             radius: 4;
@@ -8773,7 +8829,7 @@ declare const themeConfig: (mode?: ThemeMode, productContext?: ProductContext) =
             triggerGap: number;
             triggerMinHeight: number;
             surfaceRadius: 4;
-            cellRadius: 8;
+            cellRadius: 4;
             iconSlotSize: number;
             iconSlotRadius: 4;
             chevronSize: number;
@@ -9014,4 +9070,4 @@ declare const ModalStackProvider: React.Provider<number>;
 /** Returns the number of currently-open modals. */
 declare const useModalStackDepth: () => number;
 
-export { type BreakpointKey, type ComponentSize, DISPLAY_SCALE_STEPS, type DesignSystemContextType, type DisplayScaleStep, FontLoader, LAYER_OFFSET, MOBILE_MAX_WIDTH, MODAL_LAYER_STEP, ModalIdContext, ModalStackProvider, OVERLAY_LAYER_BASE, OverlayLayerProvider, type ProductContext, type ResponsiveValue, SCALE_STEPS, type ScaleStep, TOAST_LAYER, 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, useModalStackDepth, useOverlayLayer, useResolvedTheme };
+export { type BreakpointKey, type ComponentSize, DISPLAY_SCALE_STEPS, type DesignSystemContextType, type DisplayScaleStep, FontLoader, LAYER_OFFSET, MOBILE_MAX_WIDTH, MODAL_LAYER_STEP, ModalIdContext, ModalStackProvider, OVERLAY_LAYER_BASE, OverlayLayerProvider, type ProductContext, type ResponsiveValue, SCALE_STEPS, type ScaleStep, TOAST_LAYER, 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, spacingScale, stroke, themeConfig, typography, typographyTokens, useDesignSystem, useId, useModalId, useModalStackDepth, useOverlayLayer, useResolvedTheme };

package/index.js

@@ -67,6 +67,7 @@ __export(index_exports, {
   shadow: () => shadow,
   shape: () => shape,
   spacing: () => spacing,
+  spacingScale: () => spacingScale,
   stroke: () => stroke,
   themeConfig: () => themeConfig,
   typography: () => typography,
@@ -2704,18 +2705,36 @@ var colors = {
 };
 
 // src/tokens/spacing.ts
+var spacingScale = {
+  "25": 2,
+  "50": 4,
+  "75": 6,
+  "100": 8,
+  "150": 12,
+  "200": 16,
+  "250": 20,
+  "300": 24,
+  "350": 28,
+  "400": 32,
+  "450": 36,
+  "500": 40,
+  "600": 48,
+  "700": 56,
+  "800": 64,
+  "900": 72
+};
 var spacing = {
-  xs: 4,
-  sm: 8,
-  md: 16,
-  lg: 24,
-  xl: 32,
+  xs: spacingScale["50"],
+  sm: spacingScale["100"],
+  md: spacingScale["200"],
+  lg: spacingScale["300"],
+  xl: spacingScale["400"],
   /** @deprecated Use `sm` instead (same 8px). Kept for backwards compatibility. */
-  s: 8,
+  s: spacingScale["100"],
   /** @deprecated Use `md` instead (same 16px). Kept for backwards compatibility. */
-  m: 16,
+  m: spacingScale["200"],
   /** @deprecated Use `lg` instead (same 24px). Kept for backwards compatibility. */
-  l: 24
+  l: spacingScale["300"]
 };
 var radius = {
   button: 4,
@@ -2780,7 +2799,8 @@ var shape = {
     xl: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
     lg: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
     md: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
-    sm: { borderRadius: radiusScale["25"], borderWidth: stroke["1"] }
+    sm: { borderRadius: radiusScale["25"], borderWidth: stroke["1"] },
+    xs: { borderRadius: radiusScale["25"], borderWidth: stroke["1"] }
   },
   switch: {
     xl: { borderRadius: radiusScale["50"], borderWidth: stroke["1"] },
@@ -2843,7 +2863,9 @@ var shape = {
     borderRadius: radiusScale["100"]
   },
   toast: {
-    borderRadius: radiusScale["50"]
+    borderRadius: radiusScale["50"],
+    /** Figma "toast/frame/border-width" is 0 — toast is borderless by design. */
+    borderWidth: 0
   },
   toggleButtonGroup: {
     xl: { borderRadius: radiusScale["100"], borderWidth: stroke["1"] },
@@ -3002,6 +3024,92 @@ var responsiveTypographyScale = {
 };
 
 // src/tokens/typography.ts
+var displayVariants = {
+  b2c: {
+    "display-lg": {
+      fontSize: fontSize["900"].common,
+      lineHeight: `${lineHeightDisplay["900"].common}px`,
+      fontWeight: 700,
+      scaleStep: "900",
+      lineHeightCategory: "display",
+      letterSpacing: -4,
+      fontRole: "display"
+    },
+    "display-md": {
+      fontSize: fontSize["850"].common,
+      lineHeight: `${lineHeightDisplay["850"].common}px`,
+      fontWeight: 700,
+      scaleStep: "850",
+      lineHeightCategory: "display",
+      letterSpacing: -3,
+      fontRole: "display"
+    },
+    "display-sm": {
+      fontSize: fontSize["300"].common,
+      lineHeight: `${lineHeightCompact["300"].common}px`,
+      fontWeight: 500,
+      scaleStep: "300",
+      lineHeightCategory: "compact",
+      fontRole: "compact"
+    }
+  },
+  b2b: {
+    "display-lg": {
+      fontSize: fontSize["900"].common,
+      lineHeight: `${lineHeightDisplay["900"].common}px`,
+      fontWeight: 300,
+      scaleStep: "900",
+      lineHeightCategory: "display",
+      letterSpacing: -4,
+      fontRole: "display"
+    },
+    "display-md": {
+      fontSize: fontSize["850"].common,
+      lineHeight: `${lineHeightDisplay["850"].common}px`,
+      fontWeight: 300,
+      scaleStep: "850",
+      lineHeightCategory: "display",
+      letterSpacing: -3,
+      fontRole: "display"
+    },
+    "display-sm": {
+      fontSize: fontSize["750"].common,
+      lineHeight: `${lineHeightDisplay["750"].common}px`,
+      fontWeight: 400,
+      scaleStep: "750",
+      lineHeightCategory: "display",
+      fontRole: "display"
+    }
+  },
+  corpsite: {
+    "display-lg": {
+      fontSize: fontSize["900"].common,
+      lineHeight: `${lineHeightDisplay["900"].common}px`,
+      fontWeight: 300,
+      scaleStep: "900",
+      lineHeightCategory: "display",
+      letterSpacing: -4,
+      fontRole: "display"
+    },
+    "display-md": {
+      fontSize: fontSize["850"].common,
+      lineHeight: `${lineHeightDisplay["850"].common}px`,
+      fontWeight: 300,
+      scaleStep: "850",
+      lineHeightCategory: "display",
+      letterSpacing: -3,
+      fontRole: "display"
+    },
+    "display-sm": {
+      fontSize: fontSize["750"].common,
+      lineHeight: `${lineHeightDisplay["750"].common}px`,
+      fontWeight: 400,
+      scaleStep: "750",
+      lineHeightCategory: "display",
+      fontRole: "display"
+    }
+  }
+};
 var typographyTokens = {
   b2c: {
     heading: {
@@ -3042,13 +3150,8 @@ var typographyTokens = {
       }
     },
     basic: {
-      display: {
-        fontSize: fontSize["550"].common,
-        lineHeight: `${lineHeightDisplay["550"].common}px`,
-        fontWeight: 800,
-        scaleStep: "550",
-        lineHeightCategory: "display"
-      },
+      ...displayVariants.b2c,
+      display: displayVariants.b2c["display-lg"],
       "body-lg": {
         fontSize: fontSize["175"].common,
         lineHeight: `${lineHeightCompact["175"].common}px`,
@@ -3155,13 +3258,8 @@ var typographyTokens = {
       }
     },
     basic: {
-      display: {
-        fontSize: fontSize["750"].common,
-        lineHeight: `${lineHeightDisplay["750"].common}px`,
-        fontWeight: 400,
-        scaleStep: "750",
-        lineHeightCategory: "display"
-      },
+      ...displayVariants.b2b,
+      display: displayVariants.b2b["display-lg"],
       "body-lg": {
         fontSize: fontSize["175"].common,
         lineHeight: `${lineHeightCompact["175"].common}px`,
@@ -3268,16 +3366,8 @@ var typographyTokens = {
       }
     },
     basic: {
-      // Figma splits corpsite display into display-lg (96px) / display-md (80px)
-      // / display-sm (64px). The app models a single `display`; mapped to
-      // display-lg (step 900) — the largest, matching Figma's primary display.
-      display: {
-        fontSize: fontSize["900"].common,
-        lineHeight: `${lineHeightDisplay["900"].common}px`,
-        fontWeight: 300,
-        scaleStep: "900",
-        lineHeightCategory: "display"
-      },
+      ...displayVariants.corpsite,
+      display: displayVariants.corpsite["display-lg"],
       "body-lg": {
         fontSize: fontSize["175"].common,
         lineHeight: `${lineHeightCompact["175"].common}px`,
@@ -3355,8 +3445,18 @@ var getTypographyVariant = (productContext, variant) => {
   if (variant in tokens.heading) {
     return tokens.heading[variant];
   }
-  if (variant === "display") {
-    return tokens.basic.display;
+  const displayVariantMap = {
+    display: "display-lg",
+    displayLg: "display-lg",
+    displayMd: "display-md",
+    displaySm: "display-sm",
+    "display-lg": "display-lg",
+    "display-md": "display-md",
+    "display-sm": "display-sm"
+  };
+  const displayKey = displayVariantMap[variant];
+  if (displayKey) {
+    return tokens.basic[displayKey];
   }
   const bodyVariantMap = {
     bodyLg: "body-lg",
@@ -5035,7 +5135,10 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
         triggerGap: 12,
         triggerMinHeight: 56,
         surfaceRadius: radiusScale["50"],
-        cellRadius: radiusScale["100"],
+        // Must match surfaceRadius: the root clips with `overflow: hidden`, so a
+        // larger cell radius makes the trigger cell's corners show through the
+        // smaller root arc (XUITSD-55).
+        cellRadius: radiusScale["50"],
         iconSlotSize: 32,
         iconSlotRadius: radiusScale["50"],
         chevronSize: 24,
@@ -5282,6 +5385,7 @@ var useModalStackDepth = () => (0, import_react3.useContext)(ModalStackContext);
   shadow,
   shape,
   spacing,
+  spacingScale,
   stroke,
   themeConfig,
   typography,