@hero-design/rn-work-uikit 1.9.4 → 1.9.5

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @hero-design/rn-work-uikit
 
+## 1.9.5
+
+### Patch Changes
+
+- [#4546](https://github.com/Thinkei/hero-design/pull/4546) [`3d952f2800d556206f58098b021b856b0557eb76`](https://github.com/Thinkei/hero-design/commit/3d952f2800d556206f58098b021b856b0557eb76) Thanks [@ttkien](https://github.com/ttkien)! - [Tabs] update Tab highlights animated logic
+
+- Updated dependencies [[`3d952f2800d556206f58098b021b856b0557eb76`](https://github.com/Thinkei/hero-design/commit/3d952f2800d556206f58098b021b856b0557eb76), [`3dd028bcd49e00d13c9112e18103659e75c1bc95`](https://github.com/Thinkei/hero-design/commit/3dd028bcd49e00d13c9112e18103659e75c1bc95)]:
+  - @hero-design/rn@8.113.1
+
 ## 1.9.4
 
 ### Patch Changes

package/lib/index.js

@@ -3735,13 +3735,13 @@ var StyledDivider = index$c(reactNative.View)(function (_ref) {
   }, horizontalMargin), verticalMargin);
 });
 
-var _excluded$R = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$Q = ["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$R);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$Q);
   return /*#__PURE__*/React__namespace.default.createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
     themeMarginVertical: marginVertical,
@@ -6025,7 +6025,7 @@ var getBottomNavigationTheme = function getBottomNavigationTheme(theme) {
     wrapper: theme.shadows.medium
   };
   var space = {
-    titleMarginTop: theme.space.xsmall
+    titleMarginTop: theme.space.xxsmall
   };
   return {
     colors: colors,
@@ -8080,7 +8080,7 @@ var StyledLoadingDot = index$c(reactNative.View)(function (_ref) {
   }, themeStyling());
 });
 
