@hero-design/rn 8.2.1 → 8.2.3

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output 1d579abcb1b04d71
-@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 26.4s
-@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, 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';
@@ -5701,7 +5701,7 @@ var StyledText$3 = index$a(Text$1)(function (_ref) {
   });
 });
 
-var _excluded$j = ["children", "fontSize", "fontWeight", "intent", "typeface"];
+var _excluded$k = ["children", "fontSize", "fontWeight", "intent", "typeface"];
 var Text = function Text(_ref) {
   var children = _ref.children,
     _ref$fontSize = _ref.fontSize,
@@ -5712,7 +5712,7 @@ var Text = function Text(_ref) {
     intent = _ref$intent === void 0 ? 'body' : _ref$intent,
     _ref$typeface = _ref.typeface,
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$j);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$k);
   return /*#__PURE__*/React.createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
     themeFontWeight: fontWeight,
@@ -6191,10 +6191,10 @@ var StyledHeroIcon = index$a(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$i = ["style"];
+var _excluded$j = ["style"];
 var AnimatedIcon = function AnimatedIcon(_ref) {
   var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$i);
+    otherProps = _objectWithoutProperties(_ref, _excluded$j);
   var rotateAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(rotateAnimation.current, {
@@ -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;
 
@@ -6276,7 +6300,7 @@ var AccordionItem = function AccordionItem(_ref) {
   }, content));
 };
 
-var _excluded$h = ["key"];
+var _excluded$i = ["key"];
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
     activeItemKey = _ref.activeItemKey,
@@ -6297,7 +6321,7 @@ var Accordion = function Accordion(_ref) {
     testID: testID
   }, items.map(function (_ref2, index) {
     var key = _ref2.key,
-      props = _objectWithoutProperties(_ref2, _excluded$h);
+      props = _objectWithoutProperties(_ref2, _excluded$i);
     var open = _activeItemKey === key;
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: key
@@ -6679,7 +6703,7 @@ var StyledStatus = index$a(Animated.View)(function (_ref3) {
   };
 });
 
-var _excluded$g = ["children", "visible", "intent", "style", "testID"];
+var _excluded$h = ["children", "visible", "intent", "style", "testID"];
 var Status = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
@@ -6688,7 +6712,7 @@ var Status = function Status(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$g);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$h);
   var _React$useRef = React.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React.useRef(true);
@@ -6721,7 +6745,7 @@ var Status = function Status(_ref) {
   }));
 };
 
-var _excluded$f = ["content", "visible", "max", "intent", "style", "testID"];
+var _excluded$g = ["content", "visible", "max", "intent", "style", "testID"];
 var DEFAULT_MAX_NUMBER = 99;
 var getPaddingState = function getPaddingState(content) {
   return content.length > 1 ? 'wideContent' : 'narrowContent';
@@ -6736,7 +6760,7 @@ var Badge = function Badge(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$f);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$g);
   var _React$useRef = React.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React.useRef(true);
@@ -6825,22 +6849,22 @@ 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$e = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$f = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
   return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
@@ -6851,7 +6875,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
     selectedTabKey = _ref.selectedTabKey,
     tabs = _ref.tabs,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$e);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$f);
   var insets = useSafeAreaInsets();
   /**
    * List of loaded tabs, tabs will be loaded when navigated to.
@@ -6919,6 +6943,8 @@ var BottomNavigation = function BottomNavigation(_ref) {
   }))));
 };
 
+var BottomSheetContext = /*#__PURE__*/createContext({});
+
 var StyledDivider = index$a(View)(function (_ref) {
   var themeMarginHorizontal = _ref.themeMarginHorizontal,
     themeMarginVertical = _ref.themeMarginVertical,
@@ -6936,13 +6962,13 @@ var StyledDivider = index$a(View)(function (_ref) {
   }, horizontalMargin), verticalMargin);
 });
 
