@hero-design/rn 7.26.0 → 7.27.1

package/es/index.js

@@ -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.invertedText
   };
   var sizes = {
     small: theme.sizes.xlarge,
@@ -2466,7 +2484,8 @@ var getTagTheme = function getTagTheme(theme) {
     danger: theme.colors.onErrorSurface,
     dangerBackground: theme.colors.errorSurface,
     archived: theme.colors.onArchivedSurface,
-    archivedBackground: theme.colors.archivedSurface
+    archivedBackground: theme.colors.archivedSurface,
+    text: theme.colors.onDefaultGlobalSurface
   };
   var fonts = {
     "default": theme.fonts.neutral.semiBold
@@ -2629,7 +2648,7 @@ var getToastTheme = function getToastTheme(theme) {
 var getToolbarTheme = function getToolbarTheme(theme) {
   var colors = {
     background: theme.colors.defaultGlobalSurface,
-    border: theme.colors.primaryOutline,
+    border: theme.colors.secondaryOutline,
     primary: theme.colors.primary,
     secondary: theme.colors.secondary,
     info: theme.colors.info,
@@ -5630,6 +5649,20 @@ var usePrevious = function usePrevious(value) {
   }, [value]);
   return ref.current;
 };
+function usePropsOrInternalState(initialState, state, setState) {
+  var _React$useState = React.useState(initialState),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    internalState = _React$useState2[0],
+    setInternalState = _React$useState2[1];
+  return [state || internalState, setState || setInternalState];
+}
+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);
+  }, [message, cond]);
+};
 
 var Collapse = function Collapse(_ref) {
   var _ref$open = _ref.open,
@@ -6301,14 +6334,6 @@ var AccordionItem = function AccordionItem(_ref) {
   }, content));
 };
 
-function usePropsOrInternalState(initialState, state, setState) {
-  var _React$useState = React.useState(initialState),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    internalState = _React$useState2[0],
-    setInternalState = _React$useState2[1];
-  return [state || internalState, setState || setInternalState];
-}
-
 var _excluded$h = ["key"];
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
@@ -6631,11 +6656,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;
 };
 
