@hero-design/rn 8.35.0-alpha.0 → 8.35.0-alpha.2

package/lib/index.js

@@ -4533,6 +4533,308 @@ var withTheme = function withTheme(C, themeName) {
 
 var defaultTheme = getTheme$1();
 
+var urlAlphabet = 'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict';
+var nanoid = function nanoid() {
+  var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 21;
+  var id = '';
+  var i = size;
+  while (i--) {
+    id += urlAlphabet[Math.random() * 64 | 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("'PortalDispatchContext' cannot be null, please add 'PortalProvider' to the root component.");
+  } //#region methods
+
+  var registerHost = React.useCallback(function () {
+    dispatch({
+      type: ACTIONS.REGISTER_HOST,
+      hostName: hostName
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var deregisterHost = React.useCallback(function () {
+    dispatch({
+      type: ACTIONS.DEREGISTER_HOST,
+      hostName: hostName
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var addUpdatePortal = React.useCallback(function (name, node) {
+    dispatch({
+      type: ACTIONS.ADD_UPDATE_PORTAL,
+      hostName: hostName,
+      portalName: name,
+      node: node
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  var removePortal = React.useCallback(function (name) {
+    dispatch({
+      type: ACTIONS.REMOVE_PORTAL,
+      hostName: hostName,
+      portalName: name
+    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); //#endregion
+
+  return {
+    registerHost: registerHost,
+    deregisterHost: deregisterHost,
+    addPortal: addUpdatePortal,
+    updatePortal: addUpdatePortal,
+    removePortal: removePortal
+  };
+};
+
+var PortalComponent = function PortalComponent(_ref) {
+  var _providedName = _ref.name,
+    hostName = _ref.hostName,
+    _providedHandleOnMount = _ref.handleOnMount,
+    _providedHandleOnUnmount = _ref.handleOnUnmount,
+    _providedHandleOnUpdate = _ref.handleOnUpdate,
+    children = _ref.children;
+  //#region hooks
+  var _usePortal = usePortal(hostName),
+    addUpdatePortal = _usePortal.addPortal,
+    removePortal = _usePortal.removePortal; //#endregion
+  //#region variables
+
+  var name = React.useMemo(function () {
+    return _providedName || nanoid();
+  }, [_providedName]); //#endregion
+  //#region refs
+
+  var handleOnMountRef = React.useRef();
+  var handleOnUnmountRef = React.useRef();
+  var handleOnUpdateRef = React.useRef(); //#endregion
+  //#region callbacks
+
+  var handleOnMount = React.useCallback(function () {
+    if (_providedHandleOnMount) {
+      _providedHandleOnMount(function () {
+        return addUpdatePortal(name, children);
+      });
+    } else {
+      addUpdatePortal(name, children);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [_providedHandleOnMount, addUpdatePortal]);
+  handleOnMountRef.current = handleOnMount;
+  var handleOnUnmount = React.useCallback(function () {
+    if (_providedHandleOnUnmount) {
+      _providedHandleOnUnmount(function () {
+        return removePortal(name);
+      });
+    } else {
+      removePortal(name);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [_providedHandleOnUnmount, removePortal]);
+  handleOnUnmountRef.current = handleOnUnmount;
+  var handleOnUpdate = React.useCallback(function () {
+    if (_providedHandleOnUpdate) {
+      _providedHandleOnUpdate(function () {
+        return addUpdatePortal(name, children);
+      });
+    } else {
+      addUpdatePortal(name, children);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [_providedHandleOnUpdate, addUpdatePortal, children]);
+  handleOnUpdateRef.current = handleOnUpdate; //#endregion
+  //#region effects
+
+  React.useEffect(function () {
+    var _handleOnMountRef$cur;
+    (_handleOnMountRef$cur = handleOnMountRef.current) === null || _handleOnMountRef$cur === void 0 ? void 0 : _handleOnMountRef$cur.call(handleOnMountRef);
+    return function () {
+      var _handleOnUnmountRef$c;
+      (_handleOnUnmountRef$c = handleOnUnmountRef.current) === null || _handleOnUnmountRef$c === void 0 ? void 0 : _handleOnUnmountRef$c.call(handleOnUnmountRef); // remove callbacks refs
+
+      handleOnMountRef.current = undefined;
+      handleOnUnmountRef.current = undefined;
+      handleOnUpdateRef.current = undefined;
+    };
+  }, []);
+  React.useEffect(function () {
+    var _handleOnUpdateRef$cu;
+    (_handleOnUpdateRef$cu = handleOnUpdateRef.current) === null || _handleOnUpdateRef$cu === void 0 ? void 0 : _handleOnUpdateRef$cu.call(handleOnUpdateRef);
+  }, [children]); //#endregion
+
+  return null;
+};
+var Portal = /*#__PURE__*/React.memo(PortalComponent);
+Portal.displayName = 'Portal';
+
+var usePortalState = function usePortalState(hostName) {
+  var state = React.useContext(PortalStateContext);
+  if (state === null) {
+    throw new Error("'PortalStateContext' cannot be null, please add 'PortalProvider' to the root component.");
+  }
+  return state[hostName] || [];
+};
+
+var PortalHostComponent = function PortalHostComponent(_ref) {
+  var name = _ref.name;
+  //#region hooks
+  var state = usePortalState(name);
+  var _usePortal = usePortal(name),
+    registerHost = _usePortal.registerHost,
+    deregisterHost = _usePortal.deregisterHost; //#endregion
+  //#region effects
+
+  React.useEffect(function () {
+    registerHost();
+    return function () {
+      deregisterHost();
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); //#endregion
+  //#region render
+
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, state.map(function (item) {
+    return item.node;
+  })); //#endregion
+};
+
+var PortalHost = /*#__PURE__*/React.memo(PortalHostComponent);
+PortalHost.displayName = 'PortalHost';
+
+var isLoggingEnabled = false; // __DEV__ global is by default not defined in React Native Web builds
+
+var isDev = Boolean(typeof __DEV__ !== 'undefined' && __DEV__);
+var enableLogging = function enableLogging() {
+  if (!isDev) {
+    console.warn('[Portal] could not enable logging on production!');
+    return;
+  }
+  isLoggingEnabled = true;
+};
+var print$1 = function print() {};
+if (isDev) {
+  print$1 = function print(_ref) {
+    var component = _ref.component,
+      method = _ref.method,
+      params = _ref.params;
+    if (!isLoggingEnabled) {
+      return;
+    }
+    var message = '';
+    if (_typeof(params) === 'object') {
+      message = Object.keys(params).map(function (key) {
+        return "".concat(key, ":").concat(params[key]);
+      }).join(' ');
+    } else {
+      message = "".concat(params !== null && params !== void 0 ? params : '');
+    }
+    console.log("[Portal::".concat([component, method].filter(Boolean).join('::'), "]"), message);
+  };
+}
+Object.freeze(print$1);
+
+var registerHost = function registerHost(state, hostName) {
+  if (!(hostName in state)) {
+    state[hostName] = [];
+  }
+  return state;
+};
+var deregisterHost = function deregisterHost(state, hostName) {
+  delete state[hostName];
+  return state;
+};
+var addUpdatePortal = function addUpdatePortal(state, hostName, portalName, node) {
+  if (!(hostName in state)) {
+    state = registerHost(state, hostName);
+  }
+  /**
+   * updated portal, if it was already added.
+   */
+
+  var index = state[hostName].findIndex(function (item) {
+    return item.name === portalName;
+  });
+  if (index !== -1) {
+    state[hostName][index].node = node;
+  } else {
+    state[hostName].push({
+      name: portalName,
+      node: node
+    });
+  }
+  return state;
+};
+var removePortal = function removePortal(state, hostName, portalName) {
+  if (!(hostName in state)) {
+    print$1({
+      component: reducer.name,
+      method: removePortal.name,
+      params: "Failed to remove portal '".concat(portalName, "', '").concat(hostName, "' was not registered!")
+    });
+    return state;
+  }
+  var index = state[hostName].findIndex(function (item) {
+    return item.name === portalName;
+  });
+  if (index !== -1) state[hostName].splice(index, 1);
+  return state;
+};
+var reducer = function reducer(state, action) {
+  var type = action.type;
+  var clonedState = _objectSpread2({}, state);
+  switch (type) {
+    case ACTIONS.REGISTER_HOST:
+      return registerHost(clonedState, action.hostName);
+    case ACTIONS.DEREGISTER_HOST:
+      return deregisterHost(clonedState, action.hostName);
+    case ACTIONS.ADD_UPDATE_PORTAL:
+      return addUpdatePortal(clonedState, action.hostName, action.portalName, action.node);
+    case ACTIONS.REMOVE_PORTAL:
+      return removePortal(clonedState, action.hostName, action.portalName);
+    default:
+      return state;
+  }
+};
+
+var PortalProviderComponent = function PortalProviderComponent(_ref) {
+  var _ref$rootHostName = _ref.rootHostName,
+    rootHostName = _ref$rootHostName === void 0 ? 'root' : _ref$rootHostName,
+    _ref$shouldAddRootHos = _ref.shouldAddRootHost,
+    shouldAddRootHost = _ref$shouldAddRootHos === void 0 ? true : _ref$shouldAddRootHos,
+    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, shouldAddRootHost && /*#__PURE__*/React__default["default"].createElement(PortalHost, {
+    name: rootHostName
+  })));
+};
+var PortalProvider = /*#__PURE__*/React.memo(PortalProviderComponent);
+PortalProvider.displayName = 'PortalProvider';
+
+var index$c = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Portal: Portal,
+  PortalHost: PortalHost,
+  PortalProvider: PortalProvider,
+  usePortal: usePortal,
+  enableLogging: enableLogging
+});
+
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -6355,7 +6657,7 @@ var StyledText$3 = index$b(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,
@@ -6368,7 +6670,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,
@@ -6398,7 +6700,7 @@ var StyledCaption = index$b(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,
@@ -6407,7 +6709,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,
@@ -6426,14 +6728,14 @@ var StyledLabel$1 = index$b(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
@@ -6454,7 +6756,7 @@ var StyledTitle$1 = index$b(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,
@@ -6465,7 +6767,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,
@@ -6500,7 +6802,7 @@ var StyledBody = index$b(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,
@@ -6511,7 +6813,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,
@@ -7041,10 +7343,10 @@ var StyledHeroIcon = index$b(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, {
@@ -7149,7 +7451,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,
@@ -7170,7 +7472,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
@@ -7568,7 +7870,7 @@ var StyledStatus = index$b(reactNative.Animated.View)(function (_ref3) {
   };
 });
 
-var _excluded$t = ["children", "visible", "intent", "style", "testID"];
+var _excluded$s = ["children", "visible", "intent", "style", "testID"];
 var Status = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
@@ -7577,7 +7879,7 @@ var Status = function Status(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$t);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$s);
   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);
@@ -7610,7 +7912,7 @@ var Status = function Status(_ref) {
   }));
 };
 
-var _excluded$s = ["content", "visible", "max", "intent", "style", "testID"];
+var _excluded$r = ["content", "visible", "max", "intent", "style", "testID"];
 var DEFAULT_MAX_NUMBER = 99;
 var getPaddingState = function getPaddingState(content) {
   return content.length > 1 ? 'wideContent' : 'narrowContent';
@@ -7625,7 +7927,7 @@ var Badge = function Badge(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$s);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$r);
   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);
@@ -7729,7 +8031,7 @@ function omit(keys, obj) {
   return result;
 }
 
-var _excluded$r = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$q = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
   return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
@@ -7740,7 +8042,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
     selectedTabKey = _ref.selectedTabKey,
     tabs = _ref.tabs,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$r);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$q);
   var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
   /**
    * List of loaded tabs, tabs will be loaded when navigated to.
@@ -7826,13 +8128,13 @@ var StyledDivider = index$b(reactNative.View)(function (_ref) {
   }, horizontalMargin), verticalMargin);
 });
 
-var _excluded$q = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$p = ["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$q);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$p);
   return /*#__PURE__*/React__default["default"].createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
     themeMarginVertical: marginVertical,
@@ -7962,7 +8264,7 @@ var StyledLoadingDot = index$b(reactNative.View)(function (_ref2) {
   }, themeStyling());
 });
 
-var _excluded$p = ["count", "size", "testID", "themeVariant"];
+var _excluded$o = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = reactNative.Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = reactNative.Animated.createAnimatedComponent(StyledLoadingDot);
 var renderDotComponent = function renderDotComponent(_ref) {
@@ -7994,7 +8296,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
     size = _ref2$size === void 0 ? 12 : _ref2$size,
     testID = _ref2.testID,
     themeVariant = _ref2.themeVariant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$p);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$o);
   var progressAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
     var animation = reactNative.Animated.loop(reactNative.Animated.timing(progressAnimation.current, {
@@ -8433,11 +8735,11 @@ var Header = function Header(_ref) {
   })) : null), showDivider ? /*#__PURE__*/React__default["default"].createElement(Divider, null) : null);
 };
 
-var _excluded$o = ["scrollEventThrottle"];
+var _excluded$n = ["scrollEventThrottle"];
 var BottomSheetScrollView = function BottomSheetScrollView(_ref) {
   var _ref$scrollEventThrot = _ref.scrollEventThrottle,
     scrollEventThrottle = _ref$scrollEventThrot === void 0 ? 100 : _ref$scrollEventThrot,
-    props = _objectWithoutProperties(_ref, _excluded$o);
+    props = _objectWithoutProperties(_ref, _excluded$n);
   var _useContext = React.useContext(BottomSheetContext),
     setInternalShowDivider = _useContext.setInternalShowDivider;
   var onScrollBeginDrag = React.useCallback(function (e) {
@@ -8752,7 +9054,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$n = ["theme"];
+var _excluded$m = ["theme"];
 var getThemeValue = function getThemeValue(theme, key, props) {
   var propConfig = config[key];
   var propValue = props[key];
@@ -8779,18 +9081,18 @@ var mapStylePropToThemeValue = function mapStylePropToThemeValue(theme, props) {
 var configKeys = Object.keys(config);
 var StyledBox = index$b(reactNative.View)(function (_ref5) {
   var theme = _ref5.theme,
-    otherProps = _objectWithoutProperties(_ref5, _excluded$n);
+    otherProps = _objectWithoutProperties(_ref5, _excluded$m);
   var styleProps = pick(configKeys, otherProps);
   var flexProps = pick(_toConsumableArray(flexPropsKey), otherProps);
   return _objectSpread2(_objectSpread2({}, mapStylePropToThemeValue(theme, styleProps)), flexProps);
 });
 
-var _excluded$m = ["children", "style", "testID"];
+var _excluded$l = ["children", "style", "testID"];
 var Box = function Box(_ref) {
   var children = _ref.children,
     style = _ref.style,
     testID = _ref.testID,
-    otherProps = _objectWithoutProperties(_ref, _excluded$m);
+    otherProps = _objectWithoutProperties(_ref, _excluded$l);
   return /*#__PURE__*/React__default["default"].createElement(StyledBox, _extends$1({}, otherProps, {
     style: style,
     testID: testID
@@ -11426,7 +11728,7 @@ var Calendar = function Calendar(_ref) {
   })));
 };
 
-var _excluded$l = ["rounded", "size", "testID", "style"];
+var _excluded$k = ["rounded", "size", "testID", "style"];
 var Image = function Image(_ref) {
   var _ref$rounded = _ref.rounded,
     rounded = _ref$rounded === void 0 ? false : _ref$rounded,
@@ -11434,7 +11736,7 @@ var Image = function Image(_ref) {
     size = _ref$size === void 0 ? '6xlarge' : _ref$size,
     testID = _ref.testID,
     style = _ref.style,
-    imageNativeProps = _objectWithoutProperties(_ref, _excluded$l);
+    imageNativeProps = _objectWithoutProperties(_ref, _excluded$k);
   var theme = useTheme();
   var imageSize = theme.__hd__.image.sizes[size];
   return /*#__PURE__*/React__default["default"].createElement(reactNative.Image, _extends$1({
@@ -11636,12 +11938,12 @@ var Indicator = index$b(reactNative.View)(function (_ref2) {
   };
 });
 
-var _excluded$k = ["intent", "children"];
+var _excluded$j = ["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$k);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$j);
   return /*#__PURE__*/React__default["default"].createElement(StyledDataCard, nativeProps, /*#__PURE__*/React__default["default"].createElement(Indicator, {
     themeIntent: intent,
     testID: "data-card-indicator"
@@ -11659,11 +11961,11 @@ var StyledCard$1 = index$b(reactNative.View)(function (_ref) {
   });
 });
 
-var _excluded$j = ["intent", "children"];
+var _excluded$i = ["intent", "children"];
 var Card = function Card(_ref) {
   var intent = _ref.intent,
     children = _ref.children,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$j);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$i);
   return /*#__PURE__*/React__default["default"].createElement(StyledCard$1, _extends$1({}, nativeProps, {
     themeIntent: intent
   }), children);
@@ -11870,7 +12172,7 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 });
 CardCarousel.displayName = 'CardCarousel';
 
-var _excluded$i = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "pageControlPosition"];
+var _excluded$h = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "pageControlPosition"];
 function useStateFromProp(initialValue) {
   var _useState = React.useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
@@ -11895,7 +12197,7 @@ var Carousel = function Carousel(_ref) {
     shouldShowPagination = _ref$shouldShowPagina === void 0 ? noop : _ref$shouldShowPagina,
     _ref$pageControlPosit = _ref.pageControlPosition,
     pageControlPosition = _ref$pageControlPosit === void 0 ? 'bottom' : _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 carouselRef = React.useRef(null);
@@ -12218,7 +12520,7 @@ var StyledErrorAndMaxLengthContainer = index$b(reactNative.View)(function () {
   };
 });
 
-var _excluded$h = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "hideCharacterCount", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling", "variant"];
+var _excluded$g = ["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,
@@ -12270,7 +12572,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$h);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$g);
   var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
   var actualSuffix = loading ? 'loading' : suffix;
@@ -12714,11 +13016,11 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
   }))));
 };
 
-var _excluded$g = ["variant"];
+var _excluded$f = ["variant"];
 var DatePicker = function DatePicker(_ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
-    props = _objectWithoutProperties(_ref, _excluded$g);
+    props = _objectWithoutProperties(_ref, _excluded$f);
   if (variant === 'calendar') {
     return /*#__PURE__*/React__default["default"].createElement(DatePickerCalendar, props);
   }
@@ -13152,7 +13454,7 @@ var StyledErrorDescription = index$b(Typography.Body)(function (_ref9) {
   };
 });
 
-var _excluded$f = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"],
+var _excluded$e = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"],
   _excluded2 = ["visible", "variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"];
 var renderImage$1 = function renderImage(image) {
   if ( /*#__PURE__*/React.isValidElement(image)) {
@@ -13178,7 +13480,7 @@ var ErrorPage = function ErrorPage(_ref) {
     onCtaPress = _ref.onCtaPress,
     secondaryCtaText = _ref.secondaryCtaText,
     onSecondaryCtaPress = _ref.onSecondaryCtaPress,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$f);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$e);
   var showCta = ctaText && onCtaPress !== undefined;
   var showSecondaryCta = secondaryCtaText && onSecondaryCtaPress !== undefined;
   var showButtonContainer = showCta || showSecondaryCta;
@@ -13337,11 +13639,11 @@ var StyledIconContainer = index$b(Box)(function (_ref4) {
   };
 });
 
-var _excluded$e = ["active"];
+var _excluded$d = ["active"];
 var AnimatedIcons = reactNative.Animated.createAnimatedComponent(StyledFABIcon);
 var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
   var active = _ref.active,
-    iconProps = _objectWithoutProperties(_ref, _excluded$e);
+    iconProps = _objectWithoutProperties(_ref, _excluded$d);
   var rotateAnimation = React.useRef(new reactNative.Animated.Value(active ? 1 : 0));
   React.useEffect(function () {
     var animation = reactNative.Animated.spring(rotateAnimation.current, {
@@ -13594,136 +13896,6 @@ var StyledHeaderText = index$b(Typography.Title)(function (_ref3) {
   };
 });
 
-var _excluded$d = ["style", "children"];
-var FABModalPresenter = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
-  var style = _ref2.style,
-    children = _ref2.children,
-    props = _objectWithoutProperties(_ref2, _excluded$d);
-  var animatedOpacity = React.useRef(new reactNative.Animated.Value(0));
-  React__default["default"].useEffect(function () {
-    reactNative.Animated.spring(animatedOpacity.current, {
-      toValue: 1,
-      useNativeDriver: true
-    }).start();
-  }, []);
-  React__default["default"].useImperativeHandle(ref, function () {
-    return {
-      animatedOut: function animatedOut(completion) {
-        reactNative.Animated.spring(animatedOpacity.current, {
-          toValue: 0,
-          useNativeDriver: true
-        }).start(function () {
-          completion === null || completion === void 0 ? void 0 : completion();
-        });
-      }
-    };
-  });
-  return /*#__PURE__*/React__default["default"].createElement(Box, {
-    style: reactNative.StyleSheet.absoluteFill,
-    pointerEvents: "box-none"
-  }, /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, _extends$1({
-    style: [{
-      width: '100%',
-      height: '100%',
-      justifyContent: 'center',
-      alignItems: 'center',
-      opacity: animatedOpacity.current
-    }, style]
-  }, props, {
-    pointerEvents: "box-none"
-  }), children));
-});
-/**
- * Present a modal on screen immediately.
- *
- * The new presented modal will be on top of existing modals if there are any.
- *
- * @param Content A component to be presented as a modal on screen.
- * This component will be centered horizontally and vertically on screen with
- * a semitransparent black overlay underneath.
- * @param contentProps Props for this modal component.
- * @returns A `ModalHandler` you can use to dismiss the modal.
- */
-var showFABModal = function showFABModal(content) {
-  var _ref3 = null;
-  var rootSiblings = null;
-  var dismiss = function dismiss(onDismiss) {
-    if (rootSiblings) {
-      var cleanup = function cleanup() {
-        var _rootSiblings;
-        (_rootSiblings = rootSiblings) === null || _rootSiblings === void 0 ? void 0 : _rootSiblings.destroy();
-        rootSiblings = null;
-        _ref3 = null;
-        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
-      };
-      if (_ref3) {
-        _ref3.animatedOut(cleanup);
-      } else {
-        cleanup();
-      }
-    }
-  };
-  var update = function update(newContent) {
-    var _rootSiblings2;
-    (_rootSiblings2 = rootSiblings) === null || _rootSiblings2 === void 0 ? void 0 : _rootSiblings2.update( /*#__PURE__*/React__default["default"].createElement(FABModalPresenter, {
-      ref: function ref(_ref) {
-        _ref3 = _ref;
-      }
-    }, newContent));
-  };
-  rootSiblings = new RootSiblings__default["default"]( /*#__PURE__*/React__default["default"].createElement(FABModalPresenter, {
-    ref: function ref(_ref) {
-      _ref3 = _ref;
-    }
-  }, content));
-  return {
-    dismiss: dismiss,
-    update: update
-  };
-};
-FABModalPresenter.displayName = 'FABModalPresenter';
-
-var wrapperStyle$1 = {
-  width: reactNative.Dimensions.get('window').width,
-  height: reactNative.Dimensions.get('window').height
-};
-var fABModal = function fABModal(_ref) {
-  var children = _ref.children,
-    onShow = _ref.onShow,
-    testID = _ref.testID,
-    _ref$visible = _ref.visible,
-    visible = _ref$visible === void 0 ? true : _ref$visible;
-  var _React$useState = React__default["default"].useState(),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    modalHandler = _React$useState2[0],
-    setModalHandler = _React$useState2[1];
-  var getModalContent = React__default["default"].useCallback(function () {
-    return /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
-      pointerEvents: "box-none",
-      style: wrapperStyle$1,
-      testID: testID
-    }, children);
-  }, [visible, children, onShow, testID]);
-  React__default["default"].useEffect(function () {
-    if (visible) {
-      // Modal does not exist, create a new one
-      if (!modalHandler) {
-        var newModalHandler = showFABModal(getModalContent());
-        setModalHandler(newModalHandler);
-        onShow === null || onShow === void 0 ? void 0 : onShow();
-      }
-      // Modal already exists, update it
-      else {
-        modalHandler.update(getModalContent());
-      }
-    } else {
-      modalHandler === null || modalHandler === void 0 ? void 0 : modalHandler.dismiss();
-      setModalHandler(undefined);
-    }
-  }, [getModalContent]);
-  return null;
-};
-
 var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var headerTitle = _ref.headerTitle,
     onPress = _ref.onPress,
@@ -13774,7 +13946,7 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     inputRange: [0, 1],
     outputRange: [0, 1]
   });
-  return /*#__PURE__*/React__default["default"].createElement(fABModal, null, /*#__PURE__*/React__default["default"].createElement(StyledContainer$2, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledContainer$2, {
     testID: testID,
     pointerEvents: "box-none",
     style: style
@@ -13818,7 +13990,7 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     active: active,
     title: fabTitle,
     ref: fabRef
-  })));
+  }));
 });
 ActionGroup.displayName = 'FAB.ActionGroup';
 
@@ -33884,6 +34056,7 @@ exports.List = List;
 exports.Modal = index$6;
 exports.PageControl = PageControl;
 exports.PinInput = PinInput;
+exports.Portal = index$c;
 exports.Progress = Progress;
 exports.Radio = CompoundRadio;
 exports.Rate = Rate;