@hero-design/rn 7.22.0 → 7.22.2

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output 37ea971f848bea65
+@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 20s
+@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

@@ -1,5 +1,5 @@
 import * as reactNative from 'react-native';
-import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, Easing, TouchableOpacity, Text as Text$1, Image as Image$1, TouchableWithoutFeedback, Pressable, SafeAreaView, TouchableHighlight, Modal, TextInput as TextInput$1, PanResponder, InteractionManager, SectionList, Keyboard, FlatList, LayoutAnimation } from 'react-native';
+import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, Easing, TouchableOpacity, Text as Text$1, Image as Image$1, TouchableWithoutFeedback, Pressable, SafeAreaView, KeyboardAvoidingView, TouchableHighlight, Modal, TextInput as TextInput$1, PanResponder, InteractionManager, SectionList, Keyboard, FlatList, LayoutAnimation } from 'react-native';
 import React, { useContext, createContext, createElement, forwardRef, useEffect, useCallback, useRef, useMemo, useState, useLayoutEffect, useImperativeHandle } from 'react';
 import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -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
   };
@@ -15234,6 +15236,12 @@ var AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);
 var StyledWrapper$7 = index$8(View)(_objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
   flexDirection: 'column-reverse'
 }));
+var StyledKeyboardAvoidingView = index$8(KeyboardAvoidingView)(function () {
+  return {
+    flex: 1,
+    flexDirection: 'column-reverse'
+  };
+});
 var StyledBottomSheet = index$8(AnimatedSafeAreaView)(function (_ref) {
   var theme = _ref.theme;
   return {
@@ -15936,18 +15944,18 @@ var BottomSheet = function BottomSheet(_ref) {
       _ref$showDivider = _ref.showDivider,
       showDivider = _ref$showDivider === void 0 ? true : _ref$showDivider,
       style = _ref.style,
-      testID = _ref.testID;
+      testID = _ref.testID,
+      _ref$keyboardAvoiding = _ref.keyboardAvoidingViewProps,
+      keyboardAvoidingViewProps = _ref$keyboardAvoiding === void 0 ? {} : _ref$keyboardAvoiding;
 
-  var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      height = _useState2[0],
-      setHeight = _useState2[1]; // Internal state to control modal open/close timing with animation
+  var _Dimensions$get = Dimensions.get('window'),
+      height = _Dimensions$get.height; // Internal state to control modal open/close timing with animation
 
 
-  var _useState3 = useState(open),
-      _useState4 = _slicedToArray(_useState3, 2),
-      visible = _useState4[0],
-      setVisibility = _useState4[1];
+  var _useState = useState(open),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisibility = _useState2[1];
 
   var animatedValue = useRef(new Animated.Value(open ? 0 : 1));
   useEffect(function () {
@@ -16005,11 +16013,9 @@ var BottomSheet = function BottomSheet(_ref) {
       opacity: interpolateOpacity
     },
     onPress: onRequestClose
-  }), /*#__PURE__*/React.createElement(StyledBottomSheet, {
-    onLayout: function onLayout(_ref3) {
-      var nativeEvent = _ref3.nativeEvent;
-      return setHeight(nativeEvent.layout.height);
-    },
+  }), /*#__PURE__*/React.createElement(StyledKeyboardAvoidingView, _extends$1({
+    behavior: Platform.OS === 'ios' ? 'padding' : 'height'
+  }, keyboardAvoidingViewProps), /*#__PURE__*/React.createElement(StyledBottomSheet, {
     style: [style, {
       transform: [{
         scaleY: height > 0 ? 1 : 0
@@ -16024,7 +16030,7 @@ var BottomSheet = function BottomSheet(_ref) {
     showCloseButton: showCloseButton
   }) : null, children, footer ? /*#__PURE__*/React.createElement(Footer$1, {
     showDivider: showDivider
-  }, footer) : null)));
+  }, footer) : null))));
 };
 
 var colors = {
@@ -19103,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) {
@@ -19208,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',
@@ -19236,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
   };
@@ -19259,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) {
@@ -19306,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),
@@ -19330,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
@@ -19358,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,
@@ -19377,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"
@@ -19391,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",
@@ -20383,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
   };
 });
 
@@ -41221,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
   };
@@ -15263,6 +15265,12 @@ var AnimatedSafeAreaView = reactNative.Animated.createAnimatedComponent(reactNat
 var StyledWrapper$7 = index$8(reactNative.View)(_objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
   flexDirection: 'column-reverse'
 }));