@@ -10505,11 +10528,12 @@ var LeftDataCard = index$a(View)(function (_ref2) {
 
 var _excluded$8 = ["variant", "intent", "children"];
 var Card = function Card(_ref) {
-  var _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'basic' : _ref$variant,
+  var _variant = _ref.variant,
     intent = _ref.intent,
     children = _ref.children,
     nativeProps = _objectWithoutProperties(_ref, _excluded$8);
+  var variant = _variant === undefined ? 'basic' : _variant;
+  useDeprecation("Card's variant prop is deprecated and will be removed in the next major release.\nPlease remove it or use Card.Data instead.", _variant !== undefined);
   return /*#__PURE__*/React.createElement(StyledCard, _extends$1({}, nativeProps, {
     themeVariant: variant,
     themeIntent: intent
@@ -13008,6 +13032,7 @@ function MultiSelect(_ref) {
     inputProps = _ref.inputProps,
     onConfirm = _ref.onConfirm,
     onDimiss = _ref.onDimiss,
+    onDismiss = _ref.onDismiss,
     onEndReached = _ref.onEndReached,
     onQueryChange = _ref.onQueryChange,
     options = _ref.options,
@@ -13019,6 +13044,7 @@ function MultiSelect(_ref) {
     editable = _ref$editable === void 0 ? true : _ref$editable,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    required = _ref.required,
     numberOfLines = _ref.numberOfLines,
     style = _ref.style,
     testID = _ref.testID,
@@ -13053,7 +13079,9 @@ function MultiSelect(_ref) {
     }
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none"
-  }, /*#__PURE__*/React.createElement(TextInput, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React.createElement(TextInput, _extends$1({
+    numberOfLines: numberOfLines
+  }, inputProps, {
     label: label,
     value: displayedValue,
     suffix: "arrow-down",
@@ -13061,7 +13089,7 @@ function MultiSelect(_ref) {
     error: error,
     editable: editable,
     disabled: disabled,
-    numberOfLines: numberOfLines,
+    required: required,
     pointerEvents: "none",
     style: style,
     testID: testID,
@@ -13073,7 +13101,7 @@ function MultiSelect(_ref) {
     onRequestClose: function onRequestClose() {
       return setOpen(false);
     },
-    onDismiss: onDimiss,
+    onDismiss: onDismiss || onDimiss,
     header: label,
     style: {
       paddingBottom: isKeyboardVisible ? keyboardHeight : 0
@@ -13186,6 +13214,7 @@ var SingleSelect = function SingleSelect(_ref) {
     inputProps = _ref.inputProps,
     onConfirm = _ref.onConfirm,
     onDimiss = _ref.onDimiss,
+    onDismiss = _ref.onDismiss,
     onEndReached = _ref.onEndReached,
     onQueryChange = _ref.onQueryChange,
     options = _ref.options,
@@ -13197,6 +13226,7 @@ var SingleSelect = function SingleSelect(_ref) {
     editable = _ref$editable === void 0 ? true : _ref$editable,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    required = _ref.required,
     numberOfLines = _ref.numberOfLines,
     style = _ref.style,
     testID = _ref.testID,
@@ -13222,7 +13252,9 @@ var SingleSelect = function SingleSelect(_ref) {
     }
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none"
-  }, /*#__PURE__*/React.createElement(TextInput, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React.createElement(TextInput, _extends$1({
+    numberOfLines: numberOfLines
+  }, inputProps, {
     label: label,
     value: displayedValue,
     suffix: "arrow-down",
@@ -13230,7 +13262,7 @@ var SingleSelect = function SingleSelect(_ref) {
     error: error,
     editable: editable,
     disabled: disabled,
-    numberOfLines: numberOfLines,
+    required: required,
     pointerEvents: "none",
     style: style,
     testID: testID,
@@ -13242,7 +13274,7 @@ var SingleSelect = function SingleSelect(_ref) {
     onRequestClose: function onRequestClose() {
       return setOpen(false);
     },
-    onDismiss: onDimiss,
+    onDismiss: onDismiss || onDimiss,
     header: label,
     style: {
       paddingBottom: isKeyboardVisible ? keyboardHeight : 0
@@ -13652,6 +13684,8 @@ var ScrollableTab = function ScrollableTab(_ref2) {
     lazy = _ref2$lazy === void 0 ? false : _ref2$lazy,
     _ref2$lazyPreloadDist = _ref2.lazyPreloadDistance,
     lazyPreloadDistance = _ref2$lazyPreloadDist === void 0 ? 1 : _ref2$lazyPreloadDist,
+    _ref2$swipeEnabled = _ref2.swipeEnabled,
+    swipeEnabled = _ref2$swipeEnabled === void 0 ? true : _ref2$swipeEnabled,
     componentTestID = _ref2.testID;
   var flatListRef = React.useRef(null);
   var pagerViewRef = React.useRef(null);
@@ -13764,7 +13798,8 @@ var ScrollableTab = function ScrollableTab(_ref2) {
       if (selectedItem) {
         onTabPress(selectedItem.key);
       }
-    }
+    },
+    scrollEnabled: swipeEnabled
   }, tabs.map(function (tab, index) {
     var key = tab.key,
       component = tab.component,
@@ -13809,6 +13844,8 @@ var Tabs = function Tabs(_ref2) {
     lazy = _ref2$lazy === void 0 ? false : _ref2$lazy,
     _ref2$lazyPreloadDist = _ref2.lazyPreloadDistance,
     lazyPreloadDistance = _ref2$lazyPreloadDist === void 0 ? 1 : _ref2$lazyPreloadDist,
+    _ref2$swipeEnabled = _ref2.swipeEnabled,
+    swipeEnabled = _ref2$swipeEnabled === void 0 ? true : _ref2$swipeEnabled,
     componentTestID = _ref2.testID;
   var theme = useTheme$1();
   var insets = useSafeAreaInsets();
@@ -13889,7 +13926,8 @@ var Tabs = function Tabs(_ref2) {
       }
     }], {
       useNativeDriver: true
-    })
+    }),
+    scrollEnabled: swipeEnabled
   }, tabs.map(function (tab, index) {
     var key = tab.key,
       component = tab.component,
@@ -13910,34 +13948,57 @@ var index$2 = Object.assign(Tabs, {
   Scroll: ScrollableTab
 });
 
+var getFilledStyles = function getFilledStyles(themeIntent, theme) {
+  return {
+    textColor: theme.__hd__.tag.colors.text,
+    borderColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")],
+    backgroundColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")]
+  };
+};
+var getOutlinedStyles = function getOutlinedStyles(themeIntent, theme) {
+  return {
+    textColor: theme.__hd__.tag.colors[themeIntent],
+    borderColor: theme.__hd__.tag.colors[themeIntent],
+    backgroundColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")]
+  };
+};
 var StyledView = index$a(View)(function (_ref) {
   var themeIntent = _ref.themeIntent,
+    themeVariant = _ref.themeVariant,
     theme = _ref.theme;
+  var _ref2 = themeVariant === 'filled' ? getFilledStyles(themeIntent, theme) : getOutlinedStyles(themeIntent, theme),
+    borderColor = _ref2.borderColor,
+    backgroundColor = _ref2.backgroundColor;
   return {
     borderWidth: theme.__hd__.tag.borderWidths["default"],
     borderRadius: theme.__hd__.tag.radii["default"],
     paddingVertical: theme.__hd__.tag.space.verticalPadding,
     paddingHorizontal: theme.__hd__.tag.space.horizontalPadding,
-    borderColor: theme.__hd__.tag.colors[themeIntent],
-    backgroundColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")]
+    borderColor: borderColor,
+    backgroundColor: backgroundColor
   };
 });
-var StyledText = index$a(Text$1)(function (_ref2) {
-  var themeIntent = _ref2.themeIntent,
-    theme = _ref2.theme;
+var StyledText = index$a(Text$1)(function (_ref3) {
+  var themeIntent = _ref3.themeIntent,
+    themeVariant = _ref3.themeVariant,
+    theme = _ref3.theme;
+  var _ref4 = themeVariant === 'filled' ? getFilledStyles(themeIntent, theme) : getOutlinedStyles(themeIntent, theme),
+    textColor = _ref4.textColor;
   return {
     fontFamily: theme.__hd__.tag.fonts["default"],
     fontSize: theme.__hd__.tag.fontSizes["default"],
-    color: theme.__hd__.tag.colors[themeIntent],
+    color: textColor,
     includeFontPadding: false,
     textAlignVertical: 'center',
     textAlign: 'center'
   };
 });
 
-var _excluded = ["content", "intent", "style", "testID"];
+var _excluded = ["content", "variant", "intent", "style", "testID"];
 var Tag = function Tag(_ref) {
   var content = _ref.content,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
     style = _ref.style,
@@ -13945,11 +14006,13 @@ var Tag = function Tag(_ref) {
     nativeProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(StyledView, _extends$1({}, nativeProps, {
     themeIntent: intent,
+    themeVariant: variant,
     style: style,
     testID: testID
-  }), /*#__PURE__*/React.createElement(StyledText, {
-    themeIntent: intent
-  }, content));
+  }), typeof content === 'string' ? /*#__PURE__*/React.createElement(StyledText, {
+    themeIntent: intent,
+    themeVariant: variant
+  }, content) : content);
 };
 
 var TimePickerAndroid = function TimePickerAndroid(_ref) {