-var _excluded$Q = ["count", "size", "testID", "themeVariant"];
+var _excluded$P = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = reactNative.Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = reactNative.Animated.createAnimatedComponent(StyledLoadingDot);
 var renderDotComponent = function renderDotComponent(_ref) {
@@ -8112,7 +8112,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
     size = _ref2$size === void 0 ? 12 : _ref2$size,
     testID = _ref2.testID,
     themeVariant = _ref2.themeVariant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$Q);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$P);
   var progressAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
     var animation = reactNative.Animated.loop(reactNative.Animated.timing(progressAnimation.current, {
@@ -8739,10 +8739,10 @@ var StyledHeroIcon = index$c(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$P = ["style"];
+var _excluded$O = ["style"];
 var AnimatedIcon = function AnimatedIcon(_ref) {
   var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$P);
+    otherProps = _objectWithoutProperties(_ref, _excluded$O);
   var rotateAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
     var animation = reactNative.Animated.loop(reactNative.Animated.timing(rotateAnimation.current, {
@@ -8842,7 +8842,7 @@ var StyledText$4 = index$c(reactNative.Text)(function (_ref) {
   });
 });
 
-var _excluded$O = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
+var _excluded$N = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
 /**
  * @deprecated Typography.Text is deprecated and will be removed in the next major release, please refer to https://design.employmenthero.com/mobile/Components/typography for the appropriate alternatives.
  */
@@ -8858,7 +8858,7 @@ var Text = function Text(_ref) {
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$O);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$N);
   useDeprecation('Typography.Text is deprecated and will be removed in the next major release, please refer to https://design.employmenthero.com/mobile/Components/typography for the appropriate alternatives.');
   return /*#__PURE__*/React__namespace.default.createElement(StyledText$4, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
@@ -8891,7 +8891,7 @@ var StyledCaption = index$c(reactNative.Text)(function (_ref) {
   };
 });
 
-var _excluded$N = ["children", "fontWeight", "intent", "allowFontScaling", "fontStyle"];
+var _excluded$M = ["children", "fontWeight", "intent", "allowFontScaling", "fontStyle"];
 var Caption = function Caption(_ref) {
   var children = _ref.children,
     _ref$fontWeight = _ref.fontWeight,
@@ -8902,7 +8902,7 @@ var Caption = function Caption(_ref) {
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
     _ref$fontStyle = _ref.fontStyle,
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$N);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$M);
   return /*#__PURE__*/React__namespace.default.createElement(StyledCaption, _extends$1({}, nativeProps, {
     themeFontWeight: fontWeight,
     themeIntent: intent,
@@ -8927,7 +8927,7 @@ var StyledLabel$2 = index$c(reactNative.Text)(function (_ref) {
   };
 });
 
-var _excluded$M = ["children", "intent", "allowFontScaling", "fontStyle"];
+var _excluded$L = ["children", "intent", "allowFontScaling", "fontStyle"];
 var Label = function Label(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -8936,7 +8936,7 @@ var Label = function Label(_ref) {
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
     _ref$fontStyle = _ref.fontStyle,
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$M);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$L);
   return /*#__PURE__*/React__namespace.default.createElement(StyledLabel$2, _extends$1({}, nativeProps, {
     themeIntent: intent,
     themeIsItalic: fontStyle === 'italic',
@@ -8959,7 +8959,7 @@ var StyledTitle$1 = index$c(reactNative.Text)(function (_ref) {
   };
 });
 
-var _excluded$L = ["children", "intent", "allowFontScaling", "level", "typeface", "fontStyle"];
+var _excluded$K = ["children", "intent", "allowFontScaling", "level", "typeface", "fontStyle"];
 var Title = function Title(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -8972,7 +8972,7 @@ var Title = function Title(_ref) {
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
     _ref$fontStyle = _ref.fontStyle,
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$L);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$K);
   return /*#__PURE__*/React__namespace.default.createElement(StyledTitle$1, _extends$1({}, nativeProps, {
     themeLevel: level,
     themeTypeface: typeface,
@@ -9011,7 +9011,7 @@ var StyledBody$2 = index$c(reactNative.Text)(function (_ref) {
   };
 });
 
-var _excluded$K = ["children", "intent", "allowFontScaling", "typeface", "variant", "fontStyle"];
+var _excluded$J = ["children", "intent", "allowFontScaling", "typeface", "variant", "fontStyle"];
 var Body = function Body(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -9024,7 +9024,7 @@ var Body = function Body(_ref) {
     variant = _ref$variant === void 0 ? 'regular' : _ref$variant,
     _ref$fontStyle = _ref.fontStyle,
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$K);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$J);
   return /*#__PURE__*/React__namespace.default.createElement(StyledBody$2, _extends$1({}, nativeProps, {
     themeTypeface: typeface,
     themeIntent: intent,
@@ -9647,11 +9647,11 @@ var Header = function Header(_ref) {
   }))) : null), showDivider ? /*#__PURE__*/React__namespace.default.createElement(Divider, null) : null);
 };
 
-var _excluded$J = ["scrollEventThrottle"];
+var _excluded$I = ["scrollEventThrottle"];
 var BottomSheetScrollView = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$scrollEventThrot = _ref.scrollEventThrottle,
     scrollEventThrottle = _ref$scrollEventThrot === void 0 ? 100 : _ref$scrollEventThrot,
-    props = _objectWithoutProperties(_ref, _excluded$J);
+    props = _objectWithoutProperties(_ref, _excluded$I);
   var _useContext = React.useContext(BottomSheetContext),
     setInternalShowDivider = _useContext.setInternalShowDivider;
   var onScrollBeginDrag = React.useCallback(function (e) {
@@ -9984,7 +9984,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$I = ["theme"];
+var _excluded$H = ["theme"];
 var getThemeValue = function getThemeValue(theme, key, props) {
   var propConfig = config[key];
   var propValue = props[key];
@@ -10011,18 +10011,18 @@ var mapStylePropToThemeValue = function mapStylePropToThemeValue(theme, props) {
 var configKeys = Object.keys(config);
 var StyledBox = index$c(reactNative.View)(function (_ref5) {
   var theme = _ref5.theme,
-    otherProps = _objectWithoutProperties(_ref5, _excluded$I);
+    otherProps = _objectWithoutProperties(_ref5, _excluded$H);
   var styleProps = pick(configKeys, otherProps);
   var flexProps = pick(_toConsumableArray(flexPropsKey), otherProps);
   return _objectSpread2(_objectSpread2({}, mapStylePropToThemeValue(theme, styleProps)), flexProps);
 });
 
-var _excluded$H = ["children", "style", "testID"];
+var _excluded$G = ["children", "style", "testID"];
 var Box = function Box(_ref) {
   var children = _ref.children,
     style = _ref.style,
     testID = _ref.testID,
-    otherProps = _objectWithoutProperties(_ref, _excluded$H);
+    otherProps = _objectWithoutProperties(_ref, _excluded$G);
   return /*#__PURE__*/React__namespace.default.createElement(StyledBox, _extends$1({}, otherProps, {
     style: style,
     testID: testID
@@ -10160,7 +10160,7 @@ var StyledErrorAndMaxLengthContainer = index$c(reactNative.View)(function (_ref1
   };
 });
 
-var _excluded$G = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "hideCharacterCount", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling", "variant"];
+var _excluded$F = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "hideCharacterCount", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling", "variant"];
 var getState$4 = function getState(_ref) {
   var disabled = _ref.disabled,
     error = _ref.error,
@@ -10280,7 +10280,7 @@ var TextInput$1 = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
     allowFontScaling = _ref8$allowFontScalin === void 0 ? false : _ref8$allowFontScalin,
     _ref8$variant = _ref8.variant,
     variant = _ref8$variant === void 0 ? 'text' : _ref8$variant,
-    nativeProps = _objectWithoutProperties(_ref8, _excluded$G);
+    nativeProps = _objectWithoutProperties(_ref8, _excluded$F);
   var displayText = getDisplayText(value, defaultValue);
   var isEmptyValue = displayText.length === 0;
   var _React$useState = React__namespace.default.useState({
@@ -10758,14 +10758,14 @@ var AnimatedSpinner = function AnimatedSpinner(_ref) {
   }, dotProps))));
 };
 
-var _excluded$F = ["testID", "size", "intent"];
+var _excluded$E = ["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$F);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$E);
   return /*#__PURE__*/React__namespace.default.createElement(StyledView$2, nativeProps, /*#__PURE__*/React__namespace.default.createElement(StyledSpinnerContainer, {
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(AnimatedSpinner, {
@@ -10774,7 +10774,7 @@ var Spinner = function Spinner(_ref) {
   })));
 };
 
-var _excluded$E = ["keyExtractor", "loading", "onEndReached", "onQueryChange", "sections", "renderItem", "sectionListRef"];
+var _excluded$D = ["keyExtractor", "loading", "onEndReached", "onQueryChange", "sections", "renderItem", "sectionListRef"];
 var BaseOptionList = function BaseOptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -10783,7 +10783,7 @@ var BaseOptionList = function BaseOptionList(_ref) {
     sections = _ref.sections,
     renderItem = _ref.renderItem,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$E);
+    rest = _objectWithoutProperties(_ref, _excluded$D);
   var theme = useTheme$1();
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -11050,7 +11050,7 @@ var isOptionSelected = function isOptionSelected(value, option) {
   });
 };
 
-var _excluded$D = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
+var _excluded$C = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
 var OptionList$1 = function OptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -11061,7 +11061,7 @@ var OptionList$1 = function OptionList(_ref) {
     renderOption = _ref.renderOption,
     value = _ref.value,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$D);
+    rest = _objectWithoutProperties(_ref, _excluded$C);
   var renderItem = function renderItem(info) {
     var item = info.item;
     var selected = isOptionSelected(value, item);
@@ -11096,7 +11096,7 @@ var OptionList$1 = function OptionList(_ref) {
   }, rest));
 };
 
-var _excluded$C = ["footerLabel", "label", "loading", "inputProps", "onConfirm", "onDismiss", "onEndReached", "onQueryChange", "options", "renderOption", "renderSelectedValue", "query", "error", "editable", "disabled", "required", "style", "testID", "value", "supportedOrientations", "bottomSheetConfig", "groupStyleEnabled"];
+var _excluded$B = ["footerLabel", "label", "loading", "inputProps", "onConfirm", "onDismiss", "onEndReached", "onQueryChange", "options", "renderOption", "renderSelectedValue", "query", "error", "editable", "disabled", "required", "style", "testID", "value", "supportedOrientations", "bottomSheetConfig", "groupStyleEnabled"];
 
 // Add an internal prop type for TextInputComponent, not exported
 
@@ -11129,7 +11129,7 @@ function MultiSelect$1(_ref) {
     bottomSheetConfig = _ref$bottomSheetConfi === void 0 ? {} : _ref$bottomSheetConfi,
     _ref$groupStyleEnable = _ref.groupStyleEnabled,
     groupStyleEnabled = _ref$groupStyleEnable === void 0 ? false : _ref$groupStyleEnable,
-    rest = _objectWithoutProperties(_ref, _excluded$C);
+    rest = _objectWithoutProperties(_ref, _excluded$B);
   var _useKeyboard = useKeyboard(),
     isKeyboardVisible = _useKeyboard.isKeyboardVisible,
     keyboardHeight = _useKeyboard.keyboardHeight;
@@ -11269,7 +11269,7 @@ var StyledOptionList = index$c(BaseOptionList)(function (_ref) {
   };
 });
 
-var _excluded$B = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
+var _excluded$A = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
 var OptionList = function OptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -11280,7 +11280,7 @@ var OptionList = function OptionList(_ref) {
     renderOption = _ref.renderOption,
     value = _ref.value,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$B);
+    rest = _objectWithoutProperties(_ref, _excluded$A);
   var renderItem = function renderItem(info) {
     var item = info.item;
     var selected = _deepCompareValue(item.value, value);
@@ -11316,7 +11316,7 @@ var OptionList = function OptionList(_ref) {
   }, rest));
 };
 
-var _excluded$A = ["label", "loading", "inputProps", "onConfirm", "onDismiss", "onEndReached", "onQueryChange", "options", "renderOption", "renderSelectedValue", "query", "error", "editable", "disabled", "required", "style", "testID", "value", "supportedOrientations", "bottomSheetConfig", "groupStyleEnabled"];
+var _excluded$z = ["label", "loading", "inputProps", "onConfirm", "onDismiss", "onEndReached", "onQueryChange", "options", "renderOption", "renderSelectedValue", "query", "error", "editable", "disabled", "required", "style", "testID", "value", "supportedOrientations", "bottomSheetConfig", "groupStyleEnabled"];
 
 // Add an internal prop type for TextInputComponent, not exported
 
@@ -11349,7 +11349,7 @@ var SingleSelect$1 = function SingleSelect(_ref) {
     bottomSheetConfig = _ref$bottomSheetConfi === void 0 ? {} : _ref$bottomSheetConfi,
     _ref$groupStyleEnable = _ref.groupStyleEnabled,
     groupStyleEnabled = _ref$groupStyleEnable === void 0 ? false : _ref$groupStyleEnable,
-    rest = _objectWithoutProperties(_ref, _excluded$A);
+    rest = _objectWithoutProperties(_ref, _excluded$z);
   var _useKeyboard = useKeyboard(),
     isKeyboardVisible = _useKeyboard.isKeyboardVisible,
     keyboardHeight = _useKeyboard.keyboardHeight;
@@ -14988,13 +14988,13 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
   }));
 };
 
-var _excluded$z = ["variant", "TextInputComponent"];
+var _excluded$y = ["variant", "TextInputComponent"];
 var DatePicker$1 = function DatePicker(_ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
     _ref$TextInputCompone = _ref.TextInputComponent,
     TextInputComponent = _ref$TextInputCompone === void 0 ? TextInput$1 : _ref$TextInputCompone,
-    props = _objectWithoutProperties(_ref, _excluded$z);
+    props = _objectWithoutProperties(_ref, _excluded$y);
   if (variant === 'calendar') {
     return /*#__PURE__*/React__namespace.default.createElement(DatePickerCalendar, _extends$1({}, props, {
       TextInputComponent: TextInputComponent
@@ -15352,7 +15352,7 @@ var AccordionItem = function AccordionItem(_ref) {
   }, content));
 };
 
-var _excluded$y = ["key"];
+var _excluded$x = ["key"];
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
     activeItemKey = _ref.activeItemKey,
@@ -15375,7 +15375,7 @@ var Accordion = function Accordion(_ref) {
     accessible: accessible
   }, items.map(function (_ref2, index) {
     var key = _ref2.key,
-      props = _objectWithoutProperties(_ref2, _excluded$y);
+      props = _objectWithoutProperties(_ref2, _excluded$x);
     var open = _activeItemKey === key;
     return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, {
       key: key
@@ -16300,7 +16300,7 @@ var StyledIcon$4 = index$c(Icon)(function (_ref6) {
   };
 });
 
-var _excluded$x = ["children", "visible", "intent", "style", "testID"];
+var _excluded$w = ["children", "visible", "intent", "style", "testID"];
 var Status$1 = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
@@ -16309,7 +16309,7 @@ var Status$1 = function Status(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$x);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$w);
   var _React$useRef = React__namespace.default.useRef(new reactNative.Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React__namespace.default.useRef(true);
@@ -16345,7 +16345,7 @@ var Status$1 = function Status(_ref) {
 
 var DEFAULT_MAX_NUMBER = 99;
 
-var _excluded$w = ["children", "visible", "style", "max", "testID", "content"];
+var _excluded$v = ["children", "visible", "style", "max", "testID", "content"];
 var Status = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
@@ -16355,7 +16355,7 @@ var Status = function Status(_ref) {
     max = _ref$max === void 0 ? DEFAULT_MAX_NUMBER : _ref$max,
     testID = _ref.testID,
     originalContent = _ref.content,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$w);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$v);
   var content = React.useMemo(function () {
     return originalContent > max ? "".concat(max, "+") : String(originalContent);
   }, [originalContent, max]);
@@ -16367,7 +16367,7 @@ var Status = function Status(_ref) {
   }, /*#__PURE__*/React__namespace.default.createElement(StyledCountText, null, content)));
 };
 
-var _excluded$v = ["content", "visible", "max", "intent", "style", "testID", "size", "variant", "icon"];
+var _excluded$u = ["content", "visible", "max", "intent", "style", "testID", "size", "variant", "icon"];
 var getPaddingState = function getPaddingState(content) {
   return content.length > 1 ? 'wideContent' : 'narrowContent';
 };
@@ -16386,7 +16386,7 @@ var Badge = function Badge(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'filled' : _ref$variant,
     icon = _ref.icon,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$v);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$u);
   var _React$useRef = React__namespace.default.useRef(new reactNative.Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React__namespace.default.useRef(true);
@@ -16478,14 +16478,14 @@ var BottomBarItem = index$c(reactNative.View)({
   flex: 1,
   alignItems: 'center'
 });
-var StyledBottomBarText = index$c(Typography.Caption)(function (_ref3) {
+var StyledBottomBarText = index$c(Typography.Label)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     marginTop: theme.__hd__.bottomNavigation.space.titleMarginTop
   };
 });
 
-var _excluded$u = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$t = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
   return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
@@ -16496,7 +16496,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
     selectedTabKey = _ref.selectedTabKey,
     tabs = _ref.tabs,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$u);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$t);
   var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
 
   /**
@@ -16554,11 +16554,10 @@ var BottomNavigation = function BottomNavigation(_ref) {
       testID: testID
     }, /*#__PURE__*/React__namespace.default.createElement(BottomBarItem, null, /*#__PURE__*/React__namespace.default.createElement(Icon, {
       icon: active ? icon : inactiveIcon,
-      intent: active ? 'primary' : 'text',
+      intent: active ? 'primary' : 'muted',
       testID: "hero-icon-".concat(icon)
     }), !!title && /*#__PURE__*/React__namespace.default.createElement(StyledBottomBarText, {
-      fontWeight: "semi-bold",
-      intent: active ? 'primary' : 'body',
+      intent: active ? 'primary' : 'muted',
       numberOfLines: 1
     }, title)));
   }))));
