@hero-design/rn 8.3.2 → 8.3.4

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output 5e986a2b883ef3bb
-@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 28.6s
-@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json
+@hero-design/rn:build: cache hit, replaying output 4e613a0c9a2f2d73
+@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.8s
+@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -2665,7 +2665,8 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     danger: theme.colors.onErrorSurface,
     warning: theme.colors.onWarningSurface,
     success: theme.colors.onSuccessSurface,
-    inverted: theme.colors.onDarkGlobalSurface
+    inverted: theme.colors.onDarkGlobalSurface,
+    archived: theme.colors.onArchivedSurface
   };
   var fontSizes = {
     small: theme.fontSizes.small,
@@ -5746,7 +5747,7 @@ var StyledText$3 = index$a(Text$1)(function (_ref) {
   });
 });
 
-var _excluded$l = ["children", "fontSize", "fontWeight", "intent", "typeface"];
+var _excluded$m = ["children", "fontSize", "fontWeight", "intent", "typeface"];
 var Text = function Text(_ref) {
   var children = _ref.children,
     _ref$fontSize = _ref.fontSize,
@@ -5757,7 +5758,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$l);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$m);
   return /*#__PURE__*/React.createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
     themeFontWeight: fontWeight,
@@ -6236,10 +6237,10 @@ var StyledHeroIcon = index$a(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$k = ["style"];
+var _excluded$l = ["style"];
 var AnimatedIcon = function AnimatedIcon(_ref) {
   var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$k);
+    otherProps = _objectWithoutProperties(_ref, _excluded$l);
   var rotateAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(rotateAnimation.current, {
@@ -6345,7 +6346,7 @@ var AccordionItem = function AccordionItem(_ref) {
   }, content));
 };
 
-var _excluded$j = ["key"];
+var _excluded$k = ["key"];
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
     activeItemKey = _ref.activeItemKey,
@@ -6366,7 +6367,7 @@ var Accordion = function Accordion(_ref) {
     testID: testID
   }, items.map(function (_ref2, index) {
     var key = _ref2.key,
-      props = _objectWithoutProperties(_ref2, _excluded$j);
+      props = _objectWithoutProperties(_ref2, _excluded$k);
     var open = _activeItemKey === key;
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: key
@@ -6748,7 +6749,7 @@ var StyledStatus = index$a(Animated.View)(function (_ref3) {
   };
 });
 
-var _excluded$i = ["children", "visible", "intent", "style", "testID"];
+var _excluded$j = ["children", "visible", "intent", "style", "testID"];
 var Status = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
@@ -6757,7 +6758,7 @@ var Status = function Status(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$i);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$j);
   var _React$useRef = React.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React.useRef(true);
@@ -6790,7 +6791,7 @@ var Status = function Status(_ref) {
   }));
 };
 
-var _excluded$h = ["content", "visible", "max", "intent", "style", "testID"];
+var _excluded$i = ["content", "visible", "max", "intent", "style", "testID"];
 var DEFAULT_MAX_NUMBER = 99;
 var getPaddingState = function getPaddingState(content) {
   return content.length > 1 ? 'wideContent' : 'narrowContent';
@@ -6805,7 +6806,7 @@ var Badge = function Badge(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$h);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$i);
   var _React$useRef = React.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React.useRef(true);
@@ -6909,7 +6910,7 @@ function omit(keys, obj) {
   return result;
 }
 
-var _excluded$g = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$h = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
   return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
@@ -6920,7 +6921,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
     selectedTabKey = _ref.selectedTabKey,
     tabs = _ref.tabs,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$g);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$h);
   var insets = useSafeAreaInsets();
   /**
    * List of loaded tabs, tabs will be loaded when navigated to.
@@ -7007,13 +7008,13 @@ var StyledDivider = index$a(View)(function (_ref) {
   }, horizontalMargin), verticalMargin);
 });
 
-var _excluded$f = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$g = ["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$f);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$g);
   return /*#__PURE__*/React.createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
     themeMarginVertical: marginVertical,
@@ -7143,7 +7144,7 @@ var StyledLoadingDot = index$a(View)(function (_ref2) {
   }, themeStyling());
 });
 
-var _excluded$e = ["count", "size", "testID", "themeVariant"];
+var _excluded$f = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = Animated.createAnimatedComponent(StyledLoadingDot);
 var renderDotComponent = function renderDotComponent(_ref) {
@@ -7175,7 +7176,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
     size = _ref2$size === void 0 ? 12 : _ref2$size,
     testID = _ref2.testID,
     themeVariant = _ref2.themeVariant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$e);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$f);
   var progressAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(progressAnimation.current, {
@@ -7571,11 +7572,11 @@ var Header = function Header(_ref) {
   })) : null), showDivider ? /*#__PURE__*/React.createElement(Divider, null) : null);
 };
 
-var _excluded$d = ["scrollEventThrottle"];
+var _excluded$e = ["scrollEventThrottle"];
 var BottomSheetScrollView = function BottomSheetScrollView(_ref) {
   var _ref$scrollEventThrot = _ref.scrollEventThrottle,
     scrollEventThrottle = _ref$scrollEventThrot === void 0 ? 100 : _ref$scrollEventThrot,
-    props = _objectWithoutProperties(_ref, _excluded$d);
+    props = _objectWithoutProperties(_ref, _excluded$e);
   var _useContext = useContext(BottomSheetContext),
     setInternalShowDivider = _useContext.setInternalShowDivider;
   var onScrollBeginDrag = useCallback(function (e) {
@@ -7890,7 +7891,7 @@ var borderWidths = {
 var config = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, colors), space), radii), borderWidths);
 var flexPropsKey = ['alignContent', 'alignItems', 'alignSelf', 'display', 'flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap', 'justifyContent'];
 
