@hero-design/rn 8.52.1 → 8.52.2-rc2.0

package/lib/index.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var reactNative = require('react-native');
 var React = require('react');
 var reactNativeVectorIcons = require('react-native-vector-icons');
-var reactNativeSafeAreaContext = require('react-native-safe-area-context');
 var reactNativeMonthYearPicker = require('@hero-design/react-native-month-year-picker');
 var DateTimePicker = require('@react-native-community/datetimepicker');
 var RnSlider = require('@react-native-community/slider');
 var reactNativeGestureHandler = require('react-native-gesture-handler');
 var LinearGradient = require('react-native-linear-gradient');
+var reactNativeSafeAreaContext = require('react-native-safe-area-context');
 var PagerView = require('react-native-pager-view');
 var events = require('events');
 var reactNativeWebview = require('react-native-webview');
@@ -2200,15 +2200,6 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     archived: theme.colors.onArchivedSurface,
     text: theme.colors.onDarkGlobalSurface
   };
-  var fonts = {
-    "default": theme.fonts.neutral.semiBold
-  };
-  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,
@@ -2222,37 +2213,6 @@ var getBadgeTheme = function getBadgeTheme(theme) {
   };
   return {
     colors: colors,
-    fonts: fonts,
-    fontSizes: fontSizes,
-    sizes: sizes,
-    space: space,
-    lineHeights: lineHeights
-  };
-};
-
-var getBottomNavigationTheme = function getBottomNavigationTheme(theme) {
-  var colors = {
-    shadow: theme.colors.primary,
-    background: theme.colors.defaultGlobalSurface
-  };
-  var sizes = {
-    height: theme.sizes['6xlarge']
-  };
-  var shadows = {
-    offset: {
-      width: 0,
-      height: 3
-    },
-    opacity: 0.27,
-    radius: 4.65,
-    elevation: 10
-  };
-  var space = {
-    titleMarginTop: theme.space.xsmall
-  };
-  return {
-    colors: colors,
-    shadows: shadows,
     sizes: sizes,
     space: space
   };
@@ -2296,15 +2256,6 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
 };
 
 var getButtonTheme = function getButtonTheme(theme) {
-  var fonts = {
-    "default": theme.fonts.neutral.semiBold,
-    utility: theme.fonts.neutral.regular
-  };
-  var fontSize = {
-    "default": theme.fontSizes.xlarge,
-    utility: theme.fontSizes.large,
-    textVariant: theme.fontSizes.large
-  };
   var borderWidth = {
     "default": theme.space.xxsmall
   };
@@ -2351,8 +2302,6 @@ var getButtonTheme = function getButtonTheme(theme) {
   return {
     lineHeights: lineHeights,
     borderWidth: borderWidth,
-    fonts: fonts,
-    fontSize: fontSize,
     sizes: sizes,
     radii: radii,
     colors: colors,
@@ -2428,20 +2377,8 @@ var getCarouselTheme = function getCarouselTheme(theme) {
     pageControlPaddingVertical: theme.space.small,
     pageControlWrapperHeight: scale(48)
   };
-  var fontSizes = {
-    heading: theme.fontSizes['xxxxxlarge']
-  };
-  var fonts = {
-    heading: theme.fonts.playful.semiBold
-  };
-  var lineHeights = {
-    heading: theme.lineHeights['6xlarge']
-  };
   return {
-    space: space,
-    fonts: fonts,
-    fontSizes: fontSizes,
-    lineHeights: lineHeights
+    space: space
   };
 };
 
@@ -2625,20 +2562,10 @@ var getEmptyTheme = function getEmptyTheme(theme) {
     subduedText: theme.colors.mutedOnDefaultGlobalSurface,
     invertedSubduedText: theme.colors.onDarkGlobalSurface
   };
-  var fontSizes = {
-    title: theme.fontSizes.xxxlarge,
-    description: theme.fontSizes.xlarge
-  };
-  var fonts = {
-    title: theme.fonts.playful.semiBold,
-    description: theme.fonts.playful.regular
-  };
   return {
-    fontSizes: fontSizes,
     colors: colors,
     sizes: sizes,
-    space: space,
-    fonts: fonts
+    space: space
   };
 };
 
@@ -2663,25 +2590,10 @@ var getErrorTheme = function getErrorTheme(theme) {
     fullScreenBackground: theme.colors.decorativePrimarySurface,
     inPageBackground: theme.colors.neutralGlobalSurface
   };
-  var fontSizes = {
-    title: theme.fontSizes.xxxlarge,
-    description: theme.fontSizes.xlarge
-  };
-  var fonts = {
-    title: theme.fonts.playful.semiBold,
-    description: theme.fonts.playful.regular
-  };
-  var lineHeight = {
-    title: theme.lineHeights.xxxlarge,
-    description: theme.lineHeights.xlarge
-  };
   return {
-    fontSizes: fontSizes,
     colors: colors,
     sizes: sizes,
-    space: space,
-    fonts: fonts,
-    lineHeight: lineHeight
+    space: space
   };
 };
 