@@ -16590,12 +16589,12 @@ var Indicator = index$c(reactNative.View)(function (_ref3) {
   };
 });
 
-var _excluded$t = ["intent", "children"];
+var _excluded$s = ["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$t);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$s);
   return /*#__PURE__*/React__namespace.default.createElement(StyledDataCard, nativeProps, /*#__PURE__*/React__namespace.default.createElement(Indicator, {
     themeIntent: intent,
     testID: "data-card-indicator"
@@ -16614,13 +16613,13 @@ var StyledCard$1 = index$c(reactNative.View)(function (_ref) {
   });
 });
 
-var _excluded$s = ["intent", "children", "variant"];
+var _excluded$r = ["intent", "children", "variant"];
 var Card = function Card(_ref) {
   var intent = _ref.intent,
     children = _ref.children,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'basic' : _ref$variant,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$s);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$r);
   return /*#__PURE__*/React__namespace.default.createElement(StyledCard$1, _extends$1({}, nativeProps, {
     themeIntent: intent,
     themeVariant: variant
@@ -16889,7 +16888,7 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 CardCarousel.displayName = 'CardCarousel';
 
-var _excluded$r = ["rounded", "size", "testID", "style"];
+var _excluded$q = ["rounded", "size", "testID", "style"];
 /**
  * @deprecated Image component will soon be deprecated. Please use `Image` from `react-native` instead.
  */
@@ -16900,7 +16899,7 @@ var Image = function Image(_ref) {
     size = _ref$size === void 0 ? '6xlarge' : _ref$size,
     testID = _ref.testID,
     style = _ref.style,
-    imageNativeProps = _objectWithoutProperties(_ref, _excluded$r);
+    imageNativeProps = _objectWithoutProperties(_ref, _excluded$q);
   useDeprecation('Image component will soon be deprecated. Please use `Image` from `react-native` instead.');
   var theme = useTheme();
   var imageSize = theme.__hd__.image.sizes[size];
@@ -17035,7 +17034,7 @@ var CarouselItem = function CarouselItem(_ref) {
   }, heading), !!body && /*#__PURE__*/React__namespace.default.createElement(Typography.Body, null, body)));
 };
 
-var _excluded$q = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "testID", "pageControlPosition"];
+var _excluded$p = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "testID", "pageControlPosition"];
 function useStateFromProp(initialValue) {
   var _useState = React.useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
@@ -17062,7 +17061,7 @@ var Carousel = function Carousel(_ref) {
     testID = _ref.testID,
     _ref$pageControlPosit = _ref.pageControlPosition,
     pageControlPosition = _ref$pageControlPosit === void 0 ? 'top' : _ref$pageControlPosit,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$q);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$p);
   useDeprecation("shouldShowPagination prop has been deprecated", shouldShowPagination !== noop$1);
   useDeprecation("The use of 'pageControlPosition == bottom' has been deprecated", pageControlPosition === 'bottom');
   var theme = useTheme();
