@xsolla/xui-core 0.117.0 → 0.118.0

package/index.js

@@ -37,6 +37,7 @@ __export(index_exports, {
   defaultProductContext: () => defaultProductContext,
   fontFacesCSS: () => fontFacesCSS,
   fonts: () => fonts,
+  getFonts: () => getFonts,
   getTypographyTokens: () => getTypographyTokens,
   getTypographyVariant: () => getTypographyVariant,
   isAndroid: () => isAndroid,
@@ -1887,12 +1888,26 @@ var shadow = {
 };
 
 // src/tokens/fonts.ts
+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}`
+};
+var bodyFont = `"Aktiv Grotesk", "Noto Sans", "Montserrat", ${FALLBACK}`;
 var fonts = {
-  heading: '"Pilat Wide", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
-  body: '"Aktiv Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+  heading: displayFontByContext.b2b,
+  body: bodyFont,
   /** @deprecated Use `heading` or `body` instead */
-  primary: '"Aktiv Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'
+  primary: bodyFont
 };
+var getFonts = (productContext = "b2b") => ({
+  heading: displayFontByContext[productContext],
+  body: bodyFont,
+  /** @deprecated Use `heading` or `body` instead */
+  primary: bodyFont
+});
 var typography = {
   button: {
     fontFamily: fonts.body,
@@ -2111,34 +2126,73 @@ 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_BASE = "https://cdn.xsolla.net/strapi-v2-bucket-prod";
+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 fontFacesCSS = `
-  /* \u2500\u2500 Pilat Wide (headings) \u2500\u2500 */
+  /* \u2500\u2500 Pilat Wide (B2C headings) \u2500\u2500 */
 
   @font-face {
     font-family: 'Pilat Wide';
-    src: url('${CDN_BASE}/Pilat_Test_Medium_/Pilat_Test_Medium.ttf') format('truetype');
+    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_BASE}/Pilat_Test_Demi_Bold_bee67c470a/Pilat_Test_Demi_Bold_bee67c470a.ttf') format('truetype');
+    src: url('${CDN_STRAPI}/Pilat_Test_Demi_Bold_bee67c470a/Pilat_Test_Demi_Bold_bee67c470a.ttf') format('truetype');
     font-weight: 600;
     font-style: normal;
     font-display: swap;
   }
   @font-face {
     font-family: 'Pilat Wide';
-    src: url('${CDN_BASE}/Pilat_Test_Bold_b12b40d234/Pilat_Test_Bold_b12b40d234.ttf') format('truetype');
+    src: url('${CDN_STRAPI}/Pilat_Test_Bold_b12b40d234/Pilat_Test_Bold_b12b40d234.ttf') format('truetype');
     font-weight: 700;
     font-style: normal;
     font-display: swap;
   }
   @font-face {
     font-family: 'Pilat Wide';
-    src: url('${CDN_BASE}/Pilat_Test_Heavy_2885678ca4/Pilat_Test_Heavy_2885678ca4.otf') format('opentype');
+    src: url('${CDN_STRAPI}/Pilat_Test_Heavy_2885678ca4/Pilat_Test_Heavy_2885678ca4.otf') format('opentype');
+    font-weight: 800;
+    font-style: normal;
+    font-display: swap;
+  }
+
+  /* \u2500\u2500 Pilat (B2B headings) \u2500\u2500 */
+
+  @font-face {
+    font-family: 'Pilat';
+    src: url('${CDN_MERCHANT}/55a03110b2400b778d485de2c8d064c0.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');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Pilat';
+    src: url('${CDN_MERCHANT}/ed4fe74e88aaacc6978f06a862e75b08.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');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Pilat';
+    src: url('${CDN_MERCHANT}/218d647ff7690c1e312f6943e29af375.woff2') format('woff2');
     font-weight: 800;
     font-style: normal;
     font-display: swap;
@@ -2148,35 +2202,35 @@ var fontFacesCSS = `
 
   @font-face {
     font-family: 'Aktiv Grotesk';
-    src: url('${CDN_BASE}/Pilat_Test_Light_c4650750bb/Pilat_Test_Light_c4650750bb.otf') format('opentype');
+    src: url('${CDN_STRAPI}/Pilat_Test_Light_c4650750bb/Pilat_Test_Light_c4650750bb.otf') format('opentype');
     font-weight: 300;
     font-style: normal;
     font-display: swap;
   }
   @font-face {
     font-family: 'Aktiv Grotesk';
-    src: url('${CDN_BASE}/Pilat_Test_Book_5cb49cd592/Pilat_Test_Book_5cb49cd592.otf') format('opentype');
+    src: url('${CDN_STRAPI}/Pilat_Test_Book_5cb49cd592/Pilat_Test_Book_5cb49cd592.otf') format('opentype');
     font-weight: 400;
     font-style: normal;
     font-display: swap;
   }
   @font-face {
     font-family: 'Aktiv Grotesk';
-    src: url('${CDN_BASE}/Pilat_Test_Demi_e9bed59107/Pilat_Test_Demi_e9bed59107.otf') format('opentype');
+    src: url('${CDN_STRAPI}/Pilat_Test_Demi_e9bed59107/Pilat_Test_Demi_e9bed59107.otf') format('opentype');
     font-weight: 500;
     font-style: normal;
     font-display: swap;
   }
   @font-face {
     font-family: 'Aktiv Grotesk';
-    src: url('${CDN_BASE}/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');
+    src: url('${CDN_STRAPI}/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');
     font-weight: 600;
     font-style: normal;
     font-display: swap;
   }
   @font-face {
     font-family: 'Aktiv Grotesk';
-    src: url('${CDN_BASE}/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');
+    src: url('${CDN_STRAPI}/Pilat_Test_Bold_195d1b44fa/Pilat_Test_Bold_195d1b44fa.otf') format('opentype');
     font-weight: 700;
     font-style: normal;
     font-display: swap;
@@ -2207,999 +2261,1008 @@ FontLoader.displayName = "FontLoader";
 
 // src/index.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var themeConfig = (mode = "dark", productContext = defaultProductContext) => ({
-  colors: colors[mode],
-  spacing,
-  radius,
-  shadow,
-  fonts,
-  typography: {
-    primary: fonts.body,
-    heading: fonts.heading,
-    body: fonts.body
-  },
-  typographyTokens: getTypographyTokens(productContext),
-  productContext,
-  sizing: {
-    button: (size) => {
-      const configs = {
-        xl: {
-          height: 64,
-          padding: 20,
-          fontSize: 20,
-          sublabelFontSize: 18,
-          spinnerSize: 24,
-          iconSize: 32,
-          iconContainerSize: 64,
-          iconPadding: 20,
-          loadingPadding: 40,
-          borderRadius: 8,
-          labelIconSize: 18,
-          labelIconGap: 6
-        },
-        lg: {
-          height: 56,
-          padding: 20,
-          fontSize: 18,
-          sublabelFontSize: 16,
-          spinnerSize: 24,
-          iconSize: 32,
-          iconContainerSize: 56,
-          iconPadding: 20,
-          loadingPadding: 36,
-          borderRadius: 8,
-          labelIconSize: 16,
-          labelIconGap: 6
-        },
-        md: {
-          height: 48,
-          padding: 20,
-          fontSize: 16,
-          sublabelFontSize: 14,
-          spinnerSize: 20,
-          iconSize: 28,
-          iconContainerSize: 48,
-          iconPadding: 20,
-          loadingPadding: 32,
-          borderRadius: 8,
-          labelIconSize: 14,
-          labelIconGap: 4
-        },
-        sm: {
-          height: 40,
-          padding: 20,
-          fontSize: 14,
-          sublabelFontSize: 12,
-          spinnerSize: 16,
-          iconSize: 28,
-          iconContainerSize: 40,
-          iconPadding: 20,
-          loadingPadding: 28,
-          borderRadius: 4,
-          labelIconSize: 12,
-          labelIconGap: 4
-        },
-        xs: {
-          height: 32,
-          padding: 20,
-          fontSize: 12,
-          sublabelFontSize: 10,
-          spinnerSize: 16,
-          iconSize: 24,
-          iconContainerSize: 32,
-          iconPadding: 20,
-          loadingPadding: 28,
-          borderRadius: 4,
-          labelIconSize: 10,
-          labelIconGap: 4
-        }
-      };
-      return configs[size];
-    },
-    flexButton: (size) => {
-      const configs = {
-        xl: {
-          height: 36,
-          padding: 4,
-          fontSize: 16,
-          spinnerSize: 28,
-          iconSize: 20,
-          borderRadius: 4
-        },
-        lg: {
-          height: 32,
-          padding: 4,
-          fontSize: 14,
-          spinnerSize: 24,
-          iconSize: 18,
-          borderRadius: 4
-        },
-        md: {
-          height: 28,
-          padding: 2,
-          fontSize: 14,
-          spinnerSize: 24,
-          iconSize: 16,
-          borderRadius: 2
-        },
-        sm: {
-          height: 22,
-          padding: 2,
-          fontSize: 12,
-          spinnerSize: 16,
-          iconSize: 14,
-          borderRadius: 2
-        },
-        xs: {
-          height: 20,
-          padding: 2,
-          fontSize: 12,
-          spinnerSize: 16,
-          iconSize: 12,
-          borderRadius: 2
-        }
-      };
-      return configs[size];
-    },
-    checkbox: (size) => {
-      const configs = {
-        xl: {
-          size: 22,
-          fontSize: 18,
-          descriptionFontSize: 16,
-          labelGap: 12,
-          textGap: 4,
-          borderRadius: 2
-        },
-        lg: {
-          size: 20,
-          fontSize: 16,
-          descriptionFontSize: 14,
-          labelGap: 10,
-          textGap: 2,
-          borderRadius: 2
-        },
-        md: {
-          size: 18,
-          fontSize: 16,
-          descriptionFontSize: 14,
-          labelGap: 8,
-          textGap: 2,
-          borderRadius: 2
-        },
-        sm: {
-          size: 16,
-          fontSize: 14,
-          descriptionFontSize: 12,
-          labelGap: 8,
-          textGap: 0,
-          borderRadius: 2
-        }
-      };
-      return configs[size];
-    },
-    radio: (size) => {
-      const configs = {
-        xl: {
-          size: 24,
-          fontSize: 20,
-          lineHeight: 22,
-          descriptionFontSize: 18,
-          descriptionLineHeight: 20,
-          labelGap: 12,
-          textGap: 4,
-          borderWidth: 2
-        },
-        lg: {
-          size: 20,
-          fontSize: 18,
-          lineHeight: 20,
-          descriptionFontSize: 16,
-          descriptionLineHeight: 18,
-          labelGap: 10,
-          textGap: 2,
-          borderWidth: 2
-        },
-        md: {
-          size: 18,
-          fontSize: 16,
-          lineHeight: 18,
-          descriptionFontSize: 14,
-          descriptionLineHeight: 16,
-          labelGap: 8,
-          textGap: 2,
-          borderWidth: 1
-        },
-        sm: {
-          size: 16,
-          fontSize: 14,
-          lineHeight: 16,
-          descriptionFontSize: 12,
-          descriptionLineHeight: 14,
-          labelGap: 8,
-          textGap: 0,
-          borderWidth: 1
-        }
-      };
-      return configs[size];
-    },
-    input: (size) => {
-      const configs = {
-        xl: {
-          height: 64,
-          paddingVertical: 12,
-          paddingHorizontal: 12,
-          fontSize: 20,
-          iconSize: 18,
-          radius: 8,
-          borderWidth: 2,
-          fieldGap: 8,
-          lineHeight: 20
-        },
-        lg: {
-          height: 56,
-          paddingVertical: 14,
-          paddingHorizontal: 12,
-          fontSize: 18,
-          iconSize: 18,
-          radius: 8,
-          borderWidth: 2,
-          fieldGap: 6,
-          lineHeight: 18
-        },
-        md: {
-          height: 48,
-          paddingVertical: 11,
-          paddingHorizontal: 12,
-          fontSize: 16,
-          iconSize: 18,
-          radius: 8,
-          borderWidth: 1,
-          fieldGap: 4,
-          lineHeight: 16
-        },
-        sm: {
-          height: 40,
-          paddingVertical: 7,
-          paddingHorizontal: 10,
-          fontSize: 14,
-          iconSize: 18,
-          radius: 4,
-          borderWidth: 1,
-          fieldGap: 4,
-          lineHeight: 14
-        },
-        xs: {
-          height: 32,
-          paddingVertical: 7,
-          paddingHorizontal: 10,
-          fontSize: 12,
-          iconSize: 18,
-          radius: 4,
-          borderWidth: 1,
-          fieldGap: 4,
-          lineHeight: 10
-        }
-      };
-      return configs[size];
-    },
-    inputPin: (size) => {
-      const configs = {
-        xl: {
-          size: 64,
-          gap: 10,
-          fontSize: 20,
-          radius: 8,
-          borderWidth: 1,
-          fieldGap: 8
-        },
-        lg: {
-          size: 56,
-          gap: 8,
-          fontSize: 18,
-          radius: 8,
-          borderWidth: 1,
-          fieldGap: 6
-        },
-        md: {
-          size: 48,
-          gap: 6,
-          fontSize: 16,
-          radius: 8,
-          borderWidth: 1,
-          fieldGap: 4
-        },
-        sm: {
-          size: 40,
-          gap: 4,
-          fontSize: 14,
-          radius: 4,
-          borderWidth: 1,
-          fieldGap: 4
-        },
-        xs: {
-          size: 32,
-          gap: 4,
-          fontSize: 12,
-          radius: 4,
-          borderWidth: 1,
-          fieldGap: 4
-        }
-      };
-      return configs[size];
-    },
-    textarea: (size) => {
-      const configs = {
-        xl: {
-          height: 144,
-          padding: spacing.xl,
-          fontSize: 20,
-          iconSize: 32,
-          radius: 8
-        },
-        lg: {
-          height: 128,
-          padding: spacing.l,
-          fontSize: 18,
-          iconSize: 28,
-          radius: 8
-        },
-        md: {
-          height: 112,
-          padding: spacing.m,
-          fontSize: 16,
-          iconSize: 24,
-          radius: 8
-        },
-        sm: {
-          height: 96,
-          padding: spacing.s,
-          fontSize: 14,
-          iconSize: 20,
-          radius: 4
-        },
-        xs: {
-          height: 80,
-          padding: spacing.xs,
-          fontSize: 12,
-          iconSize: 16,
-          radius: 4
-        }
-      };
-      return configs[size];
-    },
-    switch: (size) => {
-      const configs = {
-        xl: {
-          width: 40,
-          height: 22,
-          knobSize: 18,
-          fontSize: 20,
-          lineHeight: 22,
-          descriptionFontSize: 18,
-          descriptionLineHeight: 20,
-          labelGap: 12,
-          textGap: 4,
-          frameBorderRadius: 4,
-          knobBorderRadius: 2
-        },
-        lg: {
-          width: 36,
-          height: 20,
-          knobSize: 16,
-          fontSize: 18,
-          lineHeight: 20,
-          descriptionFontSize: 16,
-          descriptionLineHeight: 18,
-          labelGap: 10,
-          textGap: 2,
-          frameBorderRadius: 4,
-          knobBorderRadius: 2
-        },
-        md: {
-          width: 32,
-          height: 18,
-          knobSize: 14,
-          fontSize: 16,
-          lineHeight: 18,
-          descriptionFontSize: 14,
-          descriptionLineHeight: 16,
-          labelGap: 8,
-          textGap: 2,
-          frameBorderRadius: 2,
-          knobBorderRadius: 2
-        },
-        sm: {
-          width: 28,
-          height: 16,
-          knobSize: 12,
-          fontSize: 14,
-          lineHeight: 16,
-          descriptionFontSize: 12,
-          descriptionLineHeight: 14,
-          labelGap: 8,
-          textGap: 0,
-          frameBorderRadius: 2,
-          knobBorderRadius: 2
-        }
-      };
-      return configs[size];
-    },
-    avatar: (size) => {
-      const configs = {
-        xl: {
-          size: 64,
-          fontSize: 24,
-          iconSize: 32,
-          badgeSize: 20,
-          badgeOffsetCircle: { right: -4, top: -4 },
-          badgeOffsetSquare: { right: -8, top: -8 },
-          borderRadiusSquare: radius.avatarLarge,
-          borderRadiusCircle: radius.avatarCircle
-        },
-        lg: {
-          size: 56,
-          fontSize: 20,
-          iconSize: 28,
-          badgeSize: 20,
-          badgeOffsetCircle: { right: -4, top: -4 },
-          badgeOffsetSquare: { right: -8, top: -8 },
-          borderRadiusSquare: radius.avatarLarge,
-          borderRadiusCircle: radius.avatarCircle
-        },
-        md: {
-          size: 48,
-          fontSize: 18,
-          iconSize: 24,
-          badgeSize: 20,
-          badgeOffsetCircle: { right: -5, top: -5 },
-          badgeOffsetSquare: { right: -8, top: -8 },
-          borderRadiusSquare: radius.avatarLarge,
-          borderRadiusCircle: radius.avatarCircle
-        },
-        sm: {
-          size: 40,
-          fontSize: 16,
-          iconSize: 20,
-          badgeSize: 20,
-          badgeOffsetCircle: { right: -6, top: -6 },
-          badgeOffsetSquare: { right: -8, top: -8 },
-          borderRadiusSquare: radius.avatarLarge,
-          borderRadiusCircle: radius.avatarCircle
-        },
-        xs: {
-          size: 32,
-          fontSize: 14,
-          iconSize: 16,
-          badgeSize: 20,
-          badgeOffsetCircle: { right: -6, top: -6 },
-          badgeOffsetSquare: { right: -8, top: -8 },
-          borderRadiusSquare: radius.avatarSmall,
-          borderRadiusCircle: radius.avatarCircle
-        }
-      };
-      return configs[size];
-    },
-    tag: (size) => {
-      const configs = {
-        xl: {
-          height: 48,
-          padding: 20,
-          fontSize: 20,
-          gap: 10,
-          iconSize: 24,
-          radius: radius.tagLarge
-        },
-        lg: {
-          height: 40,
-          padding: 16,
-          fontSize: 18,
-          gap: 8,
-          iconSize: 24,
-          radius: radius.tagLarge
-        },
-        md: {
-          height: 32,
-          padding: 12,
-          fontSize: 16,
-          gap: 6,
-          iconSize: 16,
-          radius: radius.tagSmall
-        },
-        sm: {
-          height: 24,
-          padding: 8,
-          fontSize: 14,
-          gap: 4,
-          iconSize: 16,
-          radius: radius.tagSmall
-        },
-        xs: {
-          height: 20,
-          padding: 6,
-          fontSize: 12,
-          gap: 4,
-          iconSize: 16,
-          radius: radius.tagSmall
-        }
-      };
-      return configs[size];
-    },
-    divider: (size) => {
-      const configs = {
-        lg: { height: 18, fontSize: 16, lineWeight: 1 },
-        md: { height: 16, fontSize: 14, lineWeight: 1 },
-        sm: { height: 14, fontSize: 12, lineWeight: 1 }
-      };
-      return configs[size];
-    },
-    spinner: (size) => {
-      const configs = {
-        xl: { size: 96, strokeWidth: 10 },
-        lg: { size: 48, strokeWidth: 5 },
-        md: { size: 24, strokeWidth: 2 },
-        sm: { size: 16, strokeWidth: 2 },
-        xs: { size: 8, strokeWidth: 1 }
-      };
-      return configs[size];
-    },
-    tabs: (size) => {
-      const configs = {
-        xl: {
-          height: 64,
-          fontSize: 20,
-          iconSize: 18,
-          gap: 6,
-          paddingHorizontal: 20
-        },
-        lg: {
-          height: 56,
-          fontSize: 18,
-          iconSize: 18,
-          gap: 6,
-          paddingHorizontal: 20
-        },
-        md: {
-          height: 48,
-          fontSize: 16,
-          iconSize: 18,
-          gap: 6,
-          paddingHorizontal: 20
-        },
-        sm: {
-          height: 40,
-          fontSize: 14,
-          iconSize: 18,
-          gap: 6,
-          paddingHorizontal: 20
-        }
-      };
-      return configs[size];
-    },
-    segmented: (size) => {
-      const configs = {
-        xl: {
-          height: 64,
-          containerPadding: 4,
-          containerRadius: 8,
-          itemHeight: 56,
-          itemPaddingHorizontal: 20,
-          itemPaddingVertical: 10,
-          itemRadius: 6,
-          fontSize: 20,
-          lineHeight: 22,
-          iconSize: 24,
-          gap: 8
-        },
-        lg: {
-          height: 56,
-          containerPadding: 4,
-          containerRadius: 8,
-          itemHeight: 48,
-          itemPaddingHorizontal: 20,
-          itemPaddingVertical: 10,
-          itemRadius: 6,
-          fontSize: 18,
-          lineHeight: 20,
-          iconSize: 24,
-          gap: 8
-        },
-        md: {
-          height: 48,
-          containerPadding: 4,
-          containerRadius: 8,
-          itemHeight: 40,
-          itemPaddingHorizontal: 16,
-          itemPaddingVertical: 8,
-          itemRadius: 6,
-          fontSize: 16,
-          lineHeight: 18,
-          iconSize: 24,
-          gap: 6
-        },
-        sm: {
-          height: 40,
-          containerPadding: 4,
-          containerRadius: 4,
-          itemHeight: 32,
-          itemPaddingHorizontal: 12,
-          itemPaddingVertical: 6,
-          itemRadius: 2,
-          fontSize: 14,
-          lineHeight: 16,
-          iconSize: 20,
-          gap: 4
-        }
-      };
-      return configs[size];
-    },
-    tabsSegmented: (size) => {
-      const configs = {
-        xl: {
-          height: 64,
-          containerPadding: 4,
-          containerRadius: 4,
-          itemPaddingHorizontal: 16,
-          itemPaddingVertical: 18,
-          itemRadius: 2,
-          fontSize: 20,
-          lineHeight: 22,
-          iconSize: 24,
-          gap: 8
-        },
-        lg: {
-          height: 56,
-          containerPadding: 4,
-          containerRadius: 4,
-          itemPaddingHorizontal: 16,
-          itemPaddingVertical: 14,
-          itemRadius: 2,
-          fontSize: 18,
-          lineHeight: 20,
-          iconSize: 24,
-          gap: 8
-        },
-        md: {
-          height: 48,
-          containerPadding: 4,
-          containerRadius: 4,
-          itemPaddingHorizontal: 12,
-          itemPaddingVertical: 11,
-          itemRadius: 2,
-          fontSize: 16,
-          lineHeight: 18,
-          iconSize: 24,
-          gap: 6
-        },
-        sm: {
-          height: 40,
-          containerPadding: 3,
-          containerRadius: 2,
-          itemPaddingHorizontal: 12,
-          itemPaddingVertical: 8,
-          itemRadius: 2,
-          fontSize: 14,
-          lineHeight: 16,
-          iconSize: 20,
-          gap: 6
-        }
-      };
-      return configs[size];
-    },
-    checkboxTagGroup: (size) => {
-      const configs = {
-        xl: {
-          height: 64,
-          paddingHorizontal: 16,
-          paddingVertical: 21,
-          fontSize: 20,
-          lineHeight: 22,
-          gap: 8,
-          borderRadius: 4
-        },
-        lg: {
-          height: 56,
-          paddingHorizontal: 16,
-          paddingVertical: 18,
-          fontSize: 18,
-          lineHeight: 20,
-          gap: 8,
-          borderRadius: 4
-        },
-        md: {
-          height: 48,
-          paddingHorizontal: 12,
-          paddingVertical: 15,
-          fontSize: 16,
-          lineHeight: 18,
-          gap: 8,
-          borderRadius: 2
-        },
-        sm: {
-          height: 40,
+var themeConfig = (mode = "dark", productContext = defaultProductContext) => {
+  const contextFonts = getFonts(productContext);
+  return {
+    colors: colors[mode],
+    spacing,
+    radius,
+    shadow,
+    fonts: contextFonts,
+    typography: {
+      primary: contextFonts.body,
+      heading: contextFonts.heading,
+      body: contextFonts.body
+    },
+    typographyTokens: getTypographyTokens(productContext),
+    productContext,
+    sizing: {
+      button: (size) => {
+        const configs = {
+          xl: {
+            height: 64,
+            padding: 20,
+            fontSize: 20,
+            sublabelFontSize: 18,
+            spinnerSize: 24,
+            iconSize: 32,
+            iconContainerSize: 64,
+            iconPadding: 20,
+            loadingPadding: 40,
+            borderRadius: 8,
+            labelIconSize: 18,
+            labelIconGap: 6
+          },
+          lg: {
+            height: 56,
+            padding: 20,
+            fontSize: 18,
+            sublabelFontSize: 16,
+            spinnerSize: 24,
+            iconSize: 32,
+            iconContainerSize: 56,
+            iconPadding: 20,
+            loadingPadding: 36,
+            borderRadius: 8,
+            labelIconSize: 16,
+            labelIconGap: 6
+          },
+          md: {
+            height: 48,
+            padding: 20,
+            fontSize: 16,
+            sublabelFontSize: 14,
+            spinnerSize: 20,
+            iconSize: 28,
+            iconContainerSize: 48,
+            iconPadding: 20,
+            loadingPadding: 32,
+            borderRadius: 8,
+            labelIconSize: 14,
+            labelIconGap: 4
+          },
+          sm: {
+            height: 40,
+            padding: 20,
+            fontSize: 14,
+            sublabelFontSize: 12,
+            spinnerSize: 16,
+            iconSize: 28,
+            iconContainerSize: 40,
+            iconPadding: 20,
+            loadingPadding: 28,
+            borderRadius: 4,
+            labelIconSize: 12,
+            labelIconGap: 4
+          },
+          xs: {
+            height: 32,
+            padding: 20,
+            fontSize: 12,
+            sublabelFontSize: 10,
+            spinnerSize: 16,
+            iconSize: 24,
+            iconContainerSize: 32,
+            iconPadding: 20,
+            loadingPadding: 28,
+            borderRadius: 4,
+            labelIconSize: 10,
+            labelIconGap: 4
+          }
+        };
+        return configs[size];
+      },
+      flexButton: (size) => {
+        const configs = {
+          xl: {
+            height: 36,
+            padding: 4,
+            fontSize: 16,
+            spinnerSize: 28,
+            iconSize: 20,
+            borderRadius: 4
+          },
+          lg: {
+            height: 32,
+            padding: 4,
+            fontSize: 14,
+            spinnerSize: 24,
+            iconSize: 18,
+            borderRadius: 4
+          },
+          md: {
+            height: 28,
+            padding: 2,
+            fontSize: 14,
+            spinnerSize: 24,
+            iconSize: 16,
+            borderRadius: 2
+          },
+          sm: {
+            height: 22,
+            padding: 2,
+            fontSize: 12,
+            spinnerSize: 16,
+            iconSize: 14,
+            borderRadius: 2
+          },
+          xs: {
+            height: 20,
+            padding: 2,
+            fontSize: 12,
+            spinnerSize: 16,
+            iconSize: 12,
+            borderRadius: 2
+          }
+        };
+        return configs[size];
+      },
+      checkbox: (size) => {
+        const configs = {
+          xl: {
+            size: 22,
+            fontSize: 18,
+            descriptionFontSize: 16,
+            labelGap: 12,
+            textGap: 4,
+            borderRadius: 2
+          },
+          lg: {
+            size: 20,
+            fontSize: 16,
+            descriptionFontSize: 14,
+            labelGap: 10,
+            textGap: 2,
+            borderRadius: 2
+          },
+          md: {
+            size: 18,
+            fontSize: 16,
+            descriptionFontSize: 14,
+            labelGap: 8,
+            textGap: 2,
+            borderRadius: 2
+          },
+          sm: {
+            size: 16,
+            fontSize: 14,
+            descriptionFontSize: 12,
+            labelGap: 8,
+            textGap: 0,
+            borderRadius: 2
+          }
+        };
+        return configs[size];
+      },
+      radio: (size) => {
+        const configs = {
+          xl: {
+            size: 24,
+            fontSize: 20,
+            lineHeight: 22,
+            descriptionFontSize: 18,
+            descriptionLineHeight: 20,
+            labelGap: 12,
+            textGap: 4,
+            borderWidth: 2
+          },
+          lg: {
+            size: 20,
+            fontSize: 18,
+            lineHeight: 20,
+            descriptionFontSize: 16,
+            descriptionLineHeight: 18,
+            labelGap: 10,
+            textGap: 2,
+            borderWidth: 2
+          },
+          md: {
+            size: 18,
+            fontSize: 16,
+            lineHeight: 18,
+            descriptionFontSize: 14,
+            descriptionLineHeight: 16,
+            labelGap: 8,
+            textGap: 2,
+            borderWidth: 1
+          },
+          sm: {
+            size: 16,
+            fontSize: 14,
+            lineHeight: 16,
+            descriptionFontSize: 12,
+            descriptionLineHeight: 14,
+            labelGap: 8,
+            textGap: 0,
+            borderWidth: 1
+          }
+        };
+        return configs[size];
+      },
+      input: (size) => {
+        const configs = {
+          xl: {
+            height: 64,
+            paddingVertical: 12,
+            paddingHorizontal: 12,
+            fontSize: 20,
+            iconSize: 18,
+            radius: 8,
+            borderWidth: 2,
+            fieldGap: 8,
+            lineHeight: 20
+          },
+          lg: {
+            height: 56,
+            paddingVertical: 14,
+            paddingHorizontal: 12,
+            fontSize: 18,
+            iconSize: 18,
+            radius: 8,
+            borderWidth: 2,
+            fieldGap: 6,
+            lineHeight: 18
+          },
+          md: {
+            height: 48,
+            paddingVertical: 11,
+            paddingHorizontal: 12,
+            fontSize: 16,
+            iconSize: 18,
+            radius: 8,
+            borderWidth: 1,
+            fieldGap: 4,
+            lineHeight: 16
+          },
+          sm: {
+            height: 40,
+            paddingVertical: 7,
+            paddingHorizontal: 10,
+            fontSize: 14,
+            iconSize: 18,
+            radius: 4,
+            borderWidth: 1,
+            fieldGap: 4,
+            lineHeight: 14
+          },
+          xs: {
+            height: 32,
+            paddingVertical: 7,
+            paddingHorizontal: 10,
+            fontSize: 12,
+            iconSize: 18,
+            radius: 4,
+            borderWidth: 1,
+            fieldGap: 4,
+            lineHeight: 10
+          }
+        };
+        return configs[size];
+      },
+      inputPin: (size) => {
+        const configs = {
+          xl: {
+            size: 64,
+            gap: 10,
+            fontSize: 20,
+            radius: 8,
+            borderWidth: 1,
+            fieldGap: 8
+          },
+          lg: {
+            size: 56,
+            gap: 8,
+            fontSize: 18,
+            radius: 8,
+            borderWidth: 1,
+            fieldGap: 6
+          },
+          md: {
+            size: 48,
+            gap: 6,
+            fontSize: 16,
+            radius: 8,
+            borderWidth: 1,
+            fieldGap: 4
+          },
+          sm: {
+            size: 40,
+            gap: 4,
+            fontSize: 14,
+            radius: 4,
+            borderWidth: 1,
+            fieldGap: 4
+          },
+          xs: {
+            size: 32,
+            gap: 4,
+            fontSize: 12,
+            radius: 4,
+            borderWidth: 1,
+            fieldGap: 4
+          }
+        };
+        return configs[size];
+      },
+      textarea: (size) => {
+        const configs = {
+          xl: {
+            height: 144,
+            padding: spacing.xl,
+            fontSize: 20,
+            iconSize: 32,
+            radius: 8
+          },
+          lg: {
+            height: 128,
+            padding: spacing.l,
+            fontSize: 18,
+            iconSize: 28,
+            radius: 8
+          },
+          md: {
+            height: 112,
+            padding: spacing.m,
+            fontSize: 16,
+            iconSize: 24,
+            radius: 8
+          },
+          sm: {
+            height: 96,
+            padding: spacing.s,
+            fontSize: 14,
+            iconSize: 20,
+            radius: 4
+          },
+          xs: {
+            height: 80,
+            padding: spacing.xs,
+            fontSize: 12,
+            iconSize: 16,
+            radius: 4
+          }
+        };
+        return configs[size];
+      },
+      switch: (size) => {
+        const configs = {
+          xl: {
+            width: 40,
+            height: 22,
+            knobSize: 18,
+            fontSize: 20,
+            lineHeight: 22,
+            descriptionFontSize: 18,
+            descriptionLineHeight: 20,
+            labelGap: 12,
+            textGap: 4,
+            frameBorderRadius: 4,
+            knobBorderRadius: 2
+          },
+          lg: {
+            width: 36,
+            height: 20,
+            knobSize: 16,
+            fontSize: 18,
+            lineHeight: 20,
+            descriptionFontSize: 16,
+            descriptionLineHeight: 18,
+            labelGap: 10,
+            textGap: 2,
+            frameBorderRadius: 4,
+            knobBorderRadius: 2
+          },
+          md: {
+            width: 32,
+            height: 18,
+            knobSize: 14,
+            fontSize: 16,
+            lineHeight: 18,
+            descriptionFontSize: 14,
+            descriptionLineHeight: 16,
+            labelGap: 8,
+            textGap: 2,
+            frameBorderRadius: 2,
+            knobBorderRadius: 2
+          },
+          sm: {
+            width: 28,
+            height: 16,
+            knobSize: 12,
+            fontSize: 14,
+            lineHeight: 16,
+            descriptionFontSize: 12,
+            descriptionLineHeight: 14,
+            labelGap: 8,
+            textGap: 0,
+            frameBorderRadius: 2,
+            knobBorderRadius: 2
+          }
+        };
+        return configs[size];
+      },
+      avatar: (size) => {
+        const configs = {
+          xl: {
+            size: 64,
+            fontSize: 24,
+            iconSize: 32,
+            badgeSize: 20,
+            badgeOffsetCircle: { right: -4, top: -4 },
+            badgeOffsetSquare: { right: -8, top: -8 },
+            borderRadiusSquare: radius.avatarLarge,
+            borderRadiusCircle: radius.avatarCircle
+          },
+          lg: {
+            size: 56,
+            fontSize: 20,
+            iconSize: 28,
+            badgeSize: 20,
+            badgeOffsetCircle: { right: -4, top: -4 },
+            badgeOffsetSquare: { right: -8, top: -8 },
+            borderRadiusSquare: radius.avatarLarge,
+            borderRadiusCircle: radius.avatarCircle
+          },
+          md: {
+            size: 48,
+            fontSize: 18,
+            iconSize: 24,
+            badgeSize: 20,
+            badgeOffsetCircle: { right: -5, top: -5 },
+            badgeOffsetSquare: { right: -8, top: -8 },
+            borderRadiusSquare: radius.avatarLarge,
+            borderRadiusCircle: radius.avatarCircle
+          },
+          sm: {
+            size: 40,
+            fontSize: 16,
+            iconSize: 20,
+            badgeSize: 20,
+            badgeOffsetCircle: { right: -6, top: -6 },
+            badgeOffsetSquare: { right: -8, top: -8 },
+            borderRadiusSquare: radius.avatarLarge,
+            borderRadiusCircle: radius.avatarCircle
+          },
+          xs: {
+            size: 32,
+            fontSize: 14,
+            iconSize: 16,
+            badgeSize: 20,
+            badgeOffsetCircle: { right: -6, top: -6 },
+            badgeOffsetSquare: { right: -8, top: -8 },
+            borderRadiusSquare: radius.avatarSmall,
+            borderRadiusCircle: radius.avatarCircle
+          }
+        };
+        return configs[size];
+      },
+      tag: (size) => {
+        const configs = {
+          xl: {
+            height: 48,
+            padding: 20,
+            fontSize: 20,
+            gap: 10,
+            iconSize: 24,
+            radius: radius.tagLarge
+          },
+          lg: {
+            height: 40,
+            padding: 16,
+            fontSize: 18,
+            gap: 8,
+            iconSize: 24,
+            radius: radius.tagLarge
+          },
+          md: {
+            height: 32,
+            padding: 12,
+            fontSize: 16,
+            gap: 6,
+            iconSize: 16,
+            radius: radius.tagSmall
+          },
+          sm: {
+            height: 24,
+            padding: 8,
+            fontSize: 14,
+            gap: 4,
+            iconSize: 16,
+            radius: radius.tagSmall
+          },
+          xs: {
+            height: 20,
+            padding: 6,
+            fontSize: 12,
+            gap: 4,
+            iconSize: 16,
+            radius: radius.tagSmall
+          }
+        };
+        return configs[size];
+      },
+      divider: (size) => {
+        const configs = {
+          lg: { height: 18, fontSize: 16, lineWeight: 1 },
+          md: { height: 16, fontSize: 14, lineWeight: 1 },
+          sm: { height: 14, fontSize: 12, lineWeight: 1 }
+        };
+        return configs[size];
+      },
+      spinner: (size) => {
+        const configs = {
+          xl: { size: 96, strokeWidth: 10 },
+          lg: { size: 48, strokeWidth: 5 },
+          md: { size: 24, strokeWidth: 2 },
+          sm: { size: 16, strokeWidth: 2 },
+          xs: { size: 8, strokeWidth: 1 }
+        };
+        return configs[size];
+      },
+      tabs: (size) => {
+        const configs = {
+          xl: {
+            height: 64,
+            fontSize: 20,
+            iconSize: 18,
+            gap: 6,
+            paddingHorizontal: 20
+          },
+          lg: {
+            height: 56,
+            fontSize: 18,
+            iconSize: 18,
+            gap: 6,
+            paddingHorizontal: 20
+          },
+          md: {
+            height: 48,
+            fontSize: 16,
+            iconSize: 18,
+            gap: 6,
+            paddingHorizontal: 20
+          },
+          sm: {
+            height: 40,
+            fontSize: 14,
+            iconSize: 18,
+            gap: 6,
+            paddingHorizontal: 20
+          }
+        };
+        return configs[size];
+      },
+      segmented: (size) => {
+        const configs = {
+          xl: {
+            height: 64,
+            containerPadding: 4,
+            containerRadius: 8,
+            itemHeight: 56,
+            itemPaddingHorizontal: 20,
+            itemPaddingVertical: 10,
+            itemRadius: 6,
+            fontSize: 20,
+            lineHeight: 22,
+            iconSize: 24,
+            gap: 8
+          },
+          lg: {
+            height: 56,
+            containerPadding: 4,
+            containerRadius: 8,
+            itemHeight: 48,
+            itemPaddingHorizontal: 20,
+            itemPaddingVertical: 10,
+            itemRadius: 6,
+            fontSize: 18,
+            lineHeight: 20,
+            iconSize: 24,
+            gap: 8
+          },
+          md: {
+            height: 48,
+            containerPadding: 4,
+            containerRadius: 8,
+            itemHeight: 40,
+            itemPaddingHorizontal: 16,
+            itemPaddingVertical: 8,
+            itemRadius: 6,
+            fontSize: 16,
+            lineHeight: 18,
+            iconSize: 24,
+            gap: 6
+          },
+          sm: {
+            height: 40,
+            containerPadding: 4,
+            containerRadius: 4,
+            itemHeight: 32,
+            itemPaddingHorizontal: 12,
+            itemPaddingVertical: 6,
+            itemRadius: 2,
+            fontSize: 14,
+            lineHeight: 16,
+            iconSize: 20,
+            gap: 4
+          }
+        };
+        return configs[size];
+      },
+      tabsSegmented: (size) => {
+        const configs = {
+          xl: {
+            height: 64,
+            containerPadding: 4,
+            containerRadius: 4,
+            itemPaddingHorizontal: 16,
+            itemPaddingVertical: 18,
+            itemRadius: 2,
+            fontSize: 20,
+            lineHeight: 22,
+            iconSize: 24,
+            gap: 8
+          },
+          lg: {
+            height: 56,
+            containerPadding: 4,
+            containerRadius: 4,
+            itemPaddingHorizontal: 16,
+            itemPaddingVertical: 14,
+            itemRadius: 2,
+            fontSize: 18,
+            lineHeight: 20,
+            iconSize: 24,
+            gap: 8
+          },
+          md: {
+            height: 48,
+            containerPadding: 4,
+            containerRadius: 4,
+            itemPaddingHorizontal: 12,
+            itemPaddingVertical: 11,
+            itemRadius: 2,
+            fontSize: 16,
+            lineHeight: 18,
+            iconSize: 24,
+            gap: 6
+          },
+          sm: {
+            height: 40,
+            containerPadding: 3,
+            containerRadius: 2,
+            itemPaddingHorizontal: 12,
+            itemPaddingVertical: 8,
+            itemRadius: 2,
+            fontSize: 14,
+            lineHeight: 16,
+            iconSize: 20,
+            gap: 6
+          }
+        };
+        return configs[size];
+      },
+      checkboxTagGroup: (size) => {
+        const configs = {
+          xl: {
+            height: 64,
+            paddingHorizontal: 16,
+            paddingVertical: 21,
+            fontSize: 20,
+            lineHeight: 22,
+            gap: 8,
+            borderRadius: 4
+          },
+          lg: {
+            height: 56,
+            paddingHorizontal: 16,
+            paddingVertical: 18,
+            fontSize: 18,
+            lineHeight: 20,
+            gap: 8,
+            borderRadius: 4
+          },
+          md: {
+            height: 48,
+            paddingHorizontal: 12,
+            paddingVertical: 15,
+            fontSize: 16,
+            lineHeight: 18,
+            gap: 8,
+            borderRadius: 2
+          },
+          sm: {
+            height: 40,
+            paddingHorizontal: 12,
+            paddingVertical: 11,
+            fontSize: 14,
+            lineHeight: 16,
+            gap: 4,
+            borderRadius: 2
+          }
+        };
+        return configs[size];
+      },
+      badge: (size) => {
+        const configs = {
+          xl: {
+            size: 20,
+            fontSize: 12,
+            lineHeight: 14,
+            iconSize: 12,
+            padding: 4
+          },
+          lg: {
+            size: 16,
+            fontSize: 10,
+            lineHeight: 10,
+            iconSize: 10,
+            padding: 4
+          },
+          md: {
+            size: 12,
+            fontSize: 10,
+            lineHeight: 10,
+            iconSize: 8,
+            padding: 4
+          },
+          sm: { size: 8, fontSize: 8, lineHeight: 8, iconSize: 6, padding: 0 },
+          xs: { size: 6, fontSize: 6, lineHeight: 6, iconSize: 4, padding: 0 }
+        };
+        return configs[size];
+      },
+      notification: (type) => {
+        const configs = {
+          toast: {
+            width: 400,
+            paddingHorizontal: 20,
+            paddingVertical: 16,
+            gap: 16,
+            titleSize: 18,
+            messageSize: 14,
+            iconSize: 20,
+            iconWrapperSize: 32,
+            radius: radius.card
+          },
+          inline: {
+            width: "100%",
+            paddingHorizontal: 20,
+            paddingVertical: 16,
+            gap: 28,
+            titleSize: 18,
+            messageSize: 14,
+            iconSize: 20,
+            iconWrapperSize: 32,
+            radius: radius.card
+          }
+        };
+        return configs[type];
+      },
+      notificationPanel: () => ({
+        minHeight: 66,
+        iconFrameWidth: 54,
+        iconSize: 24,
+        borderRadius: 8,
+        bodyPaddingHorizontal: 16,
+        bodyPaddingVertical: 12,
+        textGap: 2,
+        contentGap: 24,
+        buttonsGap: 8,
+        closeButtonSize: 32,
+        titleFontSize: 16,
+        titleLineHeight: 20,
+        descriptionFontSize: 14,
+        descriptionLineHeight: 20
+      }),
+      progress: (size) => {
+        const configs = {
+          xl: { height: 10, labelSize: 16, helperSize: 14, gap: 10 },
+          lg: { height: 8, labelSize: 14, helperSize: 12, gap: 8 },
+          md: { height: 6, labelSize: 12, helperSize: 12, gap: 6 },
+          sm: { height: 4, labelSize: 12, helperSize: 12, gap: 4 },
+          xs: { height: 2, labelSize: 10, helperSize: 10, gap: 2 },
+          xxs: { height: 2, labelSize: 10, helperSize: 10, gap: 2 }
+        };
+        return configs[size];
+      },
+      supportingText: (size) => {
+        const configs = {
+          xl: { fontSize: 18, lineHeight: "20px", gap: 6, iconSize: 18 },
+          lg: { fontSize: 16, lineHeight: "18px", gap: 6, iconSize: 18 },
+          md: { fontSize: 14, lineHeight: "16px", gap: 6, iconSize: 18 },
+          sm: { fontSize: 12, lineHeight: "14px", gap: 4, iconSize: 16 },
+          xs: { fontSize: 10, lineHeight: "10px", gap: 4, iconSize: 16 }
+        };
+        return configs[size];
+      },
+      iconWrapper: (size) => {
+        const configs = {
+          xl: { size: 56, iconSize: 32, fontSize: 24 },
+          lg: { size: 48, iconSize: 28, fontSize: 20 },
+          md: { size: 40, iconSize: 24, fontSize: 18 },
+          sm: { size: 32, iconSize: 20, fontSize: 16 },
+          xs: { size: 24, iconSize: 16, fontSize: 14 },
+          xxs: { size: 18, iconSize: 12, fontSize: 12 }
+        };
+        return configs[size];
+      },
+      stepper: (size) => {
+        const configs = {
+          md: {
+            iconSize: 32,
+            titleSize: 16,
+            descSize: 14,
+            gap: 12,
+            currentTitleSize: 20,
+            currentDescSize: 14,
+            currentPadding: 24,
+            tailSize: 5
+          },
+          sm: {
+            iconSize: 24,
+            titleSize: 14,
+            descSize: 12,
+            gap: 8,
+            currentTitleSize: 16,
+            currentDescSize: 12,
+            currentPadding: 20,
+            tailSize: 3
+          }
+        };
+        return configs[size];
+      },
+      contextMenu: (size) => {
+        const configs = {
+          xl: {
+            paddingVertical: 8,
+            itemPaddingHorizontal: 16,
+            itemPaddingVertical: 18,
+            fontSize: 20,
+            lineHeight: 22,
+            descriptionFontSize: 18,
+            iconSize: 18,
+            gap: 12,
+            minWidth: 276,
+            // Search sizing from Figma
+            searchPaddingHorizontal: 16,
+            searchPaddingVertical: 18,
+            searchGap: 18,
+            searchFontSize: 20,
+            searchLineHeight: 22,
+            searchIconSize: 18
+          },
+          lg: {
+            paddingVertical: 8,
+            itemPaddingHorizontal: 14,
+            itemPaddingVertical: 14,
+            fontSize: 18,
+            lineHeight: 20,
+            descriptionFontSize: 16,
+            iconSize: 18,
+            gap: 10,
+            minWidth: 220,
+            // Search sizing from Figma
+            searchPaddingHorizontal: 14,
+            searchPaddingVertical: 14,
+            searchGap: 14,
+            searchFontSize: 18,
+            searchLineHeight: 20,
+            searchIconSize: 18
+          },
+          md: {
+            paddingVertical: 8,
+            itemPaddingHorizontal: 12,
+            itemPaddingVertical: 11,
+            fontSize: 16,
+            lineHeight: 18,
+            descriptionFontSize: 14,
+            iconSize: 18,
+            gap: 8,
+            minWidth: 172,
+            // Search sizing from Figma
+            searchPaddingHorizontal: 12,
+            searchPaddingVertical: 11,
+            searchGap: 10,
+            searchFontSize: 16,
+            searchLineHeight: 18,
+            searchIconSize: 18
+          },
+          sm: {
+            paddingVertical: 8,
+            itemPaddingHorizontal: 10,
+            itemPaddingVertical: 8,
+            fontSize: 14,
+            lineHeight: 16,
+            descriptionFontSize: 12,
+            iconSize: 18,
+            gap: 8,
+            minWidth: 132,
+            // Search sizing from Figma
+            searchPaddingHorizontal: 10,
+            searchPaddingVertical: 7,
+            searchGap: 6,
+            searchFontSize: 14,
+            searchLineHeight: 16,
+            searchIconSize: 18
+          }
+        };
+        return configs[size];
+      },
+      toast: () => {
+        return {
+          minHeight: 64,
           paddingHorizontal: 12,
-          paddingVertical: 11,
-          fontSize: 14,
-          lineHeight: 16,
-          gap: 4,
-          borderRadius: 2
-        }
-      };
-      return configs[size];
-    },
-    badge: (size) => {
-      const configs = {
-        xl: {
-          size: 20,
-          fontSize: 12,
-          lineHeight: 14,
-          iconSize: 12,
-          padding: 4
-        },
-        lg: {
-          size: 16,
-          fontSize: 10,
-          lineHeight: 10,
-          iconSize: 10,
-          padding: 4
-        },
-        md: { size: 12, fontSize: 10, lineHeight: 10, iconSize: 8, padding: 4 },
-        sm: { size: 8, fontSize: 8, lineHeight: 8, iconSize: 6, padding: 0 },
-        xs: { size: 6, fontSize: 6, lineHeight: 6, iconSize: 4, padding: 0 }
-      };
-      return configs[size];
-    },
-    notification: (type) => {
-      const configs = {
-        toast: {
-          width: 400,
-          paddingHorizontal: 20,
-          paddingVertical: 16,
-          gap: 16,
-          titleSize: 18,
-          messageSize: 14,
-          iconSize: 20,
-          iconWrapperSize: 32,
-          radius: radius.card
-        },
-        inline: {
-          width: "100%",
-          paddingHorizontal: 20,
-          paddingVertical: 16,
-          gap: 28,
-          titleSize: 18,
-          messageSize: 14,
-          iconSize: 20,
-          iconWrapperSize: 32,
-          radius: radius.card
-        }
-      };
-      return configs[type];
-    },
-    notificationPanel: () => ({
-      minHeight: 66,
-      iconFrameWidth: 54,
-      iconSize: 24,
-      borderRadius: 8,
-      bodyPaddingHorizontal: 16,
-      bodyPaddingVertical: 12,
-      textGap: 2,
-      contentGap: 24,
-      buttonsGap: 8,
-      closeButtonSize: 32,
-      titleFontSize: 16,
-      titleLineHeight: 20,
-      descriptionFontSize: 14,
-      descriptionLineHeight: 20
-    }),
-    progress: (size) => {
-      const configs = {
-        xl: { height: 10, labelSize: 16, helperSize: 14, gap: 10 },
-        lg: { height: 8, labelSize: 14, helperSize: 12, gap: 8 },
-        md: { height: 6, labelSize: 12, helperSize: 12, gap: 6 },
-        sm: { height: 4, labelSize: 12, helperSize: 12, gap: 4 },
-        xs: { height: 2, labelSize: 10, helperSize: 10, gap: 2 },
-        xxs: { height: 2, labelSize: 10, helperSize: 10, gap: 2 }
-      };
-      return configs[size];
-    },
-    supportingText: (size) => {
-      const configs = {
-        xl: { fontSize: 18, lineHeight: "20px", gap: 6, iconSize: 18 },
-        lg: { fontSize: 16, lineHeight: "18px", gap: 6, iconSize: 18 },
-        md: { fontSize: 14, lineHeight: "16px", gap: 6, iconSize: 18 },
-        sm: { fontSize: 12, lineHeight: "14px", gap: 4, iconSize: 16 },
-        xs: { fontSize: 10, lineHeight: "10px", gap: 4, iconSize: 16 }
-      };
-      return configs[size];
-    },
-    iconWrapper: (size) => {
-      const configs = {
-        xl: { size: 56, iconSize: 32, fontSize: 24 },
-        lg: { size: 48, iconSize: 28, fontSize: 20 },
-        md: { size: 40, iconSize: 24, fontSize: 18 },
-        sm: { size: 32, iconSize: 20, fontSize: 16 },
-        xs: { size: 24, iconSize: 16, fontSize: 14 },
-        xxs: { size: 18, iconSize: 12, fontSize: 12 }
-      };
-      return configs[size];
-    },
-    stepper: (size) => {
-      const configs = {
-        md: {
-          iconSize: 32,
-          titleSize: 16,
-          descSize: 14,
-          gap: 12,
-          currentTitleSize: 20,
-          currentDescSize: 14,
-          currentPadding: 24,
-          tailSize: 5
-        },
-        sm: {
-          iconSize: 24,
-          titleSize: 14,
-          descSize: 12,
-          gap: 8,
-          currentTitleSize: 16,
-          currentDescSize: 12,
-          currentPadding: 20,
-          tailSize: 3
-        }
-      };
-      return configs[size];
-    },
-    contextMenu: (size) => {
-      const configs = {
-        xl: {
           paddingVertical: 8,
-          itemPaddingHorizontal: 16,
-          itemPaddingVertical: 18,
-          fontSize: 20,
-          lineHeight: 22,
-          descriptionFontSize: 18,
-          iconSize: 18,
+          borderRadius: 4,
           gap: 12,
-          minWidth: 276,
-          // Search sizing from Figma
-          searchPaddingHorizontal: 16,
-          searchPaddingVertical: 18,
-          searchGap: 18,
-          searchFontSize: 20,
-          searchLineHeight: 22,
-          searchIconSize: 18
-        },
-        lg: {
-          paddingVertical: 8,
-          itemPaddingHorizontal: 14,
-          itemPaddingVertical: 14,
-          fontSize: 18,
-          lineHeight: 20,
-          descriptionFontSize: 16,
-          iconSize: 18,
-          gap: 10,
-          minWidth: 220,
-          // Search sizing from Figma
-          searchPaddingHorizontal: 14,
-          searchPaddingVertical: 14,
-          searchGap: 14,
-          searchFontSize: 18,
-          searchLineHeight: 20,
-          searchIconSize: 18
-        },
-        md: {
-          paddingVertical: 8,
-          itemPaddingHorizontal: 12,
-          itemPaddingVertical: 11,
-          fontSize: 16,
-          lineHeight: 18,
-          descriptionFontSize: 14,
-          iconSize: 18,
-          gap: 8,
-          minWidth: 172,
-          // Search sizing from Figma
-          searchPaddingHorizontal: 12,
-          searchPaddingVertical: 11,
-          searchGap: 10,
-          searchFontSize: 16,
-          searchLineHeight: 18,
-          searchIconSize: 18
-        },
-        sm: {
-          paddingVertical: 8,
-          itemPaddingHorizontal: 10,
-          itemPaddingVertical: 8,
-          fontSize: 14,
-          lineHeight: 16,
-          descriptionFontSize: 12,
-          iconSize: 18,
-          gap: 8,
-          minWidth: 132,
-          // Search sizing from Figma
-          searchPaddingHorizontal: 10,
-          searchPaddingVertical: 7,
-          searchGap: 6,
-          searchFontSize: 14,
-          searchLineHeight: 16,
-          searchIconSize: 18
-        }
-      };
-      return configs[size];
-    },
-    toast: () => {
-      return {
-        minHeight: 64,
-        paddingHorizontal: 12,
-        paddingVertical: 8,
-        borderRadius: 4,
-        gap: 12,
-        iconSize: 24,
-        closeButtonSize: 24,
-        closeIconSize: 20,
-        fontSize: 16,
-        lineHeight: 20,
-        maxWidth: 400,
-        containerPadding: 12,
-        groupGap: 4
-      };
-    },
-    toggleButtonGroup: (size) => {
-      const configs = {
-        xl: {
-          height: 64,
-          paddingHorizontal: 18,
-          fontSize: 20,
-          lineHeight: 22,
           iconSize: 24,
-          gap: 6,
-          borderRadius: 8,
-          itemGap: 8
-        },
-        lg: {
-          height: 56,
-          paddingHorizontal: 16,
-          fontSize: 18,
-          lineHeight: 20,
-          iconSize: 24,
-          gap: 4,
-          borderRadius: 8,
-          itemGap: 8
-        },
-        md: {
-          height: 48,
-          paddingHorizontal: 16,
+          closeButtonSize: 24,
+          closeIconSize: 20,
           fontSize: 16,
-          lineHeight: 18,
-          iconSize: 24,
-          gap: 4,
-          borderRadius: 8,
-          itemGap: 8
-        },
-        sm: {
-          height: 40,
-          paddingHorizontal: 12,
-          fontSize: 14,
-          lineHeight: 16,
-          iconSize: 24,
-          gap: 2,
-          borderRadius: 4,
-          itemGap: 4
-        },
-        xs: {
-          height: 32,
-          paddingHorizontal: 12,
-          fontSize: 14,
-          lineHeight: 16,
-          iconSize: 24,
-          gap: 2,
-          borderRadius: 4,
-          itemGap: 4
-        }
-      };
-      return configs[size];
+          lineHeight: 20,
+          maxWidth: 400,
+          containerPadding: 12,
+          groupGap: 4
+        };
+      },
+      toggleButtonGroup: (size) => {
+        const configs = {
+          xl: {
+            height: 64,
+            paddingHorizontal: 18,
+            fontSize: 20,
+            lineHeight: 22,
+            iconSize: 24,
+            gap: 6,
+            borderRadius: 8,
+            itemGap: 8
+          },
+          lg: {
+            height: 56,
+            paddingHorizontal: 16,
+            fontSize: 18,
+            lineHeight: 20,
+            iconSize: 24,
+            gap: 4,
+            borderRadius: 8,
+            itemGap: 8
+          },
+          md: {
+            height: 48,
+            paddingHorizontal: 16,
+            fontSize: 16,
+            lineHeight: 18,
+            iconSize: 24,
+            gap: 4,
+            borderRadius: 8,
+            itemGap: 8
+          },
+          sm: {
+            height: 40,
+            paddingHorizontal: 12,
+            fontSize: 14,
+            lineHeight: 16,
+            iconSize: 24,
+            gap: 2,
+            borderRadius: 4,
+            itemGap: 4
+          },
+          xs: {
+            height: 32,
+            paddingHorizontal: 12,
+            fontSize: 14,
+            lineHeight: 16,
+            iconSize: 24,
+            gap: 2,
+            borderRadius: 4,
+            itemGap: 4
+          }
+        };
+        return configs[size];
+      }
     }
-  }
-});
+  };
+};
 var DesignSystemContext = (0, import_react2.createContext)(
   void 0
 );
@@ -3261,6 +3324,7 @@ var useModalId = () => (0, import_react2.useContext)(ModalIdContext);
   defaultProductContext,
   fontFacesCSS,
   fonts,
+  getFonts,
   getTypographyTokens,
   getTypographyVariant,
   isAndroid,