@hero-design/rn 7.28.0 → 7.29.0

package/lib/index.js

@@ -1260,6 +1260,7 @@ var globalPalette = {
   disabledOnDefaultGlobalSurface: palette$6.greyLight30,
   darkGlobalSurface: palette$6.maasstrichtBlue,
   onDarkGlobalSurface: palette$6.white,
+  overlayGlobalSurface: palette$6.black,
   // Outlines
   primaryOutline: palette$6.maasstrichtBlue,
   secondaryOutline: palette$6.greyLight75,
@@ -1445,7 +1446,7 @@ var getFonts = function getFonts(_ref) {
   };
 };
 var getFontSizes = function getFontSizes(baseFontSize) {
-  var fontSizes = Array.from(new Array(9));
+  var fontSizes = Array.from(new Array(11));
   fontSizes.forEach(function (_, index) {
     if (index === 0) {
       fontSizes[0] = baseFontSize;
@@ -1455,6 +1456,7 @@ var getFontSizes = function getFontSizes(baseFontSize) {
     return undefined;
   });
   return {
+    '7xlarge': scale(fontSizes[10]),
     xxxxxlarge: scale(fontSizes[8]),
     xxxxlarge: scale(fontSizes[7]),
     xxxlarge: scale(fontSizes[6]),
@@ -1470,6 +1472,7 @@ var getFontSizes = function getFontSizes(baseFontSize) {
 var getLineHeights = function getLineHeights(fontSizes) {
   var additionalSpace = 8;
   return {
+    '7xlarge': fontSizes['7xlarge'] + additionalSpace,
     xxxxxlarge: fontSizes.xxxxxlarge + additionalSpace,
     xxxxlarge: fontSizes.xxxxlarge + additionalSpace,
     xxxlarge: fontSizes.xxxlarge + additionalSpace,
@@ -1735,17 +1738,16 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
   var colors = {
     shadow: theme.colors.primaryOutline,
     background: theme.colors.defaultGlobalSurface,
-    backdrop: theme.colors.darkGlobalSurface
+    backdrop: theme.colors.overlayGlobalSurface
   };
   var sizes = {
-    sectionHeight: theme.sizes.xxxxxlarge,
     closeIcon: theme.sizes.xxxlarge
   };
   var space = {
     headerWrapperVerticalPadding: theme.space.small,
     headerWrapperHorizontalPadding: theme.space.medium,
     closeIconMargin: theme.space.smallMedium,
-    footerVerticalPadding: theme.space.small,
+    footerVerticalPadding: theme.space.xxsmall,
     footerHorizontalPadding: theme.space.smallMedium
   };
   var shadows = {
@@ -1753,8 +1755,8 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
       width: 0,
       height: 3
     },
-    opacity: 0.27,
-    radius: 4.65,
+    opacity: 0.4,
+    radius: theme.radii.xlarge,
     elevation: 10
   };
   var radii = {
@@ -1993,15 +1995,16 @@ var getEmptyTheme = function getEmptyTheme(theme) {
   var colors = {
     text: theme.colors.onDefaultGlobalSurface,
     invertedText: theme.colors.onDarkGlobalSurface,
-    subduedText: theme.colors.disabledOnDefaultGlobalSurface
+    subduedText: theme.colors.mutedOnDefaultGlobalSurface,
+    invertedSubduedText: theme.colors.onDarkGlobalSurface
   };
   var fontSizes = {
-    title: theme.fontSizes.xxxxlarge,
-    description: theme.fontSizes.large
+    title: theme.fontSizes.xxxlarge,
+    description: theme.fontSizes.xlarge
   };
   var fonts = {
-    title: theme.fonts.neutral.semiBold,
-    description: theme.fonts.neutral.light
+    title: theme.fonts.playful.semiBold,
+    description: theme.fonts.playful.regular
   };
   return {
     fontSizes: fontSizes,
@@ -2018,7 +2021,7 @@ var getFABTheme = function getFABTheme(theme) {
     icon: theme.colors.onPrimary,
     headerText: theme.colors.onDarkGlobalSurface,
     actionItemBackground: theme.colors.primary,
-    backdropBackground: theme.colors.darkGlobalSurface,
+    backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onDarkGlobalSurface,
     actionItemText: theme.colors.onPrimary
   };
@@ -2332,24 +2335,22 @@ var getSectionHeadingTheme = function getSectionHeadingTheme(theme) {
 };
 
 var getSelectTheme = function getSelectTheme(theme) {
-  var colors = {
-    footerText: theme.colors.secondary
-  };
   var space = {
     minimumOptionListHeight: theme.space.xxxxlarge * 5,
     sectionSpacing: theme.space.smallMedium,
     optionSpacing: theme.space.xsmall,
-    optionHorizontalMargin: theme.space.smallMedium,
+    optionListHorizontalPadding: theme.space.smallMedium,
     searchBarMarginTopSpacing: theme.space.small,
     searchBarHorizontalSpacing: theme.space.medium,
-    searchBarBottomSpacing: theme.space.small
+    searchBarBottomSpacing: theme.space.small,
+    singleSelectContentPaddingBottom: theme.space.medium,
+    suffixMarginRight: theme.space.smallMedium
   };
   var radii = {
     option: theme.radii.base
   };
   return {
     space: space,
-    colors: colors,
     radii: radii
   };
 };
@@ -2718,7 +2719,8 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     large: theme.fontSizes.large,
     xlarge: theme.fontSizes.xlarge,
     xxxlarge: theme.fontSizes.xxxlarge,
-    xxxxxlarge: theme.fontSizes.xxxxxlarge
+    xxxxxlarge: theme.fontSizes.xxxxxlarge,
+    '7xlarge': theme.fontSizes['7xlarge']
   };
   var lineHeights = {
     small: theme.lineHeights.small,
@@ -2726,7 +2728,8 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     large: theme.lineHeights.large,
     xlarge: theme.lineHeights.xlarge,
     xxxlarge: theme.lineHeights.xxxlarge,
-    xxxxxlarge: theme.lineHeights.xxxxxlarge
+    xxxxxlarge: theme.lineHeights.xxxxxlarge,
+    '7xlarge': theme.lineHeights['7xlarge']
   };
   return {
     colors: colors,
@@ -7073,7 +7076,7 @@ var StyledBackdrop$2 = index$a(AnimatedPressable$1)(function (_ref2) {
   var theme = _ref2.theme;
   return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.bottomSheet.colors.backdrop,
-    opacity: 0.48
+    opacity: 0.4
   });
 });
 var StyledHeaderWrapper = index$a(reactNative.View)(function (_ref3) {
@@ -7093,7 +7096,6 @@ var StyledFooter = index$a(reactNative.View)(function (_ref4) {
   return {
     paddingHorizontal: theme.__hd__.bottomSheet.space.footerHorizontalPadding,
     paddingVertical: theme.__hd__.bottomSheet.space.footerVerticalPadding,
-    minHeight: theme.__hd__.bottomSheet.sizes.sectionHeight,
     alignItems: 'center',
     justifyContent: 'flex-end',
     flexDirection: 'row'
@@ -7626,7 +7628,7 @@ var Header = function Header(_ref) {
     onPress: onRequestClose,
     intent: "text",
     testID: "bottom-sheet-close-icon",
-    size: "small"
+    size: "xsmall"
   })) : null), showDivider ? /*#__PURE__*/React__default["default"].createElement(Divider, null) : null);
 };
 
@@ -10824,6 +10826,9 @@ var getVariant$1 = function getVariant(_ref) {
   }
   return 'default';
 };
+// Fix issue: Placeholder is not shown on iOS when multiline is true
+// https://github.com/callstack/react-native-paper/pull/3331
+var EMPTY_PLACEHOLDER_VALUE = ' ';
 var TextInput = function TextInput(_ref2) {
   var _ref3;
   var label = _ref2.label,
@@ -10909,7 +10914,7 @@ var TextInput = function TextInput(_ref2) {
       (_nativeProps$onChange = nativeProps.onChangeText) === null || _nativeProps$onChange === void 0 ? void 0 : _nativeProps$onChange.call(nativeProps, text);
     },
     defaultValue: defaultValue,
-    placeholder: isFocused || label === undefined ? nativeProps.placeholder : undefined
+    placeholder: isFocused || label === undefined ? nativeProps.placeholder : EMPTY_PLACEHOLDER_VALUE
   });
   return /*#__PURE__*/React__default["default"].createElement(StyledContainer$3, {
     style: style,
@@ -11071,18 +11076,16 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
       return setOpen(false);
     },
     header: label,
-    footer: /*#__PURE__*/React__default["default"].createElement(reactNative.TouchableOpacity, {
+    footer: /*#__PURE__*/React__default["default"].createElement(CompoundButton, {
+      variant: "text",
+      text: confirmLabel,
       onPress: function onPress() {
         if (selectingDate) {
           onChange(selectingDate);
         }
         setOpen(false);
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
-      fontSize: "large",
-      fontWeight: "semi-bold",
-      intent: "primary"
-    }, confirmLabel))
+    })
   }, /*#__PURE__*/React__default["default"].createElement(StyledPickerWrapper$1, null, /*#__PURE__*/React__default["default"].createElement(DateTimePicker__default["default"], {
     testID: "datePickerIOS",
     value: selectingDate,
@@ -11422,7 +11425,7 @@ var StyledDescription = index$a(reactNative.Text)(function (_ref3) {
     fontFamily: theme.__hd__.empty.fonts.description,
     fontSize: theme.__hd__.empty.fontSizes.description,
     textAlign: 'center',
-    color: themeVariant === 'dark' ? theme.__hd__.empty.colors.invertedText : theme.__hd__.empty.colors.subduedText
+    color: themeVariant === 'dark' ? theme.__hd__.empty.colors.invertedSubduedText : theme.__hd__.empty.colors.subduedText
   };
 });
 
@@ -11693,7 +11696,7 @@ var ActionGroup = function ActionGroup(_ref2) {
   });
   var interpolatedBackdropOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
-    outputRange: [0, 0.9]
+    outputRange: [0, 0.4]
   });
   var interpolatedActionGroupOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
@@ -12847,42 +12850,14 @@ var SectionHeading = function SectionHeading(_ref) {
   }, text)), rightChildren);
 };
 
