@hero-design/rn 7.22.1 → 7.22.2

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output f989e19224b6c38b
+@hero-design/rn:build: cache hit, replaying output 593e087778fd2d6f
 @hero-design/rn:build: $ yarn build:js && yarn build:types
 @hero-design/rn:build: $ rollup -c
 @hero-design/rn:build: 
 @hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
 @hero-design/rn:build: (!) 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`.
 @hero-design/rn:build: (!) 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
-@hero-design/rn:build: created lib/index.js, es/index.js in 26.3s
+@hero-design/rn:build: created lib/index.js, es/index.js in 26.2s
 @hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly

package/es/index.js

@@ -1328,7 +1328,8 @@ var swagSystemPalette = {
   __alpha__secondary1: palette$2.scarletGumLight30,
   __alpha__secondary2: palette$2.scarletGumLight50,
   __alpha__secondary3: palette$2.scarletGumLight80,
-  __alpha__secondary4: palette$2.scarletGumLight90
+  __alpha__secondary4: palette$2.scarletGumLight90,
+  __alpha__lightHighlightedSurface: '#ECE8EF'
 };
 
 var workSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette), {}, {
@@ -2033,8 +2034,8 @@ var getImageTheme = function getImageTheme(theme) {
 
 var getListTheme = function getListTheme(theme) {
   var colors = {
-    checkedListItemContainerBackground: theme.colors.primaryBackground,
-    highlightedListItemContainerBackground: theme.colors.primaryBackground,
+    checkedListItemContainerBackground: theme.colors.__alpha__lightHighlightedSurface,
+    highlightedListItemContainerBackground: theme.colors.__alpha__lightHighlightedSurface,
     listItemContainerBackground: theme.colors.platformBackground,
     leadingStatus: {
       danger: theme.colors.dangerMediumLight,
@@ -2052,6 +2053,7 @@ var getListTheme = function getListTheme(theme) {
   };
   var radii = {
     card: theme.radii.medium,
+    basicItem: theme.radii.base,
     cardShadow: theme.radii.base,
     leadingStatus: theme.radii.rounded
   };
@@ -19107,10 +19109,16 @@ var Checkbox = function Checkbox(_ref) {
 };
 
 var StyledContainer$3 = index$8(View)(function (_ref) {
-  var theme = _ref.theme;
+  var _theme$__hd__$textInp;
+
+  var theme = _ref.theme,
+      themeVariant = _ref.themeVariant;
   return {
     width: '100%',
-    marginVertical: theme.__hd__.textInput.space.containerMarginVertical
+    marginVertical: theme.__hd__.textInput.space.containerMarginVertical,
+    borderWidth: themeVariant === 'focused' ? theme.__hd__.textInput.borderWidths.container.focused : theme.__hd__.textInput.borderWidths.container.normal,
+    borderRadius: theme.__hd__.textInput.radii.container,
+    borderColor: (_theme$__hd__$textInp = theme.__hd__.textInput.colors.borders[themeVariant]) !== null && _theme$__hd__$textInp !== void 0 ? _theme$__hd__$textInp : theme.__hd__.textInput.colors.borders["default"]
   };
 });
 var StyledLabelContainer = index$8(View)(function (_ref2) {
@@ -19212,19 +19220,8 @@ var StyledTextInput = index$8(TextInput$1)(function (_ref11) {
     marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin
   };
 });
-var StyledBorderBackDrop = index$8(View)(function (_ref12) {
-  var _theme$__hd__$textInp;
-
-  var theme = _ref12.theme,
-      themeVariant = _ref12.themeVariant;
-  return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
-    borderWidth: themeVariant === 'focused' ? theme.__hd__.textInput.borderWidths.container.focused : theme.__hd__.textInput.borderWidths.container.normal,
-    borderRadius: theme.__hd__.textInput.radii.container,
-    borderColor: (_theme$__hd__$textInp = theme.__hd__.textInput.colors.borders[themeVariant]) !== null && _theme$__hd__$textInp !== void 0 ? _theme$__hd__$textInp : theme.__hd__.textInput.colors.borders["default"]
-  });
-});
-var StyledTextInputContainer = index$8(View)(function (_ref13) {
-  var theme = _ref13.theme;
+var StyledTextInputContainer = index$8(View)(function (_ref12) {
+  var theme = _ref12.theme;
   return {
     flexDirection: 'row',
     alignItems: 'center',
@@ -19240,8 +19237,8 @@ var StyledTextInputAndLabelContainer = index$8(View)(function () {
     flexShrink: 1
   };
 });
-var StyledErrorAndHelpTextContainer = index$8(View)(function (_ref14) {
-  var theme = _ref14.theme;
+var StyledErrorAndHelpTextContainer = index$8(View)(function (_ref13) {
+  var theme = _ref13.theme;
   return {
     paddingLeft: theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingLeft
   };
@@ -19263,26 +19260,26 @@ var getVariant$1 = function getVariant(_ref) {
       isEmptyValue = _ref.isEmptyValue;
 
   if (disabled) {
-    return "disabled";
+    return 'disabled';
   }
 
   if (error) {
-    return "error";
+    return 'error';
   }
 
   if (!editable || loading) {
-    return "readonly";
+    return 'readonly';
   }
 
   if (isFocused) {
-    return "focused";
+    return 'focused';
   }
 
   if (!isEmptyValue) {
-    return "filled";
+    return 'filled';
   }
 
-  return "default";
+  return 'default';
 };
 
 var TextInput = function TextInput(_ref2) {
@@ -19310,9 +19307,9 @@ var TextInput = function TextInput(_ref2) {
       renderInputValue = _ref2.renderInputValue,
       nativeProps = _objectWithoutProperties(_ref2, _excluded$6);
 
-  var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : "";
+  var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
-  var actualSuffix = loading ? "loading" : suffix;
+  var actualSuffix = loading ? 'loading' : suffix;
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -19334,9 +19331,9 @@ var TextInput = function TextInput(_ref2) {
     style: StyleSheet$1.flatten([{
       color: theme.__hd__.textInput.colors.text
     }, textStyle]),
-    testID: "text-input",
+    testID: 'text-input',
     accessibilityState: {
-      disabled: variant === "disabled" || variant === "readonly"
+      disabled: variant === 'disabled' || variant === 'readonly'
     },
     // @ts-ignore
     accessibilityLabelledBy: accessibilityLabelledBy
@@ -19362,16 +19359,15 @@ var TextInput = function TextInput(_ref2) {
       (_nativeProps$onChange = nativeProps.onChangeText) === null || _nativeProps$onChange === void 0 ? void 0 : _nativeProps$onChange.call(nativeProps, text);
     },
     defaultValue: defaultValue,
-    placeholder: variant === "focused" ? nativeProps.placeholder : undefined
+    placeholder: variant === 'focused' ? nativeProps.placeholder : undefined
   });
 
   return /*#__PURE__*/React.createElement(StyledContainer$3, {
-    pointerEvents: variant === "disabled" || variant === "readonly" ? "none" : "auto",
-    testID: testID
-  }, /*#__PURE__*/React.createElement(StyledTextInputContainer, null, /*#__PURE__*/React.createElement(StyledBorderBackDrop, {
-    themeVariant: variant,
-    style: style
-  }), (isFocused || label && !isEmptyValue) && /*#__PURE__*/React.createElement(StyledLabelContainer, {
+    pointerEvents: variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto',
+    testID: testID,
+    style: style,
+    themeVariant: variant
+  }, /*#__PURE__*/React.createElement(StyledTextInputContainer, null, (isFocused || label && !isEmptyValue) && /*#__PURE__*/React.createElement(StyledLabelContainer, {
     pointerEvents: "none"
   }, required && /*#__PURE__*/React.createElement(StyledAsteriskLabel, {
     themeVariant: variant,
@@ -19381,8 +19377,8 @@ var TextInput = function TextInput(_ref2) {
     testID: "input-label",
     fontSize: "small",
     themeVariant: variant
-  }, label)), typeof prefix === "string" ? /*#__PURE__*/React.createElement(Icon, {
-    intent: variant === "disabled" ? "disabled-text" : "text",
+  }, label)), typeof prefix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
+    intent: variant === 'disabled' ? 'disabled-text' : 'text',
     testID: "input-prefix",
     icon: prefix,
     size: "xsmall"
@@ -19395,11 +19391,11 @@ var TextInput = function TextInput(_ref2) {
     testID: "input-label",
     fontSize: "medium",
     themeVariant: variant
-  }, label)), renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React.createElement(StyledTextInput, nativeInputProps)), typeof actualSuffix === "string" ? /*#__PURE__*/React.createElement(Icon, {
-    intent: variant === "disabled" ? "disabled-text" : "text",
+  }, label)), renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React.createElement(StyledTextInput, nativeInputProps)), typeof actualSuffix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
+    intent: variant === 'disabled' ? 'disabled-text' : 'text',
     testID: "input-suffix",
     icon: actualSuffix,
-    spin: actualSuffix === "loading",
+    spin: actualSuffix === 'loading',
     size: "xsmall"
   }) : suffix), /*#__PURE__*/React.createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React.createElement(StyledErrorAndMaxLengthContainer, null, !!error && /*#__PURE__*/React.createElement(StyledErrorContainer$1, null, /*#__PURE__*/React.createElement(Icon, {
     testID: "input-error-icon",
@@ -20387,7 +20383,8 @@ var StyledListItemContainer = index$8(TouchableHighlight)(function (_ref3) {
     flexDirection: 'row',
     backgroundColor: themeSelected ? theme.__hd__.list.colors.checkedListItemContainerBackground : theme.__hd__.list.colors.listItemContainerBackground,
     padding: theme.__hd__.list.space.listItemContainerPadding,
-    opacity: themeDisabled ? theme.__hd__.list.opacity.disabled : theme.__hd__.list.opacity.enabled
+    opacity: themeDisabled ? theme.__hd__.list.opacity.disabled : theme.__hd__.list.opacity.enabled,
+    borderRadius: theme.__hd__.list.radii.basicItem
   };
 });
 
@@ -41225,10 +41222,9 @@ var RichTextEditor = function RichTextEditor(_ref) {
     }
   }, []);
   return /*#__PURE__*/React.createElement(StyledContainer$3, {
-    testID: testID
-  }, /*#__PURE__*/React.createElement(StyledTextInputContainer, null, /*#__PURE__*/React.createElement(StyledBorderBackDrop, {
+    testID: testID,
     themeVariant: variant
-  }), (isFocused || label && !isEmptyValue) && /*#__PURE__*/React.createElement(StyledLabelContainer, {
+  }, /*#__PURE__*/React.createElement(StyledTextInputContainer, null, (isFocused || label && !isEmptyValue) && /*#__PURE__*/React.createElement(StyledLabelContainer, {
     pointerEvents: "none"
   }, required && /*#__PURE__*/React.createElement(StyledAsteriskLabel, {
     themeVariant: variant,

package/lib/index.js

@@ -1357,7 +1357,8 @@ var swagSystemPalette = {
   __alpha__secondary1: palette$2.scarletGumLight30,
   __alpha__secondary2: palette$2.scarletGumLight50,
   __alpha__secondary3: palette$2.scarletGumLight80,
-  __alpha__secondary4: palette$2.scarletGumLight90
+  __alpha__secondary4: palette$2.scarletGumLight90,
+  __alpha__lightHighlightedSurface: '#ECE8EF'
 };
 
 var workSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette), {}, {
@@ -2062,8 +2063,8 @@ var getImageTheme = function getImageTheme(theme) {
 
 var getListTheme = function getListTheme(theme) {
   var colors = {
-    checkedListItemContainerBackground: theme.colors.primaryBackground,
-    highlightedListItemContainerBackground: theme.colors.primaryBackground,
+    checkedListItemContainerBackground: theme.colors.__alpha__lightHighlightedSurface,
+    highlightedListItemContainerBackground: theme.colors.__alpha__lightHighlightedSurface,
     listItemContainerBackground: theme.colors.platformBackground,
     leadingStatus: {
       danger: theme.colors.dangerMediumLight,
@@ -2081,6 +2082,7 @@ var getListTheme = function getListTheme(theme) {
   };
   var radii = {
     card: theme.radii.medium,
+    basicItem: theme.radii.base,
     cardShadow: theme.radii.base,
     leadingStatus: theme.radii.rounded
   };
@@ -19136,10 +19138,16 @@ var Checkbox = function Checkbox(_ref) {
 };
 
 var StyledContainer$3 = index$8(reactNative.View)(function (_ref) {
-  var theme = _ref.theme;
+  var _theme$__hd__$textInp;
+
+  var theme = _ref.theme,
+      themeVariant = _ref.themeVariant;
   return {
     width: '100%',
-    marginVertical: theme.__hd__.textInput.space.containerMarginVertical
+    marginVertical: theme.__hd__.textInput.space.containerMarginVertical,
+    borderWidth: themeVariant === 'focused' ? theme.__hd__.textInput.borderWidths.container.focused : theme.__hd__.textInput.borderWidths.container.normal,
+    borderRadius: theme.__hd__.textInput.radii.container,
+    borderColor: (_theme$__hd__$textInp = theme.__hd__.textInput.colors.borders[themeVariant]) !== null && _theme$__hd__$textInp !== void 0 ? _theme$__hd__$textInp : theme.__hd__.textInput.colors.borders["default"]
   };
 });
 var StyledLabelContainer = index$8(reactNative.View)(function (_ref2) {
@@ -19241,19 +19249,8 @@ var StyledTextInput = index$8(reactNative.TextInput)(function (_ref11) {
     marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin
   };
 });
-var StyledBorderBackDrop = index$8(reactNative.View)(function (_ref12) {
-  var _theme$__hd__$textInp;
-
-  var theme = _ref12.theme,
-      themeVariant = _ref12.themeVariant;
-  return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
-    borderWidth: themeVariant === 'focused' ? theme.__hd__.textInput.borderWidths.container.focused : theme.__hd__.textInput.borderWidths.container.normal,
-    borderRadius: theme.__hd__.textInput.radii.container,
-    borderColor: (_theme$__hd__$textInp = theme.__hd__.textInput.colors.borders[themeVariant]) !== null && _theme$__hd__$textInp !== void 0 ? _theme$__hd__$textInp : theme.__hd__.textInput.colors.borders["default"]
-  });
-});
-var StyledTextInputContainer = index$8(reactNative.View)(function (_ref13) {
-  var theme = _ref13.theme;
+var StyledTextInputContainer = index$8(reactNative.View)(function (_ref12) {
+  var theme = _ref12.theme;
   return {
     flexDirection: 'row',
     alignItems: 'center',
@@ -19269,8 +19266,8 @@ var StyledTextInputAndLabelContainer = index$8(reactNative.View)(function () {
     flexShrink: 1
   };
 });
-var StyledErrorAndHelpTextContainer = index$8(reactNative.View)(function (_ref14) {
-  var theme = _ref14.theme;
+var StyledErrorAndHelpTextContainer = index$8(reactNative.View)(function (_ref13) {
+  var theme = _ref13.theme;
   return {
     paddingLeft: theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingLeft
   };
@@ -19292,26 +19289,26 @@ var getVariant$1 = function getVariant(_ref) {
       isEmptyValue = _ref.isEmptyValue;
 
   if (disabled) {
-    return "disabled";
+    return 'disabled';
   }
 
   if (error) {
-    return "error";
+    return 'error';
   }
 
   if (!editable || loading) {
-    return "readonly";
+    return 'readonly';
   }
 
   if (isFocused) {
-    return "focused";
+    return 'focused';
   }
 
   if (!isEmptyValue) {
-    return "filled";
+    return 'filled';
   }
 
-  return "default";
+  return 'default';
 };
 
 var TextInput = function TextInput(_ref2) {
@@ -19339,9 +19336,9 @@ var TextInput = function TextInput(_ref2) {
       renderInputValue = _ref2.renderInputValue,
       nativeProps = _objectWithoutProperties(_ref2, _excluded$6);
 
-  var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : "";
+  var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
-  var actualSuffix = loading ? "loading" : suffix;
+  var actualSuffix = loading ? 'loading' : suffix;
 
   var _React$useState = React__default["default"].useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -19363,9 +19360,9 @@ var TextInput = function TextInput(_ref2) {
     style: reactNative.StyleSheet.flatten([{
       color: theme.__hd__.textInput.colors.text
     }, textStyle]),
-    testID: "text-input",
+    testID: 'text-input',
     accessibilityState: {
-      disabled: variant === "disabled" || variant === "readonly"
+      disabled: variant === 'disabled' || variant === 'readonly'
     },
     // @ts-ignore
     accessibilityLabelledBy: accessibilityLabelledBy
@@ -19391,16 +19388,15 @@ var TextInput = function TextInput(_ref2) {
       (_nativeProps$onChange = nativeProps.onChangeText) === null || _nativeProps$onChange === void 0 ? void 0 : _nativeProps$onChange.call(nativeProps, text);
     },
     defaultValue: defaultValue,
-    placeholder: variant === "focused" ? nativeProps.placeholder : undefined
+    placeholder: variant === 'focused' ? nativeProps.placeholder : undefined
   });
 
   return /*#__PURE__*/React__default["default"].createElement(StyledContainer$3, {
-    pointerEvents: variant === "disabled" || variant === "readonly" ? "none" : "auto",
-    testID: testID
-  }, /*#__PURE__*/React__default["default"].createElement(StyledTextInputContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledBorderBackDrop, {
-    themeVariant: variant,
-    style: style
-  }), (isFocused || label && !isEmptyValue) && /*#__PURE__*/React__default["default"].createElement(StyledLabelContainer, {
+    pointerEvents: variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto',
+    testID: testID,
+    style: style,
+    themeVariant: variant
+  }, /*#__PURE__*/React__default["default"].createElement(StyledTextInputContainer, null, (isFocused || label && !isEmptyValue) && /*#__PURE__*/React__default["default"].createElement(StyledLabelContainer, {
     pointerEvents: "none"
   }, required && /*#__PURE__*/React__default["default"].createElement(StyledAsteriskLabel, {
     themeVariant: variant,
@@ -19410,8 +19406,8 @@ var TextInput = function TextInput(_ref2) {
     testID: "input-label",
     fontSize: "small",
     themeVariant: variant
-  }, label)), typeof prefix === "string" ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-    intent: variant === "disabled" ? "disabled-text" : "text",
+  }, label)), typeof prefix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    intent: variant === 'disabled' ? 'disabled-text' : 'text',
     testID: "input-prefix",
     icon: prefix,
     size: "xsmall"
@@ -19424,11 +19420,11 @@ var TextInput = function TextInput(_ref2) {
     testID: "input-label",
     fontSize: "medium",
     themeVariant: variant
-  }, label)), renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React__default["default"].createElement(StyledTextInput, nativeInputProps)), typeof actualSuffix === "string" ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-    intent: variant === "disabled" ? "disabled-text" : "text",
+  }, label)), renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React__default["default"].createElement(StyledTextInput, nativeInputProps)), typeof actualSuffix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    intent: variant === 'disabled' ? 'disabled-text' : 'text',
     testID: "input-suffix",
     icon: actualSuffix,
-    spin: actualSuffix === "loading",
+    spin: actualSuffix === 'loading',
     size: "xsmall"
   }) : suffix), /*#__PURE__*/React__default["default"].createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledErrorAndMaxLengthContainer, null, !!error && /*#__PURE__*/React__default["default"].createElement(StyledErrorContainer$1, null, /*#__PURE__*/React__default["default"].createElement(Icon, {
     testID: "input-error-icon",
@@ -20416,7 +20412,8 @@ var StyledListItemContainer = index$8(reactNative.TouchableHighlight)(function (
     flexDirection: 'row',
     backgroundColor: themeSelected ? theme.__hd__.list.colors.checkedListItemContainerBackground : theme.__hd__.list.colors.listItemContainerBackground,
     padding: theme.__hd__.list.space.listItemContainerPadding,
-    opacity: themeDisabled ? theme.__hd__.list.opacity.disabled : theme.__hd__.list.opacity.enabled
+    opacity: themeDisabled ? theme.__hd__.list.opacity.disabled : theme.__hd__.list.opacity.enabled,
+    borderRadius: theme.__hd__.list.radii.basicItem
   };
 });
 
@@ -41254,10 +41251,9 @@ var RichTextEditor = function RichTextEditor(_ref) {
     }
   }, []);
   return /*#__PURE__*/React__default["default"].createElement(StyledContainer$3, {
-    testID: testID
-  }, /*#__PURE__*/React__default["default"].createElement(StyledTextInputContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledBorderBackDrop, {
+    testID: testID,
     themeVariant: variant
-  }), (isFocused || label && !isEmptyValue) && /*#__PURE__*/React__default["default"].createElement(StyledLabelContainer, {
+  }, /*#__PURE__*/React__default["default"].createElement(StyledTextInputContainer, null, (isFocused || label && !isEmptyValue) && /*#__PURE__*/React__default["default"].createElement(StyledLabelContainer, {
     pointerEvents: "none"
   }, required && /*#__PURE__*/React__default["default"].createElement(StyledAsteriskLabel, {
     themeVariant: variant,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.22.1",
+  "version": "7.22.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.22.1",
+    "@hero-design/colors": "7.22.2",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.9"
@@ -57,7 +57,7 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "7.22.1",
+    "eslint-config-hd": "7.22.2",
     "jest": "^27.3.1",
     "react": "17.0.2",
     "react-native": "0.65.1",
@@ -70,7 +70,7 @@
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-flow": "^1.1.1",
     "ts-jest": "^27.0.7",
-    "prettier-config-hd": "7.22.1"
+    "prettier-config-hd": "7.22.2"
   },
   "prettier": "prettier-config-hd"
 }

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap

@@ -26,12 +26,16 @@ exports[`DatePickerAndroid renders correctly 1`] = `
       style={
         Array [
           Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
             "marginVertical": 8,
             "width": "100%",
           },
           undefined,
         ]
       }
