@hero-design/rn 7.19.0 → 7.20.0

package/lib/index.js

@@ -1018,11 +1018,11 @@ var STEPS = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85,
 
 var createColorScales = function createColorScales(base) {
   var colorValues = new Values$1(base);
-  return _objectSpread2(_objectSpread2({}, STEPS.reduce(function (acc, step) {
-    var _objectSpread2$1;
+  return Object.assign(Object.assign({}, STEPS.reduce(function (acc, step) {
+    var _Object$assign;
 
-    return _objectSpread2(_objectSpread2({}, acc), {}, (_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, "lighten".concat(step), colorValues.tint(step).hexString()), _defineProperty(_objectSpread2$1, "darken".concat(step), colorValues.shade(step).hexString()), _objectSpread2$1));
-  }, {})), {}, {
+    return Object.assign(Object.assign({}, acc), (_Object$assign = {}, _defineProperty(_Object$assign, "lighten".concat(step), colorValues.tint(step).hexString()), _defineProperty(_Object$assign, "darken".concat(step), colorValues.shade(step).hexString()), _Object$assign));
+  }, {})), {
     base: colorValues.hexString()
   });
 };
@@ -1064,7 +1064,7 @@ var BASE_COLORS = {
   violet1: '#8505a2',
   mauve: '#c38cee',
   yellow: '#fadb14',
-  seashell: '#ebf4ff',
+  seashell: '#fff6eb',
   gold: '#ffd500'
 };
 var colorScales = Object.entries(BASE_COLORS).reduce(function (acc, _ref16) {
@@ -1072,7 +1072,7 @@ var colorScales = Object.entries(BASE_COLORS).reduce(function (acc, _ref16) {
       key = _ref17[0],
       value = _ref17[1];
 
-  return _objectSpread2(_objectSpread2({}, acc), {}, _defineProperty({}, key, createColorScales(value)));
+  return Object.assign(Object.assign({}, acc), _defineProperty({}, key, createColorScales(value)));
 }, {});
 var blue$1 = colorScales.blue,
     ultramarineBlue$1 = colorScales.ultramarineBlue,
@@ -1228,9 +1228,8 @@ var emerald = colorScales.emerald,
     peach = colorScales.peach,
     vermilion = colorScales.vermilion,
     pastelRed = colorScales.pastelRed,
-    mauve = colorScales.mauve;
-
-_objectSpread2(_objectSpread2({}, palette$5), {}, {
+    mauve$1 = colorScales.mauve;
+Object.assign(Object.assign({}, palette$5), {
   nightBlue: nightBlue.base,
   blueLight60: blue1.lighten60,
   blue: blue1.base,
@@ -1247,21 +1246,18 @@ _objectSpread2(_objectSpread2({}, palette$5), {}, {
   peachLight75: peach.lighten75,
   red: vermilion.base,
   pastelRed: pastelRed.base,
-  mauve: mauve.base
+  mauve: mauve$1.base
 });
-
 var apple = colorScales.apple,
     currant = colorScales.currant;
-
-_objectSpread2(_objectSpread2({}, palette$5), {}, {
+Object.assign(Object.assign({}, palette$5), {
   apple: apple.base,
   currant: currant.base
 });
-
 var scarletGum = colorScales.scarletGum,
-    violet1 = colorScales.violet1;
-
-var palette$2 = _objectSpread2(_objectSpread2({}, palette$5), {}, {
+    violet1 = colorScales.violet1,
+    mauve = colorScales.mauve;
+var palette$2 = Object.assign(Object.assign({}, palette$5), {
   scarletGumLight30: scarletGum.lighten30,
   scarletGumLight50: scarletGum.lighten50,
   scarletGumLight80: scarletGum.lighten80,
@@ -1271,14 +1267,13 @@ var palette$2 = _objectSpread2(_objectSpread2({}, palette$5), {}, {
   violetLight50: violet1.lighten50,
   violetLight80: violet1.lighten80,
   violetLight90: violet1.lighten90,
-  violet: violet1.base
+  violet: violet1.base,
+  mauve: mauve.base
 });
-
 var jordyBlue = colorScales.jordyBlue,
     cornflowerBlue = colorScales.cornflowerBlue,
     paua = colorScales.paua;
-
-_objectSpread2(_objectSpread2({}, palette$5), {}, {
+Object.assign(Object.assign({}, palette$5), {
   jordyBlueLight30: jordyBlue.lighten30,
   jordyBlueLight50: jordyBlue.lighten50,
   jordyBlueLight70: jordyBlue.lighten70,
@@ -1287,10 +1282,8 @@ _objectSpread2(_objectSpread2({}, palette$5), {}, {
   cornflowerBlue: cornflowerBlue.base,
   paua: paua.base
 });
-
 var gold$1 = colorScales.gold;
-
-var palette = _objectSpread2(_objectSpread2({}, palette$5), {}, {
+var palette = Object.assign(Object.assign({}, palette$5), {
   goldLight20: gold$1.lighten20,
   goldLight50: gold$1.lighten50,
   goldLight70: gold$1.lighten70,
@@ -1341,15 +1334,35 @@ var swagSystemPalette = {
   archivedBackground: palette$5.greyLight90,
   black: palette$5.black,
   inactiveBackground: palette$5.maasstrichtBlueLight50,
-  shadow: palette$5.greyLight45 // waiting for new color
-
+  shadow: palette$5.greyLight45,
+  __alpha__globalPrimary: palette$5.maasstrichtBlue,
+  __alpha__globalSecondary1: palette$5.maasstrichtBlueLight30,
+  __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__primary2: palette$2.mauve,
+  __alpha__secondary1: palette$2.scarletGumLight30,
+  __alpha__secondary2: palette$2.scarletGumLight50,
+  __alpha__secondary3: palette$2.scarletGumLight80,
+  __alpha__secondary4: palette$2.scarletGumLight90
 };
 
 var workSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette), {}, {
   primary: palette.gold,
   primaryLight: palette.goldLight50,
   primaryDark: palette.goldLight20,
-  primaryBackground: palette.goldLight90
+  primaryBackground: palette.goldLight90,
+  __alpha__secondary1: palette.goldLight20,
+  __alpha__secondary2: palette.goldLight50,
+  __alpha__secondary3: palette.goldLight70,
+  __alpha__secondary4: palette.goldLight90
 });
 
 var BASE_WIDTH = 390; // Based on iPhone 13's viewport size
@@ -1501,13 +1514,17 @@ var getAlertTheme = function getAlertTheme(theme) {
     warning: theme.colors.warning,
     error: theme.colors.dangerLight,
     info: theme.colors.infoLight,
+    notification: theme.colors.platformBackground,
     divider: theme.colors.outline
   };
   var sizes = {
     height: scale(48)
   };
   var space = {
-    padding: theme.space.medium
+    contentPaddingHorizontal: theme.space.smallMedium,
+    textPaddingHorizontal: theme.space.smallMedium,
+    iconLeftPadding: theme.space.smallMedium,
+    ctaPadding: theme.space.smallMedium
   };
   var radii = {
     "default": theme.radii.xlarge
@@ -1539,7 +1556,8 @@ var getAvatarTheme = function getAvatarTheme(theme) {
     xlarge: theme.space.xxxxlarge,
     xxlarge: theme.space.xlarge * 2,
     xxxlarge: theme.space.xxlarge * 2,
-    xxxxlarge: theme.space.xxxlarge * 2
+    xxxxlarge: theme.space.xxxlarge * 2,
+    xxxxxlarge: theme.space.small * 17
   };
   var fontSizes = {
     small: theme.fontSizes.large,
@@ -1548,7 +1566,8 @@ var getAvatarTheme = function getAvatarTheme(theme) {
     xlarge: theme.fontSizes.xxxlarge,
     xxlarge: theme.space.medium * 2,
     xxxlarge: theme.space.large * 1.5,
-    xxxxlarge: theme.space.xlarge * 1.5
+    xxxxlarge: theme.space.xlarge * 1.5,
+    xxxxxlarge: theme.space.xxlarge * 1.5
   };
   var radii = {
     rounded: theme.radii.rounded
@@ -1766,13 +1785,12 @@ var getCalendarTheme = function getCalendarTheme(theme) {
 var getCardTheme = function getCardTheme(theme) {
   var colors = {
     dataCardIndicator: theme.colors.primary,
-    indicator: {
-      archived: theme.colors.archivedLight,
-      info: theme.colors.infoLight,
-      success: theme.colors.success,
-      warning: theme.colors.warning,
-      danger: theme.colors.dangerMediumLight
-    }
+    primary: theme.colors.__alpha__primary2,
+    info: theme.colors.infoLight,
+    success: theme.colors.success,
+    warning: theme.colors.warning,
+    danger: theme.colors.dangerMediumLight,
+    archived: theme.colors.archivedLight
   };
   var sizes = {
     indicatorWidth: theme.space.medium
@@ -2187,7 +2205,7 @@ var getRichTextEditorTheme = function getRichTextEditorTheme(theme) {
 
 var getSectionHeadingTheme = function getSectionHeadingTheme(theme) {
   var colors = {
-    background: theme.colors.outline
+    background: theme.colors.__alpha__globalNeutral3
   };
   var space = {
     headingVerticalPadding: theme.space.small,
@@ -2225,19 +2243,31 @@ var getSelectTheme = function getSelectTheme(theme) {
 };
 
 var getSpinnerTheme = function getSpinnerTheme(theme) {
-  var color = {
-    "default": theme.colors.primary
+  var colors = {
+    dot1: theme.colors.__alpha__secondary1,
+    dot2: theme.colors.__alpha__secondary2,
+    dot3: theme.colors.__alpha__secondary3,
+    dot4: theme.colors.__alpha__secondary4
   };
   var space = {
-    spinnerDot: theme.space.medium,
-    spinnerDotPadding: theme.space.small,
-    spinnerTextPaddingTop: theme.space.small
+    spinnerDot: {
+      small: theme.space.small,
+      medium: theme.space.medium
+    },
+    spinnerDotPadding: {
+      small: theme.space.xsmall,
+      medium: theme.space.small
+    },
+    spinnerTextPaddingTop: {
+      small: theme.space.xsmall,
+      medium: theme.space.small
+    }
   };
   var radii = {
-    "default": theme.radii.medium
+    "default": theme.radii.rounded
   };
   return {
-    color: color,
+    colors: colors,
     space: space,
     radii: radii
   };
@@ -2285,9 +2315,9 @@ var getSwitchTheme = function getSwitchTheme(theme) {
 
 var getTabsTheme = function getTabsTheme(theme) {
   var colors = {
-    active: theme.colors.primary,
+    active: theme.colors.text,
     inactive: theme.colors.text,
-    activeBackground: theme.colors.primaryBackground,
+    activeBackground: theme.colors.__alpha__secondary4,
     headerBottom: theme.colors.outline,
     text: theme.colors.text
   };
@@ -2295,6 +2325,7 @@ var getTabsTheme = function getTabsTheme(theme) {
     flatListHorizontalPadding: theme.space.small,
     itemHorizontalPadding: theme.space.small,
     itemVerticalPadding: theme.space.small,
+    itemMargin: theme.space.smallMedium,
     outlineHorizontalPadding: theme.space.small,
     outlineVerticalPadding: theme.space.xsmall
   };
@@ -2321,20 +2352,20 @@ var getTagTheme = function getTagTheme(theme) {
     "default": theme.borderWidths.base
   };
   var colors = {
-    "default": theme.colors.text,
+    "default": theme.colors.__alpha__globalPrimary,
     defaultBackground: undefined,
-    primary: theme.colors.primary,
-    primaryBackground: theme.colors.primaryBackground,
-    info: theme.colors.info,
-    infoBackground: theme.colors.infoBackground,
-    success: theme.colors.successDark,
-    successBackground: theme.colors.successBackground,
-    warning: theme.colors.warningDark,
-    warningBackground: theme.colors.warningBackground,
-    danger: theme.colors.danger,
-    dangerBackground: theme.colors.dangerBackground,
-    archived: theme.colors.archivedDark,
-    archivedBackground: theme.colors.archivedBackground
+    primary: theme.colors.__alpha__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
   };
   var fonts = {
     "default": theme.fonts.semiBold
@@ -2463,14 +2494,21 @@ var getToastTheme = function getToastTheme(theme) {
     warning: theme.colors.warning,
     error: theme.colors.dangerLight,
     info: theme.colors.infoLight,
-    divider: theme.colors.outline
+    notification: theme.colors.platformBackground,
+    snackbar: theme.colors.backgroundDark,
+    divider: theme.colors.outline,
+    shadow: theme.colors.backgroundDark
   };
   var sizes = {
     height: scale(48)
   };
   var space = {
-    mediumPadding: theme.space.medium,
-    largePadding: theme.space.large
+    wrapperVerticalPadding: theme.space.large,
+    wrapperHorizontalPadding: theme.space.medium,
+    contentVerticalPadding: theme.space.smallMedium,
+    textHorizontalPadding: theme.space.smallMedium,
+    iconLeftPadding: theme.space.smallMedium,
+    ctaPadding: theme.space.smallMedium
   };
   var radii = {
     "default": theme.radii.xlarge
@@ -2478,12 +2516,22 @@ var getToastTheme = function getToastTheme(theme) {
   var borderWidths = {
     base: theme.borderWidths.base
   };
+  var shadows = {
+    offset: {
+      width: 0,
+      height: 2
+    },
+    opacity: 0.12,
+    radius: 4,
+    elevation: 4
+  };
   return {
     colors: colors,
     radii: radii,
     sizes: sizes,
     space: space,
-    borderWidths: borderWidths
+    borderWidths: borderWidths,
+    shadows: shadows
   };
 };
 
@@ -2533,6 +2581,7 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     medium: theme.fontSizes.medium,
     large: theme.fontSizes.large,
     xlarge: theme.fontSizes.xlarge,
+    xxxlarge: theme.fontSizes.xxxlarge,
     xxxxxlarge: theme.fontSizes.xxxxxlarge
   };
   var lineHeights = {
@@ -2540,6 +2589,7 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     medium: theme.lineHeights.medium,
     large: theme.lineHeights.large,
     xlarge: theme.lineHeights.xlarge,
+    xxxlarge: theme.lineHeights.xxxlarge,
     xxxxxlarge: theme.lineHeights.xxxxxlarge
   };
   return {
@@ -5955,7 +6005,7 @@ var StyledText$3 = index$7(reactNative.Text)(function (_ref) {
   });
 });
 
-var _excluded$f = ["children", "fontSize", "fontWeight", "intent"];
+var _excluded$h = ["children", "fontSize", "fontWeight", "intent"];
 
 var Text = function Text(_ref) {
   var children = _ref.children,
@@ -5965,7 +6015,7 @@ var Text = function Text(_ref) {
       fontWeight = _ref$fontWeight === void 0 ? 'regular' : _ref$fontWeight,
       _ref$intent = _ref.intent,
       intent = _ref$intent === void 0 ? 'body' : _ref$intent,
-      nativeProps = _objectWithoutProperties(_ref, _excluded$f);
+      nativeProps = _objectWithoutProperties(_ref, _excluded$h);
 
   return /*#__PURE__*/React__default["default"].createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
@@ -14510,11 +14560,11 @@ var StyledHeroIcon = index$7(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$e = ["style"];
+var _excluded$g = ["style"];
 
 var AnimatedIcon = function AnimatedIcon(_ref) {
   var style = _ref.style,
-      otherProps = _objectWithoutProperties(_ref, _excluded$e);
+      otherProps = _objectWithoutProperties(_ref, _excluded$g);
 
   var rotateAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
@@ -14604,7 +14654,7 @@ function usePropsOrInternalState(initialState, state, setState) {
   return [state || internalState, setState || setInternalState];
 }
 
-var _excluded$d = ["key"];
+var _excluded$f = ["key"];
 
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
@@ -14628,7 +14678,7 @@ var Accordion = function Accordion(_ref) {
     testID: testID
   }, items.map(function (_ref2, index) {
     var key = _ref2.key,
-        props = _objectWithoutProperties(_ref2, _excluded$d);
+        props = _objectWithoutProperties(_ref2, _excluded$f);
 
     var open = _activeItemKey === key;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
@@ -14661,13 +14711,13 @@ var IconContainer$1 = index$7(reactNative.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     alignItems: 'center',
-    paddingLeft: theme.__hd__.alert.space.padding
+    paddingLeft: theme.__hd__.alert.space.iconLeftPadding
   };
 });
 var TextContainer$1 = index$7(reactNative.View)(function (_ref3) {
   var theme = _ref3.theme;
   return {
-    paddingHorizontal: theme.__hd__.alert.space.padding,
+    paddingHorizontal: theme.__hd__.alert.space.textPaddingHorizontal,
     flex: 1
   };
 });
@@ -14675,7 +14725,7 @@ var ContentContainer$1 = index$7(reactNative.View)(function (_ref4) {
   var theme = _ref4.theme,
       showDivider = _ref4.showDivider;
   return {
-    paddingVertical: theme.__hd__.alert.space.padding,
+    paddingVertical: theme.__hd__.alert.space.contentPaddingHorizontal,
     flex: 1,
     borderRightWidth: showDivider ? theme.__hd__.alert.borderWidths.base : 0,
     borderColor: theme.__hd__.alert.colors.divider,
@@ -14685,7 +14735,7 @@ var ContentContainer$1 = index$7(reactNative.View)(function (_ref4) {
 var CTAWrapper$1 = index$7(reactNative.TouchableOpacity)(function (_ref5) {
   var theme = _ref5.theme;
   return {
-    paddingHorizontal: theme.__hd__.alert.space.padding,
+    paddingHorizontal: theme.__hd__.alert.space.ctaPadding,
     justifyContent: 'center'
   };
 });
@@ -14703,20 +14753,33 @@ var getIntentIcon$1 = function getIntentIcon(intent) {
 
     case 'error':
       return 'circle-warning';
+
+    default:
+      return undefined;
   }
 };
 
-var Alert = function Alert(_ref) {
-  var content = _ref.content,
-      icon = _ref.icon,
-      title = _ref.title,
-      _ref$intent = _ref.intent,
-      intent = _ref$intent === void 0 ? 'info' : _ref$intent,
-      onClose = _ref.onClose,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'default' : _ref$variant,
-      style = _ref.style,
-      testID = _ref.testID;
+var AlertIcon = function AlertIcon(_ref) {
+  var icon = _ref.icon;
+  return icon ? /*#__PURE__*/React__default["default"].createElement(IconContainer$1, {
+    testID: "alert-left-icon"
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: icon,
+    size: "small"
+  })) : null;
+};
+
+var Alert = function Alert(_ref2) {
+  var content = _ref2.content,
+      icon = _ref2.icon,
+      title = _ref2.title,
+      _ref2$intent = _ref2.intent,
+      intent = _ref2$intent === void 0 ? 'info' : _ref2$intent,
+      onClose = _ref2.onClose,
+      _ref2$variant = _ref2.variant,
+      variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
+      style = _ref2.style,
+      testID = _ref2.testID;
   return /*#__PURE__*/React__default["default"].createElement(Container$1, {
     themeVariant: variant,
     themeIntent: intent,
@@ -14724,12 +14787,9 @@ var Alert = function Alert(_ref) {
     testID: testID
   }, /*#__PURE__*/React__default["default"].createElement(ContentContainer$1, {
     showDivider: !!onClose
-  }, icon !== null ? /*#__PURE__*/React__default["default"].createElement(IconContainer$1, {
-    testID: "alert-left-icon"
-  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
-    icon: icon || getIntentIcon$1(intent),
-    size: "small"
-  })) : null, /*#__PURE__*/React__default["default"].createElement(TextContainer$1, null, typeof title === 'string' ? /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
+  }, icon !== null ? /*#__PURE__*/React__default["default"].createElement(AlertIcon, {
+    icon: icon || getIntentIcon$1(intent)
+  }) : null, /*#__PURE__*/React__default["default"].createElement(TextContainer$1, null, typeof title === 'string' ? /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
     fontWeight: "semi-bold"
   }, title) : title, typeof content === 'string' ? /*#__PURE__*/React__default["default"].createElement(Typography.Text, null, content) : content)), onClose ? /*#__PURE__*/React__default["default"].createElement(CTAWrapper$1, {
     onPress: onClose,
@@ -14860,7 +14920,7 @@ var StyledStatus = index$7(reactNative.Animated.View)(function (_ref3) {
   };
 });
 
-var _excluded$c = ["children", "visible", "intent", "style", "testID"];
+var _excluded$e = ["children", "visible", "intent", "style", "testID"];
 
 var Status = function Status(_ref) {
   var children = _ref.children,
@@ -14870,7 +14930,7 @@ var Status = function Status(_ref) {
       intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
       style = _ref.style,
       testID = _ref.testID,
-      nativeProps = _objectWithoutProperties(_ref, _excluded$c);
+      nativeProps = _objectWithoutProperties(_ref, _excluded$e);
 
   var _React$useRef = React__default["default"].useRef(new reactNative.Animated.Value(visible ? 1 : 0)),
       opacity = _React$useRef.current;
@@ -14906,7 +14966,7 @@ var Status = function Status(_ref) {
   }));
 };
 
-var _excluded$b = ["content", "visible", "max", "intent", "style", "testID"];
+var _excluded$d = ["content", "visible", "max", "intent", "style", "testID"];
 var DEFAULT_MAX_NUMBER = 99;
 
 var getPaddingState = function getPaddingState(content) {
@@ -14923,7 +14983,7 @@ var Badge = function Badge(_ref) {
       intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
       style = _ref.style,
       testID = _ref.testID,
-      nativeProps = _objectWithoutProperties(_ref, _excluded$b);
+      nativeProps = _objectWithoutProperties(_ref, _excluded$d);
 
   var _React$useRef = React__default["default"].useRef(new reactNative.Animated.Value(visible ? 1 : 0)),
       opacity = _React$useRef.current;
@@ -15019,7 +15079,7 @@ var StyledBottomBarText = index$7(Typography.Text)(function (_ref3) {
 var isIOS = reactNative.Platform.OS === 'ios';
 var isAndroid = reactNative.Platform.OS === 'android';
 
-var _excluded$a = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$c = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
@@ -15032,7 +15092,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
       renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
       selectedTabKey = _ref.selectedTabKey,
       tabs = _ref.tabs,
-      nativeProps = _objectWithoutProperties(_ref, _excluded$a);
+      nativeProps = _objectWithoutProperties(_ref, _excluded$c);
 
   var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
   /**
@@ -15123,14 +15183,14 @@ var StyledDivider = index$7(reactNative.View)(function (_ref) {
   }, horizontalMargin), verticalMargin);
 });
 
-var _excluded$9 = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$b = ["marginHorizontal", "marginVertical", "style", "testID"];
 
 var Divider = function Divider(_ref) {
   var marginHorizontal = _ref.marginHorizontal,
       marginVertical = _ref.marginVertical,
       style = _ref.style,
       testID = _ref.testID,
-      nativeProps = _objectWithoutProperties(_ref, _excluded$9);
+      nativeProps = _objectWithoutProperties(_ref, _excluded$b);
 
   return /*#__PURE__*/React__default["default"].createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
@@ -15262,7 +15322,7 @@ var StyledLoadingDot = index$7(reactNative.View)(function (_ref2) {
   }, themeStyling());
 });
 
-var _excluded$8 = ["count", "size", "testID", "themeVariant"];
+var _excluded$a = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = reactNative.Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = reactNative.Animated.createAnimatedComponent(StyledLoadingDot);
 
@@ -15296,7 +15356,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
       size = _ref2$size === void 0 ? 12 : _ref2$size,
       testID = _ref2.testID,
       themeVariant = _ref2.themeVariant,
-      nativeProps = _objectWithoutProperties(_ref2, _excluded$8);
+      nativeProps = _objectWithoutProperties(_ref2, _excluded$a);
 
   var progressAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
@@ -15937,6 +15997,245 @@ var BottomSheet = function BottomSheet(_ref) {
   }, footer) : null)));
 };
 
+var colors = {
+  backgroundColor: {
+    property: 'backgroundColor',
+    scale: 'colors'
+  },
+  bgColor: {
+    property: 'backgroundColor',
+    scale: 'colors'
+  },
+  borderColor: {
+    property: 'borderColor',
+    scale: 'colors'
+  },
+  borderTopColor: {
+    property: 'borderTopColor',
+    scale: 'colors'
+  },
+  borderBottomColor: {
+    property: 'borderBottomColor',
+    scale: 'colors'
+  },
+  borderStartColor: {
+    property: 'borderStartColor',
+    scale: 'colors'
+  },
+  borderEndColor: {
+    property: 'borderEndColor',
+    scale: 'colors'
+  },
+  borderLeftColor: {
+    property: 'borderLeftColor',
+    scale: 'colors'
+  },
+  borderRightColor: {
+    property: 'borderRightColor',
+    scale: 'colors'
+  }
+};
+var space = {
+  margin: {
+    property: 'margin',
+    scale: 'space'
+  },
+  marginBottom: {
+    property: 'marginBottom',
+    scale: 'space'
+  },
+  marginEnd: {
+    property: 'marginEnd',
+    scale: 'space'
+  },
+  marginHorizontal: {
+    property: 'marginHorizontal',
+    scale: 'space'
+  },
+  marginLeft: {
+    property: 'marginLeft',
+    scale: 'space'
+  },
+  marginRight: {
+    property: 'marginRight',
+    scale: 'space'
+  },
+  marginStart: {
+    property: 'marginStart',
+    scale: 'space'
+  },
+  marginTop: {
+    property: 'marginTop',
+    scale: 'space'
+  },
+  marginVertical: {
+    property: 'marginVertical',
+    scale: 'space'
+  },
+  padding: {
+    property: 'padding',
+    scale: 'space'
+  },
+  paddingBottom: {
+    property: 'paddingBottom',
+    scale: 'space'
+  },
+  paddingEnd: {
+    property: 'paddingEnd',
+    scale: 'space'
+  },
+  paddingHorizontal: {
+    property: 'paddingHorizontal',
+    scale: 'space'
+  },
+  paddingLeft: {
+    property: 'paddingLeft',
+    scale: 'space'
+  },
+  paddingRight: {
+    property: 'paddingRight',
+    scale: 'space'
+  },
+  paddingStart: {
+    property: 'paddingStart',
+    scale: 'space'
+  },
+  paddingTop: {
+    property: 'paddingTop',
+    scale: 'space'
+  },
+  paddingVertical: {
+    property: 'paddingVertical',
+    scale: 'space'
+  }
+};
+var radii = {
+  borderBottomEndRadius: {
+    property: 'borderBottomEndRadius',
+    scale: 'radii'
+  },
+  borderBottomLeftRadius: {
+    property: 'borderBottomLeftRadius',
+    scale: 'radii'
+  },
+  borderBottomRightRadius: {
+    property: 'borderBottomRightRadius',
+    scale: 'radii'
+  },
+  borderBottomStartRadius: {
+    property: 'borderBottomStartRadius',
+    scale: 'radii'
+  },
+  borderTopEndRadius: {
+    property: 'borderTopEndRadius',
+    scale: 'radii'
+  },
+  borderTopLeftRadius: {
+    property: 'borderTopLeftRadius',
+    scale: 'radii'
+  },
+  borderTopRightRadius: {
+    property: 'borderTopRightRadius',
+    scale: 'radii'
+  },
+  borderTopStartRadius: {
+    property: 'borderTopStartRadius',
+    scale: 'radii'
+  },
+  borderRadius: {
+    property: 'borderRadius',
+    scale: 'radii'
+  }
+};
+var borderWidths = {
+  borderWidth: {
+    property: 'borderWidth',
+    scale: 'borderWidths'
+  },
+  borderBottomWidth: {
+    property: 'borderBottomWidth',
+    scale: 'borderWidths'
+  },
+  borderTopWidth: {
+    property: 'borderTopWidth',
+    scale: 'borderWidths'
+  },
+  borderLeftWidth: {
+    property: 'borderLeftWidth',
+    scale: 'borderWidths'
+  },
+  borderRightWidth: {
+    property: 'borderRightWidth',
+    scale: 'borderWidths'
+  }
+};
+
+var config = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, colors), space), radii), borderWidths);
+
+var flexPropsKey = ['alignContent', 'alignItems', 'alignSelf', 'display', 'flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap', 'justifyContent'];
+
+var pick = function pick(keys, props) {
+  return keys.filter(function (key) {
+    return key in props;
+  }).reduce(function (result, cur) {
+    return _objectSpread2(_objectSpread2({}, result), {}, _defineProperty({}, cur, props[cur]));
+  }, {});
+};
+
+var _excluded$9 = ["theme"];
+var getThemeValue = function getThemeValue(theme, key, props) {
+  var propConfig = config[key];
+  var propValue = props[key];
+  if (!propValue) return undefined;
+  var scale = propConfig.scale,
+      property = propConfig.property;
+
+  switch (scale) {
+    case 'colors':
+      return _defineProperty({}, property, theme.colors[propValue]);
+
+    case 'space':
+      return _defineProperty({}, property, theme.space[propValue]);
+
+    case 'radii':
+      return _defineProperty({}, property, theme.radii[propValue]);
+
+    case 'borderWidths':
+      return _defineProperty({}, property, theme.borderWidths[propValue]);
+  }
+};
+
+var mapStylePropToThemeValue = function mapStylePropToThemeValue(theme, props) {
+  var entries = Object.keys(props);
+  return entries.reduce(function (result, key) {
+    return _objectSpread2(_objectSpread2({}, result), getThemeValue(theme, key, props));
+  }, {});
+};
+
+var configKeys = Object.keys(config);
+var StyledBox = index$7(reactNative.View)(function (_ref5) {
+  var theme = _ref5.theme,
+      otherProps = _objectWithoutProperties(_ref5, _excluded$9);
+
+  var styleProps = pick(configKeys, otherProps);
+  var flexProps = pick(_toConsumableArray(flexPropsKey), otherProps);
+  return _objectSpread2(_objectSpread2({}, mapStylePropToThemeValue(theme, styleProps)), flexProps);
+});
+
+var _excluded$8 = ["children", "style", "testID"];
+
+var Box = function Box(_ref) {
+  var children = _ref.children,
+      style = _ref.style,
+      testID = _ref.testID,
+      otherProps = _objectWithoutProperties(_ref, _excluded$8);
+
+  return /*#__PURE__*/React__default["default"].createElement(StyledBox, _extends$1({}, otherProps, {
+    style: style,
+    testID: testID
+  }), children);
+};
+
 function requiredArgs(required, args) {
   if (args.length < required) {
     throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present');
@@ -18638,7 +18937,7 @@ var Indicator = index$7(reactNative.View)(function (_ref2) {
   var theme = _ref2.theme,
       themeIntent = _ref2.themeIntent;
   return {
-    backgroundColor: theme.__hd__.card.colors.indicator[themeIntent],
+    backgroundColor: theme.__hd__.card.colors[themeIntent],
     width: theme.__hd__.card.sizes.indicatorWidth,
     height: '100%'
   };
@@ -18660,23 +18959,18 @@ var DataCard = function DataCard(_ref) {
 
 var StyledCard = index$7(reactNative.View)(function (_ref) {
   var themeVariant = _ref.themeVariant,
-      theme = _ref.theme;
-  var sharedStyles = {
+      theme = _ref.theme,
+      themeIntent = _ref.themeIntent;
+  return _objectSpread2(_objectSpread2(_objectSpread2({}, themeVariant === 'data' && {
+    flexDirection: 'row'
+  }), themeIntent !== undefined && {
+    backgroundColor: theme.__hd__.card.colors[themeIntent]
+  }), {}, {
     borderRadius: theme.__hd__.card.radii["default"],
     overflow: 'hidden'
-  };
-  var dataStyles = {
-    flexDirection: 'row'
-  };
-
-  switch (themeVariant) {
-    case 'basic':
-      return sharedStyles;
+  });
+}); // DEPRECATED
 
-    case 'data':
-      return _objectSpread2(_objectSpread2({}, sharedStyles), dataStyles);
-  }
-});
 var LeftDataCard = index$7(reactNative.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
@@ -18686,16 +18980,18 @@ var LeftDataCard = index$7(reactNative.View)(function (_ref2) {
   };
 });
 
-var _excluded$6 = ["variant", "children"];
+var _excluded$6 = ["variant", "intent", "children"];
 
 var Card = function Card(_ref) {
   var _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'basic' : _ref$variant,
+      intent = _ref.intent,
       children = _ref.children,
       nativeProps = _objectWithoutProperties(_ref, _excluded$6);
 
   return /*#__PURE__*/React__default["default"].createElement(StyledCard, _extends$1({}, nativeProps, {
-    themeVariant: variant
+    themeVariant: variant,
+    themeIntent: intent
   }), variant === 'data' && /*#__PURE__*/React__default["default"].createElement(LeftDataCard, {
     testID: "data-card-indicator"
   }), children);
@@ -20572,54 +20868,59 @@ var StyledSpinnerContainer = index$7(reactNative.View)({
 });
 var StyledSpinnerRow = index$7(reactNative.View)(function (_ref) {
   var themePosition = _ref.themePosition,
+      _ref$themeSize = _ref.themeSize,
+      themeSize = _ref$themeSize === void 0 ? 'medium' : _ref$themeSize,
       theme = _ref.theme;
   return {
     flexDirection: 'row',
-    marginBottom: themePosition === 'top' ? theme.__hd__.spinner.space.spinnerDotPadding : 0
+    marginBottom: themePosition === 'top' ? theme.__hd__.spinner.space.spinnerDotPadding[themeSize] : 0
   };
 });
 var StyledSpinnerDot = index$7(reactNative.View)(function (_ref2) {
   var themePosition = _ref2.themePosition,
+      _ref2$themeSize = _ref2.themeSize,
+      themeSize = _ref2$themeSize === void 0 ? 'medium' : _ref2$themeSize,
       theme = _ref2.theme;
 
   var themeStyling = function themeStyling() {
     switch (themePosition) {
       case 'topLeft':
         return {
-          opacity: 1
+          backgroundColor: theme.__hd__.spinner.colors.dot1
         };
 
       case 'topRight':
         return {
-          marginLeft: theme.__hd__.spinner.space.spinnerDotPadding,
-          opacity: 0.7
+          marginLeft: theme.__hd__.spinner.space.spinnerDotPadding[themeSize],
+          backgroundColor: theme.__hd__.spinner.colors.dot2
         };
 
       case 'bottomLeft':
         return {
-          opacity: 0.5
+          backgroundColor: theme.__hd__.spinner.colors.dot3
         };
 
       case 'bottomRight':
         return {
-          marginLeft: theme.__hd__.spinner.space.spinnerDotPadding,
-          opacity: 0.3
+          marginLeft: theme.__hd__.spinner.space.spinnerDotPadding[themeSize],
+          backgroundColor: theme.__hd__.spinner.colors.dot4
         };
     }
   };
 
   return _objectSpread2({
-    height: scale(theme.__hd__.spinner.space.spinnerDot),
-    width: scale(theme.__hd__.spinner.space.spinnerDot),
-    borderRadius: theme.__hd__.spinner.radii["default"],
-    backgroundColor: theme.__hd__.spinner.color["default"]
+    height: scale(theme.__hd__.spinner.space.spinnerDot[themeSize]),
+    width: scale(theme.__hd__.spinner.space.spinnerDot[themeSize]),
+    borderRadius: theme.__hd__.spinner.radii["default"]
   }, themeStyling());
 });
 
 var AnimatedRow = reactNative.Animated.createAnimatedComponent(StyledSpinnerRow);
 var AnimatedDot = reactNative.Animated.createAnimatedComponent(StyledSpinnerDot);
 
-var AnimatedSpinner = function AnimatedSpinner() {
+var AnimatedSpinner = function AnimatedSpinner(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'medium' : _ref$size;
   var rotateAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
     var animation = reactNative.Animated.loop(reactNative.Animated.timing(rotateAnimation.current, {
@@ -20644,29 +20945,39 @@ var AnimatedSpinner = function AnimatedSpinner() {
       }]
     }])
   }, /*#__PURE__*/React__default["default"].createElement(AnimatedRow, {
-    themePosition: "top"
+    themePosition: "top",
+    themeSize: size
   }, /*#__PURE__*/React__default["default"].createElement(AnimatedDot, {
-    themePosition: "topLeft"
+    themePosition: "topLeft",
+    themeSize: size
   }), /*#__PURE__*/React__default["default"].createElement(AnimatedDot, {
-    themePosition: "topRight"
+    themePosition: "topRight",
+    themeSize: size
   })), /*#__PURE__*/React__default["default"].createElement(AnimatedRow, {
-    themePosition: "bottom"
+    themePosition: "bottom",
+    themeSize: size
   }, /*#__PURE__*/React__default["default"].createElement(AnimatedDot, {
-    themePosition: "bottomLeft"
+    themePosition: "bottomLeft",
+    themeSize: size
   }), /*#__PURE__*/React__default["default"].createElement(AnimatedDot, {
-    themePosition: "bottomRight"
+    themePosition: "bottomRight",
+    themeSize: size
   })));
 };
 
-var _excluded$1 = ["testID"];
+var _excluded$1 = ["testID", "size"];
 
 var Spinner = function Spinner(_ref) {
   var testID = _ref.testID,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'medium' : _ref$size,
       nativeProps = _objectWithoutProperties(_ref, _excluded$1);
 
   return /*#__PURE__*/React__default["default"].createElement(StyledView$1, nativeProps, /*#__PURE__*/React__default["default"].createElement(StyledSpinnerContainer, {
     testID: testID
-  }, /*#__PURE__*/React__default["default"].createElement(AnimatedSpinner, null)));
+  }, /*#__PURE__*/React__default["default"].createElement(AnimatedSpinner, {
+    size: size
+  })));
 };
 
 var Circle = index$7(reactNative.View)(function (_ref) {
@@ -21442,6 +21753,10 @@ var StyledIndicator = index$7(reactNative.Animated.View)(function (_ref3) {
     bottom: 0
   };
 });
+var StyledBadgeWrapper = index$7(reactNative.View)({
+  flexDirection: 'row',
+  alignItems: 'center'
+});
 
 var ActiveTabIndicator = function ActiveTabIndicator(_ref) {
   var scrollOffsetAnimatedValue = _ref.scrollOffsetAnimatedValue,
@@ -21484,16 +21799,16 @@ var HeaderTabWrapper = index$7(reactNative.View)(function (_ref) {
   };
 });
 var HeaderTabItem = index$7(reactNative.Animated.View)(function (_ref2) {
-  var theme = _ref2.theme;
+  var theme = _ref2.theme,
+      isFirstItem = _ref2.isFirstItem;
   return {
-    paddingHorizontal: theme.__hd__.tabs.space.itemHorizontalPadding,
+    marginLeft: isFirstItem ? 0 : theme.__hd__.tabs.space.itemMargin,
     paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding
   };
 });
 var HeaderTabItemOutlineWrapper = index$7(reactNative.View)(function (_ref3) {
   var theme = _ref3.theme;
   return _objectSpread2({
-    paddingHorizontal: theme.__hd__.tabs.space.itemHorizontalPadding,
     paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding
   }, reactNative.StyleSheet.absoluteFillObject);
 });
@@ -21524,6 +21839,47 @@ var useAnimatedValueArray = function useAnimatedValueArray(initialValues) {
   return refs.current;
 };
 
+var TabWithBadge = function TabWithBadge(_ref) {
+  var showBadge = _ref.showBadge,
+      config = _ref.config,
+      tabItem = _ref.tabItem;
+  var theme = useTheme$1(); // Deprecated. To be removed.
+
+  if (showBadge !== undefined) {
+    return /*#__PURE__*/React__default["default"].createElement(Badge$1.Status, {
+      testID: "deprecated-badge",
+      visible: showBadge,
+      style: {
+        paddingHorizontal: theme.space.small
+      }
+    }, tabItem);
+  }
+
+  if (!config) return /*#__PURE__*/React__default["default"].createElement(reactNative.View, null, tabItem);
+
+  if (config.type === 'status') {
+    return /*#__PURE__*/React__default["default"].createElement(Badge$1.Status, {
+      visible: true,
+      style: {
+        paddingHorizontal: theme.space.xsmall
+      }
+    }, tabItem);
+  }
+
+  if (config.type === 'counter') {
+    return /*#__PURE__*/React__default["default"].createElement(StyledBadgeWrapper, null, tabItem, /*#__PURE__*/React__default["default"].createElement(Badge$1, {
+      content: config.value,
+      max: config.max,
+      intent: "info",
+      style: {
+        marginLeft: theme.space.xsmall
+      }
+    }));
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement(reactNative.View, null, tabItem);
+};
+
 var getTabItem$1 = function getTabItem(_ref) {
   var item = _ref.item,
       color = _ref.color,
@@ -21630,8 +21986,8 @@ var ScrollableTab = function ScrollableTab(_ref2) {
           testID = tab.testID,
           activeItem = tab.activeItem,
           originalInactiveItem = tab.inactiveItem,
-          _tab$showBadge = tab.showBadge,
-          showBadge = _tab$showBadge === void 0 ? false : _tab$showBadge;
+          showBadge = tab.showBadge,
+          badge = tab.badge;
       var active = selectedTabKey === key;
       var activeAnimated = tabsAnims[index];
       var outlineScale = active ? activeAnimated.interpolate({
@@ -21650,7 +22006,9 @@ var ScrollableTab = function ScrollableTab(_ref2) {
           onTabPress(key);
         },
         testID: testID
-      }, /*#__PURE__*/React__default["default"].createElement(HeaderTabItem, null, /*#__PURE__*/React__default["default"].createElement(HeaderTabItemOutlineWrapper, null, /*#__PURE__*/React__default["default"].createElement(HeaderTabItemOutline, {
+      }, /*#__PURE__*/React__default["default"].createElement(HeaderTabItem, {
+        isFirstItem: index === 0
+      }, /*#__PURE__*/React__default["default"].createElement(HeaderTabItemOutlineWrapper, null, /*#__PURE__*/React__default["default"].createElement(HeaderTabItemOutline, {
         themeActive: active,
         style: {
           flex: 1,
@@ -21658,9 +22016,11 @@ var ScrollableTab = function ScrollableTab(_ref2) {
             scaleX: outlineScale
           }]
         }
-      })), /*#__PURE__*/React__default["default"].createElement(HeaderTabItemWrapper, null, /*#__PURE__*/React__default["default"].createElement(Badge$1.Status, {
-        visible: showBadge
-      }, tabItem))));
+      })), /*#__PURE__*/React__default["default"].createElement(HeaderTabItemWrapper, null, /*#__PURE__*/React__default["default"].createElement(TabWithBadge, {
+        showBadge: showBadge,
+        config: badge,
+        tabItem: tabItem
+      }))));
     }
   })), /*#__PURE__*/React__default["default"].createElement(ContentWrapper, {
     initialPage: selectedTabIndex,
@@ -21759,8 +22119,8 @@ var Tabs = function Tabs(_ref2) {
         testID = tab.testID,
         activeItem = tab.activeItem,
         originalInactiveItem = tab.inactiveItem,
-        _tab$showBadge = tab.showBadge,
-        showBadge = _tab$showBadge === void 0 ? false : _tab$showBadge;
+        showBadge = tab.showBadge,
+        badge = tab.badge;
     var active = selectedTabKey === key;
     var inactiveItem = originalInactiveItem !== null && originalInactiveItem !== void 0 ? originalInactiveItem : activeItem;
     var tabItem = getTabItem({
@@ -21774,9 +22134,11 @@ var Tabs = function Tabs(_ref2) {
         onTabPress(key);
       },
       testID: testID
-    }, /*#__PURE__*/React__default["default"].createElement(HeaderTabItem$1, null, /*#__PURE__*/React__default["default"].createElement(Badge$1.Status, {
-      visible: showBadge
-    }, tabItem)));
+    }, /*#__PURE__*/React__default["default"].createElement(HeaderTabItem$1, null, /*#__PURE__*/React__default["default"].createElement(TabWithBadge, {
+      showBadge: showBadge,
+      config: badge,
+      tabItem: tabItem
+    })));
   })), /*#__PURE__*/React__default["default"].createElement(ActiveTabIndicator, {
     positionAnimatedValue: positionAnimatedValue,
     scrollOffsetAnimatedValue: scrollOffsetAnimatedValue,
@@ -21822,15 +22184,6 @@ var index$2 = Object.assign(Tabs, {
   Scroll: ScrollableTab
 });
 
-var BACKGROUND_INTENTS = {
-  "default": 'defaultBackground',
-  primary: 'primaryBackground',
-  info: 'infoBackground',
-  success: 'successBackground',
-  warning: 'warningBackground',
-  danger: 'dangerBackground',
-  archived: 'archivedBackground'
-};
 var StyledView = index$7(reactNative.View)(function (_ref) {
   var themeIntent = _ref.themeIntent,
       theme = _ref.theme;
@@ -21840,7 +22193,7 @@ var StyledView = index$7(reactNative.View)(function (_ref) {
     paddingVertical: theme.__hd__.tag.space.verticalPadding,
     paddingHorizontal: theme.__hd__.tag.space.horizontalPadding,
     borderColor: theme.__hd__.tag.colors[themeIntent],
-    backgroundColor: theme.__hd__.tag.colors[BACKGROUND_INTENTS[themeIntent]]
+    backgroundColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")]
   };
 });
 var StyledText = index$7(reactNative.Text)(function (_ref2) {
@@ -21861,7 +22214,7 @@ var _excluded = ["content", "intent", "style", "testID"];
 var Tag = function Tag(_ref) {
   var content = _ref.content,
       _ref$intent = _ref.intent,
-      intent = _ref$intent === void 0 ? 'default' : _ref$intent,
+      intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
       style = _ref.style,
       testID = _ref.testID,
       nativeProps = _objectWithoutProperties(_ref, _excluded);
@@ -22037,8 +22390,8 @@ var ToastContainerWrapper = index$7(reactNative.View)(function (_ref) {
   var theme = _ref.theme,
       position = _ref.position;
   return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
-    paddingHorizontal: theme.__hd__.toast.space.largePadding,
-    paddingVertical: theme.__hd__.toast.space.mediumPadding,
+    paddingHorizontal: theme.__hd__.toast.space.wrapperVerticalPadding,
+    paddingVertical: theme.__hd__.toast.space.wrapperHorizontalPadding,
     flexDirection: position === 'bottom' ? 'column-reverse' : 'column',
     elevation: 9999
   });
@@ -22051,20 +22404,25 @@ var Container = index$7(reactNative.Animated.View)(function (_ref2) {
     borderRadius: themeVariant === 'round' ? theme.__hd__.toast.radii["default"] : 0,
     backgroundColor: theme.__hd__.toast.colors[themeIntent],
     minHeight: theme.__hd__.toast.sizes.height,
-    flexDirection: 'row'
+    flexDirection: 'row',
+    shadowColor: theme.__hd__.toast.colors.shadow,
+    shadowOffset: theme.__hd__.toast.shadows.offset,
+    shadowRadius: theme.__hd__.toast.shadows.radius,
+    shadowOpacity: theme.__hd__.toast.shadows.opacity,
+    elevation: theme.__hd__.toast.shadows.elevation
   };
 });
 var IconContainer = index$7(reactNative.View)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     alignItems: 'center',
-    paddingLeft: theme.__hd__.toast.space.mediumPadding
+    paddingLeft: theme.__hd__.toast.space.iconLeftPadding
   };
 });
 var TextContainer = index$7(reactNative.View)(function (_ref4) {
   var theme = _ref4.theme;
   return {
-    paddingHorizontal: theme.__hd__.toast.space.mediumPadding,
+    paddingHorizontal: theme.__hd__.toast.space.textHorizontalPadding,
     flex: 1
   };
 });
@@ -22072,7 +22430,7 @@ var ContentContainer = index$7(reactNative.View)(function (_ref5) {
   var theme = _ref5.theme,
       showDivider = _ref5.showDivider;
   return {
-    paddingVertical: theme.__hd__.toast.space.mediumPadding,
+    paddingVertical: theme.__hd__.toast.space.contentVerticalPadding,
     flex: 1,
     borderRightWidth: showDivider ? theme.__hd__.toast.borderWidths.base : 0,
     borderColor: theme.__hd__.toast.colors.divider,
@@ -22082,7 +22440,7 @@ var ContentContainer = index$7(reactNative.View)(function (_ref5) {
 var CTAWrapper = index$7(reactNative.TouchableOpacity)(function (_ref6) {
   var theme = _ref6.theme;
   return {
-    paddingHorizontal: theme.__hd__.alert.space.padding,
+    paddingHorizontal: theme.__hd__.toast.space.ctaPadding,
     justifyContent: 'center'
   };
 });
@@ -22109,24 +22467,39 @@ var getIntentIcon = function getIntentIcon(intent) {
 
     case 'error':
       return 'circle-warning';
+
+    default:
+      return undefined;
   }
 };
 
-var Toast$1 = function Toast(_ref) {
-  var content = _ref.content,
-      icon = _ref.icon,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'default' : _ref$variant,
-      _ref$intent = _ref.intent,
-      intent = _ref$intent === void 0 ? 'info' : _ref$intent,
-      style = _ref.style,
-      _ref$duration = _ref.duration,
-      duration = _ref$duration === void 0 ? 2000 : _ref$duration,
-      _ref$autoDismiss = _ref.autoDismiss,
-      autoDismiss = _ref$autoDismiss === void 0 ? true : _ref$autoDismiss,
-      onAction = _ref.onAction,
-      actionLabel = _ref.actionLabel,
-      onDismiss = _ref.onDismiss;
+var ToastIcon = function ToastIcon(_ref) {
+  var themeIntent = _ref.themeIntent,
+      icon = _ref.icon;
+  return icon ? /*#__PURE__*/React__default["default"].createElement(IconContainer, {
+    testID: "toast-left-icon"
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: icon,
+    size: "small",
+    intent: themeIntent === 'snackbar' ? 'text-inverted' : 'text'
+  })) : null;
+};
+
+var Toast$1 = function Toast(_ref2) {
+  var content = _ref2.content,
+      icon = _ref2.icon,
+      _ref2$variant = _ref2.variant,
+      variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
+      _ref2$intent = _ref2.intent,
+      intent = _ref2$intent === void 0 ? 'info' : _ref2$intent,
+      style = _ref2.style,
+      _ref2$duration = _ref2.duration,
+      duration = _ref2$duration === void 0 ? 2000 : _ref2$duration,
+      _ref2$autoDismiss = _ref2.autoDismiss,
+      autoDismiss = _ref2$autoDismiss === void 0 ? true : _ref2$autoDismiss,
+      onAction = _ref2.onAction,
+      actionLabel = _ref2.actionLabel,
+      onDismiss = _ref2.onDismiss;
   var animatedValue = React.useRef(new reactNative.Animated.Value(0)).current;
   var toastConfig = useToastConfig();
   React.useEffect(function () {
@@ -22170,19 +22543,20 @@ var Toast$1 = function Toast(_ref) {
     }]
   }, /*#__PURE__*/React__default["default"].createElement(ContentContainer, {
     showDivider: !!actionLabel
-  }, icon !== null ? /*#__PURE__*/React__default["default"].createElement(IconContainer, {
-    testID: "toast-left-icon"
-  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
-    icon: icon || getIntentIcon(intent),
-    size: "small"
-  })) : null, /*#__PURE__*/React__default["default"].createElement(TextContainer, null, typeof content === 'string' ? /*#__PURE__*/React__default["default"].createElement(Typography.Text, null, content) : content)), actionLabel ? /*#__PURE__*/React__default["default"].createElement(CTAWrapper, {
+  }, icon !== null ? /*#__PURE__*/React__default["default"].createElement(ToastIcon, {
+    themeIntent: intent,
+    icon: icon || getIntentIcon(intent)
+  }) : null, /*#__PURE__*/React__default["default"].createElement(TextContainer, null, typeof content === 'string' ? /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
+    intent: intent === 'snackbar' ? 'inverted' : 'body'
+  }, content) : content)), actionLabel ? /*#__PURE__*/React__default["default"].createElement(CTAWrapper, {
     testID: "toast-action-button",
     onPress: function onPress() {
       onAction === null || onAction === void 0 ? void 0 : onAction();
       onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
     }
   }, typeof actionLabel === 'string' ? /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
-    fontWeight: "semi-bold"
+    fontWeight: "semi-bold",
+    intent: intent === 'snackbar' ? 'inverted' : 'body'
   }, actionLabel) : actionLabel) : null);
 };
 
@@ -22305,13 +22679,17 @@ var ToastProvider = function ToastProvider(_ref) {
   }, [displayType, position]);
   return /*#__PURE__*/React__default["default"].createElement(ToastContext.Provider, {
     value: refState
+  }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
+    style: {
+      flex: 1
+    }
   }, children, /*#__PURE__*/React__default["default"].createElement(ToastConfigContext.Provider, {
     value: config
   }, /*#__PURE__*/React__default["default"].createElement(ToastContainer, {
     ref: toastRef,
     displayType: displayType,
     position: position
-  })));
+  }))));
 };
 
 var Toast = {
@@ -40700,6 +41078,7 @@ exports.Avatar = Avatar;
 exports.Badge = Badge$1;
 exports.BottomNavigation = BottomNavigation;
 exports.BottomSheet = BottomSheet;
+exports.Box = Box;
 exports.Button = CompoundButton;
 exports.Calendar = Calendar;
 exports.Card = index$6;