-var SectionSpacer = index$a(reactNative.View)(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    marginTop: theme.__hd__.select.space.sectionSpacing
-  };
-});
-var OptionSpacer = index$a(reactNative.View)(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    marginTop: theme.__hd__.select.space.optionSpacing
-  };
-});
-var FooterText = index$a(Typography.Text)(function (_ref3) {
-  var theme = _ref3.theme;
-  return {
-    color: theme.__hd__.select.colors.footerText
-  };
-});
-var StyledSearchBar = index$a(reactNative.View)(function (_ref4) {
-  var theme = _ref4.theme;
-  return {
-    marginTop: theme.__hd__.select.space.searchBarMarginTopSpacing,
-    paddingHorizontal: theme.__hd__.select.space.searchBarHorizontalSpacing,
-    paddingBottom: theme.__hd__.select.space.searchBarBottomSpacing
-  };
-});
-
 var Footer = function Footer(_ref) {
   var label = _ref.label,
     onPress = _ref.onPress;
-  return /*#__PURE__*/React__default["default"].createElement(reactNative.TouchableOpacity, {
+  return /*#__PURE__*/React__default["default"].createElement(CompoundButton, {
+    variant: "text",
+    text: label,
     onPress: onPress
-  }, /*#__PURE__*/React__default["default"].createElement(FooterText, {
-    fontSize: "large",
-    fontWeight: "semi-bold"
-  }, label));
+  });
 };
 
 var isSections = function isSections(options) {
@@ -12947,7 +12922,34 @@ var useKeyboard = function useKeyboard() {
   };
 };
 
