@hero-design/rn 8.2.2 → 8.2.3

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output d7aa160db70d0015
-@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 21.6s
-@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json
+@hero-design/rn:build: cache hit, replaying output e72791422bc29fc3
+@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.4s
+@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, ScrollView, Modal, TextInput as TextInput$1, PanResponder, TouchableHighlight, InteractionManager, useWindowDimensions, Keyboard, SectionList, 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, ScrollView, Modal, TextInput as TextInput$2, 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';
@@ -6230,21 +6230,45 @@ var Icon = function Icon(_ref) {
     intent = _ref$intent === void 0 ? 'text' : _ref$intent,
     testID = _ref.testID,
     _ref$spin = _ref.spin,
-    spin = _ref$spin === void 0 ? false : _ref$spin;
+    spin = _ref$spin === void 0 ? false : _ref$spin,
+    accessibilityLabel = _ref.accessibilityLabel,
+    accessibilityHint = _ref.accessibilityHint,
+    accessibilityRole = _ref.accessibilityRole,
+    accessibilityState = _ref.accessibilityState,
+    accessibilityValue = _ref.accessibilityValue,
+    accessibilityLiveRegion = _ref.accessibilityLiveRegion,
+    accessibilityElementsHidden = _ref.accessibilityElementsHidden,
+    accessible = _ref.accessible,
+    accessibilityIgnoresInvertColors = _ref.accessibilityIgnoresInvertColors,
+    accessibilityViewIsModal = _ref.accessibilityViewIsModal,
+    accessibilityActions = _ref.accessibilityActions;
   useDeprecation("".concat(icon, " icon is deprecated and will be removed in the next major release, please use ").concat(icon.replace('carat', 'caret'), " instead."), icon.startsWith('carat'));
-  return spin ? /*#__PURE__*/React.createElement(AnimatedIcon, {
+  var accessibilityProps = {
+    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    accessibilityRole: accessibilityRole,
+    accessibilityState: accessibilityState,
+    accessibilityValue: accessibilityValue,
+    accessibilityLiveRegion: accessibilityLiveRegion,
+    accessibilityElementsHidden: accessibilityElementsHidden,
+    accessible: accessible,
+    accessibilityIgnoresInvertColors: accessibilityIgnoresInvertColors,
+    accessibilityViewIsModal: accessibilityViewIsModal,
+    accessibilityActions: accessibilityActions
+  };
+  return spin ? /*#__PURE__*/React.createElement(AnimatedIcon, _extends$1({
     name: icon,
     themeIntent: intent,
     themeSize: size,
     style: style,
     testID: testID
-  }) : /*#__PURE__*/React.createElement(StyledHeroIcon, {
+  }, accessibilityProps)) : /*#__PURE__*/React.createElement(StyledHeroIcon, _extends$1({
     name: icon,
     themeIntent: intent,
     themeSize: size,
     style: style,
     testID: testID
-  });
+  }, accessibilityProps));
 };
 Icon.List = IconList;
 
