@ornikar/kitt-universal 19.0.2 → 20.0.0

package/dist/index-node-18.18.cjs.web.js

@@ -820,7 +820,8 @@ const datePicker = {
 };
 
 const calcLineHeight = (fontSize, lineHeightMultiplier) => Math.round(fontSize * lineHeightMultiplier);
-const createTypographyTypeConfig = (lineHeightMultiplierBaseAndSmall, baseAndSmallFontSize, mediumAndWideFontSize = baseAndSmallFontSize, lineHeightMultiplierMediumAndWide = lineHeightMultiplierBaseAndSmall) => ({
+/** @deprecated legacy typography type config is deprecated. */
+const createLegacyTypographyTypeConfig = (lineHeightMultiplierBaseAndSmall, baseAndSmallFontSize, mediumAndWideFontSize = baseAndSmallFontSize, lineHeightMultiplierMediumAndWide = lineHeightMultiplierBaseAndSmall) => ({
   baseAndSmall: {
     fontSize: baseAndSmallFontSize,
     lineHeight: calcLineHeight(baseAndSmallFontSize, lineHeightMultiplierBaseAndSmall)
@@ -830,6 +831,16 @@ const createTypographyTypeConfig = (lineHeightMultiplierBaseAndSmall, baseAndSma
     lineHeight: calcLineHeight(mediumAndWideFontSize, lineHeightMultiplierMediumAndWide)
   }
 });
+const createTypographyConfig = (fontSize, lineHeightMultiplier) => {
+  const config = {
+    fontSize,
+    lineHeight: calcLineHeight(fontSize, lineHeightMultiplier)
+  };
+  return {
+    baseAndSmall: config,
+    mediumAndWide: config
+  };
+};
 const typography = {
   colors: {
     black: colors.black,
@@ -846,7 +857,10 @@ const typography = {
     warning: colors.warning
   },
   types: {
-    headers: {
+    get header() {
+      throw new Error('typography.types.header is deprecated, use typography.type.headings instead');
+    },
+    headings: {
       fontFamily: {
         native: {
           regular: 'Moderat-Black',
@@ -863,19 +877,26 @@ const typography = {
       },
       fontStyle: 'normal',
       configs: {
-        // also known as xxlarge
-        header1: createTypographyTypeConfig(1.1, 40, 56),
-        // also known as xlarge
-        header2: createTypographyTypeConfig(1.2, 32, 48, 1.1),
-        // also known as medium
-        header3: createTypographyTypeConfig(1.2, 24, 40, 1.1),
-        // also known as xsmall
-        header4: createTypographyTypeConfig(1.3, 18, 24, 1.2),
-        // also known as xxsmall
-        header5: createTypographyTypeConfig(1.3, 18, 18)
+        /* legacy */
+        header1: createLegacyTypographyTypeConfig(1.1, 40, 56),
+        header2: createLegacyTypographyTypeConfig(1.2, 32, 48, 1.1),
+        header3: createLegacyTypographyTypeConfig(1.2, 24, 40, 1.1),
+        header4: createLegacyTypographyTypeConfig(1.3, 18, 24, 1.2),
+        header5: createLegacyTypographyTypeConfig(1.3, 18, 18),
+        /* latest */
+        'heading-xxl': createTypographyConfig(56, 1.1),
+        'heading-xl': createTypographyConfig(48, 1.1),
+        'heading-l': createTypographyConfig(40, 1.1),
+        'heading-m': createTypographyConfig(32, 1.2),
+        'heading-s': createTypographyConfig(24, 1.2),
+        'heading-xs': createTypographyConfig(18, 1.3),
+        'heading-xxs': createTypographyConfig(16, 1.3)
       }
     },
-    'headers-impact': {
+    get 'headers-impact'() {
+      throw new Error('typography.types.headers-impact is deprecated, use typography.type.headings-impact instead');
+    },
+    'headings-impact': {
       fontFamily: {
         native: {
           regular: 'Transducer-Black',
@@ -889,14 +910,24 @@ const typography = {
       fontWeight: 900,
       fontStyle: 'normal',
       configs: {
-        'header-impact-xxl': createTypographyTypeConfig(1.2, 56, 56),
-        'header-impact-xl': createTypographyTypeConfig(1.2, 48, 48),
-        'header-impact-l': createTypographyTypeConfig(1.2, 40, 40),
-        'header-impact-m': createTypographyTypeConfig(1.2, 32, 32),
-        'header-impact-s': createTypographyTypeConfig(1.2, 24, 24),
-        'header-impact-xs': createTypographyTypeConfig(1.2, 18, 18),
-        'header-impact-xxs': createTypographyTypeConfig(1.2, 16, 16),
-        'header-impact-xxxs': createTypographyTypeConfig(1.2, 14, 14)
+        /* legacy */
+        'header-impact-xxl': createLegacyTypographyTypeConfig(1.2, 56, 56),
+        'header-impact-xl': createLegacyTypographyTypeConfig(1.2, 48, 48),
+        'header-impact-l': createLegacyTypographyTypeConfig(1.2, 40, 40),
+        'header-impact-m': createLegacyTypographyTypeConfig(1.2, 32, 32),
+        'header-impact-s': createLegacyTypographyTypeConfig(1.2, 24, 24),
+        'header-impact-xs': createLegacyTypographyTypeConfig(1.2, 18, 18),
+        'header-impact-xxs': createLegacyTypographyTypeConfig(1.2, 16, 16),
+        'header-impact-xxxs': createLegacyTypographyTypeConfig(1.2, 14, 14),
+        /* latest */
+        'heading-impact-xxl': createTypographyConfig(56, 1.2),
+        'heading-impact-xl': createTypographyConfig(48, 1.2),
+        'heading-impact-l': createTypographyConfig(40, 1.2),
+        'heading-impact-m': createTypographyConfig(32, 1.2),
+        'heading-impact-s': createTypographyConfig(24, 1.2),
+        'heading-impact-xs': createTypographyConfig(18, 1.2),
+        'heading-impact-xxs': createTypographyConfig(16, 1.2),
+        'heading-impact-xxxs': createTypographyConfig(14, 1.2)
       }
     },
     bodies: {
@@ -919,11 +950,18 @@ const typography = {
         bold: 'normal'
       },
       configs: {
-        'body-large': createTypographyTypeConfig(1.4, 18, 24),
-        'body-medium': createTypographyTypeConfig(1.4, 18, 18),
-        body: createTypographyTypeConfig(1.4, 16, 16),
-        'body-small': createTypographyTypeConfig(1.4, 14, 14),
-        'body-xsmall': createTypographyTypeConfig(1.4, 12, 12)
+        /* legacy */
+        'body-large': createLegacyTypographyTypeConfig(1.4, 18, 24),
+        'body-medium': createLegacyTypographyTypeConfig(1.4, 18, 18),
+        body: createLegacyTypographyTypeConfig(1.4, 16, 16),
+        'body-small': createLegacyTypographyTypeConfig(1.4, 14, 14),
+        'body-xsmall': createLegacyTypographyTypeConfig(1.4, 12, 12),
+        /* latest */
+        'body-xl': createTypographyConfig(24, 1.4),
+        'body-l': createTypographyConfig(18, 1.4),
+        'body-m': createTypographyConfig(16, 1.4),
+        'body-s': createTypographyConfig(14, 1.4),
+        'body-xs': createTypographyConfig(12, 1.4)
       }
     }
   },
@@ -1883,11 +1921,11 @@ function getTypographyColorValue(colorName) {
   return colorName;
 }
 
-const isTypeHeader = type => type.startsWith('header');
-const isTypeHeaderImpact = type => type.startsWith('header-impact');
+const isTypeHeadings = type => type.startsWith('header') || type.startsWith('heading');
+const isTypeHeadingsImpact = type => type.startsWith('heading-impact') || type.startsWith('header-impact');
 const getTypographyFamily = type => {
-  if (isTypeHeaderImpact(type)) return 'headers-impact';
-  if (isTypeHeader(type)) return 'headers';
+  if (isTypeHeadingsImpact(type)) return 'headings-impact';
+  if (isTypeHeadings(type)) return 'headings';
   return 'bodies';
 };
 const getTypographyFamilyWithAncestorValue = (type, typographyFamilyInContext) => {
@@ -1953,8 +1991,8 @@ function Typography({
   const baseOrDefaultToBody = hasTypographyAncestor ? type.base : type.base ?? 'body';
   const typographyFamily = getTypographyFamilyWithAncestorValue(baseOrDefaultToBody, typographyFamilyInContext);
 
-  // force bold for headers, default to regular for bodies
-  const nonNullableVariant = variant ?? (typographyFamily === 'headers' || typographyFamily === 'headers-impact' ? 'bold' : 'regular');
+  // force bold for headings, default to regular for bodies
+  const nonNullableVariant = variant ?? (typographyFamily === 'headings' || typographyFamily === 'headings-impact' ? 'bold' : 'regular');
   const fontSizeForNativeBase = createNativeBaseFontSize({
     ...type,
     base: baseOrDefaultToBody
@@ -7349,96 +7387,184 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
     },
     fontSizes: {
       baseAndSmall: {
-        header1: `${theme.typography.types.headers.configs.header1.baseAndSmall.fontSize}px`,
-        header2: `${theme.typography.types.headers.configs.header2.baseAndSmall.fontSize}px`,
-        header3: `${theme.typography.types.headers.configs.header3.baseAndSmall.fontSize}px`,
-        header4: `${theme.typography.types.headers.configs.header4.baseAndSmall.fontSize}px`,
-        header5: `${theme.typography.types.headers.configs.header5.baseAndSmall.fontSize}px`,
+        /* legacy */
+        header1: `${theme.typography.types.headings.configs.header1.baseAndSmall.fontSize}px`,
+        header2: `${theme.typography.types.headings.configs.header2.baseAndSmall.fontSize}px`,
+        header3: `${theme.typography.types.headings.configs.header3.baseAndSmall.fontSize}px`,
+        header4: `${theme.typography.types.headings.configs.header4.baseAndSmall.fontSize}px`,
+        header5: `${theme.typography.types.headings.configs.header5.baseAndSmall.fontSize}px`,
         'body-large': `${theme.typography.types.bodies.configs['body-large'].baseAndSmall.fontSize}px`,
         'body-medium': `${theme.typography.types.bodies.configs['body-medium'].baseAndSmall.fontSize}px`,
         body: `${theme.typography.types.bodies.configs.body.baseAndSmall.fontSize}px`,
         'body-small': `${theme.typography.types.bodies.configs['body-small'].baseAndSmall.fontSize}px`,
         'body-xsmall': `${theme.typography.types.bodies.configs['body-xsmall'].baseAndSmall.fontSize}px`,
-        'header-impact-xxl': `${theme.typography.types['headers-impact'].configs['header-impact-xxl'].baseAndSmall.fontSize}px`,
-        'header-impact-xl': `${theme.typography.types['headers-impact'].configs['header-impact-xl'].baseAndSmall.fontSize}px`,
-        'header-impact-l': `${theme.typography.types['headers-impact'].configs['header-impact-l'].baseAndSmall.fontSize}px`,
-        'header-impact-m': `${theme.typography.types['headers-impact'].configs['header-impact-m'].baseAndSmall.fontSize}px`,
-        'header-impact-s': `${theme.typography.types['headers-impact'].configs['header-impact-s'].baseAndSmall.fontSize}px`,
-        'header-impact-xs': `${theme.typography.types['headers-impact'].configs['header-impact-xs'].baseAndSmall.fontSize}px`,
-        'header-impact-xxs': `${theme.typography.types['headers-impact'].configs['header-impact-xxs'].baseAndSmall.fontSize}px`,
-        'header-impact-xxxs': `${theme.typography.types['headers-impact'].configs['header-impact-xxxs'].baseAndSmall.fontSize}px`
+        'header-impact-xxl': `${theme.typography.types['headings-impact'].configs['header-impact-xxl'].baseAndSmall.fontSize}px`,
+        'header-impact-xl': `${theme.typography.types['headings-impact'].configs['header-impact-xl'].baseAndSmall.fontSize}px`,
+        'header-impact-l': `${theme.typography.types['headings-impact'].configs['header-impact-l'].baseAndSmall.fontSize}px`,
+        'header-impact-m': `${theme.typography.types['headings-impact'].configs['header-impact-m'].baseAndSmall.fontSize}px`,
+        'header-impact-s': `${theme.typography.types['headings-impact'].configs['header-impact-s'].baseAndSmall.fontSize}px`,
+        'header-impact-xs': `${theme.typography.types['headings-impact'].configs['header-impact-xs'].baseAndSmall.fontSize}px`,
+        'header-impact-xxs': `${theme.typography.types['headings-impact'].configs['header-impact-xxs'].baseAndSmall.fontSize}px`,
+        'header-impact-xxxs': `${theme.typography.types['headings-impact'].configs['header-impact-xxxs'].baseAndSmall.fontSize}px`,
+        /* latest */
+        'heading-impact-xxl': `${theme.typography.types['headings-impact'].configs['heading-impact-xxl'].baseAndSmall.fontSize}px`,
+        'heading-impact-xl': `${theme.typography.types['headings-impact'].configs['heading-impact-xl'].baseAndSmall.fontSize}px`,
+        'heading-impact-l': `${theme.typography.types['headings-impact'].configs['heading-impact-l'].baseAndSmall.fontSize}px`,
+        'heading-impact-m': `${theme.typography.types['headings-impact'].configs['heading-impact-m'].baseAndSmall.fontSize}px`,
+        'heading-impact-s': `${theme.typography.types['headings-impact'].configs['heading-impact-s'].baseAndSmall.fontSize}px`,
+        'heading-impact-xs': `${theme.typography.types['headings-impact'].configs['heading-impact-xs'].baseAndSmall.fontSize}px`,
+        'heading-impact-xxs': `${theme.typography.types['headings-impact'].configs['heading-impact-xxs'].baseAndSmall.fontSize}px`,
+        'heading-impact-xxxs': `${theme.typography.types['headings-impact'].configs['heading-impact-xxxs'].baseAndSmall.fontSize}px`,
+        'heading-xxl': `${theme.typography.types.headings.configs['heading-xxl'].baseAndSmall.fontSize}px`,
+        'heading-xl': `${theme.typography.types.headings.configs['heading-xl'].baseAndSmall.fontSize}px`,
+        'heading-l': `${theme.typography.types.headings.configs['heading-l'].baseAndSmall.fontSize}px`,
+        'heading-m': `${theme.typography.types.headings.configs['heading-m'].baseAndSmall.fontSize}px`,
+        'heading-s': `${theme.typography.types.headings.configs['heading-s'].baseAndSmall.fontSize}px`,
+        'heading-xs': `${theme.typography.types.headings.configs['heading-xs'].baseAndSmall.fontSize}px`,
+        'heading-xxs': `${theme.typography.types.headings.configs['heading-xxs'].baseAndSmall.fontSize}px`,
+        'body-xl': `${theme.typography.types.bodies.configs['body-xl'].baseAndSmall.fontSize}px`,
+        'body-l': `${theme.typography.types.bodies.configs['body-l'].baseAndSmall.fontSize}px`,
+        'body-m': `${theme.typography.types.bodies.configs['body-m'].baseAndSmall.fontSize}px`,
+        'body-s': `${theme.typography.types.bodies.configs['body-s'].baseAndSmall.fontSize}px`,
+        'body-xs': `${theme.typography.types.bodies.configs['body-xs'].baseAndSmall.fontSize}px`
       },
       mediumAndWide: {
-        header1: `${theme.typography.types.headers.configs.header1.mediumAndWide.fontSize}px`,
-        header2: `${theme.typography.types.headers.configs.header2.mediumAndWide.fontSize}px`,
-        header3: `${theme.typography.types.headers.configs.header3.mediumAndWide.fontSize}px`,
-        header4: `${theme.typography.types.headers.configs.header4.mediumAndWide.fontSize}px`,
-        header5: `${theme.typography.types.headers.configs.header5.mediumAndWide.fontSize}px`,
+        /* legacy */
+        header1: `${theme.typography.types.headings.configs.header1.mediumAndWide.fontSize}px`,
+        header2: `${theme.typography.types.headings.configs.header2.mediumAndWide.fontSize}px`,
+        header3: `${theme.typography.types.headings.configs.header3.mediumAndWide.fontSize}px`,
+        header4: `${theme.typography.types.headings.configs.header4.mediumAndWide.fontSize}px`,
+        header5: `${theme.typography.types.headings.configs.header5.mediumAndWide.fontSize}px`,
         'body-large': `${theme.typography.types.bodies.configs['body-large'].mediumAndWide.fontSize}px`,
         'body-medium': `${theme.typography.types.bodies.configs['body-medium'].mediumAndWide.fontSize}px`,
         body: `${theme.typography.types.bodies.configs.body.mediumAndWide.fontSize}px`,
         'body-small': `${theme.typography.types.bodies.configs['body-small'].mediumAndWide.fontSize}px`,
         'body-xsmall': `${theme.typography.types.bodies.configs['body-xsmall'].mediumAndWide.fontSize}px`,
-        'header-impact-xxl': `${theme.typography.types['headers-impact'].configs['header-impact-xxl'].mediumAndWide.fontSize}px`,
-        'header-impact-xl': `${theme.typography.types['headers-impact'].configs['header-impact-xl'].mediumAndWide.fontSize}px`,
-        'header-impact-l': `${theme.typography.types['headers-impact'].configs['header-impact-l'].mediumAndWide.fontSize}px`,
-        'header-impact-m': `${theme.typography.types['headers-impact'].configs['header-impact-m'].mediumAndWide.fontSize}px`,
-        'header-impact-s': `${theme.typography.types['headers-impact'].configs['header-impact-s'].mediumAndWide.fontSize}px`,
-        'header-impact-xs': `${theme.typography.types['headers-impact'].configs['header-impact-xs'].mediumAndWide.fontSize}px`,
-        'header-impact-xxs': `${theme.typography.types['headers-impact'].configs['header-impact-xxs'].mediumAndWide.fontSize}px`,
-        'header-impact-xxxs': `${theme.typography.types['headers-impact'].configs['header-impact-xxxs'].mediumAndWide.fontSize}px`
+        'header-impact-xxl': `${theme.typography.types['headings-impact'].configs['header-impact-xxl'].mediumAndWide.fontSize}px`,
+        'header-impact-xl': `${theme.typography.types['headings-impact'].configs['header-impact-xl'].mediumAndWide.fontSize}px`,
+        'header-impact-l': `${theme.typography.types['headings-impact'].configs['header-impact-l'].mediumAndWide.fontSize}px`,
+        'header-impact-m': `${theme.typography.types['headings-impact'].configs['header-impact-m'].mediumAndWide.fontSize}px`,
+        'header-impact-s': `${theme.typography.types['headings-impact'].configs['header-impact-s'].mediumAndWide.fontSize}px`,
+        'header-impact-xs': `${theme.typography.types['headings-impact'].configs['header-impact-xs'].mediumAndWide.fontSize}px`,
+        'header-impact-xxs': `${theme.typography.types['headings-impact'].configs['header-impact-xxs'].mediumAndWide.fontSize}px`,
+        'header-impact-xxxs': `${theme.typography.types['headings-impact'].configs['header-impact-xxxs'].mediumAndWide.fontSize}px`,
+        /* latest */
+        'heading-impact-xxl': `${theme.typography.types['headings-impact'].configs['heading-impact-xxl'].mediumAndWide.fontSize}px`,
+        'heading-impact-xl': `${theme.typography.types['headings-impact'].configs['heading-impact-xl'].mediumAndWide.fontSize}px`,
+        'heading-impact-l': `${theme.typography.types['headings-impact'].configs['heading-impact-l'].mediumAndWide.fontSize}px`,
+        'heading-impact-m': `${theme.typography.types['headings-impact'].configs['heading-impact-m'].mediumAndWide.fontSize}px`,
+        'heading-impact-s': `${theme.typography.types['headings-impact'].configs['heading-impact-s'].mediumAndWide.fontSize}px`,
+        'heading-impact-xs': `${theme.typography.types['headings-impact'].configs['heading-impact-xs'].mediumAndWide.fontSize}px`,
+        'heading-impact-xxs': `${theme.typography.types['headings-impact'].configs['heading-impact-xxs'].mediumAndWide.fontSize}px`,
+        'heading-impact-xxxs': `${theme.typography.types['headings-impact'].configs['heading-impact-xxxs'].mediumAndWide.fontSize}px`,
+        'heading-xxl': `${theme.typography.types.headings.configs['heading-xxl'].mediumAndWide.fontSize}px`,
+        'heading-xl': `${theme.typography.types.headings.configs['heading-xl'].mediumAndWide.fontSize}px`,
+        'heading-l': `${theme.typography.types.headings.configs['heading-l'].mediumAndWide.fontSize}px`,
+        'heading-m': `${theme.typography.types.headings.configs['heading-m'].mediumAndWide.fontSize}px`,
+        'heading-s': `${theme.typography.types.headings.configs['heading-s'].mediumAndWide.fontSize}px`,
+        'heading-xs': `${theme.typography.types.headings.configs['heading-xs'].mediumAndWide.fontSize}px`,
+        'heading-xxs': `${theme.typography.types.headings.configs['heading-xxs'].mediumAndWide.fontSize}px`,
+        'body-xl': `${theme.typography.types.bodies.configs['body-xl'].mediumAndWide.fontSize}px`,
+        'body-l': `${theme.typography.types.bodies.configs['body-l'].mediumAndWide.fontSize}px`,
+        'body-m': `${theme.typography.types.bodies.configs['body-m'].mediumAndWide.fontSize}px`,
+        'body-s': `${theme.typography.types.bodies.configs['body-s'].mediumAndWide.fontSize}px`,
+        'body-xs': `${theme.typography.types.bodies.configs['body-xs'].mediumAndWide.fontSize}px`
       }
     },
     lineHeights: {
       baseAndSmall: {
-        header1: theme.typography.types.headers.configs.header1.baseAndSmall.lineHeight,
-        header2: theme.typography.types.headers.configs.header2.baseAndSmall.lineHeight,
-        header3: theme.typography.types.headers.configs.header3.baseAndSmall.lineHeight,
-        header4: theme.typography.types.headers.configs.header4.baseAndSmall.lineHeight,
-        header5: theme.typography.types.headers.configs.header5.baseAndSmall.lineHeight,
+        /* legacy */
+        header1: theme.typography.types.headings.configs.header1.baseAndSmall.lineHeight,
+        header2: theme.typography.types.headings.configs.header2.baseAndSmall.lineHeight,
+        header3: theme.typography.types.headings.configs.header3.baseAndSmall.lineHeight,
+        header4: theme.typography.types.headings.configs.header4.baseAndSmall.lineHeight,
+        header5: theme.typography.types.headings.configs.header5.baseAndSmall.lineHeight,
         'body-large': theme.typography.types.bodies.configs['body-large'].baseAndSmall.lineHeight,
         'body-medium': theme.typography.types.bodies.configs['body-medium'].baseAndSmall.lineHeight,
         body: theme.typography.types.bodies.configs.body.baseAndSmall.lineHeight,
         'body-small': theme.typography.types.bodies.configs['body-small'].baseAndSmall.lineHeight,
         'body-xsmall': theme.typography.types.bodies.configs['body-xsmall'].baseAndSmall.lineHeight,
-        'header-impact-xxl': theme.typography.types['headers-impact'].configs['header-impact-xxl'].baseAndSmall.lineHeight,
-        'header-impact-xl': theme.typography.types['headers-impact'].configs['header-impact-xl'].baseAndSmall.lineHeight,
-        'header-impact-l': theme.typography.types['headers-impact'].configs['header-impact-l'].baseAndSmall.lineHeight,
-        'header-impact-m': theme.typography.types['headers-impact'].configs['header-impact-m'].baseAndSmall.lineHeight,
-        'header-impact-s': theme.typography.types['headers-impact'].configs['header-impact-s'].baseAndSmall.lineHeight,
-        'header-impact-xs': theme.typography.types['headers-impact'].configs['header-impact-xs'].baseAndSmall.lineHeight,
-        'header-impact-xxs': theme.typography.types['headers-impact'].configs['header-impact-xxs'].baseAndSmall.lineHeight,
-        'header-impact-xxxs': theme.typography.types['headers-impact'].configs['header-impact-xxxs'].baseAndSmall.lineHeight
+        'header-impact-xxl': theme.typography.types['headings-impact'].configs['header-impact-xxl'].baseAndSmall.lineHeight,
+        'header-impact-xl': theme.typography.types['headings-impact'].configs['header-impact-xl'].baseAndSmall.lineHeight,
+        'header-impact-l': theme.typography.types['headings-impact'].configs['header-impact-l'].baseAndSmall.lineHeight,
+        'header-impact-m': theme.typography.types['headings-impact'].configs['header-impact-m'].baseAndSmall.lineHeight,
+        'header-impact-s': theme.typography.types['headings-impact'].configs['header-impact-s'].baseAndSmall.lineHeight,
+        'header-impact-xs': theme.typography.types['headings-impact'].configs['header-impact-xs'].baseAndSmall.lineHeight,
+        'header-impact-xxs': theme.typography.types['headings-impact'].configs['header-impact-xxs'].baseAndSmall.lineHeight,
+        'header-impact-xxxs': theme.typography.types['headings-impact'].configs['header-impact-xxxs'].baseAndSmall.lineHeight,
+        /* latest */
+        'heading-impact-xxl': `${theme.typography.types['headings-impact'].configs['heading-impact-xxl'].baseAndSmall.lineHeight}px`,
+        'heading-impact-xl': `${theme.typography.types['headings-impact'].configs['heading-impact-xl'].baseAndSmall.lineHeight}px`,
+        'heading-impact-l': `${theme.typography.types['headings-impact'].configs['heading-impact-l'].baseAndSmall.lineHeight}px`,
+        'heading-impact-m': `${theme.typography.types['headings-impact'].configs['heading-impact-m'].baseAndSmall.lineHeight}px`,
+        'heading-impact-s': `${theme.typography.types['headings-impact'].configs['heading-impact-s'].baseAndSmall.lineHeight}px`,
+        'heading-impact-xs': `${theme.typography.types['headings-impact'].configs['heading-impact-xs'].baseAndSmall.lineHeight}px`,
+        'heading-impact-xxs': `${theme.typography.types['headings-impact'].configs['heading-impact-xxs'].baseAndSmall.lineHeight}px`,
+        'heading-impact-xxxs': `${theme.typography.types['headings-impact'].configs['heading-impact-xxxs'].baseAndSmall.lineHeight}px`,
+        'heading-xxl': `${theme.typography.types.headings.configs['heading-xxl'].baseAndSmall.lineHeight}px`,
+        'heading-xl': `${theme.typography.types.headings.configs['heading-xl'].baseAndSmall.lineHeight}px`,
+        'heading-l': `${theme.typography.types.headings.configs['heading-l'].baseAndSmall.lineHeight}px`,
+        'heading-m': `${theme.typography.types.headings.configs['heading-m'].baseAndSmall.lineHeight}px`,
+        'heading-s': `${theme.typography.types.headings.configs['heading-s'].baseAndSmall.lineHeight}px`,
+        'heading-xs': `${theme.typography.types.headings.configs['heading-xs'].baseAndSmall.lineHeight}px`,
+        'heading-xxs': `${theme.typography.types.headings.configs['heading-xxs'].baseAndSmall.lineHeight}px`,
+        'body-xl': `${theme.typography.types.bodies.configs['body-xl'].baseAndSmall.lineHeight}px`,
+        'body-l': `${theme.typography.types.bodies.configs['body-l'].baseAndSmall.lineHeight}px`,
+        'body-m': `${theme.typography.types.bodies.configs['body-m'].baseAndSmall.lineHeight}px`,
+        'body-s': `${theme.typography.types.bodies.configs['body-s'].baseAndSmall.lineHeight}px`,
+        'body-xs': `${theme.typography.types.bodies.configs['body-xs'].baseAndSmall.lineHeight}px`
       },
       mediumAndWide: {
-        header1: theme.typography.types.headers.configs.header1.mediumAndWide.lineHeight,
-        header2: theme.typography.types.headers.configs.header2.mediumAndWide.lineHeight,
-        header3: theme.typography.types.headers.configs.header3.mediumAndWide.lineHeight,
-        header4: theme.typography.types.headers.configs.header4.mediumAndWide.lineHeight,
-        header5: theme.typography.types.headers.configs.header5.mediumAndWide.lineHeight,
+        /* legacy */
+        header1: theme.typography.types.headings.configs.header1.mediumAndWide.lineHeight,
+        header2: theme.typography.types.headings.configs.header2.mediumAndWide.lineHeight,
+        header3: theme.typography.types.headings.configs.header3.mediumAndWide.lineHeight,
+        header4: theme.typography.types.headings.configs.header4.mediumAndWide.lineHeight,
+        header5: theme.typography.types.headings.configs.header5.mediumAndWide.lineHeight,
         'body-large': theme.typography.types.bodies.configs['body-large'].mediumAndWide.lineHeight,
         'body-medium': theme.typography.types.bodies.configs['body-medium'].mediumAndWide.lineHeight,
         body: theme.typography.types.bodies.configs.body.mediumAndWide.lineHeight,
         'body-small': theme.typography.types.bodies.configs['body-small'].mediumAndWide.lineHeight,
         'body-xsmall': theme.typography.types.bodies.configs['body-xsmall'].mediumAndWide.lineHeight,
-        'header-impact-xxl': theme.typography.types['headers-impact'].configs['header-impact-xxl'].mediumAndWide.lineHeight,
-        'header-impact-xl': theme.typography.types['headers-impact'].configs['header-impact-xl'].mediumAndWide.lineHeight,
-        'header-impact-l': theme.typography.types['headers-impact'].configs['header-impact-l'].mediumAndWide.lineHeight,
-        'header-impact-m': theme.typography.types['headers-impact'].configs['header-impact-m'].mediumAndWide.lineHeight,
-        'header-impact-s': theme.typography.types['headers-impact'].configs['header-impact-s'].mediumAndWide.lineHeight,
-        'header-impact-xs': theme.typography.types['headers-impact'].configs['header-impact-xs'].mediumAndWide.lineHeight,
-        'header-impact-xxs': theme.typography.types['headers-impact'].configs['header-impact-xxs'].mediumAndWide.lineHeight,
-        'header-impact-xxxs': theme.typography.types['headers-impact'].configs['header-impact-xxxs'].mediumAndWide.lineHeight
+        'header-impact-xxl': theme.typography.types['headings-impact'].configs['header-impact-xxl'].mediumAndWide.lineHeight,
+        'header-impact-xl': theme.typography.types['headings-impact'].configs['header-impact-xl'].mediumAndWide.lineHeight,
+        'header-impact-l': theme.typography.types['headings-impact'].configs['header-impact-l'].mediumAndWide.lineHeight,
+        'header-impact-m': theme.typography.types['headings-impact'].configs['header-impact-m'].mediumAndWide.lineHeight,
+        'header-impact-s': theme.typography.types['headings-impact'].configs['header-impact-s'].mediumAndWide.lineHeight,
+        'header-impact-xs': theme.typography.types['headings-impact'].configs['header-impact-xs'].mediumAndWide.lineHeight,
+        'header-impact-xxs': theme.typography.types['headings-impact'].configs['header-impact-xxs'].mediumAndWide.lineHeight,
+        'header-impact-xxxs': theme.typography.types['headings-impact'].configs['header-impact-xxxs'].mediumAndWide.lineHeight,
+        /* latest */
+        'heading-impact-xxl': `${theme.typography.types['headings-impact'].configs['heading-impact-xxl'].mediumAndWide.lineHeight}px`,
+        'heading-impact-xl': `${theme.typography.types['headings-impact'].configs['heading-impact-xl'].mediumAndWide.lineHeight}px`,
+        'heading-impact-l': `${theme.typography.types['headings-impact'].configs['heading-impact-l'].mediumAndWide.lineHeight}px`,
+        'heading-impact-m': `${theme.typography.types['headings-impact'].configs['heading-impact-m'].mediumAndWide.lineHeight}px`,
+        'heading-impact-s': `${theme.typography.types['headings-impact'].configs['heading-impact-s'].mediumAndWide.lineHeight}px`,
+        'heading-impact-xs': `${theme.typography.types['headings-impact'].configs['heading-impact-xs'].mediumAndWide.lineHeight}px`,
+        'heading-impact-xxs': `${theme.typography.types['headings-impact'].configs['heading-impact-xxs'].mediumAndWide.lineHeight}px`,
+        'heading-impact-xxxs': `${theme.typography.types['headings-impact'].configs['heading-impact-xxxs'].mediumAndWide.lineHeight}px`,
+        'heading-xxl': `${theme.typography.types.headings.configs['heading-xxl'].mediumAndWide.lineHeight}px`,
+        'heading-xl': `${theme.typography.types.headings.configs['heading-xl'].mediumAndWide.lineHeight}px`,
+        'heading-l': `${theme.typography.types.headings.configs['heading-l'].mediumAndWide.lineHeight}px`,
+        'heading-m': `${theme.typography.types.headings.configs['heading-m'].mediumAndWide.lineHeight}px`,
+        'heading-s': `${theme.typography.types.headings.configs['heading-s'].mediumAndWide.lineHeight}px`,
+        'heading-xs': `${theme.typography.types.headings.configs['heading-xs'].mediumAndWide.lineHeight}px`,
+        'heading-xxs': `${theme.typography.types.headings.configs['heading-xxs'].mediumAndWide.lineHeight}px`,
+        'body-xl': `${theme.typography.types.bodies.configs['body-xl'].mediumAndWide.lineHeight}px`,
+        'body-l': `${theme.typography.types.bodies.configs['body-l'].mediumAndWide.lineHeight}px`,
+        'body-m': `${theme.typography.types.bodies.configs['body-m'].mediumAndWide.lineHeight}px`,
+        'body-s': `${theme.typography.types.bodies.configs['body-s'].mediumAndWide.lineHeight}px`,
+        'body-xs': `${theme.typography.types.bodies.configs['body-xs'].mediumAndWide.lineHeight}px`
       }
     },
     fontWeights: {
-      headers: {
-        regular: theme.typography.types.headers.fontWeight.regular,
-        bold: theme.typography.types.headers.fontWeight.bold
+      headings: {
+        regular: theme.typography.types.headings.fontWeight.regular,
+        bold: theme.typography.types.headings.fontWeight.bold
       },
-      'headers-impact': {
-        regular: theme.typography.types['headers-impact'].fontWeight,
-        bold: theme.typography.types['headers-impact'].fontWeight
+      'headings-impact': {
+        regular: theme.typography.types['headings-impact'].fontWeight,
+        bold: theme.typography.types['headings-impact'].fontWeight
       },
       bodies: {
         regular: theme.typography.types.bodies.fontWeight.regular,
@@ -7447,8 +7573,8 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
       }
     },
     fonts: {
-      headers: theme.typography.types.headers.fontFamily.web,
-      'headers-impact': theme.typography.types['headers-impact'].fontFamily.web,
+      headings: theme.typography.types.headings.fontFamily.web,
+      'headings-impact': theme.typography.types['headings-impact'].fontFamily.web,
       bodies: theme.typography.types.bodies.fontFamily.web
     },
     shadows: {