-var _excluded$d = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$e = ["marginHorizontal", "marginVertical", "style", "testID"];
 var Divider = function Divider(_ref) {
   var marginHorizontal = _ref.marginHorizontal,
     marginVertical = _ref.marginVertical,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$d);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$e);
   return /*#__PURE__*/React.createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
     themeMarginVertical: marginVertical,
@@ -7072,7 +7098,7 @@ var StyledLoadingDot = index$a(View)(function (_ref2) {
   }, themeStyling());
 });
 
-var _excluded$c = ["count", "size", "testID", "themeVariant"];
+var _excluded$d = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = Animated.createAnimatedComponent(StyledLoadingDot);
 var renderDotComponent = function renderDotComponent(_ref) {
@@ -7104,7 +7130,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
     size = _ref2$size === void 0 ? 12 : _ref2$size,
     testID = _ref2.testID,
     themeVariant = _ref2.themeVariant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$c);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$d);
   var progressAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(progressAnimation.current, {
@@ -7500,6 +7526,36 @@ var Header = function Header(_ref) {
   })) : null), showDivider ? /*#__PURE__*/React.createElement(Divider, null) : null);
 };
 
+var _excluded$c = ["scrollEventThrottle"];
+var BottomSheetScrollView = function BottomSheetScrollView(_ref) {
+  var _ref$scrollEventThrot = _ref.scrollEventThrottle,
+    scrollEventThrottle = _ref$scrollEventThrot === void 0 ? 100 : _ref$scrollEventThrot,
+    props = _objectWithoutProperties(_ref, _excluded$c);
+  var _useContext = useContext(BottomSheetContext),
+    setInternalShowDivider = _useContext.setInternalShowDivider;
+  var onScrollBeginDrag = useCallback(function (e) {
+    var _props$onScrollBeginD;
+    setInternalShowDivider(true);
+    props === null || props === void 0 ? void 0 : (_props$onScrollBeginD = props.onScrollBeginDrag) === null || _props$onScrollBeginD === void 0 ? void 0 : _props$onScrollBeginD.call(props, e);
+  }, []);
+  var onMomentumScrollBegin = useCallback(function (e) {
+    var _props$onMomentumScro;
+    setInternalShowDivider(true);
+    props === null || props === void 0 ? void 0 : (_props$onMomentumScro = props.onMomentumScrollEnd) === null || _props$onMomentumScro === void 0 ? void 0 : _props$onMomentumScro.call(props, e);
+  }, []);
+  var onMomentumScrollEnd = useCallback(function (e) {
+    var _props$onMomentumScro2;
+    setInternalShowDivider(false);
+    props === null || props === void 0 ? void 0 : (_props$onMomentumScro2 = props.onMomentumScrollEnd) === null || _props$onMomentumScro2 === void 0 ? void 0 : _props$onMomentumScro2.call(props, e);
+  }, []);
+  return /*#__PURE__*/React.createElement(ScrollView, _extends$1({}, props, {
+    onScrollBeginDrag: onScrollBeginDrag,
+    onMomentumScrollBegin: onMomentumScrollBegin,
+    onMomentumScrollEnd: onMomentumScrollEnd,
+    scrollEventThrottle: scrollEventThrottle
+  }));
+};
+
 var BottomSheet = function BottomSheet(_ref) {
   var open = _ref.open,
     header = _ref.header,
@@ -7514,7 +7570,7 @@ var BottomSheet = function BottomSheet(_ref) {
     _ref$hasBackdrop = _ref.hasBackdrop,
     hasBackdrop = _ref$hasBackdrop === void 0 ? true : _ref$hasBackdrop,
     _ref$showDivider = _ref.showDivider,
-    showDivider = _ref$showDivider === void 0 ? true : _ref$showDivider,
+    showDivider = _ref$showDivider === void 0 ? false : _ref$showDivider,
     style = _ref.style,
     testID = _ref.testID,
     _ref$keyboardAvoiding = _ref.keyboardAvoidingViewProps,
@@ -7527,6 +7583,10 @@ var BottomSheet = function BottomSheet(_ref) {
     visible = _useState2[0],
     setVisibility = _useState2[1];
   var animatedValue = useRef(new Animated.Value(open ? 0 : 1));
+  var _useState3 = useState(showDivider),
+    _useState4 = _slicedToArray(_useState3, 2),
+    internalShowDivider = _useState4[0],
+    setInternalShowDivider = _useState4[1];
   useEffect(function () {
     // Show the modal before the open animation start
     if (open && !visible) {
@@ -7567,6 +7627,11 @@ var BottomSheet = function BottomSheet(_ref) {
     inputRange: [0, 1],
     outputRange: [0, 0.48]
   }) : 0;
+  var BottomSheetContextValue = useMemo(function () {
+    return {
+      setInternalShowDivider: setInternalShowDivider
+    };
+  }, [setInternalShowDivider]);
   return /*#__PURE__*/React.createElement(Modal, {
     visible: visible,
     onRequestClose: onRequestClose,
@@ -7592,13 +7657,18 @@ var BottomSheet = function BottomSheet(_ref) {
     }]
   }, header !== undefined ? /*#__PURE__*/React.createElement(Header, {
     content: header,
-    showDivider: showDivider,
+    showDivider: internalShowDivider,
     onRequestClose: onRequestClose,
     showCloseButton: showCloseButton
-  }) : null, children, footer ? /*#__PURE__*/React.createElement(Footer$1, {
+  }) : null, /*#__PURE__*/React.createElement(BottomSheetContext.Provider, {
+    value: BottomSheetContextValue
+  }, children), footer ? /*#__PURE__*/React.createElement(Footer$1, {
     showDivider: showDivider
   }, footer) : null))));
 };