-var _excluded$c = ["theme"];
+var _excluded$d = ["theme"];
 var getThemeValue = function getThemeValue(theme, key, props) {
   var propConfig = config[key];
   var propValue = props[key];
@@ -7917,18 +7918,18 @@ var mapStylePropToThemeValue = function mapStylePropToThemeValue(theme, props) {
 var configKeys = Object.keys(config);
 var StyledBox = index$a(View)(function (_ref5) {
   var theme = _ref5.theme,
-    otherProps = _objectWithoutProperties(_ref5, _excluded$c);
+    otherProps = _objectWithoutProperties(_ref5, _excluded$d);
   var styleProps = pick(configKeys, otherProps);
   var flexProps = pick(_toConsumableArray(flexPropsKey), otherProps);
   return _objectSpread2(_objectSpread2({}, mapStylePropToThemeValue(theme, styleProps)), flexProps);
 });
 
-var _excluded$b = ["children", "style", "testID"];
+var _excluded$c = ["children", "style", "testID"];
 var Box = function Box(_ref) {
   var children = _ref.children,
     style = _ref.style,
     testID = _ref.testID,
-    otherProps = _objectWithoutProperties(_ref, _excluded$b);
+    otherProps = _objectWithoutProperties(_ref, _excluded$c);
   return /*#__PURE__*/React.createElement(StyledBox, _extends$1({}, otherProps, {
     style: style,
     testID: testID
@@ -10539,7 +10540,7 @@ var CarouselPaginator = function CarouselPaginator(_ref) {
   }));
 };
 
-var _excluded$a = ["rounded", "size", "testID", "style"];
+var _excluded$b = ["rounded", "size", "testID", "style"];
 var Image = function Image(_ref) {
   var _ref$rounded = _ref.rounded,
     rounded = _ref$rounded === void 0 ? false : _ref$rounded,
@@ -10547,7 +10548,7 @@ var Image = function Image(_ref) {
     size = _ref$size === void 0 ? '6xlarge' : _ref$size,
     testID = _ref.testID,
     style = _ref.style,
-    imageNativeProps = _objectWithoutProperties(_ref, _excluded$a);
+    imageNativeProps = _objectWithoutProperties(_ref, _excluded$b);
   var theme = useTheme();
   var imageSize = theme.__hd__.image.sizes[size];
   return /*#__PURE__*/React.createElement(Image$1, _extends$1({
@@ -10632,7 +10633,7 @@ var CarouselItem = function CarouselItem(_ref) {
   }, content, /*#__PURE__*/React.createElement(StyledCarouselHeading, null, heading), body ? /*#__PURE__*/React.createElement(Typography.Text, null, body) : null));
 };
 
-var _excluded$9 = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style"];
+var _excluded$a = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style"];
 function useStateFromProp(initialValue) {
   var _useState = useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
@@ -10650,7 +10651,7 @@ var Carousel = function Carousel(_ref) {
     _ref$selectedItemInde = _ref.selectedItemIndex,
     selectedItemIndex = _ref$selectedItemInde === void 0 ? 0 : _ref$selectedItemInde,
     style = _ref.style,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$9);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$a);
   var carouselRef = useRef(null);
   var _useStateFromProp = useStateFromProp(selectedItemIndex),
     _useStateFromProp2 = _slicedToArray(_useStateFromProp, 2),
@@ -10750,12 +10751,12 @@ var Indicator = index$a(View)(function (_ref2) {
   };
 });
 
-var _excluded$8 = ["intent", "children"];
+var _excluded$9 = ["intent", "children"];
 var DataCard = function DataCard(_ref) {
   var _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'info' : _ref$intent,
     children = _ref.children,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$8);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$9);
   return /*#__PURE__*/React.createElement(StyledDataCard, nativeProps, /*#__PURE__*/React.createElement(Indicator, {
     themeIntent: intent,
     testID: "data-card-indicator"
@@ -10773,11 +10774,11 @@ var StyledCard = index$a(View)(function (_ref) {
   });
 });
 
-var _excluded$7 = ["intent", "children"];
+var _excluded$8 = ["intent", "children"];
 var Card = function Card(_ref) {
   var intent = _ref.intent,
     children = _ref.children,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$7);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$8);
   return /*#__PURE__*/React.createElement(StyledCard, _extends$1({}, nativeProps, {
     themeIntent: intent
   }), children);
@@ -11011,7 +11012,7 @@ var StyledErrorAndMaxLengthContainer = index$a(View)(function () {
   };
 });
 
-var _excluded$6 = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "helpText", "value", "defaultValue", "renderInputValue"];
+var _excluded$7 = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "helpText", "value", "defaultValue", "renderInputValue"];
 var getVariant$1 = function getVariant(_ref) {
   var disabled = _ref.disabled,
     error = _ref.error,
@@ -11057,7 +11058,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     value = _ref2.value,
     defaultValue = _ref2.defaultValue,
     renderInputValue = _ref2.renderInputValue,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$6);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$7);
   var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
   var actualSuffix = loading ? 'loading' : suffix;
@@ -11735,11 +11736,11 @@ var StyledFABText = index$a(Text$1)(function (_ref3) {
   };
 });
 
-var _excluded$5 = ["active"];
+var _excluded$6 = ["active"];
 var AnimatedIcons = Animated.createAnimatedComponent(StyledFABIcon);
 var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
   var active = _ref.active,
