@hero-design/rn 8.69.0 → 8.70.0

package/.turbo/turbo-build.log

@@ -1,8 +1,8 @@
-(node:2992) ExperimentalWarning: Import assertions are not a stable feature of the JavaScript language. Avoid relying on their current behavior and syntax as those might change in a future version of Node.js.
+(node:2991) ExperimentalWarning: Import assertions are not a stable feature of the JavaScript language. Avoid relying on their current behavior and syntax as those might change in a future version of Node.js.
 (Use `node --trace-warnings ...` to show where the warning was created)
-(node:2992) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:2991) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 
 src/index.ts → lib/index.js, es/index.js...
 (!) [plugin replace] @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
 (!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 53.7s
+created lib/index.js, es/index.js in 51.7s

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @hero-design/rn
 
+## 8.70.0
+
+### Minor Changes
+
+- [#3421](https://github.com/Thinkei/hero-design/pull/3421) [`1a36cbade6beba151ca794d950db19b3cd38f414`](https://github.com/Thinkei/hero-design/commit/1a36cbade6beba151ca794d950db19b3cd38f414) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Card] Add super-round variant
+
+### Patch Changes
+
+- [#3409](https://github.com/Thinkei/hero-design/pull/3409) [`4566296654e11a8d6be117fb241d1d94e29c4750`](https://github.com/Thinkei/hero-design/commit/4566296654e11a8d6be117fb241d1d94e29c4750) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Chip] Allow hiding selected icon
+
+- [#3396](https://github.com/Thinkei/hero-design/pull/3396) [`4fd2a3371237fe4d8dc306380a3575a35e6213f4`](https://github.com/Thinkei/hero-design/commit/4fd2a3371237fe4d8dc306380a3575a35e6213f4) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Chip] Update styling
+
+- [#3419](https://github.com/Thinkei/hero-design/pull/3419) [`3b050b79e0cd915fad534c208044852aeb45210c`](https://github.com/Thinkei/hero-design/commit/3b050b79e0cd915fad534c208044852aeb45210c) Thanks [@ttkien](https://github.com/ttkien)! - Add global theme for swaglight
+
+- Updated dependencies [[`3b050b79e0cd915fad534c208044852aeb45210c`](https://github.com/Thinkei/hero-design/commit/3b050b79e0cd915fad534c208044852aeb45210c)]:
+  - @hero-design/colors@8.45.1
+
 ## 8.69.0
 
 ### Minor Changes

package/es/index.js

@@ -1358,7 +1358,8 @@ var BASE_COLORS = {
   theatreGold: '#a56822',
   uniformGreen: '#4d4628',
   yellow: '#fadb14',
-  windsorGrey: '#606065'
+  windsorGrey: '#606065',
+  woodsmoke: '#121214'
 };
 var colorScales = Object.entries(BASE_COLORS).reduce(function (acc, _ref16) {
   var _ref17 = _slicedToArray(_ref16, 2),
@@ -1739,9 +1740,13 @@ var palette$4 = Object.assign(Object.assign({}, palette$9), {
   violet: violet1$1.base,
   mauve: mauve$1.base
 });
-var violet$3 = colorScales.violet;
+var violet$3 = colorScales.violet,
+  woodsmoke = colorScales.woodsmoke;
 var palette$3 = Object.assign(Object.assign({}, palette$9), {
-  violetLight90: violet$3.lighten90
+  violetLight90: violet$3.lighten90,
+  offBlack: woodsmoke.base,
+  offBlackLight30: woodsmoke.lighten30,
+  offBlackLight50: woodsmoke.lighten50
 });
 var scarletGum = colorScales.scarletGum,
   violet1 = colorScales.violet1,
@@ -1907,6 +1912,14 @@ var swagDarkBrandSystemPalette = {
 };
 var swagDarkSystemPalette = _objectSpread2(_objectSpread2({}, globalPalette), swagDarkBrandSystemPalette);
 
+var swagLightGlobalPalette = _objectSpread2(_objectSpread2({}, globalPalette$1), {}, {
+  onDefaultGlobalSurface: palette$3.offBlack,
+  mutedOnDefaultGlobalSurface: palette$3.offBlackLight30,
+  inactiveOnDefaultGlobalSurface: palette$3.offBlackLight50,
+  primaryOutline: palette$3.offBlack,
+  inactiveOutline: palette$3.offBlackLight50
+});
+
 var swagBrandSystemPallete = {
   primary: '#460078',
   onPrimary: '#fdfbff',
@@ -1918,7 +1931,7 @@ var swagBrandSystemPallete = {
   decorativePrimary: '#fdfbff',
   decorativePrimarySurface: '#dacce4'
 };
-var swagSystemPalette = _objectSpread2(_objectSpread2({}, globalPalette$1), swagBrandSystemPallete);
+var swagSystemPalette = _objectSpread2(_objectSpread2({}, swagLightGlobalPalette), swagBrandSystemPallete);
 
 var swagLightJobsSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette), {}, {
   secondary: '#40d1ff',
@@ -2527,7 +2540,8 @@ var getCardTheme = function getCardTheme(theme) {
     indicatorWidth: theme.sizes.medium
   };
   var radii = {
-    "default": theme.radii.large
+    "default": theme.radii.large,
+    superRound: theme.radii.xxxlarge
   };
   return {
     colors: colors,
@@ -2616,21 +2630,23 @@ var getCheckboxTheme = function getCheckboxTheme(theme) {
 
 var getChipTheme = function getChipTheme(theme) {
   var colors = {
-    primaryBackground: theme.colors.darkGlobalSurface,
     secondaryBackground: theme.colors.highlightedSurface,
     filledBackground: theme.colors.defaultGlobalSurface,
-    outlinedBackground: 'transparent',
-    wrapperBorder: theme.colors.primaryOutline,
     wrapperSelectedBorder: 'transparent',
-    selectedPrimaryText: theme.colors.defaultGlobalSurface
+    outlinedDefaultBackground: theme.colors.defaultGlobalSurface,
+    outlinedSelectedBackground: theme.colors.secondaryOutline,
+    outlinedSelectedBorder: theme.colors.primaryOutline,
+    outlinedDefaultBorder: theme.colors.disabledOnDefaultGlobalSurface
   };
   var space = {
     wrapperHorizontalPadding: theme.space.smallMedium,
     wrapperVerticalPadding: theme.space.small,
-    iconWrapperMarginRight: theme.space.small
+    iconWrapperHorizontalMargin: theme.space.small,
+    outlinedSelectedMarginTop: -theme.space.xxsmall
   };
   var sizes = {
-    wrapperBorder: theme.borderWidths.base
+    outlinedDefaultBorder: theme.borderWidths.base,
+    outlinedSelectedBorder: theme.borderWidths.medium
   };
   var radii = {
     wrapper: theme.radii.rounded
@@ -7045,7 +7061,7 @@ var Caption = function Caption(_ref) {
   }), children);
 };
 
-var StyledLabel$1 = index$9(Text$1)(function (_ref) {
+var StyledLabel = index$9(Text$1)(function (_ref) {
   var themeIntent = _ref.themeIntent,
     theme = _ref.theme;
   return {
@@ -7064,7 +7080,7 @@ var Label = function Label(_ref) {
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
     nativeProps = _objectWithoutProperties(_ref, _excluded$D);
-  return /*#__PURE__*/React__default.createElement(StyledLabel$1, _extends$1({}, nativeProps, {
+  return /*#__PURE__*/React__default.createElement(StyledLabel, _extends$1({}, nativeProps, {
     themeIntent: intent,
     allowFontScaling: allowFontScaling
   }), children);
@@ -7872,7 +7888,7 @@ var IconContainer$1 = index$9(View)(function (_ref2) {
     paddingLeft: theme.__hd__.alert.space.iconLeftPadding
   };
 });
-var StyledIcon$2 = index$9(Icon)(function (_ref3) {
+var StyledIcon$1 = index$9(Icon)(function (_ref3) {
   var theme = _ref3.theme,
     themeIntent = _ref3.themeIntent;
   return {
@@ -7931,7 +7947,7 @@ var AlertIcon = function AlertIcon(_ref) {
     intent = _ref.intent;
   return icon ? /*#__PURE__*/React__default.createElement(IconContainer$1, {
     testID: "alert-left-icon"
-  }, /*#__PURE__*/React__default.createElement(StyledIcon$2, {
+  }, /*#__PURE__*/React__default.createElement(StyledIcon$1, {
     icon: icon,
     size: "small",
     themeIntent: intent
@@ -7972,7 +7988,7 @@ var Alert = function Alert(_ref2) {
   }, typeof actionLabel === 'string' ? /*#__PURE__*/React__default.createElement(StyledBody, {
     variant: "small-bold",
     themeIntent: intent
-  }, actionLabel) : /*#__PURE__*/React__default.createElement(StyledIcon$2, {
+  }, actionLabel) : /*#__PURE__*/React__default.createElement(StyledIcon$1, {
     icon: "cancel",
     size: "small",
     themeIntent: intent
@@ -8925,7 +8941,7 @@ var StyledFooter = index$9(View)(function (_ref6) {
     flexDirection: 'row'
   };
 });
-var StyledIconWrapper$4 = index$9(View)(function (_ref7) {
+var StyledIconWrapper$3 = index$9(View)(function (_ref7) {
   var theme = _ref7.theme;
   return {
     alignItems: 'flex-end',
@@ -9454,7 +9470,7 @@ var Header = function Header(_ref) {
     style: {
       flex: 1
     }
-  }, content), showCloseButton ? /*#__PURE__*/React__default.createElement(StyledIconWrapper$4, null, variant === 'fixed' ? /*#__PURE__*/React__default.createElement(CompoundButton.Icon, {
+  }, content), showCloseButton ? /*#__PURE__*/React__default.createElement(StyledIconWrapper$3, null, variant === 'fixed' ? /*#__PURE__*/React__default.createElement(CompoundButton.Icon, {
     icon: "cancel",
     onPress: onRequestClose,
     intent: "text",
@@ -12306,22 +12322,26 @@ var DataCard = function DataCard(_ref) {
 
 var StyledCard$1 = index$9(View)(function (_ref) {
   var theme = _ref.theme,
-    themeIntent = _ref.themeIntent;
+    themeIntent = _ref.themeIntent,
+    themeVariant = _ref.themeVariant;
   return _objectSpread2(_objectSpread2({}, themeIntent !== undefined && {
     backgroundColor: theme.__hd__.card.colors[themeIntent]
   }), {}, {
-    borderRadius: theme.__hd__.card.radii["default"],
+    borderRadius: themeVariant === 'basic' ? theme.__hd__.card.radii["default"] : theme.__hd__.card.radii.superRound,
     overflow: 'hidden'
   });
 });
 
-var _excluded$p = ["intent", "children"];
+var _excluded$p = ["intent", "children", "variant"];
 var Card = function Card(_ref) {
   var intent = _ref.intent,
     children = _ref.children,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'basic' : _ref$variant,
     nativeProps = _objectWithoutProperties(_ref, _excluded$p);
   return /*#__PURE__*/React__default.createElement(StyledCard$1, _extends$1({}, nativeProps, {
-    themeIntent: intent
+    themeIntent: intent,
+    themeVariant: variant
   }), children);
 };
 var Card$1 = Object.assign(Card, {
@@ -12873,26 +12893,19 @@ var StyledChipWrapper = index$9(TouchableOpacity)(function (_ref) {
     }
   };
   var getBorderStyles = function getBorderStyles() {
-    var commonStyle = {
-      borderWidth: theme.__hd__.chip.sizes.wrapperBorder
-    };
-    if (themeSelected) {
-      return _objectSpread2(_objectSpread2({}, commonStyle), {}, {
-        borderColor: theme.__hd__.chip.colors.wrapperSelectedBorder
-      });
-    }
     switch (themeVariant) {
       case 'outlined':
         {
-          return _objectSpread2(_objectSpread2({}, commonStyle), {}, {
-            borderColor: theme.__hd__.chip.colors.wrapperBorder
-          });
+          return {
+            borderColor: themeSelected ? theme.__hd__.chip.colors.outlinedSelectedBorder : theme.__hd__.chip.colors.outlinedDefaultBorder,
+            borderWidth: themeSelected ? theme.__hd__.chip.sizes.outlinedSelectedBorder : theme.__hd__.chip.sizes.outlinedDefaultBorder
+          };
         }
       case 'filled':
         {
-          return _objectSpread2(_objectSpread2({}, commonStyle), {}, {
+          return {
             borderColor: theme.__hd__.chip.colors.wrapperSelectedBorder
-          });
+          };
         }
     }
   };
@@ -12902,7 +12915,7 @@ var StyledChipWrapper = index$9(TouchableOpacity)(function (_ref) {
         case 'outlined':
           {
             return {
-              backgroundColor: theme.__hd__.chip.colors.primaryBackground
+              backgroundColor: themeSelected ? theme.__hd__.chip.colors.outlinedSelectedBackground : theme.__hd__.chip.colors.outlinedDefaultBackground
             };
           }
         case 'filled':
@@ -12915,7 +12928,7 @@ var StyledChipWrapper = index$9(TouchableOpacity)(function (_ref) {
         case 'outlined':
           {
             return {
-              backgroundColor: theme.__hd__.chip.colors.outlinedBackground
+              backgroundColor: theme.__hd__.chip.colors.outlinedDefaultBackground
             };
           }
         case 'filled':
@@ -12933,33 +12946,11 @@ var StyledChipWrapper = index$9(TouchableOpacity)(function (_ref) {
     borderRadius: theme.__hd__.chip.radii.wrapper,
     paddingVertical: theme.__hd__.chip.space.wrapperVerticalPadding,
     paddingHorizontal: theme.__hd__.chip.space.wrapperHorizontalPadding,
-    borderWidth: theme.__hd__.chip.sizes.wrapperBorder
+    marginTop: themeSelected ? theme.__hd__.chip.space.outlinedSelectedMarginTop : undefined
   }, getShadowStyles()), getBorderStyles()), getBackgroundStyles());
 });
-var StyledIconWrapper$3 = index$9(Box)(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    marginRight: theme.__hd__.chip.space.iconWrapperMarginRight
-  };
-});
-var StyledLabel = index$9(Typography.Body)(function (_ref3) {
-  var themeSelected = _ref3.themeSelected,
-    themeVariant = _ref3.themeVariant,
-    theme = _ref3.theme;
-  return {
-    color: themeSelected && themeVariant === 'outlined' ? theme.__hd__.chip.colors.selectedPrimaryText : undefined
-  };
-});
-var StyledIcon$1 = index$9(Icon)(function (_ref4) {
-  var themeSelected = _ref4.themeSelected,
-    themeVariant = _ref4.themeVariant,
-    theme = _ref4.theme;
-  return {
-    color: themeSelected && themeVariant === 'outlined' ? theme.__hd__.chip.colors.selectedPrimaryText : undefined
-  };
-});
 
-var _excluded$m = ["label", "variant", "selected", "icon", "onPress"];
+var _excluded$m = ["label", "variant", "selected", "icon", "onPress", "showSelectedIcon"];
 var Chip = function Chip(_ref) {
   var label = _ref.label,
     _ref$variant = _ref.variant,
@@ -12968,31 +12959,27 @@ var Chip = function Chip(_ref) {
     selected = _ref$selected === void 0 ? false : _ref$selected,
     icon = _ref.icon,
     onPress = _ref.onPress,
+    _ref$showSelectedIcon = _ref.showSelectedIcon,
+    showSelectedIcon = _ref$showSelectedIcon === void 0 ? true : _ref$showSelectedIcon,
     otherProps = _objectWithoutProperties(_ref, _excluded$m);
-  var internalIcon = React__default.useMemo(function () {
-    if (icon && variant === 'filled') {
-      return icon;
-    }
-    if (selected) {
-      return 'checkmark';
-    }
-    return undefined;
-  }, [icon, selected, variant]);
+  var shouldShowSelectedIcon = variant === 'outlined' && selected && showSelectedIcon;
   return /*#__PURE__*/React__default.createElement(StyledChipWrapper, _extends$1({
     onPress: onPress,
     themeVariant: variant,
     themeSelected: selected
-  }, otherProps), internalIcon && /*#__PURE__*/React__default.createElement(StyledIconWrapper$3, null, /*#__PURE__*/React__default.createElement(StyledIcon$1, {
+  }, otherProps), icon && /*#__PURE__*/React__default.createElement(Box, {
+    marginRight: "small"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
     size: "xsmall",
-    icon: internalIcon,
-    themeSelected: selected,
-    themeVariant: variant,
-    testID: "chip-icon-".concat(internalIcon)
-  })), /*#__PURE__*/React__default.createElement(StyledLabel, {
-    variant: "small",
-    themeVariant: variant,
-    themeSelected: selected
-  }, label));
+    icon: icon,
+    testID: "chip-icon-".concat(icon)
+  })), /*#__PURE__*/React__default.createElement(Typography.Body, null, label), shouldShowSelectedIcon && /*#__PURE__*/React__default.createElement(Box, {
+    marginLeft: "small"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    size: "xsmall",
+    icon: "cancel",
+    testID: "selected-chip-icon-cancel"
+  })));
 };
 
 var StyledWrapper$7 = index$9(TouchableOpacity)(function (_ref) {

package/lib/index.js

@@ -1385,7 +1385,8 @@ var BASE_COLORS = {
   theatreGold: '#a56822',
   uniformGreen: '#4d4628',
   yellow: '#fadb14',
-  windsorGrey: '#606065'
+  windsorGrey: '#606065',
+  woodsmoke: '#121214'
 };
 var colorScales = Object.entries(BASE_COLORS).reduce(function (acc, _ref16) {
   var _ref17 = _slicedToArray(_ref16, 2),
@@ -1766,9 +1767,13 @@ var palette$4 = Object.assign(Object.assign({}, palette$9), {
   violet: violet1$1.base,
   mauve: mauve$1.base
 });
-var violet$3 = colorScales.violet;
+var violet$3 = colorScales.violet,
+  woodsmoke = colorScales.woodsmoke;
 var palette$3 = Object.assign(Object.assign({}, palette$9), {
-  violetLight90: violet$3.lighten90
+  violetLight90: violet$3.lighten90,
+  offBlack: woodsmoke.base,
+  offBlackLight30: woodsmoke.lighten30,
+  offBlackLight50: woodsmoke.lighten50
 });
 var scarletGum = colorScales.scarletGum,
   violet1 = colorScales.violet1,
@@ -1934,6 +1939,14 @@ var swagDarkBrandSystemPalette = {
 };
 var swagDarkSystemPalette = _objectSpread2(_objectSpread2({}, globalPalette), swagDarkBrandSystemPalette);
 
+var swagLightGlobalPalette = _objectSpread2(_objectSpread2({}, globalPalette$1), {}, {
+  onDefaultGlobalSurface: palette$3.offBlack,
+  mutedOnDefaultGlobalSurface: palette$3.offBlackLight30,
+  inactiveOnDefaultGlobalSurface: palette$3.offBlackLight50,
+  primaryOutline: palette$3.offBlack,
+  inactiveOutline: palette$3.offBlackLight50
+});
+
 var swagBrandSystemPallete = {
   primary: '#460078',
   onPrimary: '#fdfbff',
@@ -1945,7 +1958,7 @@ var swagBrandSystemPallete = {
   decorativePrimary: '#fdfbff',
   decorativePrimarySurface: '#dacce4'
 };
-var swagSystemPalette = _objectSpread2(_objectSpread2({}, globalPalette$1), swagBrandSystemPallete);
+var swagSystemPalette = _objectSpread2(_objectSpread2({}, swagLightGlobalPalette), swagBrandSystemPallete);
 
 var swagLightJobsSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette), {}, {
   secondary: '#40d1ff',
@@ -2554,7 +2567,8 @@ var getCardTheme = function getCardTheme(theme) {
     indicatorWidth: theme.sizes.medium
   };
   var radii = {
-    "default": theme.radii.large
+    "default": theme.radii.large,
+    superRound: theme.radii.xxxlarge
   };
   return {
     colors: colors,
@@ -2643,21 +2657,23 @@ var getCheckboxTheme = function getCheckboxTheme(theme) {
 
 var getChipTheme = function getChipTheme(theme) {
   var colors = {
-    primaryBackground: theme.colors.darkGlobalSurface,
     secondaryBackground: theme.colors.highlightedSurface,
     filledBackground: theme.colors.defaultGlobalSurface,
-    outlinedBackground: 'transparent',
-    wrapperBorder: theme.colors.primaryOutline,
     wrapperSelectedBorder: 'transparent',
-    selectedPrimaryText: theme.colors.defaultGlobalSurface
+    outlinedDefaultBackground: theme.colors.defaultGlobalSurface,
+    outlinedSelectedBackground: theme.colors.secondaryOutline,
+    outlinedSelectedBorder: theme.colors.primaryOutline,
+    outlinedDefaultBorder: theme.colors.disabledOnDefaultGlobalSurface
   };
   var space = {
     wrapperHorizontalPadding: theme.space.smallMedium,
     wrapperVerticalPadding: theme.space.small,
-    iconWrapperMarginRight: theme.space.small
+    iconWrapperHorizontalMargin: theme.space.small,
+    outlinedSelectedMarginTop: -theme.space.xxsmall
   };
   var sizes = {
-    wrapperBorder: theme.borderWidths.base
+    outlinedDefaultBorder: theme.borderWidths.base,
+    outlinedSelectedBorder: theme.borderWidths.medium
   };
   var radii = {
     wrapper: theme.radii.rounded
@@ -7072,7 +7088,7 @@ var Caption = function Caption(_ref) {
   }), children);
 };
 
-var StyledLabel$1 = index$9(reactNative.Text)(function (_ref) {
+var StyledLabel = index$9(reactNative.Text)(function (_ref) {
   var themeIntent = _ref.themeIntent,
     theme = _ref.theme;
   return {
@@ -7091,7 +7107,7 @@ var Label = function Label(_ref) {
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
     nativeProps = _objectWithoutProperties(_ref, _excluded$D);
-  return /*#__PURE__*/React__namespace.default.createElement(StyledLabel$1, _extends$1({}, nativeProps, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledLabel, _extends$1({}, nativeProps, {
     themeIntent: intent,
     allowFontScaling: allowFontScaling
   }), children);
@@ -7899,7 +7915,7 @@ var IconContainer$1 = index$9(reactNative.View)(function (_ref2) {
     paddingLeft: theme.__hd__.alert.space.iconLeftPadding
   };
 });
-var StyledIcon$2 = index$9(Icon)(function (_ref3) {
+var StyledIcon$1 = index$9(Icon)(function (_ref3) {
   var theme = _ref3.theme,
     themeIntent = _ref3.themeIntent;
   return {
@@ -7958,7 +7974,7 @@ var AlertIcon = function AlertIcon(_ref) {
     intent = _ref.intent;
   return icon ? /*#__PURE__*/React__namespace.default.createElement(IconContainer$1, {
     testID: "alert-left-icon"
-  }, /*#__PURE__*/React__namespace.default.createElement(StyledIcon$2, {
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledIcon$1, {
     icon: icon,
     size: "small",
     themeIntent: intent
@@ -7999,7 +8015,7 @@ var Alert = function Alert(_ref2) {
   }, typeof actionLabel === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledBody, {
     variant: "small-bold",
     themeIntent: intent
-  }, actionLabel) : /*#__PURE__*/React__namespace.default.createElement(StyledIcon$2, {
+  }, actionLabel) : /*#__PURE__*/React__namespace.default.createElement(StyledIcon$1, {
     icon: "cancel",
     size: "small",
     themeIntent: intent
@@ -8952,7 +8968,7 @@ var StyledFooter = index$9(reactNative.View)(function (_ref6) {
     flexDirection: 'row'
   };
 });
-var StyledIconWrapper$4 = index$9(reactNative.View)(function (_ref7) {
+var StyledIconWrapper$3 = index$9(reactNative.View)(function (_ref7) {
   var theme = _ref7.theme;
   return {
     alignItems: 'flex-end',
@@ -9481,7 +9497,7 @@ var Header = function Header(_ref) {
     style: {
       flex: 1
     }
-  }, content), showCloseButton ? /*#__PURE__*/React__namespace.default.createElement(StyledIconWrapper$4, null, variant === 'fixed' ? /*#__PURE__*/React__namespace.default.createElement(CompoundButton.Icon, {
+  }, content), showCloseButton ? /*#__PURE__*/React__namespace.default.createElement(StyledIconWrapper$3, null, variant === 'fixed' ? /*#__PURE__*/React__namespace.default.createElement(CompoundButton.Icon, {
     icon: "cancel",
     onPress: onRequestClose,
     intent: "text",
@@ -12333,22 +12349,26 @@ var DataCard = function DataCard(_ref) {
 
 var StyledCard$1 = index$9(reactNative.View)(function (_ref) {
   var theme = _ref.theme,
-    themeIntent = _ref.themeIntent;
+    themeIntent = _ref.themeIntent,
+    themeVariant = _ref.themeVariant;
   return _objectSpread2(_objectSpread2({}, themeIntent !== undefined && {
     backgroundColor: theme.__hd__.card.colors[themeIntent]
   }), {}, {
-    borderRadius: theme.__hd__.card.radii["default"],
+    borderRadius: themeVariant === 'basic' ? theme.__hd__.card.radii["default"] : theme.__hd__.card.radii.superRound,
     overflow: 'hidden'
   });
 });
 
-var _excluded$p = ["intent", "children"];
+var _excluded$p = ["intent", "children", "variant"];
 var Card = function Card(_ref) {
   var intent = _ref.intent,
     children = _ref.children,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'basic' : _ref$variant,
     nativeProps = _objectWithoutProperties(_ref, _excluded$p);
   return /*#__PURE__*/React__namespace.default.createElement(StyledCard$1, _extends$1({}, nativeProps, {
-    themeIntent: intent
+    themeIntent: intent,
+    themeVariant: variant
   }), children);
 };
 var Card$1 = Object.assign(Card, {
@@ -12900,26 +12920,19 @@ var StyledChipWrapper = index$9(reactNative.TouchableOpacity)(function (_ref) {
     }
   };
   var getBorderStyles = function getBorderStyles() {
-    var commonStyle = {
-      borderWidth: theme.__hd__.chip.sizes.wrapperBorder
-    };
-    if (themeSelected) {
-      return _objectSpread2(_objectSpread2({}, commonStyle), {}, {
-        borderColor: theme.__hd__.chip.colors.wrapperSelectedBorder
-      });
-    }
     switch (themeVariant) {
       case 'outlined':
         {
-          return _objectSpread2(_objectSpread2({}, commonStyle), {}, {
-            borderColor: theme.__hd__.chip.colors.wrapperBorder
-          });
+          return {
+            borderColor: themeSelected ? theme.__hd__.chip.colors.outlinedSelectedBorder : theme.__hd__.chip.colors.outlinedDefaultBorder,
+            borderWidth: themeSelected ? theme.__hd__.chip.sizes.outlinedSelectedBorder : theme.__hd__.chip.sizes.outlinedDefaultBorder
+          };
         }
       case 'filled':
         {
-          return _objectSpread2(_objectSpread2({}, commonStyle), {}, {
+          return {
             borderColor: theme.__hd__.chip.colors.wrapperSelectedBorder
-          });
+          };
         }
     }
   };
@@ -12929,7 +12942,7 @@ var StyledChipWrapper = index$9(reactNative.TouchableOpacity)(function (_ref) {
         case 'outlined':
           {
             return {
-              backgroundColor: theme.__hd__.chip.colors.primaryBackground
+              backgroundColor: themeSelected ? theme.__hd__.chip.colors.outlinedSelectedBackground : theme.__hd__.chip.colors.outlinedDefaultBackground
             };
           }
         case 'filled':
@@ -12942,7 +12955,7 @@ var StyledChipWrapper = index$9(reactNative.TouchableOpacity)(function (_ref) {
         case 'outlined':
           {
             return {
-              backgroundColor: theme.__hd__.chip.colors.outlinedBackground
+              backgroundColor: theme.__hd__.chip.colors.outlinedDefaultBackground
             };
           }
         case 'filled':
@@ -12960,33 +12973,11 @@ var StyledChipWrapper = index$9(reactNative.TouchableOpacity)(function (_ref) {
     borderRadius: theme.__hd__.chip.radii.wrapper,
     paddingVertical: theme.__hd__.chip.space.wrapperVerticalPadding,
     paddingHorizontal: theme.__hd__.chip.space.wrapperHorizontalPadding,
-    borderWidth: theme.__hd__.chip.sizes.wrapperBorder
+    marginTop: themeSelected ? theme.__hd__.chip.space.outlinedSelectedMarginTop : undefined
   }, getShadowStyles()), getBorderStyles()), getBackgroundStyles());
 });
-var StyledIconWrapper$3 = index$9(Box)(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    marginRight: theme.__hd__.chip.space.iconWrapperMarginRight
-  };
-});
-var StyledLabel = index$9(Typography.Body)(function (_ref3) {
-  var themeSelected = _ref3.themeSelected,
-    themeVariant = _ref3.themeVariant,
-    theme = _ref3.theme;
-  return {
-    color: themeSelected && themeVariant === 'outlined' ? theme.__hd__.chip.colors.selectedPrimaryText : undefined
-  };
-});
-var StyledIcon$1 = index$9(Icon)(function (_ref4) {
-  var themeSelected = _ref4.themeSelected,
-    themeVariant = _ref4.themeVariant,
-    theme = _ref4.theme;
-  return {
-    color: themeSelected && themeVariant === 'outlined' ? theme.__hd__.chip.colors.selectedPrimaryText : undefined
-  };
-});
 
-var _excluded$m = ["label", "variant", "selected", "icon", "onPress"];
+var _excluded$m = ["label", "variant", "selected", "icon", "onPress", "showSelectedIcon"];
 var Chip = function Chip(_ref) {
   var label = _ref.label,
     _ref$variant = _ref.variant,
@@ -12995,31 +12986,27 @@ var Chip = function Chip(_ref) {
     selected = _ref$selected === void 0 ? false : _ref$selected,
     icon = _ref.icon,
     onPress = _ref.onPress,
+    _ref$showSelectedIcon = _ref.showSelectedIcon,
+    showSelectedIcon = _ref$showSelectedIcon === void 0 ? true : _ref$showSelectedIcon,
     otherProps = _objectWithoutProperties(_ref, _excluded$m);
-  var internalIcon = React__namespace.default.useMemo(function () {
-    if (icon && variant === 'filled') {
-      return icon;
-    }
-    if (selected) {
-      return 'checkmark';
-    }
-    return undefined;
-  }, [icon, selected, variant]);
+  var shouldShowSelectedIcon = variant === 'outlined' && selected && showSelectedIcon;
   return /*#__PURE__*/React__namespace.default.createElement(StyledChipWrapper, _extends$1({
     onPress: onPress,
     themeVariant: variant,
     themeSelected: selected
-  }, otherProps), internalIcon && /*#__PURE__*/React__namespace.default.createElement(StyledIconWrapper$3, null, /*#__PURE__*/React__namespace.default.createElement(StyledIcon$1, {
+  }, otherProps), icon && /*#__PURE__*/React__namespace.default.createElement(Box, {
+    marginRight: "small"
+  }, /*#__PURE__*/React__namespace.default.createElement(Icon, {
     size: "xsmall",
-    icon: internalIcon,
-    themeSelected: selected,
-    themeVariant: variant,
-    testID: "chip-icon-".concat(internalIcon)
-  })), /*#__PURE__*/React__namespace.default.createElement(StyledLabel, {
-    variant: "small",
-    themeVariant: variant,
-    themeSelected: selected
-  }, label));
+    icon: icon,
+    testID: "chip-icon-".concat(icon)
+  })), /*#__PURE__*/React__namespace.default.createElement(Typography.Body, null, label), shouldShowSelectedIcon && /*#__PURE__*/React__namespace.default.createElement(Box, {
+    marginLeft: "small"
+  }, /*#__PURE__*/React__namespace.default.createElement(Icon, {
+    size: "xsmall",
+    icon: "cancel",
+    testID: "selected-chip-icon-cancel"
+  })));
 };
 
 var StyledWrapper$7 = index$9(reactNative.TouchableOpacity)(function (_ref) {