@ornikar/kitt-universal 19.0.2 → 20.0.0

package/dist/index.es.web.js

@@ -828,7 +828,8 @@ var datePicker = {
 var calcLineHeight = function (fontSize, lineHeightMultiplier) {
   return Math.round(fontSize * lineHeightMultiplier);
 };
-var createTypographyTypeConfig = function (lineHeightMultiplierBaseAndSmall, baseAndSmallFontSize) {
+/** @deprecated legacy typography type config is deprecated. */
+var createLegacyTypographyTypeConfig = function (lineHeightMultiplierBaseAndSmall, baseAndSmallFontSize) {
   var mediumAndWideFontSize = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : baseAndSmallFontSize;
   var lineHeightMultiplierMediumAndWide = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : lineHeightMultiplierBaseAndSmall;
   return {
@@ -842,6 +843,16 @@ var createTypographyTypeConfig = function (lineHeightMultiplierBaseAndSmall, bas
     }
   };
 };
+var createTypographyConfig = function (fontSize, lineHeightMultiplier) {
+  var config = {
+    fontSize: fontSize,
+    lineHeight: calcLineHeight(fontSize, lineHeightMultiplier)
+  };
+  return {
+    baseAndSmall: config,
+    mediumAndWide: config
+  };
+};
 var typography = {
   colors: {
     black: colors.black,
@@ -858,7 +869,10 @@ var 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',
@@ -875,19 +889,26 @@ var 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',
@@ -901,14 +922,24 @@ var 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: {
@@ -931,11 +962,18 @@ var 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)
       }
     }
   },
@@ -1900,15 +1938,15 @@ function getTypographyColorValue(colorName) {
   return colorName;
 }
 
-var isTypeHeader = function (type) {
-  return type.startsWith('header');
+var isTypeHeadings = function (type) {
+  return type.startsWith('header') || type.startsWith('heading');
 };
-var isTypeHeaderImpact = function (type) {
-  return type.startsWith('header-impact');
+var isTypeHeadingsImpact = function (type) {
+  return type.startsWith('heading-impact') || type.startsWith('header-impact');
 };
 var getTypographyFamily = function (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';
 };
 var getTypographyFamilyWithAncestorValue = function (type, typographyFamilyInContext) {
@@ -1975,8 +2013,8 @@ function Typography(_ref) {
   var baseOrDefaultToBody = hasTypographyAncestor ? type.base : (_type$base = type.base) !== null && _type$base !== void 0 ? _type$base : 'body';
   var typographyFamily = getTypographyFamilyWithAncestorValue(baseOrDefaultToBody, typographyFamilyInContext);
 
-  // force bold for headers, default to regular for bodies
-  var nonNullableVariant = variant !== null && variant !== void 0 ? variant : typographyFamily === 'headers' || typographyFamily === 'headers-impact' ? 'bold' : 'regular';
+  // force bold for headings, default to regular for bodies
+  var nonNullableVariant = variant !== null && variant !== void 0 ? variant : typographyFamily === 'headings' || typographyFamily === 'headings-impact' ? 'bold' : 'regular';
   var fontSizeForNativeBase = createNativeBaseFontSize(_objectSpread(_objectSpread({}, type), {}, {
     base: baseOrDefaultToBody
   }));
@@ -7462,96 +7500,184 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
     }, appBreakpoints),
     fontSizes: {
       baseAndSmall: {
-        header1: "".concat(theme.typography.types.headers.configs.header1.baseAndSmall.fontSize, "px"),
-        header2: "".concat(theme.typography.types.headers.configs.header2.baseAndSmall.fontSize, "px"),
-        header3: "".concat(theme.typography.types.headers.configs.header3.baseAndSmall.fontSize, "px"),
-        header4: "".concat(theme.typography.types.headers.configs.header4.baseAndSmall.fontSize, "px"),
-        header5: "".concat(theme.typography.types.headers.configs.header5.baseAndSmall.fontSize, "px"),
+        /* legacy */
+        header1: "".concat(theme.typography.types.headings.configs.header1.baseAndSmall.fontSize, "px"),
+        header2: "".concat(theme.typography.types.headings.configs.header2.baseAndSmall.fontSize, "px"),
+        header3: "".concat(theme.typography.types.headings.configs.header3.baseAndSmall.fontSize, "px"),
+        header4: "".concat(theme.typography.types.headings.configs.header4.baseAndSmall.fontSize, "px"),
+        header5: "".concat(theme.typography.types.headings.configs.header5.baseAndSmall.fontSize, "px"),
         'body-large': "".concat(theme.typography.types.bodies.configs['body-large'].baseAndSmall.fontSize, "px"),
         'body-medium': "".concat(theme.typography.types.bodies.configs['body-medium'].baseAndSmall.fontSize, "px"),
         body: "".concat(theme.typography.types.bodies.configs.body.baseAndSmall.fontSize, "px"),
         'body-small': "".concat(theme.typography.types.bodies.configs['body-small'].baseAndSmall.fontSize, "px"),
         'body-xsmall': "".concat(theme.typography.types.bodies.configs['body-xsmall'].baseAndSmall.fontSize, "px"),
-        'header-impact-xxl': "".concat(theme.typography.types['headers-impact'].configs['header-impact-xxl'].baseAndSmall.fontSize, "px"),
-        'header-impact-xl': "".concat(theme.typography.types['headers-impact'].configs['header-impact-xl'].baseAndSmall.fontSize, "px"),
-        'header-impact-l': "".concat(theme.typography.types['headers-impact'].configs['header-impact-l'].baseAndSmall.fontSize, "px"),
-        'header-impact-m': "".concat(theme.typography.types['headers-impact'].configs['header-impact-m'].baseAndSmall.fontSize, "px"),
-        'header-impact-s': "".concat(theme.typography.types['headers-impact'].configs['header-impact-s'].baseAndSmall.fontSize, "px"),
-        'header-impact-xs': "".concat(theme.typography.types['headers-impact'].configs['header-impact-xs'].baseAndSmall.fontSize, "px"),
-        'header-impact-xxs': "".concat(theme.typography.types['headers-impact'].configs['header-impact-xxs'].baseAndSmall.fontSize, "px"),
-        'header-impact-xxxs': "".concat(theme.typography.types['headers-impact'].configs['header-impact-xxxs'].baseAndSmall.fontSize, "px")
+        'header-impact-xxl': "".concat(theme.typography.types['headings-impact'].configs['header-impact-xxl'].baseAndSmall.fontSize, "px"),
+        'header-impact-xl': "".concat(theme.typography.types['headings-impact'].configs['header-impact-xl'].baseAndSmall.fontSize, "px"),
+        'header-impact-l': "".concat(theme.typography.types['headings-impact'].configs['header-impact-l'].baseAndSmall.fontSize, "px"),
+        'header-impact-m': "".concat(theme.typography.types['headings-impact'].configs['header-impact-m'].baseAndSmall.fontSize, "px"),
+        'header-impact-s': "".concat(theme.typography.types['headings-impact'].configs['header-impact-s'].baseAndSmall.fontSize, "px"),
+        'header-impact-xs': "".concat(theme.typography.types['headings-impact'].configs['header-impact-xs'].baseAndSmall.fontSize, "px"),
+        'header-impact-xxs': "".concat(theme.typography.types['headings-impact'].configs['header-impact-xxs'].baseAndSmall.fontSize, "px"),
+        'header-impact-xxxs': "".concat(theme.typography.types['headings-impact'].configs['header-impact-xxxs'].baseAndSmall.fontSize, "px"),
+        /* latest */
+        'heading-impact-xxl': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-xxl'].baseAndSmall.fontSize, "px"),
+        'heading-impact-xl': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-xl'].baseAndSmall.fontSize, "px"),
+        'heading-impact-l': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-l'].baseAndSmall.fontSize, "px"),
+        'heading-impact-m': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-m'].baseAndSmall.fontSize, "px"),
+        'heading-impact-s': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-s'].baseAndSmall.fontSize, "px"),
+        'heading-impact-xs': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-xs'].baseAndSmall.fontSize, "px"),
+        'heading-impact-xxs': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-xxs'].baseAndSmall.fontSize, "px"),
+        'heading-impact-xxxs': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-xxxs'].baseAndSmall.fontSize, "px"),
+        'heading-xxl': "".concat(theme.typography.types.headings.configs['heading-xxl'].baseAndSmall.fontSize, "px"),
+        'heading-xl': "".concat(theme.typography.types.headings.configs['heading-xl'].baseAndSmall.fontSize, "px"),
+        'heading-l': "".concat(theme.typography.types.headings.configs['heading-l'].baseAndSmall.fontSize, "px"),
+        'heading-m': "".concat(theme.typography.types.headings.configs['heading-m'].baseAndSmall.fontSize, "px"),
+        'heading-s': "".concat(theme.typography.types.headings.configs['heading-s'].baseAndSmall.fontSize, "px"),
+        'heading-xs': "".concat(theme.typography.types.headings.configs['heading-xs'].baseAndSmall.fontSize, "px"),
+        'heading-xxs': "".concat(theme.typography.types.headings.configs['heading-xxs'].baseAndSmall.fontSize, "px"),
+        'body-xl': "".concat(theme.typography.types.bodies.configs['body-xl'].baseAndSmall.fontSize, "px"),
+        'body-l': "".concat(theme.typography.types.bodies.configs['body-l'].baseAndSmall.fontSize, "px"),
+        'body-m': "".concat(theme.typography.types.bodies.configs['body-m'].baseAndSmall.fontSize, "px"),
+        'body-s': "".concat(theme.typography.types.bodies.configs['body-s'].baseAndSmall.fontSize, "px"),
+        'body-xs': "".concat(theme.typography.types.bodies.configs['body-xs'].baseAndSmall.fontSize, "px")
       },
       mediumAndWide: {
-        header1: "".concat(theme.typography.types.headers.configs.header1.mediumAndWide.fontSize, "px"),
-        header2: "".concat(theme.typography.types.headers.configs.header2.mediumAndWide.fontSize, "px"),
-        header3: "".concat(theme.typography.types.headers.configs.header3.mediumAndWide.fontSize, "px"),
-        header4: "".concat(theme.typography.types.headers.configs.header4.mediumAndWide.fontSize, "px"),
-        header5: "".concat(theme.typography.types.headers.configs.header5.mediumAndWide.fontSize, "px"),
+        /* legacy */
+        header1: "".concat(theme.typography.types.headings.configs.header1.mediumAndWide.fontSize, "px"),
+        header2: "".concat(theme.typography.types.headings.configs.header2.mediumAndWide.fontSize, "px"),
+        header3: "".concat(theme.typography.types.headings.configs.header3.mediumAndWide.fontSize, "px"),
+        header4: "".concat(theme.typography.types.headings.configs.header4.mediumAndWide.fontSize, "px"),
+        header5: "".concat(theme.typography.types.headings.configs.header5.mediumAndWide.fontSize, "px"),
         'body-large': "".concat(theme.typography.types.bodies.configs['body-large'].mediumAndWide.fontSize, "px"),
         'body-medium': "".concat(theme.typography.types.bodies.configs['body-medium'].mediumAndWide.fontSize, "px"),
         body: "".concat(theme.typography.types.bodies.configs.body.mediumAndWide.fontSize, "px"),
         'body-small': "".concat(theme.typography.types.bodies.configs['body-small'].mediumAndWide.fontSize, "px"),
         'body-xsmall': "".concat(theme.typography.types.bodies.configs['body-xsmall'].mediumAndWide.fontSize, "px"),
-        'header-impact-xxl': "".concat(theme.typography.types['headers-impact'].configs['header-impact-xxl'].mediumAndWide.fontSize, "px"),
-        'header-impact-xl': "".concat(theme.typography.types['headers-impact'].configs['header-impact-xl'].mediumAndWide.fontSize, "px"),
-        'header-impact-l': "".concat(theme.typography.types['headers-impact'].configs['header-impact-l'].mediumAndWide.fontSize, "px"),
-        'header-impact-m': "".concat(theme.typography.types['headers-impact'].configs['header-impact-m'].mediumAndWide.fontSize, "px"),
-        'header-impact-s': "".concat(theme.typography.types['headers-impact'].configs['header-impact-s'].mediumAndWide.fontSize, "px"),
-        'header-impact-xs': "".concat(theme.typography.types['headers-impact'].configs['header-impact-xs'].mediumAndWide.fontSize, "px"),
-        'header-impact-xxs': "".concat(theme.typography.types['headers-impact'].configs['header-impact-xxs'].mediumAndWide.fontSize, "px"),
-        'header-impact-xxxs': "".concat(theme.typography.types['headers-impact'].configs['header-impact-xxxs'].mediumAndWide.fontSize, "px")
+        'header-impact-xxl': "".concat(theme.typography.types['headings-impact'].configs['header-impact-xxl'].mediumAndWide.fontSize, "px"),
+        'header-impact-xl': "".concat(theme.typography.types['headings-impact'].configs['header-impact-xl'].mediumAndWide.fontSize, "px"),
+        'header-impact-l': "".concat(theme.typography.types['headings-impact'].configs['header-impact-l'].mediumAndWide.fontSize, "px"),
+        'header-impact-m': "".concat(theme.typography.types['headings-impact'].configs['header-impact-m'].mediumAndWide.fontSize, "px"),
+        'header-impact-s': "".concat(theme.typography.types['headings-impact'].configs['header-impact-s'].mediumAndWide.fontSize, "px"),
+        'header-impact-xs': "".concat(theme.typography.types['headings-impact'].configs['header-impact-xs'].mediumAndWide.fontSize, "px"),
+        'header-impact-xxs': "".concat(theme.typography.types['headings-impact'].configs['header-impact-xxs'].mediumAndWide.fontSize, "px"),
+        'header-impact-xxxs': "".concat(theme.typography.types['headings-impact'].configs['header-impact-xxxs'].mediumAndWide.fontSize, "px"),
+        /* latest */
+        'heading-impact-xxl': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-xxl'].mediumAndWide.fontSize, "px"),
+        'heading-impact-xl': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-xl'].mediumAndWide.fontSize, "px"),
+        'heading-impact-l': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-l'].mediumAndWide.fontSize, "px"),
+        'heading-impact-m': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-m'].mediumAndWide.fontSize, "px"),
+        'heading-impact-s': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-s'].mediumAndWide.fontSize, "px"),
+        'heading-impact-xs': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-xs'].mediumAndWide.fontSize, "px"),
+        'heading-impact-xxs': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-xxs'].mediumAndWide.fontSize, "px"),
+        'heading-impact-xxxs': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-xxxs'].mediumAndWide.fontSize, "px"),
+        'heading-xxl': "".concat(theme.typography.types.headings.configs['heading-xxl'].mediumAndWide.fontSize, "px"),
+        'heading-xl': "".concat(theme.typography.types.headings.configs['heading-xl'].mediumAndWide.fontSize, "px"),
+        'heading-l': "".concat(theme.typography.types.headings.configs['heading-l'].mediumAndWide.fontSize, "px"),
+        'heading-m': "".concat(theme.typography.types.headings.configs['heading-m'].mediumAndWide.fontSize, "px"),
+        'heading-s': "".concat(theme.typography.types.headings.configs['heading-s'].mediumAndWide.fontSize, "px"),
+        'heading-xs': "".concat(theme.typography.types.headings.configs['heading-xs'].mediumAndWide.fontSize, "px"),
+        'heading-xxs': "".concat(theme.typography.types.headings.configs['heading-xxs'].mediumAndWide.fontSize, "px"),
+        'body-xl': "".concat(theme.typography.types.bodies.configs['body-xl'].mediumAndWide.fontSize, "px"),
+        'body-l': "".concat(theme.typography.types.bodies.configs['body-l'].mediumAndWide.fontSize, "px"),
+        'body-m': "".concat(theme.typography.types.bodies.configs['body-m'].mediumAndWide.fontSize, "px"),
+        'body-s': "".concat(theme.typography.types.bodies.configs['body-s'].mediumAndWide.fontSize, "px"),
+        'body-xs': "".concat(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': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-xxl'].baseAndSmall.lineHeight, "px"),
+        'heading-impact-xl': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-xl'].baseAndSmall.lineHeight, "px"),
+        'heading-impact-l': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-l'].baseAndSmall.lineHeight, "px"),
+        'heading-impact-m': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-m'].baseAndSmall.lineHeight, "px"),
+        'heading-impact-s': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-s'].baseAndSmall.lineHeight, "px"),
+        'heading-impact-xs': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-xs'].baseAndSmall.lineHeight, "px"),
+        'heading-impact-xxs': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-xxs'].baseAndSmall.lineHeight, "px"),
+        'heading-impact-xxxs': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-xxxs'].baseAndSmall.lineHeight, "px"),
+        'heading-xxl': "".concat(theme.typography.types.headings.configs['heading-xxl'].baseAndSmall.lineHeight, "px"),
+        'heading-xl': "".concat(theme.typography.types.headings.configs['heading-xl'].baseAndSmall.lineHeight, "px"),
+        'heading-l': "".concat(theme.typography.types.headings.configs['heading-l'].baseAndSmall.lineHeight, "px"),
+        'heading-m': "".concat(theme.typography.types.headings.configs['heading-m'].baseAndSmall.lineHeight, "px"),
+        'heading-s': "".concat(theme.typography.types.headings.configs['heading-s'].baseAndSmall.lineHeight, "px"),
+        'heading-xs': "".concat(theme.typography.types.headings.configs['heading-xs'].baseAndSmall.lineHeight, "px"),
+        'heading-xxs': "".concat(theme.typography.types.headings.configs['heading-xxs'].baseAndSmall.lineHeight, "px"),
+        'body-xl': "".concat(theme.typography.types.bodies.configs['body-xl'].baseAndSmall.lineHeight, "px"),
+        'body-l': "".concat(theme.typography.types.bodies.configs['body-l'].baseAndSmall.lineHeight, "px"),
+        'body-m': "".concat(theme.typography.types.bodies.configs['body-m'].baseAndSmall.lineHeight, "px"),
+        'body-s': "".concat(theme.typography.types.bodies.configs['body-s'].baseAndSmall.lineHeight, "px"),
+        'body-xs': "".concat(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': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-xxl'].mediumAndWide.lineHeight, "px"),
+        'heading-impact-xl': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-xl'].mediumAndWide.lineHeight, "px"),
+        'heading-impact-l': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-l'].mediumAndWide.lineHeight, "px"),
+        'heading-impact-m': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-m'].mediumAndWide.lineHeight, "px"),
+        'heading-impact-s': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-s'].mediumAndWide.lineHeight, "px"),
+        'heading-impact-xs': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-xs'].mediumAndWide.lineHeight, "px"),
+        'heading-impact-xxs': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-xxs'].mediumAndWide.lineHeight, "px"),
+        'heading-impact-xxxs': "".concat(theme.typography.types['headings-impact'].configs['heading-impact-xxxs'].mediumAndWide.lineHeight, "px"),
+        'heading-xxl': "".concat(theme.typography.types.headings.configs['heading-xxl'].mediumAndWide.lineHeight, "px"),
+        'heading-xl': "".concat(theme.typography.types.headings.configs['heading-xl'].mediumAndWide.lineHeight, "px"),
+        'heading-l': "".concat(theme.typography.types.headings.configs['heading-l'].mediumAndWide.lineHeight, "px"),
+        'heading-m': "".concat(theme.typography.types.headings.configs['heading-m'].mediumAndWide.lineHeight, "px"),
+        'heading-s': "".concat(theme.typography.types.headings.configs['heading-s'].mediumAndWide.lineHeight, "px"),
+        'heading-xs': "".concat(theme.typography.types.headings.configs['heading-xs'].mediumAndWide.lineHeight, "px"),
+        'heading-xxs': "".concat(theme.typography.types.headings.configs['heading-xxs'].mediumAndWide.lineHeight, "px"),
+        'body-xl': "".concat(theme.typography.types.bodies.configs['body-xl'].mediumAndWide.lineHeight, "px"),
+        'body-l': "".concat(theme.typography.types.bodies.configs['body-l'].mediumAndWide.lineHeight, "px"),
+        'body-m': "".concat(theme.typography.types.bodies.configs['body-m'].mediumAndWide.lineHeight, "px"),
+        'body-s': "".concat(theme.typography.types.bodies.configs['body-s'].mediumAndWide.lineHeight, "px"),
+        'body-xs': "".concat(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,
@@ -7560,8 +7686,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: {