-    iconProps = _objectWithoutProperties(_ref, _excluded$5);
+    iconProps = _objectWithoutProperties(_ref, _excluded$6);
   var rotateAnimation = useRef(new Animated.Value(active ? 1 : 0));
   useEffect(function () {
     var animation = Animated.timing(rotateAnimation.current, {
@@ -12470,7 +12471,7 @@ var StyledStrokeEnd = index$a(View)(function (_ref6) {
   };
 });
 
-var _excluded$4 = ["value", "renderValue", "intent", "style", "testID"];
+var _excluded$5 = ["value", "renderValue", "intent", "style", "testID"];
 var HalfCircle = function HalfCircle(_ref) {
   var type = _ref.type,
     themeIntent = _ref.themeIntent;
@@ -12491,7 +12492,7 @@ var ProgressCircle = function ProgressCircle(_ref2) {
     intent = _ref2$intent === void 0 ? 'primary' : _ref2$intent,
     style = _ref2.style,
     testID = _ref2.testID,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$4);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$5);
   var theme = useTheme$1();
   var radius = theme.__hd__.progress.sizes.circleDiameter / 2;
   var progressAnimatedValue = useRef(new Animated.Value(0));
@@ -12608,14 +12609,14 @@ var StyledInner = index$a(Animated.View)(function (_ref2) {
   };
 });
 
-var _excluded$3 = ["value", "intent", "style", "testID"];
+var _excluded$4 = ["value", "intent", "style", "testID"];
 var ProgressBar = function ProgressBar(_ref) {
   var value = _ref.value,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$3);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$4);
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     width = _useState2[0],
@@ -12806,14 +12807,14 @@ var AnimatedSpinner = function AnimatedSpinner(_ref) {
   }, dotProps))));
 };
 
