@xsolla/xui-typography 0.113.0 → 0.114.0

package/README.md

@@ -83,6 +83,7 @@ import { Typography } from '@xsolla/xui-typography';
   marginTop={0}            // Top margin
   marginBottom={0}         // Bottom margin
   as="p"                   // HTML element to render
+  productContext="b2c"     // Override product context (optional)
 >
   Text content
 </Typography>
@@ -158,6 +159,43 @@ export default function AccentText() {
 }
 ```
 
+### Product Context Override
+
+```tsx
+import * as React from 'react';
+import { Typography } from '@xsolla/xui-typography';
+import { XUIProvider } from '@xsolla/xui-core';
+
+export default function ProductContextOverride() {
+  return (
+    // Root provider sets B2B context
+    <XUIProvider initialProductContext="b2b">
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+        {/* Uses B2B context from provider (56px, weight 400) */}
+        <Typography variant="h1">
+          Default B2B Heading
+        </Typography>
+
+        {/* Override to B2C context (40px, weight 700) */}
+        <Typography variant="h1" productContext="b2c">
+          B2C Marketing Headline
+        </Typography>
+
+        {/* Override to PayStation context for compact UI (28px, weight 700) */}
+        <Typography variant="h1" productContext="paystation">
+          Payment Form Title
+        </Typography>
+
+        {/* Override to Presentation context for large displays (56px, weight 700) */}
+        <Typography variant="h1" productContext="presentation">
+          Presentation Display
+        </Typography>
+      </div>
+    </XUIProvider>
+  );
+}
+```
+
 ## API Reference
 
 ### Typography
@@ -174,6 +212,7 @@ export default function AccentText() {
 | marginTop | `number` | `0` | Top margin in pixels. |
 | marginBottom | `number` | `0` | Bottom margin in pixels. |
 | as | `ElementType` | - | HTML element to render. |
+| productContext | `ProductContext` | - | Override product context (`"b2c"` \| `"b2b"` \| `"paystation"` \| `"presentation"`). Uses provider context if not specified. |
 
 **VariantType:**
 
@@ -217,13 +256,16 @@ type ColorType =
 
 ## Variant Specifications
 
+The values below are for **B2B context** (the default when no context is specified). These values change based on the product context. See the [Product Context documentation](/docs/product-context.md) for complete specifications for each context.
+
 | Variant | Size | Weight | Line Height |
 | :------ | :--- | :----- | :---------- |
-| display | 48px | 800 | 58px |
-| h1 | 40px | 700 | 48px |
-| h2 | 32px | 700 | 38px |
-| h3 | 28px | 700 | 34px |
-| h4 | 24px | 700 | 28px |
+| display | 64px | 400 | 78px |
+| h1 | 56px | 400 | 68px |
+| h2 | 48px | 400 | 58px |
+| h3 | 32px | 400 | 38px |
+| h4 | 24px | 400 | 28px |
+| h5 | 20px | 600 | 24px |
 | bodyLg | 18px | 400 | 24px |
 | bodyLgAccent | 18px | 500 | 24px |
 | bodyLgParagraph | 18px | 400 | 26px |
@@ -236,3 +278,12 @@ type ColorType =
 | bodyXs | 12px | 400 | 16px |
 | bodyXsAccent | 12px | 500 | 16px |
 | bodyXsParagraph | 12px | 400 | 18px |
+
+### Product Contexts
+
+Product contexts allow switching between different typographic scales (and in the future, component variations):
+
+- **b2c**: Consumer-facing (moderate sizes, bold headings)
+- **b2b**: Business/enterprise (larger sizes, lighter headings) - *Default*
+- **paystation**: Compact for payments (smaller sizes)
+- **presentation**: Large displays (largest sizes)

package/native/index.d.mts

@@ -2,9 +2,10 @@ import * as react from 'react';
 import { ReactNode, ElementType } from 'react';
 
 type AlignType = "center" | "inherit" | "justify" | "left" | "right";
-type VariantType = "h1" | "h2" | "h3" | "h4" | "display" | "bodyLg" | "bodyLgAccent" | "bodyLgParagraph" | "bodyMd" | "bodyMdAccent" | "bodyMdParagraph" | "bodySm" | "bodySmAccent" | "bodySmParagraph" | "bodyXs" | "bodyXsAccent" | "bodyXsParagraph";
+type VariantType = "h1" | "h2" | "h3" | "h4" | "h5" | "display" | "bodyLg" | "bodyLgAccent" | "bodyLgParagraph" | "bodyMd" | "bodyMdAccent" | "bodyMdParagraph" | "bodySm" | "bodySmAccent" | "bodySmParagraph" | "bodyXs" | "bodyXsAccent" | "bodyXsParagraph";
 type ThemeColorType = "primary" | "secondary" | "tertiary" | "brand" | "brandSecondary" | "success" | "warning" | "alert" | "neutral";
 type ColorType = ThemeColorType | "inherit";
+type ProductContext = "b2c" | "b2b" | "paystation" | "presentation";
 interface TypographyProps extends Omit<any, "color"> {
     children?: ReactNode;
     align?: AlignType;
@@ -14,10 +15,11 @@ interface TypographyProps extends Omit<any, "color"> {
     marginBottom?: number;
     marginTop?: number;
     as?: ElementType;
+    productContext?: ProductContext;
     "aria-hidden"?: boolean;
     "aria-live"?: "polite" | "assertive" | "off";
 }
 
 declare const Typography: react.ForwardRefExoticComponent<Omit<TypographyProps, "ref"> & react.RefAttributes<any>>;
 
-export { type AlignType, type ColorType, type ThemeColorType, Typography, type TypographyProps, type VariantType };
+export { type AlignType, type ColorType, type ProductContext, type ThemeColorType, Typography, type TypographyProps, type VariantType };

package/native/index.d.ts

@@ -2,9 +2,10 @@ import * as react from 'react';
 import { ReactNode, ElementType } from 'react';
 
 type AlignType = "center" | "inherit" | "justify" | "left" | "right";
-type VariantType = "h1" | "h2" | "h3" | "h4" | "display" | "bodyLg" | "bodyLgAccent" | "bodyLgParagraph" | "bodyMd" | "bodyMdAccent" | "bodyMdParagraph" | "bodySm" | "bodySmAccent" | "bodySmParagraph" | "bodyXs" | "bodyXsAccent" | "bodyXsParagraph";
+type VariantType = "h1" | "h2" | "h3" | "h4" | "h5" | "display" | "bodyLg" | "bodyLgAccent" | "bodyLgParagraph" | "bodyMd" | "bodyMdAccent" | "bodyMdParagraph" | "bodySm" | "bodySmAccent" | "bodySmParagraph" | "bodyXs" | "bodyXsAccent" | "bodyXsParagraph";
 type ThemeColorType = "primary" | "secondary" | "tertiary" | "brand" | "brandSecondary" | "success" | "warning" | "alert" | "neutral";
 type ColorType = ThemeColorType | "inherit";
+type ProductContext = "b2c" | "b2b" | "paystation" | "presentation";
 interface TypographyProps extends Omit<any, "color"> {
     children?: ReactNode;
     align?: AlignType;
@@ -14,10 +15,11 @@ interface TypographyProps extends Omit<any, "color"> {
     marginBottom?: number;
     marginTop?: number;
     as?: ElementType;
+    productContext?: ProductContext;
     "aria-hidden"?: boolean;
     "aria-live"?: "polite" | "assertive" | "off";
 }
 
 declare const Typography: react.ForwardRefExoticComponent<Omit<TypographyProps, "ref"> & react.RefAttributes<any>>;
 
-export { type AlignType, type ColorType, type ThemeColorType, Typography, type TypographyProps, type VariantType };
+export { type AlignType, type ColorType, type ProductContext, type ThemeColorType, Typography, type TypographyProps, type VariantType };

package/native/index.js

@@ -108,19 +108,79 @@ var getColor = (color, theme) => {
   };
   return colorMap[color] || color;
 };
-var isHeadingVariant = (variant) => variant === "h1" || variant === "h2" || variant === "h3" || variant === "h4" || variant === "display";
-var getVariantStyles = (variant) => {
+var isHeadingVariant = (variant) => variant === "h1" || variant === "h2" || variant === "h3" || variant === "h4" || variant === "h5" || variant === "display";
+var getVariantStyles = (variant, typographyTokens) => {
+  if (typographyTokens) {
+    const headingMap = {
+      h1: "h1",
+      h2: "h2",
+      h3: "h3",
+      h4: "h4",
+      h5: "h5"
+    };
+    if (headingMap[variant]) {
+      const token = typographyTokens.heading[headingMap[variant]];
+      if (token) {
+        return {
+          fontSize: token.fontSize,
+          fontWeight: String(token.fontWeight),
+          lineHeight: token.lineHeight
+        };
+      }
+    }
+    if (variant === "display" && typographyTokens.basic?.display) {
+      const token = typographyTokens.basic.display;
+      return {
+        fontSize: token.fontSize,
+        fontWeight: String(token.fontWeight),
+        lineHeight: token.lineHeight
+      };
+    }
+    const bodyMap = {
+      bodyLg: "body-lg",
+      bodyLgAccent: "body-lg",
+      bodyLgParagraph: "body-lg",
+      bodyMd: "body-md",
+      bodyMdAccent: "body-md",
+      bodyMdParagraph: "body-md",
+      bodySm: "body-sm",
+      bodySmAccent: "body-sm",
+      bodySmParagraph: "body-sm",
+      bodyXs: "body-xs",
+      bodyXsAccent: "body-xs",
+      bodyXsParagraph: "body-xs"
+    };
+    const bodyKey = bodyMap[variant];
+    if (bodyKey && typographyTokens.basic?.[bodyKey]) {
+      const token = typographyTokens.basic[bodyKey];
+      let fontWeight = token.fontWeight;
+      let lineHeight = token.lineHeight;
+      if (variant.includes("Accent") && token.accent) {
+        fontWeight = token.accent.fontWeight;
+      }
+      if (variant.includes("Paragraph") && token.paragraph) {
+        lineHeight = token.paragraph.lineHeight;
+      }
+      return {
+        fontSize: token.fontSize,
+        fontWeight: String(fontWeight),
+        lineHeight
+      };
+    }
+  }
   switch (variant) {
     case "h1":
-      return { fontSize: 40, fontWeight: "700", lineHeight: "48px" };
+      return { fontSize: 56, fontWeight: "400", lineHeight: "68px" };
     case "h2":
-      return { fontSize: 32, fontWeight: "700", lineHeight: "38px" };
+      return { fontSize: 48, fontWeight: "400", lineHeight: "58px" };
     case "h3":
-      return { fontSize: 28, fontWeight: "700", lineHeight: "34px" };
+      return { fontSize: 32, fontWeight: "400", lineHeight: "38px" };
     case "h4":
-      return { fontSize: 24, fontWeight: "700", lineHeight: "28px" };
+      return { fontSize: 24, fontWeight: "400", lineHeight: "28px" };
+    case "h5":
+      return { fontSize: 20, fontWeight: "600", lineHeight: "24px" };
     case "display":
-      return { fontSize: 48, fontWeight: "800", lineHeight: "58px" };
+      return { fontSize: 64, fontWeight: "400", lineHeight: "78px" };
     case "bodyLg":
       return { fontSize: 18, fontWeight: "400", lineHeight: "24px" };
     case "bodyLgAccent":
@@ -159,10 +219,12 @@ var Typography = (0, import_react.forwardRef)(
     marginBottom = 0,
     marginTop = 0,
     as,
+    productContext,
     ...rest
   }, ref) => {
     const { theme } = (0, import_xui_core.useDesignSystem)();
-    const variantStyles = getVariantStyles(variant);
+    const typographyTokens = productContext ? (0, import_xui_core.getTypographyTokens)(productContext) : theme.typographyTokens;
+    const variantStyles = getVariantStyles(variant, typographyTokens);
     const colorValue = getColor(color, theme);
     const themefonts = theme.fonts;
     const fontFamily = isHeadingVariant(variant) ? themefonts?.heading : themefonts?.body;

package/native/index.js.flow

@@ -13,6 +13,7 @@ declare type VariantType =
   | "h2"
   | "h3"
   | "h4"
+  | "h5"
   | "display"
   | "bodyLg"
   | "bodyLgAccent"
@@ -37,6 +38,7 @@ declare type ThemeColorType =
   | "alert"
   | "neutral";
 declare type ColorType = ThemeColorType | "inherit";
+declare type ProductContext = "b2c" | "b2b" | "paystation" | "presentation";
 declare type TypographyProps = {
   children?: Node,
   align?: AlignType,
@@ -46,6 +48,7 @@ declare type TypographyProps = {
   marginBottom?: number,
   marginTop?: number,
   as?: ElementType,
+  productContext?: ProductContext,
   "aria-hidden"?: boolean,
   "aria-live"?: "polite" | "assertive" | "off",
   ...
@@ -57,6 +60,7 @@ declare var Typography: react.ForwardRefExoticComponent<{
 export type {
   AlignType,
   ColorType,
+  ProductContext,
   ThemeColorType,
   TypographyProps,
   VariantType,

package/native/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.tsx","../../src/Typography.tsx","../../../primitives-native/src/Text.tsx"],"sourcesContent":["export * from \"./Typography\";\nexport * from \"./types\";\n","import { forwardRef } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Text } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport type { ColorType, TypographyProps, VariantType } from \"./types\";\n\nconst getColor = (\n  color: ColorType | string,\n  theme: any\n): string | undefined => {\n  if (color === \"inherit\") return undefined;\n\n  const colorMap: Record<string, string> = {\n    primary: theme?.colors?.content?.primary,\n    secondary: theme?.colors?.content?.secondary,\n    tertiary: theme?.colors?.content?.tertiary,\n    brand: theme?.colors?.content?.brand?.primary,\n    brandSecondary: theme?.colors?.content?.brand?.secondary,\n    success: theme?.colors?.content?.success?.primary,\n    warning: theme?.colors?.content?.warning?.primary,\n    alert: theme?.colors?.content?.alert?.primary,\n    neutral: theme?.colors?.content?.neutral?.primary,\n  };\n\n  return colorMap[color] || color;\n};\n\nconst isHeadingVariant = (variant: VariantType): boolean =>\n  variant === \"h1\" ||\n  variant === \"h2\" ||\n  variant === \"h3\" ||\n  variant === \"h4\" ||\n  variant === \"display\";\n\nconst getVariantStyles = (variant: VariantType) => {\n  switch (variant) {\n    case \"h1\":\n      return { fontSize: 40, fontWeight: \"700\", lineHeight: \"48px\" };\n    case \"h2\":\n      return { fontSize: 32, fontWeight: \"700\", lineHeight: \"38px\" };\n    case \"h3\":\n      return { fontSize: 28, fontWeight: \"700\", lineHeight: \"34px\" };\n    case \"h4\":\n      return { fontSize: 24, fontWeight: \"700\", lineHeight: \"28px\" };\n    case \"display\":\n      return { fontSize: 48, fontWeight: \"800\", lineHeight: \"58px\" };\n    case \"bodyLg\":\n      return { fontSize: 18, fontWeight: \"400\", lineHeight: \"24px\" };\n    case \"bodyLgAccent\":\n      return { fontSize: 18, fontWeight: \"500\", lineHeight: \"24px\" };\n    case \"bodyLgParagraph\":\n      return { fontSize: 18, fontWeight: \"400\", lineHeight: \"26px\" };\n    case \"bodyMd\":\n      return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n    case \"bodyMdAccent\":\n      return { fontSize: 16, fontWeight: \"500\", lineHeight: \"20px\" };\n    case \"bodyMdParagraph\":\n      return { fontSize: 16, fontWeight: \"400\", lineHeight: \"22px\" };\n    case \"bodySm\":\n      return { fontSize: 14, fontWeight: \"400\", lineHeight: \"18px\" };\n    case \"bodySmAccent\":\n      return { fontSize: 14, fontWeight: \"500\", lineHeight: \"18px\" };\n    case \"bodySmParagraph\":\n      return { fontSize: 14, fontWeight: \"400\", lineHeight: \"20px\" };\n    case \"bodyXs\":\n      return { fontSize: 12, fontWeight: \"400\", lineHeight: \"16px\" };\n    case \"bodyXsAccent\":\n      return { fontSize: 12, fontWeight: \"500\", lineHeight: \"16px\" };\n    case \"bodyXsParagraph\":\n      return { fontSize: 12, fontWeight: \"400\", lineHeight: \"18px\" };\n    default:\n      return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n  }\n};\n\nexport const Typography = forwardRef<any, TypographyProps>(\n  (\n    {\n      children,\n      align = \"inherit\",\n      noWrap = false,\n      variant = \"bodyMd\",\n      color = \"inherit\",\n      marginBottom = 0,\n      marginTop = 0,\n      as,\n      ...rest\n    },\n    ref\n  ) => {\n    const { theme } = useDesignSystem();\n    const variantStyles = getVariantStyles(variant);\n    const colorValue = getColor(color, theme);\n    const themefonts = theme.fonts as Record<string, string>;\n    const fontFamily = isHeadingVariant(variant)\n      ? themefonts?.heading\n      : themefonts?.body;\n\n    return (\n      <Text\n        {...rest}\n        ref={ref}\n        as={as}\n        color={colorValue}\n        fontSize={variantStyles.fontSize}\n        fontWeight={variantStyles.fontWeight}\n        fontFamily={fontFamily}\n        numberOfLines={noWrap ? 1 : undefined}\n        style={{\n          marginTop,\n          marginBottom,\n          textAlign: align === \"inherit\" ? undefined : align,\n          lineHeight: variantStyles.lineHeight,\n          ...(noWrap && {\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            whiteSpace: \"nowrap\",\n          }),\n          ...rest.style,\n        }}\n      >\n        {children}\n      </Text>\n    );\n  }\n);\n\nTypography.displayName = \"Typography\";\n","import React from \"react\";\nimport {\n  Text as RNText,\n  TextStyle,\n  AccessibilityRole,\n  StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n  alert: \"alert\",\n  heading: \"header\",\n  button: \"button\",\n  link: \"link\",\n  text: \"text\",\n};\n\nconst parseNumericValue = (\n  value: string | number | undefined\n): number | undefined => {\n  if (value === undefined) return undefined;\n  if (typeof value === \"number\") return value;\n  const parsed = parseFloat(value);\n  return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n  children,\n  color,\n  fontSize,\n  fontWeight,\n  fontFamily,\n  textAlign,\n  lineHeight,\n  numberOfLines,\n  id,\n  role,\n  style: styleProp,\n  ...props\n}) => {\n  let resolvedFontFamily = fontFamily\n    ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n    : undefined;\n\n  if (\n    resolvedFontFamily === \"Pilat Wide\" ||\n    resolvedFontFamily === \"Pilat Wide Bold\" ||\n    resolvedFontFamily === \"Aktiv Grotesk\"\n  ) {\n    resolvedFontFamily = undefined;\n  }\n\n  const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n  const baseStyle: TextStyle = {\n    color,\n    fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n    fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n    fontFamily: resolvedFontFamily,\n    textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n    textAlign: textAlign ?? incomingStyle?.textAlign,\n    lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n    marginTop: parseNumericValue(\n      incomingStyle?.marginTop as number | string | undefined\n    ),\n    marginBottom: parseNumericValue(\n      incomingStyle?.marginBottom as number | string | undefined\n    ),\n  };\n\n  const accessibilityRole = role ? roleMap[role] : undefined;\n\n  return (\n    <RNText\n      style={baseStyle}\n      numberOfLines={numberOfLines}\n      testID={id}\n      accessibilityRole={accessibilityRole}\n    >\n      {children}\n    </RNText>\n  );\n};\n"],"mappings":"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","names":["RNText","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/index.tsx","../../src/Typography.tsx","../../../primitives-native/src/Text.tsx"],"sourcesContent":["export * from \"./Typography\";\nexport * from \"./types\";\n","import { forwardRef } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Text } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem, getTypographyTokens } from \"@xsolla/xui-core\";\nimport type { ColorType, TypographyProps, VariantType } from \"./types\";\n\nconst getColor = (\n  color: ColorType | string,\n  theme: any\n): string | undefined => {\n  if (color === \"inherit\") return undefined;\n\n  const colorMap: Record<string, string> = {\n    primary: theme?.colors?.content?.primary,\n    secondary: theme?.colors?.content?.secondary,\n    tertiary: theme?.colors?.content?.tertiary,\n    brand: theme?.colors?.content?.brand?.primary,\n    brandSecondary: theme?.colors?.content?.brand?.secondary,\n    success: theme?.colors?.content?.success?.primary,\n    warning: theme?.colors?.content?.warning?.primary,\n    alert: theme?.colors?.content?.alert?.primary,\n    neutral: theme?.colors?.content?.neutral?.primary,\n  };\n\n  return colorMap[color] || color;\n};\n\nconst isHeadingVariant = (variant: VariantType): boolean =>\n  variant === \"h1\" ||\n  variant === \"h2\" ||\n  variant === \"h3\" ||\n  variant === \"h4\" ||\n  variant === \"h5\" ||\n  variant === \"display\";\n\nconst getVariantStyles = (variant: VariantType, typographyTokens?: any) => {\n  // If typography tokens are provided from theme, use them\n  if (typographyTokens) {\n    const headingMap: Record<string, keyof typeof typographyTokens.heading> = {\n      h1: \"h1\",\n      h2: \"h2\",\n      h3: \"h3\",\n      h4: \"h4\",\n      h5: \"h5\",\n    };\n\n    if (headingMap[variant]) {\n      const token = typographyTokens.heading[headingMap[variant]];\n      if (token) {\n        return {\n          fontSize: token.fontSize,\n          fontWeight: String(token.fontWeight),\n          lineHeight: token.lineHeight,\n        };\n      }\n    }\n\n    if (variant === \"display\" && typographyTokens.basic?.display) {\n      const token = typographyTokens.basic.display;\n      return {\n        fontSize: token.fontSize,\n        fontWeight: String(token.fontWeight),\n        lineHeight: token.lineHeight,\n      };\n    }\n\n    // Body variants\n    const bodyMap: Record<string, string> = {\n      bodyLg: \"body-lg\",\n      bodyLgAccent: \"body-lg\",\n      bodyLgParagraph: \"body-lg\",\n      bodyMd: \"body-md\",\n      bodyMdAccent: \"body-md\",\n      bodyMdParagraph: \"body-md\",\n      bodySm: \"body-sm\",\n      bodySmAccent: \"body-sm\",\n      bodySmParagraph: \"body-sm\",\n      bodyXs: \"body-xs\",\n      bodyXsAccent: \"body-xs\",\n      bodyXsParagraph: \"body-xs\",\n    };\n\n    const bodyKey = bodyMap[variant];\n    if (bodyKey && typographyTokens.basic?.[bodyKey]) {\n      const token = typographyTokens.basic[bodyKey];\n      let fontWeight = token.fontWeight;\n      let lineHeight = token.lineHeight;\n\n      if (variant.includes(\"Accent\") && token.accent) {\n        fontWeight = token.accent.fontWeight;\n      }\n\n      if (variant.includes(\"Paragraph\") && token.paragraph) {\n        lineHeight = token.paragraph.lineHeight;\n      }\n\n      return {\n        fontSize: token.fontSize,\n        fontWeight: String(fontWeight),\n        lineHeight: lineHeight,\n      };\n    }\n  }\n\n  // Fallback to default styles (B2B mode for backwards compatibility)\n  switch (variant) {\n    case \"h1\":\n      return { fontSize: 56, fontWeight: \"400\", lineHeight: \"68px\" };\n    case \"h2\":\n      return { fontSize: 48, fontWeight: \"400\", lineHeight: \"58px\" };\n    case \"h3\":\n      return { fontSize: 32, fontWeight: \"400\", lineHeight: \"38px\" };\n    case \"h4\":\n      return { fontSize: 24, fontWeight: \"400\", lineHeight: \"28px\" };\n    case \"h5\":\n      return { fontSize: 20, fontWeight: \"600\", lineHeight: \"24px\" };\n    case \"display\":\n      return { fontSize: 64, fontWeight: \"400\", lineHeight: \"78px\" };\n    case \"bodyLg\":\n      return { fontSize: 18, fontWeight: \"400\", lineHeight: \"24px\" };\n    case \"bodyLgAccent\":\n      return { fontSize: 18, fontWeight: \"500\", lineHeight: \"24px\" };\n    case \"bodyLgParagraph\":\n      return { fontSize: 18, fontWeight: \"400\", lineHeight: \"26px\" };\n    case \"bodyMd\":\n      return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n    case \"bodyMdAccent\":\n      return { fontSize: 16, fontWeight: \"500\", lineHeight: \"20px\" };\n    case \"bodyMdParagraph\":\n      return { fontSize: 16, fontWeight: \"400\", lineHeight: \"22px\" };\n    case \"bodySm\":\n      return { fontSize: 14, fontWeight: \"400\", lineHeight: \"18px\" };\n    case \"bodySmAccent\":\n      return { fontSize: 14, fontWeight: \"500\", lineHeight: \"18px\" };\n    case \"bodySmParagraph\":\n      return { fontSize: 14, fontWeight: \"400\", lineHeight: \"20px\" };\n    case \"bodyXs\":\n      return { fontSize: 12, fontWeight: \"400\", lineHeight: \"16px\" };\n    case \"bodyXsAccent\":\n      return { fontSize: 12, fontWeight: \"500\", lineHeight: \"16px\" };\n    case \"bodyXsParagraph\":\n      return { fontSize: 12, fontWeight: \"400\", lineHeight: \"18px\" };\n    default:\n      return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n  }\n};\n\nexport const Typography = forwardRef<any, TypographyProps>(\n  (\n    {\n      children,\n      align = \"inherit\",\n      noWrap = false,\n      variant = \"bodyMd\",\n      color = \"inherit\",\n      marginBottom = 0,\n      marginTop = 0,\n      as,\n      productContext,\n      ...rest\n    },\n    ref\n  ) => {\n    const { theme } = useDesignSystem();\n    // If productContext is provided, use tokens for that specific context\n    // Otherwise, use the tokens from the theme (context)\n    const typographyTokens = productContext\n      ? getTypographyTokens(productContext)\n      : (theme as any).typographyTokens;\n    const variantStyles = getVariantStyles(variant, typographyTokens);\n    const colorValue = getColor(color, theme);\n    const themefonts = theme.fonts as Record<string, string>;\n    const fontFamily = isHeadingVariant(variant)\n      ? themefonts?.heading\n      : themefonts?.body;\n\n    return (\n      <Text\n        {...rest}\n        ref={ref}\n        as={as}\n        color={colorValue}\n        fontSize={variantStyles.fontSize}\n        fontWeight={variantStyles.fontWeight}\n        fontFamily={fontFamily}\n        numberOfLines={noWrap ? 1 : undefined}\n        style={{\n          marginTop,\n          marginBottom,\n          textAlign: align === \"inherit\" ? undefined : align,\n          lineHeight: variantStyles.lineHeight,\n          ...(noWrap && {\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            whiteSpace: \"nowrap\",\n          }),\n          ...rest.style,\n        }}\n      >\n        {children}\n      </Text>\n    );\n  }\n);\n\nTypography.displayName = \"Typography\";\n","import React from \"react\";\nimport {\n  Text as RNText,\n  TextStyle,\n  AccessibilityRole,\n  StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n  alert: \"alert\",\n  heading: \"header\",\n  button: \"button\",\n  link: \"link\",\n  text: \"text\",\n};\n\nconst parseNumericValue = (\n  value: string | number | undefined\n): number | undefined => {\n  if (value === undefined) return undefined;\n  if (typeof value === \"number\") return value;\n  const parsed = parseFloat(value);\n  return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n  children,\n  color,\n  fontSize,\n  fontWeight,\n  fontFamily,\n  textAlign,\n  lineHeight,\n  numberOfLines,\n  id,\n  role,\n  style: styleProp,\n  ...props\n}) => {\n  let resolvedFontFamily = fontFamily\n    ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n    : undefined;\n\n  if (\n    resolvedFontFamily === \"Pilat Wide\" ||\n    resolvedFontFamily === \"Pilat Wide Bold\" ||\n    resolvedFontFamily === \"Aktiv Grotesk\"\n  ) {\n    resolvedFontFamily = undefined;\n  }\n\n  const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n  const baseStyle: TextStyle = {\n    color,\n    fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n    fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n    fontFamily: resolvedFontFamily,\n    textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n    textAlign: textAlign ?? incomingStyle?.textAlign,\n    lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n    marginTop: parseNumericValue(\n      incomingStyle?.marginTop as number | string | undefined\n    ),\n    marginBottom: parseNumericValue(\n      incomingStyle?.marginBottom as number | string | undefined\n    ),\n  };\n\n  const accessibilityRole = role ? roleMap[role] : undefined;\n\n  return (\n    <RNText\n      style={baseStyle}\n      numberOfLines={numberOfLines}\n      testID={id}\n      accessibilityRole={accessibilityRole}\n    >\n      {children}\n    </RNText>\n  );\n};\n"],"mappings":"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","names":["RNText","import_jsx_runtime"]}

package/native/index.mjs

@@ -68,7 +68,7 @@ var Text = ({
 };
 
 // src/Typography.tsx
-import { useDesignSystem } from "@xsolla/xui-core";
+import { useDesignSystem, getTypographyTokens } from "@xsolla/xui-core";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var getColor = (color, theme) => {
   if (color === "inherit") return void 0;
@@ -85,19 +85,79 @@ var getColor = (color, theme) => {
   };
   return colorMap[color] || color;
 };
-var isHeadingVariant = (variant) => variant === "h1" || variant === "h2" || variant === "h3" || variant === "h4" || variant === "display";
-var getVariantStyles = (variant) => {
+var isHeadingVariant = (variant) => variant === "h1" || variant === "h2" || variant === "h3" || variant === "h4" || variant === "h5" || variant === "display";
+var getVariantStyles = (variant, typographyTokens) => {
+  if (typographyTokens) {
+    const headingMap = {
+      h1: "h1",
+      h2: "h2",
+      h3: "h3",
+      h4: "h4",
+      h5: "h5"
+    };
+    if (headingMap[variant]) {
+      const token = typographyTokens.heading[headingMap[variant]];
+      if (token) {
+        return {
+          fontSize: token.fontSize,
+          fontWeight: String(token.fontWeight),
+          lineHeight: token.lineHeight
+        };
+      }
+    }
+    if (variant === "display" && typographyTokens.basic?.display) {
+      const token = typographyTokens.basic.display;
+      return {
+        fontSize: token.fontSize,
+        fontWeight: String(token.fontWeight),
+        lineHeight: token.lineHeight
+      };
+    }
+    const bodyMap = {
+      bodyLg: "body-lg",
+      bodyLgAccent: "body-lg",
+      bodyLgParagraph: "body-lg",
+      bodyMd: "body-md",
+      bodyMdAccent: "body-md",
+      bodyMdParagraph: "body-md",
+      bodySm: "body-sm",
+      bodySmAccent: "body-sm",
+      bodySmParagraph: "body-sm",
+      bodyXs: "body-xs",
+      bodyXsAccent: "body-xs",
+      bodyXsParagraph: "body-xs"
+    };
+    const bodyKey = bodyMap[variant];
+    if (bodyKey && typographyTokens.basic?.[bodyKey]) {
+      const token = typographyTokens.basic[bodyKey];
+      let fontWeight = token.fontWeight;
+      let lineHeight = token.lineHeight;
+      if (variant.includes("Accent") && token.accent) {
+        fontWeight = token.accent.fontWeight;
+      }
+      if (variant.includes("Paragraph") && token.paragraph) {
+        lineHeight = token.paragraph.lineHeight;
+      }
+      return {
+        fontSize: token.fontSize,
+        fontWeight: String(fontWeight),
+        lineHeight
+      };
+    }
+  }
   switch (variant) {
     case "h1":
-      return { fontSize: 40, fontWeight: "700", lineHeight: "48px" };
+      return { fontSize: 56, fontWeight: "400", lineHeight: "68px" };
     case "h2":
-      return { fontSize: 32, fontWeight: "700", lineHeight: "38px" };
+      return { fontSize: 48, fontWeight: "400", lineHeight: "58px" };
     case "h3":
-      return { fontSize: 28, fontWeight: "700", lineHeight: "34px" };
+      return { fontSize: 32, fontWeight: "400", lineHeight: "38px" };
     case "h4":
-      return { fontSize: 24, fontWeight: "700", lineHeight: "28px" };
+      return { fontSize: 24, fontWeight: "400", lineHeight: "28px" };
+    case "h5":
+      return { fontSize: 20, fontWeight: "600", lineHeight: "24px" };
     case "display":
-      return { fontSize: 48, fontWeight: "800", lineHeight: "58px" };
+      return { fontSize: 64, fontWeight: "400", lineHeight: "78px" };
     case "bodyLg":
       return { fontSize: 18, fontWeight: "400", lineHeight: "24px" };
     case "bodyLgAccent":
@@ -136,10 +196,12 @@ var Typography = forwardRef(
     marginBottom = 0,
     marginTop = 0,
     as,
+    productContext,
     ...rest
   }, ref) => {
     const { theme } = useDesignSystem();
-    const variantStyles = getVariantStyles(variant);
+    const typographyTokens = productContext ? getTypographyTokens(productContext) : theme.typographyTokens;
+    const variantStyles = getVariantStyles(variant, typographyTokens);
     const colorValue = getColor(color, theme);
     const themefonts = theme.fonts;
     const fontFamily = isHeadingVariant(variant) ? themefonts?.heading : themefonts?.body;

package/native/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Typography.tsx","../../../primitives-native/src/Text.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Text } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport type { ColorType, TypographyProps, VariantType } from \"./types\";\n\nconst getColor = (\n  color: ColorType | string,\n  theme: any\n): string | undefined => {\n  if (color === \"inherit\") return undefined;\n\n  const colorMap: Record<string, string> = {\n    primary: theme?.colors?.content?.primary,\n    secondary: theme?.colors?.content?.secondary,\n    tertiary: theme?.colors?.content?.tertiary,\n    brand: theme?.colors?.content?.brand?.primary,\n    brandSecondary: theme?.colors?.content?.brand?.secondary,\n    success: theme?.colors?.content?.success?.primary,\n    warning: theme?.colors?.content?.warning?.primary,\n    alert: theme?.colors?.content?.alert?.primary,\n    neutral: theme?.colors?.content?.neutral?.primary,\n  };\n\n  return colorMap[color] || color;\n};\n\nconst isHeadingVariant = (variant: VariantType): boolean =>\n  variant === \"h1\" ||\n  variant === \"h2\" ||\n  variant === \"h3\" ||\n  variant === \"h4\" ||\n  variant === \"display\";\n\nconst getVariantStyles = (variant: VariantType) => {\n  switch (variant) {\n    case \"h1\":\n      return { fontSize: 40, fontWeight: \"700\", lineHeight: \"48px\" };\n    case \"h2\":\n      return { fontSize: 32, fontWeight: \"700\", lineHeight: \"38px\" };\n    case \"h3\":\n      return { fontSize: 28, fontWeight: \"700\", lineHeight: \"34px\" };\n    case \"h4\":\n      return { fontSize: 24, fontWeight: \"700\", lineHeight: \"28px\" };\n    case \"display\":\n      return { fontSize: 48, fontWeight: \"800\", lineHeight: \"58px\" };\n    case \"bodyLg\":\n      return { fontSize: 18, fontWeight: \"400\", lineHeight: \"24px\" };\n    case \"bodyLgAccent\":\n      return { fontSize: 18, fontWeight: \"500\", lineHeight: \"24px\" };\n    case \"bodyLgParagraph\":\n      return { fontSize: 18, fontWeight: \"400\", lineHeight: \"26px\" };\n    case \"bodyMd\":\n      return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n    case \"bodyMdAccent\":\n      return { fontSize: 16, fontWeight: \"500\", lineHeight: \"20px\" };\n    case \"bodyMdParagraph\":\n      return { fontSize: 16, fontWeight: \"400\", lineHeight: \"22px\" };\n    case \"bodySm\":\n      return { fontSize: 14, fontWeight: \"400\", lineHeight: \"18px\" };\n    case \"bodySmAccent\":\n      return { fontSize: 14, fontWeight: \"500\", lineHeight: \"18px\" };\n    case \"bodySmParagraph\":\n      return { fontSize: 14, fontWeight: \"400\", lineHeight: \"20px\" };\n    case \"bodyXs\":\n      return { fontSize: 12, fontWeight: \"400\", lineHeight: \"16px\" };\n    case \"bodyXsAccent\":\n      return { fontSize: 12, fontWeight: \"500\", lineHeight: \"16px\" };\n    case \"bodyXsParagraph\":\n      return { fontSize: 12, fontWeight: \"400\", lineHeight: \"18px\" };\n    default:\n      return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n  }\n};\n\nexport const Typography = forwardRef<any, TypographyProps>(\n  (\n    {\n      children,\n      align = \"inherit\",\n      noWrap = false,\n      variant = \"bodyMd\",\n      color = \"inherit\",\n      marginBottom = 0,\n      marginTop = 0,\n      as,\n      ...rest\n    },\n    ref\n  ) => {\n    const { theme } = useDesignSystem();\n    const variantStyles = getVariantStyles(variant);\n    const colorValue = getColor(color, theme);\n    const themefonts = theme.fonts as Record<string, string>;\n    const fontFamily = isHeadingVariant(variant)\n      ? themefonts?.heading\n      : themefonts?.body;\n\n    return (\n      <Text\n        {...rest}\n        ref={ref}\n        as={as}\n        color={colorValue}\n        fontSize={variantStyles.fontSize}\n        fontWeight={variantStyles.fontWeight}\n        fontFamily={fontFamily}\n        numberOfLines={noWrap ? 1 : undefined}\n        style={{\n          marginTop,\n          marginBottom,\n          textAlign: align === \"inherit\" ? undefined : align,\n          lineHeight: variantStyles.lineHeight,\n          ...(noWrap && {\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            whiteSpace: \"nowrap\",\n          }),\n          ...rest.style,\n        }}\n      >\n        {children}\n      </Text>\n    );\n  }\n);\n\nTypography.displayName = \"Typography\";\n","import React from \"react\";\nimport {\n  Text as RNText,\n  TextStyle,\n  AccessibilityRole,\n  StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n  alert: \"alert\",\n  heading: \"header\",\n  button: \"button\",\n  link: \"link\",\n  text: \"text\",\n};\n\nconst parseNumericValue = (\n  value: string | number | undefined\n): number | undefined => {\n  if (value === undefined) return undefined;\n  if (typeof value === \"number\") return value;\n  const parsed = parseFloat(value);\n  return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n  children,\n  color,\n  fontSize,\n  fontWeight,\n  fontFamily,\n  textAlign,\n  lineHeight,\n  numberOfLines,\n  id,\n  role,\n  style: styleProp,\n  ...props\n}) => {\n  let resolvedFontFamily = fontFamily\n    ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n    : undefined;\n\n  if (\n    resolvedFontFamily === \"Pilat Wide\" ||\n    resolvedFontFamily === \"Pilat Wide Bold\" ||\n    resolvedFontFamily === \"Aktiv Grotesk\"\n  ) {\n    resolvedFontFamily = undefined;\n  }\n\n  const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n  const baseStyle: TextStyle = {\n    color,\n    fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n    fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n    fontFamily: resolvedFontFamily,\n    textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n    textAlign: textAlign ?? incomingStyle?.textAlign,\n    lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n    marginTop: parseNumericValue(\n      incomingStyle?.marginTop as number | string | undefined\n    ),\n    marginBottom: parseNumericValue(\n      incomingStyle?.marginBottom as number | string | undefined\n    ),\n  };\n\n  const accessibilityRole = role ? roleMap[role] : undefined;\n\n  return (\n    <RNText\n      style={baseStyle}\n      numberOfLines={numberOfLines}\n      testID={id}\n      accessibilityRole={accessibilityRole}\n    >\n      {children}\n    </RNText>\n  );\n};\n"],"mappings":"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","names":["jsx"]}
+{"version":3,"sources":["../../src/Typography.tsx","../../../primitives-native/src/Text.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Text } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem, getTypographyTokens } from \"@xsolla/xui-core\";\nimport type { ColorType, TypographyProps, VariantType } from \"./types\";\n\nconst getColor = (\n  color: ColorType | string,\n  theme: any\n): string | undefined => {\n  if (color === \"inherit\") return undefined;\n\n  const colorMap: Record<string, string> = {\n    primary: theme?.colors?.content?.primary,\n    secondary: theme?.colors?.content?.secondary,\n    tertiary: theme?.colors?.content?.tertiary,\n    brand: theme?.colors?.content?.brand?.primary,\n    brandSecondary: theme?.colors?.content?.brand?.secondary,\n    success: theme?.colors?.content?.success?.primary,\n    warning: theme?.colors?.content?.warning?.primary,\n    alert: theme?.colors?.content?.alert?.primary,\n    neutral: theme?.colors?.content?.neutral?.primary,\n  };\n\n  return colorMap[color] || color;\n};\n\nconst isHeadingVariant = (variant: VariantType): boolean =>\n  variant === \"h1\" ||\n  variant === \"h2\" ||\n  variant === \"h3\" ||\n  variant === \"h4\" ||\n  variant === \"h5\" ||\n  variant === \"display\";\n\nconst getVariantStyles = (variant: VariantType, typographyTokens?: any) => {\n  // If typography tokens are provided from theme, use them\n  if (typographyTokens) {\n    const headingMap: Record<string, keyof typeof typographyTokens.heading> = {\n      h1: \"h1\",\n      h2: \"h2\",\n      h3: \"h3\",\n      h4: \"h4\",\n      h5: \"h5\",\n    };\n\n    if (headingMap[variant]) {\n      const token = typographyTokens.heading[headingMap[variant]];\n      if (token) {\n        return {\n          fontSize: token.fontSize,\n          fontWeight: String(token.fontWeight),\n          lineHeight: token.lineHeight,\n        };\n      }\n    }\n\n    if (variant === \"display\" && typographyTokens.basic?.display) {\n      const token = typographyTokens.basic.display;\n      return {\n        fontSize: token.fontSize,\n        fontWeight: String(token.fontWeight),\n        lineHeight: token.lineHeight,\n      };\n    }\n\n    // Body variants\n    const bodyMap: Record<string, string> = {\n      bodyLg: \"body-lg\",\n      bodyLgAccent: \"body-lg\",\n      bodyLgParagraph: \"body-lg\",\n      bodyMd: \"body-md\",\n      bodyMdAccent: \"body-md\",\n      bodyMdParagraph: \"body-md\",\n      bodySm: \"body-sm\",\n      bodySmAccent: \"body-sm\",\n      bodySmParagraph: \"body-sm\",\n      bodyXs: \"body-xs\",\n      bodyXsAccent: \"body-xs\",\n      bodyXsParagraph: \"body-xs\",\n    };\n\n    const bodyKey = bodyMap[variant];\n    if (bodyKey && typographyTokens.basic?.[bodyKey]) {\n      const token = typographyTokens.basic[bodyKey];\n      let fontWeight = token.fontWeight;\n      let lineHeight = token.lineHeight;\n\n      if (variant.includes(\"Accent\") && token.accent) {\n        fontWeight = token.accent.fontWeight;\n      }\n\n      if (variant.includes(\"Paragraph\") && token.paragraph) {\n        lineHeight = token.paragraph.lineHeight;\n      }\n\n      return {\n        fontSize: token.fontSize,\n        fontWeight: String(fontWeight),\n        lineHeight: lineHeight,\n      };\n    }\n  }\n\n  // Fallback to default styles (B2B mode for backwards compatibility)\n  switch (variant) {\n    case \"h1\":\n      return { fontSize: 56, fontWeight: \"400\", lineHeight: \"68px\" };\n    case \"h2\":\n      return { fontSize: 48, fontWeight: \"400\", lineHeight: \"58px\" };\n    case \"h3\":\n      return { fontSize: 32, fontWeight: \"400\", lineHeight: \"38px\" };\n    case \"h4\":\n      return { fontSize: 24, fontWeight: \"400\", lineHeight: \"28px\" };\n    case \"h5\":\n      return { fontSize: 20, fontWeight: \"600\", lineHeight: \"24px\" };\n    case \"display\":\n      return { fontSize: 64, fontWeight: \"400\", lineHeight: \"78px\" };\n    case \"bodyLg\":\n      return { fontSize: 18, fontWeight: \"400\", lineHeight: \"24px\" };\n    case \"bodyLgAccent\":\n      return { fontSize: 18, fontWeight: \"500\", lineHeight: \"24px\" };\n    case \"bodyLgParagraph\":\n      return { fontSize: 18, fontWeight: \"400\", lineHeight: \"26px\" };\n    case \"bodyMd\":\n      return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n    case \"bodyMdAccent\":\n      return { fontSize: 16, fontWeight: \"500\", lineHeight: \"20px\" };\n    case \"bodyMdParagraph\":\n      return { fontSize: 16, fontWeight: \"400\", lineHeight: \"22px\" };\n    case \"bodySm\":\n      return { fontSize: 14, fontWeight: \"400\", lineHeight: \"18px\" };\n    case \"bodySmAccent\":\n      return { fontSize: 14, fontWeight: \"500\", lineHeight: \"18px\" };\n    case \"bodySmParagraph\":\n      return { fontSize: 14, fontWeight: \"400\", lineHeight: \"20px\" };\n    case \"bodyXs\":\n      return { fontSize: 12, fontWeight: \"400\", lineHeight: \"16px\" };\n    case \"bodyXsAccent\":\n      return { fontSize: 12, fontWeight: \"500\", lineHeight: \"16px\" };\n    case \"bodyXsParagraph\":\n      return { fontSize: 12, fontWeight: \"400\", lineHeight: \"18px\" };\n    default:\n      return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n  }\n};\n\nexport const Typography = forwardRef<any, TypographyProps>(\n  (\n    {\n      children,\n      align = \"inherit\",\n      noWrap = false,\n      variant = \"bodyMd\",\n      color = \"inherit\",\n      marginBottom = 0,\n      marginTop = 0,\n      as,\n      productContext,\n      ...rest\n    },\n    ref\n  ) => {\n    const { theme } = useDesignSystem();\n    // If productContext is provided, use tokens for that specific context\n    // Otherwise, use the tokens from the theme (context)\n    const typographyTokens = productContext\n      ? getTypographyTokens(productContext)\n      : (theme as any).typographyTokens;\n    const variantStyles = getVariantStyles(variant, typographyTokens);\n    const colorValue = getColor(color, theme);\n    const themefonts = theme.fonts as Record<string, string>;\n    const fontFamily = isHeadingVariant(variant)\n      ? themefonts?.heading\n      : themefonts?.body;\n\n    return (\n      <Text\n        {...rest}\n        ref={ref}\n        as={as}\n        color={colorValue}\n        fontSize={variantStyles.fontSize}\n        fontWeight={variantStyles.fontWeight}\n        fontFamily={fontFamily}\n        numberOfLines={noWrap ? 1 : undefined}\n        style={{\n          marginTop,\n          marginBottom,\n          textAlign: align === \"inherit\" ? undefined : align,\n          lineHeight: variantStyles.lineHeight,\n          ...(noWrap && {\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            whiteSpace: \"nowrap\",\n          }),\n          ...rest.style,\n        }}\n      >\n        {children}\n      </Text>\n    );\n  }\n);\n\nTypography.displayName = \"Typography\";\n","import React from \"react\";\nimport {\n  Text as RNText,\n  TextStyle,\n  AccessibilityRole,\n  StyleSheet,\n} from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst roleMap: Record<string, AccessibilityRole> = {\n  alert: \"alert\",\n  heading: \"header\",\n  button: \"button\",\n  link: \"link\",\n  text: \"text\",\n};\n\nconst parseNumericValue = (\n  value: string | number | undefined\n): number | undefined => {\n  if (value === undefined) return undefined;\n  if (typeof value === \"number\") return value;\n  const parsed = parseFloat(value);\n  return isNaN(parsed) ? undefined : parsed;\n};\n\nexport const Text: React.FC<TextProps> = ({\n  children,\n  color,\n  fontSize,\n  fontWeight,\n  fontFamily,\n  textAlign,\n  lineHeight,\n  numberOfLines,\n  id,\n  role,\n  style: styleProp,\n  ...props\n}) => {\n  let resolvedFontFamily = fontFamily\n    ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n    : undefined;\n\n  if (\n    resolvedFontFamily === \"Pilat Wide\" ||\n    resolvedFontFamily === \"Pilat Wide Bold\" ||\n    resolvedFontFamily === \"Aktiv Grotesk\"\n  ) {\n    resolvedFontFamily = undefined;\n  }\n\n  const incomingStyle = StyleSheet.flatten(styleProp) as TextStyle | undefined;\n\n  const baseStyle: TextStyle = {\n    color,\n    fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n    fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n    fontFamily: resolvedFontFamily,\n    textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n    textAlign: textAlign ?? incomingStyle?.textAlign,\n    lineHeight: parseNumericValue(lineHeight ?? incomingStyle?.lineHeight),\n    marginTop: parseNumericValue(\n      incomingStyle?.marginTop as number | string | undefined\n    ),\n    marginBottom: parseNumericValue(\n      incomingStyle?.marginBottom as number | string | undefined\n    ),\n  };\n\n  const accessibilityRole = role ? roleMap[role] : undefined;\n\n  return (\n    <RNText\n      style={baseStyle}\n      numberOfLines={numberOfLines}\n      testID={id}\n      accessibilityRole={accessibilityRole}\n    >\n      {children}\n    </RNText>\n  );\n};\n"],"mappings":"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","names":["jsx"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-typography",
-  "version": "0.113.0",
+  "version": "0.114.0",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -13,8 +13,8 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@xsolla/xui-core": "0.113.0",
-    "@xsolla/xui-primitives-core": "0.113.0"
+    "@xsolla/xui-core": "0.114.0",
+    "@xsolla/xui-primitives-core": "0.114.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/web/index.d.mts

@@ -2,9 +2,10 @@ import * as react from 'react';
 import { ReactNode, ElementType } from 'react';
 
 type AlignType = "center" | "inherit" | "justify" | "left" | "right";
-type VariantType = "h1" | "h2" | "h3" | "h4" | "display" | "bodyLg" | "bodyLgAccent" | "bodyLgParagraph" | "bodyMd" | "bodyMdAccent" | "bodyMdParagraph" | "bodySm" | "bodySmAccent" | "bodySmParagraph" | "bodyXs" | "bodyXsAccent" | "bodyXsParagraph";
+type VariantType = "h1" | "h2" | "h3" | "h4" | "h5" | "display" | "bodyLg" | "bodyLgAccent" | "bodyLgParagraph" | "bodyMd" | "bodyMdAccent" | "bodyMdParagraph" | "bodySm" | "bodySmAccent" | "bodySmParagraph" | "bodyXs" | "bodyXsAccent" | "bodyXsParagraph";
 type ThemeColorType = "primary" | "secondary" | "tertiary" | "brand" | "brandSecondary" | "success" | "warning" | "alert" | "neutral";
 type ColorType = ThemeColorType | "inherit";
+type ProductContext = "b2c" | "b2b" | "paystation" | "presentation";
 interface TypographyProps extends Omit<any, "color"> {
     children?: ReactNode;
     align?: AlignType;
@@ -14,10 +15,11 @@ interface TypographyProps extends Omit<any, "color"> {
     marginBottom?: number;
     marginTop?: number;
     as?: ElementType;
+    productContext?: ProductContext;
     "aria-hidden"?: boolean;
     "aria-live"?: "polite" | "assertive" | "off";
 }
 
 declare const Typography: react.ForwardRefExoticComponent<Omit<TypographyProps, "ref"> & react.RefAttributes<any>>;
 
-export { type AlignType, type ColorType, type ThemeColorType, Typography, type TypographyProps, type VariantType };
+export { type AlignType, type ColorType, type ProductContext, type ThemeColorType, Typography, type TypographyProps, type VariantType };

package/web/index.d.ts

@@ -2,9 +2,10 @@ import * as react from 'react';
 import { ReactNode, ElementType } from 'react';
 
 type AlignType = "center" | "inherit" | "justify" | "left" | "right";
-type VariantType = "h1" | "h2" | "h3" | "h4" | "display" | "bodyLg" | "bodyLgAccent" | "bodyLgParagraph" | "bodyMd" | "bodyMdAccent" | "bodyMdParagraph" | "bodySm" | "bodySmAccent" | "bodySmParagraph" | "bodyXs" | "bodyXsAccent" | "bodyXsParagraph";
+type VariantType = "h1" | "h2" | "h3" | "h4" | "h5" | "display" | "bodyLg" | "bodyLgAccent" | "bodyLgParagraph" | "bodyMd" | "bodyMdAccent" | "bodyMdParagraph" | "bodySm" | "bodySmAccent" | "bodySmParagraph" | "bodyXs" | "bodyXsAccent" | "bodyXsParagraph";
 type ThemeColorType = "primary" | "secondary" | "tertiary" | "brand" | "brandSecondary" | "success" | "warning" | "alert" | "neutral";
 type ColorType = ThemeColorType | "inherit";
+type ProductContext = "b2c" | "b2b" | "paystation" | "presentation";
 interface TypographyProps extends Omit<any, "color"> {
     children?: ReactNode;
     align?: AlignType;
@@ -14,10 +15,11 @@ interface TypographyProps extends Omit<any, "color"> {
     marginBottom?: number;
     marginTop?: number;
     as?: ElementType;
+    productContext?: ProductContext;
     "aria-hidden"?: boolean;
     "aria-live"?: "polite" | "assertive" | "off";
 }
 
 declare const Typography: react.ForwardRefExoticComponent<Omit<TypographyProps, "ref"> & react.RefAttributes<any>>;
 
-export { type AlignType, type ColorType, type ThemeColorType, Typography, type TypographyProps, type VariantType };
+export { type AlignType, type ColorType, type ProductContext, type ThemeColorType, Typography, type TypographyProps, type VariantType };

package/web/index.js

@@ -88,19 +88,79 @@ var getColor = (color, theme) => {
   };
   return colorMap[color] || color;
 };
-var isHeadingVariant = (variant) => variant === "h1" || variant === "h2" || variant === "h3" || variant === "h4" || variant === "display";
-var getVariantStyles = (variant) => {
+var isHeadingVariant = (variant) => variant === "h1" || variant === "h2" || variant === "h3" || variant === "h4" || variant === "h5" || variant === "display";
+var getVariantStyles = (variant, typographyTokens) => {
+  if (typographyTokens) {
+    const headingMap = {
+      h1: "h1",
+      h2: "h2",
+      h3: "h3",
+      h4: "h4",
+      h5: "h5"
+    };
+    if (headingMap[variant]) {
+      const token = typographyTokens.heading[headingMap[variant]];
+      if (token) {
+        return {
+          fontSize: token.fontSize,
+          fontWeight: String(token.fontWeight),
+          lineHeight: token.lineHeight
+        };
+      }
+    }
+    if (variant === "display" && typographyTokens.basic?.display) {
+      const token = typographyTokens.basic.display;
+      return {
+        fontSize: token.fontSize,
+        fontWeight: String(token.fontWeight),
+        lineHeight: token.lineHeight
+      };
+    }
+    const bodyMap = {
+      bodyLg: "body-lg",
+      bodyLgAccent: "body-lg",
+      bodyLgParagraph: "body-lg",
+      bodyMd: "body-md",
+      bodyMdAccent: "body-md",
+      bodyMdParagraph: "body-md",
+      bodySm: "body-sm",
+      bodySmAccent: "body-sm",
+      bodySmParagraph: "body-sm",
+      bodyXs: "body-xs",
+      bodyXsAccent: "body-xs",
+      bodyXsParagraph: "body-xs"
+    };
+    const bodyKey = bodyMap[variant];
+    if (bodyKey && typographyTokens.basic?.[bodyKey]) {
+      const token = typographyTokens.basic[bodyKey];
+      let fontWeight = token.fontWeight;
+      let lineHeight = token.lineHeight;
+      if (variant.includes("Accent") && token.accent) {
+        fontWeight = token.accent.fontWeight;
+      }
+      if (variant.includes("Paragraph") && token.paragraph) {
+        lineHeight = token.paragraph.lineHeight;
+      }
+      return {
+        fontSize: token.fontSize,
+        fontWeight: String(fontWeight),
+        lineHeight
+      };
+    }
+  }
   switch (variant) {
     case "h1":
-      return { fontSize: 40, fontWeight: "700", lineHeight: "48px" };
+      return { fontSize: 56, fontWeight: "400", lineHeight: "68px" };
     case "h2":
-      return { fontSize: 32, fontWeight: "700", lineHeight: "38px" };
+      return { fontSize: 48, fontWeight: "400", lineHeight: "58px" };
     case "h3":
-      return { fontSize: 28, fontWeight: "700", lineHeight: "34px" };
+      return { fontSize: 32, fontWeight: "400", lineHeight: "38px" };
     case "h4":
-      return { fontSize: 24, fontWeight: "700", lineHeight: "28px" };
+      return { fontSize: 24, fontWeight: "400", lineHeight: "28px" };
+    case "h5":
+      return { fontSize: 20, fontWeight: "600", lineHeight: "24px" };
     case "display":
-      return { fontSize: 48, fontWeight: "800", lineHeight: "58px" };
+      return { fontSize: 64, fontWeight: "400", lineHeight: "78px" };
     case "bodyLg":
       return { fontSize: 18, fontWeight: "400", lineHeight: "24px" };
     case "bodyLgAccent":
@@ -139,10 +199,12 @@ var Typography = (0, import_react.forwardRef)(
     marginBottom = 0,
     marginTop = 0,
     as,
+    productContext,
     ...rest
   }, ref) => {
     const { theme } = (0, import_xui_core.useDesignSystem)();
-    const variantStyles = getVariantStyles(variant);
+    const typographyTokens = productContext ? (0, import_xui_core.getTypographyTokens)(productContext) : theme.typographyTokens;
+    const variantStyles = getVariantStyles(variant, typographyTokens);
     const colorValue = getColor(color, theme);
     const themefonts = theme.fonts;
     const fontFamily = isHeadingVariant(variant) ? themefonts?.heading : themefonts?.body;

package/web/index.js.flow

@@ -13,6 +13,7 @@ declare type VariantType =
   | "h2"
   | "h3"
   | "h4"
+  | "h5"
   | "display"
   | "bodyLg"
   | "bodyLgAccent"
@@ -37,6 +38,7 @@ declare type ThemeColorType =
   | "alert"
   | "neutral";
 declare type ColorType = ThemeColorType | "inherit";
+declare type ProductContext = "b2c" | "b2b" | "paystation" | "presentation";
 declare type TypographyProps = {
   children?: Node,
   align?: AlignType,
@@ -46,6 +48,7 @@ declare type TypographyProps = {
   marginBottom?: number,
   marginTop?: number,
   as?: ElementType,
+  productContext?: ProductContext,
   "aria-hidden"?: boolean,
   "aria-live"?: "polite" | "assertive" | "off",
   ...
@@ -57,6 +60,7 @@ declare var Typography: react.ForwardRefExoticComponent<{
 export type {
   AlignType,
   ColorType,
+  ProductContext,
   ThemeColorType,
   TypographyProps,
   VariantType,

package/web/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.tsx","../../src/Typography.tsx","../../../primitives-web/src/Text.tsx"],"sourcesContent":["export * from \"./Typography\";\nexport * from \"./types\";\n","import { forwardRef } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Text } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport type { ColorType, TypographyProps, VariantType } from \"./types\";\n\nconst getColor = (\n  color: ColorType | string,\n  theme: any\n): string | undefined => {\n  if (color === \"inherit\") return undefined;\n\n  const colorMap: Record<string, string> = {\n    primary: theme?.colors?.content?.primary,\n    secondary: theme?.colors?.content?.secondary,\n    tertiary: theme?.colors?.content?.tertiary,\n    brand: theme?.colors?.content?.brand?.primary,\n    brandSecondary: theme?.colors?.content?.brand?.secondary,\n    success: theme?.colors?.content?.success?.primary,\n    warning: theme?.colors?.content?.warning?.primary,\n    alert: theme?.colors?.content?.alert?.primary,\n    neutral: theme?.colors?.content?.neutral?.primary,\n  };\n\n  return colorMap[color] || color;\n};\n\nconst isHeadingVariant = (variant: VariantType): boolean =>\n  variant === \"h1\" ||\n  variant === \"h2\" ||\n  variant === \"h3\" ||\n  variant === \"h4\" ||\n  variant === \"display\";\n\nconst getVariantStyles = (variant: VariantType) => {\n  switch (variant) {\n    case \"h1\":\n      return { fontSize: 40, fontWeight: \"700\", lineHeight: \"48px\" };\n    case \"h2\":\n      return { fontSize: 32, fontWeight: \"700\", lineHeight: \"38px\" };\n    case \"h3\":\n      return { fontSize: 28, fontWeight: \"700\", lineHeight: \"34px\" };\n    case \"h4\":\n      return { fontSize: 24, fontWeight: \"700\", lineHeight: \"28px\" };\n    case \"display\":\n      return { fontSize: 48, fontWeight: \"800\", lineHeight: \"58px\" };\n    case \"bodyLg\":\n      return { fontSize: 18, fontWeight: \"400\", lineHeight: \"24px\" };\n    case \"bodyLgAccent\":\n      return { fontSize: 18, fontWeight: \"500\", lineHeight: \"24px\" };\n    case \"bodyLgParagraph\":\n      return { fontSize: 18, fontWeight: \"400\", lineHeight: \"26px\" };\n    case \"bodyMd\":\n      return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n    case \"bodyMdAccent\":\n      return { fontSize: 16, fontWeight: \"500\", lineHeight: \"20px\" };\n    case \"bodyMdParagraph\":\n      return { fontSize: 16, fontWeight: \"400\", lineHeight: \"22px\" };\n    case \"bodySm\":\n      return { fontSize: 14, fontWeight: \"400\", lineHeight: \"18px\" };\n    case \"bodySmAccent\":\n      return { fontSize: 14, fontWeight: \"500\", lineHeight: \"18px\" };\n    case \"bodySmParagraph\":\n      return { fontSize: 14, fontWeight: \"400\", lineHeight: \"20px\" };\n    case \"bodyXs\":\n      return { fontSize: 12, fontWeight: \"400\", lineHeight: \"16px\" };\n    case \"bodyXsAccent\":\n      return { fontSize: 12, fontWeight: \"500\", lineHeight: \"16px\" };\n    case \"bodyXsParagraph\":\n      return { fontSize: 12, fontWeight: \"400\", lineHeight: \"18px\" };\n    default:\n      return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n  }\n};\n\nexport const Typography = forwardRef<any, TypographyProps>(\n  (\n    {\n      children,\n      align = \"inherit\",\n      noWrap = false,\n      variant = \"bodyMd\",\n      color = \"inherit\",\n      marginBottom = 0,\n      marginTop = 0,\n      as,\n      ...rest\n    },\n    ref\n  ) => {\n    const { theme } = useDesignSystem();\n    const variantStyles = getVariantStyles(variant);\n    const colorValue = getColor(color, theme);\n    const themefonts = theme.fonts as Record<string, string>;\n    const fontFamily = isHeadingVariant(variant)\n      ? themefonts?.heading\n      : themefonts?.body;\n\n    return (\n      <Text\n        {...rest}\n        ref={ref}\n        as={as}\n        color={colorValue}\n        fontSize={variantStyles.fontSize}\n        fontWeight={variantStyles.fontWeight}\n        fontFamily={fontFamily}\n        numberOfLines={noWrap ? 1 : undefined}\n        style={{\n          marginTop,\n          marginBottom,\n          textAlign: align === \"inherit\" ? undefined : align,\n          lineHeight: variantStyles.lineHeight,\n          ...(noWrap && {\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            whiteSpace: \"nowrap\",\n          }),\n          ...rest.style,\n        }}\n      >\n        {children}\n      </Text>\n    );\n  }\n);\n\nTypography.displayName = \"Typography\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n  color: ${(props) => props.color || \"inherit\"};\n  font-size: ${(props) =>\n    typeof props.fontSize === \"number\"\n      ? `${props.fontSize}px`\n      : props.fontSize || \"inherit\"};\n  font-weight: ${(props) => props.fontWeight || \"normal\"};\n  font-family: ${(props) =>\n    props.fontFamily ||\n    '\"Aktiv Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif'};\n  line-height: ${(props) =>\n    typeof props.lineHeight === \"number\"\n      ? `${props.lineHeight}px`\n      : props.lineHeight || \"inherit\"};\n  white-space: ${(props) => props.whiteSpace || \"normal\"};\n  text-align: ${(props) => props.textAlign || \"inherit\"};\n  text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n  style,\n  className,\n  id,\n  role,\n  numberOfLines: _numberOfLines,\n  ...props\n}) => {\n  return (\n    <StyledText\n      {...props}\n      style={style}\n      className={className}\n      id={id}\n      role={role}\n    />\n  );\n};\n"],"mappings":"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","names":["styled","import_jsx_runtime"]}
+{"version":3,"sources":["../../src/index.tsx","../../src/Typography.tsx","../../../primitives-web/src/Text.tsx"],"sourcesContent":["export * from \"./Typography\";\nexport * from \"./types\";\n","import { forwardRef } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Text } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem, getTypographyTokens } from \"@xsolla/xui-core\";\nimport type { ColorType, TypographyProps, VariantType } from \"./types\";\n\nconst getColor = (\n  color: ColorType | string,\n  theme: any\n): string | undefined => {\n  if (color === \"inherit\") return undefined;\n\n  const colorMap: Record<string, string> = {\n    primary: theme?.colors?.content?.primary,\n    secondary: theme?.colors?.content?.secondary,\n    tertiary: theme?.colors?.content?.tertiary,\n    brand: theme?.colors?.content?.brand?.primary,\n    brandSecondary: theme?.colors?.content?.brand?.secondary,\n    success: theme?.colors?.content?.success?.primary,\n    warning: theme?.colors?.content?.warning?.primary,\n    alert: theme?.colors?.content?.alert?.primary,\n    neutral: theme?.colors?.content?.neutral?.primary,\n  };\n\n  return colorMap[color] || color;\n};\n\nconst isHeadingVariant = (variant: VariantType): boolean =>\n  variant === \"h1\" ||\n  variant === \"h2\" ||\n  variant === \"h3\" ||\n  variant === \"h4\" ||\n  variant === \"h5\" ||\n  variant === \"display\";\n\nconst getVariantStyles = (variant: VariantType, typographyTokens?: any) => {\n  // If typography tokens are provided from theme, use them\n  if (typographyTokens) {\n    const headingMap: Record<string, keyof typeof typographyTokens.heading> = {\n      h1: \"h1\",\n      h2: \"h2\",\n      h3: \"h3\",\n      h4: \"h4\",\n      h5: \"h5\",\n    };\n\n    if (headingMap[variant]) {\n      const token = typographyTokens.heading[headingMap[variant]];\n      if (token) {\n        return {\n          fontSize: token.fontSize,\n          fontWeight: String(token.fontWeight),\n          lineHeight: token.lineHeight,\n        };\n      }\n    }\n\n    if (variant === \"display\" && typographyTokens.basic?.display) {\n      const token = typographyTokens.basic.display;\n      return {\n        fontSize: token.fontSize,\n        fontWeight: String(token.fontWeight),\n        lineHeight: token.lineHeight,\n      };\n    }\n\n    // Body variants\n    const bodyMap: Record<string, string> = {\n      bodyLg: \"body-lg\",\n      bodyLgAccent: \"body-lg\",\n      bodyLgParagraph: \"body-lg\",\n      bodyMd: \"body-md\",\n      bodyMdAccent: \"body-md\",\n      bodyMdParagraph: \"body-md\",\n      bodySm: \"body-sm\",\n      bodySmAccent: \"body-sm\",\n      bodySmParagraph: \"body-sm\",\n      bodyXs: \"body-xs\",\n      bodyXsAccent: \"body-xs\",\n      bodyXsParagraph: \"body-xs\",\n    };\n\n    const bodyKey = bodyMap[variant];\n    if (bodyKey && typographyTokens.basic?.[bodyKey]) {\n      const token = typographyTokens.basic[bodyKey];\n      let fontWeight = token.fontWeight;\n      let lineHeight = token.lineHeight;\n\n      if (variant.includes(\"Accent\") && token.accent) {\n        fontWeight = token.accent.fontWeight;\n      }\n\n      if (variant.includes(\"Paragraph\") && token.paragraph) {\n        lineHeight = token.paragraph.lineHeight;\n      }\n\n      return {\n        fontSize: token.fontSize,\n        fontWeight: String(fontWeight),\n        lineHeight: lineHeight,\n      };\n    }\n  }\n\n  // Fallback to default styles (B2B mode for backwards compatibility)\n  switch (variant) {\n    case \"h1\":\n      return { fontSize: 56, fontWeight: \"400\", lineHeight: \"68px\" };\n    case \"h2\":\n      return { fontSize: 48, fontWeight: \"400\", lineHeight: \"58px\" };\n    case \"h3\":\n      return { fontSize: 32, fontWeight: \"400\", lineHeight: \"38px\" };\n    case \"h4\":\n      return { fontSize: 24, fontWeight: \"400\", lineHeight: \"28px\" };\n    case \"h5\":\n      return { fontSize: 20, fontWeight: \"600\", lineHeight: \"24px\" };\n    case \"display\":\n      return { fontSize: 64, fontWeight: \"400\", lineHeight: \"78px\" };\n    case \"bodyLg\":\n      return { fontSize: 18, fontWeight: \"400\", lineHeight: \"24px\" };\n    case \"bodyLgAccent\":\n      return { fontSize: 18, fontWeight: \"500\", lineHeight: \"24px\" };\n    case \"bodyLgParagraph\":\n      return { fontSize: 18, fontWeight: \"400\", lineHeight: \"26px\" };\n    case \"bodyMd\":\n      return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n    case \"bodyMdAccent\":\n      return { fontSize: 16, fontWeight: \"500\", lineHeight: \"20px\" };\n    case \"bodyMdParagraph\":\n      return { fontSize: 16, fontWeight: \"400\", lineHeight: \"22px\" };\n    case \"bodySm\":\n      return { fontSize: 14, fontWeight: \"400\", lineHeight: \"18px\" };\n    case \"bodySmAccent\":\n      return { fontSize: 14, fontWeight: \"500\", lineHeight: \"18px\" };\n    case \"bodySmParagraph\":\n      return { fontSize: 14, fontWeight: \"400\", lineHeight: \"20px\" };\n    case \"bodyXs\":\n      return { fontSize: 12, fontWeight: \"400\", lineHeight: \"16px\" };\n    case \"bodyXsAccent\":\n      return { fontSize: 12, fontWeight: \"500\", lineHeight: \"16px\" };\n    case \"bodyXsParagraph\":\n      return { fontSize: 12, fontWeight: \"400\", lineHeight: \"18px\" };\n    default:\n      return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n  }\n};\n\nexport const Typography = forwardRef<any, TypographyProps>(\n  (\n    {\n      children,\n      align = \"inherit\",\n      noWrap = false,\n      variant = \"bodyMd\",\n      color = \"inherit\",\n      marginBottom = 0,\n      marginTop = 0,\n      as,\n      productContext,\n      ...rest\n    },\n    ref\n  ) => {\n    const { theme } = useDesignSystem();\n    // If productContext is provided, use tokens for that specific context\n    // Otherwise, use the tokens from the theme (context)\n    const typographyTokens = productContext\n      ? getTypographyTokens(productContext)\n      : (theme as any).typographyTokens;\n    const variantStyles = getVariantStyles(variant, typographyTokens);\n    const colorValue = getColor(color, theme);\n    const themefonts = theme.fonts as Record<string, string>;\n    const fontFamily = isHeadingVariant(variant)\n      ? themefonts?.heading\n      : themefonts?.body;\n\n    return (\n      <Text\n        {...rest}\n        ref={ref}\n        as={as}\n        color={colorValue}\n        fontSize={variantStyles.fontSize}\n        fontWeight={variantStyles.fontWeight}\n        fontFamily={fontFamily}\n        numberOfLines={noWrap ? 1 : undefined}\n        style={{\n          marginTop,\n          marginBottom,\n          textAlign: align === \"inherit\" ? undefined : align,\n          lineHeight: variantStyles.lineHeight,\n          ...(noWrap && {\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            whiteSpace: \"nowrap\",\n          }),\n          ...rest.style,\n        }}\n      >\n        {children}\n      </Text>\n    );\n  }\n);\n\nTypography.displayName = \"Typography\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n  color: ${(props) => props.color || \"inherit\"};\n  font-size: ${(props) =>\n    typeof props.fontSize === \"number\"\n      ? `${props.fontSize}px`\n      : props.fontSize || \"inherit\"};\n  font-weight: ${(props) => props.fontWeight || \"normal\"};\n  font-family: ${(props) =>\n    props.fontFamily ||\n    '\"Aktiv Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif'};\n  line-height: ${(props) =>\n    typeof props.lineHeight === \"number\"\n      ? `${props.lineHeight}px`\n      : props.lineHeight || \"inherit\"};\n  white-space: ${(props) => props.whiteSpace || \"normal\"};\n  text-align: ${(props) => props.textAlign || \"inherit\"};\n  text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n  style,\n  className,\n  id,\n  role,\n  numberOfLines: _numberOfLines,\n  ...props\n}) => {\n  return (\n    <StyledText\n      {...props}\n      style={style}\n      className={className}\n      id={id}\n      role={role}\n    />\n  );\n};\n"],"mappings":"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","names":["styled","import_jsx_runtime"]}

package/web/index.mjs

@@ -35,7 +35,7 @@ var Text = ({
 };
 
 // src/Typography.tsx
-import { useDesignSystem } from "@xsolla/xui-core";
+import { useDesignSystem, getTypographyTokens } from "@xsolla/xui-core";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var getColor = (color, theme) => {
   if (color === "inherit") return void 0;
@@ -52,19 +52,79 @@ var getColor = (color, theme) => {
   };
   return colorMap[color] || color;
 };
-var isHeadingVariant = (variant) => variant === "h1" || variant === "h2" || variant === "h3" || variant === "h4" || variant === "display";
-var getVariantStyles = (variant) => {
+var isHeadingVariant = (variant) => variant === "h1" || variant === "h2" || variant === "h3" || variant === "h4" || variant === "h5" || variant === "display";
+var getVariantStyles = (variant, typographyTokens) => {
+  if (typographyTokens) {
+    const headingMap = {
+      h1: "h1",
+      h2: "h2",
+      h3: "h3",
+      h4: "h4",
+      h5: "h5"
+    };
+    if (headingMap[variant]) {
+      const token = typographyTokens.heading[headingMap[variant]];
+      if (token) {
+        return {
+          fontSize: token.fontSize,
+          fontWeight: String(token.fontWeight),
+          lineHeight: token.lineHeight
+        };
+      }
+    }
+    if (variant === "display" && typographyTokens.basic?.display) {
+      const token = typographyTokens.basic.display;
+      return {
+        fontSize: token.fontSize,
+        fontWeight: String(token.fontWeight),
+        lineHeight: token.lineHeight
+      };
+    }
+    const bodyMap = {
+      bodyLg: "body-lg",
+      bodyLgAccent: "body-lg",
+      bodyLgParagraph: "body-lg",
+      bodyMd: "body-md",
+      bodyMdAccent: "body-md",
+      bodyMdParagraph: "body-md",
+      bodySm: "body-sm",
+      bodySmAccent: "body-sm",
+      bodySmParagraph: "body-sm",
+      bodyXs: "body-xs",
+      bodyXsAccent: "body-xs",
+      bodyXsParagraph: "body-xs"
+    };
+    const bodyKey = bodyMap[variant];
+    if (bodyKey && typographyTokens.basic?.[bodyKey]) {
+      const token = typographyTokens.basic[bodyKey];
+      let fontWeight = token.fontWeight;
+      let lineHeight = token.lineHeight;
+      if (variant.includes("Accent") && token.accent) {
+        fontWeight = token.accent.fontWeight;
+      }
+      if (variant.includes("Paragraph") && token.paragraph) {
+        lineHeight = token.paragraph.lineHeight;
+      }
+      return {
+        fontSize: token.fontSize,
+        fontWeight: String(fontWeight),
+        lineHeight
+      };
+    }
+  }
   switch (variant) {
     case "h1":
-      return { fontSize: 40, fontWeight: "700", lineHeight: "48px" };
+      return { fontSize: 56, fontWeight: "400", lineHeight: "68px" };
     case "h2":
-      return { fontSize: 32, fontWeight: "700", lineHeight: "38px" };
+      return { fontSize: 48, fontWeight: "400", lineHeight: "58px" };
     case "h3":
-      return { fontSize: 28, fontWeight: "700", lineHeight: "34px" };
+      return { fontSize: 32, fontWeight: "400", lineHeight: "38px" };
     case "h4":
-      return { fontSize: 24, fontWeight: "700", lineHeight: "28px" };
+      return { fontSize: 24, fontWeight: "400", lineHeight: "28px" };
+    case "h5":
+      return { fontSize: 20, fontWeight: "600", lineHeight: "24px" };
     case "display":
-      return { fontSize: 48, fontWeight: "800", lineHeight: "58px" };
+      return { fontSize: 64, fontWeight: "400", lineHeight: "78px" };
     case "bodyLg":
       return { fontSize: 18, fontWeight: "400", lineHeight: "24px" };
     case "bodyLgAccent":
@@ -103,10 +163,12 @@ var Typography = forwardRef(
     marginBottom = 0,
     marginTop = 0,
     as,
+    productContext,
     ...rest
   }, ref) => {
     const { theme } = useDesignSystem();
-    const variantStyles = getVariantStyles(variant);
+    const typographyTokens = productContext ? getTypographyTokens(productContext) : theme.typographyTokens;
+    const variantStyles = getVariantStyles(variant, typographyTokens);
     const colorValue = getColor(color, theme);
     const themefonts = theme.fonts;
     const fontFamily = isHeadingVariant(variant) ? themefonts?.heading : themefonts?.body;

package/web/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Typography.tsx","../../../primitives-web/src/Text.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Text } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport type { ColorType, TypographyProps, VariantType } from \"./types\";\n\nconst getColor = (\n  color: ColorType | string,\n  theme: any\n): string | undefined => {\n  if (color === \"inherit\") return undefined;\n\n  const colorMap: Record<string, string> = {\n    primary: theme?.colors?.content?.primary,\n    secondary: theme?.colors?.content?.secondary,\n    tertiary: theme?.colors?.content?.tertiary,\n    brand: theme?.colors?.content?.brand?.primary,\n    brandSecondary: theme?.colors?.content?.brand?.secondary,\n    success: theme?.colors?.content?.success?.primary,\n    warning: theme?.colors?.content?.warning?.primary,\n    alert: theme?.colors?.content?.alert?.primary,\n    neutral: theme?.colors?.content?.neutral?.primary,\n  };\n\n  return colorMap[color] || color;\n};\n\nconst isHeadingVariant = (variant: VariantType): boolean =>\n  variant === \"h1\" ||\n  variant === \"h2\" ||\n  variant === \"h3\" ||\n  variant === \"h4\" ||\n  variant === \"display\";\n\nconst getVariantStyles = (variant: VariantType) => {\n  switch (variant) {\n    case \"h1\":\n      return { fontSize: 40, fontWeight: \"700\", lineHeight: \"48px\" };\n    case \"h2\":\n      return { fontSize: 32, fontWeight: \"700\", lineHeight: \"38px\" };\n    case \"h3\":\n      return { fontSize: 28, fontWeight: \"700\", lineHeight: \"34px\" };\n    case \"h4\":\n      return { fontSize: 24, fontWeight: \"700\", lineHeight: \"28px\" };\n    case \"display\":\n      return { fontSize: 48, fontWeight: \"800\", lineHeight: \"58px\" };\n    case \"bodyLg\":\n      return { fontSize: 18, fontWeight: \"400\", lineHeight: \"24px\" };\n    case \"bodyLgAccent\":\n      return { fontSize: 18, fontWeight: \"500\", lineHeight: \"24px\" };\n    case \"bodyLgParagraph\":\n      return { fontSize: 18, fontWeight: \"400\", lineHeight: \"26px\" };\n    case \"bodyMd\":\n      return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n    case \"bodyMdAccent\":\n      return { fontSize: 16, fontWeight: \"500\", lineHeight: \"20px\" };\n    case \"bodyMdParagraph\":\n      return { fontSize: 16, fontWeight: \"400\", lineHeight: \"22px\" };\n    case \"bodySm\":\n      return { fontSize: 14, fontWeight: \"400\", lineHeight: \"18px\" };\n    case \"bodySmAccent\":\n      return { fontSize: 14, fontWeight: \"500\", lineHeight: \"18px\" };\n    case \"bodySmParagraph\":\n      return { fontSize: 14, fontWeight: \"400\", lineHeight: \"20px\" };\n    case \"bodyXs\":\n      return { fontSize: 12, fontWeight: \"400\", lineHeight: \"16px\" };\n    case \"bodyXsAccent\":\n      return { fontSize: 12, fontWeight: \"500\", lineHeight: \"16px\" };\n    case \"bodyXsParagraph\":\n      return { fontSize: 12, fontWeight: \"400\", lineHeight: \"18px\" };\n    default:\n      return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n  }\n};\n\nexport const Typography = forwardRef<any, TypographyProps>(\n  (\n    {\n      children,\n      align = \"inherit\",\n      noWrap = false,\n      variant = \"bodyMd\",\n      color = \"inherit\",\n      marginBottom = 0,\n      marginTop = 0,\n      as,\n      ...rest\n    },\n    ref\n  ) => {\n    const { theme } = useDesignSystem();\n    const variantStyles = getVariantStyles(variant);\n    const colorValue = getColor(color, theme);\n    const themefonts = theme.fonts as Record<string, string>;\n    const fontFamily = isHeadingVariant(variant)\n      ? themefonts?.heading\n      : themefonts?.body;\n\n    return (\n      <Text\n        {...rest}\n        ref={ref}\n        as={as}\n        color={colorValue}\n        fontSize={variantStyles.fontSize}\n        fontWeight={variantStyles.fontWeight}\n        fontFamily={fontFamily}\n        numberOfLines={noWrap ? 1 : undefined}\n        style={{\n          marginTop,\n          marginBottom,\n          textAlign: align === \"inherit\" ? undefined : align,\n          lineHeight: variantStyles.lineHeight,\n          ...(noWrap && {\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            whiteSpace: \"nowrap\",\n          }),\n          ...rest.style,\n        }}\n      >\n        {children}\n      </Text>\n    );\n  }\n);\n\nTypography.displayName = \"Typography\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n  color: ${(props) => props.color || \"inherit\"};\n  font-size: ${(props) =>\n    typeof props.fontSize === \"number\"\n      ? `${props.fontSize}px`\n      : props.fontSize || \"inherit\"};\n  font-weight: ${(props) => props.fontWeight || \"normal\"};\n  font-family: ${(props) =>\n    props.fontFamily ||\n    '\"Aktiv Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif'};\n  line-height: ${(props) =>\n    typeof props.lineHeight === \"number\"\n      ? `${props.lineHeight}px`\n      : props.lineHeight || \"inherit\"};\n  white-space: ${(props) => props.whiteSpace || \"normal\"};\n  text-align: ${(props) => props.textAlign || \"inherit\"};\n  text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n  style,\n  className,\n  id,\n  role,\n  numberOfLines: _numberOfLines,\n  ...props\n}) => {\n  return (\n    <StyledText\n      {...props}\n      style={style}\n      className={className}\n      id={id}\n      role={role}\n    />\n  );\n};\n"],"mappings":"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","names":["jsx"]}
+{"version":3,"sources":["../../src/Typography.tsx","../../../primitives-web/src/Text.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Text } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem, getTypographyTokens } from \"@xsolla/xui-core\";\nimport type { ColorType, TypographyProps, VariantType } from \"./types\";\n\nconst getColor = (\n  color: ColorType | string,\n  theme: any\n): string | undefined => {\n  if (color === \"inherit\") return undefined;\n\n  const colorMap: Record<string, string> = {\n    primary: theme?.colors?.content?.primary,\n    secondary: theme?.colors?.content?.secondary,\n    tertiary: theme?.colors?.content?.tertiary,\n    brand: theme?.colors?.content?.brand?.primary,\n    brandSecondary: theme?.colors?.content?.brand?.secondary,\n    success: theme?.colors?.content?.success?.primary,\n    warning: theme?.colors?.content?.warning?.primary,\n    alert: theme?.colors?.content?.alert?.primary,\n    neutral: theme?.colors?.content?.neutral?.primary,\n  };\n\n  return colorMap[color] || color;\n};\n\nconst isHeadingVariant = (variant: VariantType): boolean =>\n  variant === \"h1\" ||\n  variant === \"h2\" ||\n  variant === \"h3\" ||\n  variant === \"h4\" ||\n  variant === \"h5\" ||\n  variant === \"display\";\n\nconst getVariantStyles = (variant: VariantType, typographyTokens?: any) => {\n  // If typography tokens are provided from theme, use them\n  if (typographyTokens) {\n    const headingMap: Record<string, keyof typeof typographyTokens.heading> = {\n      h1: \"h1\",\n      h2: \"h2\",\n      h3: \"h3\",\n      h4: \"h4\",\n      h5: \"h5\",\n    };\n\n    if (headingMap[variant]) {\n      const token = typographyTokens.heading[headingMap[variant]];\n      if (token) {\n        return {\n          fontSize: token.fontSize,\n          fontWeight: String(token.fontWeight),\n          lineHeight: token.lineHeight,\n        };\n      }\n    }\n\n    if (variant === \"display\" && typographyTokens.basic?.display) {\n      const token = typographyTokens.basic.display;\n      return {\n        fontSize: token.fontSize,\n        fontWeight: String(token.fontWeight),\n        lineHeight: token.lineHeight,\n      };\n    }\n\n    // Body variants\n    const bodyMap: Record<string, string> = {\n      bodyLg: \"body-lg\",\n      bodyLgAccent: \"body-lg\",\n      bodyLgParagraph: \"body-lg\",\n      bodyMd: \"body-md\",\n      bodyMdAccent: \"body-md\",\n      bodyMdParagraph: \"body-md\",\n      bodySm: \"body-sm\",\n      bodySmAccent: \"body-sm\",\n      bodySmParagraph: \"body-sm\",\n      bodyXs: \"body-xs\",\n      bodyXsAccent: \"body-xs\",\n      bodyXsParagraph: \"body-xs\",\n    };\n\n    const bodyKey = bodyMap[variant];\n    if (bodyKey && typographyTokens.basic?.[bodyKey]) {\n      const token = typographyTokens.basic[bodyKey];\n      let fontWeight = token.fontWeight;\n      let lineHeight = token.lineHeight;\n\n      if (variant.includes(\"Accent\") && token.accent) {\n        fontWeight = token.accent.fontWeight;\n      }\n\n      if (variant.includes(\"Paragraph\") && token.paragraph) {\n        lineHeight = token.paragraph.lineHeight;\n      }\n\n      return {\n        fontSize: token.fontSize,\n        fontWeight: String(fontWeight),\n        lineHeight: lineHeight,\n      };\n    }\n  }\n\n  // Fallback to default styles (B2B mode for backwards compatibility)\n  switch (variant) {\n    case \"h1\":\n      return { fontSize: 56, fontWeight: \"400\", lineHeight: \"68px\" };\n    case \"h2\":\n      return { fontSize: 48, fontWeight: \"400\", lineHeight: \"58px\" };\n    case \"h3\":\n      return { fontSize: 32, fontWeight: \"400\", lineHeight: \"38px\" };\n    case \"h4\":\n      return { fontSize: 24, fontWeight: \"400\", lineHeight: \"28px\" };\n    case \"h5\":\n      return { fontSize: 20, fontWeight: \"600\", lineHeight: \"24px\" };\n    case \"display\":\n      return { fontSize: 64, fontWeight: \"400\", lineHeight: \"78px\" };\n    case \"bodyLg\":\n      return { fontSize: 18, fontWeight: \"400\", lineHeight: \"24px\" };\n    case \"bodyLgAccent\":\n      return { fontSize: 18, fontWeight: \"500\", lineHeight: \"24px\" };\n    case \"bodyLgParagraph\":\n      return { fontSize: 18, fontWeight: \"400\", lineHeight: \"26px\" };\n    case \"bodyMd\":\n      return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n    case \"bodyMdAccent\":\n      return { fontSize: 16, fontWeight: \"500\", lineHeight: \"20px\" };\n    case \"bodyMdParagraph\":\n      return { fontSize: 16, fontWeight: \"400\", lineHeight: \"22px\" };\n    case \"bodySm\":\n      return { fontSize: 14, fontWeight: \"400\", lineHeight: \"18px\" };\n    case \"bodySmAccent\":\n      return { fontSize: 14, fontWeight: \"500\", lineHeight: \"18px\" };\n    case \"bodySmParagraph\":\n      return { fontSize: 14, fontWeight: \"400\", lineHeight: \"20px\" };\n    case \"bodyXs\":\n      return { fontSize: 12, fontWeight: \"400\", lineHeight: \"16px\" };\n    case \"bodyXsAccent\":\n      return { fontSize: 12, fontWeight: \"500\", lineHeight: \"16px\" };\n    case \"bodyXsParagraph\":\n      return { fontSize: 12, fontWeight: \"400\", lineHeight: \"18px\" };\n    default:\n      return { fontSize: 16, fontWeight: \"400\", lineHeight: \"20px\" };\n  }\n};\n\nexport const Typography = forwardRef<any, TypographyProps>(\n  (\n    {\n      children,\n      align = \"inherit\",\n      noWrap = false,\n      variant = \"bodyMd\",\n      color = \"inherit\",\n      marginBottom = 0,\n      marginTop = 0,\n      as,\n      productContext,\n      ...rest\n    },\n    ref\n  ) => {\n    const { theme } = useDesignSystem();\n    // If productContext is provided, use tokens for that specific context\n    // Otherwise, use the tokens from the theme (context)\n    const typographyTokens = productContext\n      ? getTypographyTokens(productContext)\n      : (theme as any).typographyTokens;\n    const variantStyles = getVariantStyles(variant, typographyTokens);\n    const colorValue = getColor(color, theme);\n    const themefonts = theme.fonts as Record<string, string>;\n    const fontFamily = isHeadingVariant(variant)\n      ? themefonts?.heading\n      : themefonts?.body;\n\n    return (\n      <Text\n        {...rest}\n        ref={ref}\n        as={as}\n        color={colorValue}\n        fontSize={variantStyles.fontSize}\n        fontWeight={variantStyles.fontWeight}\n        fontFamily={fontFamily}\n        numberOfLines={noWrap ? 1 : undefined}\n        style={{\n          marginTop,\n          marginBottom,\n          textAlign: align === \"inherit\" ? undefined : align,\n          lineHeight: variantStyles.lineHeight,\n          ...(noWrap && {\n            overflow: \"hidden\",\n            textOverflow: \"ellipsis\",\n            whiteSpace: \"nowrap\",\n          }),\n          ...rest.style,\n        }}\n      >\n        {children}\n      </Text>\n    );\n  }\n);\n\nTypography.displayName = \"Typography\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n  color: ${(props) => props.color || \"inherit\"};\n  font-size: ${(props) =>\n    typeof props.fontSize === \"number\"\n      ? `${props.fontSize}px`\n      : props.fontSize || \"inherit\"};\n  font-weight: ${(props) => props.fontWeight || \"normal\"};\n  font-family: ${(props) =>\n    props.fontFamily ||\n    '\"Aktiv Grotesk\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif'};\n  line-height: ${(props) =>\n    typeof props.lineHeight === \"number\"\n      ? `${props.lineHeight}px`\n      : props.lineHeight || \"inherit\"};\n  white-space: ${(props) => props.whiteSpace || \"normal\"};\n  text-align: ${(props) => props.textAlign || \"inherit\"};\n  text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n  style,\n  className,\n  id,\n  role,\n  numberOfLines: _numberOfLines,\n  ...props\n}) => {\n  return (\n    <StyledText\n      {...props}\n      style={style}\n      className={className}\n      id={id}\n      role={role}\n    />\n  );\n};\n"],"mappings":"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","names":["jsx"]}