@xsolla/xui-core 0.162.0 → 0.163.0

package/index.mjs

@@ -1789,9 +1789,7 @@ var shadow = {
 var FALLBACK = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
 var displayFontByContext = {
   b2b: `"Pilat", "Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`,
-  b2c: `"Pilat Wide", "Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`,
-  paystation: `"Pilat Wide", "Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`,
-  presentation: `"Pilat Wide", "Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`
+  b2c: `"Pilat Wide", "Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`
 };
 var bodyFont = `"Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`;
 var fonts = {
@@ -1817,41 +1815,124 @@ var typography = {
   }
 };
 
+// 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 },
+  "100": { common: 12, mobile: 11 },
+  "125": { common: 14, mobile: 12 },
+  "150": { common: 16, mobile: 14 },
+  "175": { common: 18, mobile: 16 },
+  "200": { common: 20, mobile: 18 },
+  "250": { common: 24, mobile: 20 },
+  "300": { common: 28, mobile: 24 },
+  "350": { common: 32, mobile: 28 },
+  "450": { common: 40, mobile: 32 },
+  "550": { common: 48, mobile: 40 },
+  "650": { common: 56, mobile: 48 },
+  "750": { common: 64, mobile: 56 }
+};
+var lineHeightDisplay = {
+  "75": { common: 10, mobile: 10 },
+  "100": { common: 12, mobile: 11 },
+  "125": { common: 14, mobile: 12 },
+  "150": { common: 16, mobile: 14 },
+  "175": { common: 18, mobile: 16 },
+  "200": { common: 20, mobile: 18 },
+  "250": { common: 24, mobile: 20 },
+  "300": { common: 28, mobile: 24 },
+  "350": { common: 32, mobile: 28 },
+  "450": { common: 40, mobile: 32 },
+  "550": { common: 48, mobile: 40 },
+  "650": { common: 56, mobile: 48 },
+  "750": { common: 64, mobile: 56 }
+};
+var lineHeightCompact = {
+  "75": { common: 14, mobile: 13 },
+  "100": { common: 16, mobile: 14 },
+  "125": { common: 18, mobile: 16 },
+  "150": { common: 20, mobile: 18 },
+  "175": { common: 24, mobile: 20 },
+  "200": { common: 26, mobile: 24 },
+  "250": { common: 30, mobile: 26 },
+  "300": { common: 36, mobile: 30 },
+  "350": { common: 42, mobile: 36 },
+  "450": { common: 52, mobile: 42 },
+  "550": { common: 62, mobile: 52 },
+  "650": { common: 72, mobile: 62 },
+  "750": { common: 82, mobile: 72 }
+};
+var lineHeightText = {
+  "75": { common: 14, mobile: 13 },
+  "100": { common: 18, mobile: 14 },
+  "125": { common: 20, mobile: 16 },
+  "150": { common: 22, mobile: 18 },
+  "175": { common: 26, mobile: 20 },
+  "200": { common: 28, mobile: 24 },
+  "250": { common: 34, mobile: 26 },
+  "300": { common: 40, mobile: 30 },
+  "350": { common: 44, mobile: 36 },
+  "450": { common: 56, mobile: 42 },
+  "550": { common: 66, mobile: 52 },
+  "650": { common: 78, mobile: 62 },
+  "750": { common: 88, mobile: 72 }
+};
+var responsiveTypographyScale = {
+  fontSize,
+  lineHeightDisplay,
+  lineHeightCompact,
+  lineHeightText
+};
+
 // src/tokens/typography.ts
 var typographyTokens = {
   b2c: {
     heading: {
       h1: {
-        fontSize: 40,
-        lineHeight: "40px",
+        fontSize: fontSize["450"].common,
+        lineHeight: `${lineHeightDisplay["450"].common}px`,
         fontWeight: 700,
         scaleStep: "450",
         lineHeightCategory: "display"
       },
       h2: {
-        fontSize: 32,
-        lineHeight: "32px",
+        fontSize: fontSize["350"].common,
+        lineHeight: `${lineHeightDisplay["350"].common}px`,
         fontWeight: 700,
         scaleStep: "350",
         lineHeightCategory: "display"
       },
       h3: {
-        fontSize: 28,
-        lineHeight: "28px",
+        fontSize: fontSize["300"].common,
+        lineHeight: `${lineHeightDisplay["300"].common}px`,
         fontWeight: 700,
         scaleStep: "300",
         lineHeightCategory: "display"
       },
       h4: {
-        fontSize: 24,
-        lineHeight: "24px",
+        fontSize: fontSize["250"].common,
+        lineHeight: `${lineHeightDisplay["250"].common}px`,
         fontWeight: 700,
         scaleStep: "250",
         lineHeightCategory: "display"
       },
       h5: {
-        fontSize: 20,
-        lineHeight: "20px",
+        fontSize: fontSize["200"].common,
+        lineHeight: `${lineHeightDisplay["200"].common}px`,
         fontWeight: 700,
         scaleStep: "200",
         lineHeightCategory: "display"
@@ -1859,73 +1940,73 @@ var typographyTokens = {
     },
     basic: {
       display: {
-        fontSize: 28,
-        lineHeight: "36px",
-        fontWeight: 500,
-        scaleStep: "300",
-        lineHeightCategory: "compact"
+        fontSize: fontSize["550"].common,
+        lineHeight: `${lineHeightDisplay["550"].common}px`,
+        fontWeight: 800,
+        scaleStep: "550",
+        lineHeightCategory: "display"
       },
       "body-lg": {
-        fontSize: 18,
-        lineHeight: "24px",
+        fontSize: fontSize["175"].common,
+        lineHeight: `${lineHeightCompact["175"].common}px`,
         fontWeight: 400,
         scaleStep: "175",
         lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
         paragraph: {
-          lineHeight: "26px",
+          lineHeight: `${lineHeightText["175"].common}px`,
           spacing: 20,
           lineHeightScaleStep: "175"
         }
       },
       "body-md": {
-        fontSize: 16,
-        lineHeight: "20px",
+        fontSize: fontSize["150"].common,
+        lineHeight: `${lineHeightCompact["150"].common}px`,
         fontWeight: 400,
         scaleStep: "150",
         lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
         paragraph: {
-          lineHeight: "22px",
+          lineHeight: `${lineHeightText["150"].common}px`,
           spacing: 16,
           lineHeightScaleStep: "150"
         }
       },
       "body-sm": {
-        fontSize: 14,
-        lineHeight: "18px",
+        fontSize: fontSize["125"].common,
+        lineHeight: `${lineHeightCompact["125"].common}px`,
         fontWeight: 400,
         scaleStep: "125",
         lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
         paragraph: {
-          lineHeight: "20px",
+          lineHeight: `${lineHeightText["125"].common}px`,
           spacing: 12,
           lineHeightScaleStep: "125"
         }
       },
       "body-xs": {
-        fontSize: 12,
-        lineHeight: "16px",
+        fontSize: fontSize["100"].common,
+        lineHeight: `${lineHeightCompact["100"].common}px`,
         fontWeight: 400,
         scaleStep: "100",
         lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
         paragraph: {
-          lineHeight: "18px",
+          lineHeight: `${lineHeightText["100"].common}px`,
           spacing: 8,
           lineHeightScaleStep: "100"
         }
       },
       "body-xxs": {
-        fontSize: 10,
-        lineHeight: "14px",
+        fontSize: fontSize["75"].common,
+        lineHeight: `${lineHeightCompact["75"].common}px`,
         fontWeight: 400,
         scaleStep: "75",
         lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
         paragraph: {
-          lineHeight: "14px",
+          lineHeight: `${lineHeightText["75"].common}px`,
           spacing: 6,
           lineHeightScaleStep: "75"
         }
@@ -1935,36 +2016,36 @@ var typographyTokens = {
   b2b: {
     heading: {
       h1: {
-        fontSize: 56,
-        lineHeight: "56px",
+        fontSize: fontSize["650"].common,
+        lineHeight: `${lineHeightDisplay["650"].common}px`,
         fontWeight: 400,
         scaleStep: "650",
         lineHeightCategory: "display"
       },
       h2: {
-        fontSize: 48,
-        lineHeight: "48px",
+        fontSize: fontSize["550"].common,
+        lineHeight: `${lineHeightDisplay["550"].common}px`,
         fontWeight: 400,
         scaleStep: "550",
         lineHeightCategory: "display"
       },
       h3: {
-        fontSize: 32,
-        lineHeight: "32px",
+        fontSize: fontSize["350"].common,
+        lineHeight: `${lineHeightDisplay["350"].common}px`,
         fontWeight: 400,
         scaleStep: "350",
         lineHeightCategory: "display"
       },
       h4: {
-        fontSize: 24,
-        lineHeight: "24px",
+        fontSize: fontSize["250"].common,
+        lineHeight: `${lineHeightDisplay["250"].common}px`,
         fontWeight: 400,
         scaleStep: "250",
         lineHeightCategory: "display"
       },
       h5: {
-        fontSize: 20,
-        lineHeight: "20px",
+        fontSize: fontSize["200"].common,
+        lineHeight: `${lineHeightDisplay["200"].common}px`,
         fontWeight: 600,
         scaleStep: "200",
         lineHeightCategory: "display"
@@ -1972,304 +2053,78 @@ var typographyTokens = {
     },
     basic: {
       display: {
-        fontSize: 64,
-        lineHeight: "64px",
+        fontSize: fontSize["750"].common,
+        lineHeight: `${lineHeightDisplay["750"].common}px`,
         fontWeight: 400,
         scaleStep: "750",
         lineHeightCategory: "display"
       },
       "body-lg": {
-        fontSize: 18,
-        lineHeight: "24px",
+        fontSize: fontSize["175"].common,
+        lineHeight: `${lineHeightCompact["175"].common}px`,
         fontWeight: 400,
         scaleStep: "175",
         lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
         paragraph: {
-          lineHeight: "26px",
+          lineHeight: `${lineHeightText["175"].common}px`,
           spacing: 20,
           lineHeightScaleStep: "175"
         }
       },
       "body-md": {
-        fontSize: 16,
-        lineHeight: "20px",
+        fontSize: fontSize["150"].common,
+        lineHeight: `${lineHeightCompact["150"].common}px`,
         fontWeight: 400,
         scaleStep: "150",
         lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
         paragraph: {
-          lineHeight: "22px",
+          lineHeight: `${lineHeightText["150"].common}px`,
           spacing: 16,
           lineHeightScaleStep: "150"
         }
       },
       "body-sm": {
-        fontSize: 14,
-        lineHeight: "18px",
+        fontSize: fontSize["125"].common,
+        lineHeight: `${lineHeightCompact["125"].common}px`,
         fontWeight: 400,
         scaleStep: "125",
         lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
         paragraph: {
-          lineHeight: "20px",
+          lineHeight: `${lineHeightText["125"].common}px`,
           spacing: 12,
           lineHeightScaleStep: "125"
         }
       },
       "body-xs": {
-        fontSize: 12,
-        lineHeight: "16px",
+        fontSize: fontSize["100"].common,
+        lineHeight: `${lineHeightCompact["100"].common}px`,
         fontWeight: 400,
         scaleStep: "100",
         lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
         paragraph: {
-          lineHeight: "18px",
+          lineHeight: `${lineHeightText["100"].common}px`,
           spacing: 8,
           lineHeightScaleStep: "100"
         }
       },
       "body-xxs": {
-        fontSize: 10,
-        lineHeight: "14px",
+        fontSize: fontSize["75"].common,
+        lineHeight: `${lineHeightCompact["75"].common}px`,
         fontWeight: 400,
         scaleStep: "75",
         lineHeightCategory: "compact",
         accent: { fontWeight: 500 },
         paragraph: {
-          lineHeight: "14px",
+          lineHeight: `${lineHeightText["75"].common}px`,
           spacing: 6,
           lineHeightScaleStep: "75"
         }
       }
     }
-  },
-  paystation: {
-    heading: {
-      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: "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,
-          lineHeightScaleStep: "150"
-        }
-      },
-      "body-md": {
-        fontSize: 14,
-        lineHeight: "18px",
-        fontWeight: 400,
-        scaleStep: "125",
-        lineHeightCategory: "compact",
-        accent: { fontWeight: 500 },
-        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,
-          lineHeightScaleStep: "100"
-        }
-      },
-      "body-xs": {
-        fontSize: 10,
-        lineHeight: "14px",
-        fontWeight: 400,
-        scaleStep: "75",
-        lineHeightCategory: "compact",
-        accent: { fontWeight: 500 },
-        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,
-          lineHeightScaleStep: "75"
-        }
-      }
-    }
-  },
-  presentation: {
-    heading: {
-      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: "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,
-          lineHeightScaleStep: "250"
-        }
-      },
-      "body-md": {
-        fontSize: 20,
-        lineHeight: "26px",
-        fontWeight: 400,
-        scaleStep: "200",
-        lineHeightCategory: "compact",
-        accent: { fontWeight: 500 },
-        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,
-          lineHeightScaleStep: "175"
-        }
-      },
-      "body-xs": {
-        fontSize: 16,
-        lineHeight: "20px",
-        fontWeight: 400,
-        scaleStep: "150",
-        lineHeightCategory: "compact",
-        accent: { fontWeight: 500 },
-        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,
-          lineHeightScaleStep: "150"
-        }
-      }
-    }
   }
 };
 var defaultProductContext = "b2b";