-var _excluded$2 = ["testID", "size", "intent"];
+var _excluded$3 = ["testID", "size", "intent"];
 var Spinner = function Spinner(_ref) {
   var testID = _ref.testID,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$2);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$3);
   return /*#__PURE__*/React.createElement(StyledView$1, nativeProps, /*#__PURE__*/React.createElement(StyledSpinnerContainer, {
     testID: testID
   }, /*#__PURE__*/React.createElement(AnimatedSpinner, {
@@ -12846,7 +12847,7 @@ var SwipeableAction = function SwipeableAction(_ref) {
   }, children);
 };
 
-var _excluded$1 = ["children", "state", "onStateChange", "leftActions", "leftActionsWidth", "rightActions", "rightActionsWidth"];
+var _excluded$2 = ["children", "state", "onStateChange", "leftActions", "leftActionsWidth", "rightActions", "rightActionsWidth"];
 var renderActions = function renderActions(actions, width, progress, direction) {
   var trans = progress.interpolate({
     inputRange: [0, 1],
@@ -12871,7 +12872,7 @@ var Swipeable = function Swipeable(_ref) {
     leftActionsWidth = _ref.leftActionsWidth,
     rightActions = _ref.rightActions,
     rightActionsWidth = _ref.rightActionsWidth,
-    swipeableProps = _objectWithoutProperties(_ref, _excluded$1);
+    swipeableProps = _objectWithoutProperties(_ref, _excluded$2);
   var _useWindowDimensions = useWindowDimensions(),
     width = _useWindowDimensions.width;
   var swipeableRef = useRef(null);
@@ -13954,13 +13955,20 @@ var ScrollableTab = function ScrollableTab(_ref2) {
     return i === selectedTabIndex ? 1 : 0;
   }));
   React.useEffect(function () {
+    var timeoutHandle = null;
     if (selectedTabIndex !== -1) {
-      var _flatListRef$current, _pagerViewRef$current;
+      var _flatListRef$current;
       (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
         index: selectedTabIndex,
         viewPosition: 0.5
       });
-      (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 ? void 0 : _pagerViewRef$current.setPage(selectedTabIndex);
+      // If the selected tab is changed too quickly, the setPage is crashed and not work anymore
+      // We apply throttle to prevent this issue https://github.com/Thinkei/hero-design/issues/1715
+      timeoutHandle = setTimeout(function () {
+        var _pagerViewRef$current;
+        // use no animation to prevent unexpected behavior if users select tab too quickly
+        (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 ? void 0 : _pagerViewRef$current.setPageWithoutAnimation(selectedTabIndex);
+      }, 200);
     }
     var animation = Animated.parallel(_toConsumableArray(tabs.map(function (_, i) {
       return Animated.timing(tabsAnims[i], {
@@ -13971,9 +13979,12 @@ var ScrollableTab = function ScrollableTab(_ref2) {
     })));
     animation.start();
     return function () {
-      return animation.stop();
+      animation.stop();
+      if (timeoutHandle) {
+        clearTimeout(timeoutHandle);
+      }
     };
-  }, [selectedTabIndex]);
+  }, [selectedTabIndex, pagerViewRef]);
   return /*#__PURE__*/React.createElement(TabContainer, {
     style: containerStyle,
     testID: componentTestID
@@ -14246,7 +14257,7 @@ var StyledText = index$a(Text$1)(function (_ref3) {
   };
 });
 
-var _excluded = ["content", "variant", "intent", "style", "testID"];
+var _excluded$1 = ["content", "variant", "intent", "style", "testID"];
 var Tag = function Tag(_ref) {
   var content = _ref.content,
     _ref$variant = _ref.variant,
@@ -14255,7 +14266,7 @@ var Tag = function Tag(_ref) {
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$1);
   return /*#__PURE__*/React.createElement(StyledView, _extends$1({}, nativeProps, {
     themeIntent: intent,
     themeVariant: variant,
@@ -14781,7 +14792,8 @@ var ToolbarItem = function ToolbarItem(_ref) {
     fontSize: icon ? 'small' : 'large',
     fontWeight: "semi-bold",
     intent: disabled ? 'subdued' : intent,
-    maxFontSizeMultiplier: 2
+    allowFontScaling: false,
+    numberOfLines: 1
   }, label) : null);
 };
 
@@ -14815,9 +14827,11 @@ var ToolbarGroup = function ToolbarGroup(_ref) {
   }));
 };
 
+var _excluded = ["children"];
 var Toolbar = function Toolbar(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React.createElement(ToolbarWrapper, null, children);
+  var children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(ToolbarWrapper, rest, children);
 };
 var index$1 = Object.assign(Toolbar, {
   Group: ToolbarGroup

package/lib/index.js

@@ -2694,7 +2694,8 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     danger: theme.colors.onErrorSurface,
     warning: theme.colors.onWarningSurface,
     success: theme.colors.onSuccessSurface,
-    inverted: theme.colors.onDarkGlobalSurface
+    inverted: theme.colors.onDarkGlobalSurface,
+    archived: theme.colors.onArchivedSurface
   };
   var fontSizes = {
     small: theme.fontSizes.small,
@@ -5775,7 +5776,7 @@ var StyledText$3 = index$a(reactNative.Text)(function (_ref) {
   });
 });
 
-var _excluded$l = ["children", "fontSize", "fontWeight", "intent", "typeface"];
+var _excluded$m = ["children", "fontSize", "fontWeight", "intent", "typeface"];
 var Text = function Text(_ref) {
   var children = _ref.children,
     _ref$fontSize = _ref.fontSize,
@@ -5786,7 +5787,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$l);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$m);
   return /*#__PURE__*/React__default["default"].createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
     themeFontWeight: fontWeight,
@@ -6265,10 +6266,10 @@ var StyledHeroIcon = index$a(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$k = ["style"];
+var _excluded$l = ["style"];
 var AnimatedIcon = function AnimatedIcon(_ref) {
   var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$k);
+    otherProps = _objectWithoutProperties(_ref, _excluded$l);
   var rotateAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
     var animation = reactNative.Animated.loop(reactNative.Animated.timing(rotateAnimation.current, {
@@ -6374,7 +6375,7 @@ var AccordionItem = function AccordionItem(_ref) {
   }, content));
 };
 
-var _excluded$j = ["key"];
+var _excluded$k = ["key"];
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
     activeItemKey = _ref.activeItemKey,
@@ -6395,7 +6396,7 @@ var Accordion = function Accordion(_ref) {
     testID: testID
   }, items.map(function (_ref2, index) {
     var key = _ref2.key,
-      props = _objectWithoutProperties(_ref2, _excluded$j);
+      props = _objectWithoutProperties(_ref2, _excluded$k);
     var open = _activeItemKey === key;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
       key: key
@@ -6777,7 +6778,7 @@ var StyledStatus = index$a(reactNative.Animated.View)(function (_ref3) {
   };
 });
 
-var _excluded$i = ["children", "visible", "intent", "style", "testID"];
+var _excluded$j = ["children", "visible", "intent", "style", "testID"];
 var Status = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
@@ -6786,7 +6787,7 @@ var Status = function Status(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$i);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$j);
   var _React$useRef = React__default["default"].useRef(new reactNative.Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React__default["default"].useRef(true);
@@ -6819,7 +6820,7 @@ var Status = function Status(_ref) {
   }));
 };
 
-var _excluded$h = ["content", "visible", "max", "intent", "style", "testID"];
+var _excluded$i = ["content", "visible", "max", "intent", "style", "testID"];
 var DEFAULT_MAX_NUMBER = 99;
 var getPaddingState = function getPaddingState(content) {
   return content.length > 1 ? 'wideContent' : 'narrowContent';
@@ -6834,7 +6835,7 @@ var Badge = function Badge(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$h);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$i);
   var _React$useRef = React__default["default"].useRef(new reactNative.Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React__default["default"].useRef(true);
@@ -6938,7 +6939,7 @@ function omit(keys, obj) {
   return result;
 }
 
-var _excluded$g = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$h = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
   return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
@@ -6949,7 +6950,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
     selectedTabKey = _ref.selectedTabKey,
     tabs = _ref.tabs,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$g);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$h);
   var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
   /**
    * List of loaded tabs, tabs will be loaded when navigated to.
@@ -7036,13 +7037,13 @@ var StyledDivider = index$a(reactNative.View)(function (_ref) {
   }, horizontalMargin), verticalMargin);
 });
 
-var _excluded$f = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$g = ["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$f);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$g);
   return /*#__PURE__*/React__default["default"].createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
     themeMarginVertical: marginVertical,
@@ -7172,7 +7173,7 @@ var StyledLoadingDot = index$a(reactNative.View)(function (_ref2) {
   }, themeStyling());
 });
 
-var _excluded$e = ["count", "size", "testID", "themeVariant"];
+var _excluded$f = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = reactNative.Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = reactNative.Animated.createAnimatedComponent(StyledLoadingDot);
 var renderDotComponent = function renderDotComponent(_ref) {
@@ -7204,7 +7205,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
     size = _ref2$size === void 0 ? 12 : _ref2$size,
     testID = _ref2.testID,
     themeVariant = _ref2.themeVariant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$e);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$f);
   var progressAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
     var animation = reactNative.Animated.loop(reactNative.Animated.timing(progressAnimation.current, {
@@ -7600,11 +7601,11 @@ var Header = function Header(_ref) {
   })) : null), showDivider ? /*#__PURE__*/React__default["default"].createElement(Divider, null) : null);
 };
 
