@hero-design/rn 7.27.0 → 7.28.0

package/es/index.js

@@ -230,7 +230,7 @@ var BASE_BORDER_WIDTH = 1;
 var BASE_SPACE = 8;
 var BASE_SIZE = 8;
 var NEUTRAL_FONT = 'BeVietnamPro';
-var PLAYFUL_FONT = 'DarkerGrotesque';
+var PLAYFUL_FONT = 'RebondGrotesque';
 var BASE_FONT_SIZE = 10;
 var BASE_RADIUS = 4;
 var scale$1 = {
@@ -938,6 +938,7 @@ var BASE_COLORS = {
   peach: '#f8ac7d',
   pineGreen: '#017d6d',
   pink: '#fe56aa',
+  policeBlue: '#2e456d',
   purple: '#be83cf',
   royalBlue: '#5a68e2',
   scarletGum: '#401960',
@@ -959,16 +960,16 @@ var colorScales = Object.entries(BASE_COLORS).reduce(function (acc, _ref16) {
   return Object.assign(Object.assign({}, acc), _defineProperty({}, key, createColorScales(value)));
 }, {});
 var blue$1 = colorScales.blue,
-  ultramarineBlue$1 = colorScales.ultramarineBlue,
+  ultramarineBlue$2 = colorScales.ultramarineBlue,
   green$1 = colorScales.green,
   grey$1 = colorScales.grey,
   grotesqueGreen = colorScales.grotesqueGreen,
-  deepSaffron$1 = colorScales.deepSaffron,
+  deepSaffron$2 = colorScales.deepSaffron,
   pink$1 = colorScales.pink,
   purple$1 = colorScales.purple,
-  vermilion$1 = colorScales.vermilion,
+  vermilion$2 = colorScales.vermilion,
   smalt = colorScales.smalt,
-  violet$3 = colorScales.violet,
+  violet$2 = colorScales.violet,
   yellow$1 = colorScales.yellow;
 ({
   black: '#000000',
@@ -979,11 +980,11 @@ var blue$1 = colorScales.blue,
   blueLight30: blue$1.lighten30,
   blueLight75: blue$1.lighten75,
   blueLight90: blue$1.lighten90,
-  dodgerBlue: ultramarineBlue$1.base,
-  dodgerBlueDark30: ultramarineBlue$1.darken30,
-  dodgerBlueLight30: ultramarineBlue$1.lighten30,
-  dodgerBlueLight75: ultramarineBlue$1.lighten75,
-  dodgerBlueLight90: ultramarineBlue$1.lighten90,
+  dodgerBlue: ultramarineBlue$2.base,
+  dodgerBlueDark30: ultramarineBlue$2.darken30,
+  dodgerBlueLight30: ultramarineBlue$2.lighten30,
+  dodgerBlueLight75: ultramarineBlue$2.lighten75,
+  dodgerBlueLight90: ultramarineBlue$2.lighten90,
   green: green$1.base,
   greenDark15: green$1.darken15,
   greenDark30: green$1.darken30,
@@ -1008,13 +1009,13 @@ var blue$1 = colorScales.blue,
   grotesqueGreenLight60: grotesqueGreen.lighten60,
   grotesqueGreenLight75: grotesqueGreen.lighten75,
   grotesqueGreenLight90: grotesqueGreen.lighten90,
-  orange: deepSaffron$1.base,
-  orangeDark15: deepSaffron$1.darken15,
-  orangeDark30: deepSaffron$1.darken30,
-  orangeDark75: deepSaffron$1.darken75,
-  orangeLight30: deepSaffron$1.lighten30,
-  orangeLight75: deepSaffron$1.lighten75,
-  orangeLight90: deepSaffron$1.lighten90,
+  orange: deepSaffron$2.base,
+  orangeDark15: deepSaffron$2.darken15,
+  orangeDark30: deepSaffron$2.darken30,
+  orangeDark75: deepSaffron$2.darken75,
+  orangeLight30: deepSaffron$2.lighten30,
+  orangeLight75: deepSaffron$2.lighten75,
+  orangeLight90: deepSaffron$2.lighten90,
   pink: pink$1.base,
   pinkDark15: pink$1.darken15,
   pinkDark30: pink$1.darken30,
@@ -1026,30 +1027,30 @@ var blue$1 = colorScales.blue,
   pinkLight90: pink$1.lighten90,
   purple: purple$1.base,
   purpleDark15: purple$1.darken15,
-  red: vermilion$1.base,
-  redDark15: vermilion$1.darken15,
-  redDark30: vermilion$1.darken30,
-  redDark75: vermilion$1.darken75,
-  redLight15: vermilion$1.lighten15,
-  redLight30: vermilion$1.lighten30,
-  redLight60: vermilion$1.lighten60,
-  redLight75: vermilion$1.lighten75,
-  redLight90: vermilion$1.lighten90,
+  red: vermilion$2.base,
+  redDark15: vermilion$2.darken15,
+  redDark30: vermilion$2.darken30,
+  redDark75: vermilion$2.darken75,
+  redLight15: vermilion$2.lighten15,
+  redLight30: vermilion$2.lighten30,
+  redLight60: vermilion$2.lighten60,
+  redLight75: vermilion$2.lighten75,
+  redLight90: vermilion$2.lighten90,
   smalt: smalt.base,
   smaltDark75: smalt.darken75,
   smaltLight30: smalt.lighten30,
   smaltLight45: smalt.lighten45,
   smaltLight75: smalt.lighten75,
   smaltLight90: smalt.lighten90,
-  violet: violet$3.base,
-  violetDark15: violet$3.darken15,
-  violetDark30: violet$3.darken30,
-  violetDark45: violet$3.darken45,
-  violetDark75: violet$3.darken75,
-  violetLight30: violet$3.lighten30,
-  violetLight60: violet$3.lighten60,
-  violetLight75: violet$3.lighten75,
-  violetLight90: violet$3.lighten90,
+  violet: violet$2.base,
+  violetDark15: violet$2.darken15,
+  violetDark30: violet$2.darken30,
+  violetDark45: violet$2.darken45,
+  violetDark75: violet$2.darken75,
+  violetLight30: violet$2.lighten30,
+  violetLight60: violet$2.lighten60,
+  violetLight75: violet$2.lighten75,
+  violetLight90: violet$2.lighten90,
   yellow: yellow$1.base,
   yellowDark15: yellow$1.darken15,
   yellowDark75: yellow$1.darken75,
@@ -1058,32 +1059,23 @@ var blue$1 = colorScales.blue,
 });
 var aliceBlue = colorScales.aliceBlue,
   antiFlashWhite = colorScales.antiFlashWhite,
-  apple$1 = colorScales.apple,
-  currant$1 = colorScales.currant,
-  darkBlue = colorScales.darkBlue,
-  deepSaffron = colorScales.deepSaffron,
-  emerald = colorScales.emerald,
-  gold$1 = colorScales.gold,
+  apple$2 = colorScales.apple,
+  deepSaffron$1 = colorScales.deepSaffron,
+  emerald$1 = colorScales.emerald,
   grey$2 = colorScales.grey,
   honeydew$1 = colorScales.honeydew,
   linen$1 = colorScales.linen,
-  maasstrichtBlue = colorScales.maasstrichtBlue,
-  mauve$2 = colorScales.mauve,
+  maasstrichtBlue$1 = colorScales.maasstrichtBlue,
   mellowApricot = colorScales.mellowApricot,
-  nightBlue = colorScales.nightBlue,
-  pastelRed = colorScales.pastelRed,
-  pineGreen = colorScales.pineGreen,
-  royalBlue$1 = colorScales.royalBlue,
-  scarletGum$1 = colorScales.scarletGum,
+  pastelRed$1 = colorScales.pastelRed,
+  pineGreen$1 = colorScales.pineGreen,
   seashell$1 = colorScales.seashell,
   silverChalice = colorScales.silverChalice,
-  sonicSilver = colorScales.sonicSilver,
-  ultramarineBlue = colorScales.ultramarineBlue,
-  vermilion = colorScales.vermilion,
-  violet$2 = colorScales.violet,
-  violet1$1 = colorScales.violet1,
+  sonicSilver$1 = colorScales.sonicSilver,
+  ultramarineBlue$1 = colorScales.ultramarineBlue,
+  vermilion$1 = colorScales.vermilion,
   vodka = colorScales.vodka;
-var palette$5 = {
+var palette$6 = {
   black: '#000000',
   white: '#ffffff',
   greyLight95: grey$2.lighten95,
@@ -1092,60 +1084,89 @@ var palette$5 = {
   greyLight45: grey$2.lighten45,
   greyLight30: grey$2.lighten30,
   grey: grey$2.base,
-  maasstrichtBlueLight90: maasstrichtBlue.lighten90,
-  maasstrichtBlueLight80: maasstrichtBlue.lighten80,
-  maasstrichtBlueLight50: maasstrichtBlue.lighten50,
-  maasstrichtBlueLight30: maasstrichtBlue.lighten30,
-  maasstrichtBlue: maasstrichtBlue.base,
-  pastelRed: pastelRed.base,
-  pastelRedLight20: pastelRed.lighten20,
+  maasstrichtBlueLight90: maasstrichtBlue$1.lighten90,
+  maasstrichtBlueLight80: maasstrichtBlue$1.lighten80,
+  maasstrichtBlueLight50: maasstrichtBlue$1.lighten50,
+  maasstrichtBlueLight30: maasstrichtBlue$1.lighten30,
+  maasstrichtBlue: maasstrichtBlue$1.base,
+  pastelRed: pastelRed$1.base,
+  pastelRedLight20: pastelRed$1.lighten20,
   mellowApricot: mellowApricot.base,
   mellowApricotLight20: mellowApricot.lighten20,
-  emerald: emerald.base,
-  emeraldLight20: emerald.lighten20,
-  emeraldDark20: emerald.darken20,
+  emerald: emerald$1.base,
+  emeraldLight20: emerald$1.lighten20,
+  emeraldDark20: emerald$1.darken20,
   vodka: vodka.base,
   vodkaLight20: vodka.lighten20,
-  vermilion: vermilion.base,
-  deepSaffron: deepSaffron.base,
-  deepSaffronDark20: deepSaffron.darken20,
-  pineGreen: pineGreen.base,
-  ultramarineBlue: ultramarineBlue.base,
-  sonicSilver: sonicSilver.base,
+  vermilion: vermilion$1.base,
+  deepSaffron: deepSaffron$1.base,
+  deepSaffronDark20: deepSaffron$1.darken20,
+  pineGreen: pineGreen$1.base,
+  ultramarineBlue: ultramarineBlue$1.base,
+  sonicSilver: sonicSilver$1.base,
   linen: linen$1.base,
   seashell: seashell$1.base,
   honeydew: honeydew$1.base,
   aliceBlue: aliceBlue.base,
   antiFlashWhite: antiFlashWhite.base,
-  apple: apple$1.base,
+  apple: apple$2.base,
+  silverChalice: silverChalice.base,
+  silverChaliceLight20: silverChalice.lighten20
+};
+var currant$1 = colorScales.currant,
+  sonicSilver = colorScales.sonicSilver,
+  maasstrichtBlue = colorScales.maasstrichtBlue,
+  nightBlue = colorScales.nightBlue,
+  darkBlue = colorScales.darkBlue,
+  ultramarineBlue = colorScales.ultramarineBlue,
+  royalBlue$1 = colorScales.royalBlue,
+  emerald = colorScales.emerald,
+  pineGreen = colorScales.pineGreen,
+  deepSaffron = colorScales.deepSaffron,
+  gold$1 = colorScales.gold,
+  apple$1 = colorScales.apple,
+  pastelRed = colorScales.pastelRed,
+  vermilion = colorScales.vermilion,
+  mauve$2 = colorScales.mauve,
+  violet1$1 = colorScales.violet1,
+  violet$1 = colorScales.violet,
+  scarletGum$1 = colorScales.scarletGum;
+var palette$5 = {
   currant: currant$1.base,
+  sonicSilver: sonicSilver.base,
+  maasstrichtBlue: maasstrichtBlue.base,
   nightBlue: nightBlue.base,
   darkBlue: darkBlue.base,
+  ultramarineBlue: ultramarineBlue.base,
   royalBlue: royalBlue$1.base,
   royalBlueDark20: royalBlue$1.darken20,
+  emeraldDark20: emerald.darken20,
+  pineGreen: pineGreen.base,
+  deepSaffronDark20: deepSaffron.darken20,
   goldDark40: gold$1.darken40,
+  apple: apple$1.base,
+  pastelRed: pastelRed.base,
+  vermilion: vermilion.base,
   mauve: mauve$2.base,
-  violet: violet$2.base,
-  violetLight30: violet$2.lighten30,
+  violetLight30: violet$1.lighten30,
   violet1: violet1$1.base,
-  scarletGum: scarletGum$1.base,
-  silverChalice: silverChalice.base,
-  silverChaliceLight20: silverChalice.lighten20
+  violet: violet$1.base,
+  scarletGum: scarletGum$1.base
 };
-var violet$1 = colorScales.violet,
+var violet$3 = colorScales.violet,
   mauve$1 = colorScales.mauve;
-var palette$4 = Object.assign(Object.assign({}, palette$5), {
-  violet: violet$1.base,
-  violetLight20: violet$1.lighten20,
-  violetLight30: violet$1.lighten30,
-  violetLight90: violet$1.lighten90,
+var palette$4 = Object.assign(Object.assign({}, palette$6), {
+  violet: violet$3.base,
+  violetLight20: violet$3.lighten20,
+  violetLight30: violet$3.lighten30,
+  violetLight90: violet$3.lighten90,
   mauve: mauve$1.base,
   mauveLight80: mauve$1.lighten80
 });
 var apple = colorScales.apple,
   currant = colorScales.currant,
   hitPink = colorScales.hitPink;
-var palette$3 = Object.assign(Object.assign({}, palette$5), {
+var palette$3 = Object.assign(Object.assign({}, palette$6), {
   apple: apple.base,
   appleLight10: apple.lighten10,
   hitPink: hitPink.base,
@@ -1158,7 +1179,7 @@ var palette$3 = Object.assign(Object.assign({}, palette$5), {
 var scarletGum = colorScales.scarletGum,
   violet1 = colorScales.violet1,
   mauve = colorScales.mauve;
-var palette$2 = Object.assign(Object.assign({}, palette$5), {
+var palette$2 = Object.assign(Object.assign({}, palette$6), {
   scarletGumLight20: scarletGum.lighten20,
   scarletGumLight30: scarletGum.lighten30,
   scarletGumLight50: scarletGum.lighten50,
@@ -1174,7 +1195,7 @@ var palette$2 = Object.assign(Object.assign({}, palette$5), {
 });
 var royalBlue = colorScales.royalBlue,
   frenchSky = colorScales.frenchSky;
-var palette$1 = Object.assign(Object.assign({}, palette$5), {
+var palette$1 = Object.assign(Object.assign({}, palette$6), {
   royalBlue: royalBlue.base,
   royalBlueLight10: royalBlue.lighten10,
   royalBlueLight80: royalBlue.lighten80,
@@ -1185,106 +1206,104 @@ var palette$1 = Object.assign(Object.assign({}, palette$5), {
   frenchSkyLight80: frenchSky.lighten80
 });
 var gold$2 = colorScales.gold,
-  violet$4 = colorScales.violet;
-var palette = Object.assign(Object.assign({}, palette$5), {
+  policeBlue = colorScales.policeBlue;
+var palette = Object.assign(Object.assign({}, palette$6), {
   goldLight20: gold$2.lighten20,
   goldLight50: gold$2.lighten50,
   goldLight70: gold$2.lighten70,
   goldLight80: gold$2.lighten80,
   goldLight90: gold$2.lighten90,
   gold: gold$2.base,
-  violet: violet$4.base,
-  violetLight20: violet$4.lighten20,
-  violetLight30: violet$4.lighten30,
-  violetLight50: violet$4.lighten50,
-  violetLight80: violet$4.lighten80,
-  violetLight90: violet$4.lighten90
+  policeBlue: policeBlue.base,
+  policeBlueLight20: policeBlue.lighten20,
+  policeBlueLight25: policeBlue.lighten25,
+  policeBlueLight90: policeBlue.lighten90
 });
 
 var globalPalette = {
   // Updated 21 / Nov / 22
   // Surfaces
-  defaultGlobalSurface: palette$5.white,
-  onDefaultGlobalSurface: palette$5.maasstrichtBlue,
-  neutralGlobalSurface: palette$5.greyLight90,
-  mutedOnDefaultGlobalSurface: palette$5.maasstrichtBlueLight30,
-  inactiveOnDefaultGlobalSurface: palette$5.maasstrichtBlueLight50,
-  disabledOnDefaultGlobalSurface: palette$5.greyLight30,
-  darkGlobalSurface: palette$5.maasstrichtBlue,
-  onDarkGlobalSurface: palette$5.white,
+  defaultGlobalSurface: palette$6.white,
+  onDefaultGlobalSurface: palette$6.maasstrichtBlue,
+  neutralGlobalSurface: palette$6.greyLight90,
+  mutedOnDefaultGlobalSurface: palette$6.maasstrichtBlueLight30,
+  inactiveOnDefaultGlobalSurface: palette$6.maasstrichtBlueLight50,
+  disabledOnDefaultGlobalSurface: palette$6.greyLight30,
+  darkGlobalSurface: palette$6.maasstrichtBlue,
+  onDarkGlobalSurface: palette$6.white,
   // Outlines
-  primaryOutline: palette$5.maasstrichtBlue,
-  secondaryOutline: palette$5.greyLight75,
-  inactiveOutline: palette$5.maasstrichtBlueLight50,
-  disabledOutline: palette$5.greyLight30,
+  primaryOutline: palette$6.maasstrichtBlue,
+  secondaryOutline: palette$6.greyLight75,
+  inactiveOutline: palette$6.maasstrichtBlueLight50,
+  disabledOutline: palette$6.greyLight30,
   // Accents
-  error: palette$5.pastelRed,
-  mutedError: palette$5.pastelRedLight20,
-  errorSurface: palette$5.linen,
-  onErrorSurface: palette$5.vermilion,
-  warning: palette$5.mellowApricot,
-  mutedWarning: palette$5.mellowApricotLight20,
-  warningSurface: palette$5.seashell,
-  onWarningSurface: palette$5.deepSaffron,
-  success: palette$5.emerald,
-  mutedSuccess: palette$5.emeraldLight20,
-  successSurface: palette$5.honeydew,
-  onSuccessSurface: palette$5.pineGreen,
-  info: palette$5.vodka,
-  mutedInfo: palette$5.vodkaLight20,
-  infoSurface: palette$5.aliceBlue,
-  onInfoSurface: palette$5.ultramarineBlue,
-  archived: palette$5.silverChalice,
-  mutedArchived: palette$5.silverChaliceLight20,
-  archivedSurface: palette$5.antiFlashWhite,
-  onArchivedSurface: palette$5.sonicSilver
+  error: palette$6.pastelRed,
+  mutedError: palette$6.pastelRedLight20,
+  errorSurface: palette$6.linen,
+  onErrorSurface: palette$6.vermilion,
+  warning: palette$6.mellowApricot,
+  mutedWarning: palette$6.mellowApricotLight20,
+  warningSurface: palette$6.seashell,
+  onWarningSurface: palette$6.deepSaffron,
+  success: palette$6.emerald,
+  mutedSuccess: palette$6.emeraldLight20,
+  successSurface: palette$6.honeydew,
+  onSuccessSurface: palette$6.pineGreen,
+  info: palette$6.vodka,
+  mutedInfo: palette$6.vodkaLight20,
+  infoSurface: palette$6.aliceBlue,
+  onInfoSurface: palette$6.ultramarineBlue,
+  archived: palette$6.silverChalice,
+  mutedArchived: palette$6.silverChaliceLight20,
+  archivedSurface: palette$6.antiFlashWhite,
+  onArchivedSurface: palette$6.sonicSilver
   // End of Updated 21 / Nov / 22
 };
 
 var legacySystemPalette = {
-  globalPrimary: palette$5.maasstrichtBlue,
-  globalPrimaryLight: palette$5.maasstrichtBlueLight50,
-  globalPrimaryBackground: palette$5.maasstrichtBlueLight90,
+  globalPrimary: palette$6.maasstrichtBlue,
+  globalPrimaryLight: palette$6.maasstrichtBlueLight50,
+  globalPrimaryBackground: palette$6.maasstrichtBlueLight90,
   primaryLight: palette$2.violetLight50,
   primaryDark: palette$2.scarletGumLight30,
   primaryBackground: palette$2.violetLight90,
-  primaryBackgroundDark: palette$5.maasstrichtBlueLight30,
+  primaryBackgroundDark: palette$6.maasstrichtBlueLight30,
   secondaryLight: palette$2.vodka,
   secondaryBackground: palette$2.aliceBlue,
-  infoMediumLight: palette$5.vodka,
-  infoLight: palette$5.vodka,
-  infoBackground: palette$5.aliceBlue,
-  successLight: palette$5.emerald,
-  successDark: palette$5.pineGreen,
-  successBackground: palette$5.honeydew,
-  danger: palette$5.vermilion,
-  dangerMediumLight: palette$5.apple,
-  dangerLight: palette$5.pastelRed,
-  dangerBackground: palette$5.linen,
-  warningLight: palette$5.mellowApricot,
-  warningDark: palette$5.deepSaffron,
-  warningBackground: palette$5.seashell,
-  platformBackground: palette$5.white,
-  backgroundLight: palette$5.greyLight90,
-  backgroundDark: palette$5.maasstrichtBlue,
-  text: palette$5.maasstrichtBlue,
-  subduedText: palette$5.maasstrichtBlueLight30,
-  disabledText: palette$5.maasstrichtBlueLight50,
-  disabledLightText: palette$5.greyLight30,
-  invertedText: palette$5.white,
-  outline: palette$5.greyLight75,
-  archivedLight: palette$5.greyLight30,
-  archivedDark: palette$5.sonicSilver,
-  archivedBackground: palette$5.greyLight90,
-  black: palette$5.black,
-  inactiveBackground: palette$5.maasstrichtBlueLight50,
-  shadow: palette$5.greyLight45,
+  infoMediumLight: palette$6.vodka,
+  infoLight: palette$6.vodka,
+  infoBackground: palette$6.aliceBlue,
+  successLight: palette$6.emerald,
+  successDark: palette$6.pineGreen,
+  successBackground: palette$6.honeydew,
+  danger: palette$6.vermilion,
+  dangerMediumLight: palette$6.apple,
+  dangerLight: palette$6.pastelRed,
+  dangerBackground: palette$6.linen,
+  warningLight: palette$6.mellowApricot,
+  warningDark: palette$6.deepSaffron,
+  warningBackground: palette$6.seashell,
+  platformBackground: palette$6.white,
+  backgroundLight: palette$6.greyLight90,
+  backgroundDark: palette$6.maasstrichtBlue,
+  text: palette$6.maasstrichtBlue,
+  subduedText: palette$6.maasstrichtBlueLight30,
+  disabledText: palette$6.maasstrichtBlueLight50,
+  disabledLightText: palette$6.greyLight30,
+  invertedText: palette$6.white,
+  outline: palette$6.greyLight75,
+  archivedLight: palette$6.greyLight30,
+  archivedDark: palette$6.sonicSilver,
+  archivedBackground: palette$6.greyLight90,
+  black: palette$6.black,
+  inactiveBackground: palette$6.maasstrichtBlueLight50,
+  shadow: palette$6.greyLight45,
   // Updated 14 / Nov / 22
-  mutedGlobalPrimary: palette$5.maasstrichtBlueLight30,
-  onGlobalPrimary: palette$5.white,
-  globalSecondary: palette$5.maasstrichtBlueLight30,
-  globalPrimaryOutline: palette$5.maasstrichtBlue,
-  globalSecondaryOutline: palette$5.greyLight75
+  mutedGlobalPrimary: palette$6.maasstrichtBlueLight30,
+  onGlobalPrimary: palette$6.white,
+  globalSecondary: palette$6.maasstrichtBlueLight30,
+  globalPrimaryOutline: palette$6.maasstrichtBlue,
+  globalSecondaryOutline: palette$6.greyLight75
 };
 
 var swagBrandSystemPallete = {
@@ -1308,13 +1327,13 @@ var swagLegacyBrandSystemPalette = {
 var swagSystemPalette = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, legacySystemPalette), swagLegacyBrandSystemPalette), globalPalette), swagBrandSystemPallete);
 
 var workBrandSystemPallete = {
-  primary: palette.violet,
+  primary: palette.policeBlue,
   onPrimary: palette.white,
-  secondary: palette.violetLight30,
+  secondary: palette.policeBlueLight25,
   onSecondary: palette.white,
   defaultSurface: palette.white,
-  highlightedSurface: palette.violetLight90,
-  pressedSurface: palette.violetLight20,
+  highlightedSurface: palette.policeBlueLight90,
+  pressedSurface: palette.policeBlueLight20,
   decorativePrimary: palette.gold,
   decorativePrimarySurface: palette.goldLight80
 };
@@ -1582,8 +1601,7 @@ var getAvatarTheme = function getAvatarTheme(theme) {
     danger: theme.colors.error,
     success: theme.colors.success,
     warning: theme.colors.warning,
-    text: theme.colors.invertedText,
-    visualisation: [palette$5.currant, palette$5.sonicSilver, palette$5.maasstrichtBlue, palette$5.nightBlue, palette$5.darkBlue, palette$5.ultramarineBlue, palette$5.royalBlue, palette$5.royalBlueDark20, palette$5.emeraldDark20, palette$5.pineGreen, palette$5.deepSaffronDark20, palette$5.goldDark40, palette$5.apple, palette$5.pastelRed, palette$5.vermilion, palette$5.mauve, palette$5.violetLight30, palette$5.violet1, palette$5.violet, palette$5.scarletGum]
+    text: theme.colors.onDarkGlobalSurface
   };
   var sizes = {
     small: theme.sizes.xlarge,
@@ -5642,7 +5660,9 @@ var useDeprecation = function useDeprecation(message) {
   var cond = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   useEffect(function () {
     // eslint-disable-next-line no-console
-    console.warn(message);
+    if (cond) {
+      console.warn(message);
+    }
   }, [message, cond]);
 };
 
@@ -5762,7 +5782,7 @@ var Typography = {
 };
 
 // 🔴 DO NOT EDIT — This file is generated automatically.
-var IconList = ['activate', 'add-emoji', 'add-person', 'adjustment', 'alignment', 'antenna', 'archive', 'assignment-warning', 'bank', 'bell', 'billing', 'bookmark', 'box-check', 'box', 'buildings', 'cake', 'calendar-clock', 'calendar', 'candy-box-menu', 'carat-down-small', 'carat-down', 'carat-left-small', 'carat-left', 'carat-right-small', 'carat-right', 'carat-up-small', 'carat-up', 'caret-down-small', 'caret-down', 'caret-left-small', 'caret-left', 'caret-right-small', 'caret-right', 'caret-up-small', 'caret-up', 'check-radio', 'circle-add', 'circle-cancel', 'circle-check', 'circle-down', 'circle-info', 'circle-left', 'circle-ok', 'circle-pencil', 'circle-question', 'circle-remove', 'circle-right', 'circle-up', 'circle-warning', 'clock-3', 'clock', 'cloud-download', 'cloud-upload', 'cog', 'coin', 'contacts', 'credit-card', 'diamond', 'direction-arrows', 'directory', 'document', 'dollar-coin-shine', 'double-buildings', 'edit-template', 'envelope', 'expense', 'eye-circle', 'eye-invisible', 'eye', 'face-meh', 'face-sad', 'face-smiley', 'feed', 'feedbacks', 'file-certified', 'file-clone', 'file-copy', 'file-csv', 'file-dispose', 'file-doc', 'file-excel', 'file-export', 'file-lock', 'file-pdf', 'file-powerpoint', 'file-search', 'file-secured', 'file-sheets', 'file-slide', 'file-verified', 'file-word', 'file', 'filter', 'folder-user', 'folder', 'format-bold', 'format-heading1', 'format-heading2', 'format-italic', 'format-list-bulleted', 'format-list-numbered', 'format-underlined', 'funnel-filter', 'global-dollar', 'globe', 'graduation-cap', 'graph', 'happy-sun', 'health-bag', 'heart', 'home', 'image', 'import', 'incident-siren', 'instapay', 'list', 'loading-2', 'loading', 'location', 'lock', 'looks-one', 'looks-two', 'media-content', 'menu', 'moneybag', 'moon', 'multiple-stars', 'multiple-users', 'node', 'open-folder', 'paperclip', 'payment-summary', 'pencil', 'phone', 'piggy-bank', 'plane', 'play-circle', 'print', 'raising-hands', 'reply-arrow', 'reply', 'reschedule', 'rostering', 'save', 'schedule-send', 'schedule', 'search-person', 'send', 'speaker-active', 'speaker', 'star-award', 'star-badge', 'star-medal', 'star', 'steps-circle', 'stopwatch', 'suitcase', 'survey', 'swag', 'switch', 'tag', 'target', 'teams', 'timesheet', 'touch-id', 'trash-bin', 'unlock', 'user', 'video-1', 'video-2', 'wallet', 'warning', 'activate-outlined', 'add-credit-card-outlined', 'add-person-outlined', 'add-section-outlined', 'add-time-outlined', 'add', 'adjustment-outlined', 'alignment-2-outlined', 'alignment-outlined', 'all-caps', 'arrow-down', 'arrow-downwards', 'arrow-left', 'arrow-leftwards', 'arrow-right', 'arrow-rightwards', 'arrow-up', 'arrow-upwards', 'at-sign', 'bell-active-outlined', 'bell-outlined', 'bell-slash-outlined', 'billing-outlined', 'body-outlined', 'bold', 'bookmark-added-outlined', 'bookmark-outlined', 'box-check-outlined', 'box-outlined', 'bullet-points', 'cake-outlined', 'calendar-dates-outlined', 'calendar-star-outlined', 'camera-outlined', 'cancel', 'chat-bubble-outlined', 'chat-unread-outlined', 'checkmark', 'circle-add-outlined', 'circle-cancel-outlined', 'circle-down-outlined', 'circle-info-outlined', 'circle-left-outlined', 'circle-ok-outlined', 'circle-question-outlined', 'circle-remove-outlined', 'circle-right-outlined', 'circle-up-outlined', 'circle-warning-outlined', 'clock-2-outlined', 'clock-outlined', 'cog-outlined', 'coin-outlined', 'comment-outlined', 'contacts-outlined', 'credit-card-outlined', 'cup-outlined', 'direction-arrows-outlined', 'directory-outlined', 'document-outlined', 'dollar-card-outlined', 'dollar-coin-shine-outlined', 'dollar-sign', 'double-buildings-outlined', 'double-left-arrows', 'double-right-arrows', 'download-outlined', 'edit-template-outlined', 'email-outlined', 'enter-arrow', 'envelope-outlined', 'expense-outlined', 'explore-outlined', 'external-link', 'eye-invisible-outlined', 'eye-outlined', 'face-id', 'face-meh-outlined', 'face-open-smiley-outlined', 'face-sad-outlined', 'face-smiley-outlined', 'feed-outlined', 'file-certified-outlined', 'file-clone-outlined', 'file-copy-outlined', 'file-dispose-outlined', 'file-dollar-outlined', 'file-download-outlined', 'file-export-outlined', 'file-lock-outlined', 'file-outlined', 'file-search-outlined', 'file-secured-outlined', 'file-verified-outlined', 'filter-outlined', 'folder-outlined', 'folder-user-outlined', 'funnel-filter-outline', 'graph-outlined', 'hand-holding-user-outlined', 'happy-sun-outlined', 'health-bag-outlined', 'heart-outlined', 'home-active-outlined', 'home-outlined', 'id-card-outlined', 'image-outlined', 'import-outlined', 'instapay-outlined', 'italic', 'link-1', 'link-2', 'list-outlined', 'live-help-outlined', 'location-outlined', 'lock-outlined', 'locked-file-outlined', 'log-out', 'media-content-outlined', 'menu-close', 'menu-expand', 'menu-fold-outlined', 'menu-unfold-outlined', 'moneybag-outlined', 'moon-outlined', 'more-horizontal', 'more-vertical', 'multiple-folders-outlined', 'multiple-users-outlined', 'near-me-outlined', 'node-outlined', 'number-points', 'number', 'payment-summary-outlined', 'payslip-outlined', 'pencil-outlined', 'percentage', 'phone-outlined', 'piggy-bank-outlined', 'plane-outlined', 'play-circle-outlined', 'print-outlined', 'qr-code-outlined', 're-assign', 'redeem', 'refresh', 'remove', 'reply-outlined', 'restart', 'return-arrow', 'rostering-outlined', 'save-outlined', 'schedule-outlined', 'search-outlined', 'search-secured-outlined', 'send-outlined', 'share-1', 'share-2', 'single-down-arrow', 'single-left-arrow', 'single-right-arrow', 'single-up-arrow', 'speaker-active-outlined', 'speaker-outlined', 'star-outlined', 'stopwatch-outlined', 'strikethrough', 'suitcase-clock-outlined', 'suitcase-outlined', 'survey-outlined', 'switch-outlined', 'sync', 'target-outlined', 'timesheet-outlined', 'transfer', 'trash-bin-outlined', 'umbrela-outlined', 'unavailable', 'underline', 'unlock-outlined', 'upload-outlined', 'user-circle-outlined', 'user-gear-outlined', 'user-outlined', 'user-rectangle-outlined', 'video-1-outlined', 'video-2-outlined', 'wallet-outlined'];
+var IconList = ['activate', 'add-emoji', 'add-person', 'adjustment', 'alignment', 'antenna', 'archive', 'assignment-warning', 'bank', 'bell', 'billing', 'bookmark', 'box-check', 'box', 'buildings', 'cake', 'calendar-clock', 'calendar', 'candy-box-menu', 'carat-down-small', 'carat-down', 'carat-left-small', 'carat-left', 'carat-right-small', 'carat-right', 'carat-up-small', 'carat-up', 'caret-down-small', 'caret-down', 'caret-left-small', 'caret-left', 'caret-right-small', 'caret-right', 'caret-up-small', 'caret-up', 'check-radio', 'circle-add', 'circle-cancel', 'circle-check', 'circle-down', 'circle-info', 'circle-left', 'circle-ok', 'circle-pencil', 'circle-question', 'circle-remove', 'circle-right', 'circle-up', 'circle-warning', 'clock-3', 'clock', 'cloud-download', 'cloud-upload', 'cog', 'coin', 'contacts', 'credit-card', 'diamond', 'direction-arrows', 'directory', 'document', 'dollar-coin-shine', 'double-buildings', 'edit-template', 'envelope', 'expense', 'eye-circle', 'eye-invisible', 'eye', 'face-meh', 'face-sad', 'face-smiley', 'feed', 'feedbacks', 'file-certified', 'file-clone', 'file-copy', 'file-csv', 'file-dispose', 'file-doc', 'file-excel', 'file-export', 'file-lock', 'file-pdf', 'file-powerpoint', 'file-search', 'file-secured', 'file-sheets', 'file-slide', 'file-verified', 'file-word', 'file', 'filter', 'folder-user', 'folder', 'format-bold', 'format-heading1', 'format-heading2', 'format-italic', 'format-list-bulleted', 'format-list-numbered', 'format-underlined', 'funnel-filter', 'global-dollar', 'globe', 'graduation-cap', 'graph', 'happy-sun', 'health-bag', 'heart', 'home', 'image', 'import', 'incident-siren', 'instapay', 'list', 'loading-2', 'loading', 'location', 'lock', 'looks-one', 'looks-two', 'media-content', 'menu', 'moneybag', 'moon', 'multiple-stars', 'multiple-users', 'node', 'open-folder', 'paperclip', 'payment-summary', 'pencil', 'phone', 'piggy-bank', 'plane', 'play-circle', 'print', 'raising-hands', 'reply-arrow', 'reply', 'reschedule', 'rostering', 'save', 'schedule-send', 'schedule', 'search-person', 'send', 'speaker-active', 'speaker', 'star-award', 'star-badge', 'star-medal', 'star', 'steps-circle', 'stopwatch', 'suitcase', 'survey', 'swag', 'switch', 'tag', 'target', 'teams', 'timesheet', 'touch-id', 'trash-bin', 'unlock', 'user', 'video-1', 'video-2', 'wallet', 'warning', 'activate-outlined', 'add-credit-card-outlined', 'add-person-outlined', 'add-section-outlined', 'add-time-outlined', 'add', 'adjustment-outlined', 'alignment-2-outlined', 'alignment-outlined', 'all-caps', 'arrow-down', 'arrow-downwards', 'arrow-left', 'arrow-leftwards', 'arrow-right', 'arrow-rightwards', 'arrow-up', 'arrow-upwards', 'at-sign', 'bell-active-outlined', 'bell-outlined', 'bell-slash-outlined', 'billing-outlined', 'body-outlined', 'bold', 'bookmark-added-outlined', 'bookmark-outlined', 'box-check-outlined', 'box-outlined', 'bullet-points', 'cake-outlined', 'calendar-dates-outlined', 'calendar-star-outlined', 'camera-outlined', 'cancel', 'chat-bubble-outlined', 'chat-unread-outlined', 'checkmark', 'circle-add-outlined', 'circle-cancel-outlined', 'circle-down-outlined', 'circle-info-outlined', 'circle-left-outlined', 'circle-ok-outlined', 'circle-question-outlined', 'circle-remove-outlined', 'circle-right-outlined', 'circle-up-outlined', 'circle-warning-outlined', 'clock-2-outlined', 'clock-outlined', 'cog-outlined', 'coin-outlined', 'comment-outlined', 'contacts-outlined', 'credit-card-outlined', 'cup-outlined', 'direction-arrows-outlined', 'directory-outlined', 'document-outlined', 'dollar-card-outlined', 'dollar-coin-shine-outlined', 'dollar-sign', 'double-buildings-outlined', 'double-left-arrows', 'double-right-arrows', 'download-outlined', 'edit-template-outlined', 'email-outlined', 'enter-arrow', 'envelope-outlined', 'expense-outlined', 'explore-outlined', 'external-link', 'eye-invisible-outlined', 'eye-outlined', 'face-id', 'face-meh-outlined', 'face-open-smiley-outlined', 'face-sad-outlined', 'face-smiley-outlined', 'feed-outlined', 'file-certified-outlined', 'file-clone-outlined', 'file-copy-outlined', 'file-dispose-outlined', 'file-dollar-outlined', 'file-download-outlined', 'file-export-outlined', 'file-lock-outlined', 'file-outlined', 'file-search-outlined', 'file-secured-outlined', 'file-verified-outlined', 'filter-outlined', 'folder-outlined', 'folder-user-outlined', 'funnel-filter-outline', 'graph-outlined', 'hand-holding-user-outlined', 'happy-sun-outlined', 'health-bag-outlined', 'heart-outlined', 'home-active-outlined', 'home-outlined', 'id-card-outlined', 'image-outlined', 'import-outlined', 'instapay-outlined', 'italic', 'link-1', 'link-2', 'list-outlined', 'live-help-outlined', 'location-outlined', 'lock-outlined', 'locked-file-outlined', 'log-out', 'media-content-outlined', 'menu-close', 'menu-expand', 'menu-fold-outlined', 'menu-unfold-outlined', 'moneybag-outlined', 'moon-outlined', 'more-horizontal', 'more-vertical', 'multiple-folders-outlined', 'multiple-users-outlined', 'near-me-outlined', 'node-outlined', 'number-points', 'number', 'payment-summary-outlined', 'payslip-outlined', 'pencil-outlined', 'percentage', 'phone-outlined', 'piggy-bank-outlined', 'plane-outlined', 'play-circle-outlined', 'print-outlined', 'qr-code-outlined', 're-assign', 'redeem', 'refresh', 'remove', 'reply-outlined', 'restart', 'return-arrow', 'rostering-outlined', 'save-outlined', 'schedule-outlined', 'search-outlined', 'search-secured-outlined', 'send-outlined', 'share-1', 'share-2', 'share-outlined', 'single-down-arrow', 'single-left-arrow', 'single-right-arrow', 'single-up-arrow', 'speaker-active-outlined', 'speaker-outlined', 'star-outlined', 'stopwatch-outlined', 'strikethrough', 'suitcase-clock-outlined', 'suitcase-outlined', 'survey-outlined', 'switch-outlined', 'sync', 'target-outlined', 'timesheet-outlined', 'transfer', 'trash-bin-outlined', 'umbrela-outlined', 'unavailable', 'underline', 'unlock-outlined', 'upload-outlined', 'user-circle-outlined', 'user-gear-outlined', 'user-outlined', 'user-rectangle-outlined', 'video-1-outlined', 'video-2-outlined', 'wallet-outlined'];
 
 var activate = 59000;
 var adjustment = 59003;
@@ -5842,11 +5862,11 @@ var redeem = 59316;
 var refresh = 59317;
 var remove = 59318;
 var restart = 59320;
-var strikethrough = 59338;
-var sync = 59343;
-var transfer = 59346;
-var unavailable = 59349;
-var underline = 59350;
+var strikethrough = 59339;
+var sync = 59344;
+var transfer = 59347;
+var unavailable = 59350;
+var underline = 59351;
 var glyphMap = {
 	activate: activate,
 	"add-emoji": 59001,
@@ -6178,36 +6198,37 @@ var glyphMap = {
 	"send-outlined": 59327,
 	"share-1": 59328,
 	"share-2": 59329,
-	"single-down-arrow": 59330,
-	"single-left-arrow": 59331,
-	"single-right-arrow": 59332,
-	"single-up-arrow": 59333,
-	"speaker-active-outlined": 59334,
-	"speaker-outlined": 59335,
-	"star-outlined": 59336,
-	"stopwatch-outlined": 59337,
+	"share-outlined": 59330,
+	"single-down-arrow": 59331,
+	"single-left-arrow": 59332,
+	"single-right-arrow": 59333,
+	"single-up-arrow": 59334,
+	"speaker-active-outlined": 59335,
+	"speaker-outlined": 59336,
+	"star-outlined": 59337,
+	"stopwatch-outlined": 59338,
 	strikethrough: strikethrough,
-	"suitcase-clock-outlined": 59339,
-	"suitcase-outlined": 59340,
-	"survey-outlined": 59341,
-	"switch-outlined": 59342,
+	"suitcase-clock-outlined": 59340,
+	"suitcase-outlined": 59341,
+	"survey-outlined": 59342,
+	"switch-outlined": 59343,
 	sync: sync,
-	"target-outlined": 59344,
-	"timesheet-outlined": 59345,
+	"target-outlined": 59345,
+	"timesheet-outlined": 59346,
 	transfer: transfer,
-	"trash-bin-outlined": 59347,
-	"umbrela-outlined": 59348,
+	"trash-bin-outlined": 59348,
+	"umbrela-outlined": 59349,
 	unavailable: unavailable,
 	underline: underline,
-	"unlock-outlined": 59351,
-	"upload-outlined": 59352,
-	"user-circle-outlined": 59353,
-	"user-gear-outlined": 59354,
-	"user-outlined": 59355,
-	"user-rectangle-outlined": 59356,
-	"video-1-outlined": 59357,
-	"video-2-outlined": 59358,
-	"wallet-outlined": 59359
+	"unlock-outlined": 59352,
+	"upload-outlined": 59353,
+	"user-circle-outlined": 59354,
+	"user-gear-outlined": 59355,
+	"user-outlined": 59356,
+	"user-rectangle-outlined": 59357,
+	"video-1-outlined": 59358,
+	"video-2-outlined": 59359,
+	"wallet-outlined": 59360
 };
 
 var HeroIcon = createIconSet(glyphMap, 'hero-icons-mobile', 'hero-icons-mobile.ttf');
@@ -6272,6 +6293,7 @@ var Icon = function Icon(_ref) {
     testID = _ref.testID,
     _ref$spin = _ref.spin,
     spin = _ref$spin === void 0 ? false : _ref$spin;
+  useDeprecation("".concat(icon, " icon is deprecated and will be removed in the next major release, please use ").concat(icon.replace('carat', 'caret'), " instead."), icon.startsWith('carat'));
   return spin ? /*#__PURE__*/React.createElement(AnimatedIcon, {
     name: icon,
     themeIntent: intent,
@@ -6428,10 +6450,11 @@ var Alert = function Alert(_ref2) {
     _ref2$intent = _ref2.intent,
     intent = _ref2$intent === void 0 ? 'info' : _ref2$intent,
     onClose = _ref2.onClose,
-    _ref2$variant = _ref2.variant,
-    variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
+    _variant = _ref2.variant,
     style = _ref2.style,
     testID = _ref2.testID;
+  var variant = _variant === undefined ? 'default' : _variant;
+  useDeprecation("Alert's variant prop will be removed in the next major release. Rounded will be the only variant available.", _variant !== undefined);
   return /*#__PURE__*/React.createElement(Container$1, {
     themeVariant: variant,
     themeIntent: intent,
@@ -6638,11 +6661,9 @@ var shuffleArray = function shuffleArray(array) {
  * Hook that returns a memoized and shuffled array of visualisation colors for Avatar.
  */
 var useAvatarColors = function useAvatarColors() {
-  var theme = useTheme();
-  var visualisationColors = theme.__hd__.avatar.colors.visualisation;
   var shuffledColors = useMemo(function () {
-    return shuffleArray(visualisationColors);
-  }, [visualisationColors]);
+    return shuffleArray(Object.values(palette$5));
+  }, []);
   return shuffledColors;
 };
 
@@ -7440,6 +7461,7 @@ var Button = function Button(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'filled' : _ref$variant;
   var themeVariant = getThemeVariant(variant, intent);
+  useDeprecation("Button's basic-transparent variant is deprecated and will be removed in the next major release.\nPlease use other variants instead.", variant === 'basic-transparent');
   return /*#__PURE__*/React.createElement(StyledButtonContainer, {
     accessibilityHint: accessibilityHint,
     accessibilityLabel: accessibilityLabel,
@@ -11724,7 +11746,7 @@ var StyledListItemContainer$1 = index$a(TouchableOpacity)(function (_ref) {
       return _objectSpread2(_objectSpread2({}, sharedStyles), {}, {
         alignItems: 'center',
         borderRadius: theme.__hd__.list.radii.card,
-        shadowColor: theme.colors.shadow,
+        shadowColor: theme.colors.secondaryOutline,
         shadowRadius: theme.__hd__.list.radii.cardShadow,
         shadowOffset: theme.__hd__.list.shadows.cardOffset,
         shadowOpacity: theme.__hd__.list.opacity.cardShadow,
@@ -13423,8 +13445,7 @@ var getVariant = function getVariant(_ref) {
   return checked ? 'checked' : 'unchecked';
 };
 var Switch = function Switch(_ref2) {
-  var _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? 'medium' : _ref2$size,
+  var _size = _ref2.size,
     _ref2$disabled = _ref2.disabled,
     disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
     _ref2$checked = _ref2.checked,
@@ -13432,11 +13453,13 @@ var Switch = function Switch(_ref2) {
     onPress = _ref2.onPress,
     style = _ref2.style,
     testID = _ref2.testID;
+  var size = _size === undefined ? 'medium' : _size;
   var theme = useTheme$1();
   var variant = getVariant({
     disabled: disabled,
     checked: checked
   });
+  useDeprecation("Switch's size prop will be removed in the next major release.", _size !== undefined);
   var offset = checked ? (theme.__hd__["switch"].sizes.widths[size] - theme.__hd__["switch"].sizes.thumbs[size]) / 2 + theme.__hd__["switch"].sizes.thumbs[size] / 2 : 0;
   var _useState = useState(function () {
       return new Animated.Value(offset);
@@ -13831,6 +13854,9 @@ var Tabs = function Tabs(_ref2) {
     _ref2$swipeEnabled = _ref2.swipeEnabled,
     swipeEnabled = _ref2$swipeEnabled === void 0 ? true : _ref2$swipeEnabled,
     componentTestID = _ref2.testID;
+  useDeprecation("Tabs' showBadge will be removed in the next major release. Please use badge prop instead.", tabs.some(function (item) {
+    return item.showBadge !== undefined;
+  }));
   var theme = useTheme$1();
   var insets = useSafeAreaInsets();
   var pagerViewRef = React.useRef(null);
@@ -13988,6 +14014,7 @@ var Tag = function Tag(_ref) {
     style = _ref.style,
     testID = _ref.testID,
     nativeProps = _objectWithoutProperties(_ref, _excluded);
+  useDeprecation("Tag's default intent is deprecated and will be removed in the next major release.\nPlease use other intents instead.", intent !== 'default');
   return /*#__PURE__*/React.createElement(StyledView, _extends$1({}, nativeProps, {
     themeIntent: intent,
     themeVariant: variant,
@@ -14596,7 +14623,7 @@ var StyledSeparator = index$a(View)(function (_ref3) {
     flexDirection: 'row',
     alignItems: 'center',
     marginHorizontal: theme.space.small,
-    backgroundColor: theme.colors.outline
+    backgroundColor: theme.colors.secondaryOutline
   };
 });
 
@@ -14787,7 +14814,7 @@ var MentionList = function MentionList(_ref) {
       color: theme.colors.secondary,
       borderRadius: theme.__hd__.richTextEditor.radii.mention,
       padding: highlighted ? theme.__hd__.richTextEditor.space.mention : 0,
-      background: highlighted ? theme.colors.lightHighlightedSurface : 'transparent',
+      background: highlighted ? theme.colors.highlightedSurface : 'transparent',
       marginTop: theme.space.xxsmall,
       marginBottom: theme.space.xxsmall,
       display: 'inline-flex'