@hero-design/rn 7.28.1 → 7.30.0

package/.eslintrc.js

@@ -4,7 +4,8 @@ module.exports = {
     tsconfigRootDir: __dirname,
     project: ['./tsconfig.json'],
   },
-  extends: ['hd'],
+  extends: ['hd', 'plugin:@hero-design/recommendedRn'],
+  plugins: ['@hero-design'],
   rules: {
     'no-underscore-dangle': [2, { allow: ['__hd__'] }],
   },

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output a03a3fb65bb94b93
-@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 '/Users/hieupham/Documents/workspace/EH/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 12.5s
-@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json
+@hero-design/rn:build: cache hit, replaying output 46db5217a7ebe96d
+@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 32.7s
+@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

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, KeyboardAvoidingView, Modal, TextInput as TextInput$1, PanResponder, TouchableHighlight, InteractionManager, useWindowDimensions, SectionList, Keyboard, FlatList, LayoutAnimation, RefreshControl as RefreshControl$1 } 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, Modal, TextInput as TextInput$1, PanResponder, TouchableHighlight, InteractionManager, useWindowDimensions, Keyboard, SectionList, FlatList, LayoutAnimation, RefreshControl as RefreshControl$1 } from 'react-native';
 import React, { useContext, createContext, createElement, useMemo, forwardRef, useEffect, useCallback, useRef, useState, useLayoutEffect, useImperativeHandle } from 'react';
 import { createIconSet } from 'react-native-vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -76,7 +76,7 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 function _extends$1() {