@@ -22202,7 +22201,7 @@ var StyledChipIcon = index$c(Icon)(function (_ref2) {
   };
 });
 
-var _excluded$p = ["label", "variant", "selected", "icon", "onPress", "showSelectedIcon", "accessible"];
+var _excluded$o = ["label", "variant", "selected", "icon", "onPress", "showSelectedIcon", "accessible"];
 
 /**
  * @deprecated Use 'selection' | 'filter' | 'compact' | 'compact-outlined' instead.
@@ -22241,7 +22240,7 @@ var Chip = function Chip(_ref) {
     _ref$showSelectedIcon = _ref.showSelectedIcon,
     showSelectedIcon = _ref$showSelectedIcon === void 0 ? true : _ref$showSelectedIcon,
     accessible = _ref.accessible,
-    otherProps = _objectWithoutProperties(_ref, _excluded$p);
+    otherProps = _objectWithoutProperties(_ref, _excluded$o);
   useDeprecation('Chip variant `outlined` and `filled` are deprecated.', variant === 'outlined' || variant === 'filled');
   var renamedVariant = getChipVariant(variant);
   var shouldShowSelectedIcon = (renamedVariant === 'selection' || renamedVariant === 'compact-outlined') && selected && showSelectedIcon;
@@ -24308,15 +24307,16 @@ var Portal$1 = Object.assign(Portal, {
   Host: PortalHost
 });
 
-var _excluded$o = ["visible"];
 var DEFAULT_BACKDROP_OPACITY = 0.4;
 var DEFAULT_ANIMATION_CONFIG = {
   easing: reactNative.Easing.inOut(reactNative.Easing.cubic),
   useNativeDriver: reactNative.Platform.OS !== 'web',
   duration: 400
 };
-var Modal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var Modal = function Modal(_ref) {
   var children = _ref.children,
+    _ref$visible = _ref.visible,
+    visible = _ref$visible === void 0 ? true : _ref$visible,
     onShow = _ref.onShow,
     onRequestClose = _ref.onRequestClose,
     testID = _ref.testID,
@@ -24328,59 +24328,60 @@ var Modal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var theme = useTheme();
   var animatedBackdropValue = React.useRef(new reactNative.Animated.Value(0)).current;
   var animatedModalValue = React.useRef(new reactNative.Animated.Value(0)).current;
+  var _useState = React.useState(visible),
+    _useState2 = _slicedToArray(_useState, 2),
+    mounted = _useState2[0],
+    setMounted = _useState2[1];
+  var previousVisible = React.useRef(false);
 
-  // Show or hide the backdrop and modal content
-  var animateBackdropAndContent = React.useCallback(function (_ref2) {
-    var toValue = _ref2.toValue,
-      callback = _ref2.callback;
-    if (animationType !== 'none') {
-      // Backdrop animation
-      if (!transparent) {
-        reactNative.Animated.timing(animatedBackdropValue, _objectSpread2({
-          toValue: toValue
-        }, DEFAULT_ANIMATION_CONFIG)).start();
-      }
-
-      // Modal content animation
-      reactNative.Animated.timing(animatedModalValue, _objectSpread2({
-        toValue: toValue
-      }, DEFAULT_ANIMATION_CONFIG)).start(callback);
-    } else {
-      callback === null || callback === void 0 || callback();
-    }
-  }, [animationType, onShow, transparent]);
-  var backdropOpacityAnimation = animatedBackdropValue.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, DEFAULT_BACKDROP_OPACITY]
-  });
-  var modalAnimation = animatedModalValue.interpolate({
-    inputRange: [0, 1],
-    outputRange: animationType === 'slide' ? [reactNative.Dimensions.get('window').height, 0] : [0, 1]
-  });
-  React.useImperativeHandle(ref, function () {
-    return {
-      show: function show() {
-        animateBackdropAndContent({
-          toValue: 1,
-          callback: onShow
+  // Animate in/out based on visible prop
+  React.useEffect(function () {
+    if (visible && !previousVisible.current) {
+      // Show animation
+      setMounted(true);
+      if (animationType !== 'none') {
+        if (!transparent) {
+          reactNative.Animated.timing(animatedBackdropValue, _objectSpread2({
+            toValue: 1
+          }, DEFAULT_ANIMATION_CONFIG)).start();
+        }
+        reactNative.Animated.timing(animatedModalValue, _objectSpread2({
+          toValue: 1
+        }, DEFAULT_ANIMATION_CONFIG)).start(function () {
+          onShow === null || onShow === void 0 || onShow();
         });
-      },
-      hide: function hide(wrapperCallback) {
-        animateBackdropAndContent({
-          toValue: 0,
-          callback: function callback() {
-            if (reactNative.Platform.OS === 'ios') {
-              onDismiss === null || onDismiss === void 0 || onDismiss();
-            }
-            wrapperCallback();
+      } else {
+        onShow === null || onShow === void 0 || onShow();
+      }
+    } else if (!visible && previousVisible.current) {
+      // Hide animation
+      if (animationType !== 'none') {
+        if (!transparent) {
+          reactNative.Animated.timing(animatedBackdropValue, _objectSpread2({
+            toValue: 0
+          }, DEFAULT_ANIMATION_CONFIG)).start();
+        }
+        reactNative.Animated.timing(animatedModalValue, _objectSpread2({
+          toValue: 0
+        }, DEFAULT_ANIMATION_CONFIG)).start(function () {
+          setMounted(false);
+          if (reactNative.Platform.OS === 'ios') {
+            onDismiss === null || onDismiss === void 0 || onDismiss();
           }
         });
+      } else {
+        setMounted(false);
+        if (reactNative.Platform.OS === 'ios') {
+          onDismiss === null || onDismiss === void 0 || onDismiss();
+        }
       }
-    };
-  }, [onDismiss, onShow, animateBackdropAndContent]);
+    }
+    previousVisible.current = visible;
+  }, [visible, animationType, transparent, onShow, onDismiss]);
 
   // Back button handler
   React.useEffect(function () {
+    if (!visible) return;
     var backHandler = reactNative.BackHandler.addEventListener('hardwareBackPress', function () {
       onRequestClose === null || onRequestClose === void 0 || onRequestClose();
       return true;
@@ -24388,7 +24389,18 @@ var Modal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return function () {
       return backHandler.remove();
     };
-  }, [onRequestClose]);
+  }, [visible, onRequestClose]);
+  var backdropOpacityAnimation = animatedBackdropValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, DEFAULT_BACKDROP_OPACITY]
+  });
+  var modalAnimation = animatedModalValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: animationType === 'slide' ? [reactNative.Dimensions.get('window').height, 0] : [0, 1]
+  });
+  if (!visible && !mounted) {
+    return null;
+  }
   return /*#__PURE__*/React__namespace.default.createElement(Portal$1, null, /*#__PURE__*/React__namespace.default.createElement(reactNative.Animated.View, {
     style: _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
       backgroundColor: transparent ? 'transparent' : theme.colors.overlayGlobalSurface,
@@ -24403,39 +24415,9 @@ var Modal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }]
     })
   }, children));