-var _excluded$d = ["scrollEventThrottle"];
+var _excluded$e = ["scrollEventThrottle"];
 var BottomSheetScrollView = function BottomSheetScrollView(_ref) {
   var _ref$scrollEventThrot = _ref.scrollEventThrottle,
     scrollEventThrottle = _ref$scrollEventThrot === void 0 ? 100 : _ref$scrollEventThrot,
-    props = _objectWithoutProperties(_ref, _excluded$d);
+    props = _objectWithoutProperties(_ref, _excluded$e);
   var _useContext = React.useContext(BottomSheetContext),
     setInternalShowDivider = _useContext.setInternalShowDivider;
   var onScrollBeginDrag = React.useCallback(function (e) {
@@ -7919,7 +7920,7 @@ var borderWidths = {
 var config = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, colors), space), radii), borderWidths);
 var flexPropsKey = ['alignContent', 'alignItems', 'alignSelf', 'display', 'flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap', 'justifyContent'];
 
-var _excluded$c = ["theme"];
+var _excluded$d = ["theme"];
 var getThemeValue = function getThemeValue(theme, key, props) {
   var propConfig = config[key];
   var propValue = props[key];
@@ -7946,18 +7947,18 @@ var mapStylePropToThemeValue = function mapStylePropToThemeValue(theme, props) {
 var configKeys = Object.keys(config);
 var StyledBox = index$a(reactNative.View)(function (_ref5) {
   var theme = _ref5.theme,
-    otherProps = _objectWithoutProperties(_ref5, _excluded$c);
+    otherProps = _objectWithoutProperties(_ref5, _excluded$d);
   var styleProps = pick(configKeys, otherProps);
   var flexProps = pick(_toConsumableArray(flexPropsKey), otherProps);
   return _objectSpread2(_objectSpread2({}, mapStylePropToThemeValue(theme, styleProps)), flexProps);
 });
 
-var _excluded$b = ["children", "style", "testID"];
+var _excluded$c = ["children", "style", "testID"];
 var Box = function Box(_ref) {
   var children = _ref.children,
     style = _ref.style,
     testID = _ref.testID,
-    otherProps = _objectWithoutProperties(_ref, _excluded$b);
+    otherProps = _objectWithoutProperties(_ref, _excluded$c);
   return /*#__PURE__*/React__default["default"].createElement(StyledBox, _extends$1({}, otherProps, {
     style: style,
     testID: testID
@@ -10568,7 +10569,7 @@ var CarouselPaginator = function CarouselPaginator(_ref) {
   }));
 };
 
-var _excluded$a = ["rounded", "size", "testID", "style"];
+var _excluded$b = ["rounded", "size", "testID", "style"];
 var Image = function Image(_ref) {
   var _ref$rounded = _ref.rounded,
     rounded = _ref$rounded === void 0 ? false : _ref$rounded,
@@ -10576,7 +10577,7 @@ var Image = function Image(_ref) {
     size = _ref$size === void 0 ? '6xlarge' : _ref$size,
     testID = _ref.testID,
     style = _ref.style,
-    imageNativeProps = _objectWithoutProperties(_ref, _excluded$a);
+    imageNativeProps = _objectWithoutProperties(_ref, _excluded$b);
   var theme = useTheme();
   var imageSize = theme.__hd__.image.sizes[size];
   return /*#__PURE__*/React__default["default"].createElement(reactNative.Image, _extends$1({
@@ -10661,7 +10662,7 @@ var CarouselItem = function CarouselItem(_ref) {
   }, content, /*#__PURE__*/React__default["default"].createElement(StyledCarouselHeading, null, heading), body ? /*#__PURE__*/React__default["default"].createElement(Typography.Text, null, body) : null));
 };
 
-var _excluded$9 = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style"];
+var _excluded$a = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style"];
 function useStateFromProp(initialValue) {
   var _useState = React.useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
@@ -10679,7 +10680,7 @@ var Carousel = function Carousel(_ref) {
     _ref$selectedItemInde = _ref.selectedItemIndex,
     selectedItemIndex = _ref$selectedItemInde === void 0 ? 0 : _ref$selectedItemInde,
     style = _ref.style,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$9);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$a);
   var carouselRef = React.useRef(null);
   var _useStateFromProp = useStateFromProp(selectedItemIndex),
     _useStateFromProp2 = _slicedToArray(_useStateFromProp, 2),
@@ -10779,12 +10780,12 @@ var Indicator = index$a(reactNative.View)(function (_ref2) {
   };
 });
 
-var _excluded$8 = ["intent", "children"];
+var _excluded$9 = ["intent", "children"];
 var DataCard = function DataCard(_ref) {
   var _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'info' : _ref$intent,
     children = _ref.children,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$8);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$9);
   return /*#__PURE__*/React__default["default"].createElement(StyledDataCard, nativeProps, /*#__PURE__*/React__default["default"].createElement(Indicator, {
     themeIntent: intent,
     testID: "data-card-indicator"
@@ -10802,11 +10803,11 @@ var StyledCard = index$a(reactNative.View)(function (_ref) {
   });
 });
 
-var _excluded$7 = ["intent", "children"];
+var _excluded$8 = ["intent", "children"];
 var Card = function Card(_ref) {
   var intent = _ref.intent,
     children = _ref.children,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$7);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$8);
   return /*#__PURE__*/React__default["default"].createElement(StyledCard, _extends$1({}, nativeProps, {
     themeIntent: intent
   }), children);
@@ -11040,7 +11041,7 @@ var StyledErrorAndMaxLengthContainer = index$a(reactNative.View)(function () {
   };
 });
 
-var _excluded$6 = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "helpText", "value", "defaultValue", "renderInputValue"];
+var _excluded$7 = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "helpText", "value", "defaultValue", "renderInputValue"];
 var getVariant$1 = function getVariant(_ref) {
   var disabled = _ref.disabled,
     error = _ref.error,
@@ -11086,7 +11087,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     value = _ref2.value,
     defaultValue = _ref2.defaultValue,
     renderInputValue = _ref2.renderInputValue,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$6);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$7);
   var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
   var actualSuffix = loading ? 'loading' : suffix;
