@hero-design/rn 8.35.1 → 8.36.0

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 29.6s
+created lib/index.js, es/index.js in 32.5s
 $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

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
   })));
 };
 

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
   })));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.35.1",
+  "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.1",
+    "@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.1",
+    "@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.1",
-    "@hero-design/react-native-month-year-picker": "^8.35.1",
+    "@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.1",
+    "eslint-config-hd": "8.36.0",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.35.1",
+    "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();
+    }
+  );
 });

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`StyledCheckbox renders correctly when disabled is false 1`] = `
+exports[`StyledCheckbox renders correctly when disabled is false and readonly is false 1`] = `
 <View
   style={
     Array [
@@ -13,11 +13,45 @@ exports[`StyledCheckbox renders correctly when disabled is false 1`] = `
       undefined,
     ]
   }
-  themeDisabled={false}
+  themeState="default"
 />
 `;
 
-exports[`StyledCheckbox renders correctly when disabled is true 1`] = `
+exports[`StyledCheckbox renders correctly when disabled is false and readonly is true 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "borderColor": "#808f91",
+        "borderRadius": 4,
+        "borderWidth": 2,
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+  themeState="readonly"
+/>
+`;
+
+exports[`StyledCheckbox renders correctly when disabled is true and readonly is false 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "borderColor": "#bfc1c5",
+        "borderRadius": 4,
+        "borderWidth": 2,
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+  themeState="disabled"
+/>
+`;
+
+exports[`StyledCheckbox renders correctly when disabled is true and readonly is true 1`] = `
 <View
   style={
     Array [
@@ -30,7 +64,7 @@ exports[`StyledCheckbox renders correctly when disabled is true 1`] = `
       undefined,
     ]
   }
-  themeDisabled={true}
+  themeState="disabled"
 />
 `;
 
@@ -55,6 +89,27 @@ exports[`StyledWrapper renders correctly when disabled is false, withBorder is f
 />
 `;
 
+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`] = `
 <View
   accessible={true}
@@ -80,6 +135,73 @@ exports[`StyledWrapper renders correctly when disabled is false, withBorder is t
 />
 `;
 
+exports[`StyledWrapper renders correctly when disabled is false, withBorder is true 2`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "borderColor": "#808f91",
+      "borderRadius": 8,
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "opacity": 1,
+      "padding": 16,
+    }
+  }
+/>
+`;
+
+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`] = `
 <View
   accessible={true}
@@ -104,3 +226,28 @@ exports[`StyledWrapper renders correctly when disabled is true, withBorder is tr
   }
 />
 `;
+
+exports[`StyledWrapper renders correctly when disabled is true, withBorder is true 2`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "borderColor": "#bfc1c5",
+      "borderRadius": 8,
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "opacity": 1,
+      "padding": 16,
+    }
+  }
+/>
+`;

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

@@ -48,7 +48,7 @@ exports[`Checkbox renders correctly when checked is false and there is no descri
           undefined,
         ]
       }
-      themeDisabled={false}
+      themeState="default"
     />
   </View>
 </View>
@@ -100,6 +100,7 @@ exports[`Checkbox renders correctly when checked is true and there is no descrip
           },
           Array [
             Object {
+              "color": "#001f23",
               "position": "absolute",
               "top": 0,
             },
@@ -123,13 +124,13 @@ exports[`Checkbox renders correctly when checked is true and there is no descrip
           undefined,
         ]
       }
-      themeDisabled={false}
+      themeState="default"
     />
   </View>
 </View>
 `;
 
-exports[`Checkbox renders correctly when disabled is false, withBorder is false 1`] = `
+exports[`Checkbox renders correctly when disabled is false, withBorder is false and readonly is false 1`] = `
 <View
   accessibilityState={
     Object {
@@ -203,13 +204,93 @@ exports[`Checkbox renders correctly when disabled is false, withBorder is false
           undefined,
         ]
       }
-      themeDisabled={false}
+      themeState="default"
     />
   </View>
 </View>
 `;
 
-exports[`Checkbox renders correctly when disabled is false, withBorder is true 1`] = `
+exports[`Checkbox renders correctly when disabled is false, withBorder is false and readonly is true 1`] = `
+<View
+  accessibilityState={
+    Object {
+      "disabled": true,
+    }
+  }
+  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,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.48,
+          "lineHeight": 22,
+        },
+        Array [
+          Object {
+            "flex": 1,
+            "paddingRight": 12,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="body"
+    themeTypeface="neutral"
+    themeVariant="small"
+  >
+    Please agree to our privacy policy
+  </Text>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 24,
+          "overflow": "hidden",
+          "width": 24,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#808f91",
+            "borderRadius": 4,
+            "borderWidth": 2,
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+      themeState="readonly"
+    />
+  </View>
+</View>
+`;
+
+exports[`Checkbox renders correctly when disabled is false, withBorder is true and readonly is false 1`] = `
 <View
   accessibilityState={
     Object {
@@ -287,13 +368,13 @@ exports[`Checkbox renders correctly when disabled is false, withBorder is true 1
           undefined,
         ]
       }
-      themeDisabled={false}
+      themeState="default"
     />
   </View>
 </View>
 `;
 
-exports[`Checkbox renders correctly when disabled is true, withBorder is false 1`] = `
+exports[`Checkbox renders correctly when disabled is false, withBorder is true and readonly is true 1`] = `
 <View
   accessibilityState={
     Object {
@@ -312,8 +393,256 @@ exports[`Checkbox renders correctly when disabled is true, withBorder is false 1
   onStartShouldSetResponder={[Function]}
   style={
     Object {
+      "borderColor": "#808f91",
+      "borderRadius": 8,
+      "borderWidth": 1,
       "flexDirection": "row",
       "opacity": 1,
+      "padding": 16,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.48,
+          "lineHeight": 22,
+        },
+        Array [
+          Object {
+            "flex": 1,
+            "paddingRight": 12,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="body"
+    themeTypeface="neutral"
+    themeVariant="small"
+  >
+    Please agree to our privacy policy
+  </Text>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 24,
+          "overflow": "hidden",
+          "width": 24,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#808f91",
+            "borderRadius": 4,
+            "borderWidth": 2,
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+      themeState="readonly"
+    />
+  </View>
+</View>
+`;
+
+exports[`Checkbox renders correctly when disabled is true, withBorder is false and readonly is false 1`] = `
+<View
+  accessibilityState={
+    Object {
+      "disabled": true,
+    }
+  }
+  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,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      Array [
+        Object {
+          "color": "#4d6265",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.48,
+          "lineHeight": 22,
+        },
+        Array [
+          Object {
+            "flex": 1,
+            "paddingRight": 12,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="subdued"
+    themeTypeface="neutral"
+    themeVariant="small"
+  >
+    Please agree to our privacy policy
+  </Text>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 24,
+          "overflow": "hidden",
+          "width": 24,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#bfc1c5",
+            "borderRadius": 4,
+            "borderWidth": 2,
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+      themeState="disabled"
+    />
+  </View>
+</View>
+`;
+
+exports[`Checkbox renders correctly when disabled is true, withBorder is false and readonly is true 1`] = `
+<View
+  accessibilityState={
+    Object {
+      "disabled": true,
+    }
+  }
+  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,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      Array [
+        Object {
+          "color": "#4d6265",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.48,
+          "lineHeight": 22,
+        },
+        Array [
+          Object {
+            "flex": 1,
+            "paddingRight": 12,
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeIntent="subdued"
+    themeTypeface="neutral"
+    themeVariant="small"
+  >
+    Please agree to our privacy policy
+  </Text>
+  <View
+    style={
+      Array [
+        Object {
+          "height": 24,
+          "overflow": "hidden",
+          "width": 24,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#bfc1c5",
+            "borderRadius": 4,
+            "borderWidth": 2,
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+      themeState="disabled"
+    />
+  </View>
+</View>
+`;
+
+exports[`Checkbox renders correctly when disabled is true, withBorder is true and readonly is false 1`] = `
+<View
+  accessibilityState={
+    Object {
+      "disabled": true,
+    }
+  }
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "borderColor": "#bfc1c5",
+      "borderRadius": 8,
+      "borderWidth": 1,
+      "flexDirection": "row",
+      "opacity": 1,
+      "padding": 16,
     }
   }
 >
@@ -367,13 +696,13 @@ exports[`Checkbox renders correctly when disabled is true, withBorder is false 1
           undefined,
         ]
       }
-      themeDisabled={true}
+      themeState="disabled"
     />
   </View>
 </View>
 `;
 
-exports[`Checkbox renders correctly when disabled is true, withBorder is true 1`] = `
+exports[`Checkbox renders correctly when disabled is true, withBorder is true and readonly is true 1`] = `
 <View
   accessibilityState={
     Object {
@@ -451,7 +780,7 @@ exports[`Checkbox renders correctly when disabled is true, withBorder is true 1`
           undefined,
         ]
       }
-      themeDisabled={true}
+      themeState="disabled"
     />
   </View>
 </View>

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

@@ -2,22 +2,42 @@ import React from 'react';
 import { fireEvent } from '@testing-library/react-native';
 
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import Checkbox from '..';
+import Checkbox, { getThemeState } from '..';
+
+describe('getThemeState', () => {
+  it.each`
+    disabled | readonly | expected
+    ${false} | ${false} | ${'default'}
+    ${false} | ${true}  | ${'readonly'}
+    ${true}  | ${false} | ${'disabled'}
+    ${true}  | ${true}  | ${'disabled'}
+  `(
+    `should return correctly if disabled is $disabled and readonly is $readonly`,
+    ({ disabled, readonly, expected }) => {
+      expect(getThemeState({ disabled, readonly })).toBe(expected);
+    }
+  );
+});
 
 describe('Checkbox', () => {
   it.each`
-    withBorder | disabled
-    ${false}   | ${false}
-    ${false}   | ${true}
-    ${true}    | ${false}
-    ${true}    | ${true}
+    withBorder | disabled | readonly
+    ${false}   | ${false} | ${false}
+    ${false}   | ${true}  | ${false}
+    ${true}    | ${false} | ${false}
+    ${true}    | ${true}  | ${false}
+    ${false}   | ${false} | ${true}
+    ${false}   | ${true}  | ${true}
+    ${true}    | ${false} | ${true}
+    ${true}    | ${true}  | ${true}
   `(
-    'renders correctly when disabled is $disabled, withBorder is $withBorder',
-    ({ disabled, withBorder }) => {
+    'renders correctly when disabled is $disabled, withBorder is $withBorder and readonly is $readonly',
+    ({ disabled, withBorder, readonly }) => {
       const wrapper = renderWithTheme(
         <Checkbox
           disabled={disabled}
           withBorder={withBorder}
+          readonly={readonly}
           description="Please agree to our privacy policy"
         />
       );

package/src/components/Checkbox/index.tsx

@@ -37,8 +37,29 @@ export interface CheckboxProps {
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * Readonly of the checkbox.
+   */
+  readonly?: boolean;
 }
 
+type getStateType = {
+  disabled: boolean;
+  readonly: boolean;
+};
+
+export const getThemeState = ({ disabled, readonly }: getStateType) => {
+  if (disabled) {
+    return 'disabled';
+  }
+
+  if (readonly) {
+    return 'readonly';
+  }
+
+  return 'default';
+};
+
 const Checkbox = ({
   checked,
   description,
@@ -47,31 +68,39 @@ const Checkbox = ({
   onPress,
   style,
   testID,
-}: CheckboxProps) => (
-  <StyledWrapper
-    onPress={onPress}
-    disabled={disabled}
-    themeDisabled={disabled}
-    themeWithBorder={withBorder}
-    style={style}
-    testID={testID}
-  >
-    {!!description && (
-      <StyledDescription intent={disabled ? 'subdued' : 'body'} variant="small">
-        {description}
-      </StyledDescription>
-    )}
-    <StyledCheckboxContainer>
-      {checked && (
-        <StyledCheckMark
-          icon="box-check"
-          intent={disabled ? 'disabled-text' : 'text'}
-          testID="check-mark"
-        />
+  readonly = false,
+}: CheckboxProps) => {
+  const themeState = getThemeState({ disabled, readonly });
+
+  return (
+    <StyledWrapper
+      onPress={onPress}
+      disabled={disabled || readonly}
+      themeWithBorder={withBorder}
+      themeState={themeState}
+      style={style}
+      testID={testID}
+    >
+      {!!description && (
+        <StyledDescription
+          intent={disabled ? 'subdued' : 'body'}
+          variant="small"
+        >
+          {description}
+        </StyledDescription>
       )}
-      <StyledCheckbox themeDisabled={disabled} />
-    </StyledCheckboxContainer>
-  </StyledWrapper>
-);
+      <StyledCheckboxContainer>
+        {checked && (
+          <StyledCheckMark
+            icon="box-check"
+            testID="check-mark"
+            themeState={themeState}
+          />
+        )}
+        <StyledCheckbox themeState={themeState} />
+      </StyledCheckboxContainer>
+    </StyledWrapper>
+  );
+};
 
 export default Checkbox;

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -334,8 +334,11 @@ Object {
         "wrapper": 1,
       },
       "colors": Object {
-        "default": "#001f23",
-        "disabledBorder": "#bfc1c5",
+        "borders": Object {
+          "default": "#001f23",
+          "disabled": "#bfc1c5",
+          "readonly": "#808f91",
+        },
       },
       "radii": Object {
         "icon": 4,

package/src/theme/components/checkbox.ts

@@ -2,8 +2,11 @@ import type { GlobalTheme } from '../global';
 
 const getCheckboxTheme = (theme: GlobalTheme) => {
   const colors = {
-    default: theme.colors.primaryOutline,
-    disabledBorder: theme.colors.disabledOutline,
+    borders: {
+      default: theme.colors.primaryOutline,
+      disabled: theme.colors.disabledOutline,
+      readonly: theme.colors.inactiveOutline,
+    },
   };
 
   const space = {

package/types/components/Checkbox/StyledCheckbox.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 import { TouchableOpacity, View } from 'react-native';
+type CheckboxThemeState = 'default' | 'disabled' | 'readonly';
 export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     themeWithBorder: boolean;
-    themeDisabled: boolean;
+    themeState: CheckboxThemeState;
 }, {}, {
     ref?: import("react").Ref<TouchableOpacity> | undefined;
 }>;
@@ -23,11 +24,14 @@ export declare const StyledCheckbox: import("@emotion/native").StyledComponent<i
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    themeDisabled: boolean;
+    themeState: CheckboxThemeState;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 export declare const StyledCheckMark: import("@emotion/native").StyledComponent<import("../Icon").IconProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
+} & {
+    themeState: CheckboxThemeState;
 }, {}, {}>;
+export {};

package/types/components/Checkbox/index.d.ts

@@ -28,6 +28,15 @@ export interface CheckboxProps {
      * Testing id of the component.
      */
     testID?: string;
+    /**
+     * Readonly of the checkbox.
+     */
+    readonly?: boolean;
 }
-declare const Checkbox: ({ checked, description, withBorder, disabled, onPress, style, testID, }: CheckboxProps) => JSX.Element;
+type getStateType = {
+    disabled: boolean;
+    readonly: boolean;
+};
+export declare const getThemeState: ({ disabled, readonly }: getStateType) => "default" | "disabled" | "readonly";
+declare const Checkbox: ({ checked, description, withBorder, disabled, onPress, style, testID, readonly, }: CheckboxProps) => JSX.Element;
 export default Checkbox;

package/types/theme/components/checkbox.d.ts

@@ -1,8 +1,11 @@
 import type { GlobalTheme } from '../global';
 declare const getCheckboxTheme: (theme: GlobalTheme) => {
     colors: {
-        default: string;
-        disabledBorder: string;
+        borders: {
+            default: string;
+            disabled: string;
+            readonly: string;
+        };
     };
     space: {
         iconTop: number;