@gobolt/genesis 0.10.2 → 0.10.3

package/dist/index.cjs

@@ -61816,9 +61816,17 @@ const Avatar$1 = styled(Avatar$2)`
   return getGenesisClass$e(theme, type4, state);
 }}
 `;
+const getOnsurfaceCopyColors = (colors2) => colors2?.onsurface ?? {};
+const NAMED_COLOR_TOKENS = {
+  textPrimary: (colors2) => getOnsurfaceCopyColors(colors2)["copy-dark"],
+  textSecondary: (colors2) => getOnsurfaceCopyColors(colors2)["copy-light"],
+  textDefault: (colors2) => getOnsurfaceCopyColors(colors2)["copy"],
+  textDisabled: (colors2) => getOnsurfaceCopyColors(colors2)["copy-disabled"]
+};
 const getColor = (color2, colors2, $themeType) => {
   if (color2) {
-    return color2;
+    const resolveToken = NAMED_COLOR_TOKENS[color2];
+    return resolveToken ? resolveToken(colors2) ?? color2 : color2;
   }
   const themeColor = colors2[$themeType];
   if (themeColor?.active?.default) {
@@ -61843,12 +61851,15 @@ const getGenesisTypographyClass = ({ colors: colors2, typography: typography2 },
       font-size: ${fontSize} !important;
        -webkit-font-smoothing: antialiased;
 
-      &:disabled {
+      /* :disabled only matches form controls — antd Typography marks disabled
+         text with the ant-typography-disabled class (plus aria-disabled). */
+      &.ant-typography-disabled,
+      &[aria-disabled="true"] {
         color: ${colors2.status.disabled.default} !important;
-        userSelect: none;
+        user-select: none;
         cursor: not-allowed;
       }
-    } 
+    }
 `;
 const Headline = styled(Typography$1.Title)`
   ${({
@@ -62891,6 +62902,16 @@ const useGenesis = () => {
     toast
   };
 };
+const FALLBACK_VARIANT = "body1";
+const warnedVariants = /* @__PURE__ */ new Set();
+const warnUnknownVariant = (variant) => {
+  if (process.env.NODE_ENV === "production" || warnedVariants.has(variant))
+    return;
+  warnedVariants.add(variant);
+  console.warn(
+    `[genesis] Typography received unknown variant "${variant}" — falling back to "${FALLBACK_VARIANT}".`
+  );
+};
 const Typography = ({
   children: children2,
   themeType = TYPE.secondary,
@@ -62907,30 +62928,36 @@ const Typography = ({
   ...rest
 }) => {
   const { theme } = useGenesis();
-  const breakpoint = "wide";
-  if (variant.startsWith("display") || variant.startsWith("heading")) {
-    const level = variant.split("heading")[1] || variant.split("display")[1];
+  const breakpoint = useBreakpoint();
+  const isKnownVariant = !!TYPOGRAPHY_VARIANT[variant] && !!theme.typography[breakpoint]?.[variant];
+  if (!isKnownVariant) warnUnknownVariant(variant);
+  const validVariant = isKnownVariant ? variant : FALLBACK_VARIANT;
+  const variantTokens = theme.typography[breakpoint][validVariant];
+  const resolvedFontSize = fontSize ?? `${variantTokens.fontSize}px`;
+  const resolvedLineHeight = lineHeight ?? variantTokens.lineHeight;
+  const resolvedFontWeight = fontWeight ?? variantTokens.fontWeight;
+  if (validVariant.startsWith("display") || validVariant.startsWith("heading")) {
+    const level = validVariant.split("heading")[1] || validVariant.split("display")[1];
     return /* @__PURE__ */ jsxRuntime.jsx(
       Headline,
       {
         state,
         $themeType: themeType,
-        variant,
+        variant: validVariant,
         color: color2,
         level: Number.parseInt(level),
         $isFullWidth: isFullWidth,
         style: style2,
-        fontSize: fontSize ?? `${theme.typography[breakpoint][variant].fontSize}px`,
-        fontWeight,
+        fontSize: resolvedFontSize,
+        fontWeight: resolvedFontWeight,
         disabled: isDisabled,
-        $letterSpacing: theme.typography[breakpoint][variant].letterSpacing,
-        $lineHeight: lineHeight ?? theme.typography[breakpoint][variant].lineHeight,
+        $letterSpacing: variantTokens.letterSpacing,
+        $lineHeight: resolvedLineHeight,
         ...rest,
         children: children2
       }
     );
   }
-  const validVariant = TYPOGRAPHY_VARIANT[variant] || "body2";
   if (isText) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       Text,
@@ -62942,10 +62969,10 @@ const Typography = ({
         $isFullWidth: isFullWidth,
         style: style2,
         disabled: isDisabled,
-        fontSize: fontSize ?? `${theme.typography[breakpoint][variant].fontSize}px`,
-        fontWeight,
-        $letterSpacing: theme.typography[breakpoint][validVariant].letterSpacing,
-        $lineHeight: lineHeight ?? theme.typography[breakpoint][validVariant].lineHeight,
+        fontSize: resolvedFontSize,
+        fontWeight: resolvedFontWeight,
+        $letterSpacing: variantTokens.letterSpacing,
+        $lineHeight: resolvedLineHeight,
         ...rest,
         children: children2
       }
@@ -62961,10 +62988,10 @@ const Typography = ({
       $isFullWidth: isFullWidth,
       style: style2,
       disabled: isDisabled,
-      fontSize: fontSize ?? `${theme.typography[breakpoint][variant].fontSize}px`,
-      fontWeight,
-      $letterSpacing: theme.typography[breakpoint][validVariant].letterSpacing,
-      $lineHeight: lineHeight ?? theme.typography[breakpoint][validVariant].lineHeight,
+      fontSize: resolvedFontSize,
+      fontWeight: resolvedFontWeight,
+      $letterSpacing: variantTokens.letterSpacing,
+      $lineHeight: resolvedLineHeight,
       ...rest,
       children: children2
     }
@@ -73762,8 +73789,9 @@ function hardBreak(state, node2) {
 function code(state, node2) {
   const value2 = node2.value ? node2.value + "\n" : "";
   const properties = {};
-  if (node2.lang) {
-    properties.className = ["language-" + node2.lang];
+  const language = node2.lang ? node2.lang.split(/\s+/) : [];
+  if (language.length > 0) {
+    properties.className = ["language-" + language[0]];
   }
   let result = {
     type: "element",
@@ -85861,76 +85889,77 @@ const TypographyWideFontSizeDisplay1 = 72;
 const TypographyWideFontSizeDisplay2 = 56;
 const TypographyWideFontSizeDisplay3 = 40;
 const TypographyWideFontSizeHeading1 = 40;
-const TypographyWideFontSizeHeading2 = Size8;
+const TypographyWideFontSizeHeading2 = 32;
 const TypographyMediumFontSizeDisplay1 = 64;
 const TypographyMediumFontSizeDisplay2 = 52;
 const TypographyMediumFontSizeDisplay3 = 40;
 const TypographyMediumFontSizeHeading1 = 40;
-const TypographyMediumFontSizeHeading2 = Size6;
+const TypographyMediumFontSizeHeading2 = 24;
 const TypographyNarrowFontSizeDisplay1 = 48;
 const TypographyNarrowFontSizeDisplay2 = 40;
 const TypographyNarrowFontSizeDisplay3 = 32;
 const TypographyNarrowFontSizeHeading1 = 32;
-const TypographyNarrowFontSizeHeading2 = Size6;
-const TypographyWideFontSizeBody1 = 16;
-const TypographyMediumFontSizeBody1 = 16;
-const TypographyWideFontSizeHeading3 = Size4;
-const TypographyWideFontSizeSubHeading1 = 20;
-const TypographyWideFontSizeSubHeading3 = 14;
-const TypographyWideFontSizeBody2 = 14;
-const TypographyWideFontSizeBody3 = 12;
-const TypographyWideFontSizeBody4 = 12;
+const TypographyNarrowFontSizeHeading2 = 24;
+const TypographyWideFontSizeBody1 = 18;
+const TypographyMediumFontSizeBody1 = 18;
+const TypographyWideFontSizeHeading3 = 16;
+const TypographyWideFontSizeSubHeading1 = 32;
+const TypographyWideFontSizeSubHeading2 = 24;
+const TypographyWideFontSizeSubHeading3 = 16;
+const TypographyWideFontSizeBody2 = 16;
+const TypographyWideFontSizeBody3 = 16;
+const TypographyWideFontSizeBody4 = 14;
 const TypographyWideFontSizeBody5 = 12;
 const TypographyWideFontSizeMessage = 14;
-const TypographyWideFontSizeOverline1 = 12;
-const TypographyWideFontSizeOverline2 = 12;
+const TypographyWideFontSizeOverline1 = 16;
+const TypographyWideFontSizeOverline2 = 14;
 const TypographyWideFontSizeOverline3 = 12;
 const TypographyWideFontSizeLabel1 = 16;
 const TypographyWideFontSizeLabel2 = 14;
-const TypographyWideFontSizeLabel3 = 12;
+const TypographyWideFontSizeLabel3 = 10;
 const TypographyWideFontSizeLink1 = 16;
 const TypographyWideFontSizeLink2 = 14;
 const TypographyWideFontSizeLink3 = 12;
 const TypographyWideFontSizeDigits1 = 96;
 const TypographyWideFontSizeDigits2 = 48;
 const TypographyWideFontSizeDigits3 = 16;
-const TypographyMediumFontSizeHeading3 = Size4;
-const TypographyMediumFontSizeSubHeading1 = 20;
-const TypographyMediumFontSizeSubHeading2 = 16;
-const TypographyMediumFontSizeSubHeading3 = 14;
-const TypographyMediumFontSizeBody2 = 14;
-const TypographyMediumFontSizeBody3 = 12;
-const TypographyMediumFontSizeBody4 = 12;
+const TypographyMediumFontSizeHeading3 = 16;
+const TypographyMediumFontSizeSubHeading1 = 24;
+const TypographyMediumFontSizeSubHeading2 = 20;
+const TypographyMediumFontSizeSubHeading3 = 16;
+const TypographyMediumFontSizeBody2 = 16;
+const TypographyMediumFontSizeBody3 = 16;
+const TypographyMediumFontSizeBody4 = 14;
 const TypographyMediumFontSizeBody5 = 12;
 const TypographyMediumFontSizeMessage = 14;
-const TypographyMediumFontSizeOverline1 = 12;
+const TypographyMediumFontSizeOverline1 = 16;
 const TypographyMediumFontSizeOverline2 = 12;
 const TypographyMediumFontSizeOverline3 = 12;
 const TypographyMediumFontSizeLabel1 = 16;
 const TypographyMediumFontSizeLabel2 = 14;
-const TypographyMediumFontSizeLabel3 = 12;
+const TypographyMediumFontSizeLabel3 = 10;
 const TypographyMediumFontSizeLink1 = 16;
 const TypographyMediumFontSizeLink2 = 14;
 const TypographyMediumFontSizeLink3 = 12;
 const TypographyMediumFontSizeDigits1 = 96;
 const TypographyMediumFontSizeDigits2 = 48;
 const TypographyMediumFontSizeDigits3 = 16;
-const TypographyNarrowFontSizeHeading3 = Size4;
+const TypographyNarrowFontSizeHeading3 = 16;
 const TypographyNarrowFontSizeSubHeading1 = 20;
 const TypographyNarrowFontSizeSubHeading2 = 16;
 const TypographyNarrowFontSizeSubHeading3 = 14;
-const TypographyNarrowFontSizeBody1 = 12;
+const TypographyNarrowFontSizeBody1 = 16;
 const TypographyNarrowFontSizeBody2 = 14;
-const TypographyNarrowFontSizeBody3 = 16;
-const TypographyNarrowFontSizeBody4 = 18;
-const TypographyNarrowFontSizeBody5 = 20;
+const TypographyNarrowFontSizeBody3 = 14;
+const TypographyNarrowFontSizeBody4 = 12;
+const TypographyNarrowFontSizeBody5 = 10;
 const TypographyNarrowFontSizeMessage = 14;
-const TypographyNarrowFontSizeOverline1 = 12;
+const TypographyNarrowFontSizeOverline1 = 14;
 const TypographyNarrowFontSizeOverline2 = 12;
-const TypographyNarrowFontSizeOverline3 = 12;
+const TypographyNarrowFontSizeOverline3 = 10;
 const TypographyNarrowFontSizeLabel1 = 16;
 const TypographyNarrowFontSizeLabel2 = 14;
-const TypographyNarrowFontSizeLabel3 = 12;
+const TypographyNarrowFontSizeLabel3 = 10;
 const TypographyNarrowFontSizeLink1 = 16;
 const TypographyNarrowFontSizeLink2 = 14;
 const TypographyNarrowFontSizeLink3 = 12;
@@ -86033,85 +86062,85 @@ const sizing = {
 const wideTypography = {
   display1: {
     fontSize: TypographyWideFontSizeDisplay1,
-    lineHeight: "3.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
+    lineHeight: "72px",
+    fontWeight: 600,
+    letterSpacing: "-0.02em"
   },
   display2: {
     fontSize: TypographyWideFontSizeDisplay2,
-    lineHeight: "3rem",
-    fontWeight: 700,
-    letterSpacing: "0"
+    lineHeight: "56px",
+    fontWeight: 600,
+    letterSpacing: "-0.02em"
   },
   display3: {
     fontSize: TypographyWideFontSizeDisplay3,
-    lineHeight: "2.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
+    lineHeight: "40px",
+    fontWeight: 600,
+    letterSpacing: "-0.02em"
   },
   heading1: {
     fontSize: TypographyWideFontSizeHeading1,
-    lineHeight: "2rem",
+    lineHeight: "48px",
     fontWeight: 700,
     letterSpacing: "0"
   },
   heading2: {
     fontSize: TypographyWideFontSizeHeading2,
-    lineHeight: "1.75rem",
+    lineHeight: "40px",
     fontWeight: 700,
     letterSpacing: "0"
   },
   heading3: {
     fontSize: TypographyWideFontSizeHeading3,
-    lineHeight: "1.5rem",
+    lineHeight: "16px",
     fontWeight: 700,
     letterSpacing: "0"
   },
   subHeading1: {
     fontSize: TypographyWideFontSizeSubHeading1,
-    lineHeight: "1.25rem",
-    fontWeight: 600,
+    lineHeight: "40px",
+    fontWeight: 400,
     letterSpacing: "0"
   },
   subHeading2: {
-    fontSize: "24px",
+    fontSize: TypographyWideFontSizeSubHeading2,
     lineHeight: "32px",
     fontWeight: 400,
     letterSpacing: "0"
   },
   subHeading3: {
     fontSize: TypographyWideFontSizeSubHeading3,
-    lineHeight: "1rem",
-    fontWeight: 600,
+    lineHeight: "24px",
+    fontWeight: 400,
     letterSpacing: "0"
   },
   body1: {
     fontSize: TypographyWideFontSizeBody1,
-    lineHeight: "1.5rem",
+    lineHeight: "32px",
     fontWeight: 400,
     letterSpacing: "0"
   },
   body2: {
     fontSize: TypographyWideFontSizeBody2,
-    lineHeight: "1.25rem",
+    lineHeight: "29px",
     fontWeight: 400,
     letterSpacing: "0"
   },
   body3: {
     fontSize: TypographyWideFontSizeBody3,
-    lineHeight: "1rem",
-    fontWeight: 400,
+    lineHeight: "29px",
+    fontWeight: 700,
     letterSpacing: "0"
   },
   body4: {
     fontSize: TypographyWideFontSizeBody4,
-    lineHeight: "0.875rem",
+    lineHeight: "27px",
     fontWeight: 400,
     letterSpacing: "0"
   },
   body5: {
     fontSize: TypographyWideFontSizeBody5,
-    lineHeight: "0.75rem",
+    lineHeight: "23px",
     fontWeight: 400,
     letterSpacing: "0"
   },
@@ -86123,73 +86152,73 @@ const wideTypography = {
   },
   overline1: {
     fontSize: TypographyWideFontSizeOverline1,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
+    lineHeight: "16px",
+    fontWeight: 600,
+    letterSpacing: "-0.01em"
   },
   overline2: {
     fontSize: TypographyWideFontSizeOverline2,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
+    lineHeight: "14px",
+    fontWeight: 600,
+    letterSpacing: "-0.01em"
   },
   overline3: {
     fontSize: TypographyWideFontSizeOverline3,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
+    lineHeight: "12px",
+    fontWeight: 600,
+    letterSpacing: "-0.01em"
   },
   label1: {
     fontSize: TypographyWideFontSizeLabel1,
-    lineHeight: "1rem",
+    lineHeight: "16px",
     fontWeight: 500,
     letterSpacing: "0"
   },
   label2: {
     fontSize: TypographyWideFontSizeLabel2,
-    lineHeight: "1rem",
+    lineHeight: "14px",
     fontWeight: 500,
     letterSpacing: "0"
   },
   label3: {
     fontSize: TypographyWideFontSizeLabel3,
-    lineHeight: "1rem",
+    lineHeight: "10px",
     fontWeight: 500,
     letterSpacing: "0"
   },
   link1: {
     fontSize: TypographyWideFontSizeLink1,
-    lineHeight: "1.5rem",
+    lineHeight: "16px",
     fontWeight: 500,
     letterSpacing: "0"
   },
   link2: {
     fontSize: TypographyWideFontSizeLink2,
-    lineHeight: "1.25rem",
+    lineHeight: "14px",
     fontWeight: 500,
     letterSpacing: "0"
   },
   link3: {
     fontSize: TypographyWideFontSizeLink3,
-    lineHeight: "1rem",
+    lineHeight: "12px",
     fontWeight: 500,
     letterSpacing: "0"
   },
   digits1: {
     fontSize: TypographyWideFontSizeDigits1,
-    lineHeight: "3.5rem",
+    lineHeight: "96px",
     fontWeight: 700,
     letterSpacing: "0"
   },
   digits2: {
     fontSize: TypographyWideFontSizeDigits2,
-    lineHeight: "3rem",
+    lineHeight: "48px",
     fontWeight: 700,
     letterSpacing: "0"
   },
   digits3: {
     fontSize: TypographyWideFontSizeDigits3,
-    lineHeight: "2.5rem",
+    lineHeight: "16px",
     fontWeight: 700,
     letterSpacing: "0"
   }
@@ -86197,85 +86226,85 @@ const wideTypography = {
 const mediumTypography = {
   display1: {
     fontSize: TypographyMediumFontSizeDisplay1,
-    lineHeight: "3.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
+    lineHeight: "64px",
+    fontWeight: 600,
+    letterSpacing: "-0.02em"
   },
   display2: {
     fontSize: TypographyMediumFontSizeDisplay2,
-    lineHeight: "3rem",
-    fontWeight: 700,
-    letterSpacing: "0"
+    lineHeight: "52px",
+    fontWeight: 600,
+    letterSpacing: "-0.02em"
   },
   display3: {
     fontSize: TypographyMediumFontSizeDisplay3,
-    lineHeight: "2.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
+    lineHeight: "40px",
+    fontWeight: 600,
+    letterSpacing: "-0.02em"
   },
   heading1: {
     fontSize: TypographyMediumFontSizeHeading1,
-    lineHeight: "2rem",
+    lineHeight: "44px",
     fontWeight: 700,
     letterSpacing: "0"
   },
   heading2: {
     fontSize: TypographyMediumFontSizeHeading2,
-    lineHeight: "1.75rem",
+    lineHeight: "32px",
     fontWeight: 700,
     letterSpacing: "0"
   },
   heading3: {
     fontSize: TypographyMediumFontSizeHeading3,
-    lineHeight: "1.5rem",
+    lineHeight: "16px",
     fontWeight: 700,
     letterSpacing: "0"
   },
   subHeading1: {
     fontSize: TypographyMediumFontSizeSubHeading1,
-    lineHeight: "1.25rem",
-    fontWeight: 600,
+    lineHeight: "32px",
+    fontWeight: 400,
     letterSpacing: "0"
   },
   subHeading2: {
     fontSize: TypographyMediumFontSizeSubHeading2,
-    lineHeight: "1.25rem",
-    fontWeight: 600,
+    lineHeight: "24px",
+    fontWeight: 400,
     letterSpacing: "0"
   },
   subHeading3: {
     fontSize: TypographyMediumFontSizeSubHeading3,
-    lineHeight: "1rem",
-    fontWeight: 600,
+    lineHeight: "24px",
+    fontWeight: 400,
     letterSpacing: "0"
   },
   body1: {
     fontSize: TypographyMediumFontSizeBody1,
-    lineHeight: "1.5rem",
+    lineHeight: "32px",
     fontWeight: 400,
     letterSpacing: "0"
   },
   body2: {
     fontSize: TypographyMediumFontSizeBody2,
-    lineHeight: "1.25rem",
+    lineHeight: "29px",
     fontWeight: 400,
     letterSpacing: "0"
   },
   body3: {
     fontSize: TypographyMediumFontSizeBody3,
-    lineHeight: "1rem",
-    fontWeight: 400,
+    lineHeight: "29px",
+    fontWeight: 700,
     letterSpacing: "0"
   },
   body4: {
     fontSize: TypographyMediumFontSizeBody4,
-    lineHeight: "0.875rem",
+    lineHeight: "27px",
     fontWeight: 400,
     letterSpacing: "0"
   },
   body5: {
     fontSize: TypographyMediumFontSizeBody5,
-    lineHeight: "0.75rem",
+    lineHeight: "23px",
     fontWeight: 400,
     letterSpacing: "0"
   },
@@ -86287,73 +86316,73 @@ const mediumTypography = {
   },
   overline1: {
     fontSize: TypographyMediumFontSizeOverline1,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
+    lineHeight: "16px",
+    fontWeight: 600,
+    letterSpacing: "-0.01em"
   },
   overline2: {
     fontSize: TypographyMediumFontSizeOverline2,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
+    lineHeight: "12px",
+    fontWeight: 600,
+    letterSpacing: "-0.01em"
   },
   overline3: {
     fontSize: TypographyMediumFontSizeOverline3,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
+    lineHeight: "12px",
+    fontWeight: 600,
+    letterSpacing: "-0.01em"
   },
   label1: {
     fontSize: TypographyMediumFontSizeLabel1,
-    lineHeight: "1rem",
+    lineHeight: "16px",
     fontWeight: 500,
     letterSpacing: "0"
   },
   label2: {
     fontSize: TypographyMediumFontSizeLabel2,
-    lineHeight: "1rem",
+    lineHeight: "14px",
     fontWeight: 500,
     letterSpacing: "0"
   },
   label3: {
     fontSize: TypographyMediumFontSizeLabel3,
-    lineHeight: "1rem",
+    lineHeight: "10px",
     fontWeight: 500,
     letterSpacing: "0"
   },
   link1: {
     fontSize: TypographyMediumFontSizeLink1,
-    lineHeight: "1.5rem",
+    lineHeight: "16px",
     fontWeight: 500,
     letterSpacing: "0"
   },
   link2: {
     fontSize: TypographyMediumFontSizeLink2,
-    lineHeight: "1.25rem",
+    lineHeight: "14px",
     fontWeight: 500,
     letterSpacing: "0"
   },
   link3: {
     fontSize: TypographyMediumFontSizeLink3,
-    lineHeight: "1rem",
+    lineHeight: "12px",
     fontWeight: 500,
     letterSpacing: "0"
   },
   digits1: {
     fontSize: TypographyMediumFontSizeDigits1,
-    lineHeight: "3.5rem",
+    lineHeight: "96px",
     fontWeight: 700,
     letterSpacing: "0"
   },
   digits2: {
     fontSize: TypographyMediumFontSizeDigits2,
-    lineHeight: "3rem",
+    lineHeight: "48px",
     fontWeight: 700,
     letterSpacing: "0"
   },
   digits3: {
     fontSize: TypographyMediumFontSizeDigits3,
-    lineHeight: "2.5rem",
+    lineHeight: "16px",
     fontWeight: 700,
     letterSpacing: "0"
   }
@@ -86361,85 +86390,85 @@ const mediumTypography = {
 const narrowTypography = {
   display1: {
     fontSize: TypographyNarrowFontSizeDisplay1,
-    lineHeight: "3.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
+    lineHeight: "48px",
+    fontWeight: 600,
+    letterSpacing: "-0.02em"
   },
   display2: {
     fontSize: TypographyNarrowFontSizeDisplay2,
-    lineHeight: "3rem",
-    fontWeight: 700,
-    letterSpacing: "0"
+    lineHeight: "40px",
+    fontWeight: 600,
+    letterSpacing: "-0.02em"
   },
   display3: {
     fontSize: TypographyNarrowFontSizeDisplay3,
-    lineHeight: "2.5rem",
-    fontWeight: 700,
-    letterSpacing: "0"
+    lineHeight: "32px",
+    fontWeight: 600,
+    letterSpacing: "-0.02em"
   },
   heading1: {
     fontSize: TypographyNarrowFontSizeHeading1,
-    lineHeight: "2rem",
+    lineHeight: "32px",
     fontWeight: 700,
     letterSpacing: "0"
   },
   heading2: {
     fontSize: TypographyNarrowFontSizeHeading2,
-    lineHeight: "1.75rem",
+    lineHeight: "32px",
     fontWeight: 700,
     letterSpacing: "0"
   },
   heading3: {
     fontSize: TypographyNarrowFontSizeHeading3,
-    lineHeight: "1.5rem",
+    lineHeight: "16px",
     fontWeight: 700,
     letterSpacing: "0"
   },
   subHeading1: {
     fontSize: TypographyNarrowFontSizeSubHeading1,
-    lineHeight: "1.25rem",
-    fontWeight: 600,
+    lineHeight: "24px",
+    fontWeight: 400,
     letterSpacing: "0"
   },
   subHeading2: {
     fontSize: TypographyNarrowFontSizeSubHeading2,
-    lineHeight: "1.25rem",
-    fontWeight: 600,
+    lineHeight: "20px",
+    fontWeight: 400,
     letterSpacing: "0"
   },
   subHeading3: {
     fontSize: TypographyNarrowFontSizeSubHeading3,
-    lineHeight: "1rem",
-    fontWeight: 600,
+    lineHeight: "24px",
+    fontWeight: 400,
     letterSpacing: "0"
   },
   body1: {
     fontSize: TypographyNarrowFontSizeBody1,
-    lineHeight: "1.5rem",
+    lineHeight: "29px",
     fontWeight: 400,
     letterSpacing: "0"
   },
   body2: {
     fontSize: TypographyNarrowFontSizeBody2,
-    lineHeight: "1.25rem",
+    lineHeight: "27px",
     fontWeight: 400,
     letterSpacing: "0"
   },
   body3: {
     fontSize: TypographyNarrowFontSizeBody3,
-    lineHeight: "1rem",
-    fontWeight: 400,
+    lineHeight: "27px",
+    fontWeight: 700,
     letterSpacing: "0"
   },
   body4: {
     fontSize: TypographyNarrowFontSizeBody4,
-    lineHeight: "0.875rem",
+    lineHeight: "23px",
     fontWeight: 400,
     letterSpacing: "0"
   },
   body5: {
     fontSize: TypographyNarrowFontSizeBody5,
-    lineHeight: "0.75rem",
+    lineHeight: "19px",
     fontWeight: 400,
     letterSpacing: "0"
   },
@@ -86451,73 +86480,73 @@ const narrowTypography = {
   },
   overline1: {
     fontSize: TypographyNarrowFontSizeOverline1,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
+    lineHeight: "14px",
+    fontWeight: 600,
+    letterSpacing: "-0.01em"
   },
   overline2: {
     fontSize: TypographyNarrowFontSizeOverline2,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
+    lineHeight: "12px",
+    fontWeight: 600,
+    letterSpacing: "-0.01em"
   },
   overline3: {
     fontSize: TypographyNarrowFontSizeOverline3,
-    lineHeight: "0.75rem",
-    fontWeight: 500,
-    letterSpacing: "0"
+    lineHeight: "10px",
+    fontWeight: 600,
+    letterSpacing: "-0.01em"
   },
   label1: {
     fontSize: TypographyNarrowFontSizeLabel1,
-    lineHeight: "1rem",
+    lineHeight: "16px",
     fontWeight: 500,
     letterSpacing: "0"
   },
   label2: {
     fontSize: TypographyNarrowFontSizeLabel2,
-    lineHeight: "1rem",
+    lineHeight: "14px",
     fontWeight: 500,
     letterSpacing: "0"
   },
   label3: {
     fontSize: TypographyNarrowFontSizeLabel3,
-    lineHeight: "1rem",
+    lineHeight: "10px",
     fontWeight: 500,
     letterSpacing: "0"
   },
   link1: {
     fontSize: TypographyNarrowFontSizeLink1,
-    lineHeight: "1.5rem",
+    lineHeight: "16px",
     fontWeight: 500,
     letterSpacing: "0"
   },
   link2: {
     fontSize: TypographyNarrowFontSizeLink2,
-    lineHeight: "1.25rem",
+    lineHeight: "14px",
     fontWeight: 500,
     letterSpacing: "0"
   },
   link3: {
     fontSize: TypographyNarrowFontSizeLink3,
-    lineHeight: "1rem",
+    lineHeight: "12px",
     fontWeight: 500,
     letterSpacing: "0"
   },
   digits1: {
     fontSize: TypographyNarrowFontSizeDigits1,
-    lineHeight: "3.5rem",
+    lineHeight: "96px",
     fontWeight: 700,
     letterSpacing: "0"
   },
   digits2: {
     fontSize: TypographyNarrowFontSizeDigits2,
-    lineHeight: "3rem",
+    lineHeight: "48px",
     fontWeight: 700,
     letterSpacing: "0"
   },
   digits3: {
     fontSize: TypographyNarrowFontSizeDigits3,
-    lineHeight: "2.5rem",
+    lineHeight: "16px",
     fontWeight: 700,
     letterSpacing: "0"
   }