@@ -11764,11 +11765,11 @@ var StyledFABText = index$a(reactNative.Text)(function (_ref3) {
   };
 });
 
-var _excluded$5 = ["active"];
+var _excluded$6 = ["active"];
 var AnimatedIcons = reactNative.Animated.createAnimatedComponent(StyledFABIcon);
 var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
   var active = _ref.active,
-    iconProps = _objectWithoutProperties(_ref, _excluded$5);
+    iconProps = _objectWithoutProperties(_ref, _excluded$6);
   var rotateAnimation = React.useRef(new reactNative.Animated.Value(active ? 1 : 0));
   React.useEffect(function () {
     var animation = reactNative.Animated.timing(rotateAnimation.current, {
@@ -12499,7 +12500,7 @@ var StyledStrokeEnd = index$a(reactNative.View)(function (_ref6) {
   };
 });
 
-var _excluded$4 = ["value", "renderValue", "intent", "style", "testID"];
+var _excluded$5 = ["value", "renderValue", "intent", "style", "testID"];
 var HalfCircle = function HalfCircle(_ref) {
   var type = _ref.type,
     themeIntent = _ref.themeIntent;
@@ -12520,7 +12521,7 @@ var ProgressCircle = function ProgressCircle(_ref2) {
     intent = _ref2$intent === void 0 ? 'primary' : _ref2$intent,
     style = _ref2.style,
     testID = _ref2.testID,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$4);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$5);
   var theme = useTheme$1();
   var radius = theme.__hd__.progress.sizes.circleDiameter / 2;
   var progressAnimatedValue = React.useRef(new reactNative.Animated.Value(0));
@@ -12637,14 +12638,14 @@ var StyledInner = index$a(reactNative.Animated.View)(function (_ref2) {
   };
 });
 
-var _excluded$3 = ["value", "intent", "style", "testID"];
+var _excluded$4 = ["value", "intent", "style", "testID"];
 var ProgressBar = function ProgressBar(_ref) {
   var value = _ref.value,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$3);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$4);
   var _useState = React.useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     width = _useState2[0],
@@ -12835,14 +12836,14 @@ var AnimatedSpinner = function AnimatedSpinner(_ref) {
   }, dotProps))));
 };
 
