@hero-design/rn 8.36.2 → 8.37.0

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
@@ -2338,13 +2335,11 @@ var getFABTheme = function getFABTheme(theme) {
     buttonPressedBackground: theme.colors.pressedSurface,
     buttonActiveBackground: theme.colors.pressedSurface,
     icon: theme.colors.onPrimary,
-    headerText: theme.colors.onDefaultGlobalSurface,
     actionItemBackground: theme.colors.secondary,
     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,
@@ -2353,29 +2348,24 @@ var getFABTheme = function getFABTheme(theme) {
     iconContainerHeight: theme.sizes.large
   };
   var fonts = {
-    header: theme.fonts.neutral.semiBold,
     actionItemText: theme.fonts.neutral.regular,
     title: theme.fonts.neutral.semiBold
   };
   var fontSizes = {
-    header: theme.fontSizes.xxxlarge,
     actionItemText: theme.fontSizes.large,
     title: theme.fontSizes.large
   };
   var lineHeights = {
-    header: theme.lineHeights.xxxlarge,
     actionItemText: theme.lineHeights.medium,
     title: theme.lineHeights.large,
     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,
@@ -2384,8 +2374,6 @@ var getFABTheme = function getFABTheme(theme) {
     actionItemTextPaddingLeft: theme.space.xsmall,
     buttonMarginTop: theme.space.large,
     buttonMarginRight: theme.space.large,
-    headerTextMarginRight: theme.space.large,
-    headerTextMarginBottom: theme.space.large,
     containerPadding: theme.space.large - theme.space.xsmall,
     titleMarginHorizontal: theme.space.small
   };
@@ -2460,20 +2448,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 +3068,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 +3088,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,
@@ -7881,7 +7869,7 @@ var Divider = function Divider(_ref) {
   }));
 };
 
-var AnimatedPressable$1 = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
+var AnimatedPressable$2 = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
 var AnimatedSafeAreaView = reactNative.Animated.createAnimatedComponent(reactNative.SafeAreaView);
 var StyledWrapper$9 = index$c(reactNative.View)(_objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
   flexDirection: 'column-reverse'
@@ -7907,7 +7895,7 @@ var StyledBottomSheet = index$c(AnimatedSafeAreaView)(function (_ref) {
     maxHeight: '94%'
   };
 });
