@hero-design/rn 8.36.0-alpha.0 → 8.36.0

package/.turbo/turbo-build.log

@@ -3,6 +3,6 @@ $ 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 '/Volumes/Data/Projects/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 35.5s
+(!) 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 32.5s
 $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/.turbo/turbo-publish:npm.log

@@ -1,9 +0,0 @@
-@hero-design/rn:publish:npm: cache hit, replaying output 507c34f3e0a508f6
-@hero-design/rn:publish:npm: $ yarn publish --access public
-@hero-design/rn:publish:npm: [1/4] Bumping version...
-@hero-design/rn:publish:npm: info Current version: 8.12.0-rc.0
-@hero-design/rn:publish:npm: [2/4] Logging in...
-@hero-design/rn:publish:npm: [3/4] Publishing...
-@hero-design/rn:publish:npm: success Published.
-@hero-design/rn:publish:npm: [4/4] Revoking token...
-@hero-design/rn:publish:npm: info Not revoking login token, specified via config file.

package/es/index.js

@@ -2103,8 +2103,11 @@ var getCardCarouselTheme = function getCardCarouselTheme(theme) {
 
 var getCheckboxTheme = function getCheckboxTheme(theme) {
   var colors = {
-    "default": theme.colors.primaryOutline,
-    disabledBorder: theme.colors.disabledOutline
+    borders: {
+      "default": theme.colors.primaryOutline,
+      disabled: theme.colors.disabledOutline,
+      readonly: theme.colors.inactiveOutline
+    }
   };
   var space = {
     iconTop: 0,
@@ -11990,12 +11993,12 @@ var index$a = Object.assign(Carousel, {
 var StyledWrapper$7 = index$c(TouchableOpacity)(function (_ref) {
   var theme = _ref.theme,
     themeWithBorder = _ref.themeWithBorder,
-    themeDisabled = _ref.themeDisabled;
+    themeState = _ref.themeState;
   var borderStyle = {
     borderRadius: theme.__hd__.checkbox.radii.wrapper,
     borderWidth: theme.__hd__.checkbox.borderWidths.wrapper,
     padding: theme.__hd__.checkbox.space.wrapperPadding,
-    borderColor: themeDisabled ? theme.__hd__.checkbox.colors.disabledBorder : theme.__hd__.checkbox.colors["default"]
+    borderColor: theme.__hd__.checkbox.colors.borders[themeState]
   };
   return _objectSpread2({
     flexDirection: 'row'
@@ -12018,37 +12021,56 @@ var StyledCheckboxContainer = index$c(View)(function (_ref3) {
 });
 var StyledCheckbox = index$c(View)(function (_ref4) {
   var theme = _ref4.theme,
-    themeDisabled = _ref4.themeDisabled;
+    themeState = _ref4.themeState;
   return {
     flex: 1,
     borderRadius: theme.__hd__.checkbox.radii.icon,
     borderWidth: theme.__hd__.checkbox.borderWidths.icon,
-    borderColor: themeDisabled ? theme.__hd__.checkbox.colors.disabledBorder : theme.__hd__.checkbox.colors["default"]
+    borderColor: theme.__hd__.checkbox.colors.borders[themeState]
   };
 });
 var StyledCheckMark = index$c(Icon)(function (_ref5) {
-  var theme = _ref5.theme;
+  var theme = _ref5.theme,
+    themeState = _ref5.themeState;
   return {
     position: 'absolute',
-    top: theme.__hd__.checkbox.space.iconTop
+    top: theme.__hd__.checkbox.space.iconTop,
+    color: theme.__hd__.checkbox.colors.borders[themeState]
   };
 });
 
-var Checkbox = function Checkbox(_ref) {
-  var checked = _ref.checked,
-    description = _ref.description,
-    _ref$withBorder = _ref.withBorder,
-    withBorder = _ref$withBorder === void 0 ? false : _ref$withBorder,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    onPress = _ref.onPress,
-    style = _ref.style,
-    testID = _ref.testID;
+var getThemeState = function getThemeState(_ref) {
+  var disabled = _ref.disabled,
+    readonly = _ref.readonly;
+  if (disabled) {
+    return 'disabled';
+  }
+  if (readonly) {
+    return 'readonly';
+  }
+  return 'default';
+};
+var Checkbox = function Checkbox(_ref2) {
+  var checked = _ref2.checked,
+    description = _ref2.description,
+    _ref2$withBorder = _ref2.withBorder,
+    withBorder = _ref2$withBorder === void 0 ? false : _ref2$withBorder,
+    _ref2$disabled = _ref2.disabled,
+    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+    onPress = _ref2.onPress,
+    style = _ref2.style,
+    testID = _ref2.testID,
+    _ref2$readonly = _ref2.readonly,
+    readonly = _ref2$readonly === void 0 ? false : _ref2$readonly;
+  var themeState = getThemeState({
+    disabled: disabled,
+    readonly: readonly
+  });
   return /*#__PURE__*/React.createElement(StyledWrapper$7, {
     onPress: onPress,
-    disabled: disabled,
-    themeDisabled: disabled,
+    disabled: disabled || readonly,
     themeWithBorder: withBorder,
+    themeState: themeState,
     style: style,
     testID: testID
   }, !!description && /*#__PURE__*/React.createElement(StyledDescription$1, {
@@ -12056,10 +12078,10 @@ var Checkbox = function Checkbox(_ref) {
     variant: "small"
   }, description), /*#__PURE__*/React.createElement(StyledCheckboxContainer, null, checked && /*#__PURE__*/React.createElement(StyledCheckMark, {
     icon: "box-check",
-    intent: disabled ? 'disabled-text' : 'text',
-    testID: "check-mark"
+    testID: "check-mark",
+    themeState: themeState
   }), /*#__PURE__*/React.createElement(StyledCheckbox, {
-    themeDisabled: disabled
+    themeState: themeState
   })));
 };
 
@@ -13596,6 +13618,7 @@ var StyledBackdrop = index$c(Animated.View)(function (_ref2) {
     right: 0,
     top: 0,
     bottom: 0,
+    opacity: 0.25,
     backgroundColor: theme.__hd__.fab.colors.backdropBackground
   };
 });
@@ -13651,10 +13674,6 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
       useNativeDriver: Platform.OS !== 'web'
     })]).start();
   }, [active]);
-  var interpolatedBackdropOpacityAnimation = tranlateXAnimation.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 0.25]
-  });
   var interpolatedActionGroupOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
     outputRange: [0, 1]
@@ -13667,21 +13686,30 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
     testID: testID,
     pointerEvents: "box-none",
     style: style
-  }, /*#__PURE__*/React.createElement(Modal$1, {
+  }, /*#__PURE__*/React.createElement(Animated.View, {
+    style: {
+      opacity: interpolatedFABOpacityAnimation
+    }
+  }, /*#__PURE__*/React.createElement(StyledFAB, {
+    key: "fab",
+    testID: "fab",
+    icon: fabIcon,
+    onPress: onPress,
+    animated: true,
+    active: active,
+    title: fabTitle,
+    ref: fabRef
+  })), /*#__PURE__*/React.createElement(Modal$1, {
     visible: active,
     animationType: "fade",
-    transparent: true
+    transparent: true,
+    statusBarTranslucent: true
   }, /*#__PURE__*/React.createElement(StyledContainerInModal, {
     testID: testID,
     style: [style]
   }, /*#__PURE__*/React.createElement(StyledBackdrop, {
-    pointerEvents: active ? 'auto' : 'box-none',
-    testID: "back-drop",
-    style: {
-      opacity: interpolatedBackdropOpacityAnimation
-    }
+    testID: "back-drop"
   }), /*#__PURE__*/React.createElement(StyledActionGroupContainer, {
-    pointerEvents: active ? 'auto' : 'none',
     testID: "action-group",
     style: {
       opacity: interpolatedActionGroupOpacityAnimation
@@ -13706,11 +13734,7 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
       index: active ? index : items.length - index,
       active: active
     }));
-  }))), /*#__PURE__*/React.createElement(Animated.View, {
-    style: {
-      opacity: interpolatedActionGroupOpacityAnimation
-    }
-  }, /*#__PURE__*/React.createElement(StyledFAB, {
+  }))), /*#__PURE__*/React.createElement(StyledFAB, {
     key: "fab-in-portal",
     testID: "fab-in-portal",
     icon: fabIcon,
@@ -13718,20 +13742,7 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
     animated: true,
     active: active,
     title: fabTitle
-  })))), /*#__PURE__*/React.createElement(Animated.View, {
-    style: {
-      opacity: interpolatedFABOpacityAnimation
-    }
-  }, /*#__PURE__*/React.createElement(StyledFAB, {
-    key: "fab",
-    testID: "fab",
-    icon: fabIcon,
-    onPress: onPress,
-    animated: true,
-    active: active,
-    title: fabTitle,
-    ref: fabRef
-  })));
+  }))));
 });
 ActionGroup.displayName = 'FAB.ActionGroup';
 

