@xsolla/xui-core 0.134.0 → 0.136.0

package/index.js

@@ -31,12 +31,19 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   FontLoader: () => FontLoader,
+  MOBILE_MAX_WIDTH: () => MOBILE_MAX_WIDTH,
   ModalIdContext: () => ModalIdContext,
+  SCALE_STEPS: () => SCALE_STEPS,
+  TypographyStyleLoader: () => TypographyStyleLoader,
   XUIProvider: () => XUIProvider,
+  breakpoints: () => breakpoints,
   colors: () => colors,
+  cssVar: () => cssVar,
   defaultProductContext: () => defaultProductContext,
   fontFacesCSS: () => fontFacesCSS,
+  fontSize: () => fontSize,
   fonts: () => fonts,
+  generateTypographyCSS: () => generateTypographyCSS,
   getFonts: () => getFonts,
   getTypographyTokens: () => getTypographyTokens,
   getTypographyVariant: () => getTypographyVariant,
@@ -44,7 +51,11 @@ __export(index_exports, {
   isIOS: () => isIOS,
   isNative: () => isNative,
   isWeb: () => isWeb,
+  lineHeightCompact: () => lineHeightCompact,
+  lineHeightDisplay: () => lineHeightDisplay,
+  lineHeightText: () => lineHeightText,
   radius: () => radius,
+  responsiveTypographyScale: () => responsiveTypographyScale,
   shadow: () => shadow,
   spacing: () => spacing,
   themeConfig: () => themeConfig,
@@ -56,7 +67,7 @@ __export(index_exports, {
   useResolvedTheme: () => useResolvedTheme
 });
 module.exports = __toCommonJS(index_exports);
-var import_react2 = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
 
 // src/tokens/pentagram-dark.json
 var pentagram_dark_default = {
@@ -1302,12 +1313,16 @@ var bodyFont = `"Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`;
 var fonts = {
   heading: displayFontByContext.b2b,
   body: bodyFont,
+  /** Paragraph/reading font — same families as body */
+  text: bodyFont,
   /** @deprecated Use `heading` or `body` instead */
   primary: bodyFont
 };
 var getFonts = (productContext = "b2b") => ({
   heading: displayFontByContext[productContext],
   body: bodyFont,
+  /** Paragraph/reading font — same families as body */
+  text: bodyFont,
   /** @deprecated Use `heading` or `body` instead */
   primary: bodyFont
 });
@@ -1322,189 +1337,453 @@ var typography = {
 var typographyTokens = {
   b2c: {
     heading: {
-      h1: { fontSize: 40, lineHeight: "48px", fontWeight: 700 },
-      h2: { fontSize: 32, lineHeight: "38px", fontWeight: 700 },
-      h3: { fontSize: 28, lineHeight: "34px", fontWeight: 700 },
-      h4: { fontSize: 24, lineHeight: "28px", fontWeight: 700 },
-      h5: { fontSize: 20, lineHeight: "24px", fontWeight: 700 }
+      h1: {
+        fontSize: 40,
+        lineHeight: "40px",
+        fontWeight: 700,
+        scaleStep: "450",
+        lineHeightCategory: "display"
+      },
+      h2: {
+        fontSize: 32,
+        lineHeight: "32px",
+        fontWeight: 700,
+        scaleStep: "350",
+        lineHeightCategory: "display"
+      },
+      h3: {
+        fontSize: 28,
+        lineHeight: "28px",
+        fontWeight: 700,
+        scaleStep: "300",
+        lineHeightCategory: "display"
+      },
+      h4: {
+        fontSize: 24,
+        lineHeight: "24px",
+        fontWeight: 700,
+        scaleStep: "250",
+        lineHeightCategory: "display"
+      },
+      h5: {
+        fontSize: 20,
+        lineHeight: "20px",
+        fontWeight: 700,
+        scaleStep: "200",
+        lineHeightCategory: "display"
+      }
     },
     basic: {
-      display: { fontSize: 48, lineHeight: "58px", fontWeight: 800 },
+      display: {
+        fontSize: 48,
+        lineHeight: "48px",
+        fontWeight: 800,
+        scaleStep: "550",
+        lineHeightCategory: "display"
+      },
       "body-lg": {
         fontSize: 18,
         lineHeight: "24px",
         fontWeight: 400,
+        scaleStep: "175",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "26px", spacing: 20 }
+        paragraph: {
+          lineHeight: "26px",
+          spacing: 20,
+          lineHeightScaleStep: "175"
+        }
       },
       "body-md": {
         fontSize: 16,
         lineHeight: "20px",
         fontWeight: 400,
+        scaleStep: "150",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "22px", spacing: 16 }
+        paragraph: {
+          lineHeight: "22px",
+          spacing: 16,
+          lineHeightScaleStep: "150"
+        }
       },
       "body-sm": {
         fontSize: 14,
         lineHeight: "18px",
         fontWeight: 400,
+        scaleStep: "125",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "20px", spacing: 12 }
+        paragraph: {
+          lineHeight: "20px",
+          spacing: 12,
+          lineHeightScaleStep: "125"
+        }
       },
       "body-xs": {
         fontSize: 12,
         lineHeight: "16px",
         fontWeight: 400,
+        scaleStep: "100",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "18px", spacing: 8 }
+        paragraph: {
+          lineHeight: "18px",
+          spacing: 8,
+          lineHeightScaleStep: "100"
+        }
       },
       "body-xxs": {
         fontSize: 10,
         lineHeight: "14px",
         fontWeight: 400,
+        scaleStep: "75",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "14px", spacing: 6 }
+        paragraph: {
+          lineHeight: "14px",
+          spacing: 6,
+          lineHeightScaleStep: "75"
+        }
       }
     }
   },
   b2b: {
     heading: {
-      h1: { fontSize: 56, lineHeight: "68px", fontWeight: 400 },
-      h2: { fontSize: 48, lineHeight: "58px", fontWeight: 400 },
-      h3: { fontSize: 32, lineHeight: "38px", fontWeight: 400 },
-      h4: { fontSize: 24, lineHeight: "28px", fontWeight: 400 },
-      h5: { fontSize: 20, lineHeight: "24px", fontWeight: 600 }
+      h1: {
+        fontSize: 56,
+        lineHeight: "56px",
+        fontWeight: 400,
+        scaleStep: "650",
+        lineHeightCategory: "display"
+      },
+      h2: {
+        fontSize: 48,
+        lineHeight: "48px",
+        fontWeight: 400,
+        scaleStep: "550",
+        lineHeightCategory: "display"
+      },
+      h3: {
+        fontSize: 32,
+        lineHeight: "32px",
+        fontWeight: 400,
+        scaleStep: "350",
+        lineHeightCategory: "display"
+      },
+      h4: {
+        fontSize: 24,
+        lineHeight: "24px",
+        fontWeight: 400,
+        scaleStep: "250",
+        lineHeightCategory: "display"
+      },
+      h5: {
+        fontSize: 20,
+        lineHeight: "20px",
+        fontWeight: 600,
+        scaleStep: "200",
+        lineHeightCategory: "display"
+      }
     },
     basic: {
-      display: { fontSize: 64, lineHeight: "78px", fontWeight: 400 },
+      display: {
+        fontSize: 64,
+        lineHeight: "64px",
+        fontWeight: 400,
+        scaleStep: "750",
+        lineHeightCategory: "display"
+      },
       "body-lg": {
         fontSize: 18,
         lineHeight: "24px",
         fontWeight: 400,
+        scaleStep: "175",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "26px", spacing: 20 }
+        paragraph: {
+          lineHeight: "26px",
+          spacing: 20,
+          lineHeightScaleStep: "175"
+        }
       },
       "body-md": {
         fontSize: 16,
         lineHeight: "20px",
         fontWeight: 400,
+        scaleStep: "150",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "22px", spacing: 16 }
+        paragraph: {
+          lineHeight: "22px",
+          spacing: 16,
+          lineHeightScaleStep: "150"
+        }
       },
       "body-sm": {
         fontSize: 14,
         lineHeight: "18px",
         fontWeight: 400,
+        scaleStep: "125",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "20px", spacing: 12 }
+        paragraph: {
+          lineHeight: "20px",
+          spacing: 12,
+          lineHeightScaleStep: "125"
+        }
       },
       "body-xs": {
         fontSize: 12,
         lineHeight: "16px",
         fontWeight: 400,
+        scaleStep: "100",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "18px", spacing: 8 }
+        paragraph: {
+          lineHeight: "18px",
+          spacing: 8,
+          lineHeightScaleStep: "100"
+        }
       },
       "body-xxs": {
         fontSize: 10,
         lineHeight: "14px",
         fontWeight: 400,
+        scaleStep: "75",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "14px", spacing: 6 }
+        paragraph: {
+          lineHeight: "14px",
+          spacing: 6,
+          lineHeightScaleStep: "75"
+        }
       }
     }
   },
   paystation: {
     heading: {
-      h1: { fontSize: 28, lineHeight: "34px", fontWeight: 700 },
-      h2: { fontSize: 24, lineHeight: "28px", fontWeight: 700 },
-      h3: { fontSize: 20, lineHeight: "24px", fontWeight: 700 },
-      h4: { fontSize: 18, lineHeight: "22px", fontWeight: 700 },
-      h5: { fontSize: 16, lineHeight: "20px", fontWeight: 700 }
+      h1: {
+        fontSize: 28,
+        lineHeight: "28px",
+        fontWeight: 700,
+        scaleStep: "300",
+        lineHeightCategory: "display"
+      },
+      h2: {
+        fontSize: 24,
+        lineHeight: "24px",
+        fontWeight: 700,
+        scaleStep: "250",
+        lineHeightCategory: "display"
+      },
+      h3: {
+        fontSize: 20,
+        lineHeight: "20px",
+        fontWeight: 700,
+        scaleStep: "200",
+        lineHeightCategory: "display"
+      },
+      h4: {
+        fontSize: 18,
+        lineHeight: "18px",
+        fontWeight: 700,
+        scaleStep: "175",
+        lineHeightCategory: "display"
+      },
+      h5: {
+        fontSize: 16,
+        lineHeight: "16px",
+        fontWeight: 700,
+        scaleStep: "150",
+        lineHeightCategory: "display"
+      }
     },
     basic: {
-      display: { fontSize: 40, lineHeight: "48px", fontWeight: 800 },
+      display: {
+        fontSize: 40,
+        lineHeight: "40px",
+        fontWeight: 800,
+        scaleStep: "450",
+        lineHeightCategory: "display"
+      },
       "body-lg": {
         fontSize: 16,
         lineHeight: "20px",
         fontWeight: 400,
+        scaleStep: "150",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "22px", spacing: 16 }
+        paragraph: {
+          lineHeight: "22px",
+          spacing: 16,
+          lineHeightScaleStep: "150"
+        }
       },
       "body-md": {
         fontSize: 14,
         lineHeight: "18px",
         fontWeight: 400,
+        scaleStep: "125",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "20px", spacing: 12 }
+        paragraph: {
+          lineHeight: "20px",
+          spacing: 12,
+          lineHeightScaleStep: "125"
+        }
       },
       "body-sm": {
         fontSize: 12,
         lineHeight: "16px",
         fontWeight: 400,
+        scaleStep: "100",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "18px", spacing: 8 }
+        paragraph: {
+          lineHeight: "18px",
+          spacing: 8,
+          lineHeightScaleStep: "100"
+        }
       },
       "body-xs": {
         fontSize: 10,
         lineHeight: "14px",
         fontWeight: 400,
+        scaleStep: "75",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "14px", spacing: 6 }
+        paragraph: {
+          lineHeight: "14px",
+          spacing: 6,
+          lineHeightScaleStep: "75"
+        }
       },
       "body-xxs": {
         fontSize: 10,
         lineHeight: "14px",
         fontWeight: 400,
+        scaleStep: "75",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "14px", spacing: 6 }
+        paragraph: {
+          lineHeight: "14px",
+          spacing: 6,
+          lineHeightScaleStep: "75"
+        }
       }
     }
   },
   presentation: {
     heading: {
-      h1: { fontSize: 56, lineHeight: "68px", fontWeight: 700 },
-      h2: { fontSize: 48, lineHeight: "58px", fontWeight: 700 },
-      h3: { fontSize: 40, lineHeight: "48px", fontWeight: 700 },
-      h4: { fontSize: 32, lineHeight: "38px", fontWeight: 700 },
-      h5: { fontSize: 28, lineHeight: "34px", fontWeight: 700 }
+      h1: {
+        fontSize: 56,
+        lineHeight: "56px",
+        fontWeight: 700,
+        scaleStep: "650",
+        lineHeightCategory: "display"
+      },
+      h2: {
+        fontSize: 48,
+        lineHeight: "48px",
+        fontWeight: 700,
+        scaleStep: "550",
+        lineHeightCategory: "display"
+      },
+      h3: {
+        fontSize: 40,
+        lineHeight: "40px",
+        fontWeight: 700,
+        scaleStep: "450",
+        lineHeightCategory: "display"
+      },
+      h4: {
+        fontSize: 32,
+        lineHeight: "32px",
+        fontWeight: 700,
+        scaleStep: "350",
+        lineHeightCategory: "display"
+      },
+      h5: {
+        fontSize: 28,
+        lineHeight: "28px",
+        fontWeight: 700,
+        scaleStep: "300",
+        lineHeightCategory: "display"
+      }
     },
     basic: {
-      display: { fontSize: 64, lineHeight: "78px", fontWeight: 800 },
+      display: {
+        fontSize: 64,
+        lineHeight: "64px",
+        fontWeight: 800,
+        scaleStep: "750",
+        lineHeightCategory: "display"
+      },
       "body-lg": {
         fontSize: 24,
         lineHeight: "30px",
         fontWeight: 400,
+        scaleStep: "250",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "34px", spacing: 24 }
+        paragraph: {
+          lineHeight: "34px",
+          spacing: 24,
+          lineHeightScaleStep: "250"
+        }
       },
       "body-md": {
         fontSize: 20,
         lineHeight: "26px",
         fontWeight: 400,
+        scaleStep: "200",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "28px", spacing: 20 }
+        paragraph: {
+          lineHeight: "28px",
+          spacing: 20,
+          lineHeightScaleStep: "200"
+        }
       },
       "body-sm": {
         fontSize: 18,
         lineHeight: "24px",
         fontWeight: 400,
+        scaleStep: "175",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "26px", spacing: 16 }
+        paragraph: {
+          lineHeight: "26px",
+          spacing: 16,
+          lineHeightScaleStep: "175"
+        }
       },
       "body-xs": {
         fontSize: 16,
         lineHeight: "20px",
         fontWeight: 400,
+        scaleStep: "150",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "22px", spacing: 12 }
+        paragraph: {
+          lineHeight: "22px",
+          spacing: 12,
+          lineHeightScaleStep: "150"
+        }
       },
       "body-xxs": {
         fontSize: 16,
         lineHeight: "20px",
         fontWeight: 400,
+        scaleStep: "150",
+        lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
-        paragraph: { lineHeight: "22px", spacing: 12 }
+        paragraph: {
+          lineHeight: "22px",
+          spacing: 12,
+          lineHeightScaleStep: "150"
+        }
       }
     }
   }
