@hero-design/rn 7.22.1 → 7.22.3

package/lib/index.js

@@ -1286,89 +1286,115 @@ Object.assign(Object.assign({}, palette$5), {
   cornflowerBlue: cornflowerBlue.base,
   paua: paua.base
 });
-var gold$1 = colorScales.gold;
+var gold$1 = colorScales.gold,
+    violet$2 = colorScales.violet;
 var palette = Object.assign(Object.assign({}, palette$5), {
   goldLight20: gold$1.lighten20,
   goldLight50: gold$1.lighten50,
   goldLight70: gold$1.lighten70,
   goldLight90: gold$1.lighten90,
-  gold: gold$1.base
+  gold: gold$1.base,
+  violet: violet$2.base,
+  violetLight50: violet$2.lighten50,
+  violetLight80: violet$2.lighten80,
+  violetLight90: violet$2.lighten90
 });
 
-var swagSystemPalette = {
+var globalPalette = {
   globalPrimary: palette$5.maasstrichtBlue,
-  globalPrimaryLight: palette$5.maasstrichtBlueLight50,
-  globalPrimaryBackground: palette$5.maasstrichtBlueLight90,
-  primary: palette$2.violet,
+  mutedGlobalPrimary: palette$5.maasstrichtBlueLight30,
+  onGlobalPrimary: palette$5.white,
+  globalSecondary: palette$5.maasstrichtBlueLight30,
+  globalPrimaryOutline: palette$5.maasstrichtBlue,
+  globalSecondaryOutline: palette$5.greyLight75,
+  defaultGlobalSurface: palette$5.white,
+  onDefaultGlobalSurface: palette$5.maasstrichtBlue,
+  neutralGlobalSurface: palette$5.greyLight90,
+  disabledOnDefaultGlobalSurface: palette$5.greyLight30,
+  error: palette$5.pastelRed,
+  errorSurface: palette$5.linen,
+  onErrorSurface: palette$5.vermilion,
+  warning: palette$5.mellowApricot,
+  warningSurface: palette$5.seashell,
+  onWarningSurface: palette$5.deepSaffron,
+  success: palette$5.emerald,
+  successSurface: palette$5.honeydew,
+  onSuccessSurface: palette$5.pineGreen,
+  info: palette$5.vodka,
+  infoSurface: palette$5.aliceBlue,
+  onInfoSurface: palette$5.ultramarineBlue,
+  archived: palette$5.greyLight45,
+  archivedSurface: palette$5.antiFlashWhite,
+  onArchivedSurface: palette$5.sonicSilver
+};
+
+var swagSystemPalette = _objectSpread2(_objectSpread2({
+  // Legacy
+  globalPrimary: palette$2.maasstrichtBlue,
+  globalPrimaryLight: palette$2.maasstrichtBlueLight50,
+  globalPrimaryBackground: palette$2.maasstrichtBlueLight90,
   primaryLight: palette$2.violetLight50,
   primaryDark: palette$2.scarletGumLight30,
   primaryBackground: palette$2.violetLight90,
-  primaryBackgroundDark: palette$5.maasstrichtBlueLight30,
-  secondary: palette$2.ultramarineBlue,
+  primaryBackgroundDark: palette$2.maasstrichtBlueLight30,
   secondaryLight: palette$2.vodka,
   secondaryBackground: palette$2.aliceBlue,
-  info: palette$5.ultramarineBlue,
-  infoMediumLight: palette$5.vodka,
-  infoLight: palette$5.vodka,
-  infoBackground: palette$5.aliceBlue,
-  success: palette$5.emerald,
-  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,
-  warning: palette$5.mellowApricot,
-  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,
-  archived: palette$5.greyLight45,
-  archivedLight: palette$5.greyLight30,
-  archivedDark: palette$5.sonicSilver,
-  archivedBackground: palette$5.greyLight90,
-  black: palette$5.black,
-  inactiveBackground: palette$5.maasstrichtBlueLight50,
-  shadow: palette$5.greyLight45,
-  __alpha__globalPrimary: palette$5.maasstrichtBlue,
-  __alpha__globalSecondary1: palette$5.maasstrichtBlueLight30,
-  __alpha__globalSecondary4: palette$5.maasstrichtBlueLight90,
-  __alpha__globalNeutral3: palette$5.greyLight90,
-  __alpha__globalLabel1: palette$5.vermilion,
-  __alpha__globalLabel2: palette$5.deepSaffron,
-  __alpha__globalLabel3: palette$5.pineGreen,
-  __alpha__globalLabel4: palette$5.ultramarineBlue,
-  __alpha__globalLabel5: palette$5.sonicSilver,
-  __alpha__globalLabel6: palette$5.linen,
-  __alpha__globalLabel7: palette$5.seashell,
-  __alpha__globalLabel8: palette$5.honeydew,
-  __alpha__globalLabel9: palette$5.aliceBlue,
-  __alpha__primary1: palette$2.scarletGum,
-  __alpha__primary2: palette$2.mauve,
-  __alpha__secondary1: palette$2.scarletGumLight30,
-  __alpha__secondary2: palette$2.scarletGumLight50,
-  __alpha__secondary3: palette$2.scarletGumLight80,
-  __alpha__secondary4: palette$2.scarletGumLight90
-};
+  info: palette$2.ultramarineBlue,
+  infoMediumLight: palette$2.vodka,
+  infoLight: palette$2.vodka,
+  infoBackground: palette$2.aliceBlue,
+  success: palette$2.emerald,
+  successLight: palette$2.emerald,
+  successDark: palette$2.pineGreen,
+  successBackground: palette$2.honeydew,
+  danger: palette$2.vermilion,
+  dangerMediumLight: palette$2.apple,
+  dangerLight: palette$2.pastelRed,
+  dangerBackground: palette$2.linen,
+  warning: palette$2.mellowApricot,
+  warningLight: palette$2.mellowApricot,
+  warningDark: palette$2.deepSaffron,
+  warningBackground: palette$2.seashell,
+  platformBackground: palette$2.white,
+  backgroundLight: palette$2.greyLight90,
+  backgroundDark: palette$2.maasstrichtBlue,
+  text: palette$2.maasstrichtBlue,
+  subduedText: palette$2.maasstrichtBlueLight30,
+  disabledText: palette$2.maasstrichtBlueLight50,
+  disabledLightText: palette$2.greyLight30,
+  invertedText: palette$2.white,
+  outline: palette$2.greyLight75,
+  archived: palette$2.greyLight45,
+  archivedLight: palette$2.greyLight30,
+  archivedDark: palette$2.sonicSilver,
+  archivedBackground: palette$2.greyLight90,
+  black: palette$2.black,
+  inactiveBackground: palette$2.maasstrichtBlueLight50,
+  shadow: palette$2.greyLight45
+}, globalPalette), {}, {
+  // Brand
+  primary: palette$2.maasstrichtBlue,
+  mutedPrimary: palette$2.maasstrichtBlueLight90,
+  onPrimary: palette$2.white,
+  secondary: palette$2.scarletGum,
+  onSecondary: palette$2.white,
+  mutedSecondary: palette$2.maasstrichtBlueLight50,
+  disabledSecondary: palette$2.scarletGumLight50,
+  highlightedSurface: palette$2.scarletGumLight80,
+  highlightedSecondarySurface: palette$2.aliceBlue,
+  lightHighlightedSurface: palette$2.scarletGumLight90
+});
 
 var workSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette), {}, {
   primary: palette.gold,
-  primaryLight: palette.goldLight50,
-  primaryDark: palette.goldLight20,
-  primaryBackground: palette.goldLight90,
-  __alpha__secondary1: palette.goldLight20,
-  __alpha__secondary2: palette.goldLight50,
-  __alpha__secondary3: palette.goldLight70,
-  __alpha__secondary4: palette.goldLight90
+  mutedPrimary: palette.goldLight90,
+  onPrimary: palette.maasstrichtBlue,
+  secondary: palette.violet,
+  onSecondary: palette.white,
+  mutedSecondary: palette.maasstrichtBlueLight50,
+  disabledSecondary: palette.violetLight50,
+  highlightedSurface: palette.violetLight80,
+  lightHighlightedSurface: palette.violetLight90
 });
 
 var BASE_WIDTH = 390; // Based on iPhone 13's viewport size