@@ -2738,10 +2650,10 @@ var getFABTheme = function getFABTheme(theme) {
   };
   return {
     radii: radii,
-    fonts: fonts,
-    fontSizes: fontSizes,
     colors: colors,
     sizes: sizes,
+    fonts: fonts,
+    fontSizes: fontSizes,
     lineHeights: lineHeights,
     shadows: shadows,
     space: space
@@ -2866,18 +2778,6 @@ var getPinInputTheme = function getPinInputTheme(theme) {
     error: theme.colors.onErrorSurface,
     disabled: theme.colors.disabledOnDefaultGlobalSurface
   };
-  var fonts = {
-    cellText: theme.fonts.neutral.semiBold,
-    errorMessage: theme.fonts.neutral.regular
-  };
-  var fontSizes = {
-    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,
@@ -2893,10 +2793,7 @@ var getPinInputTheme = function getPinInputTheme(theme) {
   };
   return {
     borderWidths: borderWidths,
-    lineHeights: lineHeights,
     colors: colors,
-    fonts: fonts,
-    fontSizes: fontSizes,
     sizes: sizes,
     space: space,
     radii: radii
@@ -3155,20 +3052,10 @@ var getSuccessTheme = function getSuccessTheme(theme) {
     fullScreenBackground: theme.colors.decorativePrimarySurface,
     inPageBackground: theme.colors.neutralGlobalSurface
   };
-  var fontSizes = {
-    title: theme.fontSizes.xxxlarge,
-    description: theme.fontSizes.xlarge
-  };
-  var fonts = {
-    title: theme.fonts.playful.semiBold,
-    description: theme.fonts.playful.regular
-  };
   return {
-    fontSizes: fontSizes,
     colors: colors,
     sizes: sizes,
-    space: space,
-    fonts: fonts
+    space: space
   };
 };
 
@@ -3289,15 +3176,6 @@ var getTagTheme = function getTagTheme(theme) {
     archivedBackground: theme.colors.archivedSurface,
     text: theme.colors.onDefaultGlobalSurface
   };
-  var fonts = {
-    "default": theme.fonts.neutral.semiBold
-  };
-  var fontSizes = {
-    "default": theme.fontSizes.small
-  };
-  var lineHeights = {
-    "default": theme.lineHeights.small
-  };
   var space = {
     horizontalPadding: theme.space.small,
     verticalPadding: theme.space.xsmall
@@ -3308,11 +3186,8 @@ var getTagTheme = function getTagTheme(theme) {
   return {
     borderWidths: borderWidths,
     colors: colors,
-    fonts: fonts,
-    fontSizes: fontSizes,
     space: space,
-    radii: radii,
-    lineHeights: lineHeights
+    radii: radii
   };
 };
 
@@ -3376,12 +3251,7 @@ var getTextInputTheme = function getTextInputTheme(theme) {
     text: theme.fonts.neutral.regular
   };
   var fontSizes = {
-    text: theme.fontSizes.large,
-    labelInsideTextInput: theme.fontSizes.large,
-    error: theme.fontSizes.small,
-    maxLength: theme.fontSizes.small,
-    asteriskLabel: theme.fontSizes.large,
-    topLabel: theme.fontSizes.small
+    text: theme.fontSizes.large
   };
   var borderWidths = {
     container: {
@@ -3683,7 +3553,6 @@ var getTheme$1 = function getTheme() {
       attachment: getAttachmentTheme(globalTheme),
       avatar: getAvatarTheme(globalTheme),
       badge: getBadgeTheme(globalTheme),
-      bottomNavigation: getBottomNavigationTheme(globalTheme),
       bottomSheet: getBottomSheetTheme(globalTheme),
       button: getButtonTheme(globalTheme),
       calendar: getCalendarTheme(globalTheme),
@@ -6727,7 +6596,7 @@ var StyledText$3 = index$a(reactNative.Text)(function (_ref) {
   });
 });
 
-var _excluded$A = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
+var _excluded$z = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
 var Text = function Text(_ref) {
   var children = _ref.children,
     _ref$fontSize = _ref.fontSize,
@@ -6740,7 +6609,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$A);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$z);
   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__default["default"].createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
@@ -6770,7 +6639,7 @@ var StyledCaption = index$a(reactNative.Text)(function (_ref) {
   };
 });
 
-var _excluded$z = ["children", "fontWeight", "intent", "allowFontScaling"];
+var _excluded$y = ["children", "fontWeight", "intent", "allowFontScaling"];
 var Caption = function Caption(_ref) {
   var children = _ref.children,
     _ref$fontWeight = _ref.fontWeight,
@@ -6779,7 +6648,7 @@ var Caption = function Caption(_ref) {
     intent = _ref$intent === void 0 ? 'body' : _ref$intent,
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$z);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$y);
   return /*#__PURE__*/React__default["default"].createElement(StyledCaption, _extends$1({}, nativeProps, {
     themeFontWeight: fontWeight,
     themeIntent: intent,
@@ -6798,14 +6667,14 @@ var StyledLabel$1 = index$a(reactNative.Text)(function (_ref) {
   };
 });
 
-var _excluded$y = ["children", "intent", "allowFontScaling"];
+var _excluded$x = ["children", "intent", "allowFontScaling"];
 var Label = function Label(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'body' : _ref$intent,
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$y);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$x);
   return /*#__PURE__*/React__default["default"].createElement(StyledLabel$1, _extends$1({}, nativeProps, {
     themeIntent: intent,
     allowFontScaling: allowFontScaling
@@ -6826,7 +6695,7 @@ var StyledTitle$1 = index$a(reactNative.Text)(function (_ref) {
   };
 });
 
-var _excluded$x = ["children", "intent", "allowFontScaling", "level", "typeface"];
+var _excluded$w = ["children", "intent", "allowFontScaling", "level", "typeface"];
 var Title = function Title(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -6837,7 +6706,7 @@ var Title = function Title(_ref) {
     level = _ref$level === void 0 ? 'h1' : _ref$level,
     _ref$typeface = _ref.typeface,
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$x);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$w);
   return /*#__PURE__*/React__default["default"].createElement(StyledTitle$1, _extends$1({}, nativeProps, {
     themeLevel: level,
     themeTypeface: typeface,
@@ -6872,7 +6741,7 @@ var StyledBody = index$a(reactNative.Text)(function (_ref) {
   };
 });
 
-var _excluded$w = ["children", "intent", "allowFontScaling", "typeface", "variant"];
+var _excluded$v = ["children", "intent", "allowFontScaling", "typeface", "variant"];
 var Body = function Body(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -6883,7 +6752,7 @@ var Body = function Body(_ref) {
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'regular' : _ref$variant,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$w);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$v);
   return /*#__PURE__*/React__default["default"].createElement(StyledBody, _extends$1({}, nativeProps, {
     themeTypeface: typeface,
     themeIntent: intent,
@@ -7428,10 +7297,10 @@ var StyledHeroIcon = index$a(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$v = ["style"];
+var _excluded$u = ["style"];
 var AnimatedIcon = function AnimatedIcon(_ref) {
   var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$v);
+    otherProps = _objectWithoutProperties(_ref, _excluded$u);
   var rotateAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
     var animation = reactNative.Animated.loop(reactNative.Animated.timing(rotateAnimation.current, {
@@ -7536,7 +7405,7 @@ var AccordionItem = function AccordionItem(_ref) {
   }, content));
 };
 
-var _excluded$u = ["key"];
+var _excluded$t = ["key"];
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
     activeItemKey = _ref.activeItemKey,
@@ -7557,7 +7426,7 @@ var Accordion = function Accordion(_ref) {
     testID: testID
   }, items.map(function (_ref2, index) {
     var key = _ref2.key,
-      props = _objectWithoutProperties(_ref2, _excluded$u);
+      props = _objectWithoutProperties(_ref2, _excluded$t);
     var open = _activeItemKey === key;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
       key: key
@@ -7835,7 +7704,7 @@ var Avatar = function Avatar(_ref) {
   }));
 };
 
-var isIOS = reactNative.Platform.OS === 'ios';
+reactNative.Platform.OS === 'ios';
 var isAndroid = reactNative.Platform.OS === 'android';
 function pick(keys, obj) {
   return keys.filter(function (key) {
@@ -8027,7 +7896,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$t = ["theme"];
+var _excluded$s = ["theme"];
 var getThemeValue = function getThemeValue(theme, key, props) {
   var propConfig = config[key];
   var propValue = props[key];
@@ -8054,18 +7923,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$t);
+    otherProps = _objectWithoutProperties(_ref5, _excluded$s);
   var styleProps = pick(configKeys, otherProps);
   var flexProps = pick(_toConsumableArray(flexPropsKey), otherProps);
   return _objectSpread2(_objectSpread2({}, mapStylePropToThemeValue(theme, styleProps)), flexProps);
 });
 
-var _excluded$s = ["children", "style", "testID"];
+var _excluded$r = ["children", "style", "testID"];
 var Box = function Box(_ref) {
   var children = _ref.children,
     style = _ref.style,
     testID = _ref.testID,
-    otherProps = _objectWithoutProperties(_ref, _excluded$s);
+    otherProps = _objectWithoutProperties(_ref, _excluded$r);
   return /*#__PURE__*/React__default["default"].createElement(StyledBox, _extends$1({}, otherProps, {
     style: style,
     testID: testID
@@ -8279,7 +8148,7 @@ var StyledStatus = index$a(reactNative.Animated.View)(function (_ref3) {
   };
 });
 
-var _excluded$r = ["children", "visible", "intent", "style", "testID"];
+var _excluded$q = ["children", "visible", "intent", "style", "testID"];
 var Status = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
@@ -8288,7 +8157,7 @@ var Status = function Status(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$r);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$q);
   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);
@@ -8321,7 +8190,7 @@ var Status = function Status(_ref) {
   }));
 };
 
-var _excluded$q = ["content", "visible", "max", "intent", "style", "testID"];
+var _excluded$p = ["content", "visible", "max", "intent", "style", "testID"];
 var DEFAULT_MAX_NUMBER = 99;
 var getPaddingState = function getPaddingState(content) {
   return content.length > 1 ? 'wideContent' : 'narrowContent';
@@ -8336,7 +8205,7 @@ var Badge = function Badge(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$q);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$p);
   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);
@@ -8372,136 +8241,6 @@ var Badge$1 = Object.assign(Badge, {
   Status: Status
 });
 
-var isHeroIcon = function isHeroIcon(x) {
-  return IconList.includes(x);
-};
-
-var BottomNavigationTab = index$a(reactNative.View)(function (_ref) {
-  var themeVisibility = _ref.themeVisibility;
-  return {
-    flex: 1,
-    display: themeVisibility === false ? 'none' : 'flex'
-  };
-});
-var BottomNavigationContainer = index$a(reactNative.View)({
-  flex: 1,
-  overflow: 'hidden'
-});
-var ContentWrapper$2 = index$a(reactNative.View)({
-  flex: 1
-});
-var BottomBarWrapper = index$a(reactNative.View)(function (_ref2) {
-  var themeInsets = _ref2.themeInsets,
-    theme = _ref2.theme;
-  return {
-    height: theme.__hd__.bottomNavigation.sizes.height + themeInsets.bottom,
-    paddingBottom: themeInsets.bottom,
-    paddingLeft: Math.max(themeInsets.left, themeInsets.right),
-    paddingRight: Math.max(themeInsets.left, themeInsets.right),
-    backgroundColor: theme.__hd__.bottomNavigation.colors.background,
-    shadowColor: theme.__hd__.bottomNavigation.colors.shadow,
-    shadowOffset: theme.__hd__.bottomNavigation.shadows.offset,
-    shadowOpacity: theme.__hd__.bottomNavigation.shadows.opacity,
-    shadowRadius: theme.__hd__.bottomNavigation.shadows.radius,
-    elevation: theme.__hd__.bottomNavigation.shadows.elevation
-  };
-});
-var BottomBar = index$a(reactNative.View)({
-  flex: 1,
-  flexDirection: 'row',
-  overflow: 'hidden',
-  alignItems: 'center'
-});
-var BottomBarItem = index$a(reactNative.View)({
-  flex: 1,
-  alignItems: 'center'
-});
-var StyledBottomBarText = index$a(Typography.Caption)(function (_ref3) {
-  var theme = _ref3.theme;
-  return {
-    marginTop: theme.__hd__.bottomNavigation.space.titleMarginTop
-  };
-});
-
-var _excluded$p = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
-var getInactiveIcon = function getInactiveIcon(icon) {
-  var inactiveIcon = "".concat(icon, "-outlined");
-  return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
-};
-var BottomNavigation = function BottomNavigation(_ref) {
-  var onTabPress = _ref.onTabPress,
-    _ref$renderActiveTabO = _ref.renderActiveTabOnly,
-    renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
-    selectedTabKey = _ref.selectedTabKey,
-    tabs = _ref.tabs,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$p);
-  useDeprecation('BottomNavigation is deprecated and will be removed in the next major release. Please remove it.');
-  var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
-  /**
-   * List of loaded tabs, tabs will be loaded when navigated to.
-   */
-  var _React$useState = React__default["default"].useState([selectedTabKey]),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    loaded = _React$useState2[0],
-    setLoaded = _React$useState2[1];
-  if (!loaded.includes(selectedTabKey)) {
-    // Set the current tab to be loaded if it was not loaded before
-    setLoaded(function (loadedState) {
-      return [].concat(_toConsumableArray(loadedState), [selectedTabKey]);
-    });
-  }
-  return /*#__PURE__*/React__default["default"].createElement(BottomNavigationContainer, nativeProps, /*#__PURE__*/React__default["default"].createElement(ContentWrapper$2, null, tabs.map(function (tab) {
-    var key = tab.key,
-      component = tab.component,
-      testID = tab.testID;
-    var active = selectedTabKey === key;
-    if (renderActiveTabOnly && !active) {
-      return null;
-    }
-    if (!loaded.includes(key)) {
-      // Don't render a screen if we've never navigated to it
-      return null;
-    }
-    return /*#__PURE__*/React__default["default"].createElement(BottomNavigationTab, {
-      key: key,
-      testID: testID ? "route-screen-".concat(testID) : undefined,
-      pointerEvents: active ? 'auto' : 'none',
-      accessibilityElementsHidden: !active,
-      importantForAccessibility: active ? 'auto' : 'no-hide-descendants',
-      collapsable: false,
-      removeClippedSubviews:
-      // On iOS, set removeClippedSubviews to true only when not focused
-      // This is an workaround for a bug where the clipped view never re-appears.
-      isIOS ? selectedTabKey !== key : true,
-      themeVisibility: active
-    }, component);
-  })), /*#__PURE__*/React__default["default"].createElement(BottomBarWrapper, {
-    themeInsets: insets
-  }, /*#__PURE__*/React__default["default"].createElement(BottomBar, null, tabs.map(function (tab) {
-    var key = tab.key,
-      icon = tab.icon,
-      title = tab.title,
-      testID = tab.testID;
-    var active = selectedTabKey === key;
-    var inactiveIcon = getInactiveIcon(icon);
-    return /*#__PURE__*/React__default["default"].createElement(reactNative.TouchableWithoutFeedback, {
-      key: key,
-      onPress: function onPress() {
-        return onTabPress(key);
-      },
-      testID: testID
-    }, /*#__PURE__*/React__default["default"].createElement(BottomBarItem, null, /*#__PURE__*/React__default["default"].createElement(Icon, {
-      icon: active ? icon : inactiveIcon,
-      intent: active ? 'primary' : 'text',
-      testID: "hero-icon-".concat(icon)
-    }), !!title && /*#__PURE__*/React__default["default"].createElement(StyledBottomBarText, {
-      fontWeight: "semi-bold",
-      intent: active ? 'primary' : 'body',
-      numberOfLines: 1
-    }, title)));
-  }))));
-};
-
 var BottomSheetContext = /*#__PURE__*/React.createContext({});
 
 var StyledDivider = index$a(reactNative.View)(function (_ref) {
@@ -9155,6 +8894,332 @@ var BottomSheetScrollView = function BottomSheetScrollView(_ref) {
   }));
 };
 
+var customAlphabet = function customAlphabet(alphabet) {
+  var defaultSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 21;
+  return function () {
+    var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultSize;
+    var id = '';
+    var i = size;
+    while (i--) {
+      id += alphabet[Math.random() * alphabet.length | 0];
+    }
+    return id;
+  };
+};
+
+var ACTIONS;
+(function (ACTIONS) {
+  ACTIONS[ACTIONS["REGISTER_HOST"] = 0] = "REGISTER_HOST";
+  ACTIONS[ACTIONS["DEREGISTER_HOST"] = 1] = "DEREGISTER_HOST";
+  ACTIONS[ACTIONS["ADD_UPDATE_PORTAL"] = 2] = "ADD_UPDATE_PORTAL";
+  ACTIONS[ACTIONS["REMOVE_PORTAL"] = 3] = "REMOVE_PORTAL";
+})(ACTIONS || (ACTIONS = {}));
+var INITIAL_STATE = {};
+
+var PortalStateContext = /*#__PURE__*/React.createContext(null);
+var PortalDispatchContext = /*#__PURE__*/React.createContext(null);
+
+var usePortal = function usePortal() {
+  var hostName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'root';
+  var dispatch = React.useContext(PortalDispatchContext);
+  if (dispatch === null) {
+    throw new Error("You must add 'PortalProvider' to the root component.");
+  }
+  var registerHost = React.useCallback(function () {
+    dispatch({
+      type: ACTIONS.REGISTER_HOST,
+      hostName: hostName
+    });
+  }, []);
+  var deregisterHost = React.useCallback(function () {
+    dispatch({
+      type: ACTIONS.DEREGISTER_HOST,
+      hostName: hostName
+    });
+  }, []);
+  var addUpdatePortal = React.useCallback(function (name, node) {
+    dispatch({
+      type: ACTIONS.ADD_UPDATE_PORTAL,
+      hostName: hostName,
+      portalName: name,
+      node: node
+    });
+  }, []);
+  var removePortal = React.useCallback(function (name) {
+    dispatch({
+      type: ACTIONS.REMOVE_PORTAL,
+      hostName: hostName,
+      portalName: name
+    });
+  }, []);
+  return {
+    registerHost: registerHost,
+    deregisterHost: deregisterHost,
+    addPortal: addUpdatePortal,
+    updatePortal: addUpdatePortal,
+    removePortal: removePortal
+  };
+};
+
+var usePortalState = function usePortalState(hostName) {
+  var state = React.useContext(PortalStateContext);
+  if (state === null) {
+    throw new Error("You must add 'PortalProvider' to the root component.");
+  }
+  return state[hostName] || [];
+};
+
+var PortalHostComponent = function PortalHostComponent(_ref) {
+  var name = _ref.name;
+  var state = usePortalState(name);
+  var _usePortal = usePortal(name),
+    registerHost = _usePortal.registerHost,
+    deregisterHost = _usePortal.deregisterHost;
+  React.useEffect(function () {
+    registerHost();
+    return function () {
+      deregisterHost();
+    };
+  }, []);
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, state.map(function (item) {
+    return item.node;
+  }));
+};
+var PortalHost = /*#__PURE__*/React.memo(PortalHostComponent);
+PortalHost.displayName = 'PortalHost';
+
+var registerHostIfNotExist = function registerHostIfNotExist(state, hostName) {
+  if (!(hostName in state)) {
+    return _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, hostName, []));
+  }
+  return _objectSpread2({}, state);
+};
+var deregisterHost = function deregisterHost(state, hostName) {
+  return _objectSpread2({}, omit([hostName], state));
+};
+var addUpdatePortal = function addUpdatePortal(state, hostName, portalName, node) {
+  var newState = registerHostIfNotExist(state, hostName);
+  var index = newState[hostName].findIndex(function (item) {
+    return item.name === portalName;
+  });
+  if (index !== -1) {
+    return _objectSpread2(_objectSpread2({}, newState), {}, _defineProperty({}, hostName, newState[hostName].map(function (item, i) {
+      if (index === i) {
+        return _objectSpread2(_objectSpread2({}, item), {}, {
+          node: node
+        });
+      }
+      return item;
+    })));
+  }
+  return _objectSpread2(_objectSpread2({}, newState), {}, _defineProperty({}, hostName, [].concat(_toConsumableArray(newState[hostName]), [{
+    name: portalName,
+    node: node
+  }])));
+};
+var removePortal = function removePortal(state, hostName, portalName) {
+  if (!(hostName in state)) {
+    return _objectSpread2({}, state);
+  }
+  return _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, hostName, state[hostName].filter(function (item) {
+    return item.name !== portalName;
+  })));
+};
+var reducer = function reducer(state, action) {
+  var type = action.type;
+  switch (type) {
+    case ACTIONS.REGISTER_HOST:
+      return registerHostIfNotExist(state, action.hostName);
+    case ACTIONS.DEREGISTER_HOST:
+      return deregisterHost(state, action.hostName);
+    case ACTIONS.ADD_UPDATE_PORTAL:
+      return addUpdatePortal(state, action.hostName, action.portalName, action.node);
+    case ACTIONS.REMOVE_PORTAL:
+      return removePortal(state, action.hostName, action.portalName);
+    default:
+      return _objectSpread2({}, state);
+  }
+};
+
+var PortalProviderComponent = function PortalProviderComponent(_ref) {
+  var _ref$rootHostName = _ref.rootHostName,
+    rootHostName = _ref$rootHostName === void 0 ? 'root' : _ref$rootHostName,
+    children = _ref.children;
+  var _useReducer = React.useReducer(reducer, INITIAL_STATE),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  return /*#__PURE__*/React__default["default"].createElement(PortalDispatchContext.Provider, {
+    value: dispatch
+  }, /*#__PURE__*/React__default["default"].createElement(PortalStateContext.Provider, {
+    value: state
+  }, children, /*#__PURE__*/React__default["default"].createElement(PortalHost, {
+    name: rootHostName
+  })));
+};
+var PortalProvider = /*#__PURE__*/React.memo(PortalProviderComponent);
+PortalProvider.displayName = 'PortalProvider';
+
+var nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 10);
+var PortalComponent = function PortalComponent(_ref) {
+  var name = _ref.name,
+    hostName = _ref.hostName,
+    children = _ref.children,
+    theme = _ref.theme;
+  var defaultTheme = useTheme();
+  var _usePortal = usePortal(hostName),
+    addUpdatePortal = _usePortal.addPortal,
+    removePortal = _usePortal.removePortal;
+  var nameOrRandom = React.useMemo(function () {
+    return name || nanoid();
+  }, [name]);
+  var ChildrenComponent = React.useMemo(function () {
+    return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
+      theme: theme || defaultTheme
+    }, children);
+  }, [theme, children, defaultTheme]);
+  React.useLayoutEffect(function () {
+    addUpdatePortal(nameOrRandom, ChildrenComponent);
+    return function () {
+      removePortal(nameOrRandom);
+    };
+  }, [addUpdatePortal]);
+  React.useLayoutEffect(function () {
+    addUpdatePortal(nameOrRandom, ChildrenComponent);
+  }, [ChildrenComponent]);
+  return null;
+};
+var Portal = /*#__PURE__*/React.memo(PortalComponent);
+Portal.displayName = 'Portal';
+var Portal$1 = Object.assign(Portal, {
+  Provider: PortalProvider,
+  Host: PortalHost
+});
+
+var _excluded$l = ["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 children = _ref.children,
+    onShow = _ref.onShow,
+    onRequestClose = _ref.onRequestClose,
+    testID = _ref.testID,
+    _ref$animationType = _ref.animationType,
+    animationType = _ref$animationType === void 0 ? 'none' : _ref$animationType,
+    _ref$transparent = _ref.transparent,
+    transparent = _ref$transparent === void 0 ? false : _ref$transparent,
+    onDismiss = _ref.onDismiss;
+  var theme = useTheme();
+  var animatedBackdropValue = React.useRef(new reactNative.Animated.Value(0)).current;
+  var animatedModalValue = React.useRef(new reactNative.Animated.Value(0)).current;
+  // 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
+        });
+      },
+      hide: function hide(wrapperCallback) {
+        animateBackdropAndContent({
+          toValue: 0,
+          callback: function callback() {
+            if (reactNative.Platform.OS === 'ios') {
+              onDismiss === null || onDismiss === void 0 || onDismiss();
+            }
+            wrapperCallback();
+          }
+        });
+      }
+    };
+  }, [onDismiss, onShow, animateBackdropAndContent]);
+  // Back button handler
+  React.useEffect(function () {
+    var backHandler = reactNative.BackHandler.addEventListener('hardwareBackPress', function () {
+      onRequestClose === null || onRequestClose === void 0 || onRequestClose();
+      return true;
+    });
+    return function () {
+      return backHandler.remove();
+    };
+  }, [onRequestClose]);
+  return /*#__PURE__*/React__default["default"].createElement(Portal$1, null, /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, {
+    style: _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
+      backgroundColor: transparent ? 'transparent' : theme.colors.overlayGlobalSurface,
+      opacity: animationType !== 'none' ? backdropOpacityAnimation : DEFAULT_BACKDROP_OPACITY
+    })
+  }), /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, {
+    testID: testID,
+    style: _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
+      opacity: animationType === 'fade' ? modalAnimation : 1,
+      transform: [{
+        translateY: animationType === 'slide' ? modalAnimation : 0
+      }]
+    })
+  }, children));
+});
+var ModalWrapper = function ModalWrapper(_ref3) {
+  var _ref3$visible = _ref3.visible,
+    visible = _ref3$visible === void 0 ? true : _ref3$visible,
+    props = _objectWithoutProperties(_ref3, _excluded$l);
+  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__default["default"].createElement(Modal, _extends$1({
+    ref: modalRef
+  }, props)) : null;
+};
+
 var BottomSheet = function BottomSheet(_ref) {
   var open = _ref.open,
     header = _ref.header,
@@ -9231,7 +9296,7 @@ var BottomSheet = function BottomSheet(_ref) {
       setInternalShowDivider: setInternalShowDivider
     };
   }, [setInternalShowDivider]);