-});
-var ModalWrapper = function ModalWrapper(_ref3) {
-  var _ref3$visible = _ref3.visible,
-    visible = _ref3$visible === void 0 ? true : _ref3$visible,
-    props = _objectWithoutProperties(_ref3, _excluded$o);
-  var modalRef = React.useRef(null);
-  var _useState = React.useState(visible),
-    _useState2 = _slicedToArray(_useState, 2),
-    internalVisible = _useState2[0],
-    setInternalVisible = _useState2[1];
-  React.useEffect(function () {
-    if (visible) {
-      setInternalVisible(true);
-    } else {
-      var _modalRef$current;
-      // Wait for animation to finish before hiding the modal
-      (_modalRef$current = modalRef.current) === null || _modalRef$current === void 0 || _modalRef$current.hide(function () {
-        return setInternalVisible(false);
-      });
-    }
-  }, [visible]);
-  React.useEffect(function () {
-    if (internalVisible) {
-      var _modalRef$current2;
-      (_modalRef$current2 = modalRef.current) === null || _modalRef$current2 === void 0 || _modalRef$current2.show();
-    }
-  }, [internalVisible]);
-  return internalVisible ? /*#__PURE__*/React__namespace.default.createElement(Modal, _extends$1({
-    ref: modalRef
-  }, props)) : null;
 };
 