@@ -1515,7 +1541,7 @@ var getGlobalTheme = function getGlobalTheme(scale, systemPalette) {
 
 var getAccordionTheme = function getAccordionTheme(theme) {
   var colors = {
-    background: theme.colors.platformBackground
+    background: theme.colors.defaultGlobalSurface
   };
   var space = {
     padding: theme.space.medium
@@ -1534,10 +1560,10 @@ var getAlertTheme = function getAlertTheme(theme) {
   var colors = {
     success: theme.colors.success,
     warning: theme.colors.warning,
-    error: theme.colors.dangerLight,
-    info: theme.colors.infoLight,
-    notification: theme.colors.platformBackground,
-    divider: theme.colors.outline
+    error: theme.colors.error,
+    info: theme.colors.info,
+    notification: theme.colors.defaultGlobalSurface,
+    divider: theme.colors.globalSecondaryOutline
   };
   var sizes = {
     height: theme.sizes.xxxlarge
@@ -1565,9 +1591,9 @@ var getAlertTheme = function getAlertTheme(theme) {
 
 var getAvatarTheme = function getAvatarTheme(theme) {
   var colors = {
-    primary: theme.colors.primary,
+    primary: theme.colors.globalPrimary,
     info: theme.colors.info,
-    danger: theme.colors.danger,
+    danger: theme.colors.error,
     success: theme.colors.success,
     warning: theme.colors.warning
   };
@@ -1608,12 +1634,12 @@ var getAvatarTheme = function getAvatarTheme(theme) {
 
 var getBadgeTheme = function getBadgeTheme(theme) {
   var colors = {
-    danger: theme.colors.danger,
-    info: theme.colors.info,
-    success: theme.colors.successDark,
-    warning: theme.colors.warningDark,
-    archived: theme.colors.archivedDark,
-    text: theme.colors.invertedText
+    danger: theme.colors.onErrorSurface,
+    info: theme.colors.onInfoSurface,
+    success: theme.colors.onSuccessSurface,
+    warning: theme.colors.onWarningSurface,
+    archived: theme.colors.onArchivedSurface,
+    text: theme.colors.onGlobalPrimary
   };
   var fonts = {
     "default": theme.fonts.semiBold
@@ -1643,8 +1669,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
 
 var getBottomNavigationTheme = function getBottomNavigationTheme(theme) {
   var colors = {
-    shadow: theme.colors.backgroundDark,
-    background: theme.colors.platformBackground
+    shadow: theme.colors.globalPrimary,
+    background: theme.colors.defaultGlobalSurface
   };
   var sizes = {
     height: theme.sizes['6xlarge']
@@ -1671,9 +1697,9 @@ var getBottomNavigationTheme = function getBottomNavigationTheme(theme) {
 
 var getBottomSheetTheme = function getBottomSheetTheme(theme) {
   var colors = {
-    shadow: theme.colors.backgroundDark,
-    background: theme.colors.platformBackground,
-    backdrop: theme.colors.backgroundDark
+    shadow: theme.colors.globalPrimary,
+    background: theme.colors.defaultGlobalSurface,
+    backdrop: theme.colors.globalPrimary
   };
   var sizes = {
     sectionHeight: theme.sizes.xxxxxlarge,
@@ -1737,28 +1763,28 @@ var getButtonTheme = function getButtonTheme(theme) {
   };
   var colors = {
     primary: theme.colors.globalPrimary,
-    pressedPrimary: theme.colors.globalPrimaryLight,
+    pressedPrimary: theme.colors.globalSecondary,
     secondary: theme.colors.secondary,
-    pressedSecondary: theme.colors.secondaryLight,
-    danger: theme.colors.danger,
-    pressedDanger: theme.colors.dangerLight,
-    defaultText: theme.colors.text,
-    disabledText: theme.colors.disabledLightText,
-    disabledBorder: theme.colors.disabledLightText,
-    disabledBackground: theme.colors.disabledLightText,
-    invertedText: theme.colors.invertedText,
-    utilityBackground: theme.colors.backgroundLight,
+    pressedSecondary: theme.colors.secondary,
+    danger: theme.colors.onErrorSurface,
+    pressedDanger: theme.colors.onErrorSurface,
+    defaultText: theme.colors.onGlobalPrimary,
+    disabledText: theme.colors.disabledOnDefaultGlobalSurface,
+    disabledBorder: theme.colors.disabledOnDefaultGlobalSurface,
+    disabledBackground: theme.colors.disabledOnDefaultGlobalSurface,
+    invertedText: theme.colors.onGlobalPrimary,
+    utilityBackground: theme.colors.neutralGlobalSurface,
     underlayColors: {
-      'filled-primary': theme.colors.globalPrimaryLight,
-      'filled-secondary': theme.colors.secondaryLight,
-      'filled-danger': theme.colors.dangerLight,
-      'outlined-primary': theme.colors.globalPrimaryBackground,
-      'outlined-secondary': theme.colors.secondaryBackground,
-      'outlined-danger': theme.colors.dangerBackground,
-      'text-primary': theme.colors.globalPrimaryBackground,
-      'text-secondary': theme.colors.secondaryBackground,
-      'text-danger': theme.colors.dangerBackground,
-      'basic-transparent': theme.colors.globalPrimaryLight
+      'filled-primary': theme.colors.mutedGlobalPrimary,
+      'filled-secondary': theme.colors.mutedSecondary,
+      'filled-danger': theme.colors.error,
+      'outlined-primary': theme.colors.neutralGlobalSurface,
+      'outlined-secondary': theme.colors.highlightedSecondarySurface,
+      'outlined-danger': theme.colors.errorSurface,
+      'text-primary': theme.colors.neutralGlobalSurface,
+      'text-secondary': theme.colors.highlightedSecondarySurface,
+      'text-danger': theme.colors.errorSurface,
+      'basic-transparent': theme.colors.mutedGlobalPrimary
     }
   };
   return {
@@ -1775,10 +1801,10 @@ var getButtonTheme = function getButtonTheme(theme) {
 
 var getCalendarTheme = function getCalendarTheme(theme) {
   var colors = {
-    background: theme.colors.backgroundLight,
-    border: theme.colors.text,
-    primary: theme.colors.primary,
-    inverted: theme.colors.invertedText
+    background: theme.colors.defaultGlobalSurface,
+    border: theme.colors.globalPrimaryOutline,
+    primary: theme.colors.globalPrimary,
+    inverted: theme.colors.onGlobalPrimary
   };
   var cellSize = theme.sizes.xxxlarge;
   var markSize = theme.sizes.xsmall;
@@ -1808,13 +1834,13 @@ var getCalendarTheme = function getCalendarTheme(theme) {
 
 var getCardTheme = function getCardTheme(theme) {
   var colors = {
-    dataCardIndicator: theme.colors.primary,
-    primary: theme.colors.__alpha__primary2,
-    info: theme.colors.infoLight,
+    dataCardIndicator: theme.colors.globalPrimary,
+    primary: theme.colors.primary,
+    info: theme.colors.info,
     success: theme.colors.success,
     warning: theme.colors.warning,
-    danger: theme.colors.dangerMediumLight,
-    archived: theme.colors.archivedLight
+    danger: theme.colors.error,
+    archived: theme.colors.archived
   };
   var sizes = {
     indicatorWidth: theme.sizes.medium
@@ -1832,7 +1858,7 @@ var getCardTheme = function getCardTheme(theme) {
 var getCheckboxTheme = function getCheckboxTheme(theme) {
   var colors = {
     "default": theme.colors.globalPrimary,
-    disabledBorder: theme.colors.globalPrimaryLight
+    disabledBorder: theme.colors.mutedGlobalPrimary
   };
   var space = {
     iconTop: 0,
@@ -1879,7 +1905,7 @@ var getDatePickerTheme = function getDatePickerTheme(theme) {
 
 var getDividerTheme = function getDividerTheme(theme) {
   var colors = {
-    "default": theme.colors.outline
+    "default": theme.colors.globalSecondaryOutline
   };
   var space = {
     xsmall: theme.space.xsmall,
@@ -1900,10 +1926,10 @@ var getDividerTheme = function getDividerTheme(theme) {
 
 var getDrawerTheme = function getDrawerTheme(theme) {
   var colors = {
-    shadow: theme.colors.backgroundDark,
-    background: theme.colors.platformBackground,
-    backdrop: theme.colors.backgroundDark,
-    handler: theme.colors.backgroundDark
+    shadow: theme.colors.globalPrimary,
+    background: theme.colors.defaultGlobalSurface,
+    backdrop: theme.colors.defaultGlobalSurface,
+    handler: theme.colors.globalPrimary
   };
   var radii = {
     "default": theme.radii.xlarge,
@@ -1944,10 +1970,9 @@ var getEmptyTheme = function getEmptyTheme(theme) {
     image: theme.sizes['18xlarge']
   };
   var colors = {
-    text: theme.colors.text,
-    invertedText: theme.colors.invertedText,
-    subduedText: theme.colors.subduedText,
-    illustrationBackground: theme.colors.shadow
+    text: theme.colors.globalPrimary,
+    invertedText: theme.colors.onGlobalPrimary,
+    subduedText: theme.colors.globalSecondary
   };
   var fontSizes = {
     title: theme.fontSizes.xxxxlarge,
@@ -1968,13 +1993,13 @@ var getEmptyTheme = function getEmptyTheme(theme) {
 
 var getFABTheme = function getFABTheme(theme) {
   var colors = {
-    buttonBackground: theme.colors.backgroundDark,
-    icon: theme.colors.invertedText,
-    headerText: theme.colors.invertedText,
-    actionItemBackground: theme.colors.primaryBackgroundDark,
-    backdropBackground: theme.colors.backgroundDark,
-    titleText: theme.colors.invertedText,
-    actionItemText: theme.colors.invertedText
+    buttonBackground: theme.colors.globalPrimary,
+    icon: theme.colors.onGlobalPrimary,
+    headerText: theme.colors.onGlobalPrimary,
+    actionItemBackground: theme.colors.globalPrimary,
+    backdropBackground: theme.colors.globalPrimary,
+    titleText: theme.colors.onGlobalPrimary,
+    actionItemText: theme.colors.onGlobalPrimary
   };
   var sizes = {
     width: theme.sizes.xxxxxlarge,
@@ -2028,14 +2053,15 @@ var getFABTheme = function getFABTheme(theme) {
 
 var getIconTheme = function getIconTheme(theme) {
   var colors = {
-    text: theme.colors.text,
+    text: theme.colors.globalPrimary,
     primary: theme.colors.primary,
+    secondary: theme.colors.secondary,
     info: theme.colors.info,
     danger: theme.colors.danger,
     success: theme.colors.success,
     warning: theme.colors.warning,
-    disabledText: theme.colors.disabledText,
-    invertedText: theme.colors.invertedText
+    disabledText: theme.colors.mutedGlobalPrimary,
+    invertedText: theme.colors.defaultGlobalSurface
   };
   var sizes = {
     xsmall: theme.fontSizes.large,
@@ -2062,15 +2088,15 @@ var getImageTheme = function getImageTheme(theme) {
 
 var getListTheme = function getListTheme(theme) {
   var colors = {
-    checkedListItemContainerBackground: theme.colors.primaryBackground,
-    highlightedListItemContainerBackground: theme.colors.primaryBackground,
-    listItemContainerBackground: theme.colors.platformBackground,
+    checkedListItemContainerBackground: theme.colors.highlightedSurface,
+    highlightedListItemContainerBackground: theme.colors.lightHighlightedSurface,
+    listItemContainerBackground: theme.colors.defaultGlobalSurface,
     leadingStatus: {
-      danger: theme.colors.dangerMediumLight,
-      info: theme.colors.infoLight,
+      danger: theme.colors.error,
+      info: theme.colors.info,
       success: theme.colors.success,
       warning: theme.colors.warning,
-      archived: theme.colors.archivedLight
+      archived: theme.colors.archived
     }
   };
   var space = {
@@ -2081,6 +2107,7 @@ var getListTheme = function getListTheme(theme) {
   };
   var radii = {
     card: theme.radii.medium,
+    basicItem: theme.radii.base,
     cardShadow: theme.radii.base,
     leadingStatus: theme.radii.rounded
   };
@@ -2115,10 +2142,10 @@ var getPinInputTheme = function getPinInputTheme(theme) {
     focused: theme.borderWidths.medium
   };
   var colors = {
-    "default": theme.colors.text,
-    mask: theme.colors.subduedText,
-    error: theme.colors.danger,
-    disabled: theme.colors.archivedLight
+    "default": theme.colors.globalPrimary,
+    mask: theme.colors.mutedGlobalPrimary,
+    error: theme.colors.error,
+    disabled: theme.colors.mutedGlobalPrimary
   };
   var fonts = {
     cellText: theme.fonts.semiBold,
@@ -2156,11 +2183,11 @@ var getProgressTheme = function getProgressTheme(theme) {
   var colors = {
     primary: theme.colors.primary,
     success: theme.colors.success,
-    warning: theme.colors.warningDark,
+    warning: theme.colors.warning,
     danger: theme.colors.danger,
     info: theme.colors.info,
-    background: theme.colors.outline,
-    innerBackground: theme.colors.platformBackground
+    background: theme.colors.globalSecondaryOutline,
+    innerBackground: theme.colors.defaultGlobalSurface
   };
   var sizes = {
     circleWidth: theme.sizes['6xlarge'],
@@ -2205,9 +2232,9 @@ var getRadioTheme = function getRadioTheme(theme) {
 
 var getRichTextEditorTheme = function getRichTextEditorTheme(theme) {
   var colors = {
-    toolbarBorderColor: theme.colors.outline,
-    toolbarBackgroundColor: theme.colors.backgroundLight,
-    toolbarButtonSelectedBackground: theme.colors.outline
+    toolbarBorderColor: theme.colors.globalSecondaryOutline,
+    toolbarBackgroundColor: theme.colors.neutralGlobalSurface,
+    toolbarButtonSelectedBackground: theme.colors.lightHighlightedSurface
   };
   var borderWidths = {
     webViewBorderBottomWidth: 0.8
@@ -2237,7 +2264,7 @@ var getRichTextEditorTheme = function getRichTextEditorTheme(theme) {
 
 var getSectionHeadingTheme = function getSectionHeadingTheme(theme) {
   var colors = {
-    background: theme.colors.__alpha__globalNeutral3
+    background: theme.colors.neutralGlobalSurface
   };
   var space = {
     headingVerticalPadding: theme.space.small,
@@ -2253,7 +2280,7 @@ var getSectionHeadingTheme = function getSectionHeadingTheme(theme) {
 
 var getSelectTheme = function getSelectTheme(theme) {
   var colors = {
-    footerText: theme.colors.primary
+    footerText: theme.colors.secondary
   };
   var space = {
     minimumOptionListHeight: theme.space.xxxxlarge * 5,
@@ -2276,9 +2303,9 @@ var getSelectTheme = function getSelectTheme(theme) {
 
 var getSliderTheme = function getSliderTheme(theme) {
   var colors = {
-    minimumTrackTint: theme.colors.__alpha__primary1,
-    thumbTint: theme.colors.__alpha__globalSecondary4,
-    maximumTrackTint: theme.colors.__alpha__secondary4
+    minimumTrackTint: theme.colors.secondary,
+    thumbTint: theme.colors.neutralGlobalSurface,
+    maximumTrackTint: theme.colors.lightHighlightedSurface
   };
   return {
     colors: colors
@@ -2287,10 +2314,7 @@ var getSliderTheme = function getSliderTheme(theme) {
 
 var getSpinnerTheme = function getSpinnerTheme(theme) {
   var colors = {
-    dot1: theme.colors.__alpha__secondary1,
-    dot2: theme.colors.__alpha__secondary2,
-    dot3: theme.colors.__alpha__secondary3,
-    dot4: theme.colors.__alpha__secondary4
+    dot: theme.colors.primary
   };
   var space = {
     spinnerDot: {
@@ -2319,15 +2343,15 @@ var getSpinnerTheme = function getSpinnerTheme(theme) {
 var getSwitchTheme = function getSwitchTheme(theme) {
   var colors = {
     backgroundColors: {
-      checked: theme.colors.primary,
-      unchecked: theme.colors.globalPrimaryLight,
-      'disabled-checked': theme.colors.primaryLight,
-      'disabled-unchecked': theme.colors.archived
+      checked: theme.colors.secondary,
+      unchecked: theme.colors.mutedSecondary,
+      'disabled-checked': theme.colors.disabledSecondary,
+      'disabled-unchecked': theme.colors.disabledOnDefaultGlobalSurface
     },
-    thumb: theme.colors.platformBackground,
+    thumb: theme.colors.onSecondary,
     selector: {
-      background: theme.colors.__alpha__globalNeutral3,
-      textBackground: theme.colors.__alpha__primary1
+      background: theme.colors.neutralGlobalSurface,
+      textBackground: theme.colors.secondary
     }
   };
   var sizes = {
@@ -2371,11 +2395,11 @@ var getSwitchTheme = function getSwitchTheme(theme) {
 
 var getTabsTheme = function getTabsTheme(theme) {
   var colors = {
-    active: theme.colors.text,
-    inactive: theme.colors.text,
-    activeBackground: theme.colors.__alpha__secondary4,
-    headerBottom: theme.colors.outline,
-    text: theme.colors.text
+    active: theme.colors.globalPrimary,
+    inactive: theme.colors.globalPrimary,
+    activeBackground: theme.colors.mutedPrimary,
+    headerBottom: theme.colors.globalSecondaryOutline,
+    text: theme.colors.globalPrimary
   };
   var space = {
     flatListHorizontalPadding: theme.space.small,
@@ -2408,20 +2432,20 @@ var getTagTheme = function getTagTheme(theme) {
     "default": theme.borderWidths.base
   };
   var colors = {
-    "default": theme.colors.__alpha__globalPrimary,
+    "default": theme.colors.globalPrimary,
     defaultBackground: undefined,
-    primary: theme.colors.__alpha__globalPrimary,
+    primary: theme.colors.globalPrimary,
     primaryBackground: undefined,
-    info: theme.colors.__alpha__globalLabel4,
-    infoBackground: theme.colors.__alpha__globalLabel9,
-    success: theme.colors.__alpha__globalLabel3,
-    successBackground: theme.colors.__alpha__globalLabel8,
-    warning: theme.colors.__alpha__globalLabel2,
-    warningBackground: theme.colors.__alpha__globalLabel7,
-    danger: theme.colors.__alpha__globalLabel1,
-    dangerBackground: theme.colors.__alpha__globalLabel6,
-    archived: theme.colors.__alpha__globalLabel5,
-    archivedBackground: theme.colors.__alpha__globalNeutral3
+    info: theme.colors.onInfoSurface,
+    infoBackground: theme.colors.infoSurface,
+    success: theme.colors.onSuccessSurface,
+    successBackground: theme.colors.successSurface,
+    warning: theme.colors.onWarningSurface,
+    warningBackground: theme.colors.warningSurface,
+    danger: theme.colors.onErrorSurface,
+    dangerBackground: theme.colors.errorSurface,
+    archived: theme.colors.onArchivedSurface,
+    archivedBackground: theme.colors.archivedSurface
   };
   var fonts = {
     "default": theme.fonts.semiBold
@@ -2448,53 +2472,53 @@ var getTagTheme = function getTagTheme(theme) {
 
 var getTextInputTheme = function getTextInputTheme(theme) {
   var colors = {
-    labelBackground: theme.colors.platformBackground,
+    labelBackground: theme.colors.defaultGlobalSurface,
     asterisks: {
-      "default": theme.colors.danger,
-      error: theme.colors.danger,
-      disabled: theme.colors.disabledLightText,
-      readonly: theme.colors.disabledText,
-      filled: theme.colors.danger,
-      focused: theme.colors.danger
+      "default": theme.colors.error,
+      error: theme.colors.error,
+      disabled: theme.colors.disabledOnDefaultGlobalSurface,
+      readonly: theme.colors.mutedSecondary,
+      filled: theme.colors.error,
+      focused: theme.colors.error
     },
-    error: theme.colors.danger,
-    placeholderIfNotFocused: theme.colors.text,
-    placeholderIfFocued: theme.colors.disabledText,
-    label: theme.colors.text,
-    readonlyLabel: theme.colors.disabledText,
-    disabledLabel: theme.colors.disabledLightText,
-    text: theme.colors.text,
+    error: theme.colors.error,
+    placeholderIfNotFocused: theme.colors.globalPrimary,
+    placeholderIfFocued: theme.colors.mutedSecondary,
+    label: theme.colors.globalPrimary,
+    readonlyLabel: theme.colors.mutedSecondary,
+    disabledLabel: theme.colors.disabledOnDefaultGlobalSurface,
+    text: theme.colors.globalPrimary,
     borders: {
-      "default": theme.colors.text,
-      error: theme.colors.danger,
-      disabled: theme.colors.disabledLightText,
-      readonly: theme.colors.disabledText,
-      filled: theme.colors.text,
-      focused: theme.colors.text
+      "default": theme.colors.globalPrimary,
+      error: theme.colors.error,
+      disabled: theme.colors.disabledOnDefaultGlobalSurface,
+      readonly: theme.colors.mutedSecondary,
+      filled: theme.colors.globalPrimary,
+      focused: theme.colors.globalPrimary
     },
     labels: {
-      "default": theme.colors.text,
-      error: theme.colors.text,
-      disabled: theme.colors.disabledLightText,
-      readonly: theme.colors.disabledText,
-      filled: theme.colors.text,
-      focused: theme.colors.text
+      "default": theme.colors.globalPrimary,
+      error: theme.colors.globalPrimary,
+      disabled: theme.colors.disabledOnDefaultGlobalSurface,
+      readonly: theme.colors.disabledOnDefaultGlobalSurface,
+      filled: theme.colors.globalPrimary,
+      focused: theme.colors.globalPrimary
     },
     labelsInsideTextInput: {
-      "default": theme.colors.text,
-      error: theme.colors.text,
-      disabled: theme.colors.disabledLightText,
-      readonly: theme.colors.disabledText,
-      filled: theme.colors.text,
-      focused: theme.colors.text
+      "default": theme.colors.globalPrimary,
+      error: theme.colors.globalPrimary,
+      disabled: theme.colors.disabledOnDefaultGlobalSurface,
+      readonly: theme.colors.disabledOnDefaultGlobalSurface,
+      filled: theme.colors.globalPrimary,
+      focused: theme.colors.globalPrimary
     },
     maxLengthLabels: {
-      "default": theme.colors.text,
-      error: theme.colors.danger,
-      disabled: theme.colors.disabledLightText,
-      readonly: theme.colors.disabledText,
-      filled: theme.colors.text,
-      focused: theme.colors.text
+      "default": theme.colors.globalPrimary,
+      error: theme.colors.error,
+      disabled: theme.colors.disabledOnDefaultGlobalSurface,
+      readonly: theme.colors.disabledOnDefaultGlobalSurface,
+      filled: theme.colors.globalPrimary,
+      focused: theme.colors.globalPrimary
     }
   };
   var space = {
@@ -2548,12 +2572,12 @@ var getToastTheme = function getToastTheme(theme) {
   var colors = {
     success: theme.colors.success,
     warning: theme.colors.warning,
-    error: theme.colors.dangerLight,
-    info: theme.colors.infoLight,
-    notification: theme.colors.platformBackground,
-    snackbar: theme.colors.backgroundDark,
-    divider: theme.colors.outline,
-    shadow: theme.colors.backgroundDark
+    error: theme.colors.error,
+    info: theme.colors.info,
+    notification: theme.colors.defaultGlobalSurface,
+    snackbar: theme.colors.globalPrimary,
+    divider: theme.colors.globalSecondaryOutline,
+    shadow: theme.colors.globalPrimary
   };
   var sizes = {
     height: theme.sizes.xxxlarge
@@ -2593,9 +2617,10 @@ var getToastTheme = function getToastTheme(theme) {
 
 var getToolbarTheme = function getToolbarTheme(theme) {
   var colors = {
-    background: theme.colors.platformBackground,
-    border: theme.colors.outline,
+    background: theme.colors.defaultGlobalSurface,
+    border: theme.colors.globalSecondaryOutline,
     primary: theme.colors.primary,
+    secondary: theme.colors.secondary,
     info: theme.colors.info,
     success: theme.colors.success,
     danger: theme.colors.warning,
@@ -2618,14 +2643,15 @@ var getToolbarTheme = function getToolbarTheme(theme) {
 
 var getTypographyTheme = function getTypographyTheme(theme) {
   var colors = {
-    body: theme.colors.text,
-    subdued: theme.colors.disabledText,
+    body: theme.colors.globalPrimary,
+    subdued: theme.colors.mutedGlobalPrimary,
     primary: theme.colors.primary,
+    secondary: theme.colors.secondary,
     info: theme.colors.info,
     danger: theme.colors.danger,
     warning: theme.colors.warning,
     success: theme.colors.success,
-    inverted: theme.colors.invertedText
+    inverted: theme.colors.onGlobalPrimary
   };
   var fonts = {
     light: theme.fonts.light,
@@ -14601,6 +14627,7 @@ var HeroIcon = reactNativeVectorIcons.createIconSetFromIcoMoon(heroIconConfig, '
 var COLOR_INTENTS = {
   text: 'text',
   primary: 'primary',
+  secondary: 'secondary',
   info: 'info',
   danger: 'danger',
   success: 'success',
@@ -14696,7 +14723,7 @@ var AccordionItem = function AccordionItem(_ref) {
     fontWeight: "semi-bold"
   }, header) : header, /*#__PURE__*/React__default["default"].createElement(Icon, {
     icon: open ? 'arrow-up' : 'arrow-down',
-    intent: "primary",
+    intent: "secondary",
     size: "small"
   })), /*#__PURE__*/React__default["default"].createElement(StyledCollapse, {
     open: open
@@ -19136,10 +19163,16 @@ var Checkbox = function Checkbox(_ref) {
 };
 
 var StyledContainer$3 = index$8(reactNative.View)(function (_ref) {
-  var theme = _ref.theme;
+  var _theme$__hd__$textInp;
+
+  var theme = _ref.theme,
+      themeVariant = _ref.themeVariant;
   return {
     width: '100%',
-    marginVertical: theme.__hd__.textInput.space.containerMarginVertical
+    marginVertical: theme.__hd__.textInput.space.containerMarginVertical,
+    borderWidth: themeVariant === 'focused' ? theme.__hd__.textInput.borderWidths.container.focused : theme.__hd__.textInput.borderWidths.container.normal,
+    borderRadius: theme.__hd__.textInput.radii.container,
+    borderColor: (_theme$__hd__$textInp = theme.__hd__.textInput.colors.borders[themeVariant]) !== null && _theme$__hd__$textInp !== void 0 ? _theme$__hd__$textInp : theme.__hd__.textInput.colors.borders["default"]
   };
 });
 var StyledLabelContainer = index$8(reactNative.View)(function (_ref2) {
@@ -19241,19 +19274,8 @@ var StyledTextInput = index$8(reactNative.TextInput)(function (_ref11) {
     marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin
   };
 });
-var StyledBorderBackDrop = index$8(reactNative.View)(function (_ref12) {
-  var _theme$__hd__$textInp;
-
-  var theme = _ref12.theme,
-      themeVariant = _ref12.themeVariant;
-  return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
-    borderWidth: themeVariant === 'focused' ? theme.__hd__.textInput.borderWidths.container.focused : theme.__hd__.textInput.borderWidths.container.normal,
-    borderRadius: theme.__hd__.textInput.radii.container,
-    borderColor: (_theme$__hd__$textInp = theme.__hd__.textInput.colors.borders[themeVariant]) !== null && _theme$__hd__$textInp !== void 0 ? _theme$__hd__$textInp : theme.__hd__.textInput.colors.borders["default"]
-  });
-});
-var StyledTextInputContainer = index$8(reactNative.View)(function (_ref13) {
-  var theme = _ref13.theme;
+var StyledTextInputContainer = index$8(reactNative.View)(function (_ref12) {
+  var theme = _ref12.theme;
   return {
     flexDirection: 'row',
     alignItems: 'center',
@@ -19269,8 +19291,8 @@ var StyledTextInputAndLabelContainer = index$8(reactNative.View)(function () {
     flexShrink: 1
   };
 });
-var StyledErrorAndHelpTextContainer = index$8(reactNative.View)(function (_ref14) {
-  var theme = _ref14.theme;
+var StyledErrorAndHelpTextContainer = index$8(reactNative.View)(function (_ref13) {
+  var theme = _ref13.theme;
   return {
     paddingLeft: theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingLeft
   };
@@ -19292,26 +19314,26 @@ var getVariant$1 = function getVariant(_ref) {
       isEmptyValue = _ref.isEmptyValue;
 
   if (disabled) {
-    return "disabled";
+    return 'disabled';
   }
 
   if (error) {
-    return "error";
+    return 'error';
   }
 
   if (!editable || loading) {
-    return "readonly";
+    return 'readonly';
   }
 
   if (isFocused) {
-    return "focused";
+    return 'focused';
   }
 
   if (!isEmptyValue) {
-    return "filled";
+    return 'filled';
   }
 
-  return "default";
+  return 'default';
 };
 
 var TextInput = function TextInput(_ref2) {
@@ -19339,9 +19361,9 @@ var TextInput = function TextInput(_ref2) {
       renderInputValue = _ref2.renderInputValue,
       nativeProps = _objectWithoutProperties(_ref2, _excluded$6);
 
-  var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : "";
+  var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
-  var actualSuffix = loading ? "loading" : suffix;
+  var actualSuffix = loading ? 'loading' : suffix;
 
   var _React$useState = React__default["default"].useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -19363,9 +19385,9 @@ var TextInput = function TextInput(_ref2) {
     style: reactNative.StyleSheet.flatten([{
       color: theme.__hd__.textInput.colors.text
     }, textStyle]),
-    testID: "text-input",
+    testID: 'text-input',
     accessibilityState: {
-      disabled: variant === "disabled" || variant === "readonly"
+      disabled: variant === 'disabled' || variant === 'readonly'
     },
     // @ts-ignore
     accessibilityLabelledBy: accessibilityLabelledBy
@@ -19391,16 +19413,15 @@ var TextInput = function TextInput(_ref2) {
       (_nativeProps$onChange = nativeProps.onChangeText) === null || _nativeProps$onChange === void 0 ? void 0 : _nativeProps$onChange.call(nativeProps, text);
     },
     defaultValue: defaultValue,
-    placeholder: variant === "focused" ? nativeProps.placeholder : undefined
+    placeholder: variant === 'focused' ? nativeProps.placeholder : undefined
   });
 
   return /*#__PURE__*/React__default["default"].createElement(StyledContainer$3, {
-    pointerEvents: variant === "disabled" || variant === "readonly" ? "none" : "auto",
-    testID: testID
-  }, /*#__PURE__*/React__default["default"].createElement(StyledTextInputContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledBorderBackDrop, {
-    themeVariant: variant,
-    style: style
-  }), (isFocused || label && !isEmptyValue) && /*#__PURE__*/React__default["default"].createElement(StyledLabelContainer, {
+    pointerEvents: variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto',
+    testID: testID,
+    style: style,
+    themeVariant: variant
+  }, /*#__PURE__*/React__default["default"].createElement(StyledTextInputContainer, null, (isFocused || label && !isEmptyValue) && /*#__PURE__*/React__default["default"].createElement(StyledLabelContainer, {
     pointerEvents: "none"
   }, required && /*#__PURE__*/React__default["default"].createElement(StyledAsteriskLabel, {
     themeVariant: variant,
@@ -19410,8 +19431,8 @@ var TextInput = function TextInput(_ref2) {
     testID: "input-label",
     fontSize: "small",
     themeVariant: variant
-  }, label)), typeof prefix === "string" ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-    intent: variant === "disabled" ? "disabled-text" : "text",
+  }, label)), typeof prefix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    intent: variant === 'disabled' ? 'disabled-text' : 'text',
     testID: "input-prefix",
     icon: prefix,
     size: "xsmall"
@@ -19424,11 +19445,11 @@ var TextInput = function TextInput(_ref2) {
     testID: "input-label",
     fontSize: "medium",
     themeVariant: variant
-  }, label)), renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React__default["default"].createElement(StyledTextInput, nativeInputProps)), typeof actualSuffix === "string" ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-    intent: variant === "disabled" ? "disabled-text" : "text",
+  }, label)), renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React__default["default"].createElement(StyledTextInput, nativeInputProps)), typeof actualSuffix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    intent: variant === 'disabled' ? 'disabled-text' : 'text',
     testID: "input-suffix",
     icon: actualSuffix,
-    spin: actualSuffix === "loading",
+    spin: actualSuffix === 'loading',
     size: "xsmall"
   }) : suffix), /*#__PURE__*/React__default["default"].createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledErrorAndMaxLengthContainer, null, !!error && /*#__PURE__*/React__default["default"].createElement(StyledErrorContainer$1, null, /*#__PURE__*/React__default["default"].createElement(Icon, {
     testID: "input-error-icon",
@@ -20416,7 +20437,8 @@ var StyledListItemContainer = index$8(reactNative.TouchableHighlight)(function (
     flexDirection: 'row',
     backgroundColor: themeSelected ? theme.__hd__.list.colors.checkedListItemContainerBackground : theme.__hd__.list.colors.listItemContainerBackground,
     padding: theme.__hd__.list.space.listItemContainerPadding,
-    opacity: themeDisabled ? theme.__hd__.list.opacity.disabled : theme.__hd__.list.opacity.enabled
+    opacity: themeDisabled ? theme.__hd__.list.opacity.disabled : theme.__hd__.list.opacity.enabled,
+    borderRadius: theme.__hd__.list.radii.basicItem
   };
 });
 
@@ -21002,24 +21024,28 @@ var StyledSpinnerDot = index$8(reactNative.View)(function (_ref2) {
     switch (themePosition) {
       case 'topLeft':
         return {
-          backgroundColor: theme.__hd__.spinner.colors.dot1
+          backgroundColor: theme.__hd__.spinner.colors.dot,
+          opacity: 1
         };
 
       case 'topRight':
         return {
           marginLeft: theme.__hd__.spinner.space.spinnerDotPadding[themeSize],
-          backgroundColor: theme.__hd__.spinner.colors.dot2
+          backgroundColor: theme.__hd__.spinner.colors.dot,
+          opacity: 0.75
         };
 
       case 'bottomLeft':
         return {
-          backgroundColor: theme.__hd__.spinner.colors.dot3
+          backgroundColor: theme.__hd__.spinner.colors.dot,
+          opacity: 0.5
         };
 
       case 'bottomRight':
         return {
           marginLeft: theme.__hd__.spinner.space.spinnerDotPadding[themeSize],
-          backgroundColor: theme.__hd__.spinner.colors.dot4
+          backgroundColor: theme.__hd__.spinner.colors.dot,
+          opacity: 0.25
         };
     }
   };
@@ -22200,9 +22226,9 @@ var ScrollableTab = function ScrollableTab(_ref2) {
     testID: componentTestID
   }, /*#__PURE__*/React__default["default"].createElement(HeaderTabWrapper, {
     themeInsets: insets,
-    style: barStyle,
-    testID: componentTestID ? "".concat(componentTestID, "-tab-bar") : undefined
+    style: barStyle
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.FlatList, {
+    testID: componentTestID ? "".concat(componentTestID, "-tab-bar") : undefined,
     ref: flatListRef,
     horizontal: true,
     data: tabs,
@@ -22909,7 +22935,7 @@ var ToastProvider = function ToastProvider(_ref) {
       position = _ref$position === void 0 ? 'top' : _ref$position;
   var toastRef = React.useRef(null);
 
-  var _useState = React.useState({}),
+  var _useState = React.useState(null),
       _useState2 = _slicedToArray(_useState, 2),
       refState = _useState2[0],
       setRefState = _useState2[1];
@@ -22931,7 +22957,7 @@ var ToastProvider = function ToastProvider(_ref) {
     style: {
       flex: 1
     }
-  }, children, /*#__PURE__*/React__default["default"].createElement(ToastConfigContext.Provider, {
+  }, refState ? children : null, /*#__PURE__*/React__default["default"].createElement(ToastConfigContext.Provider, {
     value: config
   }, /*#__PURE__*/React__default["default"].createElement(ToastContainer, {
     ref: toastRef,
@@ -41254,10 +41280,9 @@ var RichTextEditor = function RichTextEditor(_ref) {
     }
   }, []);
   return /*#__PURE__*/React__default["default"].createElement(StyledContainer$3, {
-    testID: testID
-  }, /*#__PURE__*/React__default["default"].createElement(StyledTextInputContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledBorderBackDrop, {
+    testID: testID,
     themeVariant: variant
-  }), (isFocused || label && !isEmptyValue) && /*#__PURE__*/React__default["default"].createElement(StyledLabelContainer, {
+  }, /*#__PURE__*/React__default["default"].createElement(StyledTextInputContainer, null, (isFocused || label && !isEmptyValue) && /*#__PURE__*/React__default["default"].createElement(StyledLabelContainer, {
     pointerEvents: "none"
   }, required && /*#__PURE__*/React__default["default"].createElement(StyledAsteriskLabel, {
     themeVariant: variant,