@@ -1691,6 +1970,167 @@ var FontLoader = () => {
 };
 FontLoader.displayName = "FontLoader";
 
+// src/styles/TypographyStyleLoader.tsx
+var import_react2 = require("react");
+
+// src/tokens/responsive-typography.ts
+var SCALE_STEPS = [
+  "75",
+  "100",
+  "125",
+  "150",
+  "175",
+  "200",
+  "250",
+  "300",
+  "350",
+  "450",
+  "550",
+  "650",
+  "750"
+];
+var fontSize = {
+  "75": { common: 10, mobile: 10, desktop: 10 },
+  "100": { common: 12, mobile: 11, desktop: 12 },
+  "125": { common: 14, mobile: 12, desktop: 14 },
+  "150": { common: 16, mobile: 14, desktop: 16 },
+  "175": { common: 18, mobile: 16, desktop: 18 },
+  "200": { common: 20, mobile: 18, desktop: 20 },
+  "250": { common: 24, mobile: 20, desktop: 24 },
+  "300": { common: 28, mobile: 24, desktop: 28 },
+  "350": { common: 32, mobile: 28, desktop: 32 },
+  "450": { common: 40, mobile: 32, desktop: 40 },
+  "550": { common: 48, mobile: 40, desktop: 48 },
+  "650": { common: 56, mobile: 48, desktop: 56 },
+  "750": { common: 64, mobile: 56, desktop: 64 }
+};
+var lineHeightDisplay = {
+  "75": { common: 10, mobile: 10, desktop: 10 },
+  "100": { common: 12, mobile: 11, desktop: 12 },
+  "125": { common: 14, mobile: 12, desktop: 14 },
+  "150": { common: 16, mobile: 14, desktop: 16 },
+  "175": { common: 18, mobile: 16, desktop: 18 },
+  "200": { common: 20, mobile: 18, desktop: 20 },
+  "250": { common: 24, mobile: 20, desktop: 24 },
+  "300": { common: 28, mobile: 24, desktop: 28 },
+  "350": { common: 32, mobile: 28, desktop: 32 },
+  "450": { common: 40, mobile: 32, desktop: 40 },
+  "550": { common: 48, mobile: 40, desktop: 48 },
+  "650": { common: 56, mobile: 48, desktop: 56 },
+  "750": { common: 64, mobile: 56, desktop: 64 }
+};
+var lineHeightCompact = {
+  "75": { common: 14, mobile: 13, desktop: 14 },
+  "100": { common: 16, mobile: 14, desktop: 16 },
+  "125": { common: 18, mobile: 16, desktop: 18 },
+  "150": { common: 20, mobile: 18, desktop: 20 },
+  "175": { common: 24, mobile: 20, desktop: 24 },
+  "200": { common: 26, mobile: 24, desktop: 26 },
+  "250": { common: 30, mobile: 26, desktop: 30 },
+  "300": { common: 36, mobile: 30, desktop: 36 },
+  "350": { common: 42, mobile: 36, desktop: 42 },
+  "450": { common: 52, mobile: 42, desktop: 52 },
+  "550": { common: 62, mobile: 52, desktop: 62 },
+  "650": { common: 72, mobile: 62, desktop: 72 },
+  "750": { common: 82, mobile: 72, desktop: 82 }
+};
+var lineHeightText = {
+  "75": { common: 14, mobile: 13, desktop: 14 },
+  "100": { common: 18, mobile: 14, desktop: 18 },
+  "125": { common: 20, mobile: 16, desktop: 20 },
+  "150": { common: 22, mobile: 18, desktop: 22 },
+  "175": { common: 26, mobile: 20, desktop: 26 },
+  "200": { common: 28, mobile: 24, desktop: 28 },
+  "250": { common: 34, mobile: 26, desktop: 34 },
+  "300": { common: 40, mobile: 30, desktop: 40 },
+  "350": { common: 44, mobile: 36, desktop: 44 },
+  "450": { common: 56, mobile: 42, desktop: 56 },
+  "550": { common: 66, mobile: 52, desktop: 66 },
+  "650": { common: 78, mobile: 62, desktop: 78 },
+  "750": { common: 88, mobile: 72, desktop: 88 }
+};
+var responsiveTypographyScale = {
+  fontSize,
+  lineHeightDisplay,
+  lineHeightCompact,
+  lineHeightText
+};
+
+// src/tokens/breakpoints.ts
+var breakpoints = {
+  /** Mobile: 0 – 767px */
+  mobile: 0,
+  /** Desktop: 768px and above */
+  desktop: 768
+};
+var MOBILE_MAX_WIDTH = breakpoints.desktop - 1;
+
+// src/styles/typography-css.ts
+function buildDeclarations(mode) {
+  const lines = [];
+  for (const step of SCALE_STEPS) {
+    const fs = fontSize[step];
+    lines.push(
+      `--xui-font-size-${step}:${fs[mode === "desktop" ? "common" : "mobile"]}px`
+    );
+  }
+  for (const step of SCALE_STEPS) {
+    const lh = lineHeightDisplay[step];
+    lines.push(
+      `--xui-lh-display-${step}:${lh[mode === "desktop" ? "common" : "mobile"]}px`
+    );
+  }
+  for (const step of SCALE_STEPS) {
+    const lh = lineHeightCompact[step];
+    lines.push(
+      `--xui-lh-compact-${step}:${lh[mode === "desktop" ? "common" : "mobile"]}px`
+    );
+  }
+  for (const step of SCALE_STEPS) {
+    const lh = lineHeightText[step];
+    lines.push(
+      `--xui-lh-text-${step}:${lh[mode === "desktop" ? "common" : "mobile"]}px`
+    );
+  }
+  return lines.join(";");
+}
+var _cached = null;
+function generateTypographyCSS() {
+  if (_cached) return _cached;
+  const desktopVars = buildDeclarations("desktop");
+  const mobileVars = buildDeclarations("mobile");
+  _cached = `:root{${desktopVars}}@media(max-width:${MOBILE_MAX_WIDTH}px){:root{${mobileVars}}}`;
+  return _cached;
+}
+var cssVar = {
+  fontSize: (step) => `var(--xui-font-size-${step})`,
+  lhDisplay: (step) => `var(--xui-lh-display-${step})`,
+  lhCompact: (step) => `var(--xui-lh-compact-${step})`,
+  lhText: (step) => `var(--xui-lh-text-${step})`
+};
+
+// src/styles/TypographyStyleLoader.tsx
+var injected2 = false;
+function injectTypographyStyles() {
+  if (!isWeb || injected2) return;
+  const style = document.createElement("style");
+  style.setAttribute("data-xui-typography", "");
+  style.textContent = generateTypographyCSS();
+  document.head.appendChild(style);
+  injected2 = true;
+}
+var TypographyStyleLoader = () => {
+  const mountedRef = (0, import_react2.useRef)(false);
+  (0, import_react2.useEffect)(() => {
+    if (!mountedRef.current) {
+      injectTypographyStyles();
+      mountedRef.current = true;
+    }
+  }, []);
+  return null;
+};
+TypographyStyleLoader.displayName = "TypographyStyleLoader";
+
 // src/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var DEPRECATED_MODES = /* @__PURE__ */ new Set([