-  _extends$1 = Object.assign || function (target) {
+  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1046,6 +1046,7 @@ var blue$1 = colorScales.blue,
   violetDark15: violet$2.darken15,
   violetDark30: violet$2.darken30,
   violetDark45: violet$2.darken45,
+  violetDark60: violet$2.darken60,
   violetDark75: violet$2.darken75,
   violetLight30: violet$2.lighten30,
   violetLight60: violet$2.lighten60,
@@ -1712,15 +1713,14 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
     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.medium,
-    footerHorizontalPadding: theme.space.large
+    footerVerticalPadding: theme.space.xxsmall,
+    footerHorizontalPadding: theme.space.smallMedium
   };
   var shadows = {
     offset: {
@@ -2307,9 +2307,6 @@ 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,
@@ -2326,7 +2323,6 @@ var getSelectTheme = function getSelectTheme(theme) {
   };
   return {
     space: space,
-    colors: colors,
     radii: radii
   };
 };
@@ -7072,7 +7068,6 @@ var StyledFooter = index$a(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'
@@ -10803,6 +10798,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,
@@ -10888,7 +10886,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.createElement(StyledContainer$3, {
     style: style,
@@ -11050,18 +11048,16 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
       return setOpen(false);
     },
     header: label,
-    footer: /*#__PURE__*/React.createElement(TouchableOpacity, {
+    footer: /*#__PURE__*/React.createElement(CompoundButton, {
+      variant: "text",
+      text: confirmLabel,
       onPress: function onPress() {
         if (selectingDate) {
           onChange(selectingDate);
         }
         setOpen(false);
       }
-    }, /*#__PURE__*/React.createElement(Typography.Text, {
-      fontSize: "large",
-      fontWeight: "semi-bold",
-      intent: "primary"
-    }, confirmLabel))
+    })
   }, /*#__PURE__*/React.createElement(StyledPickerWrapper$1, null, /*#__PURE__*/React.createElement(DateTimePicker, {
     testID: "datePickerIOS",
     value: selectingDate,
@@ -11175,7 +11171,7 @@ var calculateSnapPointsData = function calculateSnapPointsData(minimumHeight, he
   var uniqSnapPointOffsetValues = Array.from(new Set([].concat(_toConsumableArray(snapPointsOffsetValues), [0])));
   return {
     list: uniqSnapPointOffsetValues,
-    minHeightOffset: Math.max.apply(Math, _toConsumableArray(uniqSnapPointOffsetValues)),
+    minHeightOffset: Math.max.apply(Math, uniqSnapPointOffsetValues),
     maxHeightOffset: 0 // Max height
   };
 };
@@ -12826,48 +12822,14 @@ var SectionHeading = function SectionHeading(_ref) {
   }, text)), rightChildren);
 };
 
-var SectionSpacer = index$a(View)(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    marginTop: theme.__hd__.select.space.sectionSpacing
-  };
-});
-var OptionSpacer = index$a(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(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 StyledSectionList = index$a(SectionList)(function (_ref5) {
-  var theme = _ref5.theme;
-  return {
-    paddingHorizontal: theme.__hd__.select.space.optionListHorizontalPadding
-  };
-});
-
 var Footer = function Footer(_ref) {
   var label = _ref.label,
     onPress = _ref.onPress;
-  return /*#__PURE__*/React.createElement(TouchableOpacity, {
+  return /*#__PURE__*/React.createElement(CompoundButton, {
+    variant: "text",
+    text: label,
     onPress: onPress
-  }, /*#__PURE__*/React.createElement(FooterText, {
-    fontSize: "large",
-    fontWeight: "semi-bold"
-  }, label));
+  });
 };
 
 var isSections = function isSections(options) {
@@ -12932,6 +12894,33 @@ var useKeyboard = function useKeyboard() {
   };
 };
 
+var SectionSpacer = index$a(View)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    marginTop: theme.__hd__.select.space.sectionSpacing
+  };
+});
+var OptionSpacer = index$a(View)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    marginTop: theme.__hd__.select.space.optionSpacing
+  };
+});
+var StyledSearchBar = index$a(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(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,
@@ -14051,7 +14040,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 primary intent 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.createElement(StyledView, _extends$1({}, nativeProps, {
     themeIntent: intent,
     themeVariant: variant,
@@ -14175,18 +14164,16 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
       return setOpen(false);
     },
     header: label,
-    footer: /*#__PURE__*/React.createElement(TouchableOpacity, {
+    footer: /*#__PURE__*/React.createElement(CompoundButton, {
+      variant: "text",
+      text: confirmLabel,
       onPress: function onPress() {
         if (selectingDate) {
           onChange(selectingDate);
         }
         setOpen(false);
       }
-    }, /*#__PURE__*/React.createElement(Typography.Text, {
-      fontSize: "large",
-      fontWeight: "semi-bold",
-      intent: "primary"
-    }, confirmLabel))
+    })
   }, /*#__PURE__*/React.createElement(StyledPickerWrapper, null, /*#__PURE__*/React.createElement(DateTimePicker, {
     testID: "timePickerIOS",
     value: selectingDate,
@@ -25658,8 +25645,7 @@ function checkDCE() {
                       voids: a
                     }));
                     if (v.length > 0) if ("continue" === function () {
-                      var _v = _slicedToArray(v, 1),
-                        r = _v[0],
+                      var r = v[0],
                         n = v[v.length - 1],
                         _r4 = _slicedToArray(r, 2),
                         o = _r4[1],

package/lib/index.js

@@ -105,7 +105,7 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 function _extends$1() {
-  _extends$1 = Object.assign || function (target) {
+  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1075,6 +1075,7 @@ var blue$1 = colorScales.blue,
   violetDark15: violet$2.darken15,
   violetDark30: violet$2.darken30,
   violetDark45: violet$2.darken45,
+  violetDark60: violet$2.darken60,
   violetDark75: violet$2.darken75,
   violetLight30: violet$2.lighten30,
   violetLight60: violet$2.lighten60,
@@ -1741,15 +1742,14 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
     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.medium,
-    footerHorizontalPadding: theme.space.large
+    footerVerticalPadding: theme.space.xxsmall,
+    footerHorizontalPadding: theme.space.smallMedium
   };
   var shadows = {
     offset: {
@@ -2336,9 +2336,6 @@ 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,
@@ -2355,7 +2352,6 @@ var getSelectTheme = function getSelectTheme(theme) {
   };
   return {
     space: space,
-    colors: colors,
     radii: radii
   };
 };
@@ -7101,7 +7097,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'
@@ -10832,6 +10827,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,
@@ -10917,7 +10915,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,
@@ -11079,18 +11077,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,
@@ -11204,7 +11200,7 @@ var calculateSnapPointsData = function calculateSnapPointsData(minimumHeight, he
   var uniqSnapPointOffsetValues = Array.from(new Set([].concat(_toConsumableArray(snapPointsOffsetValues), [0])));
   return {
     list: uniqSnapPointOffsetValues,
-    minHeightOffset: Math.max.apply(Math, _toConsumableArray(uniqSnapPointOffsetValues)),
+    minHeightOffset: Math.max.apply(Math, uniqSnapPointOffsetValues),
     maxHeightOffset: 0 // Max height
   };
 };
@@ -12855,48 +12851,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 StyledSectionList = index$a(reactNative.SectionList)(function (_ref5) {
-  var theme = _ref5.theme;
-  return {
-    paddingHorizontal: theme.__hd__.select.space.optionListHorizontalPadding
-  };
-});
-
 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) {
@@ -12961,6 +12923,33 @@ var useKeyboard = function useKeyboard() {
   };
 };
 
+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,
@@ -14080,7 +14069,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 primary intent 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,
@@ -14204,18 +14193,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,
@@ -25687,8 +25674,7 @@ function checkDCE() {
                       voids: a
                     }));
                     if (v.length > 0) if ("continue" === function () {
-                      var _v = _slicedToArray(v, 1),
-                        r = _v[0],
+                      var r = v[0],
                         n = v[v.length - 1],
                         _r4 = _slicedToArray(r, 2),
                         o = _r4[1],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.28.1",
+  "version": "7.30.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.1",
+    "@hero-design/colors": "7.30.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.30.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.1",
+    "eslint-config-hd": "7.30.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.1",
+    "prettier-config-hd": "7.30.0",
     "rn-7-23-0": "npm:@hero-design/rn@7.23.0"
   },
   "prettier": "prettier-config-hd"

package/src/components/BottomSheet/StyledBottomSheet.tsx

@@ -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

@@ -225,9 +225,8 @@ exports[`BottomSheet renders correctly with close state 1`] = `
                   "alignItems": "center",
                   "flexDirection": "row",
                   "justifyContent": "flex-end",
-                  "minHeight": 64,
-                  "paddingHorizontal": 24,
-                  "paddingVertical": 16,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 2,
                 },
                 undefined,
               ]
@@ -508,9 +507,8 @@ exports[`BottomSheet renders correctly with open state 1`] = `
                   "alignItems": "center",
                   "flexDirection": "row",
                   "justifyContent": "flex-end",
-                  "minHeight": 64,
-                  "paddingHorizontal": 24,
-                  "paddingVertical": 16,
+                  "paddingHorizontal": 12,
+                  "paddingVertical": 2,
                 },
                 undefined,
               ]

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -5,7 +5,7 @@ import formatDate from 'date-fns/fp/format';
 
 import BottomSheet from '../BottomSheet';
 import TextInput from '../TextInput';
-import Typography from '../Typography';
+import Button from '../Button';
 import { StyledPickerWrapper } from './StyledDatePicker';
 import type { DatePickerProps } from './types';
 
@@ -49,22 +49,16 @@ const DatePickerIOS = ({
         onRequestClose={() => setOpen(false)}
         header={label}
         footer={
-          <TouchableOpacity
+          <Button
+            variant="text"
+            text={confirmLabel}
             onPress={() => {
               if (selectingDate) {
                 onChange(selectingDate);
               }
               setOpen(false);
             }}
-          >
-            <Typography.Text
-              fontSize="large"
-              fontWeight="semi-bold"
-              intent="primary"
-            >
-              {confirmLabel}
-            </Typography.Text>
-          </TouchableOpacity>
+          />
         }
       >
         <StyledPickerWrapper>

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

@@ -133,6 +133,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
             onBlur={[Function]}
             onChangeText={[Function]}
             onFocus={[Function]}
+            placeholder=" "
             style={
               Array [
                 Object {