@xsolla/xui-typography 0.134.0 → 0.135.0

package/web/index.js

@@ -91,22 +91,41 @@ var getColor = (color, theme) => {
   return colorMap[color] || color;
 };
 var isHeadingVariant = (variant) => variant === "h1" || variant === "h2" || variant === "h3" || variant === "h4" || variant === "h5" || variant === "display";
+var 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",
+  bodyXxs: "body-xxs",
+  bodyXxsAccent: "body-xxs",
+  bodyXxsParagraph: "body-xxs"
+};
+var headingMap = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5"
+};
 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
+          lineHeight: token.lineHeight,
+          scaleStep: token.scaleStep,
+          lineHeightCategory: token.lineHeightCategory
         };
       }
     }
@@ -115,82 +134,223 @@ var getVariantStyles = (variant, typographyTokens) => {
       return {
         fontSize: token.fontSize,
         fontWeight: String(token.fontWeight),
-        lineHeight: token.lineHeight
+        lineHeight: token.lineHeight,
+        scaleStep: token.scaleStep,
+        lineHeightCategory: token.lineHeightCategory
       };
     }
-    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;
+      let lineHeightCategory = token.lineHeightCategory;
+      let lineHeightScaleStep;
       if (variant.includes("Accent") && token.accent) {
         fontWeight = token.accent.fontWeight;
       }
       if (variant.includes("Paragraph") && token.paragraph) {
         lineHeight = token.paragraph.lineHeight;
+        lineHeightCategory = "text";
+        lineHeightScaleStep = token.paragraph.lineHeightScaleStep;
       }
       return {
         fontSize: token.fontSize,
         fontWeight: String(fontWeight),
-        lineHeight
+        lineHeight,
+        scaleStep: token.scaleStep,
+        lineHeightCategory,
+        lineHeightScaleStep
       };
     }
   }
   switch (variant) {
     case "h1":
-      return { fontSize: 56, fontWeight: "400", lineHeight: "68px" };
+      return {
+        fontSize: 56,
+        fontWeight: "400",
+        lineHeight: "56px",
+        scaleStep: "650",
+        lineHeightCategory: "display"
+      };
     case "h2":
-      return { fontSize: 48, fontWeight: "400", lineHeight: "58px" };
+      return {
+        fontSize: 48,
+        fontWeight: "400",
+        lineHeight: "48px",
+        scaleStep: "550",
+        lineHeightCategory: "display"
+      };
     case "h3":
-      return { fontSize: 32, fontWeight: "400", lineHeight: "38px" };
+      return {
+        fontSize: 32,
+        fontWeight: "400",
+        lineHeight: "32px",
+        scaleStep: "350",
+        lineHeightCategory: "display"
+      };
     case "h4":
-      return { fontSize: 24, fontWeight: "400", lineHeight: "28px" };
+      return {
+        fontSize: 24,
+        fontWeight: "400",
+        lineHeight: "24px",
+        scaleStep: "250",
+        lineHeightCategory: "display"
+      };
     case "h5":
-      return { fontSize: 20, fontWeight: "600", lineHeight: "24px" };
+      return {
+        fontSize: 20,
+        fontWeight: "600",
+        lineHeight: "20px",
+        scaleStep: "200",
+        lineHeightCategory: "display"
+      };
     case "display":
-      return { fontSize: 64, fontWeight: "400", lineHeight: "78px" };
+      return {
+        fontSize: 64,
+        fontWeight: "400",
+        lineHeight: "64px",
+        scaleStep: "750",
+        lineHeightCategory: "display"
+      };
     case "bodyLg":
-      return { fontSize: 18, fontWeight: "400", lineHeight: "24px" };
+      return {
+        fontSize: 18,
+        fontWeight: "400",
+        lineHeight: "24px",
+        scaleStep: "175",
+        lineHeightCategory: "compact"
+      };
     case "bodyLgAccent":
-      return { fontSize: 18, fontWeight: "500", lineHeight: "24px" };
+      return {
+        fontSize: 18,
+        fontWeight: "500",
+        lineHeight: "24px",
+        scaleStep: "175",
+        lineHeightCategory: "compact"
+      };
     case "bodyLgParagraph":
-      return { fontSize: 18, fontWeight: "400", lineHeight: "26px" };
+      return {
+        fontSize: 18,
+        fontWeight: "400",
+        lineHeight: "26px",
+        scaleStep: "175",
+        lineHeightCategory: "text"
+      };
     case "bodyMd":
-      return { fontSize: 16, fontWeight: "400", lineHeight: "20px" };
+      return {
+        fontSize: 16,
+        fontWeight: "400",
+        lineHeight: "20px",
+        scaleStep: "150",
+        lineHeightCategory: "compact"
+      };
     case "bodyMdAccent":
-      return { fontSize: 16, fontWeight: "500", lineHeight: "20px" };
+      return {
+        fontSize: 16,
+        fontWeight: "500",
+        lineHeight: "20px",
+        scaleStep: "150",
+        lineHeightCategory: "compact"
+      };
     case "bodyMdParagraph":
-      return { fontSize: 16, fontWeight: "400", lineHeight: "22px" };
+      return {
+        fontSize: 16,
+        fontWeight: "400",
+        lineHeight: "22px",
+        scaleStep: "150",
+        lineHeightCategory: "text"
+      };
     case "bodySm":
-      return { fontSize: 14, fontWeight: "400", lineHeight: "18px" };
+      return {
+        fontSize: 14,
+        fontWeight: "400",
+        lineHeight: "18px",
+        scaleStep: "125",
+        lineHeightCategory: "compact"
+      };
     case "bodySmAccent":
-      return { fontSize: 14, fontWeight: "500", lineHeight: "18px" };
+      return {
+        fontSize: 14,
+        fontWeight: "500",
+        lineHeight: "18px",
+        scaleStep: "125",
+        lineHeightCategory: "compact"
+      };
     case "bodySmParagraph":
-      return { fontSize: 14, fontWeight: "400", lineHeight: "20px" };
+      return {
+        fontSize: 14,
+        fontWeight: "400",
+        lineHeight: "20px",
+        scaleStep: "125",
+        lineHeightCategory: "text"
+      };
     case "bodyXs":
-      return { fontSize: 12, fontWeight: "400", lineHeight: "16px" };
+      return {
+        fontSize: 12,
+        fontWeight: "400",
+        lineHeight: "16px",
+        scaleStep: "100",
+        lineHeightCategory: "compact"
+      };
     case "bodyXsAccent":
-      return { fontSize: 12, fontWeight: "500", lineHeight: "16px" };
+      return {
+        fontSize: 12,
+        fontWeight: "500",
+        lineHeight: "16px",
+        scaleStep: "100",
+        lineHeightCategory: "compact"
+      };
     case "bodyXsParagraph":
-      return { fontSize: 12, fontWeight: "400", lineHeight: "18px" };
+      return {
+        fontSize: 12,
+        fontWeight: "400",
+        lineHeight: "18px",
+        scaleStep: "100",
+        lineHeightCategory: "text"
+      };
+    case "bodyXxs":
+      return {
+        fontSize: 10,
+        fontWeight: "400",
+        lineHeight: "14px",
+        scaleStep: "75",
+        lineHeightCategory: "compact"
+      };
+    case "bodyXxsAccent":
+      return {
+        fontSize: 10,
+        fontWeight: "500",
+        lineHeight: "14px",
+        scaleStep: "75",
+        lineHeightCategory: "compact"
+      };
+    case "bodyXxsParagraph":
+      return {
+        fontSize: 10,
+        fontWeight: "400",
+        lineHeight: "14px",
+        scaleStep: "75",
+        lineHeightCategory: "text"
+      };
     default:
-      return { fontSize: 16, fontWeight: "400", lineHeight: "20px" };
+      return {
+        fontSize: 16,
+        fontWeight: "400",
+        lineHeight: "20px",
+        scaleStep: "150",
+        lineHeightCategory: "compact"
+      };
   }
 };