@@ -6825,20 +6849,20 @@ var StyledBottomBarText = index$a(Typography.Text)(function (_ref3) {
 
 var isIOS = Platform.OS === 'ios';
 var isAndroid = Platform.OS === 'android';
-var pick = function pick(keys, props) {
+function pick(keys, obj) {
   return keys.filter(function (key) {
-    return key in props;
+    return key in obj;
   }).reduce(function (result, cur) {
-    return _objectSpread2(_objectSpread2({}, result), {}, _defineProperty({}, cur, props[cur]));
+    return _objectSpread2(_objectSpread2({}, result), {}, _defineProperty({}, cur, obj[cur]));
   }, {});
-};
-var omit = function omit(keys, props) {
-  var result = props;
+}
+function omit(keys, obj) {
+  var result = obj;
   keys.forEach(function (key) {
     delete result[key];
   });
   return result;
-};
+}
 
 var _excluded$f = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 var getInactiveIcon = function getInactiveIcon(icon) {
@@ -10650,7 +10674,7 @@ var StyledHelperText = index$a(Typography.Text)(function (_ref10) {
     fontSize: theme.__hd__.textInput.fontSizes.error
   };
 });
-var StyledTextInput = index$a(TextInput$1)(function (_ref11) {
+var StyledTextInput = index$a(TextInput$2)(function (_ref11) {
   var theme = _ref11.theme;
   return {
     textAlignVertical: 'center',
@@ -10727,7 +10751,7 @@ var getVariant$1 = function getVariant(_ref) {
 // 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 TextInput = function TextInput(_ref2, ref) {
   var _ref3;
   var label = _ref2.label,
     prefix = _ref2.prefix,
@@ -10767,6 +10791,35 @@ var TextInput = function TextInput(_ref2) {
   });
   var shouldShowMaxLength = maxLength !== undefined;
   var theme = useTheme();
+  var innerTextInput = React.useRef();
+  React.useImperativeHandle(ref, function () {
+    return {
+      // we don't expose this method, it's for testing https://medium.com/developer-rants/how-to-test-useref-without-mocking-useref-699165f4994e
+      getNativeTextInputRef: function getNativeTextInputRef() {
+        return innerTextInput.current;
+      },
+      focus: function focus() {
+        var _innerTextInput$curre;
+        (_innerTextInput$curre = innerTextInput.current) === null || _innerTextInput$curre === void 0 ? void 0 : _innerTextInput$curre.focus();
+      },
+      clear: function clear() {
+        var _innerTextInput$curre2;
+        return (_innerTextInput$curre2 = innerTextInput.current) === null || _innerTextInput$curre2 === void 0 ? void 0 : _innerTextInput$curre2.clear();
+      },
+      setNativeProps: function setNativeProps(args) {
+        var _innerTextInput$curre3;
+        return (_innerTextInput$curre3 = innerTextInput.current) === null || _innerTextInput$curre3 === void 0 ? void 0 : _innerTextInput$curre3.setNativeProps(args);
+      },
+      isFocused: function isFocused() {
+        var _innerTextInput$curre4;
+        return ((_innerTextInput$curre4 = innerTextInput.current) === null || _innerTextInput$curre4 === void 0 ? void 0 : _innerTextInput$curre4.isFocused()) || false;
+      },
+      blur: function blur() {
+        var _innerTextInput$curre5;
+        return (_innerTextInput$curre5 = innerTextInput.current) === null || _innerTextInput$curre5 === void 0 ? void 0 : _innerTextInput$curre5.blur();
+      }
+    };
+  }, [innerTextInput]);
   var _useMemo = useMemo(function () {
       if (!textStyle) {
         return {};
@@ -10846,7 +10899,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, {
+  }, label)), renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React.createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
+    ref: function ref(reference) {
+      innerTextInput.current = reference;
+    }
+  }))), typeof actualSuffix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
     intent: variant === 'disabled' ? 'disabled-text' : 'text',
     testID: "input-suffix",
     icon: actualSuffix,
@@ -10864,6 +10921,7 @@ var TextInput = function TextInput(_ref2) {
     fontSize: "small"
   }, displayText.length, "/", maxLength)), !!helpText && /*#__PURE__*/React.createElement(StyledHelperText, null, helpText)));
 };