-var StyledErrorModal = index$c(ModalWrapper)({
+var StyledErrorModal = index$c(Modal)({
   height: '100%',
   width: '100%'
 });
@@ -27092,7 +27074,7 @@ var StyledSuccessButtonSecondary = index$c(CompoundButton)(function (_ref10) {
     marginTop: theme.__hd__.success.space.button.secondaryCTAMarginTop
   };
 });
-var StyledSuccessModal = index$c(ModalWrapper)({
+var StyledSuccessModal = index$c(Modal)({
   height: '100%',
   width: '100%'
 });
@@ -27840,10 +27822,10 @@ var ScrollableTabHeader = function ScrollableTabHeader(_ref2) {
         badge = tab.badge;
       var active = selectedIndex === index;
       var activeAnimated = tabsAnims[index];
-      var outlineScale = active ? activeAnimated.interpolate({
+      var outlineScale = activeAnimated.interpolate({
         inputRange: [0, 1],
         outputRange: [0.5, 1]
-      }) : 0;
+      });
       var inactiveItem = originalInactiveItem !== null && originalInactiveItem !== void 0 ? originalInactiveItem : activeItem;
       var tabItem = getTabItem$1({
         item: active ? activeItem : inactiveItem,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn-work-uikit",
-  "version": "1.9.4",
+  "version": "1.9.5",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -11,7 +11,7 @@
     "type-check": "tsc --noEmit",
     "test": "jest --runInBand",
     "test:watch": "jest --runInBand --watch",
-    "test:ci": "jest --c=jest-ci.config.js --i --logHeapUsage --coverage && cat ./coverage/lcov.info",
+    "test:ci": "jest --c=jest-ci.config.js --i --logHeapUsage --coverage",
     "build:js": "rollup -c",
     "build:types": "rollup -c rollup.config.mjs --configPlugin dts",
     "build": "yarn build:js && yarn build:types",
@@ -22,7 +22,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/rn": "^8.113.0",
+    "@hero-design/rn": "^8.113.1",
     "hero-editor": "^1.17.0"
   },
   "peerDependencies": {
@@ -66,7 +66,7 @@
     "@rollup/plugin-replace": "^6.0.1",
     "@rollup/plugin-typescript": "^12.1.1",
     "@testing-library/jest-native": "^5.4.2",
-    "@testing-library/react-native": "^9.1.0",
+    "@testing-library/react-native": "^13.0.0",
     "@types/jest": "^29.5.3",
     "@types/react": "^18.2.0",
     "@types/react-native-vector-icons": "^6.4.10",
@@ -91,7 +91,7 @@
     "react-native-svg": "15.8.0",
     "react-native-vector-icons": "^9.1.0",
     "react-native-webview": "^13.16.0",
-    "react-test-renderer": "18.2.0",
+    "react-test-renderer": "18.3.1",
     "rollup": "^4.24.3",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-delete": "^3.0.1",

package/src/components/RichTextEditor/MentionList.tsx

@@ -1,3 +1,4 @@
+import type { ReactElement } from 'react';
 import React, { useCallback, useEffect, useState } from 'react';
 import { View } from 'react-native';
 import { useTheme } from '../../theme';
@@ -26,7 +27,7 @@ export interface MentionListProps<TMetaData = unknown> {
       name: string,
       options?: OnSelectOptionsType<TMetaData>
     ) => void
-  ) => JSX.Element;
+  ) => ReactElement;
 }
 
 const MentionList = <TMetaData,>({

package/src/components/TextInput/__tests__/FloatingLabel.spec.tsx

@@ -5,15 +5,15 @@ import FloatingLabel from '../FloatingLabel';
 describe('FloatingLabel', () => {
   describe('label text display based on required prop', () => {
     it.each`
-      required | expectedText | optionalText
-      ${true}  | ${'Email'}   | ${null}
-      ${false} | ${'Phone'}   | ${'(Optional)'}
+      required | label      | expectedText
+      ${true}  | ${'Email'} | ${'Email'}
+      ${false} | ${'Phone'} | ${'Phone (Optional)'}
     `(
       'should display "$expectedText" with "$optionalText" when required is $required',
-      ({ required, expectedText, optionalText }) => {
-        const { getByTestId, queryByText } = renderWithTheme(
+      ({ required, expectedText, label }) => {
+        const { getByTestId } = renderWithTheme(
           <FloatingLabel
-            label={expectedText}
+            label={label}
             variant="text"
             state="default"
             isFocused={false}
@@ -23,11 +23,8 @@ describe('FloatingLabel', () => {
         );
 
         const labelComponent = getByTestId('input-label');
-        expect(labelComponent).toHaveTextContent(expectedText);
 
-        if (optionalText) {
-          expect(queryByText(optionalText)).toBeVisible();
-        }
+        expect(labelComponent).toHaveTextContent(expectedText);
       }
     );
   });
@@ -67,9 +64,9 @@ describe('FloatingLabel', () => {
 
   describe('variant-specific positioning', () => {
     it.each`
-      variant       | required | expectedText     | description
-      ${'textarea'} | ${false} | ${'Description'} | ${'multiline input with optional label'}
-      ${'textarea'} | ${true}  | ${'Description'} | ${'multiline input with required label'}
+      variant       | required | expectedText                | description
+      ${'textarea'} | ${false} | ${'Description (Optional)'} | ${'multiline input with optional label'}
+      ${'textarea'} | ${true}  | ${'Description'}            | ${'multiline input with required label'}
     `(
       'should position label appropriately for $variant ($description)',
       ({ variant, required, expectedText }) => {
@@ -93,9 +90,9 @@ describe('FloatingLabel', () => {
 
   describe('when user encounters different input states', () => {
     it.each`
-      state         | required | expectedText        | description
-      ${'error'}    | ${true}  | ${'Email'}          | ${'validation error with required field'}
-      ${'disabled'} | ${false} | ${'Disabled Field'} | ${'non-interactive optional field'}
+      state         | required | expectedText                   | description
+      ${'error'}    | ${true}  | ${'Email'}                     | ${'validation error with required field'}
+      ${'disabled'} | ${false} | ${'Disabled Field (Optional)'} | ${'non-interactive optional field'}
     `(
       'should display appropriate styling for $state state ($description)',
       ({ state, required, expectedText }) => {

package/src/components/TextInput/__tests__/PrefixComponent.spec.tsx

@@ -7,7 +7,7 @@ describe('PrefixComponent', () => {
     const wrapper = renderWithTheme(
       <PrefixComponent prefix="dollar-sign" state="default" />
     );
-    expect(wrapper.getByA11yLabel('Prefix icon: dollar-sign')).toBeDefined();
+    expect(wrapper.getByLabelText('Prefix icon: dollar-sign')).toBeDefined();
     // Optionally, keep testID fallback
     expect(wrapper.getByTestId('input-prefix')).toBeDefined();
   });

package/src/components/TextInput/__tests__/SuffixComponent.spec.tsx

@@ -8,13 +8,13 @@ describe('SuffixComponent', () => {
       <SuffixComponent loading suffix="dollar-sign" state="default" />
     );
 
-    expect(wrapper.getByA11yLabel('Suffix icon: loading')).toBeDefined();
+    expect(wrapper.getByLabelText('Suffix icon: loading')).toBeDefined();
   });
 
   it('renders suffix icon', () => {
     const wrapper = renderWithTheme(
       <SuffixComponent loading={false} suffix="dollar-sign" state="default" />
     );
-    expect(wrapper.getByA11yLabel('Suffix icon: dollar-sign')).toBeDefined();
+    expect(wrapper.getByLabelText('Suffix icon: dollar-sign')).toBeDefined();
   });
 });

package/src/components/TextInput/__tests__/index.spec.tsx

@@ -34,7 +34,7 @@ describe('TextInput', () => {
 
       // User should see the label text
       const inputLabel = getByTestId('input-label');
-      expect(inputLabel).toHaveTextContent('Amount (AUD)');
+      expect(inputLabel).toHaveTextContent('Amount (AUD) (Optional)');
 
       // User should be able to identify the prefix icon through accessibility
       const prefixIcon = getByTestId('input-prefix-icon');
@@ -223,7 +223,7 @@ describe('TextInput', () => {
       const suffixContainer = getByTestId('input-suffix');
       expect(suffixContainer).toBeTruthy();
 
-      const loadingIcon = within(suffixContainer).getByA11yLabel(
+      const loadingIcon = within(suffixContainer).getByLabelText(
         'Suffix icon: loading'
       );
       expect(loadingIcon).toBeTruthy();

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

@@ -232,7 +232,7 @@ exports[`theme returns correct theme object 1`] = `
         "height": 70.61538461538461,
       },
       "space": {
-        "titleMarginTop": 3.9230769230769234,
+        "titleMarginTop": 1.9615384615384617,
       },
     },
     "bottomSheet": {

package/testUtils/renderWithTheme.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { render } from '@testing-library/react-native'; // eslint-disable-line import/no-extraneous-dependencies
 import type { RenderOptions } from '@testing-library/react-native';
 import { getTheme, ThemeProvider } from '../src';
 
 const theme = getTheme();
 
-const renderWithTheme = (ui: JSX.Element, options?: RenderOptions) => {
+const renderWithTheme = (ui: ReactElement, options?: RenderOptions) => {
   return render(<ThemeProvider theme={theme}>{ui}</ThemeProvider>, options);
 };