package/lib/index.js

@@ -2134,8 +2134,11 @@ var getCardCarouselTheme = function getCardCarouselTheme(theme) {
 
 var getCheckboxTheme = function getCheckboxTheme(theme) {
   var colors = {
-    "default": theme.colors.primaryOutline,
-    disabledBorder: theme.colors.disabledOutline
+    borders: {
+      "default": theme.colors.primaryOutline,
+      disabled: theme.colors.disabledOutline,
+      readonly: theme.colors.inactiveOutline
+    }
   };
   var space = {
     iconTop: 0,
@@ -12021,12 +12024,12 @@ var index$a = Object.assign(Carousel, {
 var StyledWrapper$7 = index$c(reactNative.TouchableOpacity)(function (_ref) {
   var theme = _ref.theme,
     themeWithBorder = _ref.themeWithBorder,
-    themeDisabled = _ref.themeDisabled;
+    themeState = _ref.themeState;
   var borderStyle = {
     borderRadius: theme.__hd__.checkbox.radii.wrapper,
     borderWidth: theme.__hd__.checkbox.borderWidths.wrapper,
     padding: theme.__hd__.checkbox.space.wrapperPadding,
-    borderColor: themeDisabled ? theme.__hd__.checkbox.colors.disabledBorder : theme.__hd__.checkbox.colors["default"]
+    borderColor: theme.__hd__.checkbox.colors.borders[themeState]
   };
   return _objectSpread2({
     flexDirection: 'row'
@@ -12049,37 +12052,56 @@ var StyledCheckboxContainer = index$c(reactNative.View)(function (_ref3) {
 });
 var StyledCheckbox = index$c(reactNative.View)(function (_ref4) {
   var theme = _ref4.theme,
-    themeDisabled = _ref4.themeDisabled;
+    themeState = _ref4.themeState;
   return {
     flex: 1,
     borderRadius: theme.__hd__.checkbox.radii.icon,
     borderWidth: theme.__hd__.checkbox.borderWidths.icon,
-    borderColor: themeDisabled ? theme.__hd__.checkbox.colors.disabledBorder : theme.__hd__.checkbox.colors["default"]
+    borderColor: theme.__hd__.checkbox.colors.borders[themeState]
   };
 });
 var StyledCheckMark = index$c(Icon)(function (_ref5) {
-  var theme = _ref5.theme;
+  var theme = _ref5.theme,
+    themeState = _ref5.themeState;
   return {
     position: 'absolute',
-    top: theme.__hd__.checkbox.space.iconTop
+    top: theme.__hd__.checkbox.space.iconTop,
+    color: theme.__hd__.checkbox.colors.borders[themeState]
   };
 });
 
-var Checkbox = function Checkbox(_ref) {
-  var checked = _ref.checked,
-    description = _ref.description,
-    _ref$withBorder = _ref.withBorder,
-    withBorder = _ref$withBorder === void 0 ? false : _ref$withBorder,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    onPress = _ref.onPress,
-    style = _ref.style,
-    testID = _ref.testID;
+var getThemeState = function getThemeState(_ref) {
+  var disabled = _ref.disabled,
+    readonly = _ref.readonly;
+  if (disabled) {
+    return 'disabled';
+  }
+  if (readonly) {
+    return 'readonly';
+  }
+  return 'default';
+};
+var Checkbox = function Checkbox(_ref2) {
+  var checked = _ref2.checked,
+    description = _ref2.description,
+    _ref2$withBorder = _ref2.withBorder,
+    withBorder = _ref2$withBorder === void 0 ? false : _ref2$withBorder,
+    _ref2$disabled = _ref2.disabled,
+    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+    onPress = _ref2.onPress,
+    style = _ref2.style,
+    testID = _ref2.testID,
+    _ref2$readonly = _ref2.readonly,
+    readonly = _ref2$readonly === void 0 ? false : _ref2$readonly;
+  var themeState = getThemeState({
+    disabled: disabled,
+    readonly: readonly
+  });
   return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$7, {
     onPress: onPress,
-    disabled: disabled,
-    themeDisabled: disabled,
+    disabled: disabled || readonly,
     themeWithBorder: withBorder,
+    themeState: themeState,
     style: style,
     testID: testID
   }, !!description && /*#__PURE__*/React__default["default"].createElement(StyledDescription$1, {
@@ -12087,10 +12109,10 @@ var Checkbox = function Checkbox(_ref) {
     variant: "small"
   }, description), /*#__PURE__*/React__default["default"].createElement(StyledCheckboxContainer, null, checked && /*#__PURE__*/React__default["default"].createElement(StyledCheckMark, {
     icon: "box-check",
-    intent: disabled ? 'disabled-text' : 'text',
-    testID: "check-mark"
+    testID: "check-mark",
+    themeState: themeState
   }), /*#__PURE__*/React__default["default"].createElement(StyledCheckbox, {
-    themeDisabled: disabled
+    themeState: themeState
   })));
 };
 
@@ -13627,6 +13649,7 @@ var StyledBackdrop = index$c(reactNative.Animated.View)(function (_ref2) {
     right: 0,
     top: 0,
     bottom: 0,
+    opacity: 0.25,
     backgroundColor: theme.__hd__.fab.colors.backdropBackground
   };
 });
@@ -13682,10 +13705,6 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       useNativeDriver: reactNative.Platform.OS !== 'web'
     })]).start();
   }, [active]);
-  var interpolatedBackdropOpacityAnimation = tranlateXAnimation.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 0.25]
-  });
   var interpolatedActionGroupOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
     outputRange: [0, 1]
