@hero-design/rn 7.18.1 → 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
@@ -1789,23 +1807,26 @@ var getCardTheme = function getCardTheme(theme) {
 
 var getCheckboxTheme = function getCheckboxTheme(theme) {
   var colors = {
-    borderColor: theme.colors.primary,
-    text: theme.colors.invertedText,
-    disabled: theme.colors.inactiveBackground
+    "default": theme.colors.globalPrimary,
+    disabledBorder: theme.colors.globalPrimaryLight
   };
   var space = {
     // to remove the empty space above the check icon
     // and also to center the check mark
-    iconTop: -theme.space.xsmall
+    iconTop: -scale(3),
+    wrapperPadding: theme.space.medium,
+    iconDescriptionPadding: theme.space.smallMedium
   };
   var sizes = {
-    base: theme.space.large
+    icon: scale(20)
   };
   var radii = {
-    base: theme.radii.base
+    wrapper: theme.radii.medium,
+    icon: theme.radii.base
   };
   var borderWidths = {
-    "default": theme.borderWidths.medium
+    wrapper: theme.borderWidths.base,
+    icon: theme.borderWidths.medium
   };
   return {
     colors: colors,
@@ -2035,11 +2056,12 @@ var getListTheme = function getListTheme(theme) {
     cardShadow: theme.radii.base,
     leadingStatus: theme.radii.rounded
   };
-  var offsets = {
-    cardShadow: {
+  var shadows = {
+    cardOffset: {
       width: 0,
       height: 2
-    }
+    },
+    cardElevation: 10
   };
   var widths = {
     leadingStatus: 8
@@ -2053,9 +2075,9 @@ var getListTheme = function getListTheme(theme) {
     colors: colors,
     space: space,
     radii: radii,
-    offsets: offsets,
     widths: widths,
-    opacity: opacity
+    opacity: opacity,
+    shadows: shadows
   };
 };
 
@@ -2128,13 +2150,9 @@ var getProgressTheme = function getProgressTheme(theme) {
 
 var getRadioTheme = function getRadioTheme(theme) {
   var colors = {
-    circle: theme.colors.black,
-    checkedCircle: theme.colors.primary,
-    wrapper: theme.colors.platformBackground,
-    checkedWrapper: theme.colors.primaryBackground
+    circle: theme.colors.globalPrimary
   };
   var space = {
-    wrapperPadding: theme.space.medium,
     circleLeftMargin: theme.space.small,
     groupTopMargin: theme.space.xsmall
   };
@@ -2145,15 +2163,11 @@ var getRadioTheme = function getRadioTheme(theme) {
   var borderWidths = {
     circle: theme.borderWidths.medium
   };
-  var radii = {
-    wrapper: theme.radii.base
-  };
   return {
     sizes: sizes,
     borderWidths: borderWidths,
     space: space,
-    colors: colors,
-    radii: radii
+    colors: colors
   };
 };
 
@@ -2191,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,
@@ -2229,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
   };
@@ -2249,9 +2275,13 @@ var getSpinnerTheme = function getSpinnerTheme(theme) {
 
 var getSwitchTheme = function getSwitchTheme(theme) {
   var colors = {
-    thumb: theme.colors.platformBackground,
-    active: theme.colors.primary,
-    inactive: theme.colors.inactiveBackground
+    backgroundColors: {
+      checked: theme.colors.primary,
+      unchecked: theme.colors.globalPrimaryLight,
+      'disabled-checked': theme.colors.primaryLight,
+      'disabled-unchecked': theme.colors.archived
+    },
+    thumb: theme.colors.platformBackground
   };
   var thumbSizes = {
     small: theme.space.medium,
@@ -2273,25 +2303,21 @@ var getSwitchTheme = function getSwitchTheme(theme) {
   var radii = {
     rounded: theme.radii.rounded
   };
-  var borderWidths = {
-    "default": theme.borderWidths.base
-  };
   return {
     colors: colors,
     thumbSizes: thumbSizes,
     widths: widths,
     heights: heights,
     spaces: spaces,
-    radii: radii,
-    borderWidths: borderWidths
+    radii: radii
   };
 };
 
 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
   };
@@ -2299,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
   };
@@ -2325,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
@@ -2467,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
@@ -2482,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
   };
 };
 
@@ -2537,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 = {
@@ -2544,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 {
@@ -5959,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,
@@ -5969,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,
@@ -14514,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 () {
@@ -14591,7 +14637,7 @@ var AccordionItem = function AccordionItem(_ref) {
     fontSize: "large",
     fontWeight: "semi-bold"
   }, header) : header, /*#__PURE__*/React__default["default"].createElement(Icon, {
-    icon: "arrow-".concat(open ? 'up' : 'down'),
+    icon: open ? 'arrow-up' : 'arrow-down',
     intent: "primary",
     size: "small"
   })), /*#__PURE__*/React__default["default"].createElement(StyledCollapse, {
@@ -14608,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,
@@ -14632,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, {
@@ -14665,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
   };
 });
@@ -14679,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,
@@ -14689,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'
   };
 });
@@ -14707,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,
@@ -14728,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,
@@ -14864,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,
@@ -14874,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;
@@ -14910,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) {
@@ -14927,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;
@@ -15023,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");
@@ -15036,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();
   /**
@@ -15127,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,
@@ -15266,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);
 
@@ -15300,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 () {
@@ -15941,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');
@@ -18337,7 +18632,7 @@ function convertToFP(fn, arity, a) {
 var format = convertToFP(format$1, 2);
 var formatTime = format;
 
-var Wrapper$1 = index$7(reactNative.View)(function () {
+var Wrapper = index$7(reactNative.View)(function () {
   return {
     flex: 1,
     flexDirection: 'row',
@@ -18364,7 +18659,7 @@ function ContentNavigator(_ref) {
       fontSize = _ref$fontSize === void 0 ? 'medium' : _ref$fontSize,
       testID = _ref.testID,
       style = _ref.style;
-  return /*#__PURE__*/React__default["default"].createElement(Wrapper$1, {
+  return /*#__PURE__*/React__default["default"].createElement(Wrapper, {
     testID: testID,
     style: style
   }, /*#__PURE__*/React__default["default"].createElement(CompoundButton.Icon, {
@@ -18642,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%'
   };
@@ -18664,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 {
@@ -18690,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);
@@ -18711,42 +19003,73 @@ var index$6 = Object.assign(Card, {
 
 var StyledWrapper$5 = index$7(reactNative.TouchableOpacity)(function (_ref) {
   var theme = _ref.theme,
-      disabled = _ref.disabled;
+      themeWithBorder = _ref.themeWithBorder,
+      themeDisabled = _ref.themeDisabled;
+  var borderStyle = {
+    borderRadius: theme.__hd__.checkbox.radii.wrapper,
+    borderWidth: theme.__hd__.checkbox.borderWidths.wrapper,
+    padding: theme.__hd__.checkbox.space.wrapperPadding,
+    borderColor: themeDisabled ? theme.__hd__.checkbox.colors.disabledBorder : theme.__hd__.checkbox.colors["default"]
+  };
+  return _objectSpread2({
+    flexDirection: 'row'
+  }, themeWithBorder && borderStyle);
+});
+var StyledDescription$1 = index$7(Typography.Text)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    paddingRight: theme.__hd__.checkbox.space.iconDescriptionPadding,
+    flex: 1
+  };
+});
+var StyledCheckbox = index$7(reactNative.View)(function (_ref3) {
+  var theme = _ref3.theme,
+      themeDisabled = _ref3.themeDisabled;
   return {
-    display: 'flex',
     flexDirection: 'row',
     justifyContent: 'center',
-    height: theme.__hd__.checkbox.sizes.base,
-    width: theme.__hd__.checkbox.sizes.base,
-    borderRadius: theme.__hd__.checkbox.radii.base,
-    borderWidth: theme.__hd__.checkbox.borderWidths["default"],
-    borderColor: disabled ? theme.__hd__.checkbox.colors.disabled : theme.__hd__.checkbox.colors.borderColor,
+    height: theme.__hd__.checkbox.sizes.icon,
+    width: theme.__hd__.checkbox.sizes.icon,
+    borderRadius: theme.__hd__.checkbox.radii.icon,
+    borderWidth: theme.__hd__.checkbox.borderWidths.icon,
+    borderColor: themeDisabled ? theme.__hd__.checkbox.colors.disabledBorder : theme.__hd__.checkbox.colors["default"],
     overflow: 'hidden'
   };
 });
+var StyledCheckMark = index$7(Icon)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    position: 'absolute',
+    top: theme.__hd__.checkbox.space.iconTop
+  };
+});
 
-var CheckBox = function CheckBox(_ref) {
+var Checkbox = function Checkbox(_ref) {
   var checked = _ref.checked,
-      disabled = _ref.disabled,
+      description = _ref.description,
+      _ref$withBorder = _ref.withBorder,
+      withBorder = _ref$withBorder === void 0 ? false : _ref$withBorder,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       onPress = _ref.onPress,
       style = _ref.style,
       testID = _ref.testID;
   return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$5, {
     onPress: onPress,
     disabled: disabled,
+    themeDisabled: disabled,
+    themeWithBorder: withBorder,
     style: style,
     testID: testID
-  }, checked && /*#__PURE__*/React__default["default"].createElement(Icon, {
-    icon: "circle-ok",
-    intent: "primary",
-    size: "large",
-    style: _objectSpread2({
-      position: 'absolute',
-      top: defaultTheme.__hd__.checkbox.space.iconTop
-    }, disabled ? {
-      color: defaultTheme.__hd__.checkbox.colors.disabled
-    } : {})
-  }));
+  }, !!description && /*#__PURE__*/React__default["default"].createElement(StyledDescription$1, {
+    intent: disabled ? 'subdued' : 'body'
+  }, description), /*#__PURE__*/React__default["default"].createElement(StyledCheckbox, {
+    themeDisabled: disabled
+  }, checked && /*#__PURE__*/React__default["default"].createElement(StyledCheckMark, {
+    icon: "box-check",
+    intent: disabled ? 'disabled-text' : 'text',
+    testID: "check-mark"
+  })));
 };
 
 var StyledContainer$3 = index$7(reactNative.View)(function (_ref) {
@@ -18897,7 +19220,7 @@ var StyledErrorAndMaxLengthContainer = index$7(reactNative.View)(function () {
 });
 
 var _excluded$5 = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "helpText", "value", "defaultValue"];
-var getVariant = function getVariant(_ref) {
+var getVariant$1 = function getVariant(_ref) {
   var disabled = _ref.disabled,
       error = _ref.error,
       editable = _ref.editable,
@@ -18962,7 +19285,7 @@ var TextInput = function TextInput(_ref2) {
       isFocused = _React$useState2[0],
       setIsFocused = _React$useState2[1];
 
-  var variant = getVariant({
+  var variant = getVariant$1({
     disabled: disabled,
     error: error,
     editable: editable,
@@ -19885,8 +20208,9 @@ var StyledListItemContainer$1 = index$7(reactNative.TouchableHighlight)(function
         borderRadius: theme.__hd__.list.radii.card,
         shadowColor: theme.colors.shadow,
         shadowRadius: theme.__hd__.list.radii.cardShadow,
-        shadowOffset: theme.__hd__.list.offsets.cardShadow,
-        shadowOpacity: theme.__hd__.list.opacity.cardShadow
+        shadowOffset: theme.__hd__.list.shadows.cardOffset,
+        shadowOpacity: theme.__hd__.list.opacity.cardShadow,
+        elevation: theme.__hd__.list.shadows.cardElevation
       });
 
     default:
@@ -20544,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, {
@@ -20616,95 +20945,95 @@ 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 Wrapper = index$7(reactNative.TouchableOpacity)(function (_ref) {
-  var theme = _ref.theme,
-      themeChecked = _ref.themeChecked;
-  return {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    borderRadius: theme.__hd__.radio.radii.wrapper,
-    padding: theme.__hd__.radio.space.wrapperPadding,
-    backgroundColor: themeChecked ? theme.__hd__.radio.colors.checkedWrapper : theme.__hd__.radio.colors.wrapper
-  };
-});
-var Circle = index$7(reactNative.View)(function (_ref2) {
-  var theme = _ref2.theme,
-      themeChecked = _ref2.themeChecked;
+var Circle = index$7(reactNative.View)(function (_ref) {
+  var theme = _ref.theme;
   return {
     height: theme.__hd__.radio.sizes.circle,
     width: theme.__hd__.radio.sizes.circle,
     borderRadius: theme.radii.rounded,
     borderWidth: theme.__hd__.radio.borderWidths.circle,
-    borderColor: themeChecked ? theme.__hd__.radio.colors.checkedCircle : theme.__hd__.radio.colors.circle,
+    borderColor: theme.__hd__.radio.colors.circle,
     alignItems: 'center',
     justifyContent: 'center'
   };
 });
-var InnerCircle = index$7(reactNative.View)(function (_ref3) {
-  var theme = _ref3.theme;
+var InnerCircle = index$7(reactNative.View)(function (_ref2) {
+  var theme = _ref2.theme;
   return {
     height: theme.__hd__.radio.sizes.innerCircle,
     width: theme.__hd__.radio.sizes.innerCircle,
     borderRadius: theme.radii.rounded,
-    backgroundColor: theme.__hd__.radio.colors.checkedCircle
+    backgroundColor: theme.__hd__.radio.colors.circle
   };
 });
-var Spacer = index$7(reactNative.View)(function (_ref4) {
-  var theme = _ref4.theme;
+var Spacer = index$7(reactNative.View)(function (_ref3) {
+  var theme = _ref3.theme;
   return {
     marginTop: theme.__hd__.radio.space.groupTopMargin
   };
 });
 
-var Radio = function Radio(_ref) {
-  var text = _ref.text,
-      _ref$checked = _ref.checked,
-      checked = _ref$checked === void 0 ? false : _ref$checked,
-      onPress = _ref.onPress,
-      style = _ref.style,
-      testID = _ref.testID;
-  return /*#__PURE__*/React__default["default"].createElement(Wrapper, {
+var RadioCircle = function RadioCircle(_ref) {
+  var checked = _ref.checked,
+      text = _ref.text;
+  return /*#__PURE__*/React__default["default"].createElement(Circle, null, checked && /*#__PURE__*/React__default["default"].createElement(InnerCircle, {
+    testID: "".concat(text, "-selected-circle")
+  }));
+};
+
+var Radio = function Radio(_ref2) {
+  var text = _ref2.text,
+      _ref2$checked = _ref2.checked,
+      checked = _ref2$checked === void 0 ? false : _ref2$checked,
+      onPress = _ref2.onPress,
+      style = _ref2.style,
+      testID = _ref2.testID;
+  return /*#__PURE__*/React__default["default"].createElement(List.BasicItem, {
     onPress: onPress,
-    themeChecked: checked,
+    selected: checked,
+    title: text,
+    suffix: /*#__PURE__*/React__default["default"].createElement(RadioCircle, {
+      checked: checked,
+      text: text
+    }),
     style: style,
     testID: testID
-  }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
-    style: {
-      flex: 1
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
-    fontSize: "large"
-  }, text)), /*#__PURE__*/React__default["default"].createElement(Circle, {
-    themeChecked: checked
-  }, checked && /*#__PURE__*/React__default["default"].createElement(InnerCircle, {
-    testID: "".concat(text, "-selected-circle")
-  })));
+  });
 };
 
 function getKey(option, index, keyExtractor) {
@@ -21095,6 +21424,8 @@ function MultiSelect(_ref) {
     onPress: function onPress() {
       return setOpen(true);
     }
+  }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
+    pointerEvents: "none"
   }, /*#__PURE__*/React__default["default"].createElement(TextInput, {
     label: label,
     value: displayedValue,
@@ -21108,7 +21439,7 @@ function MultiSelect(_ref) {
     pointerEvents: "none",
     style: style,
     testID: testID
-  }))), /*#__PURE__*/React__default["default"].createElement(BottomSheet, {
+  })))), /*#__PURE__*/React__default["default"].createElement(BottomSheet, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -21249,6 +21580,8 @@ var SingleSelect = function SingleSelect(_ref) {
     onPress: function onPress() {
       return setOpen(true);
     }
+  }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
+    pointerEvents: "none"
   }, /*#__PURE__*/React__default["default"].createElement(TextInput, {
     label: label,
     value: displayedValue,
@@ -21262,7 +21595,7 @@ var SingleSelect = function SingleSelect(_ref) {
     pointerEvents: "none",
     style: style,
     testID: testID
-  }))), /*#__PURE__*/React__default["default"].createElement(BottomSheet, {
+  })))), /*#__PURE__*/React__default["default"].createElement(BottomSheet, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -21298,43 +21631,21 @@ var index$3 = Object.assign(SingleSelect, {
 
 var StyledWrapper = index$7(reactNative.View)(function (_ref) {
   var theme = _ref.theme,
-      themeChecked = _ref.themeChecked,
+      themeVariant = _ref.themeVariant,
       themeSize = _ref.themeSize;
   return {
     height: theme.__hd__["switch"].heights[themeSize],
     width: theme.__hd__["switch"].widths[themeSize],
     paddingHorizontal: theme.__hd__["switch"].spaces[themeSize],
     borderRadius: theme.__hd__["switch"].radii.rounded,
-    backgroundColor: themeChecked ? theme.__hd__["switch"].colors.active : theme.__hd__["switch"].colors.inactive
-  };
-});
-var StyledDisabledWrapper = index$7(reactNative.View)(function (_ref2) {
-  var theme = _ref2.theme,
-      themeSize = _ref2.themeSize;
-  return {
-    position: 'absolute',
-    height: theme.__hd__["switch"].heights[themeSize],
-    width: theme.__hd__["switch"].widths[themeSize],
-    borderRadius: theme.__hd__["switch"].radii.rounded,
-    backgroundColor: theme.__hd__["switch"].colors.thumb,
-    zIndex: 9999,
-    opacity: 0.8
-  };
-});
-var StyledThumbWrapper = index$7(reactNative.View)(function (_ref3) {
-  var theme = _ref3.theme,
-      themeSize = _ref3.themeSize;
-  return {
-    height: theme.__hd__["switch"].heights[themeSize],
-    width: theme.__hd__["switch"].widths[themeSize],
-    borderRadius: theme.__hd__["switch"].radii.rounded,
+    backgroundColor: theme.__hd__["switch"].colors.backgroundColors[themeVariant],
     display: 'flex',
     justifyContent: 'center'
   };
 });
-var StyledKnot = index$7(reactNative.Animated.View)(function (_ref4) {
-  var theme = _ref4.theme,
-      themeSize = _ref4.themeSize;
+var StyledKnot = index$7(reactNative.Animated.View)(function (_ref2) {
+  var theme = _ref2.theme,
+      themeSize = _ref2.themeSize;
   return {
     width: theme.__hd__["switch"].thumbSizes[themeSize],
     height: theme.__hd__["switch"].thumbSizes[themeSize],
@@ -21343,16 +21654,32 @@ var StyledKnot = index$7(reactNative.Animated.View)(function (_ref4) {
   };
 });
 
-var Switch = function Switch(_ref) {
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'medium' : _ref$size,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      checked = _ref.checked,
-      onPress = _ref.onPress,
-      style = _ref.style,
-      testID = _ref.testID;
+var getVariant = function getVariant(_ref) {
+  var disabled = _ref.disabled,
+      checked = _ref.checked;
+
+  if (disabled) {
+    return checked ? 'disabled-checked' : 'disabled-unchecked';
+  }
+
+  return checked ? 'checked' : 'unchecked';
+};
+
+var Switch = function Switch(_ref2) {
+  var _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? 'medium' : _ref2$size,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      _ref2$checked = _ref2.checked,
+      checked = _ref2$checked === void 0 ? false : _ref2$checked,
+      onPress = _ref2.onPress,
+      style = _ref2.style,
+      testID = _ref2.testID;
   var theme = useTheme$1();
+  var variant = getVariant({
+    disabled: disabled,
+    checked: checked
+  });
   var offset = checked ? theme.__hd__["switch"].widths[size] - theme.__hd__["switch"].thumbSizes[size] - theme.__hd__["switch"].spaces[size] * 2 : theme.__hd__["switch"].spaces.inactive;
 
   var _useState = React.useState(function () {
@@ -21373,19 +21700,15 @@ var Switch = function Switch(_ref) {
     onPress: onPress,
     disabled: disabled
   }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper, {
-    themeChecked: checked,
+    themeVariant: variant,
     themeSize: size,
     style: style
-  }, disabled && /*#__PURE__*/React__default["default"].createElement(StyledDisabledWrapper, {
-    themeSize: size
-  }), /*#__PURE__*/React__default["default"].createElement(StyledThumbWrapper, {
-    themeSize: size
   }, /*#__PURE__*/React__default["default"].createElement(StyledKnot, {
     themeSize: size,
     style: {
       left: animatedOffset
     }
-  }))));
+  })));
 };
 
 var AnimatedPagerView = reactNative.Animated.createAnimatedComponent(PagerView__default["default"]);
@@ -21430,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,
@@ -21472,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);
 });
@@ -21512,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,
@@ -21618,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({
@@ -21638,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,
@@ -21646,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,
@@ -21747,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({
@@ -21762,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,
@@ -21810,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;
@@ -21828,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) {
@@ -21849,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);
@@ -22025,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
   });
@@ -22039,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
   };
 });
@@ -22060,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,
@@ -22070,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'
   };
 });
@@ -22097,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 () {
@@ -22158,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);
 };
 
@@ -22293,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 = {
@@ -40688,10 +41078,11 @@ 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;
-exports.Checkbox = CheckBox;
+exports.Checkbox = Checkbox;
 exports.Collapse = Collapse;
 exports.ContentNavigator = ContentNavigator;
 exports.DatePicker = DatePicker;