@@ -2321,35 +2176,31 @@ var isIOS = isNative && typeof global !== "undefined" && global.Platform?.OS ===
 var isAndroid = isNative && typeof global !== "undefined" && global.Platform?.OS === "android";
 
 // src/fonts/fontFaces.ts
-var CDN_STRAPI = "https://cdn.xsolla.net/strapi-v2-bucket-prod";
-var CDN_MERCHANT = "https://cdn.xsolla.net/merchant-bucket-prod/files/uploaded/722279";
+var CDN = "https://cdn.xsolla.net/xsolla-ui-toolkit-prod/fonts/v1";
+var UNICODE_RANGE_LATIN = "U+0000-024F, U+0250-02AF, U+0300-036F, U+0370-03FF, U+0400-04FF, U+2000-206F, U+20A0-20CF, U+2100-214F";
+var UNICODE_RANGE_CN = "U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF";
+var UNICODE_RANGE_JP = "U+3000-303F, U+3040-309F, U+30A0-30FF, U+31F0-31FF, U+FF65-FF9F";
+var UNICODE_RANGE_KR = "U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7A3, U+D7B0-D7FF, U+FFA0-FFDC";
 var fontFacesCSS = `
   /* \u2500\u2500 Pilat Wide (B2C headings) \u2500\u2500 */
 
   @font-face {
     font-family: 'Pilat Wide';
-    src: url('${CDN_STRAPI}/Pilat_Test_Medium_/Pilat_Test_Medium.ttf') format('truetype');
-    font-weight: 400;
-    font-style: normal;
-    font-display: swap;
-  }
-  @font-face {
-    font-family: 'Pilat Wide';
-    src: url('${CDN_STRAPI}/Pilat_Test_Demi_Bold_bee67c470a/Pilat_Test_Demi_Bold_bee67c470a.ttf') format('truetype');
+    src: url('${CDN}/pilat-wide/pilat-wide-600.woff2') format('woff2');
     font-weight: 600;
     font-style: normal;
     font-display: swap;
   }
   @font-face {
     font-family: 'Pilat Wide';
-    src: url('${CDN_STRAPI}/Pilat_Test_Bold_b12b40d234/Pilat_Test_Bold_b12b40d234.ttf') format('truetype');
+    src: url('${CDN}/pilat-wide/pilat-wide-700.woff2') format('woff2');
     font-weight: 700;
     font-style: normal;
     font-display: swap;
   }
   @font-face {
     font-family: 'Pilat Wide';
-    src: url('${CDN_STRAPI}/Pilat_Test_Heavy_2885678ca4/Pilat_Test_Heavy_2885678ca4.otf') format('opentype');
+    src: url('${CDN}/pilat-wide/pilat-wide-800.woff2') format('woff2');
     font-weight: 800;
     font-style: normal;
     font-display: swap;
@@ -2359,76 +2210,153 @@ var fontFacesCSS = `
 
   @font-face {
     font-family: 'Pilat';
-    src: url('${CDN_MERCHANT}/55a03110b2400b778d485de2c8d064c0.woff2') format('woff2');
+    src: url('${CDN}/pilat/pilat-300.woff2') format('woff2');
     font-weight: 300;
     font-style: normal;
     font-display: swap;
   }
   @font-face {
     font-family: 'Pilat';
-    src: url('${CDN_MERCHANT}/e968c9cc76e48ff6111c90534549bbf9.woff2') format('woff2');
+    src: url('${CDN}/pilat/pilat-400.woff2') format('woff2');
     font-weight: 400;
     font-style: normal;
     font-display: swap;
   }
   @font-face {
     font-family: 'Pilat';
-    src: url('${CDN_MERCHANT}/ed4fe74e88aaacc6978f06a862e75b08.woff2') format('woff2');
+    src: url('${CDN}/pilat/pilat-500.woff2') format('woff2');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Pilat';
+    src: url('${CDN}/pilat/pilat-600.woff2') format('woff2');
     font-weight: 600;
     font-style: normal;
     font-display: swap;
   }
   @font-face {
     font-family: 'Pilat';
-    src: url('${CDN_MERCHANT}/7450f429979af7eaa8fa4d4d91cee927.woff2') format('woff2');
+    src: url('${CDN}/pilat/pilat-700.woff2') format('woff2');
     font-weight: 700;
     font-style: normal;
     font-display: swap;
   }
   @font-face {
     font-family: 'Pilat';
-    src: url('${CDN_MERCHANT}/218d647ff7690c1e312f6943e29af375.woff2') format('woff2');
+    src: url('${CDN}/pilat/pilat-800.woff2') format('woff2');
     font-weight: 800;
     font-style: normal;
     font-display: swap;
   }
 
