@xsolla/xui-core 0.103.0 → 0.104.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/index.d.mts +28 -1
  2. package/index.d.ts +28 -1
  3. package/index.js +111 -16
  4. package/index.js.flow +36 -4
  5. package/index.js.map +1 -1
  6. package/index.mjs +103 -10
  7. package/index.mjs.map +1 -1
  8. package/package.json +1 -1
package/index.d.mts CHANGED
@@ -2978,6 +2978,9 @@ declare const shadow: {
2978
2978
  };
2979
2979
 
2980
2980
  declare const fonts: {
2981
+ heading: string;
2982
+ body: string;
2983
+ /** @deprecated Use `heading` or `body` instead */
2981
2984
  primary: string;
2982
2985
  };
2983
2986
  declare const typography: {
@@ -2992,6 +2995,24 @@ declare const isNative: boolean;
2992
2995
  declare const isIOS: boolean;
2993
2996
  declare const isAndroid: boolean;
2994
2997
 
2998
+ /**
2999
+ * React component that loads the toolkit's font-face declarations.
3000
+ * Drop-in for any framework — works in Next.js, Vite, CRA, etc.
3001
+ *
3002
+ * Renders nothing to the DOM. Injects a single `<style>` tag into `<head>` on mount.
3003
+ */
3004
+ declare const FontLoader: React.FC;
3005
+
3006
+ /**
3007
+ * @font-face CSS for all toolkit fonts, loaded from Xsolla CDN.
3008
+ *
3009
+ * Pilat Wide — heading/display font, registered at weights 600–800.
3010
+ *
3011
+ * Aktiv Grotesk — body font, mapped from the Sharp Grotesk CDN files
3012
+ * which are the same typeface under a legacy name.
3013
+ */
3014
+ declare const fontFacesCSS = "\n /* \u2500\u2500 Pilat Wide (headings) \u2500\u2500 */\n\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Demi_Bold_bee67c470a/Pilat_Test_Demi_Bold_bee67c470a.ttf') format('truetype');\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_b12b40d234/Pilat_Test_Bold_b12b40d234.ttf') format('truetype');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Heavy_2885678ca4/Pilat_Test_Heavy_2885678ca4.otf') format('opentype');\n font-weight: 800;\n font-style: normal;\n font-display: swap;\n }\n\n /* \u2500\u2500 Aktiv Grotesk (body) \u2014 served from Sharp Grotesk CDN files \u2500\u2500 */\n\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Light_c4650750bb/Pilat_Test_Light_c4650750bb.otf') format('opentype');\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Book_5cb49cd592/Pilat_Test_Book_5cb49cd592.otf') format('opentype');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Demi_e9bed59107/Pilat_Test_Demi_e9bed59107.otf') format('opentype');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n }\n";
3015
+
2995
3016
  type ThemeMode = "dark" | "light" | "pentagram-dark" | "pentagram-light" | "xsolla-dark" | "xsolla-light" | "xsollaDark" | "xsollaLight" | "ltg-dark";
2996
3017
  declare const themeConfig: (mode?: ThemeMode) => {
2997
3018
  colors: {
@@ -4485,10 +4506,14 @@ declare const themeConfig: (mode?: ThemeMode) => {
4485
4506
  modal: string;
4486
4507
  };
4487
4508
  fonts: {
4509
+ heading: string;
4510
+ body: string;
4488
4511
  primary: string;
4489
4512
  };
4490
4513
  typography: {
4491
4514
  primary: string;
4515
+ heading: string;
4516
+ body: string;
4492
4517
  };
4493
4518
  sizing: {
4494
4519
  button: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
@@ -5405,6 +5430,8 @@ interface DesignSystemContextType {
5405
5430
  declare const XUIProvider: React.FC<{
5406
5431
  children: React.ReactNode;
5407
5432
  initialMode?: ThemeMode;
5433
+ /** Load toolkit fonts from the Xsolla CDN. Defaults to true on web, no-ops on native. */
5434
+ loadFonts?: boolean;
5408
5435
  }>;
5409
5436
  declare const useDesignSystem: () => DesignSystemContextType;
5410
5437
  declare const useId: () => string;
@@ -5421,4 +5448,4 @@ declare const ModalIdContext: React.Context<string | null>;
5421
5448
  */
5422
5449
  declare const useModalId: () => string | null;
5423
5450
 
5424
- export { ModalIdContext, type ThemeColors, type ThemeMode, XUIProvider, colors, fonts, isAndroid, isIOS, isNative, isWeb, radius, shadow, spacing, themeConfig, typography, useDesignSystem, useId, useModalId };
5451
+ export { FontLoader, ModalIdContext, type ThemeColors, type ThemeMode, XUIProvider, colors, fontFacesCSS, fonts, isAndroid, isIOS, isNative, isWeb, radius, shadow, spacing, themeConfig, typography, useDesignSystem, useId, useModalId };
package/index.d.ts CHANGED
@@ -2978,6 +2978,9 @@ declare const shadow: {
2978
2978
  };
2979
2979
 
2980
2980
  declare const fonts: {
2981
+ heading: string;
2982
+ body: string;
2983
+ /** @deprecated Use `heading` or `body` instead */
2981
2984
  primary: string;
2982
2985
  };
2983
2986
  declare const typography: {
@@ -2992,6 +2995,24 @@ declare const isNative: boolean;
2992
2995
  declare const isIOS: boolean;
2993
2996
  declare const isAndroid: boolean;
2994
2997
 
2998
+ /**
2999
+ * React component that loads the toolkit's font-face declarations.
3000
+ * Drop-in for any framework — works in Next.js, Vite, CRA, etc.
3001
+ *
3002
+ * Renders nothing to the DOM. Injects a single `<style>` tag into `<head>` on mount.
3003
+ */
3004
+ declare const FontLoader: React.FC;
3005
+
3006
+ /**
3007
+ * @font-face CSS for all toolkit fonts, loaded from Xsolla CDN.
3008
+ *
3009
+ * Pilat Wide — heading/display font, registered at weights 600–800.
3010
+ *
3011
+ * Aktiv Grotesk — body font, mapped from the Sharp Grotesk CDN files
3012
+ * which are the same typeface under a legacy name.
3013
+ */
3014
+ declare const fontFacesCSS = "\n /* \u2500\u2500 Pilat Wide (headings) \u2500\u2500 */\n\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Demi_Bold_bee67c470a/Pilat_Test_Demi_Bold_bee67c470a.ttf') format('truetype');\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_b12b40d234/Pilat_Test_Bold_b12b40d234.ttf') format('truetype');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Heavy_2885678ca4/Pilat_Test_Heavy_2885678ca4.otf') format('opentype');\n font-weight: 800;\n font-style: normal;\n font-display: swap;\n }\n\n /* \u2500\u2500 Aktiv Grotesk (body) \u2014 served from Sharp Grotesk CDN files \u2500\u2500 */\n\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Light_c4650750bb/Pilat_Test_Light_c4650750bb.otf') format('opentype');\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Book_5cb49cd592/Pilat_Test_Book_5cb49cd592.otf') format('opentype');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Demi_e9bed59107/Pilat_Test_Demi_e9bed59107.otf') format('opentype');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n }\n";
3015
+
2995
3016
  type ThemeMode = "dark" | "light" | "pentagram-dark" | "pentagram-light" | "xsolla-dark" | "xsolla-light" | "xsollaDark" | "xsollaLight" | "ltg-dark";
2996
3017
  declare const themeConfig: (mode?: ThemeMode) => {
2997
3018
  colors: {
@@ -4485,10 +4506,14 @@ declare const themeConfig: (mode?: ThemeMode) => {
4485
4506
  modal: string;
4486
4507
  };
4487
4508
  fonts: {
4509
+ heading: string;
4510
+ body: string;
4488
4511
  primary: string;
4489
4512
  };
4490
4513
  typography: {
4491
4514
  primary: string;
4515
+ heading: string;
4516
+ body: string;
4492
4517
  };
4493
4518
  sizing: {
4494
4519
  button: (size: "xl" | "lg" | "md" | "sm" | "xs") => {
@@ -5405,6 +5430,8 @@ interface DesignSystemContextType {
5405
5430
  declare const XUIProvider: React.FC<{
5406
5431
  children: React.ReactNode;
5407
5432
  initialMode?: ThemeMode;
5433
+ /** Load toolkit fonts from the Xsolla CDN. Defaults to true on web, no-ops on native. */
5434
+ loadFonts?: boolean;
5408
5435
  }>;
5409
5436
  declare const useDesignSystem: () => DesignSystemContextType;
5410
5437
  declare const useId: () => string;
@@ -5421,4 +5448,4 @@ declare const ModalIdContext: React.Context<string | null>;
5421
5448
  */
5422
5449
  declare const useModalId: () => string | null;
5423
5450
 
5424
- export { ModalIdContext, type ThemeColors, type ThemeMode, XUIProvider, colors, fonts, isAndroid, isIOS, isNative, isWeb, radius, shadow, spacing, themeConfig, typography, useDesignSystem, useId, useModalId };
5451
+ export { FontLoader, ModalIdContext, type ThemeColors, type ThemeMode, XUIProvider, colors, fontFacesCSS, fonts, isAndroid, isIOS, isNative, isWeb, radius, shadow, spacing, themeConfig, typography, useDesignSystem, useId, useModalId };
package/index.js CHANGED
@@ -30,9 +30,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
30
30
  // src/index.tsx
31
31
  var index_exports = {};
32
32
  __export(index_exports, {
33
+ FontLoader: () => FontLoader,
33
34
  ModalIdContext: () => ModalIdContext,
34
35
  XUIProvider: () => XUIProvider,
35
36
  colors: () => colors,
37
+ fontFacesCSS: () => fontFacesCSS,
36
38
  fonts: () => fonts,
37
39
  isAndroid: () => isAndroid,
38
40
  isIOS: () => isIOS,
@@ -48,7 +50,7 @@ __export(index_exports, {
48
50
  useModalId: () => useModalId
49
51
  });
50
52
  module.exports = __toCommonJS(index_exports);
51
- var import_react = __toESM(require("react"));
53
+ var import_react2 = __toESM(require("react"));
52
54
 
53
55
  // src/tokens/xsolla-dark.json
54
56
  var xsolla_dark_default = {
@@ -1577,22 +1579,108 @@ var shadow = {
1577
1579
 
1578
1580
  // src/tokens/fonts.ts
1579
1581
  var fonts = {
1580
- // Use a string that works for web but can be parsed/ignored by native
1581
- primary: '"Pilat Wide Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
1582
+ heading: '"Pilat Wide", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
1583
+ body: '"Aktiv Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
1584
+ /** @deprecated Use `heading` or `body` instead */
1585
+ primary: '"Aktiv Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
1582
1586
  };
1583
1587
  var typography = {
1584
1588
  button: {
1585
- fontFamily: fonts.primary,
1589
+ fontFamily: fonts.body,
1586
1590
  fontWeight: "bold"
1587
1591
  }
1588
1592
  };
1589
1593
 
1594
+ // src/fonts/FontLoader.tsx
1595
+ var import_react = require("react");
1596
+
1590
1597
  // src/platform.ts
1591
1598
  var isWeb = typeof document !== "undefined";
1592
1599
  var isNative = !isWeb;
1593
1600
  var isIOS = isNative && typeof global !== "undefined" && global.Platform?.OS === "ios";
1594
1601
  var isAndroid = isNative && typeof global !== "undefined" && global.Platform?.OS === "android";
1595
1602
 
1603
+ // src/fonts/fontFaces.ts
1604
+ var CDN_BASE = "https://cdn.xsolla.net/strapi-v2-bucket-prod";
1605
+ var fontFacesCSS = `
1606
+ /* \u2500\u2500 Pilat Wide (headings) \u2500\u2500 */
1607
+
1608
+ @font-face {
1609
+ font-family: 'Pilat Wide';
1610
+ src: url('${CDN_BASE}/Pilat_Test_Demi_Bold_bee67c470a/Pilat_Test_Demi_Bold_bee67c470a.ttf') format('truetype');
1611
+ font-weight: 600;
1612
+ font-style: normal;
1613
+ font-display: swap;
1614
+ }
1615
+ @font-face {
1616
+ font-family: 'Pilat Wide';
1617
+ src: url('${CDN_BASE}/Pilat_Test_Bold_b12b40d234/Pilat_Test_Bold_b12b40d234.ttf') format('truetype');
1618
+ font-weight: 700;
1619
+ font-style: normal;
1620
+ font-display: swap;
1621
+ }
1622
+ @font-face {
1623
+ font-family: 'Pilat Wide';
1624
+ src: url('${CDN_BASE}/Pilat_Test_Heavy_2885678ca4/Pilat_Test_Heavy_2885678ca4.otf') format('opentype');
1625
+ font-weight: 800;
1626
+ font-style: normal;
1627
+ font-display: swap;
1628
+ }
1629
+
1630
+ /* \u2500\u2500 Aktiv Grotesk (body) \u2014 served from Sharp Grotesk CDN files \u2500\u2500 */
1631
+
1632
+ @font-face {
1633
+ font-family: 'Aktiv Grotesk';
1634
+ src: url('${CDN_BASE}/Pilat_Test_Light_c4650750bb/Pilat_Test_Light_c4650750bb.otf') format('opentype');
1635
+ font-weight: 300;
1636
+ font-style: normal;
1637
+ font-display: swap;
1638
+ }
1639
+ @font-face {
1640
+ font-family: 'Aktiv Grotesk';
1641
+ src: url('${CDN_BASE}/Pilat_Test_Book_5cb49cd592/Pilat_Test_Book_5cb49cd592.otf') format('opentype');
1642
+ font-weight: 400;
1643
+ font-style: normal;
1644
+ font-display: swap;
1645
+ }
1646
+ @font-face {
1647
+ font-family: 'Aktiv Grotesk';
1648
+ src: url('${CDN_BASE}/Pilat_Test_Demi_e9bed59107/Pilat_Test_Demi_e9bed59107.otf') format('opentype');
1649
+ font-weight: 500;
1650
+ font-style: normal;
1651
+ font-display: swap;
1652
+ }
1653
+ @font-face {
1654
+ font-family: 'Aktiv Grotesk';
1655
+ src: url('${CDN_BASE}/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');
1656
+ font-weight: 700;
1657
+ font-style: normal;
1658
+ font-display: swap;
1659
+ }
1660
+ `;
1661
+
1662
+ // src/fonts/FontLoader.tsx
1663
+ var injected = false;
1664
+ function injectFontStyles() {
1665
+ if (!isWeb || injected) return;
1666
+ const style = document.createElement("style");
1667
+ style.setAttribute("data-xui-fonts", "");
1668
+ style.textContent = fontFacesCSS;
1669
+ document.head.appendChild(style);
1670
+ injected = true;
1671
+ }
1672
+ var FontLoader = () => {
1673
+ const mountedRef = (0, import_react.useRef)(false);
1674
+ (0, import_react.useEffect)(() => {
1675
+ if (!mountedRef.current) {
1676
+ injectFontStyles();
1677
+ mountedRef.current = true;
1678
+ }
1679
+ }, []);
1680
+ return null;
1681
+ };
1682
+ FontLoader.displayName = "FontLoader";
1683
+
1596
1684
  // src/index.tsx
1597
1685
  var import_jsx_runtime = require("react/jsx-runtime");
1598
1686
  var themeConfig = (mode = "dark") => ({
@@ -1602,7 +1690,9 @@ var themeConfig = (mode = "dark") => ({
1602
1690
  shadow,
1603
1691
  fonts,
1604
1692
  typography: {
1605
- primary: fonts.primary
1693
+ primary: fonts.body,
1694
+ heading: fonts.heading,
1695
+ body: fonts.body
1606
1696
  },
1607
1697
  sizing: {
1608
1698
  button: (size) => {
@@ -2509,12 +2599,12 @@ var themeConfig = (mode = "dark") => ({
2509
2599
  }
2510
2600
  }
2511
2601
  });
2512
- var DesignSystemContext = (0, import_react.createContext)(
2602
+ var DesignSystemContext = (0, import_react2.createContext)(
2513
2603
  void 0
2514
2604
  );
2515
- var XUIProvider = ({ children, initialMode = "dark" }) => {
2516
- const [mode, setMode] = (0, import_react.useState)(initialMode);
2517
- const value = (0, import_react.useMemo)(
2605
+ var XUIProvider = ({ children, initialMode = "dark", loadFonts = true }) => {
2606
+ const [mode, setMode] = (0, import_react2.useState)(initialMode);
2607
+ const value = (0, import_react2.useMemo)(
2518
2608
  () => ({
2519
2609
  mode,
2520
2610
  setMode,
@@ -2522,10 +2612,13 @@ var XUIProvider = ({ children, initialMode = "dark" }) => {
2522
2612
  }),
2523
2613
  [mode]
2524
2614
  );
2525
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DesignSystemContext.Provider, { value, children });
2615
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DesignSystemContext.Provider, { value, children: [
2616
+ loadFonts && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FontLoader, {}),
2617
+ children
2618
+ ] });
2526
2619
  };
2527
2620
  var useDesignSystem = () => {
2528
- const context = (0, import_react.useContext)(DesignSystemContext);
2621
+ const context = (0, import_react2.useContext)(DesignSystemContext);
2529
2622
  if (!context) {
2530
2623
  return {
2531
2624
  mode: "dark",
@@ -2537,19 +2630,21 @@ var useDesignSystem = () => {
2537
2630
  return context;
2538
2631
  };
2539
2632
  var idCounter = 0;
2540
- var hasReactUseId = typeof import_react.default.useId === "function";
2633
+ var hasReactUseId = typeof import_react2.default.useId === "function";
2541
2634
  var useIdFallback = () => {
2542
- const [id] = (0, import_react.useState)(() => `xui-${++idCounter}`);
2635
+ const [id] = (0, import_react2.useState)(() => `xui-${++idCounter}`);
2543
2636
  return id;
2544
2637
  };
2545
- var useId = hasReactUseId ? import_react.default.useId : useIdFallback;
2546
- var ModalIdContext = (0, import_react.createContext)(null);
2547
- var useModalId = () => (0, import_react.useContext)(ModalIdContext);
2638
+ var useId = hasReactUseId ? import_react2.default.useId : useIdFallback;
2639
+ var ModalIdContext = (0, import_react2.createContext)(null);
2640
+ var useModalId = () => (0, import_react2.useContext)(ModalIdContext);
2548
2641
  // Annotate the CommonJS export names for ESM import in node:
2549
2642
  0 && (module.exports = {
2643
+ FontLoader,
2550
2644
  ModalIdContext,
2551
2645
  XUIProvider,
2552
2646
  colors,
2647
+ fontFacesCSS,
2553
2648
  fonts,
2554
2649
  isAndroid,
2555
2650
  isIOS,
package/index.js.flow CHANGED
@@ -2684,13 +2684,36 @@ surfaceHover: string,
2684
2684
  popover: string,
2685
2685
  modal: string,...
2686
2686
  };declare var fonts: {
2687
+ heading: string,
2688
+ body: string,
2689
+
2690
+ /**
2691
+ * @deprecated Use `heading` or `body` instead
2692
+ */
2687
2693
  primary: string,...
2688
2694
  };declare var typography: {
2689
2695
  button: {
2690
2696
  fontFamily: string,
2691
2697
  fontWeight: string,...
2692
2698
  },...
2693
- };declare var isWeb: boolean;declare var isNative: boolean;declare var isIOS: boolean;declare var isAndroid: boolean;declare type ThemeMode = "dark"
2699
+ };declare var isWeb: boolean;declare var isNative: boolean;declare var isIOS: boolean;declare var isAndroid: boolean;
2700
+ /**
2701
+ * React component that loads the toolkit's font-face declarations.
2702
+ * Drop-in for any framework — works in Next.js, Vite, CRA, etc.
2703
+ *
2704
+ * Renders nothing to the DOM. Injects a single `<style>` tag into `<head>` on mount.
2705
+ */
2706
+ declare var FontLoader: React.FC;
2707
+ /**
2708
+ * @font-face CSS for all toolkit fonts, loaded from Xsolla CDN.
2709
+ *
2710
+ * Pilat Wide — heading/display font, registered at weights 600–800.
2711
+ *
2712
+ * Aktiv Grotesk — body font, mapped from the Sharp Grotesk CDN files
2713
+ * which are the same typeface under a legacy name.
2714
+ */
2715
+ declare var fontFacesCSS: "\n /* ── Pilat Wide (headings) ── */\n\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Demi_Bold_bee67c470a/Pilat_Test_Demi_Bold_bee67c470a.ttf') format('truetype');\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_b12b40d234/Pilat_Test_Bold_b12b40d234.ttf') format('truetype');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Pilat Wide';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Heavy_2885678ca4/Pilat_Test_Heavy_2885678ca4.otf') format('opentype');\n font-weight: 800;\n font-style: normal;\n font-display: swap;\n }\n\n /* ── Aktiv Grotesk (body) — served from Sharp Grotesk CDN files ── */\n\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Light_c4650750bb/Pilat_Test_Light_c4650750bb.otf') format('opentype');\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Book_5cb49cd592/Pilat_Test_Book_5cb49cd592.otf') format('opentype');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Demi_e9bed59107/Pilat_Test_Demi_e9bed59107.otf') format('opentype');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n }\n @font-face {\n font-family: 'Aktiv Grotesk';\n src: url('https://cdn.xsolla.net/strapi-v2-bucket-prod/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');\n font-weight: 700;\n font-style: normal;\n font-display: swap;\n }\n"
2716
+ ;declare type ThemeMode = "dark"
2694
2717
  | "light"
2695
2718
  | "pentagram-dark"
2696
2719
  | "pentagram-light"
@@ -4195,10 +4218,14 @@ popover: string,
4195
4218
  modal: string,...
4196
4219
  },
4197
4220
  fonts: {
4221
+ heading: string,
4222
+ body: string,
4198
4223
  primary: string,...
4199
4224
  },
4200
4225
  typography: {
4201
- primary: string,...
4226
+ primary: string,
4227
+ heading: string,
4228
+ body: string,...
4202
4229
  },
4203
4230
  sizing: {
4204
4231
  button: (
@@ -5238,7 +5265,12 @@ setMode: (mode: ThemeMode) => void,
5238
5265
  theme: $Call<<R>((...args: any[]) => R) => R, typeof themeConfig>,
5239
5266
  } declare var XUIProvider: React.FC<{
5240
5267
  children: React.ReactNode,
5241
- initialMode?: ThemeMode,...
5268
+ initialMode?: ThemeMode,
5269
+
5270
+ /**
5271
+ * Load toolkit fonts from the Xsolla CDN. Defaults to true on web, no-ops on native.
5272
+ */
5273
+ loadFonts?: boolean,...
5242
5274
  }>;declare var useDesignSystem: () => DesignSystemContextType;declare var useId: () => string;
5243
5275
  /**
5244
5276
  * Context for the current modal's ID.
@@ -5255,5 +5287,5 @@ declare var useModalId: () => string | null;export type {
5255
5287
  ThemeColors,ThemeMode
5256
5288
  }
5257
5289
  declare export {
5258
- ModalIdContext,XUIProvider,colors,fonts,isAndroid,isIOS,isNative,isWeb,radius,shadow,spacing,themeConfig,typography,useDesignSystem,useId,useModalId
5290
+ FontLoader,ModalIdContext,XUIProvider,colors,fontFacesCSS,fonts,isAndroid,isIOS,isNative,isWeb,radius,shadow,spacing,themeConfig,typography,useDesignSystem,useId,useModalId
5259
5291
  }