@@ -13698,21 +13717,30 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     testID: testID,
     pointerEvents: "box-none",
     style: style
-  }, /*#__PURE__*/React__default["default"].createElement(reactNative.Modal, {
+  }, /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, {
+    style: {
+      opacity: interpolatedFABOpacityAnimation
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
+    key: "fab",
+    testID: "fab",
+    icon: fabIcon,
+    onPress: onPress,
+    animated: true,
+    active: active,
+    title: fabTitle,
+    ref: fabRef
+  })), /*#__PURE__*/React__default["default"].createElement(reactNative.Modal, {
     visible: active,
     animationType: "fade",
-    transparent: true
+    transparent: true,
+    statusBarTranslucent: true
   }, /*#__PURE__*/React__default["default"].createElement(StyledContainerInModal, {
     testID: testID,
     style: [style]
   }, /*#__PURE__*/React__default["default"].createElement(StyledBackdrop, {
-    pointerEvents: active ? 'auto' : 'box-none',
-    testID: "back-drop",
-    style: {
-      opacity: interpolatedBackdropOpacityAnimation
-    }
+    testID: "back-drop"
   }), /*#__PURE__*/React__default["default"].createElement(StyledActionGroupContainer, {
-    pointerEvents: active ? 'auto' : 'none',
     testID: "action-group",
     style: {
       opacity: interpolatedActionGroupOpacityAnimation
@@ -13737,11 +13765,7 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       index: active ? index : items.length - index,
       active: active
     }));
-  }))), /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, {
-    style: {
-      opacity: interpolatedActionGroupOpacityAnimation
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
+  }))), /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
     key: "fab-in-portal",
     testID: "fab-in-portal",
     icon: fabIcon,