+var BottomSheet$1 = Object.assign(BottomSheet, {
+  ScrollView: BottomSheetScrollView
+});
 
 var colors = {
   backgroundColor: {
@@ -10604,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',
@@ -10681,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,
@@ -10721,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 {};
@@ -10800,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,
@@ -10818,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,
@@ -10849,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",
@@ -10917,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",
@@ -10928,7 +11032,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     helpText: helpText,
     testID: testID,
     style: style
-  })), /*#__PURE__*/React.createElement(BottomSheet, {
+  })), /*#__PURE__*/React.createElement(BottomSheet$1, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -11871,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;
@@ -12983,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",
@@ -12998,7 +13102,7 @@ function MultiSelect(_ref) {
     renderInputValue: renderSelectedValue !== undefined ? function (props) {
       return renderSelectedValue(value, props);
     } : undefined
-  }))))), /*#__PURE__*/React.createElement(BottomSheet, {
+  }))))), /*#__PURE__*/React.createElement(BottomSheet$1, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -13031,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",
@@ -13159,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",
@@ -13174,7 +13278,7 @@ var SingleSelect = function SingleSelect(_ref) {
     renderInputValue: renderSelectedValue !== undefined ? function (props) {
       return renderSelectedValue(value, props);
     } : undefined
-  }))))), /*#__PURE__*/React.createElement(BottomSheet, {
+  }))))), /*#__PURE__*/React.createElement(BottomSheet$1, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -13191,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",
@@ -13932,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,
@@ -14000,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,
@@ -14011,7 +14115,7 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
     helpText: helpText,
     testID: testID,
     style: style
-  })), /*#__PURE__*/React.createElement(BottomSheet, {
+  })), /*#__PURE__*/React.createElement(BottomSheet$1, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -14400,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',
@@ -14412,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);
 };
 
@@ -14421,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) {
@@ -14435,7 +14545,10 @@ var ToolbarGroup = function ToolbarGroup(_ref) {
       icon: icon,
       intent: intent,
       onPress: onPress,
-      disabled: disabled
+      disabled: disabled,
+      style: {
+        maxWidth: maxWidth
+      }
     });
   }));
 };
@@ -30834,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, 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 };