@hero-design/rn 8.12.0-rc.0 → 8.12.1

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output ee6a5718811b5702
-@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 '/Volumes/Data/Projects/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 29.8s
-@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json
+@hero-design/rn:build: cache hit, replaying output 11519c5263d6ba02
+@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 31.5s
+@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -1274,7 +1274,10 @@ var palette$2 = Object.assign(Object.assign({}, palette$8), {
   violetLight90: violet1.lighten90,
   violet: violet1.base,
   mauve: mauve.base,
+  mauveLight15: mauve.lighten15,
   mauveLight30: mauve.lighten30,
+  mauveLight40: mauve.lighten40,
+  mauveDark65: mauve.darken65,
   maasstrichtBlueLight10: maasstrichtBlue.lighten10,
   maasstrichtBlueDark20: maasstrichtBlue.darken20
 });
@@ -1403,11 +1406,11 @@ var globalPalette = {
 var swagDarkBrandSystemPalette = {
   primary: palette$2.mauve,
   onPrimary: palette$2.maasstrichtBlue,
-  secondary: palette$2.mauveLight30,
+  secondary: palette$2.mauveLight40,
   onSecondary: palette$2.maasstrichtBlue,
   defaultSurface: palette$2.maasstrichtBlue,
-  highlightedSurface: palette$2.scarletGumDark65,
-  pressedSurface: palette$2.scarletGumLight20,
+  highlightedSurface: palette$2.mauveDark65,
+  pressedSurface: palette$2.mauveLight15,
   decorativePrimary: palette$2.maasstrichtBlue,
   decorativePrimarySurface: palette$2.maasstrichtBlueLight10
 };
@@ -2671,6 +2674,7 @@ var getTagTheme = function getTagTheme(theme) {
 var getTextInputTheme = function getTextInputTheme(theme) {
   var colors = {
     labelBackground: theme.colors.defaultGlobalSurface,
+    containerBackground: theme.colors.defaultGlobalSurface,
     asterisks: {
       "default": theme.colors.onErrorSurface,
       error: theme.colors.onErrorSurface,
@@ -2841,9 +2845,9 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     primary: theme.colors.primary,
     secondary: theme.colors.secondary,
     info: theme.colors.onInfoSurface,
-    danger: theme.colors.onErrorSurface,
-    warning: theme.colors.onWarningSurface,
-    success: theme.colors.onSuccessSurface,
+    danger: theme.colors.error,
+    warning: theme.colors.warning,
+    success: theme.colors.success,
     inverted: theme.colors.onDarkGlobalSurface,
     archived: theme.colors.onArchivedSurface
   };
@@ -11431,7 +11435,9 @@ var StyledTextInputContainer = index$a(View)(function (_ref13) {
   return {
     flexDirection: 'row',
     alignItems: 'center',
-    padding: theme.__hd__.textInput.space.containerPadding
+    padding: theme.__hd__.textInput.space.containerPadding,
+    backgroundColor: theme.__hd__.textInput.colors.containerBackground,
+    borderRadius: theme.__hd__.textInput.radii.container
   };
 });
 var StyledTextInputAndLabelContainer = index$a(View)(function () {
@@ -11565,8 +11571,24 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     }, [textStyle]),
     borderStyle = _useMemo.borderStyle,
     textStyleWithoutBorderStyle = _useMemo.textStyleWithoutBorderStyle;
+  var _useMemo2 = useMemo(function () {
+      var _flattenTextStyle$bac;
+      if (!style) {
+        return {
+          backgroundColor: theme.__hd__.textInput.colors.containerBackground
+        };
+      }
+      var flattenTextStyle = StyleSheet$1.flatten(style);
+      return {
+        backgroundColor: (_flattenTextStyle$bac = flattenTextStyle.backgroundColor) !== null && _flattenTextStyle$bac !== void 0 ? _flattenTextStyle$bac : theme.__hd__.textInput.colors.containerBackground,
+        styleWithoutBackgroundColor: omit(['backgroundColor'], flattenTextStyle)
+      };
+    }, [style, theme]),
+    backgroundColor = _useMemo2.backgroundColor,
+    styleWithoutBackgroundColor = _useMemo2.styleWithoutBackgroundColor;
   var nativeInputProps = _objectSpread2(_objectSpread2({
     style: StyleSheet$1.flatten([{
+      backgroundColor: backgroundColor,
       color: theme.__hd__.textInput.colors.text
     }, textStyleWithoutBorderStyle]),
     testID: 'text-input',
@@ -11598,15 +11620,22 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     placeholder: isFocused || label === undefined ? nativeProps.placeholder : EMPTY_PLACEHOLDER_VALUE
   });
   return /*#__PURE__*/React.createElement(StyledContainer$3, {
-    style: style,
+    style: styleWithoutBackgroundColor,
     pointerEvents: variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto',
     testID: testID
   }, /*#__PURE__*/React.createElement(StyledTextInputContainer, null, /*#__PURE__*/React.createElement(StyledBorderBackDrop, {
     themeFocused: isFocused,
     themeVariant: variant,
-    style: borderStyle
+    testID: "text-input-border",
+    style: [{
+      backgroundColor: backgroundColor
+    }, borderStyle]
   }), (isFocused || label && !isEmptyValue) && /*#__PURE__*/React.createElement(StyledLabelContainer, {
-    pointerEvents: "none"
+    pointerEvents: "none",
+    testID: "label-container",
+    style: {
+      backgroundColor: backgroundColor
+    }
   }, required && /*#__PURE__*/React.createElement(StyledAsteriskLabel, {
     themeVariant: variant,
     fontSize: "small"
@@ -11614,7 +11643,10 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     nativeID: accessibilityLabelledBy,
     testID: "input-label",
     fontSize: "small",
-    themeVariant: variant
+    themeVariant: variant,
+    style: {
+      backgroundColor: backgroundColor
+    }
   }, label)), typeof prefix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
     intent: variant === 'disabled' ? 'disabled-text' : 'text',
     testID: "input-prefix",
@@ -12434,7 +12466,7 @@ var index$6 = Object.assign(FAB, {
   ActionGroup: ActionGroup
 });
 
-var StyledListItemContainer$1 = index$a(TouchableOpacity)(function (_ref) {
+var StyledListItemContainer$1 = index$a(TouchableHighlight)(function (_ref) {
   var theme = _ref.theme,
     _ref$themeSelected = _ref.themeSelected,
     themeSelected = _ref$themeSelected === void 0 ? false : _ref$themeSelected,
@@ -12520,13 +12552,15 @@ var ListItem = function ListItem(_ref) {
     onPress = _ref.onPress,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  var theme = useTheme();
   return /*#__PURE__*/React.createElement(StyledListItemContainer$1, {
     style: style,
     testID: testID,
     themeSelected: selected,
     themeVariant: variant,
     onPress: onPress,
-    disabled: disabled
+    disabled: disabled,
+    underlayColor: theme.__hd__.list.colors.checkedListItemContainerBackground
   }, /*#__PURE__*/React.createElement(React.Fragment, null, leadingStatus && /*#__PURE__*/React.createElement(StyledLeadingStatus, {
     themeLeadingStatusIntent: leadingStatus,
     testID: "leadingStatus"
@@ -12568,7 +12602,7 @@ var StyledTitleContainer = index$a(View)(function () {
     flex: 1
   };
 });
-var StyledListItemContainer = index$a(TouchableOpacity)(function (_ref3) {
+var StyledListItemContainer = index$a(TouchableHighlight)(function (_ref3) {
   var theme = _ref3.theme,
     themeSelected = _ref3.themeSelected,
     themeDisabled = _ref3.themeDisabled;
@@ -12594,13 +12628,15 @@ var BasicListItem = function BasicListItem(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     onPress = _ref.onPress;
+  var theme = useTheme();
   return /*#__PURE__*/React.createElement(StyledListItemContainer, {
     style: style,
     testID: testID,
     themeSelected: selected,
     themeDisabled: disabled,
     onPress: onPress,
-    disabled: disabled
+    disabled: disabled,
+    underlayColor: theme.__hd__.list.colors.checkedListItemContainerBackground
   }, /*#__PURE__*/React.createElement(React.Fragment, null, prefix && /*#__PURE__*/React.createElement(StyledPrefixContainer, null, typeof prefix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
     icon: prefix,
     intent: disabled ? 'disabled-text' : 'primary'
@@ -13812,7 +13848,7 @@ function MultiSelect(_ref) {
     pointerEvents: "none",
     style: style,
     testID: testID,
-    renderInputValue: renderSelectedValue !== undefined ? function (props) {
+    renderInputValue: renderSelectedValue !== undefined && (displayedValue === null || displayedValue === void 0 ? void 0 : displayedValue.length) > 0 ? function (props) {
       return renderSelectedValue(value, props);
     } : undefined
   }))))), /*#__PURE__*/React.createElement(BottomSheet$1, {
@@ -13939,7 +13975,10 @@ var OptionList = function OptionList(_ref) {
     onQueryChange: onQueryChange,
     sections: sections,
     renderItem: renderItem,
-    sectionListRef: sectionListRef
+    sectionListRef: sectionListRef,
+    style: _objectSpread2({}, onQueryChange ? {
+      height: Dimensions.get('screen').height
+    } : {})
   }, rest));
 };
 
@@ -13999,7 +14038,7 @@ var SingleSelect = function SingleSelect(_ref) {
     pointerEvents: "none",
     style: style,
     testID: testID,
-    renderInputValue: renderSelectedValue !== undefined ? function (props) {
+    renderInputValue: renderSelectedValue !== undefined && !!displayedValue ? function (props) {
       return renderSelectedValue(value, props);
     } : undefined
   }))))), /*#__PURE__*/React.createElement(BottomSheet$1, {

package/lib/index.js

@@ -1303,7 +1303,10 @@ var palette$2 = Object.assign(Object.assign({}, palette$8), {
   violetLight90: violet1.lighten90,
   violet: violet1.base,
   mauve: mauve.base,
+  mauveLight15: mauve.lighten15,
   mauveLight30: mauve.lighten30,
+  mauveLight40: mauve.lighten40,
+  mauveDark65: mauve.darken65,
   maasstrichtBlueLight10: maasstrichtBlue.lighten10,
   maasstrichtBlueDark20: maasstrichtBlue.darken20
 });
@@ -1432,11 +1435,11 @@ var globalPalette = {
 var swagDarkBrandSystemPalette = {
   primary: palette$2.mauve,
   onPrimary: palette$2.maasstrichtBlue,
-  secondary: palette$2.mauveLight30,
+  secondary: palette$2.mauveLight40,
   onSecondary: palette$2.maasstrichtBlue,
   defaultSurface: palette$2.maasstrichtBlue,
-  highlightedSurface: palette$2.scarletGumDark65,
-  pressedSurface: palette$2.scarletGumLight20,
+  highlightedSurface: palette$2.mauveDark65,
+  pressedSurface: palette$2.mauveLight15,
   decorativePrimary: palette$2.maasstrichtBlue,
   decorativePrimarySurface: palette$2.maasstrichtBlueLight10
 };
@@ -2700,6 +2703,7 @@ var getTagTheme = function getTagTheme(theme) {
 var getTextInputTheme = function getTextInputTheme(theme) {
   var colors = {
     labelBackground: theme.colors.defaultGlobalSurface,
+    containerBackground: theme.colors.defaultGlobalSurface,
     asterisks: {
       "default": theme.colors.onErrorSurface,
       error: theme.colors.onErrorSurface,
@@ -2870,9 +2874,9 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     primary: theme.colors.primary,
     secondary: theme.colors.secondary,
     info: theme.colors.onInfoSurface,
-    danger: theme.colors.onErrorSurface,
-    warning: theme.colors.onWarningSurface,
-    success: theme.colors.onSuccessSurface,
+    danger: theme.colors.error,
+    warning: theme.colors.warning,
+    success: theme.colors.success,
     inverted: theme.colors.onDarkGlobalSurface,
     archived: theme.colors.onArchivedSurface
   };
@@ -11460,7 +11464,9 @@ var StyledTextInputContainer = index$a(reactNative.View)(function (_ref13) {
   return {
     flexDirection: 'row',
     alignItems: 'center',
-    padding: theme.__hd__.textInput.space.containerPadding
+    padding: theme.__hd__.textInput.space.containerPadding,
+    backgroundColor: theme.__hd__.textInput.colors.containerBackground,
+    borderRadius: theme.__hd__.textInput.radii.container
   };
 });
 var StyledTextInputAndLabelContainer = index$a(reactNative.View)(function () {
@@ -11594,8 +11600,24 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     }, [textStyle]),
     borderStyle = _useMemo.borderStyle,
     textStyleWithoutBorderStyle = _useMemo.textStyleWithoutBorderStyle;
+  var _useMemo2 = React.useMemo(function () {
+      var _flattenTextStyle$bac;
+      if (!style) {
+        return {
+          backgroundColor: theme.__hd__.textInput.colors.containerBackground
+        };
+      }
+      var flattenTextStyle = reactNative.StyleSheet.flatten(style);
+      return {
+        backgroundColor: (_flattenTextStyle$bac = flattenTextStyle.backgroundColor) !== null && _flattenTextStyle$bac !== void 0 ? _flattenTextStyle$bac : theme.__hd__.textInput.colors.containerBackground,
+        styleWithoutBackgroundColor: omit(['backgroundColor'], flattenTextStyle)
+      };
+    }, [style, theme]),
+    backgroundColor = _useMemo2.backgroundColor,
+    styleWithoutBackgroundColor = _useMemo2.styleWithoutBackgroundColor;
   var nativeInputProps = _objectSpread2(_objectSpread2({
     style: reactNative.StyleSheet.flatten([{
+      backgroundColor: backgroundColor,
       color: theme.__hd__.textInput.colors.text
     }, textStyleWithoutBorderStyle]),
     testID: 'text-input',
@@ -11627,15 +11649,22 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     placeholder: isFocused || label === undefined ? nativeProps.placeholder : EMPTY_PLACEHOLDER_VALUE
   });
   return /*#__PURE__*/React__default["default"].createElement(StyledContainer$3, {
-    style: style,
+    style: styleWithoutBackgroundColor,
     pointerEvents: variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto',
     testID: testID
   }, /*#__PURE__*/React__default["default"].createElement(StyledTextInputContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledBorderBackDrop, {
     themeFocused: isFocused,
     themeVariant: variant,
-    style: borderStyle
+    testID: "text-input-border",
+    style: [{
+      backgroundColor: backgroundColor
+    }, borderStyle]
   }), (isFocused || label && !isEmptyValue) && /*#__PURE__*/React__default["default"].createElement(StyledLabelContainer, {
-    pointerEvents: "none"
+    pointerEvents: "none",
+    testID: "label-container",
+    style: {
+      backgroundColor: backgroundColor
+    }
   }, required && /*#__PURE__*/React__default["default"].createElement(StyledAsteriskLabel, {
     themeVariant: variant,
     fontSize: "small"
@@ -11643,7 +11672,10 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     nativeID: accessibilityLabelledBy,
     testID: "input-label",
     fontSize: "small",
-    themeVariant: variant
+    themeVariant: variant,
+    style: {
+      backgroundColor: backgroundColor
+    }
   }, label)), typeof prefix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
     intent: variant === 'disabled' ? 'disabled-text' : 'text',
     testID: "input-prefix",
@@ -12463,7 +12495,7 @@ var index$6 = Object.assign(FAB, {
   ActionGroup: ActionGroup
 });
 
-var StyledListItemContainer$1 = index$a(reactNative.TouchableOpacity)(function (_ref) {
+var StyledListItemContainer$1 = index$a(reactNative.TouchableHighlight)(function (_ref) {
   var theme = _ref.theme,
     _ref$themeSelected = _ref.themeSelected,
     themeSelected = _ref$themeSelected === void 0 ? false : _ref$themeSelected,
@@ -12549,13 +12581,15 @@ var ListItem = function ListItem(_ref) {
     onPress = _ref.onPress,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+  var theme = useTheme();
   return /*#__PURE__*/React__default["default"].createElement(StyledListItemContainer$1, {
     style: style,
     testID: testID,
     themeSelected: selected,
     themeVariant: variant,
     onPress: onPress,
-    disabled: disabled
+    disabled: disabled,
+    underlayColor: theme.__hd__.list.colors.checkedListItemContainerBackground
   }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, leadingStatus && /*#__PURE__*/React__default["default"].createElement(StyledLeadingStatus, {
     themeLeadingStatusIntent: leadingStatus,
     testID: "leadingStatus"
@@ -12597,7 +12631,7 @@ var StyledTitleContainer = index$a(reactNative.View)(function () {
     flex: 1
   };
 });
-var StyledListItemContainer = index$a(reactNative.TouchableOpacity)(function (_ref3) {
+var StyledListItemContainer = index$a(reactNative.TouchableHighlight)(function (_ref3) {
   var theme = _ref3.theme,
     themeSelected = _ref3.themeSelected,
     themeDisabled = _ref3.themeDisabled;
@@ -12623,13 +12657,15 @@ var BasicListItem = function BasicListItem(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     onPress = _ref.onPress;
+  var theme = useTheme();
   return /*#__PURE__*/React__default["default"].createElement(StyledListItemContainer, {
     style: style,
     testID: testID,
     themeSelected: selected,
     themeDisabled: disabled,
     onPress: onPress,
-    disabled: disabled
+    disabled: disabled,
+    underlayColor: theme.__hd__.list.colors.checkedListItemContainerBackground
   }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, prefix && /*#__PURE__*/React__default["default"].createElement(StyledPrefixContainer, null, typeof prefix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
     icon: prefix,
     intent: disabled ? 'disabled-text' : 'primary'
@@ -13841,7 +13877,7 @@ function MultiSelect(_ref) {
     pointerEvents: "none",
     style: style,
     testID: testID,
-    renderInputValue: renderSelectedValue !== undefined ? function (props) {
+    renderInputValue: renderSelectedValue !== undefined && (displayedValue === null || displayedValue === void 0 ? void 0 : displayedValue.length) > 0 ? function (props) {
       return renderSelectedValue(value, props);
     } : undefined
   }))))), /*#__PURE__*/React__default["default"].createElement(BottomSheet$1, {
@@ -13968,7 +14004,10 @@ var OptionList = function OptionList(_ref) {
     onQueryChange: onQueryChange,
     sections: sections,
     renderItem: renderItem,
-    sectionListRef: sectionListRef
+    sectionListRef: sectionListRef,
+    style: _objectSpread2({}, onQueryChange ? {
+      height: reactNative.Dimensions.get('screen').height
+    } : {})
   }, rest));
 };
 
@@ -14028,7 +14067,7 @@ var SingleSelect = function SingleSelect(_ref) {
     pointerEvents: "none",
     style: style,
     testID: testID,
-    renderInputValue: renderSelectedValue !== undefined ? function (props) {
+    renderInputValue: renderSelectedValue !== undefined && !!displayedValue ? function (props) {
       return renderSelectedValue(value, props);
     } : undefined
   }))))), /*#__PURE__*/React__default["default"].createElement(BottomSheet$1, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.12.0-rc.0",
+  "version": "8.12.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.12.0-rc.0",
+    "@hero-design/colors": "8.12.1",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -44,7 +44,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.12.0-rc.0",
+    "@hero-design/eslint-plugin": "8.12.1",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -60,9 +60,9 @@
     "@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.12.0-rc.0",
+    "eslint-config-hd": "8.12.1",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.12.0-rc.0",
+    "prettier-config-hd": "8.12.1",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

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

@@ -44,6 +44,8 @@ exports[`DatePickerAndroid renders correctly 1`] = `
           Array [
             Object {
               "alignItems": "center",
+              "backgroundColor": "#ffffff",
+              "borderRadius": 8,
               "flexDirection": "row",
               "padding": 16,
             },
@@ -64,9 +66,15 @@ exports[`DatePickerAndroid renders correctly 1`] = `
                 "right": 0,
                 "top": 0,
               },
-              undefined,
+              Array [
+                Object {
+                  "backgroundColor": "#ffffff",
+                },
+                undefined,
+              ],
             ]
           }
+          testID="text-input-border"
           themeFocused={false}
           themeVariant="filled"
         />
@@ -83,9 +91,12 @@ exports[`DatePickerAndroid renders correctly 1`] = `
                 "top": -10,
                 "zIndex": 1,
               },
-              undefined,
+              Object {
+                "backgroundColor": "#ffffff",
+              },
             ]
           }
+          testID="label-container"
         >
           <Text
             style={
@@ -101,7 +112,9 @@ exports[`DatePickerAndroid renders correctly 1`] = `
                   Object {
                     "color": "#001f23",
                   },
-                  undefined,
+                  Object {
+                    "backgroundColor": "#ffffff",
+                  },
                 ],
               ]
             }
@@ -151,6 +164,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
                   "textAlignVertical": "center",
                 },
                 Object {
+                  "backgroundColor": "#ffffff",
                   "color": "#001f23",
                 },
               ]

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

@@ -44,6 +44,8 @@ exports[`DatePickerIOS renders correctly 1`] = `
           Array [
             Object {
               "alignItems": "center",
+              "backgroundColor": "#ffffff",
+              "borderRadius": 8,
               "flexDirection": "row",
               "padding": 16,
             },
@@ -64,9 +66,15 @@ exports[`DatePickerIOS renders correctly 1`] = `
                 "right": 0,
                 "top": 0,
               },
-              undefined,
+              Array [
+                Object {
+                  "backgroundColor": "#ffffff",
+                },
+                undefined,
+              ],
             ]
           }
+          testID="text-input-border"
           themeFocused={false}
           themeVariant="filled"
         />
@@ -83,9 +91,12 @@ exports[`DatePickerIOS renders correctly 1`] = `
                 "top": -10,
                 "zIndex": 1,
               },
-              undefined,
+              Object {
+                "backgroundColor": "#ffffff",
+              },
             ]
           }
+          testID="label-container"
         >
           <Text
             style={
@@ -101,7 +112,9 @@ exports[`DatePickerIOS renders correctly 1`] = `
                   Object {
                     "color": "#001f23",
                   },
-                  undefined,
+                  Object {
+                    "backgroundColor": "#ffffff",
+                  },
                 ],
               ]
             }
@@ -151,6 +164,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                   "textAlignVertical": "center",
                 },
                 Object {
+                  "backgroundColor": "#ffffff",
                   "color": "#001f23",
                 },
               ]

package/src/components/List/BasicListItem.tsx

@@ -9,6 +9,7 @@ import {
   StyledListItemContainer,
 } from './StyledBasicListItem';
 import type { IconName } from '../Icon';
+import { useTheme } from '../../theme';
 
 export interface ListItemProps {
   /**
@@ -60,6 +61,8 @@ const BasicListItem = ({
   disabled = false,
   onPress,
 }: ListItemProps): JSX.Element => {
+  const theme = useTheme();
+
   return (
     <StyledListItemContainer
       style={style}
@@ -68,6 +71,9 @@ const BasicListItem = ({
       themeDisabled={disabled}
       onPress={onPress}
       disabled={disabled}
+      underlayColor={
+        theme.__hd__.list.colors.checkedListItemContainerBackground
+      }
     >
       <>
         {prefix && (

package/src/components/List/ListItem.tsx

@@ -15,6 +15,7 @@ import {
   StyledTitleContainer,
 } from './StyledListItem';
 import type { IconName } from '../Icon';
+import { useTheme } from '../../theme';
 
 export interface ListItemProps {
   /**
@@ -81,6 +82,8 @@ const ListItem = ({
   onPress,
   disabled = false,
 }: ListItemProps): JSX.Element => {
+  const theme = useTheme();
+
   return (
     <StyledListItemContainer
       style={style}
@@ -89,6 +92,9 @@ const ListItem = ({
       themeVariant={variant}
       onPress={onPress}
       disabled={disabled}
+      underlayColor={
+        theme.__hd__.list.colors.checkedListItemContainerBackground
+      }
     >
       <>
         {leadingStatus && (

package/src/components/List/StyledBasicListItem.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/native';
-import { TouchableOpacity, View } from 'react-native';
+import { TouchableHighlight, View } from 'react-native';
 
 const StyledPrefixContainer = styled(View)(({ theme }) => ({
   marginRight: theme.__hd__.list.space.prefixContainerMarginRight,
@@ -11,7 +11,7 @@ const StyledTitleContainer = styled(View)(() => ({
   flex: 1,
 }));
 
-const StyledListItemContainer = styled(TouchableOpacity)<{
+const StyledListItemContainer = styled(TouchableHighlight)<{
   themeSelected?: boolean;
   themeDisabled?: boolean;
 }>(({ theme, themeSelected, themeDisabled }) => ({

package/src/components/List/StyledListItem.tsx

@@ -1,4 +1,4 @@
-import { TouchableOpacity, View } from 'react-native';
+import { TouchableHighlight, View } from 'react-native';
 import styled from '@emotion/native';
 
 export type Variant = 'full-width' | 'card';
@@ -9,7 +9,7 @@ export type LeadingStatusIntent =
   | 'info'
   | 'archived';
 
-const StyledListItemContainer = styled(TouchableOpacity)<{
+const StyledListItemContainer = styled(TouchableHighlight)<{
   themeSelected?: boolean;
   themeVariant?: Variant;
 }>(({ theme, themeSelected = false, themeVariant = 'basic' }) => {