@hero-design/rn 8.12.5-alpha.0 → 8.12.5

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output f482b851404033d4
-@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 '/Volumes/Data/Projects/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 30s
-@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json
+@hero-design/rn:build: cache hit, replaying output 30919d84667a450d
+@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 27.4s
+@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/.turbo/turbo-publish:npm.log

@@ -1,9 +0,0 @@
-@hero-design/rn:publish:npm: cache hit, replaying output 507c34f3e0a508f6
-@hero-design/rn:publish:npm: $ yarn publish --access public
-@hero-design/rn:publish:npm: [1/4] Bumping version...
-@hero-design/rn:publish:npm: info Current version: 8.12.0-rc.0
-@hero-design/rn:publish:npm: [2/4] Logging in...
-@hero-design/rn:publish:npm: [3/4] Publishing...
-@hero-design/rn:publish:npm: success Published.
-@hero-design/rn:publish:npm: [4/4] Revoking token...
-@hero-design/rn:publish:npm: info Not revoking login token, specified via config file.

package/es/index.js

@@ -1723,6 +1723,16 @@ var getAvatarTheme = function getAvatarTheme(theme) {
     xxxxlarge: theme.space.xlarge * 1.5,
     xxxxxlarge: theme.space.xxlarge * 1.5
   };
+  var lineHeights = {
+    small: theme.lineHeights.large,
+    medium: theme.lineHeights.xlarge,
+    large: theme.lineHeights.xxlarge,
+    xlarge: theme.lineHeights.xxxlarge,
+    xxlarge: theme.lineHeights.medium * 2,
+    xxxlarge: theme.lineHeights.large * 1.5,
+    xxxxlarge: theme.lineHeights.xlarge * 1.5,
+    xxxxxlarge: theme.lineHeights.xxlarge * 1.5
+  };
   var radii = {
     rounded: theme.radii.rounded
   };
@@ -1731,7 +1741,8 @@ var getAvatarTheme = function getAvatarTheme(theme) {
     sizes: sizes,
     radii: radii,
     fonts: fonts,
-    fontSizes: fontSizes
+    fontSizes: fontSizes,
+    lineHeights: lineHeights
   };
 };
 
@@ -1751,6 +1762,9 @@ var getBadgeTheme = function getBadgeTheme(theme) {
   var fontSizes = {
     "default": theme.fontSizes.small
   };
+  var lineHeights = {
+    "default": theme.lineHeights.small
+  };
   var sizes = {
     height: theme.fontSizes.small + theme.sizes.small,
     minWidth: theme.fontSizes.small + theme.sizes.small,
@@ -1767,7 +1781,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     fonts: fonts,
     fontSizes: fontSizes,
     sizes: sizes,
-    space: space
+    space: space,
+    lineHeights: lineHeights
   };
 };
 
@@ -2337,6 +2352,10 @@ var getPinInputTheme = function getPinInputTheme(theme) {
     cellText: theme.fontSizes.xxxxlarge,
     errorMessage: theme.fontSizes.small
   };
+  var lineHeights = {
+    cellText: theme.lineHeights.xxxxlarge,
+    errorMessage: theme.fontSizes.small
+  };
   var sizes = {
     cellWidth: theme.sizes.xxlarge,
     cellHeight: theme.sizes.xxxlarge,
@@ -2352,6 +2371,7 @@ var getPinInputTheme = function getPinInputTheme(theme) {
   };
   return {
     borderWidths: borderWidths,
+    lineHeights: lineHeights,
     colors: colors,
     fonts: fonts,
     fontSizes: fontSizes,
@@ -5958,7 +5978,7 @@ var StyledText$3 = index$a(Text$1)(function (_ref) {
   });
 });
 