@@ -13749,20 +13773,7 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     animated: true,
     active: active,
     title: fabTitle
-  })))), /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, {
-    style: {
-      opacity: interpolatedFABOpacityAnimation
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
-    key: "fab",
-    testID: "fab",
-    icon: fabIcon,
-    onPress: onPress,
-    animated: true,
-    active: active,
-    title: fabTitle,
-    ref: fabRef
-  })));
+  }))));
 });
 ActionGroup.displayName = 'FAB.ActionGroup';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.36.0-alpha.0",
+  "version": "8.36.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.35.0",
+    "@hero-design/colors": "8.36.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.35.0",
+    "@hero-design/react-native-month-year-picker": "^8.36.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.35.0",
-    "@hero-design/react-native-month-year-picker": "^8.35.0",
+    "@hero-design/eslint-plugin": "8.36.0",
+    "@hero-design/react-native-month-year-picker": "^8.36.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.35.0",
+    "eslint-config-hd": "8.36.0",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.35.0",
+    "prettier-config-hd": "8.36.0",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.5.0",

package/src/components/Checkbox/StyledCheckbox.tsx

@@ -1,19 +1,19 @@
 import styled from '@emotion/native';
 import { TouchableOpacity, View } from 'react-native';
-import Icon from '../Icon';
+import HeroIcon from '../Icon';
 import Typography from '../Typography';
 