-  return /*#__PURE__*/React__default["default"].createElement(reactNative.Modal, {
+  return /*#__PURE__*/React__default["default"].createElement(ModalWrapper, {
     visible: visible,
     onRequestClose: onRequestClose,
     transparent: true,
@@ -11920,12 +11985,12 @@ var Indicator = index$a(reactNative.View)(function (_ref2) {
   };
 });
 
-var _excluded$l = ["intent", "children"];
+var _excluded$k = ["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$l);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$k);
   return /*#__PURE__*/React__default["default"].createElement(StyledDataCard, nativeProps, /*#__PURE__*/React__default["default"].createElement(Indicator, {
     themeIntent: intent,
     testID: "data-card-indicator"
@@ -11943,11 +12008,11 @@ var StyledCard$1 = index$a(reactNative.View)(function (_ref) {
   });
 });
 
-var _excluded$k = ["intent", "children"];
+var _excluded$j = ["intent", "children"];
 var Card = function Card(_ref) {
   var intent = _ref.intent,
     children = _ref.children,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$k);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$j);
   return /*#__PURE__*/React__default["default"].createElement(StyledCard$1, _extends$1({}, nativeProps, {
     themeIntent: intent
   }), children);
@@ -12212,7 +12277,7 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 CardCarousel.displayName = 'CardCarousel';
 
-var _excluded$j = ["rounded", "size", "testID", "style"];
+var _excluded$i = ["rounded", "size", "testID", "style"];
 var Image = function Image(_ref) {
   var _ref$rounded = _ref.rounded,
     rounded = _ref$rounded === void 0 ? false : _ref$rounded,
@@ -12220,7 +12285,7 @@ var Image = function Image(_ref) {
     size = _ref$size === void 0 ? '6xlarge' : _ref$size,
     testID = _ref.testID,
     style = _ref.style,
-    imageNativeProps = _objectWithoutProperties(_ref, _excluded$j);
+    imageNativeProps = _objectWithoutProperties(_ref, _excluded$i);
   var theme = useTheme();
   var imageSize = theme.__hd__.image.sizes[size];
   return /*#__PURE__*/React__default["default"].createElement(reactNative.Image, _extends$1({
@@ -12340,7 +12405,7 @@ var CarouselItem = function CarouselItem(_ref) {
   }, heading), body ? /*#__PURE__*/React__default["default"].createElement(Typography.Body, null, body) : null));
 };
 
-var _excluded$i = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "testID", "pageControlPosition"];
+var _excluded$h = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "testID", "pageControlPosition"];
 function useStateFromProp(initialValue) {
   var _useState = React.useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
@@ -12367,7 +12432,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$i);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$h);
   useDeprecation("shouldShowPagination prop has been deprecated", shouldShowPagination !== noop);
   useDeprecation("The use of 'pageControlPosition == bottom' has been deprecated", pageControlPosition === 'bottom');
   var theme = useTheme();
@@ -12562,7 +12627,7 @@ var StyledIcon$1 = index$a(Icon)(function (_ref4) {
   };
 });
 
-var _excluded$h = ["label", "variant", "selected", "icon", "onPress"];
+var _excluded$g = ["label", "variant", "selected", "icon", "onPress"];
 var Chip = function Chip(_ref) {
   var label = _ref.label,
     _ref$variant = _ref.variant,
@@ -12571,7 +12636,7 @@ var Chip = function Chip(_ref) {
     selected = _ref$selected === void 0 ? false : _ref$selected,
     icon = _ref.icon,
     onPress = _ref.onPress,
-    otherProps = _objectWithoutProperties(_ref, _excluded$h);
+    otherProps = _objectWithoutProperties(_ref, _excluded$g);
   var internalIcon = React__default["default"].useMemo(function () {
     if (icon && variant === 'filled') {
       return icon;
@@ -12658,8 +12723,6 @@ var getThemeState = function getThemeState(_ref) {
 var Checkbox = function Checkbox(_ref2) {
   var checked = _ref2.checked,
     description = _ref2.description,
-    _ref2$withBorder = _ref2.withBorder,
-    withBorder = _ref2$withBorder === void 0 ? false : _ref2$withBorder,
     _ref2$disabled = _ref2.disabled,
     disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
     onPress = _ref2.onPress,
@@ -12667,7 +12730,6 @@ var Checkbox = function Checkbox(_ref2) {
     testID = _ref2.testID,
     _ref2$readonly = _ref2.readonly,
     readonly = _ref2$readonly === void 0 ? false : _ref2$readonly;
-  useDeprecation("Checkbox's withBorder prop will be removed in the next major release, all checkboxes will have border by default. Please remove it.", withBorder === true);
   var themeState = getThemeState({
     disabled: disabled,
     readonly: readonly
@@ -12818,7 +12880,7 @@ var StyledErrorAndMaxLengthContainer = index$a(reactNative.View)(function () {
   };
 });
 
-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$1 = function getState(_ref) {
   var disabled = _ref.disabled,
     error = _ref.error,
@@ -12871,7 +12933,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     allowFontScaling = _ref2$allowFontScalin === void 0 ? false : _ref2$allowFontScalin,
     _ref2$variant = _ref2.variant,
     variant = _ref2$variant === void 0 ? 'text' : _ref2$variant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$g);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$f);
   var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
   var actualSuffix = loading ? 'loading' : suffix;
@@ -13416,11 +13478,11 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
   }))));
 };
 
-var _excluded$f = ["variant"];
+var _excluded$e = ["variant"];
 var DatePicker = function DatePicker(_ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
-    props = _objectWithoutProperties(_ref, _excluded$f);
+    props = _objectWithoutProperties(_ref, _excluded$e);
   if (variant === 'calendar') {
     return /*#__PURE__*/React__default["default"].createElement(DatePickerCalendar, props);
   }
@@ -13772,332 +13834,6 @@ var Empty = function Empty(_ref) {
   }, description));
 };
 
-var customAlphabet = function customAlphabet(alphabet) {
-  var defaultSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 21;
-  return function () {
-    var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultSize;
-    var id = '';
-    var i = size;
-    while (i--) {
-      id += alphabet[Math.random() * alphabet.length | 0];
-    }
-    return id;
-  };
-};
-
-var ACTIONS;
-(function (ACTIONS) {
-  ACTIONS[ACTIONS["REGISTER_HOST"] = 0] = "REGISTER_HOST";
-  ACTIONS[ACTIONS["DEREGISTER_HOST"] = 1] = "DEREGISTER_HOST";
-  ACTIONS[ACTIONS["ADD_UPDATE_PORTAL"] = 2] = "ADD_UPDATE_PORTAL";
-  ACTIONS[ACTIONS["REMOVE_PORTAL"] = 3] = "REMOVE_PORTAL";
-})(ACTIONS || (ACTIONS = {}));
-var INITIAL_STATE = {};
-
-var PortalStateContext = /*#__PURE__*/React.createContext(null);
-var PortalDispatchContext = /*#__PURE__*/React.createContext(null);
-
-var usePortal = function usePortal() {
-  var hostName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'root';
-  var dispatch = React.useContext(PortalDispatchContext);
-  if (dispatch === null) {
-    throw new Error("You must add 'PortalProvider' to the root component.");
-  }
-  var registerHost = React.useCallback(function () {
-    dispatch({
-      type: ACTIONS.REGISTER_HOST,
-      hostName: hostName
-    });
-  }, []);
-  var deregisterHost = React.useCallback(function () {
-    dispatch({
-      type: ACTIONS.DEREGISTER_HOST,
-      hostName: hostName
-    });
-  }, []);
-  var addUpdatePortal = React.useCallback(function (name, node) {
-    dispatch({
-      type: ACTIONS.ADD_UPDATE_PORTAL,
-      hostName: hostName,
-      portalName: name,
-      node: node
-    });
-  }, []);
-  var removePortal = React.useCallback(function (name) {
-    dispatch({
-      type: ACTIONS.REMOVE_PORTAL,
-      hostName: hostName,
-      portalName: name
-    });
-  }, []);
-  return {
-    registerHost: registerHost,
-    deregisterHost: deregisterHost,
-    addPortal: addUpdatePortal,
-    updatePortal: addUpdatePortal,
-    removePortal: removePortal
-  };
-};
-
-var usePortalState = function usePortalState(hostName) {
-  var state = React.useContext(PortalStateContext);
-  if (state === null) {
-    throw new Error("You must add 'PortalProvider' to the root component.");
-  }
-  return state[hostName] || [];
-};
-
-var PortalHostComponent = function PortalHostComponent(_ref) {
-  var name = _ref.name;
-  var state = usePortalState(name);
-  var _usePortal = usePortal(name),
-    registerHost = _usePortal.registerHost,
-    deregisterHost = _usePortal.deregisterHost;
-  React.useEffect(function () {
-    registerHost();
-    return function () {
-      deregisterHost();
-    };
-  }, []);
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, state.map(function (item) {
-    return item.node;
-  }));
-};
-var PortalHost = /*#__PURE__*/React.memo(PortalHostComponent);
-PortalHost.displayName = 'PortalHost';
-
-var registerHostIfNotExist = function registerHostIfNotExist(state, hostName) {
-  if (!(hostName in state)) {
-    return _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, hostName, []));
-  }
-  return _objectSpread2({}, state);
-};
-var deregisterHost = function deregisterHost(state, hostName) {
-  return _objectSpread2({}, omit([hostName], state));
-};
-var addUpdatePortal = function addUpdatePortal(state, hostName, portalName, node) {
-  var newState = registerHostIfNotExist(state, hostName);
-  var index = newState[hostName].findIndex(function (item) {
-    return item.name === portalName;
-  });
-  if (index !== -1) {
-    return _objectSpread2(_objectSpread2({}, newState), {}, _defineProperty({}, hostName, newState[hostName].map(function (item, i) {
-      if (index === i) {
-        return _objectSpread2(_objectSpread2({}, item), {}, {
-          node: node
-        });
-      }
-      return item;
-    })));
-  }
-  return _objectSpread2(_objectSpread2({}, newState), {}, _defineProperty({}, hostName, [].concat(_toConsumableArray(newState[hostName]), [{
-    name: portalName,
-    node: node
-  }])));
-};
-var removePortal = function removePortal(state, hostName, portalName) {
-  if (!(hostName in state)) {
-    return _objectSpread2({}, state);
-  }
-  return _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, hostName, state[hostName].filter(function (item) {
-    return item.name !== portalName;
-  })));
-};
-var reducer = function reducer(state, action) {
-  var type = action.type;
-  switch (type) {
-    case ACTIONS.REGISTER_HOST:
-      return registerHostIfNotExist(state, action.hostName);
-    case ACTIONS.DEREGISTER_HOST:
-      return deregisterHost(state, action.hostName);
-    case ACTIONS.ADD_UPDATE_PORTAL:
-      return addUpdatePortal(state, action.hostName, action.portalName, action.node);
-    case ACTIONS.REMOVE_PORTAL:
-      return removePortal(state, action.hostName, action.portalName);
-    default:
-      return _objectSpread2({}, state);
-  }
-};
-
-var PortalProviderComponent = function PortalProviderComponent(_ref) {
-  var _ref$rootHostName = _ref.rootHostName,
-    rootHostName = _ref$rootHostName === void 0 ? 'root' : _ref$rootHostName,
-    children = _ref.children;
-  var _useReducer = React.useReducer(reducer, INITIAL_STATE),
-    _useReducer2 = _slicedToArray(_useReducer, 2),
-    state = _useReducer2[0],
-    dispatch = _useReducer2[1];
-  return /*#__PURE__*/React__default["default"].createElement(PortalDispatchContext.Provider, {
-    value: dispatch
-  }, /*#__PURE__*/React__default["default"].createElement(PortalStateContext.Provider, {
-    value: state
-  }, children, /*#__PURE__*/React__default["default"].createElement(PortalHost, {
-    name: rootHostName
-  })));
-};
-var PortalProvider = /*#__PURE__*/React.memo(PortalProviderComponent);
-PortalProvider.displayName = 'PortalProvider';
-
-var nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 10);
-var PortalComponent = function PortalComponent(_ref) {
-  var name = _ref.name,
-    hostName = _ref.hostName,
-    children = _ref.children,
-    theme = _ref.theme;
-  var defaultTheme = useTheme();
-  var _usePortal = usePortal(hostName),
-    addUpdatePortal = _usePortal.addPortal,
-    removePortal = _usePortal.removePortal;
-  var nameOrRandom = React.useMemo(function () {
-    return name || nanoid();
-  }, [name]);
-  var ChildrenComponent = React.useMemo(function () {
-    return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
-      theme: theme || defaultTheme
-    }, children);
-  }, [theme, children, defaultTheme]);
-  React.useLayoutEffect(function () {
-    addUpdatePortal(nameOrRandom, ChildrenComponent);
-    return function () {
-      removePortal(nameOrRandom);
-    };
-  }, [addUpdatePortal]);
-  React.useLayoutEffect(function () {
-    addUpdatePortal(nameOrRandom, ChildrenComponent);
-  }, [ChildrenComponent]);
-  return null;
-};
-var Portal = /*#__PURE__*/React.memo(PortalComponent);
-Portal.displayName = 'Portal';
-var Portal$1 = Object.assign(Portal, {
-  Provider: PortalProvider,
-  Host: PortalHost
-});
-
-var _excluded$e = ["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 children = _ref.children,
-    onShow = _ref.onShow,
-    onRequestClose = _ref.onRequestClose,
-    testID = _ref.testID,
-    _ref$animationType = _ref.animationType,
-    animationType = _ref$animationType === void 0 ? 'none' : _ref$animationType,
-    _ref$transparent = _ref.transparent,
-    transparent = _ref$transparent === void 0 ? false : _ref$transparent,
-    onDismiss = _ref.onDismiss;
-  var theme = useTheme();
-  var animatedBackdropValue = React.useRef(new reactNative.Animated.Value(0)).current;
-  var animatedModalValue = React.useRef(new reactNative.Animated.Value(0)).current;
-  // 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
-        });
-      },
-      hide: function hide(wrapperCallback) {
-        animateBackdropAndContent({
-          toValue: 0,
-          callback: function callback() {
-            if (reactNative.Platform.OS === 'ios') {
-              onDismiss === null || onDismiss === void 0 || onDismiss();
-            }
-            wrapperCallback();
-          }
-        });
-      }
-    };
-  }, [onDismiss, onShow, animateBackdropAndContent]);
-  // Back button handler
-  React.useEffect(function () {
-    var backHandler = reactNative.BackHandler.addEventListener('hardwareBackPress', function () {
-      onRequestClose === null || onRequestClose === void 0 || onRequestClose();
-      return true;
-    });
-    return function () {
-      return backHandler.remove();
-    };
-  }, [onRequestClose]);
-  return /*#__PURE__*/React__default["default"].createElement(Portal$1, null, /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, {
-    style: _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
-      backgroundColor: transparent ? 'transparent' : theme.colors.overlayGlobalSurface,
-      opacity: animationType !== 'none' ? backdropOpacityAnimation : DEFAULT_BACKDROP_OPACITY
-    })
-  }), /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, {
-    testID: testID,
-    style: _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
-      opacity: animationType === 'fade' ? modalAnimation : 1,
-      transform: [{
-        translateY: animationType === 'slide' ? modalAnimation : 0
-      }]
-    })
-  }, children));
-});
-var ModalWrapper = function ModalWrapper(_ref3) {
-  var _ref3$visible = _ref3.visible,
-    visible = _ref3$visible === void 0 ? true : _ref3$visible,
-    props = _objectWithoutProperties(_ref3, _excluded$e);
-  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__default["default"].createElement(Modal, _extends$1({
-    ref: modalRef
-  }, props)) : null;
-};
-
 var StyledErrorModal = index$a(ModalWrapper)({
   height: '100%',
   width: '100%'
@@ -14181,7 +13917,7 @@ var StyledErrorDescription = index$a(Typography.Body)(function (_ref9) {
 });
 
 var _excluded$d = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"],
-  _excluded2 = ["visible", "variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"];
+  _excluded2 = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"];
 var renderImage$1 = function renderImage(image) {
   if ( /*#__PURE__*/React.isValidElement(image)) {
     return /*#__PURE__*/React__default["default"].cloneElement(image, {
@@ -14235,9 +13971,7 @@ var ErrorPage = function ErrorPage(_ref) {
  * @return {*}  {ReactElement}
  */
 var Error$1 = function Error(_ref2) {
-  var _ref2$visible = _ref2.visible,
-    visible = _ref2$visible === void 0 ? true : _ref2$visible,
-    _ref2$variant = _ref2.variant,
+  var _ref2$variant = _ref2.variant,
     variant = _ref2$variant === void 0 ? 'in-page' : _ref2$variant,
     title = _ref2.title,
     description = _ref2.description,
@@ -14248,8 +13982,7 @@ var Error$1 = function Error(_ref2) {
     secondaryCtaText = _ref2.secondaryCtaText,
     onSecondaryCtaPress = _ref2.onSecondaryCtaPress,
     nativeProps = _objectWithoutProperties(_ref2, _excluded2);
-  useDeprecation("Visible prop is deprecated. Use conditional rendering instead", visible);
-  var _useState = React.useState(visible),
+  var _useState = React.useState(true),
     _useState2 = _slicedToArray(_useState, 2),
     isVisible = _useState2[0],
     setIsVisible = _useState2[1];
@@ -14266,9 +13999,6 @@ var Error$1 = function Error(_ref2) {
     }
     setCtaPressed(null);
   }, [ctaPressed, onCtaPress, onSecondaryCtaPress]);
-  React.useEffect(function () {
-    setIsVisible(visible);
-  }, [visible]);
   // These useEffect lines prevents race condition error when callback contains navigation logic
   React.useEffect(function () {
     if (ctaPressed) {
@@ -14625,8 +14355,7 @@ var StyledBackdrop = index$a(AnimatedPressable)(function (_ref2) {
 });
 
 var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var headerTitle = _ref.headerTitle,
-    onPress = _ref.onPress,
+  var onPress = _ref.onPress,
     active = _ref.active,
     style = _ref.style,
     items = _ref.items,
@@ -14635,7 +14364,6 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onBackdropPress = _ref.onBackdropPress,
     _ref$fabIcon = _ref.fabIcon,
     fabIcon = _ref$fabIcon === void 0 ? 'add' : _ref$fabIcon;
-  useDeprecation("FAB.ActionGroup's headerTitle prop will be removed in the next major release. Please remove it.", headerTitle !== undefined);
   var fabRef = React.useRef(null);
   var tranlateXAnimation = React.useRef(new reactNative.Animated.Value(active ? 1 : 0));
   React__default["default"].useImperativeHandle(ref, function () {
@@ -14730,12 +14458,11 @@ var index$6 = Object.assign(FAB, {
 });
 
 var ToastContainerWrapper = index$a(reactNative.View)(function (_ref) {
-  var theme = _ref.theme,
-    position = _ref.position;
+  var theme = _ref.theme;
   return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
     paddingHorizontal: theme.__hd__.toast.space.wrapperVerticalPadding,
     paddingVertical: theme.__hd__.toast.space.wrapperHorizontalPadding,
-    flexDirection: position === 'bottom' ? 'column-reverse' : 'column',
+    flexDirection: 'column-reverse',
     elevation: 9999
   });
 });
@@ -14788,15 +14515,6 @@ var CTAWrapper = index$a(reactNative.TouchableOpacity)(function (_ref6) {
   };
 });
 
-var ToastContext = /*#__PURE__*/React.createContext({});
-var ToastConfigContext = /*#__PURE__*/React.createContext({});
-var useToastConfig = function useToastConfig() {
-  return React.useContext(ToastConfigContext);
-};
-var useToast = function useToast() {
-  return React.useContext(ToastContext);
-};
-
 var getIntentIcon = function getIntentIcon(intent) {
   switch (intent) {
     case 'success':
@@ -14840,7 +14558,6 @@ var Toast$1 = function Toast(_ref2) {
     _ref2$distance = _ref2.distance,
     distance = _ref2$distance === void 0 ? 0 : _ref2$distance;
   var animatedValue = React.useRef(new reactNative.Animated.Value(0)).current;
-  var toastConfig = useToastConfig();
   React.useEffect(function () {
     if (autoDismiss && duration >= 0) {
       var id = setTimeout(function () {
@@ -14866,7 +14583,7 @@ var Toast$1 = function Toast(_ref2) {
   });
   var interpolateY = animatedValue.interpolate({
     inputRange: [0, 1],
-    outputRange: toastConfig.position === 'top' ? [-20, distance] : [20, -distance]
+    outputRange: [20, -distance]
   });
   return /*#__PURE__*/React__default["default"].createElement(Container, {
     themeVariant: variant,
@@ -14924,8 +14641,6 @@ var SingleToastDisplay = function SingleToastDisplay(_ref) {
 var ToastContainer = /*#__PURE__*/React__default["default"].forwardRef(function (_ref2, ref) {
   var _ref2$displayType = _ref2.displayType,
     displayType = _ref2$displayType === void 0 ? 'single' : _ref2$displayType,
-    _ref2$position = _ref2.position,
-    position = _ref2$position === void 0 ? 'bottom' : _ref2$position,
     style = _ref2.style;
   var theme = useTheme$1();
   var _useState = React.useState([]),
@@ -14958,7 +14673,6 @@ var ToastContainer = /*#__PURE__*/React__default["default"].forwardRef(function
   });
   return /*#__PURE__*/React__default["default"].createElement(ToastContainerWrapper, {
     pointerEvents: "box-none",
-    position: position,
     style: style
   }, displayType === 'single' ? /*#__PURE__*/React__default["default"].createElement(SingleToastDisplay, {
     toastList: toastList,
@@ -14985,13 +14699,16 @@ var ToastContainer = /*#__PURE__*/React__default["default"].forwardRef(function
 });
 ToastContainer.displayName = 'ToastContainer';
 
+var ToastContext = /*#__PURE__*/React.createContext({});
+var ToastConfigContext = /*#__PURE__*/React.createContext({});
+var useToast = function useToast() {
+  return React.useContext(ToastContext);
+};
+
 var ToastProvider = function ToastProvider(_ref) {
   var children = _ref.children,
     _ref$displayType = _ref.displayType,
-    displayType = _ref$displayType === void 0 ? 'single' : _ref$displayType,
-    _position = _ref.position;
-  var position = _position === undefined ? 'bottom' : _position;
-  useDeprecation("Toast's position prop is deprecated and will be removed in the next major release.\nPlease remove it.", _position !== undefined);
+    displayType = _ref$displayType === void 0 ? 'single' : _ref$displayType;
   var toastRef = React.useRef(null);
   // @ts-expect-error: TODO: @tungv Fix this type error
   var _useState = React.useState(null),
@@ -15005,10 +14722,9 @@ var ToastProvider = function ToastProvider(_ref) {
   }, []);
   var config = React.useMemo(function () {
     return {
-      displayType: displayType,
-      position: position
+      displayType: displayType
     };
-  }, [displayType, position]);
+  }, [displayType]);
   return /*#__PURE__*/React__default["default"].createElement(ToastContext.Provider, {
     value: refState
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
@@ -15019,8 +14735,7 @@ var ToastProvider = function ToastProvider(_ref) {
     value: config
   }, /*#__PURE__*/React__default["default"].createElement(ToastContainer, {
     ref: toastRef,
-    displayType: displayType,
-    position: position
+    displayType: displayType
   }))));
 };
 
@@ -16127,18 +15842,12 @@ var SectionHeading = function SectionHeading(_ref) {
   var icon = _ref.icon,
     text = _ref.text,
     rightChildren = _ref.rightChildren,
-    _ref$fontSize = _ref.fontSize,
-    fontSize = _ref$fontSize === void 0 ? 'large' : _ref$fontSize,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'body' : _ref$intent,
-    _ref$fontWeight = _ref.fontWeight,
-    fontWeight = _ref$fontWeight === void 0 ? 'regular' : _ref$fontWeight,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     style = _ref.style,
     testID = _ref.testID;
-  useDeprecation("SectionHeading's fontSize prop is deprecated and will be removed in the next major release, please remove it.", fontSize !== undefined);
-  useDeprecation("SectionHeading's fontWeight prop is deprecated and will be removed in the next major release, please remove it.", fontWeight !== undefined);
   return /*#__PURE__*/React__default["default"].createElement(StyledHeading, {
     themeSize: size,
     style: style,
@@ -17351,6 +17060,10 @@ var useAnimatedValueArray = function useAnimatedValueArray(initialValues) {
   return refs.current;
 };
 
+var isHeroIcon = function isHeroIcon(x) {
+  return IconList.includes(x);
+};
+
 var TabWithBadge = function TabWithBadge(_ref) {
   var config = _ref.config,
     tabItem = _ref.tabItem;
@@ -17771,17 +17484,14 @@ var StyledText = index$a(Typography.Caption)(function (_ref2) {
   };
 });
 
-var _excluded$2 = ["content", "variant", "intent", "style", "testID"];
+var _excluded$2 = ["content", "intent", "style", "testID"];
 var Tag = function Tag(_ref) {
   var content = _ref.content,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
     nativeProps = _objectWithoutProperties(_ref, _excluded$2);
-  useDeprecation("Tag's variant prop is deprecated and will be removed in the next major release. Please remove it.", variant !== undefined);
   return /*#__PURE__*/React__default["default"].createElement(StyledView, _extends$1({}, nativeProps, {
     themeIntent: intent,
     style: style,
@@ -34341,7 +34051,6 @@ exports.Alert = Alert;
 exports.Attachment = Attachment;
 exports.Avatar = index$9;
 exports.Badge = Badge$1;
-exports.BottomNavigation = BottomNavigation;
 exports.BottomSheet = BottomSheet$1;
 exports.Box = Box;
 exports.Button = CompoundButton;