-var StyledBackdrop$2 = index$c(AnimatedPressable$1)(function (_ref2) {
+var StyledBackdrop$2 = index$c(AnimatedPressable$2)(function (_ref2) {
   var theme = _ref2.theme;
   return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.bottomSheet.colors.backdrop,
@@ -11736,7 +11724,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 +12025,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 +12092,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 +12100,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
@@ -12801,7 +12786,7 @@ var DatePicker = function DatePicker(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(DatePickerAndroid, props);
 };
 
-var AnimatedPressable = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
+var AnimatedPressable$1 = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
 var StyledContainer$3 = index$c(reactNative.View)(function (_ref) {
   var theme = _ref.theme,
     enableShadow = _ref.enableShadow;
@@ -12829,7 +12814,7 @@ var StyledDragableContainer = index$c(reactNative.View)(function (_ref2) {
     flexDirection: 'column-reverse'
   });
 });
-var StyledBackdrop$1 = index$c(AnimatedPressable)(function (_ref3) {
+var StyledBackdrop$1 = index$c(AnimatedPressable$1)(function (_ref3) {
   var theme = _ref3.theme;
   return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.drawer.colors.backdrop
@@ -13037,7 +13022,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 +13361,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
@@ -13655,7 +13640,8 @@ var StyledFAB = index$c(FAB)(function (_ref) {
     alignSelf: 'flex-end'
   };
 });
-var StyledBackdrop = index$c(reactNative.Animated.View)(function (_ref2) {
+var AnimatedPressable = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
+var StyledBackdrop = index$c(AnimatedPressable)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     position: 'absolute',
@@ -13667,15 +13653,6 @@ var StyledBackdrop = index$c(reactNative.Animated.View)(function (_ref2) {
     backgroundColor: theme.__hd__.fab.colors.backdropBackground
   };
 });
-var StyledHeaderText = index$c(Typography.Title)(function (_ref3) {
-  var theme = _ref3.theme;
-  return {
-    color: theme.__hd__.fab.colors.headerText,
-    marginRight: theme.__hd__.fab.space.headerTextMarginRight,
-    marginBottom: theme.__hd__.fab.space.headerTextMarginBottom,
-    textAlign: 'right'
-  };
-});
 
 var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var headerTitle = _ref.headerTitle,
@@ -13685,15 +13662,12 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     items = _ref.items,
     testID = _ref.testID,
     fabTitle = _ref.fabTitle,
+    onBackdropPress = _ref.onBackdropPress,
     _ref$fabIcon = _ref.fabIcon,
     fabIcon = _ref$fabIcon === void 0 ? 'add' : _ref$fabIcon;
+  useDeprecation("FAB.ActionGroup's headerTitle prop will be removed in the next major release. Please remove it.", headerTitle !== undefined);
   var fabRef = React.useRef(null);
   var tranlateXAnimation = React.useRef(new reactNative.Animated.Value(active ? 1 : 0));
-  var titleTranslateYValue = React__default["default"].useRef(new reactNative.Animated.Value(0));
-  var titleTranslateY = titleTranslateYValue.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: [50, 0]
-  });
   React__default["default"].useImperativeHandle(ref, function () {
     return {
       showFAB: function showFAB() {
@@ -13711,13 +13685,10 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     };
   }, [fabRef]);
   React__default["default"].useEffect(function () {
-    reactNative.Animated.parallel([reactNative.Animated.spring(tranlateXAnimation.current, {
-      toValue: active ? 1 : 0,
-      useNativeDriver: reactNative.Platform.OS !== 'web'
-    }), reactNative.Animated.spring(titleTranslateYValue.current, {
+    reactNative.Animated.spring(tranlateXAnimation.current, {
       toValue: active ? 1 : 0,
       useNativeDriver: reactNative.Platform.OS !== 'web'
-    })]).start();
+    }).start();
   }, [active]);
   var interpolatedActionGroupOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
@@ -13753,22 +13724,15 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     testID: testID,
     style: [style]
   }, /*#__PURE__*/React__default["default"].createElement(StyledBackdrop, {
-    testID: "back-drop"
+    testID: "back-drop",
+    onPress: onBackdropPress
   }), /*#__PURE__*/React__default["default"].createElement(StyledActionGroupContainer, {
     testID: "action-group",
+    pointerEvents: "box-none",
     style: {
       opacity: interpolatedActionGroupOpacityAnimation
     }
-  }, !!headerTitle && /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, {
-    style: {
-      transform: [{
-        translateY: titleTranslateY
-      }]
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(StyledHeaderText, {
-    testID: "header-text",
-    level: "h4"
-  }, headerTitle)), /*#__PURE__*/React__default["default"].createElement(Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(Box, {
     style: [style, {
       paddingBottom: 0
     }]
@@ -13813,11 +13777,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 +16881,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.37.0",
   "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.37.0",
     "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.37.0",
     "@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.37.0",
+    "@hero-design/react-native-month-year-picker": "^8.37.0",
     "@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.37.0",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.36.2",
+    "prettier-config-hd": "8.37.0",
     "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();

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

@@ -68,49 +68,7 @@ exports[`StyledCheckbox renders correctly when disabled is true and readonly is
 />
 `;
 
-exports[`StyledWrapper renders correctly when disabled is false, withBorder is false 1`] = `
-<View
-  accessible={true}
-  collapsable={false}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "flexDirection": "row",
-      "opacity": 1,
-    }
-  }
-/>
-`;
-
-exports[`StyledWrapper renders correctly when disabled is false, withBorder is false 2`] = `
-<View
-  accessible={true}
-  collapsable={false}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "flexDirection": "row",
-      "opacity": 1,
-    }
-  }
-/>
-`;
-
-exports[`StyledWrapper renders correctly when disabled is false, withBorder is true 1`] = `
+exports[`StyledWrapper renders correctly when disabled is false, readonly is false 1`] = `
 <View
   accessible={true}
   collapsable={false}
@@ -135,7 +93,7 @@ exports[`StyledWrapper renders correctly when disabled is false, withBorder is t
 />
 `;
 
-exports[`StyledWrapper renders correctly when disabled is false, withBorder is true 2`] = `
+exports[`StyledWrapper renders correctly when disabled is false, readonly is true 1`] = `
 <View
   accessible={true}
   collapsable={false}
@@ -160,49 +118,7 @@ exports[`StyledWrapper renders correctly when disabled is false, withBorder is t
 />
 `;
 
-exports[`StyledWrapper renders correctly when disabled is true, withBorder is false 1`] = `
-<View
-  accessible={true}
-  collapsable={false}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "flexDirection": "row",
-      "opacity": 1,
-    }
-  }
-/>
-`;
-
-exports[`StyledWrapper renders correctly when disabled is true, withBorder is false 2`] = `
-<View
-  accessible={true}
-  collapsable={false}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
-  style={
-    Object {
-      "flexDirection": "row",
-      "opacity": 1,
-    }
-  }
-/>
-`;
-
-exports[`StyledWrapper renders correctly when disabled is true, withBorder is true 1`] = `
+exports[`StyledWrapper renders correctly when disabled is true, readonly is false 1`] = `
 <View
   accessible={true}
   collapsable={false}
@@ -227,7 +143,7 @@ exports[`StyledWrapper renders correctly when disabled is true, withBorder is tr
 />
 `;
 
-exports[`StyledWrapper renders correctly when disabled is true, withBorder is true 2`] = `
+exports[`StyledWrapper renders correctly when disabled is true, readonly is true 1`] = `
 <View
   accessible={true}
   collapsable={false}