-var StyledOptionList = function StyledOptionList(_ref) {
+var SectionSpacer = index$a(reactNative.View)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    marginTop: theme.__hd__.select.space.sectionSpacing
+  };
+});
+var OptionSpacer = index$a(reactNative.View)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    marginTop: theme.__hd__.select.space.optionSpacing
+  };
+});
+var StyledSearchBar = index$a(reactNative.View)(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    marginTop: theme.__hd__.select.space.searchBarMarginTopSpacing,
+    paddingHorizontal: theme.__hd__.select.space.searchBarHorizontalSpacing,
+    paddingBottom: theme.__hd__.select.space.searchBarBottomSpacing
+  };
+});
+var StyledSectionList = index$a(reactNative.SectionList)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    paddingHorizontal: theme.__hd__.select.space.optionListHorizontalPadding
+  };
+});
+
+var BaseOptionList = function BaseOptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
     onEndReached = _ref.onEndReached,
@@ -12960,7 +12962,7 @@ var StyledOptionList = function StyledOptionList(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     onEndReachedCalled = _useState2[0],
     setOnEndReachedCalled = _useState2[1];
-  return /*#__PURE__*/React__default["default"].createElement(reactNative.SectionList, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledSectionList, {
     ref: sectionListRef,
     style: _objectSpread2({}, onQueryChange ? {
       height: reactNative.Dimensions.get('screen').height
@@ -13002,18 +13004,25 @@ var Option$2 = function Option(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     selected = _ref.selected,
-    onPress = _ref.onPress;
+    onPress = _ref.onPress,
+    _ref$highlighted = _ref.highlighted,
+    highlighted = _ref$highlighted === void 0 ? false : _ref$highlighted;
   var theme = useTheme();
-  return /*#__PURE__*/React__default["default"].createElement(List.BasicItem, {
+  var props = {
     selected: selected,
     disabled: disabled,
     onPress: onPress,
     title: text,
-    suffix: selected ? 'checkmark' : undefined,
-    style: {
-      marginHorizontal: theme.__hd__.select.space.optionHorizontalMargin
-    }
-  });
+    suffix: selected === true ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+      icon: "checkmark",
+      intent: disabled ? 'disabled-text' : 'primary',
+      size: "small",
+      style: {
+        marginRight: theme.__hd__.select.space.suffixMarginRight
+      }
+    }) : undefined
+  };
+  return highlighted === true ? /*#__PURE__*/React__default["default"].createElement(List.Item, props) : /*#__PURE__*/React__default["default"].createElement(List.BasicItem, props);
 };
 
 var OptionList$1 = function OptionList(_ref) {
@@ -13045,10 +13054,11 @@ var OptionList$1 = function OptionList(_ref) {
       selected: selected,
       text: item.text,
       disabled: item.disabled,
-      onPress: onItemPress
+      onPress: onItemPress,
+      highlighted: item.highlighted
     });
   };
-  return /*#__PURE__*/React__default["default"].createElement(StyledOptionList, {
+  return /*#__PURE__*/React__default["default"].createElement(BaseOptionList, {
     keyExtractor: keyExtractor,
     loading: loading,
     onEndReached: onEndReached,
@@ -13103,6 +13113,9 @@ function MultiSelect(_ref) {
   }).map(function (opt) {
     return opt.text;
   }).join(', ');
+  useDeprecation("Select's onDimiss is deprecated and will be removed in the next major release. Please use onDismiss instead.", onDimiss !== undefined);
+  useDeprecation("Select's numberOfLines is deprecated and will be removed in the next major release. Please use inputProps.numberOfLines instead.", numberOfLines !== undefined);
+  useDeprecation("Select's inputProps.required is deprecated and will be removed in the next major release. Please use Select's required prop instead.", (inputProps === null || inputProps === void 0 ? void 0 : inputProps.required) !== undefined);
   React.useEffect(function () {
     setSelectingValue(value);
   }, [open]);
@@ -13187,19 +13200,25 @@ var Option$1 = function Option(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     selected = _ref.selected,
-    onPress = _ref.onPress;
-  var theme = useTheme();
-  return /*#__PURE__*/React__default["default"].createElement(List.BasicItem, {
+    onPress = _ref.onPress,
+    _ref$highlighted = _ref.highlighted,
+    highlighted = _ref$highlighted === void 0 ? false : _ref$highlighted;
+  var props = {
     selected: selected,
     disabled: disabled,
     onPress: onPress,
-    title: text,
-    style: {
-      marginHorizontal: theme.__hd__.select.space.optionHorizontalMargin
-    }
-  });
+    title: text
+  };
+  return highlighted === true ? /*#__PURE__*/React__default["default"].createElement(List.Item, props) : /*#__PURE__*/React__default["default"].createElement(List.BasicItem, props);
 };
 
+var StyledOptionList = index$a(BaseOptionList)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    paddingBottom: theme.__hd__.select.space.singleSelectContentPaddingBottom
+  };
+});
+
 var OptionList = function OptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -13227,7 +13246,8 @@ var OptionList = function OptionList(_ref) {
       selected: selected,
       text: item.text,
       disabled: item.disabled,
-      onPress: onItemPress
+      onPress: onItemPress,
+      highlighted: item.highlighted
     });
   };
   return /*#__PURE__*/React__default["default"].createElement(StyledOptionList, {
@@ -13279,6 +13299,9 @@ var SingleSelect = function SingleSelect(_ref) {
   var displayedValue = (_flatOptions$find = flatOptions.find(function (opt) {
     return value === opt.value;
   })) === null || _flatOptions$find === void 0 ? void 0 : _flatOptions$find.text;
+  useDeprecation("Select's onDimiss is deprecated and will be removed in the next major release. Please use onDismiss instead.", onDimiss !== undefined);
+  useDeprecation("Select's numberOfLines is deprecated and will be removed in the next major release. Please use inputProps.numberOfLines instead.", numberOfLines !== undefined);
+  useDeprecation("Select's inputProps.required is deprecated and will be removed in the next major release. Please use Select's required prop instead.", (inputProps === null || inputProps === void 0 ? void 0 : inputProps.required) !== undefined);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: !editable || disabled || inputProps !== null && inputProps !== void 0 && inputProps.loading ? 'none' : 'auto'
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.TouchableOpacity, {
@@ -13694,7 +13717,9 @@ var getTabItem$1 = function getTabItem(_ref) {
       icon: item,
       testID: "hero-icon-".concat(item),
       size: "small",
-      intent: active ? 'info' : 'text'
+      style: {
+        color: color
+      }
     });
   }
   if (typeof item === 'string') {
@@ -14043,7 +14068,7 @@ var Tag = function Tag(_ref) {
     style = _ref.style,
     testID = _ref.testID,
     nativeProps = _objectWithoutProperties(_ref, _excluded);
-  useDeprecation("Tag's default intent is deprecated and will be removed in the next major release.\nPlease use other intents instead.", intent !== 'default');
+  useDeprecation("Tag's default intent is deprecated and will be removed in the next major release.\nPlease use primary intent instead.", intent === 'default');
   return /*#__PURE__*/React__default["default"].createElement(StyledView, _extends$1({}, nativeProps, {
     themeIntent: intent,
     themeVariant: variant,
@@ -14167,18 +14192,16 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
       return setOpen(false);
     },
     header: label,
-    footer: /*#__PURE__*/React__default["default"].createElement(reactNative.TouchableOpacity, {
+    footer: /*#__PURE__*/React__default["default"].createElement(CompoundButton, {
+      variant: "text",
+      text: confirmLabel,
       onPress: function onPress() {
         if (selectingDate) {
           onChange(selectingDate);
         }
         setOpen(false);
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
-      fontSize: "large",
-      fontWeight: "semi-bold",
-      intent: "primary"
-    }, confirmLabel))
+    })
   }, /*#__PURE__*/React__default["default"].createElement(StyledPickerWrapper, null, /*#__PURE__*/React__default["default"].createElement(DateTimePicker__default["default"], {
     testID: "timePickerIOS",
     value: selectingDate,
@@ -14399,7 +14422,7 @@ var ToastContainer = /*#__PURE__*/React__default["default"].forwardRef(function
   var _ref2$displayType = _ref2.displayType,
     displayType = _ref2$displayType === void 0 ? 'single' : _ref2$displayType,
     _ref2$position = _ref2.position,
-    position = _ref2$position === void 0 ? 'top' : _ref2$position,
+    position = _ref2$position === void 0 ? 'bottom' : _ref2$position,
     style = _ref2.style;
   var theme = useTheme$1();
   var _useState = React.useState([]),
@@ -14462,8 +14485,9 @@ var ToastProvider = function ToastProvider(_ref) {
   var children = _ref.children,
     _ref$displayType = _ref.displayType,
     displayType = _ref$displayType === void 0 ? 'single' : _ref$displayType,
-    _ref$position = _ref.position,
-    position = _ref$position === void 0 ? 'top' : _ref$position;
+    _position = _ref.position;
+  var position = _position === undefined ? 'bottom' : _position;
+  useDeprecation("Toast's position prop is deprecated and will be removed in the next major release.\nPlease remove it.", _position !== undefined);
   var toastRef = React.useRef(null);
   // @ts-expect-error: TODO: @tungv Fix this type error
   var _useState = React.useState(null),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.28.0",
+  "version": "7.29.0",
   "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.28.0",
+    "@hero-design/colors": "7.29.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.12"
@@ -43,6 +43,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
+    "@hero-design/eslint-plugin": "7.29.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -58,7 +59,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.28.0",
+    "eslint-config-hd": "7.29.0",
     "jest": "^27.3.1",
     "react": "17.0.2",
     "react-native": "0.65.1",
@@ -72,7 +73,7 @@
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-flow": "^1.1.1",
     "ts-jest": "^27.0.7",
-    "prettier-config-hd": "7.28.0",
+    "prettier-config-hd": "7.29.0",
     "rn-7-23-0": "npm:@hero-design/rn@7.23.0"
   },
   "prettier": "prettier-config-hd"

package/src/components/Alert/index.tsx

@@ -62,6 +62,7 @@ interface AlertProps {
    */
   onClose?: () => void;
   /**
+   * @deprecated
    * Use rounded variant.
    */
   variant?: 'default' | 'round';

package/src/components/BottomSheet/Header.tsx

@@ -40,7 +40,7 @@ const Header = ({
             onPress={onRequestClose}
             intent="text"
             testID="bottom-sheet-close-icon"
-            size="small"
+            size="xsmall"
           />
         </StyledIconWrapper>
       ) : null}

package/src/components/BottomSheet/StyledBottomSheet.tsx

@@ -46,7 +46,7 @@ const StyledBackdrop = styled(AnimatedPressable)<
 >(({ theme }) => ({
   ...StyleSheet.absoluteFillObject,
   backgroundColor: theme.__hd__.bottomSheet.colors.backdrop,
-  opacity: 0.48,
+  opacity: 0.4,
 }));
 
 const StyledHeaderWrapper = styled(View)(({ theme }) => ({
@@ -64,7 +64,6 @@ const StyledHeader = styled(View)<ViewProps>({
 const StyledFooter = styled(View)<ViewProps>(({ theme }) => ({
   paddingHorizontal: theme.__hd__.bottomSheet.space.footerHorizontalPadding,
   paddingVertical: theme.__hd__.bottomSheet.space.footerVerticalPadding,
-  minHeight: theme.__hd__.bottomSheet.sizes.sectionHeight,
   alignItems: 'center',
   justifyContent: 'flex-end',
   flexDirection: 'row',

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

@@ -56,7 +56,7 @@ exports[`BottomSheet renders correctly with close state 1`] = `
         onStartShouldSetResponder={[Function]}
         style={
           Object {
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#000000",
             "bottom": 0,
             "left": 0,
             "opacity": 0.48,
@@ -82,8 +82,8 @@ exports[`BottomSheet renders correctly with close state 1`] = `
               "height": 3,
               "width": 0,
             },
-            "shadowOpacity": 0.27,
-            "shadowRadius": 4.65,
+            "shadowOpacity": 0.4,
+            "shadowRadius": 16,
             "transform": Array [
               Object {
                 "scaleY": 1,
@@ -179,13 +179,13 @@ exports[`BottomSheet renders correctly with close state 1`] = `
                   Array [
                     Object {
                       "color": "#001f23",
-                      "fontSize": 20,
+                      "fontSize": 16,
                     },
                     undefined,
                   ]
                 }
                 themeIntent="text"
-                themeSize="small"
+                themeSize="xsmall"
               />
             </View>
           </View>
@@ -225,9 +225,8 @@ exports[`BottomSheet renders correctly with close state 1`] = `
                   "alignItems": "center",
                   "flexDirection": "row",
                   "justifyContent": "flex-end",
-                  "minHeight": 64,
                   "paddingHorizontal": 12,
-                  "paddingVertical": 8,
+                  "paddingVertical": 2,
                 },
                 undefined,
               ]
@@ -339,7 +338,7 @@ exports[`BottomSheet renders correctly with open state 1`] = `
         onStartShouldSetResponder={[Function]}
         style={
           Object {
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#000000",
             "bottom": 0,
             "left": 0,
             "opacity": 0,
@@ -365,8 +364,8 @@ exports[`BottomSheet renders correctly with open state 1`] = `
               "height": 3,
               "width": 0,
             },
-            "shadowOpacity": 0.27,
-            "shadowRadius": 4.65,
+            "shadowOpacity": 0.4,
+            "shadowRadius": 16,
             "transform": Array [
               Object {
                 "scaleY": 1,
@@ -462,13 +461,13 @@ exports[`BottomSheet renders correctly with open state 1`] = `
                   Array [
                     Object {
                       "color": "#001f23",
-                      "fontSize": 20,
+                      "fontSize": 16,
                     },
                     undefined,
                   ]
                 }
                 themeIntent="text"
-                themeSize="small"
+                themeSize="xsmall"
               />
             </View>
           </View>
@@ -508,9 +507,8 @@ exports[`BottomSheet renders correctly with open state 1`] = `
                   "alignItems": "center",
                   "flexDirection": "row",
                   "justifyContent": "flex-end",
-                  "minHeight": 64,
                   "paddingHorizontal": 12,
-                  "paddingVertical": 8,
+                  "paddingVertical": 2,
                 },
                 undefined,
               ]