-  /* \u2500\u2500 Aktiv Grotesk (body) \u2014 served from Sharp Grotesk CDN files \u2500\u2500 */
+  /* \u2500\u2500 Aktiv Grotesk (body) \u2014 Latin \u2500\u2500 */
 
   @font-face {
     font-family: 'Aktiv Grotesk';
-    src: url('${CDN_STRAPI}/Pilat_Test_Light_c4650750bb/Pilat_Test_Light_c4650750bb.otf') format('opentype');
-    font-weight: 300;
+    src: url('${CDN}/aktiv-grotesk/latin/aktiv-grotesk-latin-400.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    unicode-range: ${UNICODE_RANGE_LATIN};
+  }
+  @font-face {
+    font-family: 'Aktiv Grotesk';
+    src: url('${CDN}/aktiv-grotesk/latin/aktiv-grotesk-latin-500.woff2') format('woff2');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+    unicode-range: ${UNICODE_RANGE_LATIN};
+  }
+  @font-face {
+    font-family: 'Aktiv Grotesk';
+    src: url('${CDN}/aktiv-grotesk/latin/aktiv-grotesk-latin-600.woff2') format('woff2');
+    font-weight: 600;
     font-style: normal;
     font-display: swap;
+    unicode-range: ${UNICODE_RANGE_LATIN};
   }
+
+  /* \u2500\u2500 Aktiv Grotesk (body) \u2014 Chinese / SG \u2500\u2500 */
+
   @font-face {
     font-family: 'Aktiv Grotesk';
-    src: url('${CDN_STRAPI}/Pilat_Test_Book_5cb49cd592/Pilat_Test_Book_5cb49cd592.otf') format('opentype');
+    src: url('${CDN}/aktiv-grotesk/cn-sg/aktiv-grotesk-cn-sg-400.woff2') format('woff2');
     font-weight: 400;
     font-style: normal;
     font-display: swap;
+    unicode-range: ${UNICODE_RANGE_CN};
   }
   @font-face {
     font-family: 'Aktiv Grotesk';
-    src: url('${CDN_STRAPI}/Pilat_Test_Demi_e9bed59107/Pilat_Test_Demi_e9bed59107.otf') format('opentype');
+    src: url('${CDN}/aktiv-grotesk/cn-sg/aktiv-grotesk-cn-sg-500.woff2') format('woff2');
     font-weight: 500;
     font-style: normal;
     font-display: swap;
+    unicode-range: ${UNICODE_RANGE_CN};
   }
   @font-face {
     font-family: 'Aktiv Grotesk';
-    src: url('${CDN_STRAPI}/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');
+    src: url('${CDN}/aktiv-grotesk/cn-sg/aktiv-grotesk-cn-sg-600.woff2') format('woff2');
     font-weight: 600;
     font-style: normal;
     font-display: swap;
+    unicode-range: ${UNICODE_RANGE_CN};
   }
+
+  /* \u2500\u2500 Aktiv Grotesk (body) \u2014 Japanese \u2500\u2500 */
+
   @font-face {
     font-family: 'Aktiv Grotesk';
-    src: url('${CDN_STRAPI}/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');
-    font-weight: 700;
+    src: url('${CDN}/aktiv-grotesk/jp/aktiv-grotesk-jp-400.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+    unicode-range: ${UNICODE_RANGE_JP};
+  }
+  @font-face {
+    font-family: 'Aktiv Grotesk';
+    src: url('${CDN}/aktiv-grotesk/jp/aktiv-grotesk-jp-500.woff2') format('woff2');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+    unicode-range: ${UNICODE_RANGE_JP};
+  }
+  @font-face {
+    font-family: 'Aktiv Grotesk';
+    src: url('${CDN}/aktiv-grotesk/jp/aktiv-grotesk-jp-600.woff2') format('woff2');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+    unicode-range: ${UNICODE_RANGE_JP};
+  }
+
+  /* \u2500\u2500 Aktiv Grotesk (body) \u2014 Korean \u2500\u2500 */
+
+  @font-face {
+    font-family: 'Aktiv Grotesk';
+    src: url('${CDN}/aktiv-grotesk/kr/aktiv-grotesk-kr-400.woff2') format('woff2');
+    font-weight: 400;
     font-style: normal;
     font-display: swap;
+    unicode-range: ${UNICODE_RANGE_KR};
+  }
+  @font-face {
+    font-family: 'Aktiv Grotesk';
+    src: url('${CDN}/aktiv-grotesk/kr/aktiv-grotesk-kr-500.woff2') format('woff2');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+    unicode-range: ${UNICODE_RANGE_KR};
+  }
+  @font-face {
+    font-family: 'Aktiv Grotesk';
+    src: url('${CDN}/aktiv-grotesk/kr/aktiv-grotesk-kr-600.woff2') format('woff2');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+    unicode-range: ${UNICODE_RANGE_KR};
   }
 `;
 
@@ -2457,89 +2385,6 @@ FontLoader.displayName = "FontLoader";
 // src/styles/TypographyStyleLoader.tsx
 import { useEffect as useEffect2, useRef as useRef2 } from "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 */
@@ -2553,35 +2398,23 @@ var MOBILE_MAX_WIDTH = breakpoints.desktop - 1;
 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`
-    );
+    lines.push(`--xui-font-size-${step}:${fontSize[step][mode]}px`);
   }
   for (const step of SCALE_STEPS) {
-    const lh = lineHeightDisplay[step];
-    lines.push(
-      `--xui-lh-display-${step}:${lh[mode === "desktop" ? "common" : "mobile"]}px`
-    );
+    lines.push(`--xui-lh-display-${step}:${lineHeightDisplay[step][mode]}px`);
   }
   for (const step of SCALE_STEPS) {
-    const lh = lineHeightCompact[step];
-    lines.push(
-      `--xui-lh-compact-${step}:${lh[mode === "desktop" ? "common" : "mobile"]}px`
-    );
+    lines.push(`--xui-lh-compact-${step}:${lineHeightCompact[step][mode]}px`);
   }
   for (const step of SCALE_STEPS) {
-    const lh = lineHeightText[step];
-    lines.push(
-      `--xui-lh-text-${step}:${lh[mode === "desktop" ? "common" : "mobile"]}px`
-    );
+    lines.push(`--xui-lh-text-${step}:${lineHeightText[step][mode]}px`);
   }
   return lines.join(";");
 }
 var _cached = null;
 function generateTypographyCSS() {
   if (_cached) return _cached;
-  const desktopVars = buildDeclarations("desktop");
+  const desktopVars = buildDeclarations("common");
   const mobileVars = buildDeclarations("mobile");
   _cached = `:root{${desktopVars}}@media(max-width:${MOBILE_MAX_WIDTH}px){:root{${mobileVars}}}`;
   return _cached;
@@ -3996,7 +3829,8 @@ var XUIProvider = ({
   children,
   initialMode = "dark",
   initialProductContext = defaultProductContext,
-  loadFonts = true
+  loadFonts = true,
+  responsive = true
 }) => {
   const [mode, setMode] = useState(initialMode);
   const [productContext, setProductContext] = useState(
@@ -4008,13 +3842,14 @@ var XUIProvider = ({
       setMode,
       productContext,
       setProductContext,
-      theme: themeConfig(mode, productContext)
+      theme: themeConfig(mode, productContext),
+      responsive
     }),
-    [mode, productContext]
+    [mode, productContext, responsive]
   );
   return /* @__PURE__ */ jsxs(DesignSystemContext.Provider, { value, children: [
     loadFonts && /* @__PURE__ */ jsx(FontLoader, {}),
-    /* @__PURE__ */ jsx(TypographyStyleLoader, {}),
+    responsive && /* @__PURE__ */ jsx(TypographyStyleLoader, {}),
     children
   ] });
 };
@@ -4028,7 +3863,8 @@ var useDesignSystem = () => {
       productContext: defaultProductContext,
       setProductContext: () => {
       },
-      theme: themeConfig("dark", defaultProductContext)
+      theme: themeConfig("dark", defaultProductContext),
+      responsive: true
     };
   }
   return context;