@ornikar/kitt-universal 26.3.1-late-ocean.ccf14ae912d02bfa0c8d62c4652911eb457e71b0.0 → 27.0.0

package/dist/index.es.web.js

@@ -50,117 +50,81 @@ var createColorScale = function (colorScale) {
   return colorScale;
 };
 var colorScales = {
-  eggshell: createColorScale({
-    1: '#faf9f8',
-    2: '#f4f3ef',
-    3: '#F0EEE9',
-    4: '#dedad2',
-    5: '#d1cdc5',
-    6: '#bab8ae',
-    7: '#aeaba3',
-    8: '#9c9a92',
-    9: '#8e8c83',
-    10: '#74726a',
-    11: '#3e3d3a',
-    12: '#282826'
+  deepPurple: createColorScale({
+    5: '#936C93',
+    6: '#7A587A',
+    7: '#6E4D6E',
+    8: '#563B56',
+    9: '#452F45'
   }),
-  violine: createColorScale({
-    1: '#f8f7ff',
-    2: '#f2f0ff',
-    3: '#ebe8ff',
-    4: '#d5cfff',
-    5: '#bfb5ff',
-    6: '#a99cff',
-    7: '#9180ff',
-    8: '#7b66ff',
-    9: '#624af7',
-    10: '#5139e1',
-    11: '#3a26b5',
-    12: '#0a0428'
+  beige: createColorScale({
+    1: '#F7F4EE',
+    2: '#F1ECE4',
+    3: '#EAE3D6',
+    4: '#E5DCCA',
+    5: '#DDD0B8',
+    6: '#C1B59F'
   }),
-  lavender: createColorScale({
-    1: '#fdf7ff',
-    2: '#fcf2ff',
-    3: '#FAEBFF',
-    4: '#f8e3ff',
-    5: '#f4d6ff',
-    6: '#efc2ff',
-    7: '#d298ff',
-    8: '#b97aff',
-    9: '#ac5ff9',
-    10: '#9d4ced',
-    11: '#6b347e',
-    12: '#290a34'
+  lightning: createColorScale({
+    5: '#FFF500',
+    7: '#43390A'
+  }),
+  rainbow: createColorScale({
+    pink: '#E4A4F9',
+    brick: '#951D12',
+    orange: '#DB6E2E',
+    gold: '#9A7600',
+    sun: '#EFD346',
+    'green-pine': '#1C5D47',
+    'green-grass': '#4DA00A',
+    'green-apple': '#DEF985',
+    'blue-electric': '#2850C4',
+    'blue-sky': '#B2F0FD'
+  }),
+  grey: createColorScale({
+    0: '#ffffff',
+    1: '#ECECEC',
+    2: '#CDCED0',
+    3: '#A8A8A8',
+    5: '#838383',
+    7: '#505050',
+    9: '#101010'
   }),
   blue: createColorScale({
-    1: '#f7faff',
-    2: '#f0f5ff',
-    3: '#e8f0ff',
-    4: '#d4e0ff',
-    5: '#baceff',
-    6: '#a1bbff',
-    7: '#87a9ff',
-    8: '#6e96ff',
-    9: '#5383ff',
-    10: '#4170eb',
-    11: '#0e4381',
-    12: '#061c36'
+    1: '#E9F4FC',
+    2: '#BCDFF6',
+    6: '#1772AB'
   }),
-  raspberry: createColorScale({
-    1: '#fff7fa',
-    2: '#fff0f5',
-    3: '#ffe8ef',
-    4: '#f0c7d4',
-    5: '#f0afc4',
-    6: '#f097b3',
-    7: '#f07fa3',
-    8: '#d95d84',
-    9: '#cf2a60',
-    10: '#c12558',
-    11: '#61192e',
-    12: '#29040f'
+  green: createColorScale({
+    1: '#ECFEDD',
+    2: '#DBFAC1',
+    6: '#438D06'
   }),
-  coral: createColorScale({
-    1: '#fff7f7',
-    2: '#fff0f0',
-    3: '#ffe8e8',
-    4: '#ffcfcf',
-    5: '#ffb5b5',
-    6: '#ff9c9c',
-    7: '#f57d7d',
-    8: '#eb6565',
-    9: '#e55050',
-    10: '#da3d3d',
-    11: '#8a2b1e',
-    12: '#330c07'
+  yellow: createColorScale({
+    1: '#FDF8E7',
+    2: '#FAEBB8',
+    6: '#EFC11F'
   }),
-  sun: createColorScale({
-    1: '#fffdf7',
-    2: '#fffbf0',
-    3: '#fff6de',
-    4: '#ffefc4',
-    5: '#ffe8ab',
-    6: '#ffe191',
-    7: '#ffda78',
-    8: '#ffd35e',
-    9: '#fdc32d',
-    10: '#f3a40c',
-    11: '#9f5600',
-    12: '#341c00'
+  red: createColorScale({
+    1: '#FDE4E3',
+    2: '#FAB8B8',
+    6: '#F14847'
   }),
-  green: createColorScale({
-    1: '#f9fff9',
-    2: '#e9ffeb',
-    3: '#d3fbd7',
-    4: '#bffbc5',
-    5: '#96f4b0',
-    6: '#7fefac',
-    7: '#21e8a3',
-    8: '#08d48e',
-    9: '#00c381',
-    10: '#00ac72',
-    11: '#0e8159',
-    12: '#03291c'
+  'beige-alpha': createColorScale({
+    '25': '#C1B59F40',
+    '40': '#C1B59F66',
+    '50': '#C1B59F80'
+  }),
+  'grey-alpha': createColorScale({
+    '25': '#10101040',
+    '35': '#10101059',
+    '50': '#10101080'
+  }),
+  'white-alpha': createColorScale({
+    '10': '#FFFFFF1A',
+    '20': '#FFFFFF33',
+    '80': '#FFFFFFCC',
+    '90': '#FFFFFFE5'
   })
 };
 var transformColorScalesToTokens = function () {
@@ -176,89 +140,43 @@ var transformColorScalesToTokens = function () {
     });
   }));
 };
-var lateOceanColorPalette = _objectSpread(_objectSpread({}, transformColorScalesToTokens()), {}, {
-  /** @deprecated use violine.9 instead */
-  lateOcean: colorScales.violine[9],
-  /** @deprecated use violine.8 instead */
-  lateOceanLight1: colorScales.violine[8],
-  /** @deprecated use violine.6 instead */
-  lateOceanLight2: colorScales.violine[6],
-  /** @deprecated use lavender.6 instead */
-  lateOceanLight3: colorScales.lavender[6],
-  /** @deprecated use violine.12 instead */
-  lateOceanDark1: colorScales.violine[12],
-  /** @deprecated use lavender.5 instead */
-  warmEmbrace: colorScales.lavender[5],
-  /** @deprecated use lavender.3 instead */
-  warmEmbraceLight1: colorScales.lavender[3],
+var deepPurpleColorPalette = _objectSpread(_objectSpread({}, transformColorScalesToTokens()), {}, {
   white: '#FFFFFF',
   black: '#000000',
-  /** @deprecated use black instead */
-  black1000: '#000000',
-  /** @deprecated use eggshell.11 instead */
-  black800: colorScales.eggshell[11],
-  /** @deprecated use eggshell.10 instead */
-  black555: colorScales.eggshell[10],
-  /** @deprecated use eggshell.7 instead */
-  black400: colorScales.eggshell[7],
-  /** @deprecated use eggshell.4 instead */
-  black200: colorScales.eggshell[4],
-  /** @deprecated use eggshell.3 instead */
-  black100: colorScales.eggshell[3],
-  /** @deprecated use eggshell.2 instead */
-  black50: colorScales.eggshell[2],
-  /** @deprecated use eggshell.1 instead */
-  black25: colorScales.eggshell[1],
-  /** @deprecated use green.8 instead */
-  viride: colorScales.green[8],
-  /** @deprecated use coral.7 instead */
-  englishVermillon: colorScales.coral[7],
-  /** @deprecated use sun.8 instead */
-  goldCrayola: colorScales.sun[8],
-  /** @deprecated use blue.8 instead */
-  aero: colorScales.blue[8],
-  /** @deprecated use eggshell.1 instead */
-  seaShell: colorScales.eggshell[1],
-  transparent: 'transparent',
-  /** @deprecated use violine.4 instead */
-  moonPurple: colorScales.violine[4],
-  /** @deprecated use violine.2 instead */
-  moonPurpleLight1: colorScales.violine[2]
+  transparent: 'transparent'
 });
 
 var colors = {
-  primary: lateOceanColorPalette['violine.9'],
-  primaryLight: lateOceanColorPalette['violine.8'],
-  accent: lateOceanColorPalette['lavender.5'],
-  accentLight: lateOceanColorPalette['lavender.3'],
-  success: lateOceanColorPalette['green.8'],
-  correct: lateOceanColorPalette['green.8'],
-  danger: lateOceanColorPalette['coral.8'],
-  info: lateOceanColorPalette['blue.8'],
-  warning: lateOceanColorPalette['sun.8'],
-  separator: lateOceanColorPalette['eggshell.3'],
-  hover: lateOceanColorPalette['eggshell.3'],
-  white: lateOceanColorPalette.white,
-  black: lateOceanColorPalette.black,
-  blackDisabled: lateOceanColorPalette['eggshell.7'],
-  blackLight: lateOceanColorPalette['eggshell.10'],
-  blackAnthracite: lateOceanColorPalette['eggshell.11'],
-  uiBackground: lateOceanColorPalette['eggshell.1'],
-  uiBackgroundLight: lateOceanColorPalette.white,
-  transparent: lateOceanColorPalette.transparent,
-  disabled: lateOceanColorPalette['eggshell.2'],
+  primary: deepPurpleColorPalette['deepPurple.8'],
+  primaryLight: deepPurpleColorPalette['deepPurple.8'],
+  accent: deepPurpleColorPalette['beige.1'],
+  accentLight: deepPurpleColorPalette['beige.1'],
+  success: deepPurpleColorPalette['green.6'],
+  correct: deepPurpleColorPalette['green.6'],
+  danger: deepPurpleColorPalette['red.6'],
+  info: deepPurpleColorPalette['blue.6'],
+  warning: deepPurpleColorPalette['yellow.6'],
+  separator: deepPurpleColorPalette['beige.3'],
+  white: deepPurpleColorPalette['grey.0'],
+  black: deepPurpleColorPalette['grey.9'],
+  blackLight: deepPurpleColorPalette['grey.5'],
+  blackAnthracite: deepPurpleColorPalette['grey.7'],
+  uiBackground: deepPurpleColorPalette['beige.1'],
+  uiBackgroundLight: deepPurpleColorPalette['grey.0'],
+  transparent: deepPurpleColorPalette.transparent,
+  disabled: deepPurpleColorPalette['grey.1'],
   overlay: {
-    dark: 'rgba(41, 48, 51, 0.25)',
-    light: 'rgba(255, 255, 255, 0.90)'
+    dark: deepPurpleColorPalette['grey-alpha.50'],
+    light: deepPurpleColorPalette['white-alpha.80']
   }
 };
 
 var actionCard = {
-  borderRadius: 20,
+  borderRadius: 8,
   primary: {
     "default": {
       backgroundColor: colors.uiBackgroundLight,
-      borderColor: lateOceanColorPalette['eggshell.3'],
+      borderColor: deepPurpleColorPalette['beige.2'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -270,8 +188,8 @@ var actionCard = {
       translateY: 0
     },
     hovered: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['eggshell.3'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['beige.2'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -283,8 +201,8 @@ var actionCard = {
       translateY: 0
     },
     disabled: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['eggshell.3'],
+      backgroundColor: deepPurpleColorPalette['grey.1'],
+      borderColor: deepPurpleColorPalette['grey.1'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -296,8 +214,8 @@ var actionCard = {
       translateY: 0
     },
     focused: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['eggshell.3'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['beige.2'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -309,8 +227,8 @@ var actionCard = {
       translateY: 0
     },
     pressed: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['eggshell.3'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['beige.2'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -325,10 +243,10 @@ var actionCard = {
   'primary-border-soft': {
     "default": {
       backgroundColor: colors.uiBackgroundLight,
-      borderColor: lateOceanColorPalette['violine.4'],
+      borderColor: deepPurpleColorPalette['beige.3'],
       borderWidth: 1,
       shadow: {
-        color: lateOceanColorPalette['violine.4'],
+        color: deepPurpleColorPalette['beige.3'],
         offsetX: 0,
         offsetY: 4,
         opacity: 1,
@@ -337,11 +255,11 @@ var actionCard = {
       translateY: 0
     },
     hovered: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['violine.4'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['beige.3'],
       borderWidth: 1,
       shadow: {
-        color: lateOceanColorPalette['violine.4'],
+        color: deepPurpleColorPalette['beige.3'],
         offsetX: 0,
         offsetY: 4,
         opacity: 1,
@@ -350,8 +268,8 @@ var actionCard = {
       translateY: 0
     },
     disabled: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['eggshell.3'],
+      backgroundColor: deepPurpleColorPalette['grey.1'],
+      borderColor: deepPurpleColorPalette['grey.1'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -363,11 +281,11 @@ var actionCard = {
       translateY: 0
     },
     focused: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['violine.4'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['beige.3'],
       borderWidth: 1,
       shadow: {
-        color: lateOceanColorPalette['violine.4'],
+        color: deepPurpleColorPalette['beige.3'],
         offsetX: 0,
         offsetY: 4,
         opacity: 1,
@@ -376,8 +294,8 @@ var actionCard = {
       translateY: 0
     },
     pressed: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['violine.4'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['beige.3'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -392,10 +310,10 @@ var actionCard = {
   'primary-border-hard': {
     "default": {
       backgroundColor: colors.uiBackgroundLight,
-      borderColor: lateOceanColorPalette['violine.9'],
+      borderColor: deepPurpleColorPalette['deepPurple.8'],
       borderWidth: 1,
       shadow: {
-        color: lateOceanColorPalette['violine.9'],
+        color: deepPurpleColorPalette['deepPurple.8'],
         offsetX: 0,
         offsetY: 4,
         opacity: 1,
@@ -404,11 +322,11 @@ var actionCard = {
       translateY: 0
     },
     hovered: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['violine.9'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['deepPurple.8'],
       borderWidth: 1,
       shadow: {
-        color: lateOceanColorPalette['violine.9'],
+        color: deepPurpleColorPalette['deepPurple.8'],
         offsetX: 0,
         offsetY: 4,
         opacity: 1,
@@ -417,8 +335,8 @@ var actionCard = {
       translateY: 0
     },
     disabled: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['eggshell.3'],
+      backgroundColor: deepPurpleColorPalette['grey.1'],
+      borderColor: deepPurpleColorPalette['grey.1'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -430,11 +348,11 @@ var actionCard = {
       translateY: 0
     },
     focused: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['violine.9'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['deepPurple.8'],
       borderWidth: 1,
       shadow: {
-        color: lateOceanColorPalette['violine.9'],
+        color: deepPurpleColorPalette['deepPurple.8'],
         offsetX: 0,
         offsetY: 4,
         opacity: 1,
@@ -443,8 +361,8 @@ var actionCard = {
       translateY: 0
     },
     pressed: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['violine.9'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['deepPurple.8'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -458,8 +376,8 @@ var actionCard = {
   },
   secondary: {
     "default": {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette.transparent,
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette.transparent,
       borderWidth: 0,
       shadow: {
         color: '',
@@ -471,8 +389,8 @@ var actionCard = {
       translateY: 0
     },
     disabled: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['eggshell.3'],
+      backgroundColor: deepPurpleColorPalette['grey.1'],
+      borderColor: deepPurpleColorPalette['grey.1'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -484,8 +402,8 @@ var actionCard = {
       translateY: 0
     },
     hovered: {
-      backgroundColor: lateOceanColorPalette['eggshell.3'],
-      borderColor: lateOceanColorPalette.transparent,
+      backgroundColor: deepPurpleColorPalette['beige.2'],
+      borderColor: deepPurpleColorPalette.transparent,
       borderWidth: 0,
       shadow: {
         color: '',
@@ -497,8 +415,8 @@ var actionCard = {
       translateY: 0
     },
     focused: {
-      backgroundColor: lateOceanColorPalette['eggshell.3'],
-      borderColor: lateOceanColorPalette.transparent,
+      backgroundColor: deepPurpleColorPalette['beige.2'],
+      borderColor: deepPurpleColorPalette.transparent,
       borderWidth: 0,
       shadow: {
         color: '',
@@ -510,8 +428,8 @@ var actionCard = {
       translateY: 0
     },
     pressed: {
-      backgroundColor: lateOceanColorPalette['eggshell.3'],
-      borderColor: lateOceanColorPalette.transparent,
+      backgroundColor: deepPurpleColorPalette['beige.2'],
+      borderColor: deepPurpleColorPalette.transparent,
       borderWidth: 0,
       shadow: {
         color: '',
@@ -525,11 +443,11 @@ var actionCard = {
   },
   highlight: {
     "default": {
-      backgroundColor: lateOceanColorPalette['violine.2'],
-      borderColor: lateOceanColorPalette['violine.4'],
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette['beige.3'],
       borderWidth: 1,
       shadow: {
-        color: lateOceanColorPalette['violine.4'],
+        color: deepPurpleColorPalette['beige.3'],
         offsetX: 0,
         offsetY: 4,
         opacity: 1,
@@ -538,8 +456,8 @@ var actionCard = {
       translateY: 0
     },
     disabled: {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette['eggshell.3'],
+      backgroundColor: deepPurpleColorPalette['grey.1'],
+      borderColor: deepPurpleColorPalette['grey.1'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -551,11 +469,11 @@ var actionCard = {
       translateY: 0
     },
     hovered: {
-      backgroundColor: hex2rgba(lateOceanColorPalette['violine.2'], 0.6),
-      borderColor: lateOceanColorPalette['violine.4'],
+      backgroundColor: hex2rgba(deepPurpleColorPalette['beige.1'], 0.6),
+      borderColor: deepPurpleColorPalette['beige.3'],
       borderWidth: 1,
       shadow: {
-        color: lateOceanColorPalette['violine.4'],
+        color: deepPurpleColorPalette['beige.3'],
         offsetX: 0,
         offsetY: 4,
         opacity: 1,
@@ -564,11 +482,11 @@ var actionCard = {
       translateY: 0
     },
     focused: {
-      backgroundColor: hex2rgba(lateOceanColorPalette['violine.2'], 0.6),
-      borderColor: lateOceanColorPalette['violine.4'],
+      backgroundColor: hex2rgba(deepPurpleColorPalette['beige.1'], 0.6),
+      borderColor: deepPurpleColorPalette['beige.3'],
       borderWidth: 1,
       shadow: {
-        color: lateOceanColorPalette['violine.4'],
+        color: deepPurpleColorPalette['beige.3'],
         offsetX: 0,
         offsetY: 4,
         opacity: 1,
@@ -577,8 +495,8 @@ var actionCard = {
       translateY: 0
     },
     pressed: {
-      backgroundColor: hex2rgba(lateOceanColorPalette['violine.2'], 0.6),
-      borderColor: lateOceanColorPalette['violine.4'],
+      backgroundColor: hex2rgba(deepPurpleColorPalette['beige.1'], 0.6),
+      borderColor: deepPurpleColorPalette['beige.3'],
       borderWidth: 1,
       shadow: {
         color: '',
@@ -596,42 +514,28 @@ var defaultAvatarSize = 40;
 var defaultAvatarIconSize = 20;
 var largeAvatarSize = 120;
 var largeAvatarIconSize = 30;
-
-// export interface AvatarThemeBackgroundColorVariant {
-//   default: string;
-//   light: string;
-//   dark: string;
-//   disabled: string;
-// }
-
-// export interface AvatarThemeColorVariant {
-//   default: string;
-//   light: string;
-//   disabled: string;
-// }
-
 var avatar = {
-  borderRadius: 10,
+  borderRadius: 4,
   size: defaultAvatarSize,
   iconSize: defaultAvatarIconSize,
   "default": {
-    color: lateOceanColorPalette.white,
-    backgroundColor: colors.primary
+    color: deepPurpleColorPalette['white-alpha.80'],
+    backgroundColor: deepPurpleColorPalette['deepPurple.8']
   },
   light: {
-    color: lateOceanColorPalette.black,
-    backgroundColor: lateOceanColorPalette['eggshell.3']
+    color: deepPurpleColorPalette['beige.6'],
+    backgroundColor: deepPurpleColorPalette['beige.1']
   },
   dark: {
-    color: lateOceanColorPalette.white,
-    backgroundColor: lateOceanColorPalette['eggshell.12']
+    color: deepPurpleColorPalette['white-alpha.80'],
+    backgroundColor: deepPurpleColorPalette['grey.9']
   },
   disabled: {
-    color: lateOceanColorPalette['eggshell.5'],
-    backgroundColor: lateOceanColorPalette['eggshell.3']
+    color: deepPurpleColorPalette['grey.3'],
+    backgroundColor: deepPurpleColorPalette['grey.1']
   },
   large: {
-    borderRadius: 30,
+    borderRadius: 8,
     size: largeAvatarSize,
     iconSize: largeAvatarIconSize
   }
@@ -644,7 +548,7 @@ var bottomSheet = {
     padding: spacing * 4
   },
   handle: {
-    backgroundColor: lateOceanColorPalette.black200
+    backgroundColor: deepPurpleColorPalette['beige.3']
   }
 };
 
@@ -712,9 +616,9 @@ var button = {
       pressedBackgroundColor: 'rgba(255, 255, 255, 0.05)',
       hoverBackgroundColor: 'rgba(255, 255, 255, 0.05)',
       focusBorderColor: 'rgba(255, 255, 255, 0.4)',
-      color: lateOceanColorPalette.white,
-      hoverColor: lateOceanColorPalette.white,
-      activeColor: lateOceanColorPalette.white
+      color: deepPurpleColorPalette.white,
+      hoverColor: deepPurpleColorPalette.white,
+      activeColor: deepPurpleColorPalette.white
     }
   },
   primary: {
@@ -727,11 +631,11 @@ var button = {
     ghost: {
       backgroundColor: colors.uiBackgroundLight,
       pressedBackgroundColor: colors.uiBackground,
-      hoverBackgroundColor: colors.hover,
+      hoverBackgroundColor: deepPurpleColorPalette['beige.2'],
       focusBorderColor: 'rgba(255,255,255, 0.4)',
       color: colors.primary,
-      hoverColor: colors.hover,
-      activeColor: colors.hover
+      hoverColor: deepPurpleColorPalette['beige.2'],
+      activeColor: deepPurpleColorPalette['beige.2']
     }
   },
   dark: {
@@ -744,19 +648,19 @@ var button = {
   },
   danger: {
     "default": {
-      backgroundColor: lateOceanColorPalette['coral.3'],
-      pressedBackgroundColor: lateOceanColorPalette['coral.4'],
-      hoverBackgroundColor: lateOceanColorPalette['coral.4'],
-      focusBorderColor: lateOceanColorPalette['coral.4']
+      backgroundColor: deepPurpleColorPalette['red.1'],
+      pressedBackgroundColor: deepPurpleColorPalette['red.2'],
+      hoverBackgroundColor: deepPurpleColorPalette['red.2'],
+      focusBorderColor: deepPurpleColorPalette['red.2']
     },
     ghost: {
       backgroundColor: colors.uiBackgroundLight,
       pressedBackgroundColor: colors.uiBackground,
-      hoverBackgroundColor: colors.hover,
+      hoverBackgroundColor: deepPurpleColorPalette['beige.2'],
       focusBorderColor: 'rgba(255, 255, 255, 0.4)',
-      color: lateOceanColorPalette['coral.9'],
-      hoverColor: lateOceanColorPalette['coral.9'],
-      activeColor: lateOceanColorPalette['coral.9']
+      color: deepPurpleColorPalette['red.6'],
+      hoverColor: deepPurpleColorPalette['red.6'],
+      activeColor: deepPurpleColorPalette['red.6']
     }
   },
   subtle: {
@@ -797,14 +701,14 @@ var button = {
       backgroundColor: colors.disabled,
       pressedBackgroundColor: colors.disabled,
       hoverBackgroundColor: colors.disabled,
-      focusBorderColor: lateOceanColorPalette.black100,
-      borderColor: lateOceanColorPalette.black100
+      focusBorderColor: deepPurpleColorPalette['beige.2'],
+      borderColor: deepPurpleColorPalette['beige.2']
     }
   }
 };
 
 var buttonBadge = {
-  backgroundColor: lateOceanColorPalette['coral.10'],
+  backgroundColor: deepPurpleColorPalette['red.6'],
   dimensions: {
     withBadge: {
       width: 10,
@@ -833,7 +737,7 @@ var card = {
     borderColor: colors.separator
   },
   subtle: {
-    backgroundColor: lateOceanColorPalette.black50,
+    backgroundColor: deepPurpleColorPalette['beige.1'],
     borderColor: colors.separator
   }
 };
@@ -893,17 +797,17 @@ var choices = {
       small: 24
     },
     backgroundColor: {
-      "default": lateOceanColorPalette.black50,
+      "default": deepPurpleColorPalette['beige.1'],
       disabled: colors.disabled,
       selected: colors.primary,
-      pressed: lateOceanColorPalette.lateOceanLight1,
-      hover: lateOceanColorPalette.black100,
-      hoverWhenSelected: lateOceanColorPalette.lateOceanLight1
+      pressed: deepPurpleColorPalette['deepPurple.7'],
+      hover: deepPurpleColorPalette['beige.2'],
+      hoverWhenSelected: deepPurpleColorPalette['deepPurple.7']
     },
     disabled: {
       border: {
         width: 2,
-        color: lateOceanColorPalette.black100
+        color: deepPurpleColorPalette['beige.2']
       }
     },
     transition: {
@@ -968,19 +872,19 @@ var autocomplete = {
       backgroundColor: colors.white
     },
     hovered: {
-      backgroundColor: lateOceanColorPalette.black50
+      backgroundColor: deepPurpleColorPalette['beige.1']
     },
     focused: {
-      backgroundColor: lateOceanColorPalette.black50
+      backgroundColor: deepPurpleColorPalette['beige.1']
     },
     selected: {
-      backgroundColor: lateOceanColorPalette.black50
+      backgroundColor: deepPurpleColorPalette['beige.1']
     },
     highlighted: {
-      backgroundColor: lateOceanColorPalette.black50
+      backgroundColor: deepPurpleColorPalette['beige.1']
     },
     pressed: {
-      backgroundColor: lateOceanColorPalette.black100
+      backgroundColor: deepPurpleColorPalette['beige.1']
     }
   },
   optionsContainer: {
@@ -1048,37 +952,37 @@ var datePicker = {
 
 var inputStatesStyle = {
   "default": {
-    backgroundColor: lateOceanColorPalette.white,
-    borderColor: lateOceanColorPalette['eggshell.4'],
-    color: lateOceanColorPalette.black
+    backgroundColor: deepPurpleColorPalette.white,
+    borderColor: deepPurpleColorPalette['beige.3'],
+    color: deepPurpleColorPalette.black
   },
   pending: {
-    backgroundColor: lateOceanColorPalette.white,
-    borderColor: lateOceanColorPalette['eggshell.3'],
-    color: lateOceanColorPalette.black
+    backgroundColor: deepPurpleColorPalette.white,
+    borderColor: deepPurpleColorPalette['beige.2'],
+    color: deepPurpleColorPalette.black
   },
   valid: {
-    backgroundColor: lateOceanColorPalette.white,
-    borderColor: lateOceanColorPalette['eggshell.4'],
-    color: lateOceanColorPalette.black
+    backgroundColor: deepPurpleColorPalette.white,
+    borderColor: deepPurpleColorPalette['beige.3'],
+    color: deepPurpleColorPalette.black
   },
   hover: {
-    backgroundColor: lateOceanColorPalette['eggshell.1'],
-    borderColor: lateOceanColorPalette['eggshell.5'],
-    color: lateOceanColorPalette.black
+    backgroundColor: deepPurpleColorPalette['beige.1'],
+    borderColor: deepPurpleColorPalette['beige.4'],
+    color: deepPurpleColorPalette.black
   },
   focus: {
-    borderColor: lateOceanColorPalette['violine.9'],
-    color: lateOceanColorPalette.black
+    borderColor: deepPurpleColorPalette['deepPurple.8'],
+    color: deepPurpleColorPalette.black
   },
   disabled: {
-    backgroundColor: lateOceanColorPalette['eggshell.2'],
-    borderColor: lateOceanColorPalette['eggshell.4'],
-    color: lateOceanColorPalette['eggshell.6']
+    backgroundColor: deepPurpleColorPalette['grey.1'],
+    borderColor: deepPurpleColorPalette['grey.1'],
+    color: deepPurpleColorPalette['grey.3']
   },
   invalid: {
-    borderColor: lateOceanColorPalette['eggshell.3'],
-    color: lateOceanColorPalette.black
+    borderColor: deepPurpleColorPalette['beige.2'],
+    color: deepPurpleColorPalette.black
   }
 };
 var webAnimationDuration = '200ms';
@@ -1087,11 +991,11 @@ var webAnimationProperties = ['border-color', 'background-color'];
 var input = {
   minHeight: 40,
   color: {
-    selection: lateOceanColorPalette['violine.9'],
-    placeholder: lateOceanColorPalette['eggshell.9']
+    selection: deepPurpleColorPalette['deepPurple.8'],
+    placeholder: deepPurpleColorPalette['beige.6']
   },
   borderWidth: 1,
-  borderRadius: 8,
+  borderRadius: 4,
   icon: {
     size: 20
   },
@@ -1128,7 +1032,7 @@ var inputTag = {
     labelColor: colors.uiBackgroundLight
   },
   "default": {
-    backgroundColor: lateOceanColorPalette.black50,
+    backgroundColor: deepPurpleColorPalette['beige.1'],
     labelColor: colors.black
   },
   borderRadius: 10,
@@ -1138,9 +1042,9 @@ var inputTag = {
 var radio = {
   size: 24,
   unchecked: {
-    borderWidth: 2,
+    borderWidth: 1,
     backgroundColor: colors.uiBackgroundLight,
-    borderColor: lateOceanColorPalette.black200
+    borderColor: deepPurpleColorPalette['beige.3']
   },
   checked: {
     backgroundColor: colors.primary,
@@ -1157,8 +1061,9 @@ var radio = {
     borderColor: colors.primary
   },
   disabled: {
-    backgroundColor: colors.disabled,
-    borderColor: colors.separator
+    backgroundColor: deepPurpleColorPalette['grey.3'],
+    borderColor: colors.transparent,
+    innerBackgroundColor: deepPurpleColorPalette['grey.1']
   },
   transition: {
     duration: '200ms',
@@ -1169,14 +1074,19 @@ var radio = {
 var radioButtonGroup = {
   item: {
     minHeight: 40,
-    borderWidth: 2,
-    borderRadius: 20,
+    borderWidth: 1,
+    borderRadius: 4,
+    font: {
+      color: {
+        disabled: deepPurpleColorPalette['grey.3']
+      }
+    },
     borderColor: {
       "default": colors.separator,
       hover: colors.primary,
       pressed: colors.primary,
       active: colors.primary,
-      disabled: colors.separator
+      disabled: colors.disabled
     },
     backgroundColor: {
       "default": colors.uiBackgroundLight,
@@ -1217,17 +1127,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette.black,
+        labelColor: deepPurpleColorPalette.black,
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.9'],
-          unchecked: lateOceanColorPalette['eggshell.4']
+          checked: deepPurpleColorPalette['deepPurple.8'],
+          unchecked: deepPurpleColorPalette['beige.3']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette.white,
+          backgroundColor: deepPurpleColorPalette.white,
           width: {
             medium: 18,
             large: 24
@@ -1255,17 +1165,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette.black,
+        labelColor: deepPurpleColorPalette.black,
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.8'],
-          unchecked: lateOceanColorPalette['eggshell.7']
+          checked: deepPurpleColorPalette['deepPurple.7'],
+          unchecked: deepPurpleColorPalette['beige.4']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette.white,
+          backgroundColor: deepPurpleColorPalette.white,
           width: {
             medium: 18,
             large: 24
@@ -1293,17 +1203,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette.black,
+        labelColor: deepPurpleColorPalette.black,
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.9'],
-          unchecked: lateOceanColorPalette['eggshell.4']
+          checked: deepPurpleColorPalette['deepPurple.8'],
+          unchecked: deepPurpleColorPalette['beige.3']
         },
         border: {
-          color: lateOceanColorPalette.white,
+          color: deepPurpleColorPalette.white,
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette.white,
+          backgroundColor: deepPurpleColorPalette.white,
           width: {
             medium: 18,
             large: 24
@@ -1318,7 +1228,7 @@ var toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.black,
+          color: deepPurpleColorPalette.black,
           width: 1
         }
       },
@@ -1331,17 +1241,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette.black,
+        labelColor: deepPurpleColorPalette.black,
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.9'],
-          unchecked: lateOceanColorPalette['eggshell.4']
+          checked: deepPurpleColorPalette['deepPurple.8'],
+          unchecked: deepPurpleColorPalette['beige.3']
         },
         border: {
-          color: lateOceanColorPalette.white,
+          color: deepPurpleColorPalette.white,
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette.white,
+          backgroundColor: deepPurpleColorPalette.white,
           width: {
             medium: 18,
             large: 24
@@ -1356,7 +1266,7 @@ var toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.black,
+          color: deepPurpleColorPalette.black,
           width: 1
         }
       }
@@ -1371,17 +1281,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette['eggshell.3'],
+        labelColor: deepPurpleColorPalette['beige.2'],
         backgroundColor: {
-          checked: lateOceanColorPalette['eggshell.3'],
-          unchecked: lateOceanColorPalette['eggshell.3']
+          checked: deepPurpleColorPalette['grey.1'],
+          unchecked: deepPurpleColorPalette['grey.1']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette['eggshell.5'],
+          backgroundColor: deepPurpleColorPalette['grey.3'],
           width: {
             medium: 18,
             large: 24
@@ -1409,17 +1319,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette['eggshell.3'],
+        labelColor: deepPurpleColorPalette['beige.2'],
         backgroundColor: {
-          checked: lateOceanColorPalette['eggshell.3'],
-          unchecked: lateOceanColorPalette['eggshell.3']
+          checked: deepPurpleColorPalette['grey.1'],
+          unchecked: deepPurpleColorPalette['grey.1']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette['eggshell.5'],
+          backgroundColor: deepPurpleColorPalette['grey.3'],
           width: {
             medium: 18,
             large: 24
@@ -1447,17 +1357,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette['eggshell.3'],
+        labelColor: deepPurpleColorPalette['beige.2'],
         backgroundColor: {
-          checked: lateOceanColorPalette['eggshell.3'],
-          unchecked: lateOceanColorPalette['eggshell.3']
+          checked: deepPurpleColorPalette['grey.1'],
+          unchecked: deepPurpleColorPalette['grey.1']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette['eggshell.5'],
+          backgroundColor: deepPurpleColorPalette['grey.3'],
           width: {
             medium: 18,
             large: 24
@@ -1472,7 +1382,7 @@ var toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.black,
+          color: deepPurpleColorPalette.black,
           width: 1
         }
       },
@@ -1485,17 +1395,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette['eggshell.3'],
+        labelColor: deepPurpleColorPalette['beige.2'],
         backgroundColor: {
-          checked: lateOceanColorPalette['eggshell.3'],
-          unchecked: lateOceanColorPalette['eggshell.3']
+          checked: deepPurpleColorPalette['grey.1'],
+          unchecked: deepPurpleColorPalette['grey.1']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette['eggshell.5'],
+          backgroundColor: deepPurpleColorPalette['grey.3'],
           width: {
             medium: 18,
             large: 24
@@ -1510,7 +1420,7 @@ var toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.black,
+          color: deepPurpleColorPalette.black,
           width: 1
         }
       }
@@ -1527,17 +1437,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette.white,
+        labelColor: deepPurpleColorPalette.white,
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.12'],
-          unchecked: lateOceanColorPalette['violine.4']
+          checked: deepPurpleColorPalette['deepPurple.9'],
+          unchecked: deepPurpleColorPalette['beige.3']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette.white,
+          backgroundColor: deepPurpleColorPalette.white,
           width: {
             medium: 18,
             large: 24
@@ -1565,17 +1475,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette.white,
+        labelColor: deepPurpleColorPalette.white,
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.12'],
-          unchecked: lateOceanColorPalette['violine.4']
+          checked: deepPurpleColorPalette['deepPurple.9'],
+          unchecked: deepPurpleColorPalette['beige.3']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette.white,
+          backgroundColor: deepPurpleColorPalette.white,
           width: {
             medium: 18,
             large: 24
@@ -1603,17 +1513,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette.white,
+        labelColor: deepPurpleColorPalette.white,
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.12'],
-          unchecked: lateOceanColorPalette['violine.4']
+          checked: deepPurpleColorPalette['deepPurple.9'],
+          unchecked: deepPurpleColorPalette['beige.3']
         },
         border: {
-          color: lateOceanColorPalette['violine.8'],
+          color: deepPurpleColorPalette['deepPurple.7'],
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette.white,
+          backgroundColor: deepPurpleColorPalette.white,
           width: {
             medium: 18,
             large: 24
@@ -1628,7 +1538,7 @@ var toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.white,
+          color: deepPurpleColorPalette.white,
           width: 1
         }
       },
@@ -1641,17 +1551,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette.white,
+        labelColor: deepPurpleColorPalette.white,
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.12'],
-          unchecked: lateOceanColorPalette['violine.4']
+          checked: deepPurpleColorPalette['deepPurple.9'],
+          unchecked: deepPurpleColorPalette['beige.3']
         },
         border: {
-          color: lateOceanColorPalette['violine.8'],
+          color: deepPurpleColorPalette['deepPurple.7'],
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette.white,
+          backgroundColor: deepPurpleColorPalette.white,
           width: {
             medium: 18,
             large: 24
@@ -1666,7 +1576,7 @@ var toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.white,
+          color: deepPurpleColorPalette.white,
           width: 1
         }
       }
@@ -1681,17 +1591,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette['violine.6'],
+        labelColor: deepPurpleColorPalette['beige.5'],
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.6'],
-          unchecked: lateOceanColorPalette['violine.6']
+          checked: deepPurpleColorPalette['beige.5'],
+          unchecked: deepPurpleColorPalette['beige.5']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette['violine.8'],
+          backgroundColor: deepPurpleColorPalette['deepPurple.7'],
           width: {
             medium: 18,
             large: 24
@@ -1719,17 +1629,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette['violine.6'],
+        labelColor: deepPurpleColorPalette['beige.5'],
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.6'],
-          unchecked: lateOceanColorPalette['violine.6']
+          checked: deepPurpleColorPalette['beige.5'],
+          unchecked: deepPurpleColorPalette['beige.5']
         },
         border: {
           color: 'transparent',
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette['violine.8'],
+          backgroundColor: deepPurpleColorPalette['deepPurple.7'],
           width: {
             medium: 18,
             large: 24
@@ -1757,17 +1667,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette['violine.6'],
+        labelColor: deepPurpleColorPalette['beige.5'],
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.6'],
-          unchecked: lateOceanColorPalette['violine.6']
+          checked: deepPurpleColorPalette['beige.5'],
+          unchecked: deepPurpleColorPalette['beige.5']
         },
         border: {
-          color: lateOceanColorPalette['violine.8'],
+          color: deepPurpleColorPalette['deepPurple.7'],
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette['violine.8'],
+          backgroundColor: deepPurpleColorPalette['deepPurple.7'],
           width: {
             medium: 18,
             large: 24
@@ -1782,7 +1692,7 @@ var toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.white,
+          color: deepPurpleColorPalette.white,
           width: 1
         }
       },
@@ -1795,17 +1705,17 @@ var toggle = {
           medium: 50,
           large: 66
         },
-        labelColor: lateOceanColorPalette['violine.6'],
+        labelColor: deepPurpleColorPalette['beige.5'],
         backgroundColor: {
-          checked: lateOceanColorPalette['violine.6'],
-          unchecked: lateOceanColorPalette['violine.6']
+          checked: deepPurpleColorPalette['beige.5'],
+          unchecked: deepPurpleColorPalette['beige.5']
         },
         border: {
-          color: lateOceanColorPalette['violine.8'],
+          color: deepPurpleColorPalette['deepPurple.7'],
           width: 1
         },
         circle: {
-          backgroundColor: lateOceanColorPalette['violine.8'],
+          backgroundColor: deepPurpleColorPalette['deepPurple.7'],
           width: {
             medium: 18,
             large: 24
@@ -1820,7 +1730,7 @@ var toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.white,
+          color: deepPurpleColorPalette.white,
           width: 1
         }
       }
@@ -1882,50 +1792,50 @@ var highlight = {
   },
   primary: {
     "default": {
-      backgroundColor: lateOceanColorPalette['lavender.3']
+      backgroundColor: deepPurpleColorPalette['beige.2']
     },
     hover: {
-      backgroundColor: lateOceanColorPalette['lavender.5']
+      backgroundColor: deepPurpleColorPalette['beige.4']
     }
   },
   secondary: {
     "default": {
-      backgroundColor: lateOceanColorPalette['violine.2']
+      backgroundColor: deepPurpleColorPalette['beige.1']
     },
     hover: {
-      backgroundColor: lateOceanColorPalette['violine.4']
+      backgroundColor: deepPurpleColorPalette['beige.3']
     }
   },
   ghost: {
     "default": {
-      backgroundColor: lateOceanColorPalette.white
+      backgroundColor: deepPurpleColorPalette.white
     },
     hover: {
-      backgroundColor: lateOceanColorPalette['eggshell.2']
+      backgroundColor: deepPurpleColorPalette['beige.1']
     }
   },
   dark: {
     "default": {
-      backgroundColor: lateOceanColorPalette['eggshell.3']
+      backgroundColor: deepPurpleColorPalette['beige.2']
     },
     hover: {
-      backgroundColor: lateOceanColorPalette['eggshell.2']
+      backgroundColor: deepPurpleColorPalette['beige.1']
     }
   },
   success: {
     "default": {
-      backgroundColor: lateOceanColorPalette['green.3']
+      backgroundColor: deepPurpleColorPalette['green.1']
     },
     hover: {
-      backgroundColor: lateOceanColorPalette['green.5']
+      backgroundColor: deepPurpleColorPalette['green.2']
     }
   },
   warning: {
     "default": {
-      backgroundColor: lateOceanColorPalette['sun.3']
+      backgroundColor: deepPurpleColorPalette['yellow.1']
     },
     hover: {
-      backgroundColor: lateOceanColorPalette['sun.5']
+      backgroundColor: deepPurpleColorPalette['yellow.2']
     }
   },
   padding: {
@@ -1965,14 +1875,6 @@ var icon = {
     header4: createTypographyIconSizeConfig(18, 24),
     // also known as xxsmall
     header5: createTypographyIconSizeConfig(18, 18),
-    'header-impact-xxl': createTypographyIconSizeConfig(56, 56),
-    'header-impact-xl': createTypographyIconSizeConfig(48, 48),
-    'header-impact-l': createTypographyIconSizeConfig(40, 40),
-    'header-impact-m': createTypographyIconSizeConfig(32, 32),
-    'header-impact-s': createTypographyIconSizeConfig(24, 24),
-    'header-impact-xs': createTypographyIconSizeConfig(18, 18),
-    'header-impact-xxs': createTypographyIconSizeConfig(16, 16),
-    'header-impact-xxxs': createTypographyIconSizeConfig(14, 14),
     'body-large': createTypographyIconSizeConfig(18, 24),
     'body-medium': createTypographyIconSizeConfig(18, 18),
     body: createTypographyIconSizeConfig(16, 16),
@@ -2017,7 +1919,7 @@ var iconButton = {
     pressedBackgroundColor: button["default"].ghost.pressedBackgroundColor
   },
   primary: {
-    pressedBackgroundColor: lateOceanColorPalette.moonPurpleLight1
+    pressedBackgroundColor: deepPurpleColorPalette['beige.1']
   },
   'primary-plain': {
     pressedBackgroundColor: colors.primaryLight,
@@ -2092,155 +1994,198 @@ var pageLoader = {
   }
 };
 
-var calcLineHeight = function (fontSize, lineHeightMultiplier) {
-  return Math.round(fontSize * lineHeightMultiplier);
-};
-/** @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 {
-    baseAndSmall: {
-      fontSize: baseAndSmallFontSize,
-      lineHeight: calcLineHeight(baseAndSmallFontSize, lineHeightMultiplierBaseAndSmall)
-    },
-    mediumAndWide: {
-      fontSize: mediumAndWideFontSize,
-      lineHeight: calcLineHeight(mediumAndWideFontSize, lineHeightMultiplierMediumAndWide)
-    }
-  };
-};
-var createTypographyConfig = function (fontSize, lineHeightMultiplier) {
-  var config = {
-    fontSize: fontSize,
-    lineHeight: calcLineHeight(fontSize, lineHeightMultiplier)
-  };
-  return {
-    baseAndSmall: config,
-    mediumAndWide: config
-  };
-};
 var typography = {
   colors: {
     black: colors.black,
     'black-anthracite': colors.blackAnthracite,
-    'black-disabled': lateOceanColorPalette.black400,
-    'black-light': lateOceanColorPalette.black555,
+    'black-disabled': deepPurpleColorPalette['grey.3'],
+    'black-light': deepPurpleColorPalette['grey.5'],
     white: colors.white,
     'white-light': colors.white,
     primary: colors.primary,
     'primary-light': colors.primaryLight,
     accent: colors.accent,
     success: colors.success,
-    danger: lateOceanColorPalette['coral.9'],
+    danger: deepPurpleColorPalette['red.6'],
     warning: colors.warning
   },
   types: {
     headings: {
       fontFamily: {
         "native": {
-          regular: 'Moderat-Bold',
-          bold: 'Moderat-Bold'
+          regular: 'GTStandardRegular',
+          semibold: 'GTStandardSemibold',
+          bold: 'GTStandardBold'
         },
         web: {
-          regular: 'Moderat',
-          bold: 'Moderat'
+          regular: 'GTStandard',
+          semibold: 'GTStandard',
+          bold: 'GTStandard'
         }
       },
       fontWeight: {
-        regular: 400,
+        regular: 500,
+        semibold: 600,
         bold: 700
       },
       fontStyle: 'normal',
       configs: {
-        /* legacy */
-        header1: createLegacyTypographyTypeConfig(1.1, 40, 56),
-        header2: createLegacyTypographyTypeConfig(1.15, 32, 48, 1.1),
-        header3: createLegacyTypographyTypeConfig(1.15, 24, 40, 1.1),
-        header4: createLegacyTypographyTypeConfig(1.15, 18, 24, 1.2),
-        header5: createLegacyTypographyTypeConfig(1.15, 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.15),
-        'heading-s': createTypographyConfig(24, 1.15),
-        'heading-xs': createTypographyConfig(18, 1.15),
-        'heading-xxs': createTypographyConfig(16, 1.15)
+        'heading-xxl': {
+          fontSize: 56,
+          lineHeight: 64,
+          allowedFontWeights: ['semibold']
+        },
+        'heading-xl': {
+          fontSize: 48,
+          lineHeight: 56,
+          allowedFontWeights: ['semibold']
+        },
+        'heading-l': {
+          fontSize: 40,
+          lineHeight: 48,
+          allowedFontWeights: ['semibold']
+        },
+        'heading-m': {
+          fontSize: 28,
+          lineHeight: 32,
+          allowedFontWeights: ['semibold']
+        },
+        'heading-s': {
+          fontSize: 18,
+          lineHeight: 20,
+          allowedFontWeights: ['regular', 'bold']
+        },
+        'heading-xs': {
+          fontSize: 16,
+          lineHeight: 18,
+          allowedFontWeights: ['regular', 'bold']
+        }
       }
     },
-    'headings-impact': {
+    bodies: {
       fontFamily: {
         "native": {
-          regular: 'Transducer-Black',
-          bold: 'Transducer-Black'
+          regular: 'GTStandardRegular',
+          bold: 'GTStandardBold'
         },
         web: {
-          regular: 'TransducerBlack',
-          bold: 'TransducerBlack'
+          regular: 'GTStandard',
+          bold: 'GTStandard'
         }
       },
-      fontWeight: 600,
-      fontStyle: 'normal',
+      fontWeight: {
+        regular: 500,
+        bold: 700
+      },
+      fontStyle: {
+        regular: 'normal',
+        bold: 'normal'
+      },
       configs: {
-        /* legacy */
-        'header-impact-xxl': createLegacyTypographyTypeConfig(1.1, 56, 56),
-        'header-impact-xl': createLegacyTypographyTypeConfig(1.1, 48, 48),
-        'header-impact-l': createLegacyTypographyTypeConfig(1.1, 40, 40),
-        'header-impact-m': createLegacyTypographyTypeConfig(1.1, 32, 32),
-        'header-impact-s': createLegacyTypographyTypeConfig(1.1, 24, 24),
-        'header-impact-xs': createLegacyTypographyTypeConfig(1.1, 18, 18),
-        'header-impact-xxs': createLegacyTypographyTypeConfig(1.1, 16, 16),
-        'header-impact-xxxs': createLegacyTypographyTypeConfig(1.1, 14, 14),
-        /* latest */
-        'heading-impact-xxl': createTypographyConfig(56, 1.1),
-        'heading-impact-xl': createTypographyConfig(48, 1.1),
-        'heading-impact-l': createTypographyConfig(40, 1.1),
-        'heading-impact-m': createTypographyConfig(32, 1.1),
-        'heading-impact-s': createTypographyConfig(24, 1.1),
-        'heading-impact-xs': createTypographyConfig(18, 1.1),
-        'heading-impact-xxs': createTypographyConfig(16, 1.1),
-        'heading-impact-xxxs': createTypographyConfig(14, 1.1)
+        'body-xl': {
+          fontSize: 24,
+          lineHeight: 32,
+          allowedFontWeights: ['regular', 'bold']
+        },
+        'body-l': {
+          fontSize: 18,
+          lineHeight: 26,
+          allowedFontWeights: ['regular', 'bold']
+        },
+        'body-m': {
+          fontSize: 16,
+          lineHeight: 24,
+          allowedFontWeights: ['regular', 'bold']
+        },
+        'body-s': {
+          fontSize: 14,
+          lineHeight: 20,
+          allowedFontWeights: ['regular', 'bold']
+        },
+        'body-xs': {
+          fontSize: 12,
+          lineHeight: 16,
+          allowedFontWeights: ['regular', 'bold']
+        }
       }
     },
-    bodies: {
+    labels: {
       fontFamily: {
-        web: {
-          regular: 'Moderat',
-          bold: 'Moderat'
+        "native": {
+          semibold: 'GTStandardSemibold'
         },
+        web: {
+          semibold: 'GTStandard'
+        }
+      },
+      fontWeight: {
+        semibold: 600
+      },
+      fontStyle: 'normal',
+      configs: {
+        'label-large': {
+          fontSize: 16,
+          lineHeight: 24,
+          allowedFontWeights: ['semibold']
+        },
+        'label-medium': {
+          fontSize: 14,
+          lineHeight: 20,
+          allowedFontWeights: ['semibold']
+        }
+      }
+    },
+    contentCaps: {
+      fontFamily: {
         "native": {
-          regular: 'Moderat-Regular',
-          bold: 'Moderat-Bold'
+          bold: 'GTStandardNarrowBold'
+        },
+        web: {
+          bold: 'GTStandardNarrow'
         }
       },
       fontWeight: {
-        regular: 400,
         bold: 700
       },
-      fontStyle: {
-        regular: 'normal',
-        bold: 'normal'
-      },
+      fontStyle: 'normal',
       configs: {
-        /* legacy */
-        'body-large': createLegacyTypographyTypeConfig(1.3, 18, 24),
-        'body-medium': createLegacyTypographyTypeConfig(1.3, 18, 18),
-        body: createLegacyTypographyTypeConfig(1.3, 16, 16),
-        'body-small': createLegacyTypographyTypeConfig(1.15, 14, 14),
-        'body-xsmall': createLegacyTypographyTypeConfig(1.15, 12, 12),
-        /* latest */
-        'body-xl': createTypographyConfig(24, 1.3),
-        'body-l': createTypographyConfig(18, 1.3),
-        'body-m': createTypographyConfig(16, 1.3),
-        'body-s': createTypographyConfig(14, 1.15),
-        'body-xs': createTypographyConfig(12, 1.15)
+        'content-caps-xxxl': {
+          fontSize: 40,
+          lineHeight: 40,
+          allowedFontWeights: ['bold']
+        },
+        'content-caps-xxl': {
+          fontSize: 32,
+          lineHeight: 40,
+          allowedFontWeights: ['bold']
+        },
+        'content-caps-xl': {
+          fontSize: 24,
+          lineHeight: 28,
+          allowedFontWeights: ['bold']
+        },
+        'content-caps-l': {
+          fontSize: 18,
+          lineHeight: 20,
+          allowedFontWeights: ['bold']
+        },
+        'content-caps-m': {
+          fontSize: 16,
+          lineHeight: 18,
+          allowedFontWeights: ['bold']
+        },
+        'content-caps-s': {
+          fontSize: 14,
+          lineHeight: 16,
+          allowedFontWeights: ['bold']
+        },
+        'content-caps-xs': {
+          fontSize: 12,
+          lineHeight: 14,
+          allowedFontWeights: ['bold']
+        }
       }
     }
-  },
-  link: {
-    /** @deprecated not used in kitt anymore, use Typography instead */
-    disabledColor: colors.blackDisabled
   }
 };
 
@@ -2249,7 +2194,7 @@ var picker = {
   ios: {
     "default": _objectSpread(_objectSpread({
       fontFamily: typography.types.bodies.fontFamily["native"].regular
-    }, typography.types.bodies.configs.body.baseAndSmall), {}, {
+    }, typography.types.bodies.configs['body-m']), {}, {
       fontSize: 16,
       color: typography.colors['black-light'],
       // Default height is hard coded in module because of iOS constraint (https://github.com/react-native-picker/picker/blob/abd5f9076baa3ef2277ea7e711fa5823683c110e/js/PickerIOS.ios.js#L156)
@@ -2282,19 +2227,19 @@ var picker = {
         backgroundColor: colors.transparent
       },
       hovered: {
-        backgroundColor: lateOceanColorPalette.black50
+        backgroundColor: deepPurpleColorPalette['beige.1']
       },
       focused: {
-        backgroundColor: lateOceanColorPalette.black50
+        backgroundColor: deepPurpleColorPalette['beige.1']
       },
       selected: {
-        backgroundColor: lateOceanColorPalette.black50
+        backgroundColor: deepPurpleColorPalette['beige.1']
       },
       highlighted: {
-        backgroundColor: lateOceanColorPalette.black50
+        backgroundColor: deepPurpleColorPalette['beige.1']
       },
       pressed: {
-        backgroundColor: lateOceanColorPalette.black100
+        backgroundColor: deepPurpleColorPalette['beige.2']
       }
     }
   },
@@ -2378,8 +2323,8 @@ var shadows = {
   }
 };
 
-var skeletonBackgroundColor = lateOceanColorPalette.black100;
-var skeletonFlareColor = lateOceanColorPalette.black200;
+var skeletonBackgroundColor = deepPurpleColorPalette['beige.2'];
+var skeletonFlareColor = deepPurpleColorPalette['beige.3'];
 var skeleton$1 = {
   backgroundColor: skeletonBackgroundColor,
   flareColor: skeletonFlareColor,
@@ -2402,20 +2347,6 @@ var skeleton$1 = {
 
 var tag = {
   borderRadius: 16,
-  variant: {
-    contrast: {
-      borderWidth: 0
-    },
-    fill: {
-      borderWidth: 0
-    },
-    outline: {
-      borderWidth: 1
-    },
-    subtle: {
-      borderWidth: 0
-    }
-  },
   icon: {
     small: 16,
     medium: 16,
@@ -2491,14 +2422,14 @@ var verticalSteps = {
   },
   done: {
     icon: {
-      backgroundColor: lateOceanColorPalette.moonPurple,
-      textColor: colors.primary
+      backgroundColor: colors.primary,
+      textColor: colors.white
     }
   },
   "default": {
     icon: {
       backgroundColor: colors.disabled,
-      textColor: colors.blackDisabled
+      textColor: deepPurpleColorPalette['grey.3']
     }
   }
 };
@@ -2534,7 +2465,7 @@ var theme = {
   },
   colors: colors,
   palettes: {
-    lateOcean: lateOceanColorPalette
+    deepPurple: deepPurpleColorPalette
   },
   avatar: avatar,
   breakpoints: breakpoints,
@@ -3001,14 +2932,18 @@ function getTypographyColorValue(colorName) {
 }
 
 var isTypeHeadings = function (type) {
-  return type.startsWith('header') || type.startsWith('heading');
+  return type.startsWith('heading');
+};
+var isTypeLabels = function (type) {
+  return type.startsWith('label');
 };
-var isTypeHeadingsImpact = function (type) {
-  return type.startsWith('heading-impact') || type.startsWith('header-impact');
+var isTypeContentCaps = function (type) {
+  return type.startsWith('content-caps');
 };
 var getTypographyFamily = function (type) {
-  if (isTypeHeadingsImpact(type)) return 'headings-impact';
   if (isTypeHeadings(type)) return 'headings';
+  if (isTypeLabels(type)) return 'labels';
+  if (isTypeContentCaps(type)) return 'contentCaps';
   return 'bodies';
 };
 var getTypographyFamilyWithAncestorValue = function (type, typographyFamilyInContext) {
@@ -3017,7 +2952,7 @@ var getTypographyFamilyWithAncestorValue = function (type, typographyFamilyInCon
   throw new Error('You must set a "base" prop or wrap this Typography in one that does.');
 };
 
-var _excluded$R = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
+var _excluded$R = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color", "underline"];
 var TypographyFamilyContext = /*#__PURE__*/createContext(null);
 var TypographyTypeContext = /*#__PURE__*/createContext(null);
 var TypographyColorContext = /*#__PURE__*/createContext('black');
@@ -3031,9 +2966,6 @@ var TypographyDefaultColorContext = /*#__PURE__*/createContext(undefined);
 function useTypographyDefaultColor() {
   return useContext(TypographyDefaultColorContext);
 }
-function getTypographyTypeConfigKeyFromTypeName(breakpointName) {
-  return breakpointName === KittBreakpointNameEnum.BASE || breakpointName === KittBreakpointNameEnum.SMALL ? 'baseAndSmall' : 'mediumAndWide';
-}
 
 // TODO[native-base@>=3.4.19] this currently does not work. Retest when updating native-base.
 // & {
@@ -3049,42 +2981,120 @@ function createNativeBaseFontSize(type) {
   [KittBreakpointNameEnum.BASE, KittBreakpointNameEnum.SMALL, KittBreakpointNameEnum.MEDIUM, KittBreakpointNameEnum.LARGE, KittBreakpointNameEnum.WIDE].forEach(function (typeName) {
     var value = typeWithMediumForced[typeName];
     if (value) {
-      fontSizeForNativeBase[typeName] = "".concat(getTypographyTypeConfigKeyFromTypeName(typeName), ".").concat(value);
+      fontSizeForNativeBase[typeName] = value;
     }
   });
   return fontSizeForNativeBase;
 }
-function Typography(_ref) {
+function ThrowErrorIfInvalidVariant(variant, value, fontWeight) {
+  if (process.env.NODE_ENV !== 'production' && variant && variant !== fontWeight) {
+    throw new Error("Invalid variant \"".concat(variant, "\" for value \"").concat(value, "\" only \"").concat(fontWeight, "\" is allowed."));
+  }
+}
+function getTypographyWeights(typographyFamily) {
+  var boldTypoTypes = new Set();
+  var semiboldTypoTypes = new Set();
+  var regularTypoTypes = new Set();
+  var typographyConfig = typography.types[typographyFamily].configs;
+  Object.keys(typographyConfig).forEach(function (typographyType) {
+    var _ref = typographyConfig[typographyType],
+      allowedFontWeights = _ref.allowedFontWeights;
+    if (allowedFontWeights.includes('bold')) {
+      boldTypoTypes.add(typographyType);
+    }
+    if (allowedFontWeights.includes('semibold')) {
+      semiboldTypoTypes.add(typographyType);
+    }
+    if (allowedFontWeights.includes('regular')) {
+      regularTypoTypes.add(typographyType);
+    }
+  });
+  return {
+    boldTypoTypes: boldTypoTypes,
+    semiboldTypoTypes: semiboldTypoTypes,
+    regularTypoTypes: regularTypoTypes
+  };
+}
+function getUniversalFontWeight(type, variant, typographyFamily) {
+  var _getTypographyWeights = getTypographyWeights(typographyFamily || 'bodies'),
+    boldTypoTypes = _getTypographyWeights.boldTypoTypes,
+    semiboldTypoTypes = _getTypographyWeights.semiboldTypoTypes,
+    regularTypoTypes = _getTypographyWeights.regularTypoTypes;
+  var webFontWeight = {};
+  var nativeFontFamily = {};
+  var breakpoints = [KittBreakpointNameEnum.BASE, KittBreakpointNameEnum.SMALL, KittBreakpointNameEnum.MEDIUM, KittBreakpointNameEnum.LARGE, KittBreakpointNameEnum.WIDE];
+  breakpoints.forEach(function (typeName) {
+    var value = type[typeName];
+    if (!value) return;
+    var inBold = boldTypoTypes.has(value);
+    var inSemi = semiboldTypoTypes.has(value);
+    var inRegular = regularTypoTypes.has(value);
+    var presenceCount = [inBold, inSemi, inRegular].filter(Boolean).length;
+    var resolvedVariant;
+    if (presenceCount > 1) {
+      // if present in multiple weight
+
+      if (process.env.NODE_ENV !== 'production' && variant && !(variant === 'bold' && inBold || variant === 'semibold' && inSemi || variant === 'regular' && inRegular)) {
+        throw new Error("Invalid variant \"".concat(variant, "\" for value \"").concat(value, "\". Only ").concat(inBold ? '"bold"' : ' ').concat(inSemi ? '"semibold"' : ' ').concat(inRegular ? '"regular"' : ' ', "\" is allowed."));
+      }
+
+      // always fallback on regular if no variant specified
+      resolvedVariant = variant || 'regular';
+    } else if (inBold) {
+      // bold
+      ThrowErrorIfInvalidVariant(variant, value, 'bold');
+      resolvedVariant = 'bold';
+    } else if (inSemi) {
+      // semibold
+      ThrowErrorIfInvalidVariant(variant, value, 'semibold');
+      resolvedVariant = 'semibold';
+    } else {
+      // regular
+      ThrowErrorIfInvalidVariant(variant, value, 'regular');
+      resolvedVariant = 'regular';
+    }
+    webFontWeight[typeName] = resolvedVariant;
+    nativeFontFamily[typeName] = "".concat(typographyFamily, ".").concat(resolvedVariant);
+  });
+  return {
+    webFontWeight: webFontWeight,
+    nativeFontFamily: nativeFontFamily
+  };
+}
+function Typography(_ref2) {
   var _type$base;
-  var accessibilityRole = _ref.accessibilityRole,
-    legacyBase = _ref.base,
-    legacySmall = _ref.small,
-    legacyMedium = _ref.medium,
-    legacyLarge = _ref.large,
-    legacyWide = _ref.wide,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? {
+  var accessibilityRole = _ref2.accessibilityRole,
+    legacyBase = _ref2.base,
+    legacySmall = _ref2.small,
+    legacyMedium = _ref2.medium,
+    legacyLarge = _ref2.large,
+    legacyWide = _ref2.wide,
+    _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? {
       base: legacyBase,
       small: legacySmall,
       medium: legacyMedium,
       large: legacyLarge,
       wide: legacyWide
-    } : _ref$type,
-    variant = _ref.variant,
-    color = _ref.color,
-    otherProps = _objectWithoutProperties(_ref, _excluded$R);
+    } : _ref2$type,
+    variant = _ref2.variant,
+    color = _ref2.color,
+    underline = _ref2.underline,
+    otherProps = _objectWithoutProperties(_ref2, _excluded$R);
   var sx = useSx();
   var typographyFamilyInContext = useContext(TypographyFamilyContext);
   var defaultColor = useTypographyDefaultColor();
   var hasTypographyAncestor = typographyFamilyInContext !== null;
-  var baseOrDefaultToBody = hasTypographyAncestor ? type.base : (_type$base = type.base) !== null && _type$base !== void 0 ? _type$base : 'body';
+  var baseOrDefaultToBody = hasTypographyAncestor ? type.base : (_type$base = type.base) !== null && _type$base !== void 0 ? _type$base : 'body-m';
   var typographyFamily = getTypographyFamilyWithAncestorValue(baseOrDefaultToBody, typographyFamilyInContext);
-
-  // 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
   }));
+  var _getUniversalFontWeig = getUniversalFontWeight(_objectSpread(_objectSpread({}, type), {}, {
+      base: baseOrDefaultToBody
+    }), variant, typographyFamily),
+    webFontWeight = _getUniversalFontWeig.webFontWeight,
+    nativeFontFamily = _getUniversalFontWeig.nativeFontFamily;
   var currentColor = !color && !hasTypographyAncestor ? defaultColor : color;
   var currentColorValue = getTypographyColorValue(currentColor);
   var colorStyles = sx({
@@ -3092,22 +3102,30 @@ function Typography(_ref) {
     textDecorationColor: currentColorValue
   });
   if (process.env.NODE_ENV !== 'production') {
-    Object.entries(type).forEach(function (_ref2) {
-      var _ref3 = _slicedToArray(_ref2, 2),
-        key = _ref3[0],
-        value = _ref3[1];
+    Object.entries(type).forEach(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        key = _ref4[0],
+        value = _ref4[1];
       if (value && getTypographyFamily(value) !== typographyFamily) {
         throw new Error("Invalid value for \"".concat(key, "\": \"").concat(value, "\" is ").concat(typographyFamily, ". Don't mix families."));
       }
     });
   }
-  var text = /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({
+  var text = /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread(_objectSpread({
     accessibilityRole: accessibilityRole || undefined,
     fontSize: fontSizeForNativeBase,
     lineHeight: hasTypographyAncestor ? undefined : fontSizeForNativeBase,
-    fontWeight: "".concat(typographyFamily, ".").concat(nonNullableVariant),
-    fontFamily: "".concat(typographyFamily, ".").concat(nonNullableVariant)
-  }, colorStyles), otherProps));
+    fontWeight: webFontWeight,
+    fontFamily: nativeFontFamily,
+    borderBottomWidth: underline ? 1 : undefined,
+    borderBottomColor: underline ? currentColorValue : undefined,
+    textTransform: typographyFamily === 'contentCaps' ? 'uppercase' : undefined
+  }, colorStyles), otherProps), {}, {
+    // The property text-underline-offset is not on native.
+    // To add an underline with an offset, we use a custom borderBottomWidth and color.
+    // and we set underline to undefined to avoid a double underline
+    underline: undefined
+  }));
   var content = baseOrDefaultToBody ? /*#__PURE__*/jsx(TypographyFamilyContext.Provider, {
     value: typographyFamily,
     children: /*#__PURE__*/jsx(TypographyTypeContext.Provider, {
@@ -3154,17 +3172,6 @@ Typography.Header4 = createHeading(4);
 Typography.Header5 = createHeading(5);
 Typography.Header6 = createHeading(6);
 
-/** @deprecated use Typography.Header1 */
-Typography.h1 = createHeading(1, 'header1');
-/** @deprecated use Typography.Header2 */
-Typography.h2 = createHeading(2, 'header2');
-/** @deprecated use Typography.Header3 */
-Typography.h3 = createHeading(3, 'header3');
-/** @deprecated use Typography.Header4 */
-Typography.h4 = createHeading(4, 'header4');
-/** @deprecated use Typography.Header6 */
-Typography.h5 = createHeading(5, 'header5');
-
 function ButtonBadge(_ref) {
   var withBadge = _ref.withBadge,
     badgeCount = _ref.badgeCount;
@@ -3352,7 +3359,7 @@ function ButtonContentChildren(_ref2) {
       textAlign: "center",
       _android: sharedNativeStyle,
       _ios: sharedNativeStyle,
-      base: "body",
+      base: "body-m",
       variant: "bold",
       color: color,
       children: children
@@ -3828,7 +3835,7 @@ function AvatarContent(_ref) {
   };
   if (firstname && lastname) {
     return /*#__PURE__*/jsx(Typography.Text, {
-      base: sizeVariant === 'large' ? 'body-large' : 'body-small',
+      base: sizeVariant === 'large' ? 'body-l' : 'body-s',
       variant: sizeVariant === 'large' ? 'bold' : 'regular',
       color: getFontColor(),
       children: getInitials(firstname, lastname)
@@ -4923,7 +4930,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
     props = _objectWithoutProperties(_ref, _excluded$z);
   var theme = useTheme();
   var fontSizeForNativeBase = createNativeBaseFontSize({
-    base: 'body'
+    base: 'body-m'
   });
   return /*#__PURE__*/jsxs(InputTextContainer, {
     children: [/*#__PURE__*/jsx(Input, _objectSpread(_objectSpread({
@@ -6443,7 +6450,7 @@ function InputFeedback(_ref) {
     testID = _ref.testID,
     children = _ref.children;
   return /*#__PURE__*/jsx(Typography.Text, {
-    base: "body-small",
+    base: "body-s",
     color: getColorFromState(state),
     testID: testID,
     children: children
@@ -6605,7 +6612,7 @@ function InputTag(_ref) {
         color: "black"
       })
     }) : null, /*#__PURE__*/jsx(Typography.Text, {
-      base: "body-small",
+      base: "body-s",
       color: "black",
       children: children
     })]
@@ -6617,7 +6624,7 @@ function Label(_ref) {
     htmlFor = _ref.htmlFor,
     children = _ref.children;
   return /*#__PURE__*/jsx(Typography.Text, {
-    base: "body",
+    base: "body-m",
     id: undefined,
     children: /*#__PURE__*/jsx("label", {
       id: id,
@@ -6628,7 +6635,8 @@ function Label(_ref) {
 }
 
 function InnerCircle(_ref) {
-  var isChecked = _ref.isChecked;
+  var isChecked = _ref.isChecked,
+    isDisabled = _ref.isDisabled;
   var theme = useTheme();
   var sharedTransform = [{
     scale: isChecked ? 1 : 0
@@ -6637,7 +6645,7 @@ function InnerCircle(_ref) {
     width: "kitt.forms.radio.innerCircle.size",
     height: "kitt.forms.radio.innerCircle.size",
     borderRadius: "kitt.forms.radio.innerCircle.borderRadius",
-    backgroundColor: "kitt.forms.radio.innerCircle.backgroundColor",
+    backgroundColor: isDisabled ? 'kitt.forms.radio.disabled.innerBackgroundColor' : 'kitt.forms.radio.innerCircle.backgroundColor',
     _web: {
       style: {
         transform: "scale(".concat(isChecked ? 1 : 0, "))"),
@@ -6768,12 +6776,13 @@ function Radio(_ref, ref) {
           isFocused: isFocused,
           isPressed: isPressed,
           children: /*#__PURE__*/jsx(InnerCircle, {
-            isChecked: checked
+            isChecked: checked,
+            isDisabled: disabled
           })
         }), _children ? /*#__PURE__*/jsx(Typography.SetDefaultColor, {
           value: disabled ? 'black-light' : 'black',
           children: /*#__PURE__*/jsx(Typography.Text, {
-            base: "body",
+            base: "body-m",
             children: _children
           })
         }) : null]
@@ -6894,7 +6903,7 @@ function getCurrentTextColor(_ref) {
     isPressed = _ref.isPressed,
     isHovered = _ref.isHovered,
     isFocused = _ref.isFocused;
-  if (isDisabled) return 'black-light';
+  if (isDisabled) return 'kitt.forms.radioButtonGroup.font.disabled.color';
   if (isSelected) return 'white';
   if (isPressed) return 'white';
   if (isFocused) return 'white';
@@ -7067,7 +7076,7 @@ var TextArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
       marginTop: "kitt.1",
       children: [helper ? /*#__PURE__*/jsx(Typography.Text, {
         base: "body-s",
-        color: lateOceanColorPalette['eggshell.10'],
+        color: deepPurpleColorPalette['grey.5'],
         children: helper
       }) : null, shouldDisplayLimit ? /*#__PURE__*/jsx(Animated.View, {
         style: limitContainerAnimatedStyle,
@@ -7077,14 +7086,14 @@ var TextArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
           children: [/*#__PURE__*/jsxs(Typography.Text, {
             base: "body-xs",
             variant: "bold",
-            color: lateOceanColorPalette['eggshell.10'],
+            color: deepPurpleColorPalette['grey.5'],
             children: [((_props$value2 = props.value) === null || _props$value2 === void 0 ? void 0 : _props$value2.length) || 0, "/", limit]
           }), /*#__PURE__*/jsx(Animated.View, {
             style: checkIconAnimatedStyle,
             children: /*#__PURE__*/jsx(TypographyIcon, {
               icon: /*#__PURE__*/jsx(CheckCircleFillIcon, {}),
               size: 13,
-              color: lateOceanColorPalette['eggshell.10']
+              color: deepPurpleColorPalette['grey.5']
             })
           })]
         })
@@ -7192,7 +7201,7 @@ function ToggleAnimated(_ref) {
 
 var _excluded$n = ["isDisabled", "isHoveredInternal", "isFocusedInternal", "isPressedInternal", "label", "variant", "size", "value", "onChange"];
 var getLabelTypographyType = function (size) {
-  return size === 'medium' ? 'body' : 'body-medium';
+  return size === 'medium' ? 'body-m' : 'body-l';
 };
 function Toggle(_ref) {
   var _ref$isDisabled = _ref.isDisabled,
@@ -7673,7 +7682,7 @@ function Highlight(_ref) {
             marginBottom: highlightStyle[size].marginBottom,
             children: /*#__PURE__*/jsx(Typography.Text, {
               variant: "bold",
-              base: "body",
+              base: "body-m",
               ellipsizeMode: "clip",
               children: title
             })
@@ -7708,7 +7717,7 @@ function Highlight(_ref) {
             width: "100%",
             children: /*#__PURE__*/jsx(Typography.Text, {
               variant: "bold",
-              base: "body",
+              base: "body-m",
               ellipsizeMode: "clip",
               children: title
             })
@@ -8012,8 +8021,8 @@ function InfoCard(_ref) {
       flexShrink: 1,
       flexBasis: "auto",
       children: /*#__PURE__*/jsx(Typography.Text, {
-        base: "body-small",
-        medium: "body",
+        base: "body-s",
+        medium: "body-m",
         style: {
           userSelect: 'none'
         },
@@ -8426,7 +8435,7 @@ function BaseMessage(_ref) {
         flexGrow: 1,
         flexShrink: 1,
         textAlign: centeredText ? 'center' : 'left',
-        base: "body",
+        base: "body-m",
         color: color,
         children: children
       })]
@@ -8710,6 +8719,11 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             item: {
               borderColor: theme.forms.radioButtonGroup.item.borderColor,
               backgroundColor: theme.forms.radioButtonGroup.item.backgroundColor
+            },
+            font: {
+              disabled: {
+                color: theme.forms.radioButtonGroup.item.font.color.disabled
+              }
             }
           },
           checkbox: {
@@ -9024,7 +9038,8 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             },
             disabled: {
               backgroundColor: theme.forms.radio.disabled.backgroundColor,
-              borderColor: theme.forms.radio.disabled.borderColor
+              borderColor: theme.forms.radio.disabled.borderColor,
+              innerBackgroundColor: theme.forms.radio.disabled.innerBackgroundColor
             },
             "default": {
               backgroundColor: theme.forms.radio.unchecked.backgroundColor,
@@ -9578,22 +9593,6 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
         },
         listItem: {
           borderWidth: theme.listItem.borderWidth
-        },
-        tag: {
-          variant: {
-            subtle: {
-              borderWidth: theme.tag.variant.subtle.borderWidth
-            },
-            fill: {
-              borderWidth: theme.tag.variant.fill.borderWidth
-            },
-            outline: {
-              borderWidth: theme.tag.variant.outline.borderWidth
-            },
-            contrast: {
-              borderWidth: theme.tag.variant.contrast.borderWidth
-            }
-          }
         }
       },
       app: appTheme === null || appTheme === void 0 ? void 0 : appTheme.borderWidths
@@ -10212,196 +10211,71 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
       '2xl': Number.MAX_SAFE_INTEGER
     }, appBreakpoints),
     fontSizes: {
-      baseAndSmall: {
-        /* 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['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: {
-        /* 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['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")
-      }
+      'heading-xxl': "".concat(theme.typography.types.headings.configs['heading-xxl'].fontSize, "px"),
+      'heading-xl': "".concat(theme.typography.types.headings.configs['heading-xl'].fontSize, "px"),
+      'heading-l': "".concat(theme.typography.types.headings.configs['heading-l'].fontSize, "px"),
+      'heading-m': "".concat(theme.typography.types.headings.configs['heading-m'].fontSize, "px"),
+      'heading-s': "".concat(theme.typography.types.headings.configs['heading-s'].fontSize, "px"),
+      'heading-xs': "".concat(theme.typography.types.headings.configs['heading-xs'].fontSize, "px"),
+      'body-xl': "".concat(theme.typography.types.bodies.configs['body-xl'].fontSize, "px"),
+      'body-l': "".concat(theme.typography.types.bodies.configs['body-l'].fontSize, "px"),
+      'body-m': "".concat(theme.typography.types.bodies.configs['body-m'].fontSize, "px"),
+      'body-s': "".concat(theme.typography.types.bodies.configs['body-s'].fontSize, "px"),
+      'body-xs': "".concat(theme.typography.types.bodies.configs['body-xs'].fontSize, "px"),
+      'label-large': "".concat(theme.typography.types.labels.configs['label-large'].fontSize, "px"),
+      'label-medium': "".concat(theme.typography.types.labels.configs['label-medium'].fontSize, "px"),
+      'content-caps-xxxl': "".concat(theme.typography.types.contentCaps.configs['content-caps-xxxl'].fontSize, "px"),
+      'content-caps-xxl': "".concat(theme.typography.types.contentCaps.configs['content-caps-xxl'].fontSize, "px"),
+      'content-caps-xl': "".concat(theme.typography.types.contentCaps.configs['content-caps-xl'].fontSize, "px"),
+      'content-caps-l': "".concat(theme.typography.types.contentCaps.configs['content-caps-l'].fontSize, "px"),
+      'content-caps-m': "".concat(theme.typography.types.contentCaps.configs['content-caps-m'].fontSize, "px"),
+      'content-caps-s': "".concat(theme.typography.types.contentCaps.configs['content-caps-s'].fontSize, "px"),
+      'content-caps-xs': "".concat(theme.typography.types.contentCaps.configs['content-caps-xs'].fontSize, "px")
     },
     lineHeights: {
-      baseAndSmall: {
-        /* 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['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: {
-        /* 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['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")
-      }
+      'heading-xxl': "".concat(theme.typography.types.headings.configs['heading-xxl'].lineHeight, "px"),
+      'heading-xl': "".concat(theme.typography.types.headings.configs['heading-xl'].lineHeight, "px"),
+      'heading-l': "".concat(theme.typography.types.headings.configs['heading-l'].lineHeight, "px"),
+      'heading-m': "".concat(theme.typography.types.headings.configs['heading-m'].lineHeight, "px"),
+      'heading-s': "".concat(theme.typography.types.headings.configs['heading-s'].lineHeight, "px"),
+      'heading-xs': "".concat(theme.typography.types.headings.configs['heading-xs'].lineHeight, "px"),
+      'body-xl': "".concat(theme.typography.types.bodies.configs['body-xl'].lineHeight, "px"),
+      'body-l': "".concat(theme.typography.types.bodies.configs['body-l'].lineHeight, "px"),
+      'body-m': "".concat(theme.typography.types.bodies.configs['body-m'].lineHeight, "px"),
+      'body-s': "".concat(theme.typography.types.bodies.configs['body-s'].lineHeight, "px"),
+      'body-xs': "".concat(theme.typography.types.bodies.configs['body-xs'].lineHeight, "px"),
+      'label-large': "".concat(theme.typography.types.labels.configs['label-large'].lineHeight, "px"),
+      'label-medium': "".concat(theme.typography.types.labels.configs['label-medium'].lineHeight, "px"),
+      'content-caps-xxxl': "".concat(theme.typography.types.contentCaps.configs['content-caps-xxxl'].lineHeight, "px"),
+      'content-caps-xxl': "".concat(theme.typography.types.contentCaps.configs['content-caps-xxl'].lineHeight, "px"),
+      'content-caps-xl': "".concat(theme.typography.types.contentCaps.configs['content-caps-xl'].lineHeight, "px"),
+      'content-caps-l': "".concat(theme.typography.types.contentCaps.configs['content-caps-l'].lineHeight, "px"),
+      'content-caps-m': "".concat(theme.typography.types.contentCaps.configs['content-caps-m'].lineHeight, "px"),
+      'content-caps-s': "".concat(theme.typography.types.contentCaps.configs['content-caps-s'].lineHeight, "px"),
+      'content-caps-xs': "".concat(theme.typography.types.contentCaps.configs['content-caps-xs'].lineHeight, "px")
     },
     fontWeights: {
       headings: {
         regular: theme.typography.types.headings.fontWeight.regular,
         bold: theme.typography.types.headings.fontWeight.bold
       },
-      'headings-impact': {
-        regular: theme.typography.types['headings-impact'].fontWeight,
-        bold: theme.typography.types['headings-impact'].fontWeight
-      },
       bodies: {
         regular: theme.typography.types.bodies.fontWeight.regular,
         // TODO [https://ornikar.atlassian.net/browse/CME-767] This quick fix should be replaced by a 700 in every case, and native font weights should be handled by expo-fonts
         bold: theme.typography.types.bodies.fontWeight.bold
+      },
+      labels: {
+        semibold: theme.typography.types.labels.fontWeight.semibold
+      },
+      contentCaps: {
+        bold: theme.typography.types.contentCaps.fontWeight.bold
       }
     },
     fonts: {
       headings: theme.typography.types.headings.fontFamily.web,
-      'headings-impact': theme.typography.types['headings-impact'].fontFamily.web,
-      bodies: theme.typography.types.bodies.fontFamily.web
+      bodies: theme.typography.types.bodies.fontFamily.web,
+      labels: theme.typography.types.labels.fontFamily.web,
+      contentCaps: theme.typography.types.contentCaps.fontFamily.web
     },
     shadows: {
       kitt: {
@@ -10896,7 +10770,7 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
             _disabled: {
               placeholderTextColor: theme.forms.input.states.disabled.color,
               color: theme.forms.input.states.disabled.color,
-              borderColor: theme.forms.input.states.disabled.borderColor,
+              borderColor: theme.forms.input.states.disabled.backgroundColor,
               bg: theme.forms.input.states.disabled.backgroundColor
             }
           }
@@ -10926,7 +10800,7 @@ function createKittNativeBaseCustomTheme(theme, appTheme) {
           fontStyle: theme.typography.types.bodies.fontStyle.regular,
           fontWeight: theme.typography.types.bodies.fontWeight.regular,
           fontSize: undefined,
-          lineHeight: theme.typography.types.bodies.configs.body.baseAndSmall.lineHeight
+          lineHeight: theme.typography.types.bodies.configs['body-m'].lineHeight
         }
       }
     }
@@ -11271,7 +11145,7 @@ function PickerOption(_ref) {
     isSelected = _ref.isSelected;
   return /*#__PURE__*/jsx(Typography.Text, {
     testID: testID,
-    base: "body",
+    base: "body-m",
     children: typeof children === 'function' ? children({
       isHighlighted: isHighlighted,
       isSelected: isSelected
@@ -11503,8 +11377,9 @@ function SegmentedProgressBar(_ref) {
     _ref$colorVariant = _ref.colorVariant,
     colorVariant = _ref$colorVariant === void 0 ? 'primary' : _ref$colorVariant,
     withCurrentInProgress = _ref.withCurrentInProgress;
+  var kittTheme = useKittTheme();
   var height = size === 'small' ? 'kitt.2' : 'kitt.4';
-  var fillColor = colorVariant === 'validated' ? 'kitt.palettes.lateOcean.viride' : 'kitt.palettes.lateOcean.lateOceanLight1';
+  var fillColor = colorVariant === 'validated' ? kittTheme.kitt.palettes.deepPurple['green.6'] : kittTheme.kitt.palettes.deepPurple['deepPurple.8'];
   var steps = _toConsumableArray(Array.from({
     length: stepsCount
   }).keys());
@@ -11515,13 +11390,13 @@ function SegmentedProgressBar(_ref) {
     overflow: "hidden",
     children: steps.map(function (stepNumber) {
       var isSegmentCurrentInProgress = withCurrentInProgress && stepNumber === currentStep - 1;
-      var color = stepNumber < currentStep ? fillColor : 'kitt.palettes.lateOcean.black50';
+      var color = stepNumber < currentStep ? fillColor : kittTheme.kitt.palettes.deepPurple['beige.1'];
       return /*#__PURE__*/jsx(View$1, {
         height: "100%",
         flexGrow: 1,
         flexShrink: 1,
         flexBasis: 0,
-        backgroundColor: isSegmentCurrentInProgress ? 'kitt.palettes.lateOcean.lateOceanLight3' : color,
+        backgroundColor: isSegmentCurrentInProgress ? kittTheme.kitt.palettes.deepPurple['deepPurple.5'] : color,
         borderRadius: 2,
         overflow: "hidden",
         alignItems: "center",
@@ -11866,9 +11741,9 @@ var getBackgroundColorFromBlockColor = function (theme) {
     case 'white':
       return '#ffffff';
     case 'light':
-      return theme.kitt.palettes.lateOcean['eggshell.2'];
+      return theme.kitt.palettes.deepPurple['beige.1'];
     case 'primary':
-      return theme.kitt.palettes.lateOcean['violine.9'];
+      return theme.kitt.palettes.deepPurple['deepPurple.8'];
     default:
       return 'transparent';
   }
@@ -11917,8 +11792,7 @@ function StoryTitle(_ref) {
   return /*#__PURE__*/jsx(View, {
     marginBottom: 30,
     children: /*#__PURE__*/jsx(Typography.Header1, {
-      variant: "bold",
-      base: "header1",
+      base: "heading-xl",
       color: useStoryBlockColor(color),
       numberOfLines: numberOfLines,
       children: children
@@ -11932,8 +11806,7 @@ function StoryTitleLevel2(_ref2) {
   return /*#__PURE__*/jsx(View, {
     marginBottom: 30,
     children: /*#__PURE__*/jsx(Typography.Header2, {
-      variant: "bold",
-      base: "header2",
+      base: "heading-l",
       color: useStoryBlockColor(color),
       numberOfLines: numberOfLines,
       children: children
@@ -11948,9 +11821,7 @@ function StoryTitleLevel3(_ref3) {
   return /*#__PURE__*/jsx(View, {
     marginBottom: 10,
     children: /*#__PURE__*/jsx(Typography.Header3, {
-      variant: "bold",
-      base: "header3",
-      medium: "header4",
+      base: "heading-m",
       color: useStoryBlockColor(color),
       numberOfLines: numberOfLines,
       children: children
@@ -11965,9 +11836,7 @@ function StoryTitleLevel4(_ref4) {
   return /*#__PURE__*/jsx(View, {
     marginBottom: 10,
     children: /*#__PURE__*/jsx(Typography.Header4, {
-      variant: "bold",
-      base: "header4",
-      medium: "header5",
+      base: "heading-s",
       color: useStoryBlockColor(color),
       numberOfLines: numberOfLines,
       children: children
@@ -12144,15 +12013,15 @@ function useTabBarItemColor(color, isActive) {
   switch (color) {
     case 'black':
       {
-        return isActive ? kittTheme.palettes.lateOcean.black : kittTheme.palettes.lateOcean['eggshell.10'];
+        return isActive ? kittTheme.colors.primary : kittTheme.colors.blackLight;
       }
     case 'white':
       {
-        return kittTheme.palettes.lateOcean.white;
+        return isActive ? kittTheme.palettes.deepPurple.white : kittTheme.palettes.deepPurple['white-alpha.80'];
       }
     default:
       {
-        return isActive ? kittTheme.palettes.lateOcean.black : kittTheme.palettes.lateOcean['eggshell.10'];
+        return isActive ? kittTheme.colors.primary : kittTheme.colors.blackLight;
       }
   }
 }
@@ -12162,15 +12031,15 @@ function useTabBarIndicatorColor(color, isActive) {
   switch (color) {
     case 'black':
       {
-        return isActive ? kittTheme.palettes.lateOcean.black : kittTheme.palettes.lateOcean.transparent;
+        return isActive ? kittTheme.colors.primary : kittTheme.palettes.deepPurple.transparent;
       }
     case 'white':
       {
-        return isActive ? kittTheme.palettes.lateOcean.white : kittTheme.palettes.lateOcean.transparent;
+        return isActive ? kittTheme.palettes.deepPurple.white : kittTheme.palettes.deepPurple.transparent;
       }
     default:
       {
-        return isActive ? kittTheme.palettes.lateOcean.black : kittTheme.palettes.lateOcean['eggshell.10'];
+        return isActive ? kittTheme.colors.primary : kittTheme.palettes.deepPurple.transparent;
       }
   }
 }
@@ -12243,7 +12112,7 @@ function TabBar(_ref) {
     paddingRight: align === 'center' ? 'kitt.2' : 'kitt.12',
     minWidth: '100%',
     borderBottomWidth: 1,
-    borderBottomColor: kittTheme.palettes.lateOcean['eggshell.3']
+    borderBottomColor: kittTheme.palettes.deepPurple['beige.2']
   });
   return /*#__PURE__*/jsx(ScrollView, {
     horizontal: true,
@@ -12284,38 +12153,40 @@ var getTypography = function (size) {
       return 'body-m';
   }
 };
-var typeToColor$1 = function (color, type) {
-  if (color) return color;
-  switch (type) {
-    case 'primary':
-      return 'violine';
-    case 'warn':
-      return 'sun';
-    case 'danger':
-      return 'coral';
-    case 'default':
-    default:
-      return 'eggshell';
-  }
-};
 function Tag(_ref) {
   var label = _ref.label,
     icon = _ref.icon,
-    color = _ref.color,
-    type = _ref.type,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'beige' : _ref$color,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'fill' : _ref$variant,
-    _ref$withWhiteBorder = _ref.withWhiteBorder,
-    withWhiteBorder = _ref$withWhiteBorder === void 0 ? false : _ref$withWhiteBorder;
+    withWhiteBorder = _ref.withWhiteBorder;
   var kittTheme = useKittTheme();
-  var tagColor = typeToColor$1(color, type);
-  var getFontColor = function () {
-    if (variant === 'contrast') {
-      return kittTheme.kitt.palettes.lateOcean["".concat(tagColor, ".").concat(tagColor === 'sun' ? 12 : 2)];
+  var colorMatching = {
+    beige: {
+      background: kittTheme.kitt.palettes.deepPurple['beige.2'],
+      font: kittTheme.kitt.palettes.deepPurple['deepPurple.8']
+    },
+    yellow: {
+      background: kittTheme.kitt.palettes.deepPurple['yellow.6'],
+      font: kittTheme.kitt.palettes.deepPurple['grey.9']
+    },
+    red: {
+      background: kittTheme.kitt.palettes.deepPurple['red.6'],
+      font: kittTheme.kitt.palettes.deepPurple['grey.0']
+    },
+    blue: {
+      background: kittTheme.kitt.palettes.deepPurple['blue.6'],
+      font: kittTheme.kitt.palettes.deepPurple['grey.0']
+    },
+    green: {
+      background: kittTheme.kitt.palettes.deepPurple['green.6'],
+      font: kittTheme.kitt.palettes.deepPurple['grey.0']
+    },
+    deepPurple: {
+      background: kittTheme.kitt.palettes.deepPurple['deepPurple.8'],
+      font: kittTheme.kitt.palettes.deepPurple['beige.1']
     }
-    return 'black';
   };
   return /*#__PURE__*/jsxs(HStack, {
     alignSelf: "flex-start",
@@ -12323,31 +12194,21 @@ function Tag(_ref) {
     height: "kitt.tag.".concat(size, ".height"),
     paddingLeft: "kitt.tag.".concat(icon ? 'withIcon' : 'withoutIcon', ".").concat(size, ".paddingLeft"),
     paddingRight: "kitt.tag.".concat(icon ? 'withIcon' : 'withoutIcon', ".").concat(size, ".paddingRight"),
-    backgroundColor: variant === 'fill' || variant === 'contrast' ? function getBackgroundColor() {
-      if (variant === 'subtle') {
-        return 'transparent';
-      }
-      if (variant === 'contrast') {
-        return kittTheme.kitt.palettes.lateOcean["".concat(tagColor, ".9")];
-      }
-      return kittTheme.kitt.palettes.lateOcean["".concat(tagColor, ".4")];
-    }() : 'kitt.transparent',
-    borderColor: withWhiteBorder ? 'kitt.white' : function getBorderColor() {
-      return kittTheme.kitt.palettes.lateOcean["".concat(tagColor, ".6")];
-    }(),
-    borderWidth: withWhiteBorder ? 1 : "kitt.tag.variant.".concat(variant, ".borderWidth"),
+    backgroundColor: colorMatching[color].background,
+    borderWidth: withWhiteBorder ? 1 : 0,
+    borderColor: withWhiteBorder ? 'kitt.white' : undefined,
     space: "kitt.1",
     alignItems: "center",
     maxWidth: "100%",
     children: [icon ? /*#__PURE__*/jsx(TypographyIcon, {
       icon: icon,
       size: "kitt.tag.".concat(size, ".iconSize"),
-      color: getFontColor()
+      color: colorMatching[color].font
     }) : null, /*#__PURE__*/jsx(View, {
       flexShrink: 1,
       children: /*#__PURE__*/jsx(Typography.Text, {
         base: getTypography(size),
-        color: getFontColor(),
+        color: colorMatching[color].font,
         numberOfLines: 1,
         ellipsizeMode: "tail",
         children: label
@@ -12514,7 +12375,7 @@ function ToastContent(_ref) {
     flexGrow: 1,
     flexShrink: 1,
     children: [title ? /*#__PURE__*/jsx(Typography.Text, {
-      base: "heading-xxs",
+      base: "heading-xs",
       color: "white",
       children: title
     }) : null, description ? /*#__PURE__*/jsx(Typography.Text, {
@@ -12530,7 +12391,7 @@ function ToastContent(_ref) {
       borderColor: "white",
       onPress: onPress,
       children: /*#__PURE__*/jsx(Typography.Text, {
-        base: "heading-xxs",
+        base: "heading-xs",
         color: "white",
         children: actionLabel
       })
@@ -12543,9 +12404,9 @@ var typeToColor = function (type) {
     case 'success':
       return 'green';
     case 'danger':
-      return 'coral';
+      return 'red';
     case 'warning':
-      return 'sun';
+      return 'yellow';
     default:
       return 'blue';
   }
@@ -12606,7 +12467,7 @@ function ToastComponent(_ref) {
   }, [handleHideToast, outro, width, toastTimeout]);
   return /*#__PURE__*/jsxs(View, {
     alignSelf: stretch ? 'flex-start' : 'auto',
-    backgroundColor: kittTheme.kitt.palettes.lateOcean['eggshell.12'],
+    backgroundColor: kittTheme.kitt.palettes.deepPurple['grey.9'],
     borderRadius: "kitt.2",
     maxWidth: {
       base: '100%',
@@ -12620,7 +12481,7 @@ function ToastComponent(_ref) {
       children: [/*#__PURE__*/jsx(TypographyIcon, {
         icon: icon,
         size: "kitt.5",
-        color: kittTheme.kitt.palettes.lateOcean["".concat(color, ".8")]
+        color: kittTheme.kitt.palettes.deepPurple["".concat(color, ".6")]
       }), /*#__PURE__*/jsx(ToastContent, {
         title: title,
         description: description,
@@ -12638,7 +12499,7 @@ function ToastComponent(_ref) {
       }) : null]
     }), outro === 'timer' ? /*#__PURE__*/jsx(AnimatedView$1, {
       alignSelf: "flex-end",
-      backgroundColor: kittTheme.kitt.palettes.lateOcean["".concat(color, ".8")],
+      backgroundColor: kittTheme.kitt.palettes.deepPurple["".concat(color, ".6")],
       height: "kitt.1",
       style: animatedStyle
     }) : null]
@@ -12695,7 +12556,7 @@ function TooltipContent(_ref) {
     paddingY: "kitt.tooltip.verticalPadding",
     paddingX: "kitt.tooltip.horizontalPadding",
     children: /*#__PURE__*/jsx(Typography.Text, {
-      base: "body-small",
+      base: "body-s",
       color: "white-light",
       children: children
     })
@@ -12906,12 +12767,12 @@ function calcSizesFromType(type, theme) {
     medium: type.medium || type.small || type.base
   });
   var size = {
-    base: getTypographyTypeConfig((_type$base = type.base) !== null && _type$base !== void 0 ? _type$base : 'body', theme).baseAndSmall.fontSize
+    base: getTypographyTypeConfig((_type$base = type.base) !== null && _type$base !== void 0 ? _type$base : 'body-m', theme).fontSize
   };
   [KittBreakpointNameEnum.SMALL, KittBreakpointNameEnum.MEDIUM, KittBreakpointNameEnum.LARGE, KittBreakpointNameEnum.WIDE].forEach(function (typeName) {
     var value = typeWithMediumForced[typeName];
     if (value) {
-      size[typeName] = getTypographyTypeConfig(value, theme)[getTypographyTypeConfigKeyFromTypeName(typeName)].fontSize;
+      size[typeName] = getTypographyTypeConfig(value, theme).fontSize;
     }
   });
   var marginLeft = {};
@@ -13012,6 +12873,7 @@ function TypographyLink(_ref) {
         'kitt-universal': 'true'
       },
       _web: {
+        // @ts-expect-error: This is only used on web where 'not-allowed' and 'pointer' are valid cursor values
         cursor: disabled ? 'not-allowed' : 'pointer',
         transitionProperty: 'color',
         transitionDuration: '0.2s',
@@ -13238,7 +13100,7 @@ function BorderlessStep(_ref) {
       width: 2,
       borderRadius: 2,
       position: "absolute",
-      backgroundColor: "kitt.palettes.lateOcean.black50",
+      backgroundColor: "kitt.accent",
       overflow: "hidden",
       children: isNextDone ? /*#__PURE__*/jsx(AnimatedView, {
         style: progressBarAnimatedStyles,
@@ -13323,7 +13185,7 @@ function Step(_ref) {
         state: state,
         index: index
       }), !isLast ? /*#__PURE__*/jsx(View, {
-        backgroundColor: shouldDisableNextLink ? 'kitt.palettes.lateOcean.black100' : 'kitt.palettes.lateOcean.moonPurple',
+        backgroundColor: shouldDisableNextLink ? 'kitt.accent' : 'kitt.primary',
         width: 1,
         position: "absolute",
         top: 46,