+var TextInput$1 = /*#__PURE__*/React.forwardRef(TextInput);
 
 var DatePickerAndroid = function DatePickerAndroid(_ref) {
   var value = _ref.value,
@@ -10895,7 +10953,7 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none",
     testID: "datePickerInputAndroid"
-  }, /*#__PURE__*/React.createElement(TextInput, {
+  }, /*#__PURE__*/React.createElement(TextInput$1, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -10963,7 +11021,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none",
     testID: "datePickerInputIOS"
-  }, /*#__PURE__*/React.createElement(TextInput, {
+  }, /*#__PURE__*/React.createElement(TextInput$1, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -11917,7 +11975,7 @@ var StyledFilledMask = index$a(View)(function (_ref5) {
     backgroundColor: theme.__hd__.pinInput.colors[themeState]
   };
 });
-var StyledHiddenInput = index$a(TextInput$1)(function (_ref6) {
+var StyledHiddenInput = index$a(TextInput$2)(function (_ref6) {
   var themePinLength = _ref6.themePinLength,
     theme = _ref6.theme;
   var cellWidth = theme.__hd__.pinInput.sizes.cellWidth;
@@ -13029,7 +13087,7 @@ function MultiSelect(_ref) {
     }
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none"
-  }, /*#__PURE__*/React.createElement(TextInput, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React.createElement(TextInput$1, _extends$1({}, inputProps, {
     label: label,
     value: displayedValue,
     suffix: "arrow-down",
@@ -13077,7 +13135,7 @@ function MultiSelect(_ref) {
         (_sectionListRef$curre = sectionListRef.current) === null || _sectionListRef$curre === void 0 ? void 0 : _sectionListRef$curre.scrollToLocation(scrollParams);
       }
     }
-  }, onQueryChange && /*#__PURE__*/React.createElement(StyledSearchBar, null, /*#__PURE__*/React.createElement(TextInput, {
+  }, onQueryChange && /*#__PURE__*/React.createElement(StyledSearchBar, null, /*#__PURE__*/React.createElement(TextInput$1, {
     editable: true,
     placeholder: "Search",
     suffix: "search-outlined",
@@ -13205,7 +13263,7 @@ var SingleSelect = function SingleSelect(_ref) {
     }
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none"
-  }, /*#__PURE__*/React.createElement(TextInput, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React.createElement(TextInput$1, _extends$1({}, inputProps, {
     label: label,
     value: displayedValue,
     suffix: "arrow-down",
@@ -13237,7 +13295,7 @@ var SingleSelect = function SingleSelect(_ref) {
         (_sectionListRef$curre = sectionListRef.current) === null || _sectionListRef$curre === void 0 ? void 0 : _sectionListRef$curre.scrollToLocation(scrollParams);
       }
     }
-  }, onQueryChange && /*#__PURE__*/React.createElement(StyledSearchBar, null, /*#__PURE__*/React.createElement(TextInput, {
+  }, onQueryChange && /*#__PURE__*/React.createElement(StyledSearchBar, null, /*#__PURE__*/React.createElement(TextInput$1, {
     editable: true,
     placeholder: "Search",
     suffix: "search-outlined",
@@ -13978,7 +14036,7 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none",
     testID: "timePickerInputAndroid"
-  }, /*#__PURE__*/React.createElement(TextInput, {
+  }, /*#__PURE__*/React.createElement(TextInput$1, {
     label: label,
     value: displayValue,
     suffix: showSuffix ? 'clock-3' : undefined,
@@ -14046,7 +14104,7 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none",
     testID: "timePickerInputIOS"
-  }, /*#__PURE__*/React.createElement(TextInput, {
+  }, /*#__PURE__*/React.createElement(TextInput$1, {
     label: label,
     value: displayValue,
     suffix: showSuffix ? 'clock-3' : undefined,
@@ -14446,10 +14504,12 @@ var ToolbarItem = function ToolbarItem(_ref) {
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
     _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    style = _ref.style;
   return /*#__PURE__*/React.createElement(ToolbarItemWrapper, {
     onPress: onPress,
-    disabled: disabled
+    disabled: disabled,
+    style: style
   }, icon ? /*#__PURE__*/React.createElement(Icon, {
     icon: icon,
     size: label ? 'medium' : 'large',
@@ -14458,7 +14518,8 @@ var ToolbarItem = function ToolbarItem(_ref) {
   }) : null, label ? /*#__PURE__*/React.createElement(Typography.Text, {
     fontSize: icon ? 'small' : 'large',
     fontWeight: "semi-bold",
-    intent: disabled ? 'subdued' : intent
+    intent: disabled ? 'subdued' : intent,
+    maxFontSizeMultiplier: 2
   }, label) : null);
 };
 
@@ -14467,6 +14528,9 @@ var ToolbarGroup = function ToolbarGroup(_ref) {
     align = _ref$align === void 0 ? 'right' : _ref$align,
     _ref$items = _ref.items,
     items = _ref$items === void 0 ? [] : _ref$items;
+  // set maxWidth prevents overflow of items
+  // issue: https://github.com/Thinkei/hero-design/issues/1619
+  var maxWidth = items.length > 0 ? "".concat(100 / items.length, "%") : undefined;
   return /*#__PURE__*/React.createElement(ToolbarGroupWrapper, {
     align: align
   }, items.map(function (_ref2) {
@@ -14481,7 +14545,10 @@ var ToolbarGroup = function ToolbarGroup(_ref) {
       icon: icon,
       intent: intent,
       onPress: onPress,
-      disabled: disabled
+      disabled: disabled,
+      style: {
+        maxWidth: maxWidth
+      }
     });
   }));
 };
@@ -30880,4 +30947,4 @@ var index = Object.assign(RichTextEditor$1, {
   Toolbar: EditorToolbar
 });
 
-export { Accordion, Alert, Attachment, index$9 as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar, index$8 as Card, Checkbox, Collapse, ContentNavigator, DatePicker, Divider, index$7 as Drawer, Empty, index$6 as FAB, Icon, Image, List, PinInput, Progress, CompoundRadio as Radio, RefreshControl, index as RichTextEditor, SectionHeading, index$4 as Select, Slider, Spinner, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, getTheme$1 as getTheme, jobsSystemPalette, scale, swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, workSystemPalette };
+export { Accordion, Alert, Attachment, index$9 as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar, index$8 as Card, Checkbox, Collapse, ContentNavigator, DatePicker, Divider, index$7 as Drawer, Empty, index$6 as FAB, Icon, Image, List, PinInput, Progress, CompoundRadio as Radio, RefreshControl, index as RichTextEditor, SectionHeading, index$4 as Select, Slider, Spinner, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput$1 as TextInput, ThemeProvider, ThemeSwitcher, TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, getTheme$1 as getTheme, jobsSystemPalette, scale, swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, workSystemPalette };

package/lib/index.js

@@ -6259,21 +6259,45 @@ var Icon = function Icon(_ref) {
     intent = _ref$intent === void 0 ? 'text' : _ref$intent,
     testID = _ref.testID,
     _ref$spin = _ref.spin,
-    spin = _ref$spin === void 0 ? false : _ref$spin;
+    spin = _ref$spin === void 0 ? false : _ref$spin,
+    accessibilityLabel = _ref.accessibilityLabel,
+    accessibilityHint = _ref.accessibilityHint,
+    accessibilityRole = _ref.accessibilityRole,
+    accessibilityState = _ref.accessibilityState,
+    accessibilityValue = _ref.accessibilityValue,
+    accessibilityLiveRegion = _ref.accessibilityLiveRegion,
+    accessibilityElementsHidden = _ref.accessibilityElementsHidden,
+    accessible = _ref.accessible,
+    accessibilityIgnoresInvertColors = _ref.accessibilityIgnoresInvertColors,
+    accessibilityViewIsModal = _ref.accessibilityViewIsModal,
+    accessibilityActions = _ref.accessibilityActions;
   useDeprecation("".concat(icon, " icon is deprecated and will be removed in the next major release, please use ").concat(icon.replace('carat', 'caret'), " instead."), icon.startsWith('carat'));
-  return spin ? /*#__PURE__*/React__default["default"].createElement(AnimatedIcon, {
+  var accessibilityProps = {
+    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    accessibilityRole: accessibilityRole,
+    accessibilityState: accessibilityState,
+    accessibilityValue: accessibilityValue,
+    accessibilityLiveRegion: accessibilityLiveRegion,
+    accessibilityElementsHidden: accessibilityElementsHidden,
+    accessible: accessible,
+    accessibilityIgnoresInvertColors: accessibilityIgnoresInvertColors,
+    accessibilityViewIsModal: accessibilityViewIsModal,
+    accessibilityActions: accessibilityActions
+  };
+  return spin ? /*#__PURE__*/React__default["default"].createElement(AnimatedIcon, _extends$1({
     name: icon,
     themeIntent: intent,
     themeSize: size,
     style: style,
     testID: testID
-  }) : /*#__PURE__*/React__default["default"].createElement(StyledHeroIcon, {
+  }, accessibilityProps)) : /*#__PURE__*/React__default["default"].createElement(StyledHeroIcon, _extends$1({
     name: icon,
     themeIntent: intent,
     themeSize: size,
     style: style,
     testID: testID
-  });
+  }, accessibilityProps));
 };
 Icon.List = IconList;
 
@@ -6854,20 +6878,20 @@ var StyledBottomBarText = index$a(Typography.Text)(function (_ref3) {
 
 var isIOS = reactNative.Platform.OS === 'ios';
 var isAndroid = reactNative.Platform.OS === 'android';
-var pick = function pick(keys, props) {
+function pick(keys, obj) {
   return keys.filter(function (key) {
-    return key in props;
+    return key in obj;
   }).reduce(function (result, cur) {
-    return _objectSpread2(_objectSpread2({}, result), {}, _defineProperty({}, cur, props[cur]));
+    return _objectSpread2(_objectSpread2({}, result), {}, _defineProperty({}, cur, obj[cur]));
   }, {});
-};
-var omit = function omit(keys, props) {
-  var result = props;
+}
+function omit(keys, obj) {
+  var result = obj;
   keys.forEach(function (key) {
     delete result[key];
   });
   return result;
-};
+}
 
 var _excluded$f = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 var getInactiveIcon = function getInactiveIcon(icon) {
@@ -10756,7 +10780,7 @@ var getVariant$1 = function getVariant(_ref) {
 // 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 TextInput = function TextInput(_ref2, ref) {
   var _ref3;
   var label = _ref2.label,
     prefix = _ref2.prefix,
@@ -10796,6 +10820,35 @@ var TextInput = function TextInput(_ref2) {
   });
   var shouldShowMaxLength = maxLength !== undefined;
   var theme = useTheme();
+  var innerTextInput = React__default["default"].useRef();
+  React__default["default"].useImperativeHandle(ref, function () {
+    return {
+      // we don't expose this method, it's for testing https://medium.com/developer-rants/how-to-test-useref-without-mocking-useref-699165f4994e
+      getNativeTextInputRef: function getNativeTextInputRef() {
+        return innerTextInput.current;
+      },
+      focus: function focus() {
+        var _innerTextInput$curre;
+        (_innerTextInput$curre = innerTextInput.current) === null || _innerTextInput$curre === void 0 ? void 0 : _innerTextInput$curre.focus();
+      },
+      clear: function clear() {
+        var _innerTextInput$curre2;
+        return (_innerTextInput$curre2 = innerTextInput.current) === null || _innerTextInput$curre2 === void 0 ? void 0 : _innerTextInput$curre2.clear();
+      },
+      setNativeProps: function setNativeProps(args) {
+        var _innerTextInput$curre3;
+        return (_innerTextInput$curre3 = innerTextInput.current) === null || _innerTextInput$curre3 === void 0 ? void 0 : _innerTextInput$curre3.setNativeProps(args);
+      },
+      isFocused: function isFocused() {
+        var _innerTextInput$curre4;
+        return ((_innerTextInput$curre4 = innerTextInput.current) === null || _innerTextInput$curre4 === void 0 ? void 0 : _innerTextInput$curre4.isFocused()) || false;
+      },
+      blur: function blur() {
+        var _innerTextInput$curre5;
+        return (_innerTextInput$curre5 = innerTextInput.current) === null || _innerTextInput$curre5 === void 0 ? void 0 : _innerTextInput$curre5.blur();
+      }
+    };
+  }, [innerTextInput]);
   var _useMemo = React.useMemo(function () {
       if (!textStyle) {
         return {};
@@ -10875,7 +10928,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, {
+  }, label)), renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React__default["default"].createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
+    ref: function ref(reference) {
+      innerTextInput.current = reference;
+    }
+  }))), typeof actualSuffix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
     intent: variant === 'disabled' ? 'disabled-text' : 'text',
     testID: "input-suffix",
     icon: actualSuffix,
@@ -10893,6 +10950,7 @@ var TextInput = function TextInput(_ref2) {
     fontSize: "small"
   }, displayText.length, "/", maxLength)), !!helpText && /*#__PURE__*/React__default["default"].createElement(StyledHelperText, null, helpText)));
 };
+var TextInput$1 = /*#__PURE__*/React__default["default"].forwardRef(TextInput);
 
 var DatePickerAndroid = function DatePickerAndroid(_ref) {
   var value = _ref.value,
@@ -10924,7 +10982,7 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: "none",
     testID: "datePickerInputAndroid"
-  }, /*#__PURE__*/React__default["default"].createElement(TextInput, {
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput$1, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -10992,7 +11050,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: "none",
     testID: "datePickerInputIOS"
-  }, /*#__PURE__*/React__default["default"].createElement(TextInput, {
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput$1, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -13058,7 +13116,7 @@ function MultiSelect(_ref) {
     }
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: "none"
-  }, /*#__PURE__*/React__default["default"].createElement(TextInput, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput$1, _extends$1({}, inputProps, {
     label: label,
     value: displayedValue,
     suffix: "arrow-down",
@@ -13106,7 +13164,7 @@ function MultiSelect(_ref) {
         (_sectionListRef$curre = sectionListRef.current) === null || _sectionListRef$curre === void 0 ? void 0 : _sectionListRef$curre.scrollToLocation(scrollParams);
       }
     }
-  }, onQueryChange && /*#__PURE__*/React__default["default"].createElement(StyledSearchBar, null, /*#__PURE__*/React__default["default"].createElement(TextInput, {
+  }, onQueryChange && /*#__PURE__*/React__default["default"].createElement(StyledSearchBar, null, /*#__PURE__*/React__default["default"].createElement(TextInput$1, {
     editable: true,
     placeholder: "Search",
     suffix: "search-outlined",
@@ -13234,7 +13292,7 @@ var SingleSelect = function SingleSelect(_ref) {
     }
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: "none"
-  }, /*#__PURE__*/React__default["default"].createElement(TextInput, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput$1, _extends$1({}, inputProps, {
     label: label,
     value: displayedValue,
     suffix: "arrow-down",
@@ -13266,7 +13324,7 @@ var SingleSelect = function SingleSelect(_ref) {
         (_sectionListRef$curre = sectionListRef.current) === null || _sectionListRef$curre === void 0 ? void 0 : _sectionListRef$curre.scrollToLocation(scrollParams);
       }
     }
-  }, onQueryChange && /*#__PURE__*/React__default["default"].createElement(StyledSearchBar, null, /*#__PURE__*/React__default["default"].createElement(TextInput, {
+  }, onQueryChange && /*#__PURE__*/React__default["default"].createElement(StyledSearchBar, null, /*#__PURE__*/React__default["default"].createElement(TextInput$1, {
     editable: true,
     placeholder: "Search",
     suffix: "search-outlined",
@@ -14007,7 +14065,7 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: "none",
     testID: "timePickerInputAndroid"
-  }, /*#__PURE__*/React__default["default"].createElement(TextInput, {
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput$1, {
     label: label,
     value: displayValue,
     suffix: showSuffix ? 'clock-3' : undefined,
@@ -14075,7 +14133,7 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: "none",
     testID: "timePickerInputIOS"
-  }, /*#__PURE__*/React__default["default"].createElement(TextInput, {
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput$1, {
     label: label,
     value: displayValue,
     suffix: showSuffix ? 'clock-3' : undefined,
@@ -14475,10 +14533,12 @@ var ToolbarItem = function ToolbarItem(_ref) {
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
     _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    style = _ref.style;
   return /*#__PURE__*/React__default["default"].createElement(ToolbarItemWrapper, {
     onPress: onPress,
-    disabled: disabled
+    disabled: disabled,
+    style: style
   }, icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
     icon: icon,
     size: label ? 'medium' : 'large',
@@ -14487,7 +14547,8 @@ var ToolbarItem = function ToolbarItem(_ref) {
   }) : null, label ? /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
     fontSize: icon ? 'small' : 'large',
     fontWeight: "semi-bold",
-    intent: disabled ? 'subdued' : intent
+    intent: disabled ? 'subdued' : intent,
+    maxFontSizeMultiplier: 2
   }, label) : null);
 };
 
@@ -14496,6 +14557,9 @@ var ToolbarGroup = function ToolbarGroup(_ref) {
     align = _ref$align === void 0 ? 'right' : _ref$align,
     _ref$items = _ref.items,
     items = _ref$items === void 0 ? [] : _ref$items;
+  // set maxWidth prevents overflow of items
+  // issue: https://github.com/Thinkei/hero-design/issues/1619
+  var maxWidth = items.length > 0 ? "".concat(100 / items.length, "%") : undefined;
   return /*#__PURE__*/React__default["default"].createElement(ToolbarGroupWrapper, {
     align: align
   }, items.map(function (_ref2) {
@@ -14510,7 +14574,10 @@ var ToolbarGroup = function ToolbarGroup(_ref) {
       icon: icon,
       intent: intent,
       onPress: onPress,
-      disabled: disabled
+      disabled: disabled,
+      style: {
+        maxWidth: maxWidth
+      }
     });
   }));
 };
@@ -30944,7 +31011,7 @@ exports.Swipeable = index$5;
 exports.Switch = index$3;
 exports.Tabs = index$2;
 exports.Tag = Tag;
-exports.TextInput = TextInput;
+exports.TextInput = TextInput$1;
 exports.ThemeProvider = ThemeProvider;
 exports.ThemeSwitcher = ThemeSwitcher;
 exports.TimePicker = TimePicker;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.2.2",
+  "version": "8.2.3",
   "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.2.2",
+    "@hero-design/colors": "8.2.3",
     "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.2.2",
+    "@hero-design/eslint-plugin": "8.2.3",
     "@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.2.2",
+    "eslint-config-hd": "8.2.3",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.2.2",
+    "prettier-config-hd": "8.2.3",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Box/StyledBox.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/native';
 import { Theme } from '@emotion/react';
 import { View } from 'react-native';
-import { StyleProps, ThemeScale } from './types';
+import { FlexStyleProps, StyleProps, ThemeScale } from './types';
 import { pick } from '../../utils/helpers';
 import config, { ConfigType, flexPropsKey } from './config';
 
@@ -44,10 +44,12 @@ const mapStylePropToThemeValue = (theme: Theme, props: StyleProps) => {
 
 const configKeys = Object.keys(config) as Array<keyof ConfigType>;
 
-const StyledBox = styled(View)<StyleProps>(({ theme, ...otherProps }) => {
-  const styleProps = pick(configKeys, otherProps);
-  const flexProps = pick([...flexPropsKey], otherProps);
-  return { ...mapStylePropToThemeValue(theme, styleProps), ...flexProps };
-});
+const StyledBox = styled(View)<StyleProps & FlexStyleProps>(
+  ({ theme, ...otherProps }) => {
+    const styleProps = pick(configKeys, otherProps);
+    const flexProps = pick([...flexPropsKey], otherProps);
+    return { ...mapStylePropToThemeValue(theme, styleProps), ...flexProps };
+  }
+);
 
 export { StyledBox };

package/src/components/Card/StyledCard.tsx

@@ -2,7 +2,7 @@ import { View } from 'react-native';
 import styled from '@emotion/native';
 
 const StyledCard = styled(View)<{
-  themeIntent?: 'primary' | 'success' | 'warning';
+  themeIntent?: 'primary' | 'success' | 'warning' | 'danger' | 'archived';
 }>(({ theme, themeIntent }) => ({
   ...(themeIntent !== undefined && {
     backgroundColor: theme.__hd__.card.colors[themeIntent],