@ornikar/kitt-universal 26.3.1-late-ocean.ea9938a3219bcd82e7bbea585f5b7083975351b2.0 → 27.0.1-canary.01819bc93ab006bfbaa4e1335cd8afa2380068a0.0

package/dist/index.es.js

@@ -54,117 +54,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 () {
@@ -180,89 +144,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: '',
@@ -274,8 +192,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: '',
@@ -287,8 +205,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: '',
@@ -300,8 +218,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: '',
@@ -313,8 +231,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: '',
@@ -329,10 +247,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,
@@ -341,11 +259,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,
@@ -354,8 +272,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: '',
@@ -367,11 +285,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,
@@ -380,8 +298,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: '',
@@ -396,10 +314,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,
@@ -408,11 +326,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,
@@ -421,8 +339,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: '',
@@ -434,11 +352,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,
@@ -447,8 +365,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: '',
@@ -462,8 +380,8 @@ var actionCard = {
   },
   secondary: {
     "default": {
-      backgroundColor: lateOceanColorPalette['eggshell.2'],
-      borderColor: lateOceanColorPalette.transparent,
+      backgroundColor: deepPurpleColorPalette['beige.1'],
+      borderColor: deepPurpleColorPalette.transparent,
       borderWidth: 0,
       shadow: {
         color: '',
@@ -475,8 +393,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: '',
@@ -488,8 +406,8 @@ var actionCard = {
       translateY: 0
     },
     hovered: {
-      backgroundColor: lateOceanColorPalette['eggshell.3'],
-      borderColor: lateOceanColorPalette.transparent,
+      backgroundColor: deepPurpleColorPalette['beige.2'],
+      borderColor: deepPurpleColorPalette.transparent,
       borderWidth: 0,
       shadow: {
         color: '',
@@ -501,8 +419,8 @@ var actionCard = {
       translateY: 0
     },
     focused: {
-      backgroundColor: lateOceanColorPalette['eggshell.3'],
-      borderColor: lateOceanColorPalette.transparent,
+      backgroundColor: deepPurpleColorPalette['beige.2'],
+      borderColor: deepPurpleColorPalette.transparent,
       borderWidth: 0,
       shadow: {
         color: '',
@@ -514,8 +432,8 @@ var actionCard = {
       translateY: 0
     },
     pressed: {
-      backgroundColor: lateOceanColorPalette['eggshell.3'],
-      borderColor: lateOceanColorPalette.transparent,
+      backgroundColor: deepPurpleColorPalette['beige.2'],
+      borderColor: deepPurpleColorPalette.transparent,
       borderWidth: 0,
       shadow: {
         color: '',
@@ -529,11 +447,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,
@@ -542,8 +460,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: '',
@@ -555,11 +473,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,
@@ -568,11 +486,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,
@@ -581,8 +499,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: '',
@@ -600,42 +518,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
   }
@@ -648,7 +552,7 @@ var bottomSheet = {
     padding: spacing * 4
   },
   handle: {
-    backgroundColor: lateOceanColorPalette.black200
+    backgroundColor: deepPurpleColorPalette['beige.3']
   }
 };
 
@@ -716,9 +620,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: {
@@ -731,11 +635,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: {
@@ -748,19 +652,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: {
@@ -801,14 +705,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,
@@ -837,7 +741,7 @@ var card = {
     borderColor: colors.separator
   },
   subtle: {
-    backgroundColor: lateOceanColorPalette.black50,
+    backgroundColor: deepPurpleColorPalette['beige.1'],
     borderColor: colors.separator
   }
 };
@@ -897,17 +801,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: {
@@ -972,19 +876,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: {
@@ -1052,37 +956,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';
@@ -1091,11 +995,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
   },
@@ -1132,7 +1036,7 @@ var inputTag = {
     labelColor: colors.uiBackgroundLight
   },
   "default": {
-    backgroundColor: lateOceanColorPalette.black50,
+    backgroundColor: deepPurpleColorPalette['beige.1'],
     labelColor: colors.black
   },
   borderRadius: 10,
@@ -1142,9 +1046,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,
@@ -1161,8 +1065,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',
@@ -1173,14 +1078,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,
@@ -1221,17 +1131,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
@@ -1259,17 +1169,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
@@ -1297,17 +1207,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
@@ -1322,7 +1232,7 @@ var toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.black,
+          color: deepPurpleColorPalette.black,
           width: 1
         }
       },
@@ -1335,17 +1245,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
@@ -1360,7 +1270,7 @@ var toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.black,
+          color: deepPurpleColorPalette.black,
           width: 1
         }
       }
@@ -1375,17 +1285,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
@@ -1413,17 +1323,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
@@ -1451,17 +1361,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
@@ -1476,7 +1386,7 @@ var toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.black,
+          color: deepPurpleColorPalette.black,
           width: 1
         }
       },
@@ -1489,17 +1399,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
@@ -1514,7 +1424,7 @@ var toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.black,
+          color: deepPurpleColorPalette.black,
           width: 1
         }
       }
@@ -1531,17 +1441,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
@@ -1569,17 +1479,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
@@ -1607,17 +1517,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
@@ -1632,7 +1542,7 @@ var toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.white,
+          color: deepPurpleColorPalette.white,
           width: 1
         }
       },
@@ -1645,17 +1555,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
@@ -1670,7 +1580,7 @@ var toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.white,
+          color: deepPurpleColorPalette.white,
           width: 1
         }
       }
@@ -1685,17 +1595,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
@@ -1723,17 +1633,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
@@ -1761,17 +1671,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
@@ -1786,7 +1696,7 @@ var toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.white,
+          color: deepPurpleColorPalette.white,
           width: 1
         }
       },