+      themeVariant="filled"
     >
       <View
         style={
@@ -45,24 +49,6 @@ exports[`DatePickerAndroid renders correctly 1`] = `
           ]
         }
       >
-        <View
-          style={
-            Array [
-              Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              undefined,
-            ]
-          }
-          themeVariant="filled"
-        />
         <View
           pointerEvents="none"
           style={

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -26,12 +26,16 @@ exports[`DatePickerIOS renders correctly 1`] = `
       style={
         Array [
           Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
             "marginVertical": 8,
             "width": "100%",
           },
           undefined,
         ]
       }
+      themeVariant="filled"
     >
       <View
         style={
@@ -45,24 +49,6 @@ exports[`DatePickerIOS renders correctly 1`] = `
           ]
         }
       >
-        <View
-          style={
-            Array [
-              Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              undefined,
-            ]
-          }
-          themeVariant="filled"
-        />
         <View
           pointerEvents="none"
           style={

package/src/components/List/StyledBasicListItem.tsx

@@ -24,6 +24,7 @@ const StyledListItemContainer = styled(TouchableHighlight)<{
   opacity: themeDisabled
     ? theme.__hd__.list.opacity.disabled
     : theme.__hd__.list.opacity.enabled,
+  borderRadius: theme.__hd__.list.radii.basicItem,
 }));
 export {
   StyledListItemContainer,

package/src/components/List/__tests__/BasicListItem.spec.tsx

@@ -1,22 +1,46 @@
 import { fireEvent } from '@testing-library/react-native';
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Icon from '../../Icon';
 import BasicListItem from '../BasicListItem';
 
 describe('BasicListItem', () => {
-  it('renders correctly', () => {
-    const wrapper = renderWithTheme(
-      <BasicListItem
-        title="List item"
-        subtitle="subtitle"
-        suffix="checkmark"
-        testID="basic-list-item"
-      />
-    );
-    expect(wrapper.toJSON()).toMatchSnapshot();
-    expect(wrapper.queryAllByTestId('basic-list-item')).toHaveLength(1);
-    expect(wrapper.queryAllByText('List item')).toHaveLength(1);
-    expect(wrapper.queryAllByText('subtitle')).toHaveLength(1);
+  describe('when suffix and prefix are icon name', () => {
+    it('renders correctly', () => {
+      const wrapper = renderWithTheme(
+        <BasicListItem
+          title="List item"
+          subtitle="subtitle"
+          suffix="checkmark"
+          prefix="circle-question-outlined"
+          testID="basic-list-item"
+        />
+      );
+      expect(wrapper.toJSON()).toMatchSnapshot();
+      expect(wrapper.queryAllByTestId('basic-list-item')).toHaveLength(1);
+      expect(wrapper.queryAllByText('List item')).toHaveLength(1);
+      expect(wrapper.queryAllByText('subtitle')).toHaveLength(1);
+    });
+  });
+
+  describe('when suffix and prefix are react element', () => {
+    it('renders correctly', () => {
+      const wrapper = renderWithTheme(
+        <BasicListItem
+          title="List item"
+          subtitle="subtitle"
+          suffix={<Icon icon="checkmark" testID="suffix" />}
+          prefix={<Icon icon="circle-question-outlined" testID="prefix" />}
+          testID="basic-list-item"
+        />
+      );
+      expect(wrapper.toJSON()).toMatchSnapshot();
+      expect(wrapper.queryAllByTestId('basic-list-item')).toHaveLength(1);
+      expect(wrapper.queryAllByTestId('suffix')).toHaveLength(1);
+      expect(wrapper.queryAllByTestId('prefix')).toHaveLength(1);
+      expect(wrapper.queryAllByText('List item')).toHaveLength(1);
+      expect(wrapper.queryAllByText('subtitle')).toHaveLength(1);
+    });
   });
 
   it('onPress', () => {