+type CheckboxThemeState = 'default' | 'disabled' | 'readonly';
+
 export const StyledWrapper = styled(TouchableOpacity)<{
   themeWithBorder: boolean;
-  themeDisabled: boolean;
-}>(({ theme, themeWithBorder, themeDisabled }) => {
+  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: themeDisabled
-      ? theme.__hd__.checkbox.colors.disabledBorder
-      : theme.__hd__.checkbox.colors.default,
+    borderColor: theme.__hd__.checkbox.colors.borders[themeState],
   };
 
   return {
@@ -33,18 +33,19 @@ export const StyledCheckboxContainer = styled(View)(({ theme }) => ({
   overflow: 'hidden',
 }));
 
-export const StyledCheckbox = styled(View)<{ themeDisabled: boolean }>(
-  ({ theme, themeDisabled }) => ({
-    flex: 1,
-    borderRadius: theme.__hd__.checkbox.radii.icon,
-    borderWidth: theme.__hd__.checkbox.borderWidths.icon,
-    borderColor: themeDisabled
-      ? theme.__hd__.checkbox.colors.disabledBorder
-      : theme.__hd__.checkbox.colors.default,
-  })
-);
+export const StyledCheckbox = styled(View)<{
+  themeState: CheckboxThemeState;
+}>(({ theme, themeState }) => ({
+  flex: 1,
+  borderRadius: theme.__hd__.checkbox.radii.icon,
+  borderWidth: theme.__hd__.checkbox.borderWidths.icon,
+  borderColor: theme.__hd__.checkbox.colors.borders[themeState],
+}));
 
-export const StyledCheckMark = styled(Icon)(({ theme }) => ({
+export const StyledCheckMark = styled(HeroIcon)<{
+  themeState: CheckboxThemeState;
+}>(({ theme, themeState }) => ({
   position: 'absolute',
   top: theme.__hd__.checkbox.space.iconTop,
+  color: theme.__hd__.checkbox.colors.borders[themeState],
 }));

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

@@ -1,18 +1,25 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import { StyledWrapper, StyledCheckbox } from '../StyledCheckbox';
+import { getThemeState } from '..';
 
 describe('StyledWrapper', () => {
   it.each`
-    withBorder | disabled
-    ${false}   | ${false}
-    ${true}    | ${false}
-    ${true}    | ${true}
+    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}
   `(
     'renders correctly when disabled is $disabled, withBorder is $withBorder',
-    ({ disabled, withBorder }) => {
+    ({ disabled, withBorder, readonly }) => {
+      const themeState = getThemeState({ disabled, readonly });
       const { toJSON } = renderWithTheme(
-        <StyledWrapper themeDisabled={disabled} themeWithBorder={withBorder} />
+        <StyledWrapper themeState={themeState} themeWithBorder={withBorder} />
       );
 
       expect(toJSON()).toMatchSnapshot();
@@ -22,14 +29,20 @@ describe('StyledWrapper', () => {
 
 describe('StyledCheckbox', () => {
   it.each`
-    disabled
-    ${true}
-    ${false}
-  `('renders correctly when disabled is $disabled', ({ disabled }) => {
-    const { toJSON } = renderWithTheme(
-      <StyledCheckbox themeDisabled={disabled} />
-    );
+    disabled | readonly
+    ${true}  | ${false}
+    ${true}  | ${true}
+    ${false} | ${false}
+    ${false} | ${true}
+  `(
+    'renders correctly when disabled is $disabled and readonly is $readonly',
+    ({ disabled, readonly }) => {
+      const themeState = getThemeState({ disabled, readonly });
+      const { toJSON } = renderWithTheme(
+        <StyledCheckbox themeState={themeState} />
+      );
 
-    expect(toJSON()).toMatchSnapshot();
-  });
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
 });