+function getResponsiveLineHeight(styles) {
+  const step = styles.lineHeightScaleStep || styles.scaleStep;
+  if (!step) return void 0;
+  const cat = styles.lineHeightCategory;
+  if (cat === "display") return import_xui_core.cssVar.lhDisplay(step);
+  if (cat === "text") return import_xui_core.cssVar.lhText(step);
+  return import_xui_core.cssVar.lhCompact(step);
+}
 var Typography = (0, import_react.forwardRef)(
   ({
     children,
@@ -212,6 +372,9 @@ var Typography = (0, import_react.forwardRef)(
     const colorValue = getColor(color, theme);
     const contextFonts = productContext ? (0, import_xui_core.getFonts)(productContext) : theme.fonts;
     const fontFamily = isHeadingVariant(variant) ? contextFonts?.heading : contextFonts?.body;
+    const useResponsiveCSS = import_xui_core.isWeb && variantStyles.scaleStep;
+    const responsiveFontSize = useResponsiveCSS ? import_xui_core.cssVar.fontSize(variantStyles.scaleStep) : void 0;
+    const responsiveLineHeight = useResponsiveCSS ? getResponsiveLineHeight(variantStyles) : void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       Text,
       {
@@ -219,7 +382,7 @@ var Typography = (0, import_react.forwardRef)(
         ref,
         as,
         color: colorValue,
-        fontSize: variantStyles.fontSize,
+        fontSize: useResponsiveCSS ? void 0 : variantStyles.fontSize,
         fontWeight: variantStyles.fontWeight,
         fontFamily,
         numberOfLines: noWrap ? 1 : void 0,
@@ -227,7 +390,7 @@ var Typography = (0, import_react.forwardRef)(
           marginTop,
           marginBottom,
           textAlign: align === "inherit" ? void 0 : align,
-          lineHeight: variantStyles.lineHeight,
+          ...useResponsiveCSS ? { fontSize: responsiveFontSize, lineHeight: responsiveLineHeight } : { lineHeight: variantStyles.lineHeight },
           ...noWrap && {
             overflow: "hidden",
             textOverflow: "ellipsis",

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 {\n  useResolvedTheme,\n  getTypographyTokens,\n  getFonts,\n  isNative,\n} 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\") {\n    return isNative ? theme?.colors?.content?.primary : undefined;\n  }\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      themeMode,\n      themeProductContext,\n      ...rest\n    },\n    ref\n  ) => {\n    const { theme } = useResolvedTheme({ themeMode, themeProductContext });\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 contextFonts = productContext\n      ? getFonts(productContext)\n      : (theme.fonts as Record<string, string>);\n    const fontFamily = isHeadingVariant(variant)\n      ? contextFonts?.heading\n      : contextFonts?.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 {\n  useResolvedTheme,\n  getTypographyTokens,\n  getFonts,\n  isWeb,\n  isNative,\n  cssVar,\n} 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\") {\n    return isNative ? theme?.colors?.content?.primary : undefined;\n  }\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 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  bodyXxs: \"body-xxs\",\n  bodyXxsAccent: \"body-xxs\",\n  bodyXxsParagraph: \"body-xxs\",\n};\n\nconst headingMap: Record<string, string> = {\n  h1: \"h1\",\n  h2: \"h2\",\n  h3: \"h3\",\n  h4: \"h4\",\n  h5: \"h5\",\n};\n\nconst getVariantStyles = (variant: VariantType, typographyTokens?: any) => {\n  if (typographyTokens) {\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          scaleStep: token.scaleStep,\n          lineHeightCategory: token.lineHeightCategory,\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        scaleStep: token.scaleStep,\n        lineHeightCategory: token.lineHeightCategory,\n      };\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      let lineHeightCategory = token.lineHeightCategory;\n      let lineHeightScaleStep: string | undefined;\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        lineHeightCategory = \"text\";\n        lineHeightScaleStep = token.paragraph.lineHeightScaleStep;\n      }\n\n      return {\n        fontSize: token.fontSize,\n        fontWeight: String(fontWeight),\n        lineHeight,\n        scaleStep: token.scaleStep,\n        lineHeightCategory,\n        lineHeightScaleStep,\n      };\n    }\n  }\n\n  switch (variant) {\n    case \"h1\":\n      return {\n        fontSize: 56,\n        fontWeight: \"400\",\n        lineHeight: \"56px\",\n        scaleStep: \"650\",\n        lineHeightCategory: \"display\" as const,\n      };\n    case \"h2\":\n      return {\n        fontSize: 48,\n        fontWeight: \"400\",\n        lineHeight: \"48px\",\n        scaleStep: \"550\",\n        lineHeightCategory: \"display\" as const,\n      };\n    case \"h3\":\n      return {\n        fontSize: 32,\n        fontWeight: \"400\",\n        lineHeight: \"32px\",\n        scaleStep: \"350\",\n        lineHeightCategory: \"display\" as const,\n      };\n    case \"h4\":\n      return {\n        fontSize: 24,\n        fontWeight: \"400\",\n        lineHeight: \"24px\",\n        scaleStep: \"250\",\n        lineHeightCategory: \"display\" as const,\n      };\n    case \"h5\":\n      return {\n        fontSize: 20,\n        fontWeight: \"600\",\n        lineHeight: \"20px\",\n        scaleStep: \"200\",\n        lineHeightCategory: \"display\" as const,\n      };\n    case \"display\":\n      return {\n        fontSize: 64,\n        fontWeight: \"400\",\n        lineHeight: \"64px\",\n        scaleStep: \"750\",\n        lineHeightCategory: \"display\" as const,\n      };\n    case \"bodyLg\":\n      return {\n        fontSize: 18,\n        fontWeight: \"400\",\n        lineHeight: \"24px\",\n        scaleStep: \"175\",\n        lineHeightCategory: \"compact\" as const,\n      };\n    case \"bodyLgAccent\":\n      return {\n        fontSize: 18,\n        fontWeight: \"500\",\n        lineHeight: \"24px\",\n        scaleStep: \"175\",\n        lineHeightCategory: \"compact\" as const,\n      };\n    case \"bodyLgParagraph\":\n      return {\n        fontSize: 18,\n        fontWeight: \"400\",\n        lineHeight: \"26px\",\n        scaleStep: \"175\",\n        lineHeightCategory: \"text\" as const,\n      };\n    case \"bodyMd\":\n      return {\n        fontSize: 16,\n        fontWeight: \"400\",\n        lineHeight: \"20px\",\n        scaleStep: \"150\",\n        lineHeightCategory: \"compact\" as const,\n      };\n    case \"bodyMdAccent\":\n      return {\n        fontSize: 16,\n        fontWeight: \"500\",\n        lineHeight: \"20px\",\n        scaleStep: \"150\",\n        lineHeightCategory: \"compact\" as const,\n      };\n    case \"bodyMdParagraph\":\n      return {\n        fontSize: 16,\n        fontWeight: \"400\",\n        lineHeight: \"22px\",\n        scaleStep: \"150\",\n        lineHeightCategory: \"text\" as const,\n      };\n    case \"bodySm\":\n      return {\n        fontSize: 14,\n        fontWeight: \"400\",\n        lineHeight: \"18px\",\n        scaleStep: \"125\",\n        lineHeightCategory: \"compact\" as const,\n      };\n    case \"bodySmAccent\":\n      return {\n        fontSize: 14,\n        fontWeight: \"500\",\n        lineHeight: \"18px\",\n        scaleStep: \"125\",\n        lineHeightCategory: \"compact\" as const,\n      };\n    case \"bodySmParagraph\":\n      return {\n        fontSize: 14,\n        fontWeight: \"400\",\n        lineHeight: \"20px\",\n        scaleStep: \"125\",\n        lineHeightCategory: \"text\" as const,\n      };\n    case \"bodyXs\":\n      return {\n        fontSize: 12,\n        fontWeight: \"400\",\n        lineHeight: \"16px\",\n        scaleStep: \"100\",\n        lineHeightCategory: \"compact\" as const,\n      };\n    case \"bodyXsAccent\":\n      return {\n        fontSize: 12,\n        fontWeight: \"500\",\n        lineHeight: \"16px\",\n        scaleStep: \"100\",\n        lineHeightCategory: \"compact\" as const,\n      };\n    case \"bodyXsParagraph\":\n      return {\n        fontSize: 12,\n        fontWeight: \"400\",\n        lineHeight: \"18px\",\n        scaleStep: \"100\",\n        lineHeightCategory: \"text\" as const,\n      };\n    case \"bodyXxs\":\n      return {\n        fontSize: 10,\n        fontWeight: \"400\",\n        lineHeight: \"14px\",\n        scaleStep: \"75\",\n        lineHeightCategory: \"compact\" as const,\n      };\n    case \"bodyXxsAccent\":\n      return {\n        fontSize: 10,\n        fontWeight: \"500\",\n        lineHeight: \"14px\",\n        scaleStep: \"75\",\n        lineHeightCategory: \"compact\" as const,\n      };\n    case \"bodyXxsParagraph\":\n      return {\n        fontSize: 10,\n        fontWeight: \"400\",\n        lineHeight: \"14px\",\n        scaleStep: \"75\",\n        lineHeightCategory: \"text\" as const,\n      };\n    default:\n      return {\n        fontSize: 16,\n        fontWeight: \"400\",\n        lineHeight: \"20px\",\n        scaleStep: \"150\",\n        lineHeightCategory: \"compact\" as const,\n      };\n  }\n};\n\nfunction getResponsiveLineHeight(\n  styles: ReturnType<typeof getVariantStyles>\n): string | undefined {\n  const step = styles.lineHeightScaleStep || styles.scaleStep;\n  if (!step) return undefined;\n\n  const cat = styles.lineHeightCategory;\n  if (cat === \"display\") return cssVar.lhDisplay(step);\n  if (cat === \"text\") return cssVar.lhText(step);\n  return cssVar.lhCompact(step);\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      themeMode,\n      themeProductContext,\n      ...rest\n    },\n    ref\n  ) => {\n    const { theme } = useResolvedTheme({ themeMode, themeProductContext });\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 contextFonts = productContext\n      ? getFonts(productContext)\n      : (theme.fonts as Record<string, string>);\n    const fontFamily = isHeadingVariant(variant)\n      ? contextFonts?.heading\n      : contextFonts?.body;\n\n    const useResponsiveCSS = isWeb && variantStyles.scaleStep;\n\n    const responsiveFontSize = useResponsiveCSS\n      ? cssVar.fontSize(variantStyles.scaleStep!)\n      : undefined;\n    const responsiveLineHeight = useResponsiveCSS\n      ? getResponsiveLineHeight(variantStyles)\n      : undefined;\n\n    return (\n      <Text\n        {...rest}\n        ref={ref}\n        as={as}\n        color={colorValue}\n        fontSize={useResponsiveCSS ? undefined : 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          ...(useResponsiveCSS\n            ? { fontSize: responsiveFontSize, lineHeight: responsiveLineHeight }\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"]}