@hero-design/rn 8.67.0-alpha.2 → 8.67.0-alpha.3

package/es/index.js

@@ -2594,21 +2594,23 @@ var getCheckboxTheme = function getCheckboxTheme(theme) {
 
 var getChipTheme = function getChipTheme(theme) {
   var colors = {
-    primaryBackground: theme.colors.darkGlobalSurface,
+    primaryBackground: 'transparent',
     secondaryBackground: theme.colors.highlightedSurface,
     filledBackground: theme.colors.defaultGlobalSurface,
-    outlinedBackground: 'transparent',
-    wrapperBorder: theme.colors.primaryOutline,
+    outlinedDefaultBackground: 'transparent',
     wrapperSelectedBorder: 'transparent',
-    selectedPrimaryText: theme.colors.defaultGlobalSurface
+    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
@@ -2788,7 +2790,7 @@ var getFABTheme = function getFABTheme(theme) {
     icon: theme.colors.onPrimary,
     actionItemBackground: theme.colors.overlayGlobalSurface,
     actionItemPressedBackground: theme.colors.overlayGlobalSurface,
-    backdropBackground: theme.colors.defaultSurface,
+    backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onPrimary,
     actionItemText: theme.colors.onPrimary
   };
@@ -6968,7 +6970,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 {
@@ -6987,7 +6989,7 @@ var Label = function Label(_ref) {
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
     nativeProps = _objectWithoutProperties(_ref, _excluded$B);
-  return /*#__PURE__*/React__default.createElement(StyledLabel$1, _extends$1({}, nativeProps, {
+  return /*#__PURE__*/React__default.createElement(StyledLabel, _extends$1({}, nativeProps, {
     themeIntent: intent,
     allowFontScaling: allowFontScaling
   }), children);
@@ -7795,7 +7797,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 {
@@ -7854,7 +7856,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
@@ -7895,7 +7897,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
@@ -8817,7 +8819,7 @@ var StyledFooter = index$9(View)(function (_ref4) {
     flexDirection: 'row'
   };
 });
-var StyledIconWrapper$4 = index$9(View)(function (_ref5) {
+var StyledIconWrapper$3 = index$9(View)(function (_ref5) {
   var theme = _ref5.theme;
   return {
     alignItems: 'center',
@@ -9335,7 +9337,7 @@ var Header = function Header(_ref) {
     style: {
       flex: 1
     }
-  }, content), showCloseButton ? /*#__PURE__*/React__default.createElement(StyledIconWrapper$4, null, /*#__PURE__*/React__default.createElement(CompoundButton.Icon, {
+  }, content), showCloseButton ? /*#__PURE__*/React__default.createElement(StyledIconWrapper$3, null, /*#__PURE__*/React__default.createElement(CompoundButton.Icon, {
     icon: "cancel",
     onPress: onRequestClose,
     intent: "text",
@@ -12741,26 +12743,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), {}, {
-            borderColor: theme.__hd__.chip.colors.wrapperSelectedBorder
-          });
+          return {
+            borderColor: themeSelected ? theme.__hd__.chip.colors.wrapperSelectedBorder : theme.__hd__.chip.colors.wrapperSelectedBorder
+          };
         }
     }
   };
@@ -12783,7 +12778,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':
@@ -12801,31 +12796,9 @@ 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$k = ["label", "variant", "selected", "icon", "onPress"];
 var Chip = function Chip(_ref) {
@@ -12837,30 +12810,23 @@ var Chip = function Chip(_ref) {
     icon = _ref.icon,
     onPress = _ref.onPress,
     otherProps = _objectWithoutProperties(_ref, _excluded$k);
-  var internalIcon = React__default.useMemo(function () {
-    if (icon && variant === 'filled') {
-      return icon;
-    }
-    if (selected) {
-      return 'checkmark';
-    }
-    return undefined;
-  }, [icon, selected, variant]);
   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), variant === 'outlined' && selected && /*#__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) {
@@ -14982,7 +14948,7 @@ var StyledBackdrop = index$9(AnimatedPressable)(function (_ref2) {
     right: 0,
     top: 0,
     bottom: 0,
-    opacity: 0.8,
+    opacity: 0.25,
     backgroundColor: theme.__hd__.fab.colors.backdropBackground
   };
 });

package/lib/index.js

@@ -2621,21 +2621,23 @@ var getCheckboxTheme = function getCheckboxTheme(theme) {
 
 var getChipTheme = function getChipTheme(theme) {
   var colors = {
-    primaryBackground: theme.colors.darkGlobalSurface,
+    primaryBackground: 'transparent',
     secondaryBackground: theme.colors.highlightedSurface,
     filledBackground: theme.colors.defaultGlobalSurface,
-    outlinedBackground: 'transparent',
-    wrapperBorder: theme.colors.primaryOutline,
+    outlinedDefaultBackground: 'transparent',
     wrapperSelectedBorder: 'transparent',
-    selectedPrimaryText: theme.colors.defaultGlobalSurface
+    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
@@ -2815,7 +2817,7 @@ var getFABTheme = function getFABTheme(theme) {
     icon: theme.colors.onPrimary,
     actionItemBackground: theme.colors.overlayGlobalSurface,
     actionItemPressedBackground: theme.colors.overlayGlobalSurface,
-    backdropBackground: theme.colors.defaultSurface,
+    backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onPrimary,
     actionItemText: theme.colors.onPrimary
   };
@@ -6995,7 +6997,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 {
@@ -7014,7 +7016,7 @@ var Label = function Label(_ref) {
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
     nativeProps = _objectWithoutProperties(_ref, _excluded$B);
-  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);
@@ -7822,7 +7824,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 {
@@ -7881,7 +7883,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
@@ -7922,7 +7924,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
@@ -8844,7 +8846,7 @@ var StyledFooter = index$9(reactNative.View)(function (_ref4) {
     flexDirection: 'row'
   };
 });
-var StyledIconWrapper$4 = index$9(reactNative.View)(function (_ref5) {
+var StyledIconWrapper$3 = index$9(reactNative.View)(function (_ref5) {
   var theme = _ref5.theme;
   return {
     alignItems: 'center',
@@ -9362,7 +9364,7 @@ var Header = function Header(_ref) {
     style: {
       flex: 1
     }
-  }, content), showCloseButton ? /*#__PURE__*/React__namespace.default.createElement(StyledIconWrapper$4, null, /*#__PURE__*/React__namespace.default.createElement(CompoundButton.Icon, {
+  }, content), showCloseButton ? /*#__PURE__*/React__namespace.default.createElement(StyledIconWrapper$3, null, /*#__PURE__*/React__namespace.default.createElement(CompoundButton.Icon, {
     icon: "cancel",
     onPress: onRequestClose,
     intent: "text",
@@ -12768,26 +12770,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), {}, {
-            borderColor: theme.__hd__.chip.colors.wrapperSelectedBorder
-          });
+          return {
+            borderColor: themeSelected ? theme.__hd__.chip.colors.wrapperSelectedBorder : theme.__hd__.chip.colors.wrapperSelectedBorder
+          };
         }
     }
   };
@@ -12810,7 +12805,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':
@@ -12828,31 +12823,9 @@ 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$k = ["label", "variant", "selected", "icon", "onPress"];
 var Chip = function Chip(_ref) {
@@ -12864,30 +12837,23 @@ var Chip = function Chip(_ref) {
     icon = _ref.icon,
     onPress = _ref.onPress,
     otherProps = _objectWithoutProperties(_ref, _excluded$k);
-  var internalIcon = React__namespace.default.useMemo(function () {
-    if (icon && variant === 'filled') {
-      return icon;
-    }
-    if (selected) {
-      return 'checkmark';
-    }
-    return undefined;
-  }, [icon, selected, variant]);
   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), variant === 'outlined' && selected && /*#__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) {
@@ -15009,7 +14975,7 @@ var StyledBackdrop = index$9(AnimatedPressable)(function (_ref2) {
     right: 0,
     top: 0,
     bottom: 0,
-    opacity: 0.8,
+    opacity: 0.25,
     backgroundColor: theme.__hd__.fab.colors.backdropBackground
   };
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.67.0-alpha.2",
+  "version": "8.67.0-alpha.3",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,7 +22,7 @@
     "@emotion/native": "^11.9.3",
     "@emotion/primitives-core": "11.0.0",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.43.3-alpha.0",
+    "@hero-design/colors": "8.43.1",
     "date-fns": "^2.16.1",
     "hero-editor": "^1.9.21",
     "nanoid": "^4.0.2"

package/src/components/Chip/StyledChip.tsx

@@ -1,8 +1,5 @@
 import styled from '@emotion/native';
 import { TouchableOpacity } from 'react-native';
-import Box from '../Box';
-import Icon from '../Icon';
-import Typography from '../Typography';
 
 type StyledChipWrapperProps = {
   themeVariant?: 'outlined' | 'filled';
@@ -23,28 +20,22 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
     };
 
     const getBorderStyles = () => {
-      const commonStyle = {
-        borderWidth: theme.__hd__.chip.sizes.wrapperBorder,
-      };
-
-      if (themeSelected) {
-        return {
-          ...commonStyle,
-          borderColor: theme.__hd__.chip.colors.wrapperSelectedBorder,
-        };
-      }
-
       switch (themeVariant) {
         case 'outlined': {
           return {
-            ...commonStyle,
-            borderColor: theme.__hd__.chip.colors.wrapperBorder,
+            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 {
-            ...commonStyle,
-            borderColor: theme.__hd__.chip.colors.wrapperSelectedBorder,
+            borderColor: themeSelected
+              ? theme.__hd__.chip.colors.wrapperSelectedBorder
+              : theme.__hd__.chip.colors.wrapperSelectedBorder,
           };
         }
       }
@@ -67,7 +58,8 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
         switch (themeVariant) {
           case 'outlined': {
             return {
-              backgroundColor: theme.__hd__.chip.colors.outlinedBackground,
+              backgroundColor:
+                theme.__hd__.chip.colors.outlinedDefaultBackground,
             };
           }
           case 'filled':
@@ -86,7 +78,9 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
       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(),
@@ -94,28 +88,4 @@ const StyledChipWrapper = styled(TouchableOpacity)<StyledChipWrapperProps>(
   }
 );
 
-const StyledIconWrapper = styled(Box)(({ theme }) => ({
-  marginRight: theme.__hd__.chip.space.iconWrapperMarginRight,
-}));
-
-const StyledLabel = styled(Typography.Body)<{
-  themeSelected?: boolean;
-  themeVariant?: 'outlined' | 'filled';
-}>(({ themeSelected, themeVariant, theme }) => ({
-  color:
-    themeSelected && themeVariant === 'outlined'
-      ? theme.__hd__.chip.colors.selectedPrimaryText
-      : undefined,
-}));
-
-const StyledIcon = styled(Icon)<{
-  themeSelected?: boolean;
-  themeVariant?: 'outlined' | 'filled';
-}>(({ themeSelected, themeVariant, theme }) => ({
-  color:
-    themeSelected && themeVariant === 'outlined'
-      ? theme.__hd__.chip.colors.selectedPrimaryText
-      : undefined,
-}));
-
-export { StyledChipWrapper, StyledIcon, StyledIconWrapper, StyledLabel };
+export { StyledChipWrapper };