@hero-design/rn 7.22.2 → 7.22.3

package/es/index.js

@@ -1257,90 +1257,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,
-  __alpha__lightHighlightedSurface: '#ECE8EF'
-};
+  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
@@ -1487,7 +1512,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
@@ -1506,10 +1531,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
@@ -1537,9 +1562,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
   };
@@ -1580,12 +1605,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
@@ -1615,8 +1640,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']
@@ -1643,9 +1668,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,
@@ -1709,28 +1734,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 {
@@ -1747,10 +1772,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;
@@ -1780,13 +1805,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
@@ -1804,7 +1829,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,
@@ -1851,7 +1876,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,
@@ -1872,10 +1897,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,
@@ -1916,10 +1941,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,
@@ -1940,13 +1964,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,
@@ -2000,14 +2024,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,
@@ -2034,15 +2059,15 @@ var getImageTheme = function getImageTheme(theme) {
 
 var getListTheme = function getListTheme(theme) {
   var colors = {
-    checkedListItemContainerBackground: theme.colors.__alpha__lightHighlightedSurface,
-    highlightedListItemContainerBackground: theme.colors.__alpha__lightHighlightedSurface,
-    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 = {
@@ -2088,10 +2113,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,
@@ -2129,11 +2154,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'],
@@ -2178,9 +2203,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
@@ -2210,7 +2235,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,
@@ -2226,7 +2251,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,
@@ -2249,9 +2274,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
@@ -2260,10 +2285,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: {
@@ -2292,15 +2314,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 = {
@@ -2344,11 +2366,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,
@@ -2381,20 +2403,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
@@ -2421,53 +2443,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 = {
@@ -2521,12 +2543,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
@@ -2566,9 +2588,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,
@@ -2591,14 +2614,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,
@@ -14574,6 +14598,7 @@ var HeroIcon = createIconSetFromIcoMoon(heroIconConfig, 'hero-icons', 'hero-icon
 var COLOR_INTENTS = {
   text: 'text',
   primary: 'primary',
+  secondary: 'secondary',
   info: 'info',
   danger: 'danger',
   success: 'success',
@@ -14669,7 +14694,7 @@ var AccordionItem = function AccordionItem(_ref) {
     fontWeight: "semi-bold"
   }, header) : header, /*#__PURE__*/React.createElement(Icon, {
     icon: open ? 'arrow-up' : 'arrow-down',
-    intent: "primary",
+    intent: "secondary",
     size: "small"
   })), /*#__PURE__*/React.createElement(StyledCollapse, {
     open: open
@@ -20970,24 +20995,28 @@ var StyledSpinnerDot = index$8(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
         };
     }
   };
@@ -22168,9 +22197,9 @@ var ScrollableTab = function ScrollableTab(_ref2) {
     testID: componentTestID
   }, /*#__PURE__*/React.createElement(HeaderTabWrapper, {
     themeInsets: insets,
-    style: barStyle,
-    testID: componentTestID ? "".concat(componentTestID, "-tab-bar") : undefined
+    style: barStyle
   }, /*#__PURE__*/React.createElement(FlatList, {
+    testID: componentTestID ? "".concat(componentTestID, "-tab-bar") : undefined,
     ref: flatListRef,
     horizontal: true,
     data: tabs,
@@ -22877,7 +22906,7 @@ var ToastProvider = function ToastProvider(_ref) {
       position = _ref$position === void 0 ? 'top' : _ref$position;
   var toastRef = useRef(null);
 
-  var _useState = useState({}),
+  var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
       refState = _useState2[0],
       setRefState = _useState2[1];
@@ -22899,7 +22928,7 @@ var ToastProvider = function ToastProvider(_ref) {
     style: {
       flex: 1
     }
-  }, children, /*#__PURE__*/React.createElement(ToastConfigContext.Provider, {
+  }, refState ? children : null, /*#__PURE__*/React.createElement(ToastConfigContext.Provider, {
     value: config
   }, /*#__PURE__*/React.createElement(ToastContainer, {
     ref: toastRef,