+var StyledKeyboardAvoidingView = index$8(reactNative.KeyboardAvoidingView)(function () {
+  return {
+    flex: 1,
+    flexDirection: 'column-reverse'
+  };
+});
 var StyledBottomSheet = index$8(AnimatedSafeAreaView)(function (_ref) {
   var theme = _ref.theme;
   return {
@@ -15965,18 +15973,18 @@ var BottomSheet = function BottomSheet(_ref) {
       _ref$showDivider = _ref.showDivider,
       showDivider = _ref$showDivider === void 0 ? true : _ref$showDivider,
       style = _ref.style,
-      testID = _ref.testID;
+      testID = _ref.testID,
+      _ref$keyboardAvoiding = _ref.keyboardAvoidingViewProps,
+      keyboardAvoidingViewProps = _ref$keyboardAvoiding === void 0 ? {} : _ref$keyboardAvoiding;
 
-  var _useState = React.useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      height = _useState2[0],
-      setHeight = _useState2[1]; // Internal state to control modal open/close timing with animation
+  var _Dimensions$get = reactNative.Dimensions.get('window'),
+      height = _Dimensions$get.height; // Internal state to control modal open/close timing with animation
 
 
-  var _useState3 = React.useState(open),
-      _useState4 = _slicedToArray(_useState3, 2),
-      visible = _useState4[0],
-      setVisibility = _useState4[1];
+  var _useState = React.useState(open),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisibility = _useState2[1];
 
   var animatedValue = React.useRef(new reactNative.Animated.Value(open ? 0 : 1));
   React.useEffect(function () {
@@ -16034,11 +16042,9 @@ var BottomSheet = function BottomSheet(_ref) {
       opacity: interpolateOpacity
     },
     onPress: onRequestClose
-  }), /*#__PURE__*/React__default["default"].createElement(StyledBottomSheet, {
-    onLayout: function onLayout(_ref3) {
-      var nativeEvent = _ref3.nativeEvent;
-      return setHeight(nativeEvent.layout.height);
-    },
+  }), /*#__PURE__*/React__default["default"].createElement(StyledKeyboardAvoidingView, _extends$1({
+    behavior: reactNative.Platform.OS === 'ios' ? 'padding' : 'height'
+  }, keyboardAvoidingViewProps), /*#__PURE__*/React__default["default"].createElement(StyledBottomSheet, {
     style: [style, {
       transform: [{
         scaleY: height > 0 ? 1 : 0
@@ -16053,7 +16059,7 @@ var BottomSheet = function BottomSheet(_ref) {
     showCloseButton: showCloseButton
   }) : null, children, footer ? /*#__PURE__*/React__default["default"].createElement(Footer$1, {
     showDivider: showDivider
-  }, footer) : null)));
+  }, footer) : null))));
 };
 
 var colors = {
@@ -19132,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) {
@@ -19237,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',
@@ -19265,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
   };
@@ -19288,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) {
@@ -19335,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),
@@ -19359,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
@@ -19387,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,
@@ -19406,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"
@@ -19420,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",
@@ -20412,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
   };
 });
 
@@ -41250,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.0",
+  "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.0",
+    "@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.0",
+    "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.0"
+    "prettier-config-hd": "7.22.2"
   },
   "prettier": "prettier-config-hd"
 }

package/src/components/BottomSheet/StyledBottomSheet.tsx

@@ -1,6 +1,8 @@
 import styled from '@emotion/native';
 import {
   Animated,
+  KeyboardAvoidingView,
+  KeyboardAvoidingViewProps,
   Pressable,
   SafeAreaView,
   StyleSheet,
@@ -17,6 +19,13 @@ const StyledWrapper = styled(View)<ViewProps>({
   flexDirection: 'column-reverse',
 });
 
+const StyledKeyboardAvoidingView = styled(
+  KeyboardAvoidingView
+)<KeyboardAvoidingViewProps>(() => ({
+  flex: 1,
+  flexDirection: 'column-reverse',
+}));
+
 const StyledBottomSheet = styled(AnimatedSafeAreaView)<
   ComponentProps<typeof AnimatedSafeAreaView>
 >(({ theme }) => ({
@@ -77,4 +86,5 @@ export {
   StyledIconWrapper,
   StyledBottomSheet,
   StyledBackdrop,
+  StyledKeyboardAvoidingView,
 };