-var _excluded$p = ["children", "fontSize", "fontWeight", "intent", "typeface"];
+var _excluded$p = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
 var Text = function Text(_ref) {
   var children = _ref.children,
     _ref$fontSize = _ref.fontSize,
@@ -5969,12 +5989,15 @@ 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,
+    _ref$allowFontScaling = _ref.allowFontScaling,
+    allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
     nativeProps = _objectWithoutProperties(_ref, _excluded$p);
   return /*#__PURE__*/React.createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
     themeFontWeight: fontWeight,
     themeIntent: intent,
-    themeTypeface: typeface
+    themeTypeface: typeface,
+    allowFontScaling: allowFontScaling
   }), children);
 };
 
@@ -6808,12 +6831,15 @@ var StyledTextWrapper$1 = index$a(View)(function () {
     height: '100%'
   };
 });
-var StyledText$2 = index$a(Text$1)(function (_ref2) {
+var StyledText$2 = index$a(Typography.Text)(function (_ref2) {
   var themeSize = _ref2.themeSize,
     theme = _ref2.theme;
   return {
     fontFamily: theme.__hd__.avatar.fonts["default"],
     fontSize: theme.__hd__.avatar.fontSizes[themeSize],
+    lineHeight: 0,
+    textAlignVertical: 'center',
+    textAlign: 'center',
     color: theme.__hd__.avatar.colors.text,
     overflow: 'hidden'
   };
@@ -6962,11 +6988,12 @@ var StyledView$2 = index$a(Animated.View)(function (_ref) {
     paddingHorizontal: themePadding === 'wideContent' ? theme.__hd__.badge.space.horizontalPadding : undefined
   };
 });
-var StyledText$1 = index$a(Text$1)(function (_ref2) {
+var StyledText$1 = index$a(Typography.Text)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     fontFamily: theme.__hd__.badge.fonts["default"],
     fontSize: theme.__hd__.badge.fontSizes["default"],
+    lineHeight: theme.__hd__.badge.lineHeights["default"],
     color: theme.__hd__.badge.colors.text,
     includeFontPadding: false,
     textAlignVertical: 'center',
@@ -11516,7 +11543,7 @@ var StyledErrorAndMaxLengthContainer = index$a(View)(function () {
   };
 });
 
-var _excluded$a = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "helpText", "value", "defaultValue", "renderInputValue"];
+var _excluded$a = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling"];
 var getVariant$1 = function getVariant(_ref) {
   var disabled = _ref.disabled,
     error = _ref.error,
@@ -11562,6 +11589,8 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     value = _ref2.value,
     defaultValue = _ref2.defaultValue,
     renderInputValue = _ref2.renderInputValue,
+    _ref2$allowFontScalin = _ref2.allowFontScaling,
+    allowFontScaling = _ref2$allowFontScalin === void 0 ? false : _ref2$allowFontScalin,
     nativeProps = _objectWithoutProperties(_ref2, _excluded$a);
   var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
@@ -11650,7 +11679,8 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     },
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    accessibilityLabelledBy: accessibilityLabelledBy
+    accessibilityLabelledBy: accessibilityLabelledBy,
+    allowFontScaling: allowFontScaling
   }, nativeProps), {}, {
     onFocus: function onFocus(event) {
       var _nativeProps$onFocus;
@@ -12187,7 +12217,7 @@ var StyledWrapper$5 = index$a(View)(function (_ref) {
     padding: theme.__hd__.empty.space.wrapperPadding
   };
 });
-var StyledTitle = index$a(Text$1)(function (_ref2) {
+var StyledTitle = index$a(Typography.Text)(function (_ref2) {
   var theme = _ref2.theme,
     themeVariant = _ref2.themeVariant;
   return {
@@ -12198,7 +12228,7 @@ var StyledTitle = index$a(Text$1)(function (_ref2) {
     color: themeVariant === 'dark' ? theme.__hd__.empty.colors.invertedText : theme.__hd__.empty.colors.text
   };
 });
-var StyledDescription = index$a(Text$1)(function (_ref3) {
+var StyledDescription = index$a(Typography.Text)(function (_ref3) {
   var theme = _ref3.theme,
     themeVariant = _ref3.themeVariant;
   return {
@@ -12255,7 +12285,7 @@ var StyledFABIcon = index$a(Icon)(function (_ref2) {
     textAlign: 'center'
   };
 });
-var StyledFABText = index$a(Text$1)(function (_ref3) {
+var StyledFABText = index$a(Typography.Text)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     fontFamily: theme.__hd__.fab.fonts.title,
@@ -12738,12 +12768,13 @@ var StyledCell = index$a(View)(function (_ref) {
     borderColor: theme.__hd__.pinInput.colors[themeState]
   };
 });
-var StyledCellText = index$a(Text$1)(function (_ref2) {
+var StyledCellText = index$a(Typography.Text)(function (_ref2) {
   var theme = _ref2.theme,
     themeState = _ref2.themeState;
   return {
     fontFamily: theme.__hd__.pinInput.fonts.cellText,
     fontSize: theme.__hd__.pinInput.fontSizes.cellText,
+    lineHeight: theme.__hd__.pinInput.lineHeights.cellText,
     color: theme.__hd__.pinInput.colors[themeState]
   };
 });
@@ -12794,10 +12825,11 @@ var StyledErrorContainer = index$a(View)(function (_ref7) {
   var theme = _ref7.theme;
   return {
     flexDirection: 'row',
-    paddingTop: theme.__hd__.pinInput.space.errorMessagePadding
+    paddingTop: theme.__hd__.pinInput.space.errorMessagePadding,
+    alignItems: 'center'
   };
 });
-var StyledErrorMessage = index$a(Text$1)(function (_ref8) {
+var StyledErrorMessage = index$a(Typography.Text)(function (_ref8) {
   var theme = _ref8.theme;
   return {
     fontFamily: theme.__hd__.pinInput.fonts.errorMessage,
@@ -14496,9 +14528,8 @@ var getTabItem$1 = function getTabItem(_ref) {
     color: color
   });
 };
-var ScrollableTab = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var _ref2$onTabPress = _ref2.onTabPress,
-    onTabPress = _ref2$onTabPress === void 0 ? noop : _ref2$onTabPress,
+var ScrollableTab = function ScrollableTab(_ref2) {
+  var onTabPress = _ref2.onTabPress,
     selectedTabKey = _ref2.selectedTabKey,
     tabs = _ref2.tabs,
     containerStyle = _ref2.containerStyle,
@@ -14520,46 +14551,20 @@ var ScrollableTab = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var tabsAnims = useAnimatedValueArray(tabs.map(function (_, i) {
     return i === selectedTabIndex ? 1 : 0;
   }));
-  React.useImperativeHandle(ref, function () {
-    return {
-      selectTabKey: function selectTabKey(tabKey) {
-        var index = tabs.findIndex(function (item) {
-          return item.key === tabKey;
-        });
-        if (index !== -1) {
-          var _flatListRef$current, _pagerViewRef$current;
-          (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
-            index: index,
-            viewPosition: 0.5
-          });
-          (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 ? void 0 : _pagerViewRef$current.setPage(index);
-          if (onTabPress) {
-            onTabPress(tabKey);
-          }
-        }
-      },
-      getFlatListRef: function getFlatListRef() {
-        return flatListRef.current;
-      },
-      getPagerViewRef: function getPagerViewRef() {
-        return pagerViewRef.current;
-      }
-    };
-  }, [pagerViewRef, flatListRef, tabs]);
   React.useEffect(function () {
     var timeoutHandle = null;
     if (selectedTabIndex !== -1) {
-      var _flatListRef$current2;
-      (_flatListRef$current2 = flatListRef.current) === null || _flatListRef$current2 === void 0 ? void 0 : _flatListRef$current2.scrollToIndex({
+      var _flatListRef$current;
+      (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
         index: selectedTabIndex,
         viewPosition: 0.5
       });
       // 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$current2;
+        var _pagerViewRef$current;
         // use no animation to prevent unexpected behavior if users select tab too quickly
-        (_pagerViewRef$current2 = pagerViewRef.current) === null || _pagerViewRef$current2 === void 0 ? void 0 : _pagerViewRef$current2.setPageWithoutAnimation(selectedTabIndex);
+        (_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) {
@@ -14576,7 +14581,7 @@ var ScrollableTab = /*#__PURE__*/forwardRef(function (_ref2, ref) {
         clearTimeout(timeoutHandle);
       }
     };
-  }, [selectedTabIndex, selectedTabKey, pagerViewRef]);
+  }, [selectedTabIndex, pagerViewRef]);
   return /*#__PURE__*/React.createElement(TabContainer, {
     style: containerStyle,
     testID: componentTestID
@@ -14595,8 +14600,8 @@ var ScrollableTab = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     onScrollToIndexFailed: function onScrollToIndexFailed(_ref3) {
       var index = _ref3.index;
       setTimeout(function () {
-        var _flatListRef$current3;
-        return (_flatListRef$current3 = flatListRef.current) === null || _flatListRef$current3 === void 0 ? void 0 : _flatListRef$current3.scrollToIndex({
+        var _flatListRef$current2;
+        return (_flatListRef$current2 = flatListRef.current) === null || _flatListRef$current2 === void 0 ? void 0 : _flatListRef$current2.scrollToIndex({
           index: index,
           viewPosition: 0.5
         });
@@ -14652,7 +14657,7 @@ var ScrollableTab = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     onPageSelected: function onPageSelected(e) {
       var index = e.nativeEvent.position;
       var selectedItem = tabs[index];
-      if (selectedItem && selectedItem.key !== selectedTabKey) {
+      if (selectedItem) {
         onTabPress(selectedItem.key);
       }
     },
@@ -14672,7 +14677,7 @@ var ScrollableTab = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       collapsable: false
     }, isLazyScreen ? null : component);
   })));
-});
+};
 
 var getTabItem = function getTabItem(_ref) {
   var item = _ref.item,
@@ -14833,7 +14838,7 @@ var StyledView = index$a(View)(function (_ref) {
     backgroundColor: backgroundColor
   };
 });
-var StyledText = index$a(Text$1)(function (_ref3) {
+var StyledText = index$a(Typography.Text)(function (_ref3) {
   var themeIntent = _ref3.themeIntent,
     themeVariant = _ref3.themeVariant,
     theme = _ref3.theme;

package/lib/index.js

@@ -1752,6 +1752,16 @@ var getAvatarTheme = function getAvatarTheme(theme) {
     xxxxlarge: theme.space.xlarge * 1.5,
     xxxxxlarge: theme.space.xxlarge * 1.5
   };
+  var lineHeights = {
+    small: theme.lineHeights.large,
+    medium: theme.lineHeights.xlarge,
+    large: theme.lineHeights.xxlarge,
+    xlarge: theme.lineHeights.xxxlarge,
+    xxlarge: theme.lineHeights.medium * 2,
+    xxxlarge: theme.lineHeights.large * 1.5,
+    xxxxlarge: theme.lineHeights.xlarge * 1.5,
+    xxxxxlarge: theme.lineHeights.xxlarge * 1.5
+  };
   var radii = {
     rounded: theme.radii.rounded
   };
@@ -1760,7 +1770,8 @@ var getAvatarTheme = function getAvatarTheme(theme) {
     sizes: sizes,
     radii: radii,
     fonts: fonts,
-    fontSizes: fontSizes
+    fontSizes: fontSizes,
+    lineHeights: lineHeights
   };
 };
 
@@ -1780,6 +1791,9 @@ var getBadgeTheme = function getBadgeTheme(theme) {
   var fontSizes = {
     "default": theme.fontSizes.small
   };
+  var lineHeights = {
+    "default": theme.lineHeights.small
+  };
   var sizes = {
     height: theme.fontSizes.small + theme.sizes.small,
     minWidth: theme.fontSizes.small + theme.sizes.small,
@@ -1796,7 +1810,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     fonts: fonts,
     fontSizes: fontSizes,
     sizes: sizes,
-    space: space
+    space: space,
+    lineHeights: lineHeights
   };
 };
 
@@ -2366,6 +2381,10 @@ var getPinInputTheme = function getPinInputTheme(theme) {
     cellText: theme.fontSizes.xxxxlarge,
     errorMessage: theme.fontSizes.small
   };
+  var lineHeights = {
+    cellText: theme.lineHeights.xxxxlarge,
+    errorMessage: theme.fontSizes.small
+  };
   var sizes = {
     cellWidth: theme.sizes.xxlarge,
     cellHeight: theme.sizes.xxxlarge,
@@ -2381,6 +2400,7 @@ var getPinInputTheme = function getPinInputTheme(theme) {
   };
   return {
     borderWidths: borderWidths,
+    lineHeights: lineHeights,
     colors: colors,
     fonts: fonts,
     fontSizes: fontSizes,
@@ -5987,7 +6007,7 @@ var StyledText$3 = index$a(reactNative.Text)(function (_ref) {
   });
 });
 
-var _excluded$p = ["children", "fontSize", "fontWeight", "intent", "typeface"];
+var _excluded$p = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
 var Text = function Text(_ref) {
   var children = _ref.children,
     _ref$fontSize = _ref.fontSize,
@@ -5998,12 +6018,15 @@ 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,
+    _ref$allowFontScaling = _ref.allowFontScaling,
+    allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
     nativeProps = _objectWithoutProperties(_ref, _excluded$p);
   return /*#__PURE__*/React__default["default"].createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
     themeFontWeight: fontWeight,
     themeIntent: intent,
-    themeTypeface: typeface
+    themeTypeface: typeface,
+    allowFontScaling: allowFontScaling
   }), children);
 };
 
@@ -6837,12 +6860,15 @@ var StyledTextWrapper$1 = index$a(reactNative.View)(function () {
     height: '100%'
   };
 });
-var StyledText$2 = index$a(reactNative.Text)(function (_ref2) {
+var StyledText$2 = index$a(Typography.Text)(function (_ref2) {
   var themeSize = _ref2.themeSize,
     theme = _ref2.theme;
   return {
     fontFamily: theme.__hd__.avatar.fonts["default"],
     fontSize: theme.__hd__.avatar.fontSizes[themeSize],
+    lineHeight: 0,
+    textAlignVertical: 'center',
+    textAlign: 'center',
     color: theme.__hd__.avatar.colors.text,
     overflow: 'hidden'
   };
@@ -6991,11 +7017,12 @@ var StyledView$2 = index$a(reactNative.Animated.View)(function (_ref) {
     paddingHorizontal: themePadding === 'wideContent' ? theme.__hd__.badge.space.horizontalPadding : undefined
   };
 });
-var StyledText$1 = index$a(reactNative.Text)(function (_ref2) {
+var StyledText$1 = index$a(Typography.Text)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     fontFamily: theme.__hd__.badge.fonts["default"],
     fontSize: theme.__hd__.badge.fontSizes["default"],
+    lineHeight: theme.__hd__.badge.lineHeights["default"],
     color: theme.__hd__.badge.colors.text,
     includeFontPadding: false,
     textAlignVertical: 'center',
@@ -11545,7 +11572,7 @@ var StyledErrorAndMaxLengthContainer = index$a(reactNative.View)(function () {
   };
 });
 
-var _excluded$a = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "helpText", "value", "defaultValue", "renderInputValue"];
+var _excluded$a = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling"];
 var getVariant$1 = function getVariant(_ref) {
   var disabled = _ref.disabled,
     error = _ref.error,
@@ -11591,6 +11618,8 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     value = _ref2.value,
     defaultValue = _ref2.defaultValue,
     renderInputValue = _ref2.renderInputValue,
+    _ref2$allowFontScalin = _ref2.allowFontScaling,
+    allowFontScaling = _ref2$allowFontScalin === void 0 ? false : _ref2$allowFontScalin,
     nativeProps = _objectWithoutProperties(_ref2, _excluded$a);
   var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
@@ -11679,7 +11708,8 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     },
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    accessibilityLabelledBy: accessibilityLabelledBy
+    accessibilityLabelledBy: accessibilityLabelledBy,
+    allowFontScaling: allowFontScaling
   }, nativeProps), {}, {
     onFocus: function onFocus(event) {
       var _nativeProps$onFocus;
@@ -12216,7 +12246,7 @@ var StyledWrapper$5 = index$a(reactNative.View)(function (_ref) {
     padding: theme.__hd__.empty.space.wrapperPadding
   };
 });
-var StyledTitle = index$a(reactNative.Text)(function (_ref2) {
+var StyledTitle = index$a(Typography.Text)(function (_ref2) {
   var theme = _ref2.theme,
     themeVariant = _ref2.themeVariant;
   return {
@@ -12227,7 +12257,7 @@ var StyledTitle = index$a(reactNative.Text)(function (_ref2) {
     color: themeVariant === 'dark' ? theme.__hd__.empty.colors.invertedText : theme.__hd__.empty.colors.text
   };
 });
-var StyledDescription = index$a(reactNative.Text)(function (_ref3) {
+var StyledDescription = index$a(Typography.Text)(function (_ref3) {
   var theme = _ref3.theme,
     themeVariant = _ref3.themeVariant;
   return {
@@ -12284,7 +12314,7 @@ var StyledFABIcon = index$a(Icon)(function (_ref2) {
     textAlign: 'center'
   };
 });
-var StyledFABText = index$a(reactNative.Text)(function (_ref3) {
+var StyledFABText = index$a(Typography.Text)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     fontFamily: theme.__hd__.fab.fonts.title,
@@ -12767,12 +12797,13 @@ var StyledCell = index$a(reactNative.View)(function (_ref) {
     borderColor: theme.__hd__.pinInput.colors[themeState]
   };
 });
-var StyledCellText = index$a(reactNative.Text)(function (_ref2) {
+var StyledCellText = index$a(Typography.Text)(function (_ref2) {
   var theme = _ref2.theme,
     themeState = _ref2.themeState;
   return {
     fontFamily: theme.__hd__.pinInput.fonts.cellText,
     fontSize: theme.__hd__.pinInput.fontSizes.cellText,
+    lineHeight: theme.__hd__.pinInput.lineHeights.cellText,
     color: theme.__hd__.pinInput.colors[themeState]
   };
 });
@@ -12823,10 +12854,11 @@ var StyledErrorContainer = index$a(reactNative.View)(function (_ref7) {
   var theme = _ref7.theme;
   return {
     flexDirection: 'row',
-    paddingTop: theme.__hd__.pinInput.space.errorMessagePadding
+    paddingTop: theme.__hd__.pinInput.space.errorMessagePadding,
+    alignItems: 'center'
   };
 });
-var StyledErrorMessage = index$a(reactNative.Text)(function (_ref8) {
+var StyledErrorMessage = index$a(Typography.Text)(function (_ref8) {
   var theme = _ref8.theme;
   return {
     fontFamily: theme.__hd__.pinInput.fonts.errorMessage,
@@ -14525,9 +14557,8 @@ var getTabItem$1 = function getTabItem(_ref) {
     color: color
   });
 };
-var ScrollableTab = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
-  var _ref2$onTabPress = _ref2.onTabPress,
-    onTabPress = _ref2$onTabPress === void 0 ? noop : _ref2$onTabPress,
+var ScrollableTab = function ScrollableTab(_ref2) {
+  var onTabPress = _ref2.onTabPress,
     selectedTabKey = _ref2.selectedTabKey,
     tabs = _ref2.tabs,
     containerStyle = _ref2.containerStyle,
@@ -14549,46 +14580,20 @@ var ScrollableTab = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var tabsAnims = useAnimatedValueArray(tabs.map(function (_, i) {
     return i === selectedTabIndex ? 1 : 0;
   }));
-  React__default["default"].useImperativeHandle(ref, function () {
-    return {
-      selectTabKey: function selectTabKey(tabKey) {
-        var index = tabs.findIndex(function (item) {
-          return item.key === tabKey;
-        });
-        if (index !== -1) {
-          var _flatListRef$current, _pagerViewRef$current;
-          (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
-            index: index,
-            viewPosition: 0.5
-          });
-          (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 ? void 0 : _pagerViewRef$current.setPage(index);
-          if (onTabPress) {
-            onTabPress(tabKey);
-          }
-        }
-      },
-      getFlatListRef: function getFlatListRef() {
-        return flatListRef.current;
-      },
-      getPagerViewRef: function getPagerViewRef() {
-        return pagerViewRef.current;
-      }
-    };
-  }, [pagerViewRef, flatListRef, tabs]);
   React__default["default"].useEffect(function () {
     var timeoutHandle = null;
     if (selectedTabIndex !== -1) {
-      var _flatListRef$current2;
-      (_flatListRef$current2 = flatListRef.current) === null || _flatListRef$current2 === void 0 ? void 0 : _flatListRef$current2.scrollToIndex({
+      var _flatListRef$current;
+      (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
         index: selectedTabIndex,
         viewPosition: 0.5
       });
       // 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$current2;
+        var _pagerViewRef$current;
         // use no animation to prevent unexpected behavior if users select tab too quickly
-        (_pagerViewRef$current2 = pagerViewRef.current) === null || _pagerViewRef$current2 === void 0 ? void 0 : _pagerViewRef$current2.setPageWithoutAnimation(selectedTabIndex);
+        (_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) {
@@ -14605,7 +14610,7 @@ var ScrollableTab = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
         clearTimeout(timeoutHandle);
       }
     };
-  }, [selectedTabIndex, selectedTabKey, pagerViewRef]);
+  }, [selectedTabIndex, pagerViewRef]);
   return /*#__PURE__*/React__default["default"].createElement(TabContainer, {
     style: containerStyle,
     testID: componentTestID
@@ -14624,8 +14629,8 @@ var ScrollableTab = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     onScrollToIndexFailed: function onScrollToIndexFailed(_ref3) {
       var index = _ref3.index;
       setTimeout(function () {
-        var _flatListRef$current3;
-        return (_flatListRef$current3 = flatListRef.current) === null || _flatListRef$current3 === void 0 ? void 0 : _flatListRef$current3.scrollToIndex({
+        var _flatListRef$current2;
+        return (_flatListRef$current2 = flatListRef.current) === null || _flatListRef$current2 === void 0 ? void 0 : _flatListRef$current2.scrollToIndex({
           index: index,
           viewPosition: 0.5
         });
@@ -14681,7 +14686,7 @@ var ScrollableTab = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     onPageSelected: function onPageSelected(e) {
       var index = e.nativeEvent.position;
       var selectedItem = tabs[index];
-      if (selectedItem && selectedItem.key !== selectedTabKey) {
+      if (selectedItem) {
         onTabPress(selectedItem.key);
       }
     },
@@ -14701,7 +14706,7 @@ var ScrollableTab = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       collapsable: false
     }, isLazyScreen ? null : component);
   })));
-});
+};
 
 var getTabItem = function getTabItem(_ref) {
   var item = _ref.item,
@@ -14862,7 +14867,7 @@ var StyledView = index$a(reactNative.View)(function (_ref) {
     backgroundColor: backgroundColor
   };
 });
-var StyledText = index$a(reactNative.Text)(function (_ref3) {
+var StyledText = index$a(Typography.Text)(function (_ref3) {
   var themeIntent = _ref3.themeIntent,
     themeVariant = _ref3.themeVariant,
     theme = _ref3.theme;