-var _excluded$2 = ["testID", "size", "intent"];
+var _excluded$3 = ["testID", "size", "intent"];
 var Spinner = function Spinner(_ref) {
   var testID = _ref.testID,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$2);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$3);
   return /*#__PURE__*/React__default["default"].createElement(StyledView$1, nativeProps, /*#__PURE__*/React__default["default"].createElement(StyledSpinnerContainer, {
     testID: testID
   }, /*#__PURE__*/React__default["default"].createElement(AnimatedSpinner, {
@@ -12875,7 +12876,7 @@ var SwipeableAction = function SwipeableAction(_ref) {
   }, children);
 };
 
-var _excluded$1 = ["children", "state", "onStateChange", "leftActions", "leftActionsWidth", "rightActions", "rightActionsWidth"];
+var _excluded$2 = ["children", "state", "onStateChange", "leftActions", "leftActionsWidth", "rightActions", "rightActionsWidth"];
 var renderActions = function renderActions(actions, width, progress, direction) {
   var trans = progress.interpolate({
     inputRange: [0, 1],
@@ -12900,7 +12901,7 @@ var Swipeable = function Swipeable(_ref) {
     leftActionsWidth = _ref.leftActionsWidth,
     rightActions = _ref.rightActions,
     rightActionsWidth = _ref.rightActionsWidth,
-    swipeableProps = _objectWithoutProperties(_ref, _excluded$1);
+    swipeableProps = _objectWithoutProperties(_ref, _excluded$2);
   var _useWindowDimensions = reactNative.useWindowDimensions(),
     width = _useWindowDimensions.width;
   var swipeableRef = React.useRef(null);
@@ -13983,13 +13984,20 @@ var ScrollableTab = function ScrollableTab(_ref2) {
     return i === selectedTabIndex ? 1 : 0;
   }));
   React__default["default"].useEffect(function () {
+    var timeoutHandle = null;
     if (selectedTabIndex !== -1) {
-      var _flatListRef$current, _pagerViewRef$current;
+      var _flatListRef$current;
       (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
         index: selectedTabIndex,
         viewPosition: 0.5
       });
-      (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 ? void 0 : _pagerViewRef$current.setPage(selectedTabIndex);
+      // If the selected tab is changed too quickly, the setPage is crashed and not work anymore
+      // We apply throttle to prevent this issue https://github.com/Thinkei/hero-design/issues/1715
+      timeoutHandle = setTimeout(function () {
+        var _pagerViewRef$current;
+        // use no animation to prevent unexpected behavior if users select tab too quickly
+        (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 ? void 0 : _pagerViewRef$current.setPageWithoutAnimation(selectedTabIndex);
+      }, 200);
     }
     var animation = reactNative.Animated.parallel(_toConsumableArray(tabs.map(function (_, i) {
       return reactNative.Animated.timing(tabsAnims[i], {
@@ -14000,9 +14008,12 @@ var ScrollableTab = function ScrollableTab(_ref2) {
     })));
     animation.start();
     return function () {
-      return animation.stop();
+      animation.stop();
+      if (timeoutHandle) {
+        clearTimeout(timeoutHandle);
+      }
     };
-  }, [selectedTabIndex]);
+  }, [selectedTabIndex, pagerViewRef]);
   return /*#__PURE__*/React__default["default"].createElement(TabContainer, {
     style: containerStyle,
     testID: componentTestID
@@ -14275,7 +14286,7 @@ var StyledText = index$a(reactNative.Text)(function (_ref3) {
   };
 });
 
-var _excluded = ["content", "variant", "intent", "style", "testID"];
+var _excluded$1 = ["content", "variant", "intent", "style", "testID"];
 var Tag = function Tag(_ref) {
   var content = _ref.content,
     _ref$variant = _ref.variant,
@@ -14284,7 +14295,7 @@ var Tag = function Tag(_ref) {
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$1);
   return /*#__PURE__*/React__default["default"].createElement(StyledView, _extends$1({}, nativeProps, {
     themeIntent: intent,
     themeVariant: variant,
@@ -14810,7 +14821,8 @@ var ToolbarItem = function ToolbarItem(_ref) {
     fontSize: icon ? 'small' : 'large',
     fontWeight: "semi-bold",
     intent: disabled ? 'subdued' : intent,
-    maxFontSizeMultiplier: 2
+    allowFontScaling: false,
+    numberOfLines: 1
   }, label) : null);
 };
 
@@ -14844,9 +14856,11 @@ var ToolbarGroup = function ToolbarGroup(_ref) {
   }));
 };
 
+var _excluded = ["children"];
 var Toolbar = function Toolbar(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React__default["default"].createElement(ToolbarWrapper, null, children);
+  var children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default["default"].createElement(ToolbarWrapper, rest, children);
 };
 var index$1 = Object.assign(Toolbar, {
   Group: ToolbarGroup

package/package.json

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

package/src/components/Tabs/ScrollableTabs.tsx

@@ -78,12 +78,18 @@ const ScrollableTab = ({
   );
 
   React.useEffect(() => {
+    let timeoutHandle: number | null = null;
     if (selectedTabIndex !== -1) {
       flatListRef.current?.scrollToIndex({
         index: selectedTabIndex,
         viewPosition: 0.5,
       });
-      pagerViewRef.current?.setPage(selectedTabIndex);
+      // If the selected tab is changed too quickly, the setPage is crashed and not work anymore
+      // We apply throttle to prevent this issue https://github.com/Thinkei/hero-design/issues/1715
+      timeoutHandle = setTimeout(() => {
+        // use no animation to prevent unexpected behavior if users select tab too quickly
+        pagerViewRef.current?.setPageWithoutAnimation(selectedTabIndex);
+      }, 200);
     }
 
     const animation = Animated.parallel([
@@ -97,8 +103,13 @@ const ScrollableTab = ({
     ]);
     animation.start();
 
-    return () => animation.stop();
-  }, [selectedTabIndex]);
+    return () => {
+      animation.stop();
+      if (timeoutHandle) {
+        clearTimeout(timeoutHandle);
+      }
+    };
+  }, [selectedTabIndex, pagerViewRef]);
 
   return (
     <TabContainer style={containerStyle} testID={componentTestID}>

package/src/components/Toolbar/ToolbarItem.tsx

@@ -55,7 +55,8 @@ const ToolbarItem = ({
         fontSize={icon ? 'small' : 'large'}
         fontWeight="semi-bold"
         intent={disabled ? 'subdued' : intent}
-        maxFontSizeMultiplier={2}
+        allowFontScaling={false}
+        numberOfLines={1}
       >
         {label}
       </Typography.Text>

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarGroup.spec.tsx.snap

@@ -57,7 +57,8 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
       themeSize="medium"
     />
     <Text
-      maxFontSizeMultiplier={2}
+      allowFontScaling={false}
+      numberOfLines={1}
       style={
         Array [
           Object {
@@ -120,7 +121,8 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
       themeSize="medium"
     />
     <Text
-      maxFontSizeMultiplier={2}
+      allowFontScaling={false}
+      numberOfLines={1}
       style={
         Array [
           Object {
@@ -201,7 +203,8 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
       themeSize="medium"
     />
     <Text
-      maxFontSizeMultiplier={2}
+      allowFontScaling={false}
+      numberOfLines={1}
       style={
         Array [
           Object {
@@ -264,7 +267,8 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
       themeSize="medium"
     />
     <Text
-      maxFontSizeMultiplier={2}
+      allowFontScaling={false}
+      numberOfLines={1}
       style={
         Array [
           Object {
@@ -345,7 +349,8 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
       themeSize="medium"
     />
     <Text
-      maxFontSizeMultiplier={2}
+      allowFontScaling={false}
+      numberOfLines={1}
       style={
         Array [
           Object {
@@ -408,7 +413,8 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
       themeSize="medium"
     />
     <Text
-      maxFontSizeMultiplier={2}
+      allowFontScaling={false}
+      numberOfLines={1}
       style={
         Array [
           Object {

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarItem.spec.tsx.snap

@@ -42,7 +42,8 @@ exports[`ToolbarItems renders correctly when disabled 1`] = `
     themeSize="medium"
   />
   <Text
-    maxFontSizeMultiplier={2}
+    allowFontScaling={false}
+    numberOfLines={1}
     style={
       Array [
         Object {
@@ -107,7 +108,8 @@ exports[`ToolbarItems renders correctly when intent is danger 1`] = `
     themeSize="medium"
   />
   <Text
-    maxFontSizeMultiplier={2}
+    allowFontScaling={false}
+    numberOfLines={1}
     style={
       Array [
         Object {
@@ -172,7 +174,8 @@ exports[`ToolbarItems renders correctly when intent is info 1`] = `
     themeSize="medium"
   />
   <Text
-    maxFontSizeMultiplier={2}
+    allowFontScaling={false}
+    numberOfLines={1}
     style={
       Array [
         Object {
@@ -237,7 +240,8 @@ exports[`ToolbarItems renders correctly when intent is primary 1`] = `
     themeSize="medium"
   />
   <Text
-    maxFontSizeMultiplier={2}
+    allowFontScaling={false}
+    numberOfLines={1}
     style={
       Array [
         Object {
@@ -302,7 +306,8 @@ exports[`ToolbarItems renders correctly when intent is success 1`] = `
     themeSize="medium"
   />
   <Text
-    maxFontSizeMultiplier={2}
+    allowFontScaling={false}
+    numberOfLines={1}
     style={
       Array [
         Object {
@@ -367,7 +372,8 @@ exports[`ToolbarItems renders correctly when intent is warning 1`] = `
     themeSize="medium"
   />
   <Text
-    maxFontSizeMultiplier={2}
+    allowFontScaling={false}
+    numberOfLines={1}
     style={
       Array [
         Object {

package/src/components/Toolbar/index.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
 import type { ReactNode } from 'react';
+import { ViewProps } from 'react-native';
 import { ToolbarWrapper } from './StyledToolbar';
 import ToolbarGroup from './ToolbarGroup';
 
-export interface ToolbarProps {
+export interface ToolbarProps extends Omit<ViewProps, 'style'> {
   /**
    * Toolbar's content.
    */
   children?: ReactNode;
 }
 
-const Toolbar = ({ children }: ToolbarProps) => (
-  <ToolbarWrapper>{children}</ToolbarWrapper>
+const Toolbar = ({ children, ...rest }: ToolbarProps) => (
+  <ToolbarWrapper {...rest}>{children}</ToolbarWrapper>
 );
 
 export default Object.assign(Toolbar, {

package/src/components/Typography/Text/StyledText.tsx

@@ -27,7 +27,8 @@ const StyledText = styled(Text)<{
     | 'info'
     | 'warning'
     | 'danger'
-    | 'inverted';
+    | 'inverted'
+    | 'archived';
   themeTypeface: 'neutral' | 'playful';
 }>(({ themeFontSize, themeFontWeight, themeIntent, themeTypeface, theme }) => {
   const sizeStyles = {

package/src/components/Typography/Text/index.tsx

@@ -40,7 +40,8 @@ export interface TextProps extends NativeTextProps {
     | 'info'
     | 'warning'
     | 'danger'
-    | 'inverted';
+    | 'inverted'
+    | 'archived';
   /**
    * Additional style.
    */

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -919,6 +919,7 @@ Object {
     },
     "typography": Object {
       "colors": Object {
+        "archived": "#737479",
         "body": "#001f23",
         "danger": "#de350b",
         "info": "#4568fb",

package/src/theme/components/typography.ts

@@ -11,6 +11,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     warning: theme.colors.onWarningSurface,
     success: theme.colors.onSuccessSurface,
     inverted: theme.colors.onDarkGlobalSurface,
+    archived: theme.colors.onArchivedSurface,
   };
 
   const fontSizes = {

package/types/components/Toolbar/index.d.ts

@@ -1,11 +1,12 @@
 import type { ReactNode } from 'react';
-export interface ToolbarProps {
+import { ViewProps } from 'react-native';
+export interface ToolbarProps extends Omit<ViewProps, 'style'> {
     /**
      * Toolbar's content.
      */
     children?: ReactNode;
 }
-declare const _default: (({ children }: ToolbarProps) => JSX.Element) & {
+declare const _default: (({ children, ...rest }: ToolbarProps) => JSX.Element) & {
     Group: ({ align, items }: import("./ToolbarGroup").ToolbarGroupProps) => JSX.Element;
 };
 export default _default;

package/types/components/Typography/Text/StyledText.d.ts

@@ -5,7 +5,7 @@ declare const StyledText: import("@emotion/native").StyledComponent<import("reac
 } & {
     themeFontSize: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxxlarge' | '6xlarge' | '7xlarge';
     themeFontWeight: 'light' | 'regular' | 'semi-bold';
-    themeIntent: 'body' | 'subdued' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted';
+    themeIntent: 'body' | 'subdued' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted' | 'archived';
     themeTypeface: 'neutral' | 'playful';
 }, {}, {
     ref?: import("react").Ref<Text> | undefined;

package/types/components/Typography/Text/index.d.ts

@@ -16,7 +16,7 @@ export interface TextProps extends NativeTextProps {
     /**
      * Visual intent color to apply to the text.
      */
-    intent?: 'body' | 'subdued' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted';
+    intent?: 'body' | 'subdued' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted' | 'archived';
     /**
      * Additional style.
      */

package/types/theme/components/typography.d.ts

@@ -10,6 +10,7 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
         warning: string;
         success: string;
         inverted: string;
+        archived: string;
     };
     fonts: import("../global/typography").Fonts;
     fontSizes: {