@hero-design/rn 8.36.2 → 8.36.3

package/.turbo/turbo-build.log

@@ -4,5 +4,5 @@ $ rollup -c
 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 '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-created lib/index.js, es/index.js in 26.5s
+created lib/index.js, es/index.js in 28s
 $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -1669,10 +1669,10 @@ var getShadows = function getShadows(systemPalette) {
         width: 0,
         height: 2
       },
-      shadowColor: systemPalette.secondaryOutline,
-      shadowOpacity: 1,
+      shadowColor: systemPalette.primaryOutline,
+      shadowOpacity: 0.12,
       shadowRadius: 4,
-      elevation: 10
+      elevation: 3
     }
   };
 };
@@ -2095,17 +2095,14 @@ var getCardCarouselTheme = function getCardCarouselTheme(theme) {
     contentContainerPaddingHorizontal: theme.space.large
   };
   var colors = {
-    shadow: theme.colors.primaryOutline,
     carouselItemBackground: theme.colors.defaultSurface
   };
   var shadows = {
-    offset: {
-      width: 0,
-      height: 2
-    },
-    opacity: 0.12,
-    radius: theme.radii.medium,
-    elevation: 4
+    color: theme.shadows["default"].shadowColor,
+    offset: theme.shadows["default"].shadowOffset,
+    opacity: theme.shadows["default"].shadowOpacity,
+    radius: theme.shadows["default"].shadowRadius,
+    elevation: theme.shadows["default"].elevation
   };
   var radii = {
     card: theme.radii.medium
@@ -2312,8 +2309,7 @@ var getFABTheme = function getFABTheme(theme) {
     actionItemPressedBackground: theme.colors.pressedSurface,
     backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onPrimary,
-    actionItemText: theme.colors.onPrimary,
-    shadow: theme.colors.primaryOutline
+    actionItemText: theme.colors.onPrimary
   };
   var sizes = {
     width: theme.sizes.xxxxxlarge,
@@ -2338,13 +2334,11 @@ var getFABTheme = function getFABTheme(theme) {
     icon: theme.lineHeights.large
   };
   var shadows = {
-    offset: {
-      width: 0,
-      height: 2
-    },
-    opacity: 0.12,
-    radius: theme.radii.medium,
-    elevation: 2
+    offset: theme.shadows["default"].shadowOffset,
+    opacity: theme.shadows["default"].shadowOpacity,
+    radius: theme.shadows["default"].shadowRadius,
+    elevation: theme.shadows["default"].elevation,
+    color: theme.shadows["default"].shadowColor
   };
   var space = {
     actionItemPadding: theme.space.smallMedium,
@@ -2429,20 +2423,23 @@ var getListTheme = function getListTheme(theme) {
   var radii = {
     item: theme.radii.medium,
     basicItem: theme.radii.base,
-    cardShadow: theme.radii.base,
     leadingStatus: theme.radii.rounded
   };
   var shadows = {
-    cardOffset: theme.shadows["default"].shadowOffset,
-    cardElevation: theme.shadows["default"].elevation
+    card: {
+      offset: theme.shadows["default"].shadowOffset,
+      elevation: theme.shadows["default"].elevation,
+      color: theme.shadows["default"].shadowColor,
+      radius: theme.shadows["default"].shadowRadius,
+      opacity: theme.shadows["default"].shadowOpacity
+    }
   };
   var widths = {
     leadingStatus: 8
   };
   var opacity = {
     disabled: 0.38,
-    enabled: 1,
-    cardShadow: theme.shadows["default"].shadowOpacity
+    enabled: 1
   };
   return {
     colors: colors,
@@ -3046,8 +3043,7 @@ var getToastTheme = function getToastTheme(theme) {
     info: theme.colors.info,
     notification: theme.colors.defaultGlobalSurface,
     snackbar: theme.colors.darkGlobalSurface,
-    divider: theme.colors.secondaryOutline,
-    shadow: theme.colors.primaryOutline
+    divider: theme.colors.secondaryOutline
   };
   var sizes = {
     height: theme.sizes.xxxlarge
@@ -3067,13 +3063,11 @@ var getToastTheme = function getToastTheme(theme) {
     base: theme.borderWidths.base
   };
   var shadows = {
-    offset: {
-      width: 0,
-      height: 2
-    },
-    opacity: 0.12,
-    radius: 4,
-    elevation: 4
+    offset: theme.shadows["default"].shadowOffset,
+    opacity: theme.shadows["default"].shadowOpacity,
+    radius: theme.shadows["default"].shadowRadius,
+    elevation: theme.shadows["default"].elevation,
+    color: theme.shadows["default"].shadowColor
   };
   return {
     colors: colors,
@@ -11705,7 +11699,7 @@ var StyledShadow = index$c(View)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     borderRadius: theme.__hd__.cardCarousel.radii.card,
-    shadowColor: theme.__hd__.cardCarousel.colors.shadow,
+    shadowColor: theme.__hd__.cardCarousel.shadows.color,
     shadowOffset: theme.__hd__.cardCarousel.shadows.offset,
     shadowRadius: theme.__hd__.cardCarousel.shadows.radius,
     shadowOpacity: theme.__hd__.cardCarousel.shadows.opacity,
@@ -12006,17 +12000,14 @@ var index$a = Object.assign(Carousel, {
 
 var StyledWrapper$7 = index$c(TouchableOpacity)(function (_ref) {
   var theme = _ref.theme,
-    themeWithBorder = _ref.themeWithBorder,
     themeState = _ref.themeState;
-  var borderStyle = {
+  return {
+    flexDirection: 'row',
     borderRadius: theme.__hd__.checkbox.radii.wrapper,
     borderWidth: theme.__hd__.checkbox.borderWidths.wrapper,
     padding: theme.__hd__.checkbox.space.wrapperPadding,
     borderColor: theme.__hd__.checkbox.colors.borders[themeState]
   };
-  return _objectSpread2({
-    flexDirection: 'row'
-  }, themeWithBorder && borderStyle);
 });
 var StyledDescription$1 = index$c(Typography.Body)(function (_ref2) {
   var theme = _ref2.theme;
@@ -12076,6 +12067,7 @@ var Checkbox = function Checkbox(_ref2) {
     testID = _ref2.testID,
     _ref2$readonly = _ref2.readonly,
     readonly = _ref2$readonly === void 0 ? false : _ref2$readonly;
+  useDeprecation("Checkbox's withBorder prop will be removed in the next major release, all checkboxes will have border by default. Please remove it.", withBorder === true);
   var themeState = getThemeState({
     disabled: disabled,
     readonly: readonly
@@ -12083,7 +12075,6 @@ var Checkbox = function Checkbox(_ref2) {
   return /*#__PURE__*/React.createElement(StyledWrapper$7, {
     onPress: onPress,
     disabled: disabled || readonly,
-    themeWithBorder: withBorder,
     themeState: themeState,
     style: style,
     testID: testID
@@ -13006,7 +12997,7 @@ var Drawer = function Drawer(_ref) {
     onDismiss = _ref.onDismiss,
     testID = _ref.testID;
   var animatedValue = useRef(new Animated.Value(visible ? 1 : 0)).current;
-  var _useState = useState(0),
+  var _useState = useState(Dimensions.get('window').height),
     _useState2 = _slicedToArray(_useState, 2),
     height = _useState2[0],
     setHeight = _useState2[1];
@@ -13345,7 +13336,7 @@ var StyledFAB$1 = index$c(TouchableHighlight)(function (_ref) {
     padding: theme.__hd__.fab.space.containerPadding,
     flexDirection: 'row',
     elevation: theme.__hd__.fab.shadows.elevation,
-    shadowColor: theme.__hd__.fab.colors.shadow,
+    shadowColor: theme.__hd__.fab.shadows.color,
     shadowOffset: theme.__hd__.fab.shadows.offset,
     shadowRadius: theme.__hd__.fab.shadows.radius,
     shadowOpacity: theme.__hd__.fab.shadows.opacity
@@ -13782,11 +13773,11 @@ var StyledListItemContainer$1 = index$c(TouchableHighlight)(function (_ref) {
     case 'card':
       return _objectSpread2(_objectSpread2({}, sharedStyles), {}, {
         alignItems: 'center',
-        shadowColor: theme.colors.secondaryOutline,
-        shadowRadius: theme.__hd__.list.radii.cardShadow,
-        shadowOffset: theme.__hd__.list.shadows.cardOffset,
-        shadowOpacity: theme.__hd__.list.opacity.cardShadow,
-        elevation: theme.__hd__.list.shadows.cardElevation
+        shadowColor: theme.__hd__.list.shadows.card.color,
+        shadowRadius: theme.__hd__.list.shadows.card.radius,
+        shadowOffset: theme.__hd__.list.shadows.card.offset,
+        shadowOpacity: theme.__hd__.list.shadows.card.opacity,
+        elevation: theme.__hd__.list.shadows.card.elevation
       });
     default:
       return sharedStyles;
@@ -16886,7 +16877,7 @@ var Container = index$c(Animated.View)(function (_ref2) {
     backgroundColor: theme.__hd__.toast.colors[themeIntent],
     minHeight: theme.__hd__.toast.sizes.height,
     flexDirection: 'row',
-    shadowColor: theme.__hd__.toast.colors.shadow,
+    shadowColor: theme.__hd__.toast.shadows.color,
     shadowOffset: theme.__hd__.toast.shadows.offset,
     shadowRadius: theme.__hd__.toast.shadows.radius,
     shadowOpacity: theme.__hd__.toast.shadows.opacity,

package/lib/index.js

@@ -1700,10 +1700,10 @@ var getShadows = function getShadows(systemPalette) {
         width: 0,
         height: 2
       },
-      shadowColor: systemPalette.secondaryOutline,
-      shadowOpacity: 1,
+      shadowColor: systemPalette.primaryOutline,
+      shadowOpacity: 0.12,
       shadowRadius: 4,
-      elevation: 10
+      elevation: 3
     }
   };
 };
@@ -2126,17 +2126,14 @@ var getCardCarouselTheme = function getCardCarouselTheme(theme) {
     contentContainerPaddingHorizontal: theme.space.large
   };
   var colors = {
-    shadow: theme.colors.primaryOutline,
     carouselItemBackground: theme.colors.defaultSurface
   };
   var shadows = {
-    offset: {
-      width: 0,
-      height: 2
-    },
-    opacity: 0.12,
-    radius: theme.radii.medium,
-    elevation: 4
+    color: theme.shadows["default"].shadowColor,
+    offset: theme.shadows["default"].shadowOffset,
+    opacity: theme.shadows["default"].shadowOpacity,
+    radius: theme.shadows["default"].shadowRadius,
+    elevation: theme.shadows["default"].elevation
   };
   var radii = {
     card: theme.radii.medium
@@ -2343,8 +2340,7 @@ var getFABTheme = function getFABTheme(theme) {
     actionItemPressedBackground: theme.colors.pressedSurface,
     backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onPrimary,
-    actionItemText: theme.colors.onPrimary,
-    shadow: theme.colors.primaryOutline
+    actionItemText: theme.colors.onPrimary
   };
   var sizes = {
     width: theme.sizes.xxxxxlarge,
@@ -2369,13 +2365,11 @@ var getFABTheme = function getFABTheme(theme) {
     icon: theme.lineHeights.large
   };
   var shadows = {
-    offset: {
-      width: 0,
-      height: 2
-    },
-    opacity: 0.12,
-    radius: theme.radii.medium,
-    elevation: 2
+    offset: theme.shadows["default"].shadowOffset,
+    opacity: theme.shadows["default"].shadowOpacity,
+    radius: theme.shadows["default"].shadowRadius,
+    elevation: theme.shadows["default"].elevation,
+    color: theme.shadows["default"].shadowColor
   };
   var space = {
     actionItemPadding: theme.space.smallMedium,
@@ -2460,20 +2454,23 @@ var getListTheme = function getListTheme(theme) {
   var radii = {
     item: theme.radii.medium,
     basicItem: theme.radii.base,
-    cardShadow: theme.radii.base,
     leadingStatus: theme.radii.rounded
   };
   var shadows = {
-    cardOffset: theme.shadows["default"].shadowOffset,
-    cardElevation: theme.shadows["default"].elevation
+    card: {
+      offset: theme.shadows["default"].shadowOffset,
+      elevation: theme.shadows["default"].elevation,
+      color: theme.shadows["default"].shadowColor,
+      radius: theme.shadows["default"].shadowRadius,
+      opacity: theme.shadows["default"].shadowOpacity
+    }
   };
   var widths = {
     leadingStatus: 8
   };
   var opacity = {
     disabled: 0.38,
-    enabled: 1,
-    cardShadow: theme.shadows["default"].shadowOpacity
+    enabled: 1
   };
   return {
     colors: colors,
@@ -3077,8 +3074,7 @@ var getToastTheme = function getToastTheme(theme) {
     info: theme.colors.info,
     notification: theme.colors.defaultGlobalSurface,
     snackbar: theme.colors.darkGlobalSurface,
-    divider: theme.colors.secondaryOutline,
-    shadow: theme.colors.primaryOutline
+    divider: theme.colors.secondaryOutline
   };
   var sizes = {
     height: theme.sizes.xxxlarge
@@ -3098,13 +3094,11 @@ var getToastTheme = function getToastTheme(theme) {
     base: theme.borderWidths.base
   };
   var shadows = {
-    offset: {
-      width: 0,
-      height: 2
-    },
-    opacity: 0.12,
-    radius: 4,
-    elevation: 4
+    offset: theme.shadows["default"].shadowOffset,
+    opacity: theme.shadows["default"].shadowOpacity,
+    radius: theme.shadows["default"].shadowRadius,
+    elevation: theme.shadows["default"].elevation,
+    color: theme.shadows["default"].shadowColor
   };
   return {
     colors: colors,
@@ -11736,7 +11730,7 @@ var StyledShadow = index$c(reactNative.View)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     borderRadius: theme.__hd__.cardCarousel.radii.card,
-    shadowColor: theme.__hd__.cardCarousel.colors.shadow,
+    shadowColor: theme.__hd__.cardCarousel.shadows.color,
     shadowOffset: theme.__hd__.cardCarousel.shadows.offset,
     shadowRadius: theme.__hd__.cardCarousel.shadows.radius,
     shadowOpacity: theme.__hd__.cardCarousel.shadows.opacity,
@@ -12037,17 +12031,14 @@ var index$a = Object.assign(Carousel, {
 
 var StyledWrapper$7 = index$c(reactNative.TouchableOpacity)(function (_ref) {
   var theme = _ref.theme,
-    themeWithBorder = _ref.themeWithBorder,
     themeState = _ref.themeState;
-  var borderStyle = {
+  return {
+    flexDirection: 'row',
     borderRadius: theme.__hd__.checkbox.radii.wrapper,
     borderWidth: theme.__hd__.checkbox.borderWidths.wrapper,
     padding: theme.__hd__.checkbox.space.wrapperPadding,
     borderColor: theme.__hd__.checkbox.colors.borders[themeState]
   };
-  return _objectSpread2({
-    flexDirection: 'row'
-  }, themeWithBorder && borderStyle);
 });
 var StyledDescription$1 = index$c(Typography.Body)(function (_ref2) {
   var theme = _ref2.theme;
@@ -12107,6 +12098,7 @@ var Checkbox = function Checkbox(_ref2) {
     testID = _ref2.testID,
     _ref2$readonly = _ref2.readonly,
     readonly = _ref2$readonly === void 0 ? false : _ref2$readonly;
+  useDeprecation("Checkbox's withBorder prop will be removed in the next major release, all checkboxes will have border by default. Please remove it.", withBorder === true);
   var themeState = getThemeState({
     disabled: disabled,
     readonly: readonly
@@ -12114,7 +12106,6 @@ var Checkbox = function Checkbox(_ref2) {
   return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$7, {
     onPress: onPress,
     disabled: disabled || readonly,
-    themeWithBorder: withBorder,
     themeState: themeState,
     style: style,
     testID: testID
@@ -13037,7 +13028,7 @@ var Drawer = function Drawer(_ref) {
     onDismiss = _ref.onDismiss,
     testID = _ref.testID;
   var animatedValue = React.useRef(new reactNative.Animated.Value(visible ? 1 : 0)).current;
-  var _useState = React.useState(0),
+  var _useState = React.useState(reactNative.Dimensions.get('window').height),
     _useState2 = _slicedToArray(_useState, 2),
     height = _useState2[0],
     setHeight = _useState2[1];
@@ -13376,7 +13367,7 @@ var StyledFAB$1 = index$c(reactNative.TouchableHighlight)(function (_ref) {
     padding: theme.__hd__.fab.space.containerPadding,
     flexDirection: 'row',
     elevation: theme.__hd__.fab.shadows.elevation,
-    shadowColor: theme.__hd__.fab.colors.shadow,
+    shadowColor: theme.__hd__.fab.shadows.color,
     shadowOffset: theme.__hd__.fab.shadows.offset,
     shadowRadius: theme.__hd__.fab.shadows.radius,
     shadowOpacity: theme.__hd__.fab.shadows.opacity
@@ -13813,11 +13804,11 @@ var StyledListItemContainer$1 = index$c(reactNative.TouchableHighlight)(function
     case 'card':
       return _objectSpread2(_objectSpread2({}, sharedStyles), {}, {
         alignItems: 'center',
-        shadowColor: theme.colors.secondaryOutline,
-        shadowRadius: theme.__hd__.list.radii.cardShadow,
-        shadowOffset: theme.__hd__.list.shadows.cardOffset,
-        shadowOpacity: theme.__hd__.list.opacity.cardShadow,
-        elevation: theme.__hd__.list.shadows.cardElevation
+        shadowColor: theme.__hd__.list.shadows.card.color,
+        shadowRadius: theme.__hd__.list.shadows.card.radius,
+        shadowOffset: theme.__hd__.list.shadows.card.offset,
+        shadowOpacity: theme.__hd__.list.shadows.card.opacity,
+        elevation: theme.__hd__.list.shadows.card.elevation
       });
     default:
       return sharedStyles;
@@ -16917,7 +16908,7 @@ var Container = index$c(reactNative.Animated.View)(function (_ref2) {
     backgroundColor: theme.__hd__.toast.colors[themeIntent],
     minHeight: theme.__hd__.toast.sizes.height,
     flexDirection: 'row',
-    shadowColor: theme.__hd__.toast.colors.shadow,
+    shadowColor: theme.__hd__.toast.shadows.color,
     shadowOffset: theme.__hd__.toast.shadows.offset,
     shadowRadius: theme.__hd__.toast.shadows.radius,
     shadowOpacity: theme.__hd__.toast.shadows.opacity,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.36.2",
+  "version": "8.36.3",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,14 +21,14 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.36.2",
+    "@hero-design/colors": "8.36.3",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21",
     "nanoid": "^4.0.2"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.36.2",
+    "@hero-design/react-native-month-year-picker": "^8.36.3",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "react": "18.0.0",
@@ -48,8 +48,8 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.36.2",
-    "@hero-design/react-native-month-year-picker": "^8.36.2",
+    "@hero-design/eslint-plugin": "8.36.3",
+    "@hero-design/react-native-month-year-picker": "^8.36.3",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -65,10 +65,10 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.36.2",
+    "eslint-config-hd": "8.36.3",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.36.2",
+    "prettier-config-hd": "8.36.3",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.5.0",

package/src/components/Carousel/StyledCardCarousel.tsx

@@ -19,7 +19,7 @@ const StyledCard = styled(Card)<CardProps>(({ theme }) => ({
 }));
 const StyledShadow = styled(View)<ViewProps>(({ theme }) => ({
   borderRadius: theme.__hd__.cardCarousel.radii.card,
-  shadowColor: theme.__hd__.cardCarousel.colors.shadow,
+  shadowColor: theme.__hd__.cardCarousel.shadows.color,
   shadowOffset: theme.__hd__.cardCarousel.shadows.offset,
   shadowRadius: theme.__hd__.cardCarousel.shadows.radius,
   shadowOpacity: theme.__hd__.cardCarousel.shadows.opacity,

package/src/components/Carousel/__tests__/__snapshots__/CardCarousel.spec.tsx.snap

@@ -104,7 +104,7 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
               Array [
                 Object {
                   "borderRadius": 8,
-                  "elevation": 4,
+                  "elevation": 3,
                   "flex": 1,
                   "shadowColor": "#001f23",
                   "shadowOffset": Object {
@@ -112,7 +112,7 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
                     "width": 0,
                   },
                   "shadowOpacity": 0.12,
-                  "shadowRadius": 8,
+                  "shadowRadius": 4,
                 },
                 undefined,
               ]
@@ -187,7 +187,7 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
               Array [
                 Object {
                   "borderRadius": 8,
-                  "elevation": 4,
+                  "elevation": 3,
                   "flex": 1,
                   "shadowColor": "#001f23",
                   "shadowOffset": Object {
@@ -195,7 +195,7 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
                     "width": 0,
                   },
                   "shadowOpacity": 0.12,
-                  "shadowRadius": 8,
+                  "shadowRadius": 4,
                 },
                 undefined,
               ]
@@ -399,7 +399,7 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
               Array [
                 Object {
                   "borderRadius": 8,
-                  "elevation": 4,
+                  "elevation": 3,
                   "flex": 1,
                   "shadowColor": "#001f23",
                   "shadowOffset": Object {
@@ -407,7 +407,7 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
                     "width": 0,
                   },
                   "shadowOpacity": 0.12,
-                  "shadowRadius": 8,
+                  "shadowRadius": 4,
                 },
                 undefined,
               ]
@@ -482,7 +482,7 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
               Array [
                 Object {
                   "borderRadius": 8,
-                  "elevation": 4,
+                  "elevation": 3,
                   "flex": 1,
                   "shadowColor": "#001f23",
                   "shadowOffset": Object {
@@ -490,7 +490,7 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
                     "width": 0,
                   },
                   "shadowOpacity": 0.12,
-                  "shadowRadius": 8,
+                  "shadowRadius": 4,
                 },
                 undefined,
               ]

package/src/components/Checkbox/StyledCheckbox.tsx

@@ -6,21 +6,14 @@ import Typography from '../Typography';
 type CheckboxThemeState = 'default' | 'disabled' | 'readonly';
 
 export const StyledWrapper = styled(TouchableOpacity)<{
-  themeWithBorder: boolean;
   themeState: CheckboxThemeState;
-}>(({ theme, themeWithBorder, themeState }) => {
-  const borderStyle = {
-    borderRadius: theme.__hd__.checkbox.radii.wrapper,
-    borderWidth: theme.__hd__.checkbox.borderWidths.wrapper,
-    padding: theme.__hd__.checkbox.space.wrapperPadding,
-    borderColor: theme.__hd__.checkbox.colors.borders[themeState],
-  };
-
-  return {
-    flexDirection: 'row',
-    ...(themeWithBorder && borderStyle),
-  };
-});
+}>(({ theme, themeState }) => ({
+  flexDirection: 'row',
+  borderRadius: theme.__hd__.checkbox.radii.wrapper,
+  borderWidth: theme.__hd__.checkbox.borderWidths.wrapper,
+  padding: theme.__hd__.checkbox.space.wrapperPadding,
+  borderColor: theme.__hd__.checkbox.colors.borders[themeState],
+}));
 
 export const StyledDescription = styled(Typography.Body)(({ theme }) => ({
   paddingRight: theme.__hd__.checkbox.space.iconDescriptionPadding,

package/src/components/Checkbox/__tests__/StyledCheckbox.spec.tsx

@@ -5,21 +5,17 @@ import { getThemeState } from '..';
 
 describe('StyledWrapper', () => {
   it.each`
-    withBorder | disabled | readonly
-    ${false}   | ${false} | ${false}
-    ${true}    | ${false} | ${false}
-    ${false}   | ${true}  | ${false}
-    ${true}    | ${true}  | ${false}
-    ${false}   | ${false} | ${true}
-    ${true}    | ${false} | ${true}
-    ${false}   | ${true}  | ${true}
-    ${true}    | ${true}  | ${true}
+    disabled | readonly
+    ${false} | ${false}
+    ${true}  | ${false}
+    ${false} | ${true}
+    ${true}  | ${true}
   `(
-    'renders correctly when disabled is $disabled, withBorder is $withBorder',
-    ({ disabled, withBorder, readonly }) => {
+    'renders correctly when disabled is $disabled, readonly is $readonly',
+    ({ disabled, readonly }) => {
       const themeState = getThemeState({ disabled, readonly });
       const { toJSON } = renderWithTheme(
-        <StyledWrapper themeState={themeState} themeWithBorder={withBorder} />
+        <StyledWrapper themeState={themeState} />
       );
 
       expect(toJSON()).toMatchSnapshot();