@@ -2653,7 +3093,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
       },
       modal: () => {
         return {
-          borderRadius: 12,
+          borderRadius: 8,
           headerPadding: 8,
           contentPadding: 40,
           headerButtonSize: "xl",
@@ -2740,7 +3180,7 @@ var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
     }
   };
 };
-var DesignSystemContext = (0, import_react2.createContext)(
+var DesignSystemContext = (0, import_react3.createContext)(
   void 0
 );
 var XUIProvider = ({
@@ -2749,11 +3189,11 @@ var XUIProvider = ({
   initialProductContext = defaultProductContext,
   loadFonts = true
 }) => {
-  const [mode, setMode] = (0, import_react2.useState)(initialMode);
-  const [productContext, setProductContext] = (0, import_react2.useState)(
+  const [mode, setMode] = (0, import_react3.useState)(initialMode);
+  const [productContext, setProductContext] = (0, import_react3.useState)(
     initialProductContext
   );
-  const value = (0, import_react2.useMemo)(
+  const value = (0, import_react3.useMemo)(
     () => ({
       mode,
       setMode,
@@ -2765,11 +3205,12 @@ var XUIProvider = ({
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DesignSystemContext.Provider, { value, children: [
     loadFonts && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontLoader, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TypographyStyleLoader, {}),
     children
   ] });
 };
 var useDesignSystem = () => {
-  const context = (0, import_react2.useContext)(DesignSystemContext);
+  const context = (0, import_react3.useContext)(DesignSystemContext);
   if (!context) {
     return {
       mode: "dark",
@@ -2787,7 +3228,7 @@ var useResolvedTheme = (overrides) => {
   const context = useDesignSystem();
   const resolvedMode = overrides?.themeMode ?? context.mode;
   const resolvedProductContext = overrides?.themeProductContext ?? context.productContext;
-  const theme = (0, import_react2.useMemo)(() => {
+  const theme = (0, import_react3.useMemo)(() => {
     if (resolvedMode === context.mode && resolvedProductContext === context.productContext) {
       return context.theme;
     }
@@ -2807,23 +3248,30 @@ var useResolvedTheme = (overrides) => {
   };
 };
 var idCounter = 0;
-var hasReactUseId = typeof import_react2.default.useId === "function";
+var hasReactUseId = typeof import_react3.default.useId === "function";
 var useIdFallback = () => {
-  const [id] = (0, import_react2.useState)(() => `xui-${++idCounter}`);
+  const [id] = (0, import_react3.useState)(() => `xui-${++idCounter}`);
   return id;
 };
-var useId = hasReactUseId ? import_react2.default.useId : useIdFallback;
-var ModalIdContext = (0, import_react2.createContext)(null);
-var useModalId = () => (0, import_react2.useContext)(ModalIdContext);
+var useId = hasReactUseId ? import_react3.default.useId : useIdFallback;
+var ModalIdContext = (0, import_react3.createContext)(null);
+var useModalId = () => (0, import_react3.useContext)(ModalIdContext);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   FontLoader,
+  MOBILE_MAX_WIDTH,
   ModalIdContext,
+  SCALE_STEPS,
+  TypographyStyleLoader,
   XUIProvider,
+  breakpoints,
   colors,
+  cssVar,
   defaultProductContext,
   fontFacesCSS,
+  fontSize,
   fonts,
+  generateTypographyCSS,
   getFonts,
   getTypographyTokens,
   getTypographyVariant,
@@ -2831,7 +3279,11 @@ var useModalId = () => (0, import_react2.useContext)(ModalIdContext);
   isIOS,
   isNative,
   isWeb,
+  lineHeightCompact,
+  lineHeightDisplay,
+  lineHeightText,
   radius,
+  responsiveTypographyScale,
   shadow,
   spacing,
   themeConfig,