@@ -1799,17 +1709,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
@@ -1824,7 +1734,7 @@ var toggle = {
           }
         },
         wrapperBorder: {
-          color: lateOceanColorPalette.white,
+          color: deepPurpleColorPalette.white,
           width: 1
         }
       }
@@ -1886,50 +1796,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: {
@@ -1969,14 +1879,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),
@@ -2021,7 +1923,7 @@ var iconButton = {
     pressedBackgroundColor: button["default"].ghost.pressedBackgroundColor
   },
   primary: {
-    pressedBackgroundColor: lateOceanColorPalette.moonPurpleLight1
+    pressedBackgroundColor: deepPurpleColorPalette['beige.1']
   },
   'primary-plain': {
     pressedBackgroundColor: colors.primaryLight,
@@ -2096,155 +1998,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
   }
 };
 
@@ -2253,7 +2198,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)
@@ -2286,19 +2231,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']
       }
     }
   },
@@ -2382,8 +2327,8 @@ var shadows = {
   }
 };
 
-var skeletonBackgroundColor = lateOceanColorPalette.black100;
-var skeletonFlareColor = lateOceanColorPalette.black200;
+var skeletonBackgroundColor = deepPurpleColorPalette['beige.2'];
+var skeletonFlareColor = deepPurpleColorPalette['beige.3'];
 var skeleton = {
   backgroundColor: skeletonBackgroundColor,
   flareColor: skeletonFlareColor,
@@ -2406,20 +2351,6 @@ var skeleton = {
 
 var tag = {
   borderRadius: 16,
-  variant: {
-    contrast: {
-      borderWidth: 0
-    },
-    fill: {
-      borderWidth: 0
-    },
-    outline: {
-      borderWidth: 1
-    },
-    subtle: {
-      borderWidth: 0
-    }
-  },
   icon: {
     small: 16,
     medium: 16,
@@ -2495,14 +2426,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']
     }
   }
 };
@@ -2533,12 +2464,12 @@ var breakpoints = {
 // TODO : seperate brand color usage definition from proper theme definition and add typings - https://ornikar.atlassian.net/browse/CME-156
 var theme = {
   spacing: spacing,
-  getSpacing: function getSpacing(multiplier) {
+  getSpacing: function (multiplier) {
     return spacing * multiplier;
   },
   colors: colors,
   palettes: {
-    lateOcean: lateOceanColorPalette
+    deepPurple: deepPurpleColorPalette
   },
   avatar: avatar,
   breakpoints: breakpoints,
@@ -2720,7 +2651,7 @@ var ActionCardPressable = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     onPress: onPress,
     onHoverIn: onHoverIn,
     onHoverOut: onHoverOut,
-    children: function children(_ref3) {
+    children: function (_ref3) {
       var isHovered = _ref3.isHovered,
         isPressed = _ref3.isPressed,
         isFocused = _ref3.isFocused;
@@ -2964,14 +2895,18 @@ function getTypographyColorValue(colorName) {
 }
 
 var isTypeHeadings = function (type) {
-  return type.startsWith('header') || type.startsWith('heading');
+  return type.startsWith('heading');
 };
-var isTypeHeadingsImpact = function (type) {
-  return type.startsWith('heading-impact') || type.startsWith('header-impact');
+var isTypeLabels = function (type) {
+  return type.startsWith('label');
+};
+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) {
@@ -2980,7 +2915,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$S = ["accessibilityRole", "base", "small", "medium", "large", "wide", "type", "variant", "color"];
+var _excluded$S = ["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');
@@ -2994,9 +2929,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.
 // & {
@@ -3012,42 +2944,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$S);
+    } : _ref2$type,
+    variant = _ref2.variant,
+    color = _ref2.color,
+    underline = _ref2.underline,
+    otherProps = _objectWithoutProperties(_ref2, _excluded$S);
   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({
@@ -3055,22 +3065,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, {
@@ -3117,17 +3135,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;
@@ -3315,7 +3322,7 @@ function ButtonContentChildren(_ref2) {
       textAlign: "center",
       _android: sharedNativeStyle,
       _ios: sharedNativeStyle,
-      base: "body",
+      base: "body-m",
       variant: "bold",
       color: color,
       children: children
@@ -3460,11 +3467,11 @@ var useNativeAnimation$5 = function (_ref) {
     };
   });
   return {
-    onPressIn: function handlePressIn() {
+    onPressIn: function () {
       color.value = withSpring(1);
       pressed.value = 1;
     },
-    onPressOut: function handlePressOut() {
+    onPressOut: function () {
       color.value = withSpring(0);
       pressed.value = 0;
     },
@@ -3551,7 +3558,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onHoverOut: onHoverOut,
     onFocus: onFocus,
     onBlur: onBlur,
-    children: function children(_ref2) {
+    children: function (_ref2) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed,
         isFocused = _ref2.isFocused;
@@ -3673,7 +3680,7 @@ var ActionsItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
       stretch: stretch,
       disabled: isLoading ? true : disabled,
       icon: isLoading ? /*#__PURE__*/jsx(LoaderIcon, {}) : icon,
-      onPress: function handlePress(e) {
+      onPress: function (e) {
         var callPressAndUpdateLoadingState = /*#__PURE__*/function () {
           var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
             return _regeneratorRuntime().wrap(function (_context) {
@@ -3855,7 +3862,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)
@@ -3945,10 +3952,10 @@ function BottomSheetComp(_ref, ref) {
       borderRadius: 4,
       backgroundColor: theme.kitt.bottomSheet.handle.backgroundColor
     },
-    handleComponent: function handleComponent(props) {
+    handleComponent: function (props) {
       return hasHandle ? /*#__PURE__*/jsx(BottomSheetHandle, _objectSpread({}, props)) : null;
     },
-    backdropComponent: function backdropComponent(props) {
+    backdropComponent: function (props) {
       return hasBackdrop ? /*#__PURE__*/jsx(BottomSheetBackdrop, _objectSpread(_objectSpread({}, props), {}, {
         opacity: 0.25,
         appearsOnIndex: 0,
@@ -3957,7 +3964,7 @@ function BottomSheetComp(_ref, ref) {
     }
   }, rest), {}, {
     topInset: top,
-    children: function children(props) {
+    children: function (props) {
       return /*#__PURE__*/jsx(Wrapper, {
         children: typeof Content === 'function' ? /*#__PURE__*/jsx(Content, _objectSpread({}, props === null || props === void 0 ? void 0 : props.data)) : Content
       });
@@ -4033,7 +4040,7 @@ function CloseButton(_ref) {
     onPress = _ref.onPress;
   var onCloseContextCallback = useOnCloseModalBehaviour();
   return /*#__PURE__*/cloneElement(children, {
-    onPress: function handleClose() {
+    onPress: function () {
       if (onPress) onPress();
       onCloseContextCallback();
     }
@@ -4211,11 +4218,11 @@ function CardModalAnimation(_ref) {
     transparent: true,
     supportedOrientations: ['landscape', 'portrait'],
     visible: isModalVisible,
-    onShow: function onShow() {
+    onShow: function () {
       if (onEnter) onEnter();
       setIsContentVisible(true);
     },
-    onDismiss: function onDismiss() {
+    onDismiss: function () {
       if (onExited) onExited();
     },
     children: /*#__PURE__*/jsxs(View, {
@@ -4262,7 +4269,7 @@ function CardModalBehaviour(_ref) {
     onClose: onClose,
     children: /*#__PURE__*/jsx(CardModalAnimation, _objectSpread(_objectSpread({}, props), {}, {
       visible: visible,
-      onExited: function handleExitAnimationDone() {
+      onExited: function () {
         if (onExited) onExited();
         setIsModalBehaviourVisible(false);
       },
@@ -4484,10 +4491,10 @@ var useNativeAnimation$4 = function (_ref) {
     };
   });
   return {
-    onPressIn: function onPressIn() {
+    onPressIn: function () {
       pressed.value = true;
     },
-    onPressOut: function onPressOut() {
+    onPressOut: function () {
       pressed.value = false;
     },
     backgroundStyles: backgroundStyles
@@ -4550,7 +4557,7 @@ function ChoiceItem(_ref) {
     style: style,
     onBlur: onBlur,
     onFocus: onFocus,
-    onPress: function handlePress(e) {
+    onPress: function (e) {
       if (onFocus) onFocus(e);
       if (onPress) onPress();
       handleChange();
@@ -4558,7 +4565,7 @@ function ChoiceItem(_ref) {
     },
     onPressIn: onPressIn,
     onPressOut: onPressOut,
-    children: function children(_ref2) {
+    children: function (_ref2) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed;
       return /*#__PURE__*/jsxs(AnimatedChoiceItemView, {
@@ -4654,7 +4661,7 @@ function Choices(_ref2) {
     disabled: disabled,
     variant: variant,
     onPress: !isForm ? onPress : undefined,
-    onChange: isForm ? function handleChange(newValue) {
+    onChange: isForm ? function (newValue) {
       setCurrentValue(newValue);
       if (onChange) onChange(newValue);
     } : undefined,
@@ -4812,11 +4819,11 @@ function DialogModalAnimation(_ref) {
     transparent: true,
     supportedOrientations: ['landscape', 'portrait'],
     visible: isModalVisible,
-    onShow: function onShow() {
+    onShow: function () {
       if (onEnter) onEnter();
       setIsContentVisible(true);
     },
-    onDismiss: function onDismiss() {
+    onDismiss: function () {
       if (onExited) onExited();
     },
     children: /*#__PURE__*/jsxs(View, {
@@ -4870,7 +4877,7 @@ function DialogModalBehaviour(_ref) {
       },
       children: /*#__PURE__*/jsx(DialogModalAnimation, _objectSpread(_objectSpread({}, props), {}, {
         visible: visible,
-        onExited: function handleExitAnimationDone() {
+        onExited: function () {
           if (onExited) onExited();
           setIsModalBehaviourVisible(false);
         },
@@ -5133,7 +5140,7 @@ function ExternalLink(_ref) {
   var openExternalLink = useOpenExternalLink();
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, rest), {}, {
-    onPress: function handleOnPress(e) {
+    onPress: function (e) {
       if (onPress) {
         onPress(e);
         if (e.defaultPrevented) return;
@@ -5210,7 +5217,7 @@ var InputText = /*#__PURE__*/forwardRef(function (_ref, ref) {
     props = _objectWithoutProperties(_ref, _excluded$B);
   var theme = useTheme();
   var fontSizeForNativeBase = createNativeBaseFontSize({
-    base: 'body'
+    base: 'body-m'
   });
   var shouldHandleSingleLineOnIOS = Platform.OS === 'ios' && !multiline;
   return /*#__PURE__*/jsxs(InputTextContainer, {
@@ -5357,14 +5364,14 @@ var _excluded$z = ["children", "name", "disabled", "placeholder", "isInitialOpen
 function patchNativeEvent(event) {
   return event || {
     preventDownshiftDefault: false,
-    preventDefault: function preventDefault() {}
+    preventDefault: function () {}
   };
 }
 function isReactElement(element) {
   return _typeof(element) === 'object' && element !== null && 'type' in element && 'props' in element;
 }
 function Autocomplete(_ref) {
-  var _children = _ref.children,
+  var children = _ref.children,
     name = _ref.name,
     disabled = _ref.disabled,
     placeholder = _ref.placeholder,
@@ -5391,7 +5398,7 @@ function Autocomplete(_ref) {
     zIndex = _ref$zIndex === void 0 ? 1000 : _ref$zIndex,
     maxItemContainerHeight = _ref.maxItemContainerHeight,
     props = _objectWithoutProperties(_ref, _excluded$z);
-  var childrenArray = Children.toArray(_children);
+  var childrenArray = Children.toArray(children);
   var items = childrenArray.filter(isReactElement).map(function (child) {
     return {
       child: child,
@@ -5402,12 +5409,12 @@ function Autocomplete(_ref) {
     defaultIsOpen: isInitialOpen,
     initialSelectedItem: initialValue,
     initialInputValue: initialValue ? itemToString(initialValue) : undefined,
-    itemToString: function handleItemToString(item) {
+    itemToString: function (item) {
       // Prevents returning null values
       if (!itemToString) return '';
       return itemToString(item || undefined);
     },
-    stateReducer: function stateReducer(state, changes) {
+    stateReducer: function (state, changes) {
       switch (changes.type) {
         case Downshift.stateChangeTypes.changeInput:
           return _objectSpread(_objectSpread({}, changes), {}, {
@@ -5417,7 +5424,7 @@ function Autocomplete(_ref) {
           return changes;
       }
     },
-    onChange: function onChange(selectedItem, stateAndHelpers) {
+    onChange: function (selectedItem, stateAndHelpers) {
       if (_onChange) {
         _onChange(selectedItem, stateAndHelpers);
       }
@@ -5425,7 +5432,7 @@ function Autocomplete(_ref) {
     onSelect: onSelectItem,
     onOuterClick: onOuterPress,
     onInputValueChange: onInputChange,
-    children: function children(_ref2) {
+    children: function (_ref2) {
       var getRootProps = _ref2.getRootProps,
         getInputProps = _ref2.getInputProps,
         getMenuProps = _ref2.getMenuProps,
@@ -5477,7 +5484,7 @@ function Autocomplete(_ref) {
           right: right || (canDisplayCollapseButton ? /*#__PURE__*/jsx(InputPressable, _objectSpread(_objectSpread({}, toggleProps), {}, {
             testID: "kitt.Autocomplete.listToggle",
             hitSlop: 40,
-            onPress: function handleTogglePress(e) {
+            onPress: function (e) {
               if (Platform.OS === 'web') {
                 onClickToggle(e);
                 return;
@@ -5488,13 +5495,13 @@ function Autocomplete(_ref) {
               icon: isCurrentlyOpen ? /*#__PURE__*/jsx(CaretUpFillIcon, {}) : /*#__PURE__*/jsx(CaretDownFillIcon, {})
             })
           })) : null),
-          onFocus: function onFocus(e) {
+          onFocus: function (e) {
             openMenu();
             /** @ts-expect-error onFocus wants web events */
             if (Platform.OS !== 'android' && onSearchInputFocus) onSearchInputFocus(e);
             if (_onFocus) _onFocus(e);
           },
-          onBlur: function onBlur(e) {
+          onBlur: function (e) {
             /** @ts-expect-error onBlur wants web events */
             if (Platform.OS === 'web' && onSearchInputBlur) onSearchInputBlur(e);
 
@@ -5530,14 +5537,14 @@ function Autocomplete(_ref) {
                   selected: ariaSelected
                 },
                 disabled: disabled,
-                onPress: function onPress(e) {
+                onPress: function (e) {
                   if (Platform.OS === 'web') {
                     if (onClick) onClick(e);
                     return;
                   }
                   if (_onPress) _onPress(patchNativeEvent(e));
                 },
-                children: function children(_ref5) {
+                children: function (_ref5) {
                   var isHovered = _ref5.isHovered,
                     isFocused = _ref5.isFocused,
                     isPressed = _ref5.isPressed;
@@ -5627,12 +5634,12 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_ref, ref) {
       disabled: disabled
     },
     disabled: disabled,
-    onPress: function handlePress(e) {
+    onPress: function (e) {
       if (onFocus) onFocus();
       if (onChange) onChange(!checked, e);
       if (onBlur) onBlur();
     },
-    children: function children(_ref2) {
+    children: function (_ref2) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed,
         isFocused = _ref2.isFocused;
@@ -6187,7 +6194,7 @@ var DatePickerAndroid = /*#__PURE__*/forwardRef(function (_ref, ref) {
     DateTimePickerAndroid.open({
       testID: pickerUITestID,
       value: currentValue || pickerDefaultDate || new Date(Date.now()),
-      onChange: function onChange(e) {
+      onChange: function (e) {
         setIsFocused(false);
         var timestamp = e.nativeEvent.timestamp;
         if (timestamp) {
@@ -6239,7 +6246,7 @@ function PlatformDateTimePicker(_ref) {
     minimumDate: minimuDate,
     display: displayMode
   }, iosProps), {}, {
-    onChange: function onChange(_event, date) {
+    onChange: function (_event, date) {
       return _onChange(date);
     }
   }));
@@ -6250,7 +6257,7 @@ function ModalTitle(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/jsx(CardModal.Header, {
     children: /*#__PURE__*/jsx(Typography.Text, {
-      base: "body",
+      base: "body-m",
       variant: "bold",
       children: children
     })
@@ -6273,7 +6280,7 @@ function ModalPlatformDateTimePicker(_ref2) {
 
   return /*#__PURE__*/jsx(CardModal.ModalBehaviour, {
     visible: Boolean(isVisible),
-    onClose: function handleClose() {
+    onClose: function () {
       setCurrentValue(value);
       onClose();
     },
@@ -6284,7 +6291,7 @@ function ModalPlatformDateTimePicker(_ref2) {
         }) : null, /*#__PURE__*/jsx(CardModal.Body, {
           children: /*#__PURE__*/jsx(PlatformDateTimePicker, _objectSpread(_objectSpread({}, props), {}, {
             value: currentValue,
-            onChange: function handleChange(newDate) {
+            onChange: function (newDate) {
               setCurrentValue(function (prev) {
                 return newDate || prev;
               });
@@ -6294,7 +6301,7 @@ function ModalPlatformDateTimePicker(_ref2) {
           children: /*#__PURE__*/jsx(Button, {
             stretch: true,
             type: "primary",
-            onPress: function handleSubmit() {
+            onPress: function () {
               onChange(currentValue);
             },
             children: validateButtonLabel ? /*#__PURE__*/jsx(Text$1, {
@@ -6348,7 +6355,7 @@ var DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
       isFocusedInternal: isFocused || isFocusedInternal,
       isHoveredInternal: isHoveredInternal,
       isPressedInternal: isPressedInternal,
-      onPress: function handleModalOpen() {
+      onPress: function () {
         if (onFocus) onFocus();
         setIsPickerUIVisible(true);
         setIsFocused(true);
@@ -6361,7 +6368,7 @@ var DefaultNativeUIDatePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
       validateButtonLabel: pickerUIValidateButtonLabel,
       defaultDate: pickerDefaultDate,
       onClose: handleModalClose,
-      onChange: function handleChange(newDate) {
+      onChange: function (newDate) {
         setCurrentValue(newDate);
         onChange(newDate);
         handleModalClose();
@@ -6615,7 +6622,7 @@ function BottomSheetActionsItem(_ref) {
       withPadding: true,
       children: /*#__PURE__*/jsx(Typography.Text, {
         variant: "bold",
-        base: "body",
+        base: "body-m",
         children: title
       })
     })
@@ -6677,7 +6684,7 @@ function FilePicker(_ref) {
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/cloneElement(childElement, {
       // ensure that the press event is not prevented by Button component
-      onPress: function onPress() {
+      onPress: function () {
         var _childElement$props$o, _childElement$props, _bottomSheetRef$curre;
         if (disabled) return;
         (_childElement$props$o = (_childElement$props = childElement.props).onPress) === null || _childElement$props$o === void 0 || _childElement$props$o.call(_childElement$props);
@@ -6978,10 +6985,10 @@ var GoogleMapsAutocompleteContext = /*#__PURE__*/createContext({
     isLoadingResultDetails: false,
     shouldDisplayEmptyStateWhenNoResults: false
   },
-  onInputChange: function onInputChange() {
+  onInputChange: function () {
     return Promise.resolve();
   },
-  onSelectItem: function onSelectItem() {}
+  onSelectItem: function () {}
 });
 function GoogleMapsAutocompleteProvider(_ref) {
   var children = _ref.children,
@@ -7234,7 +7241,7 @@ function InputAddress(_ref) {
   return /*#__PURE__*/jsx(Autocomplete, _objectSpread(_objectSpread({}, props), {}, {
     itemToString: itemToString,
     initialValue: formattedInitialValue,
-    checkSelectedItem: function checkSelectedItem(selectedItem, item) {
+    checkSelectedItem: function (selectedItem, item) {
       return (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.place_id) === item.place_id;
     },
     right: state.isLoadingSearch || state.isLoadingResultDetails ? /*#__PURE__*/jsx(Icon, {
@@ -7243,10 +7250,10 @@ function InputAddress(_ref) {
     }) : undefined,
     errorElement: state.hasSearchError || state.hasSelectResultError ? errorElement : null,
     emptyResultsElement: state.items.length === 0 ? emptyResultsElement : null,
-    onInputChange: function onInputChange(v) {
+    onInputChange: function (v) {
       _onInputChange(v);
     },
-    onChange: function onChange(v) {
+    onChange: function (v) {
       onSelectItem(v, _onChange);
     },
     children: state.items.map(function (item) {
@@ -7282,7 +7289,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
@@ -7328,7 +7335,7 @@ var InputNumber = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: ref
   }, props), {}, {
     inputMode: "numeric",
-    onChange: function handleChange(event) {
+    onChange: function (event) {
       if (!onChange) return;
       var value = parseFloat(event.nativeEvent.text);
 
@@ -7360,7 +7367,7 @@ var InputPassword = /*#__PURE__*/forwardRef(function (_ref, ref) {
       testID: "kitt.InputPassword.passwordToggle",
       hitSlop: 20,
       accessibilityRole: "button",
-      onPress: function onPress() {
+      onPress: function () {
         return setIsVisible(function (prev) {
           return !prev;
         });
@@ -7395,7 +7402,7 @@ var InputPhone = /*#__PURE__*/forwardRef(function (_ref, ref) {
     enterKeyHint: currentEnterKeyHint,
     autoComplete: autoComplete,
     textContentType: "telephoneNumber",
-    onChange: function handleChange(event) {
+    onChange: function (event) {
       var number = parseNumber(event.nativeEvent.text);
 
       // When intl phone number is valid :
@@ -7444,7 +7451,7 @@ function InputTag(_ref) {
         color: "black"
       })
     }) : null, /*#__PURE__*/jsx(Typography.Text, {
-      base: "body-small",
+      base: "body-s",
       color: "black",
       children: children
     })]
@@ -7457,7 +7464,7 @@ function Label(_ref) {
     children = _ref.children;
   var isWeb = Platform.OS === 'web';
   return /*#__PURE__*/jsx(Typography.Text, {
-    base: "body",
+    base: "body-m",
     id: isWeb ? undefined : id,
     children: isWeb ? /*#__PURE__*/jsx("label", {
       id: id,
@@ -7468,7 +7475,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
@@ -7477,7 +7485,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, "))"),
@@ -7587,14 +7595,14 @@ function Radio(_ref, ref) {
     focusable: checked && !disabled,
     flexDirection: "row",
     alignItems: "center",
-    onPress: function handlePress(event) {
+    onPress: function (event) {
       if (onFocus) onFocus();
       if (onChange) onChange(value, event);
       if (onBlur) onBlur();
     },
     onFocus: onFocus,
     onBlur: onBlur,
-    children: function children(_ref2) {
+    children: function (_ref2) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed,
         isFocused = _ref2.isFocused;
@@ -7608,12 +7616,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]
@@ -7712,11 +7721,11 @@ var useNativeAnimation$3 = function (_ref) {
     };
   });
   return {
-    onPressIn: function handlePressIn() {
+    onPressIn: function () {
       color.value = withSpring(1);
       pressed.value = 1;
     },
-    onPressOut: function handlePressOut() {
+    onPressOut: function () {
       color.value = withSpring(0);
       pressed.value = 0;
     },
@@ -7730,7 +7739,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';
@@ -7769,7 +7778,7 @@ function RadioButton(_ref) {
     flexShrink: createResponsiveStyleFromProp(stretch, 1, undefined),
     flexBasis: createResponsiveStyleFromProp(stretch, 0),
     disabled: disabled,
-    onPress: function handlePress(e) {
+    onPress: function (e) {
       if (onFocus) onFocus(e);
       if (onChange) onChange(value);
       if (onBlur) onBlur(e);
@@ -7778,7 +7787,7 @@ function RadioButton(_ref) {
     onPressOut: onPressOut,
     onFocus: onFocus,
     onBlur: onBlur,
-    children: function children(_ref2) {
+    children: function (_ref2) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed,
         isFocused = _ref2.isFocused;
@@ -7897,7 +7906,7 @@ var TextArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
       textAlignVertical: "top",
       minHeight: "kitt.forms.textArea.minHeight"
     }, props), {}, {
-      onChange: function handleOnChange(e) {
+      onChange: function (e) {
         if (!limit || e.nativeEvent.text.length <= limit) {
           var _props$onChange;
           (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, e);
@@ -7907,7 +7916,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,
@@ -7917,14 +7926,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']
             })
           })]
         })
@@ -8032,7 +8041,7 @@ function ToggleAnimated(_ref) {
 
 var _excluded$h = ["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,
@@ -8060,10 +8069,10 @@ function Toggle(_ref) {
     children: [/*#__PURE__*/jsx(Pressable, {
       accessibilityRole: "togglebutton",
       disabled: isDisabled,
-      onPress: function handlePress() {
+      onPress: function () {
         onChange(!value);
       },
-      children: function children(_ref2) {
+      children: function (_ref2) {
         var isHovered = _ref2.isHovered,
           isPressed = _ref2.isPressed,
           isFocused = _ref2.isFocused;
@@ -8252,11 +8261,11 @@ function FullscreenModalAnimation(_ref) {
     transparent: true,
     supportedOrientations: ['landscape', 'portrait'],
     visible: isModalVisible,
-    onShow: function onShow() {
+    onShow: function () {
       if (onEnter) onEnter();
       setIsContentVisible(true);
     },
-    onDismiss: function onDismiss() {
+    onDismiss: function () {
       if (onExited) onExited();
     },
     children: /*#__PURE__*/jsxs(View, {
@@ -8303,7 +8312,7 @@ function FullscreenModalBehaviour(_ref) {
     onClose: onClose,
     children: /*#__PURE__*/jsx(FullscreenModalAnimation, _objectSpread(_objectSpread({}, props), {}, {
       visible: visible,
-      onExited: function handleExitAnimationDone() {
+      onExited: function () {
         if (onExited) onExited();
         setIsModalBehaviourVisible(false);
       },
@@ -8530,11 +8539,11 @@ var useNativeAnimation$2 = function (_ref) {
     };
   });
   return {
-    onPressIn: function handleHoverIn() {
+    onPressIn: function () {
       color.value = withTiming(1, withTimingConfig);
       translate.value = withTiming(2, withTimingConfig);
     },
-    onPressOut: function handleHoverOut() {
+    onPressOut: function () {
       color.value = withTiming(0, withTimingConfig);
       translate.value = withTiming(0, withTimingConfig);
     },
@@ -8616,7 +8625,7 @@ function Highlight(_ref) {
             marginBottom: highlightStyle[size].marginBottom,
             children: /*#__PURE__*/jsx(Typography.Text, {
               variant: "bold",
-              base: "body",
+              base: "body-m",
               ellipsizeMode: "clip",
               children: title
             })
@@ -8626,13 +8635,13 @@ function Highlight(_ref) {
     });
   }
   return /*#__PURE__*/jsx(Pressable, {
-    onPress: function handlePress() {
+    onPress: function () {
       setIsExpanded(!isExpanded);
       setIsInitialRender(false);
     },
     onPressIn: onPressIn,
     onPressOut: onPressOut,
-    children: function children(_ref2) {
+    children: function (_ref2) {
       var isHovered = _ref2.isHovered;
       return /*#__PURE__*/jsxs(AnimatedContainer, {
         isHovered: isHovered,
@@ -8651,7 +8660,7 @@ function Highlight(_ref) {
             width: "100%",
             children: /*#__PURE__*/jsx(Typography.Text, {
               variant: "bold",
-              base: "body",
+              base: "body-m",
               ellipsizeMode: "clip",
               children: title
             })
@@ -8781,10 +8790,10 @@ function useNativeAnimation$1(_ref) {
   return {
     opacityStyles: opacityStyles,
     scaleStyles: scaleStyles,
-    onPressIn: function handlePressIn() {
+    onPressIn: function () {
       pressed.value = true;
     },
-    onPressOut: function handlePressOut() {
+    onPressOut: function () {
       pressed.value = false;
     }
   };
@@ -8863,7 +8872,7 @@ function IconButton(_ref) {
     onPress: onPress,
     onPressIn: onPressIn,
     onPressOut: onPressOut,
-    children: function children(_ref2) {
+    children: function (_ref2) {
       var isHovered = _ref2.isHovered,
         isPressed = _ref2.isPressed,
         isFocused = _ref2.isFocused;
@@ -8948,8 +8957,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'
         },
@@ -9192,7 +9201,7 @@ function MapMarker(_ref2) {
   return /*#__PURE__*/jsx(Pressable$1, {
     testID: testID,
     onPress: onPress,
-    children: function children(_ref3) {
+    children: function (_ref3) {
       var isHovered = _ref3.isHovered;
       return /*#__PURE__*/jsx(StaticMapMarker$1, _objectSpread(_objectSpread({}, props), {}, {
         isHovered: isHovered
@@ -9279,7 +9288,7 @@ function BaseMessage(_ref) {
         flexGrow: 1,
         flexShrink: 1,
         textAlign: centeredText ? 'center' : 'left',
-        base: "body",
+        base: "body-m",
         color: color,
         children: children
       })]
@@ -9563,6 +9572,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: {
@@ -9877,7 +9891,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,
@@ -10431,22 +10446,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
@@ -11065,196 +11064,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: Platform.OS === 'android' ? 400 : theme.typography.types.bodies.fontWeight.bold
+      },
+      labels: {
+        semibold: theme.typography.types.labels.fontWeight.semibold
+      },
+      contentCaps: {
+        bold: theme.typography.types.contentCaps.fontWeight.bold
       }
     },
     fonts: {
       headings: Platform.OS === 'web' ? theme.typography.types.headings.fontFamily.web : theme.typography.types.headings.fontFamily["native"],
-      'headings-impact': Platform.OS === 'web' ? theme.typography.types['headings-impact'].fontFamily.web : theme.typography.types['headings-impact'].fontFamily["native"],
-      bodies: Platform.OS === 'web' ? theme.typography.types.bodies.fontFamily.web : theme.typography.types.bodies.fontFamily["native"]
+      bodies: Platform.OS === 'web' ? theme.typography.types.bodies.fontFamily.web : theme.typography.types.bodies.fontFamily["native"],
+      labels: Platform.OS === 'web' ? theme.typography.types.labels.fontFamily.web : theme.typography.types.labels.fontFamily["native"],
+      contentCaps: Platform.OS === 'web' ? theme.typography.types.contentCaps.fontFamily.web : theme.typography.types.contentCaps.fontFamily["native"]
     },
     shadows: {
       kitt: {
@@ -11749,7 +11623,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
             }
           }
@@ -11779,7 +11653,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
         }
       }
     }
@@ -11930,19 +11804,19 @@ function NavigationModalBehaviour(_ref) {
     children: /*#__PURE__*/jsx(AnimationComponent, _objectSpread(_objectSpread({}, props), {}, {
       appear: shouldAppear,
       visible: visible,
-      onEnter: function handleEnter() {
+      onEnter: function () {
         if (onEnter) onEnter();
 
         // Once a children as been displayed, we force appear to false in order to avoid replaying animation on breakpoint change
         setShouldAppear(false);
       },
-      onExit: function handleExit() {
+      onExit: function () {
         if (onExit) onExit();
 
         // Reset appear value to its original value for future modal display
         setShouldAppear(appear);
       },
-      onExited: function handleExitAnimationDone() {
+      onExited: function () {
         if (onExited) onExited();
         setIsModalBehaviourVisible(false);
       },
@@ -12186,7 +12060,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
@@ -12303,7 +12177,7 @@ function Picker(_ref) {
       isOpen: state.isOpen,
       selectedItem: state.currentValue,
       disabled: disabled,
-      onPress: function handlePressTrigger() {
+      onPress: function () {
         if (syncStateWithSourceValue) {
           dispatch({
             type: 'open-modal-with-value',
@@ -12327,7 +12201,7 @@ function Picker(_ref) {
             onPress: handleClose
           }),
           children: /*#__PURE__*/jsx(Typography.Text, {
-            base: "body",
+            base: "body-m",
             variant: "bold",
             children: title
           })
@@ -12357,7 +12231,7 @@ function Picker(_ref) {
               accessibilityState: {
                 selected: isSelected
               },
-              onPress: function onPress() {
+              onPress: function () {
                 handleInternalChange(item.props.value);
               },
               children: function (_ref2) {
@@ -12378,7 +12252,7 @@ function Picker(_ref) {
           children: /*#__PURE__*/jsx(Button, {
             stretch: true,
             type: "primary",
-            onPress: function handleChange() {
+            onPress: function () {
               if (onChange) onChange(state.internalValue);
               dispatch({
                 type: 'change-value'
@@ -12423,8 +12297,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());
@@ -12435,13 +12310,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",
@@ -12514,7 +12389,7 @@ function Skeleton(_ref) {
   return /*#__PURE__*/jsx(View, _objectSpread(_objectSpread({}, props), {}, {
     overflow: "hidden",
     style: style,
-    onLayout: function onLayout(_ref2) {
+    onLayout: function (_ref2) {
       var nativeEvent = _ref2.nativeEvent;
       return setWidth(nativeEvent.layout.width);
     },
@@ -12736,7 +12611,7 @@ function StaticMap(_ref) {
     position: "relative",
     maxWidth: mapBoxMaxPictureWidth,
     height: height,
-    onLayout: function handleParentLayout(event) {
+    onLayout: function (event) {
       var nativeEvent = event.nativeEvent;
       var rangedMapWidth = getPictureWidth(nativeEvent.layout.width);
       setCurrentWidth(rangedMapWidth);
@@ -12748,11 +12623,11 @@ function StaticMap(_ref) {
       width: currentWidth,
       height: height,
       alt: alt,
-      onLoadEnd: function handleImageLoadEnd() {
+      onLoadEnd: function () {
         setIsLoading(false);
         if (onLoaded) onLoaded();
       },
-      onError: function handleError() {
+      onError: function () {
         setHasError(true);
         if (onError) onError();
       }
@@ -12777,7 +12652,7 @@ function StaticMap(_ref) {
       width: "100%",
       height: "100%",
       children: /*#__PURE__*/jsx(StaticMapError, {
-        onReload: function handleReload() {
+        onReload: function () {
           setHasError(false);
           setIsLoading(true);
           setCurrentMapKey(function (prev) {
@@ -12815,9 +12690,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';
   }
@@ -12866,8 +12741,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
@@ -12881,8 +12755,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
@@ -12897,9 +12770,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
@@ -12914,9 +12785,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
@@ -13024,7 +12893,7 @@ function StoryContainer(_ref) {
 var StoryDecorator = makeDecorator({
   name: 'StoryDecorator',
   parameterName: 'storyDecorator',
-  wrapper: function wrapper(storyFn, context) {
+  wrapper: function (storyFn, context) {
     var story = storyFn(context);
     if (context.parameters.disableStoryContainer) {
       return story;
@@ -13096,15 +12965,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;
       }
   }
 }
@@ -13114,15 +12983,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;
       }
   }
 }
@@ -13195,7 +13064,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,
@@ -13209,7 +13078,7 @@ function TabBar(_ref) {
         return /*#__PURE__*/jsx(View, {
           children: /*#__PURE__*/cloneElement(child, {
             color: color,
-            onPress: function onPress(event) {
+            onPress: function (event) {
               var _child$props$onPress, _child$props;
               onChangeTab({
                 tab: tabs[index],
@@ -13236,38 +13105,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",
@@ -13275,31 +13146,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
@@ -13366,7 +13227,7 @@ function ModalDateTimePicker(_ref) {
           stretch: true,
           testID: "timePicker.ModalDateTimePicker.submitButton",
           type: "primary",
-          onPress: function handleSubmit() {
+          onPress: function () {
             onChange(currentValue);
           },
           children: buttonContent
@@ -13413,7 +13274,7 @@ var TimePickerPressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     width: createResponsiveStyleFromProp(stretch, '100%', 'kitt.forms.timePicker.minWidth'),
     pointerEvents: "box-only",
     onPress: onPress,
-    children: function children(_ref2) {
+    children: function (_ref2) {
       var isHovered = _ref2.isHovered,
         isFocused = _ref2.isFocused,
         isPressed = _ref2.isPressed;
@@ -13490,7 +13351,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
       isHoveredInternal: isHoveredInternal,
       isFocusedInternal: isFocusedInternal,
       isPressedInternal: isPressedInternal,
-      onPress: function handlePress() {
+      onPress: function () {
         setIsPickerVisible(true);
       }
     }), Platform.OS === 'android' && isPickerVisible ? /*#__PURE__*/jsx(DateTimePicker, {
@@ -13514,7 +13375,7 @@ var TimePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
       value: pickerValue,
       validateButtonLabel: validateButtonLabel,
       onChange: handleChange,
-      onClose: function handleClose() {
+      onClose: function () {
         setIsPickerVisible(false);
       }
     }) : null]
@@ -13532,7 +13393,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, {
@@ -13548,7 +13409,7 @@ function ToastContent(_ref) {
       borderColor: "white",
       onPress: onPress,
       children: /*#__PURE__*/jsx(Typography.Text, {
-        base: "heading-xxs",
+        base: "heading-xs",
         color: "white",
         children: actionLabel
       })
@@ -13561,9 +13422,9 @@ var typeToColor = function (type) {
     case 'success':
       return 'green';
     case 'danger':
-      return 'coral';
+      return 'red';
     case 'warning':
-      return 'sun';
+      return 'yellow';
     default:
       return 'blue';
   }
@@ -13624,7 +13485,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%',
@@ -13638,7 +13499,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,
@@ -13656,7 +13517,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]
@@ -13713,7 +13574,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
     })
@@ -13877,7 +13738,7 @@ function Tooltip(_ref) {
       ref: reference,
       children: renderPressable({
         ref: getPressableRect,
-        onPress: function handlePress() {
+        onPress: function () {
           if (onToggle) onToggle(!!pressed.value);
           pressed.value = !pressed.value;
         },
@@ -13896,7 +13757,7 @@ function Tooltip(_ref) {
       left: customShiftData.left,
       right: customShiftData.right,
       zIndex: zIndex,
-      onLayout: function onLayout(_ref2) {
+      onLayout: function (_ref2) {
         var nativeEvent = _ref2.nativeEvent;
         return setFloatingWidth(nativeEvent.layout.width);
       },
@@ -13922,12 +13783,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 = {};
@@ -14059,7 +13920,7 @@ function KittThemeProvider(_ref) {
 var KittThemeDecorator = makeDecorator({
   name: 'ThemeDecorator',
   parameterName: 'theme',
-  wrapper: function wrapper(storyFn, context, _ref2) {
+  wrapper: function (storyFn, context, _ref2) {
     var _parameters$isSSR;
     var _ref2$options = _ref2.options,
       options = _ref2$options === void 0 ? {} : _ref2$options,
@@ -14251,7 +14112,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,
@@ -14336,7 +14197,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,