@hero-design/rn 8.12.5-alpha.1 → 8.13.0

package/lib/index.js

@@ -2193,6 +2193,44 @@ var getEmptyTheme = function getEmptyTheme(theme) {
   };
 };
 
+var getErrorTheme = function getErrorTheme(theme) {
+  var space = {
+    titleMarginBottom: theme.space.small,
+    imageMarginBottom: theme.space.xlarge,
+    wrapperPadding: theme.space.large,
+    button: {
+      wrapperHorizontalPadding: theme.space.medium,
+      wrapperVerticalPadding: theme.space.xxxlarge,
+      margin: theme.space.medium,
+      padding: theme.space.medium
+    }
+  };
+  var sizes = {
+    image: theme.sizes['19xlarge']
+  };
+  var colors = {
+    title: theme.colors.onDefaultGlobalSurface,
+    description: theme.colors.mutedOnDefaultGlobalSurface,
+    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
+  };
+};
+
 var getFABTheme = function getFABTheme(theme) {
   var colors = {
     buttonBackground: theme.colors.primary,
@@ -2973,6 +3011,7 @@ var getTheme$1 = function getTheme() {
       divider: getDividerTheme(globalTheme),
       drawer: getDrawerTheme(globalTheme),
       empty: getEmptyTheme(globalTheme),
+      error: getErrorTheme(globalTheme),
       fab: getFABTheme(globalTheme),
       icon: getIconTheme(globalTheme),
       image: getImageTheme(globalTheme),
@@ -6007,7 +6046,7 @@ var StyledText$3 = index$a(reactNative.Text)(function (_ref) {
   });
 });
 
-var _excluded$p = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
+var _excluded$q = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
 var Text = function Text(_ref) {
   var children = _ref.children,
     _ref$fontSize = _ref.fontSize,
@@ -6020,7 +6059,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$p);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$q);
   return /*#__PURE__*/React__default["default"].createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
     themeFontWeight: fontWeight,
@@ -6527,10 +6566,10 @@ var StyledHeroIcon = index$a(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$o = ["style"];
+var _excluded$p = ["style"];
 var AnimatedIcon = function AnimatedIcon(_ref) {
   var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$o);
+    otherProps = _objectWithoutProperties(_ref, _excluded$p);
   var rotateAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
     var animation = reactNative.Animated.loop(reactNative.Animated.timing(rotateAnimation.current, {
@@ -6636,7 +6675,7 @@ var AccordionItem = function AccordionItem(_ref) {
   }, content));
 };
 
-var _excluded$n = ["key"];
+var _excluded$o = ["key"];
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
     activeItemKey = _ref.activeItemKey,
@@ -6657,7 +6696,7 @@ var Accordion = function Accordion(_ref) {
     testID: testID
   }, items.map(function (_ref2, index) {
     var key = _ref2.key,
-      props = _objectWithoutProperties(_ref2, _excluded$n);
+      props = _objectWithoutProperties(_ref2, _excluded$o);
     var open = _activeItemKey === key;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
       key: key
@@ -7043,7 +7082,7 @@ var StyledStatus = index$a(reactNative.Animated.View)(function (_ref3) {
   };
 });
 
-var _excluded$m = ["children", "visible", "intent", "style", "testID"];
+var _excluded$n = ["children", "visible", "intent", "style", "testID"];
 var Status = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
@@ -7052,7 +7091,7 @@ var Status = function Status(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$m);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$n);
   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);
@@ -7085,7 +7124,7 @@ var Status = function Status(_ref) {
   }));
 };
 
-var _excluded$l = ["content", "visible", "max", "intent", "style", "testID"];
+var _excluded$m = ["content", "visible", "max", "intent", "style", "testID"];
 var DEFAULT_MAX_NUMBER = 99;
 var getPaddingState = function getPaddingState(content) {
   return content.length > 1 ? 'wideContent' : 'narrowContent';
@@ -7100,7 +7139,7 @@ var Badge = function Badge(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$l);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$m);
   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);
@@ -7204,7 +7243,7 @@ function omit(keys, obj) {
   return result;
 }
 
-var _excluded$k = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$l = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
   return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
@@ -7215,7 +7254,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
     selectedTabKey = _ref.selectedTabKey,
     tabs = _ref.tabs,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$k);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$l);
   var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
   /**
    * List of loaded tabs, tabs will be loaded when navigated to.
@@ -7302,13 +7341,13 @@ var StyledDivider = index$a(reactNative.View)(function (_ref) {
   }, horizontalMargin), verticalMargin);
 });
 
-var _excluded$j = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$k = ["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$j);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$k);
   return /*#__PURE__*/React__default["default"].createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
     themeMarginVertical: marginVertical,
@@ -7438,7 +7477,7 @@ var StyledLoadingDot = index$a(reactNative.View)(function (_ref2) {
   }, themeStyling());
 });
 
-var _excluded$i = ["count", "size", "testID", "themeVariant"];
+var _excluded$j = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = reactNative.Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = reactNative.Animated.createAnimatedComponent(StyledLoadingDot);
 var renderDotComponent = function renderDotComponent(_ref) {
@@ -7470,7 +7509,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
     size = _ref2$size === void 0 ? 12 : _ref2$size,
     testID = _ref2.testID,
     themeVariant = _ref2.themeVariant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$i);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$j);
   var progressAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
     var animation = reactNative.Animated.loop(reactNative.Animated.timing(progressAnimation.current, {
@@ -7900,11 +7939,11 @@ var Header = function Header(_ref) {
   })) : null), showDivider ? /*#__PURE__*/React__default["default"].createElement(Divider, null) : null);
 };
 
-var _excluded$h = ["scrollEventThrottle"];
+var _excluded$i = ["scrollEventThrottle"];
 var BottomSheetScrollView = function BottomSheetScrollView(_ref) {
   var _ref$scrollEventThrot = _ref.scrollEventThrottle,
     scrollEventThrottle = _ref$scrollEventThrot === void 0 ? 100 : _ref$scrollEventThrot,
-    props = _objectWithoutProperties(_ref, _excluded$h);
+    props = _objectWithoutProperties(_ref, _excluded$i);
   var _useContext = React.useContext(BottomSheetContext),
     setInternalShowDivider = _useContext.setInternalShowDivider;
   var onScrollBeginDrag = React.useCallback(function (e) {
@@ -8219,7 +8258,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$g = ["theme"];
+var _excluded$h = ["theme"];
 var getThemeValue = function getThemeValue(theme, key, props) {
   var propConfig = config[key];
   var propValue = props[key];
@@ -8246,18 +8285,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$g);
+    otherProps = _objectWithoutProperties(_ref5, _excluded$h);
   var styleProps = pick(configKeys, otherProps);
   var flexProps = pick(_toConsumableArray(flexPropsKey), otherProps);
   return _objectSpread2(_objectSpread2({}, mapStylePropToThemeValue(theme, styleProps)), flexProps);
 });
 
-var _excluded$f = ["children", "style", "testID"];
+var _excluded$g = ["children", "style", "testID"];
 var Box = function Box(_ref) {
   var children = _ref.children,
     style = _ref.style,
     testID = _ref.testID,
-    otherProps = _objectWithoutProperties(_ref, _excluded$f);
+    otherProps = _objectWithoutProperties(_ref, _excluded$g);
   return /*#__PURE__*/React__default["default"].createElement(StyledBox, _extends$1({}, otherProps, {
     style: style,
     testID: testID
@@ -10822,7 +10861,7 @@ var Calendar = function Calendar(_ref) {
   })));
 };
 
-var _excluded$e = ["rounded", "size", "testID", "style"];
+var _excluded$f = ["rounded", "size", "testID", "style"];
 var Image = function Image(_ref) {
   var _ref$rounded = _ref.rounded,
     rounded = _ref$rounded === void 0 ? false : _ref$rounded,
@@ -10830,7 +10869,7 @@ var Image = function Image(_ref) {
     size = _ref$size === void 0 ? '6xlarge' : _ref$size,
     testID = _ref.testID,
     style = _ref.style,
-    imageNativeProps = _objectWithoutProperties(_ref, _excluded$e);
+    imageNativeProps = _objectWithoutProperties(_ref, _excluded$f);
   var theme = useTheme();
   var imageSize = theme.__hd__.image.sizes[size];
   return /*#__PURE__*/React__default["default"].createElement(reactNative.Image, _extends$1({
@@ -11023,12 +11062,12 @@ var Indicator = index$a(reactNative.View)(function (_ref2) {
   };
 });
 
-var _excluded$d = ["intent", "children"];
+var _excluded$e = ["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$d);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$e);
   return /*#__PURE__*/React__default["default"].createElement(StyledDataCard, nativeProps, /*#__PURE__*/React__default["default"].createElement(Indicator, {
     themeIntent: intent,
     testID: "data-card-indicator"
@@ -11046,11 +11085,11 @@ var StyledCard$1 = index$a(reactNative.View)(function (_ref) {
   });
 });
 
-var _excluded$c = ["intent", "children"];
+var _excluded$d = ["intent", "children"];
 var Card = function Card(_ref) {
   var intent = _ref.intent,
     children = _ref.children,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$c);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$d);
   return /*#__PURE__*/React__default["default"].createElement(StyledCard$1, _extends$1({}, nativeProps, {
     themeIntent: intent
   }), children);
@@ -11238,7 +11277,7 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }));
 });
 
-var _excluded$b = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination"];
+var _excluded$c = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination"];
 function useStateFromProp(initialValue) {
   var _useState = React.useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
@@ -11260,7 +11299,7 @@ var Carousel = function Carousel(_ref) {
     shouldShowPagination = _ref$shouldShowPagina === void 0 ? function () {
       return true;
     } : _ref$shouldShowPagina,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$b);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$c);
   var carouselRef = React.useRef(null);
   var _useStateFromProp = useStateFromProp(selectedItemIndex),
     _useStateFromProp2 = _slicedToArray(_useStateFromProp, 2),
@@ -11480,7 +11519,7 @@ var StyledAsteriskLabelInsideTextInput = index$a(Typography.Text)(function (_ref
     fontSize: theme.__hd__.textInput.fontSizes.asteriskLabel
   };
 });
-var StyledErrorContainer$1 = index$a(reactNative.View)(function (_ref7) {
+var StyledErrorContainer$2 = index$a(reactNative.View)(function (_ref7) {
   var theme = _ref7.theme;
   return {
     marginRight: theme.__hd__.textInput.space.errorContainerMarginRight,
@@ -11572,7 +11611,7 @@ var StyledErrorAndMaxLengthContainer = index$a(reactNative.View)(function () {
   };
 });
 
-var _excluded$a = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling"];
+var _excluded$b = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling"];
 var getVariant$1 = function getVariant(_ref) {
   var disabled = _ref.disabled,
     error = _ref.error,
@@ -11620,7 +11659,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     renderInputValue = _ref2.renderInputValue,
     _ref2$allowFontScalin = _ref2.allowFontScaling,
     allowFontScaling = _ref2$allowFontScalin === void 0 ? false : _ref2$allowFontScalin,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$a);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$b);
   var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
   var actualSuffix = loading ? 'loading' : suffix;
@@ -11783,7 +11822,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     icon: actualSuffix,
     spin: actualSuffix === 'loading',
     size: "xsmall"
-  }) : suffix), /*#__PURE__*/React__default["default"].createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledErrorAndMaxLengthContainer, null, error ? /*#__PURE__*/React__default["default"].createElement(StyledErrorContainer$1, null, /*#__PURE__*/React__default["default"].createElement(Icon, {
+  }) : suffix), /*#__PURE__*/React__default["default"].createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledErrorAndMaxLengthContainer, null, error ? /*#__PURE__*/React__default["default"].createElement(StyledErrorContainer$2, null, /*#__PURE__*/React__default["default"].createElement(Icon, {
     testID: "input-error-icon",
     icon: "circle-info",
     size: "xsmall",
@@ -12291,6 +12330,206 @@ var Empty = function Empty(_ref) {
   }, description));
 };
 
+var StyledErrorModal = index$a(reactNative.Modal)({
+  height: '100%',
+  width: '100%'
+});
+var StyledErrorContainer$1 = index$a(reactNative.View)(function (_ref) {
+  var theme = _ref.theme,
+    themeVariant = _ref.themeVariant;
+  return {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    backgroundColor: themeVariant === 'in-page' ? theme.__hd__.error.colors.inPageBackground : theme.__hd__.error.colors.fullScreenBackground
+  };
+});
+var StyledErrorContent = index$a(reactNative.View)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: theme.__hd__.error.space.wrapperPadding
+  };
+});
+var StyledErrorButtonContainer = index$a(reactNative.View)(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: theme.__hd__.error.space.button.wrapperHorizontalPadding,
+    paddingVertical: theme.__hd__.error.space.button.wrapperVerticalPadding
+  };
+});
+var StyledErrorButtonPrimary = index$a(CompoundButton)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    padding: theme.__hd__.error.space.button.padding
+  };
+});
+var StyledErrorButtonSecondary = index$a(CompoundButton)(function (_ref5) {
+  var theme = _ref5.theme;
+  return {
+    marginTop: theme.__hd__.error.space.button.margin,
+    padding: theme.__hd__.error.space.button.padding
+  };
+});
+var StyledErrorImage = index$a(Image)(function (_ref6) {
+  var theme = _ref6.theme;
+  return {
+    marginBottom: theme.__hd__.error.space.imageMarginBottom,
+    width: theme.__hd__.error.sizes.image,
+    height: theme.__hd__.error.sizes.image,
+    resizeMode: 'contain'
+  };
+});
+var StyledErrorTitle = index$a(Typography.Text)(function (_ref7) {
+  var theme = _ref7.theme;
+  return {
+    fontFamily: theme.__hd__.error.fonts.title,
+    fontSize: theme.__hd__.error.fontSizes.title,
+    textAlign: 'center',
+    marginBottom: theme.__hd__.error.space.titleMarginBottom,
+    color: theme.__hd__.error.colors.title
+  };
+});
+var StyledErrorDescription = index$a(Typography.Text)(function (_ref8) {
+  var theme = _ref8.theme;
+  return {
+    fontFamily: theme.__hd__.error.fonts.description,
+    fontSize: theme.__hd__.error.fontSizes.description,
+    textAlign: 'center',
+    color: theme.__hd__.error.colors.description
+  };
+});
+
+var _excluded$a = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"],
+  _excluded2 = ["visible", "variant", "title", "description", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"];
+var ErrorPage = function ErrorPage(_ref) {
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'in-page' : _ref$variant,
+    title = _ref.title,
+    description = _ref.description,
+    image = _ref.image,
+    testID = _ref.testID,
+    ctaText = _ref.ctaText,
+    onCtaPress = _ref.onCtaPress,
+    secondaryCtaText = _ref.secondaryCtaText,
+    onSecondaryCtaPress = _ref.onSecondaryCtaPress,
+    nativeProps = _objectWithoutProperties(_ref, _excluded$a);
+  var showCta = ctaText && onCtaPress !== undefined;
+  var showSecondaryCta = secondaryCtaText && onSecondaryCtaPress !== undefined;
+  var showButtonContainer = showCta || showSecondaryCta;
+  return /*#__PURE__*/React__default["default"].createElement(StyledErrorContainer$1, {
+    testID: testID,
+    themeVariant: variant
+  }, /*#__PURE__*/React__default["default"].createElement(StyledErrorContent, nativeProps, image && /*#__PURE__*/React__default["default"].createElement(StyledErrorImage, {
+    source: typeof image === 'string' ? {
+      uri: image
+    } : image,
+    testID: "error-image"
+  }), /*#__PURE__*/React__default["default"].createElement(StyledErrorTitle, null, title), description && /*#__PURE__*/React__default["default"].createElement(StyledErrorDescription, null, description)), showButtonContainer && /*#__PURE__*/React__default["default"].createElement(StyledErrorButtonContainer, null, showCta && /*#__PURE__*/React__default["default"].createElement(StyledErrorButtonPrimary, {
+    variant: "filled",
+    text: ctaText,
+    onPress: onCtaPress
+  }), showSecondaryCta && /*#__PURE__*/React__default["default"].createElement(StyledErrorButtonSecondary, {
+    variant: "text",
+    text: secondaryCtaText,
+    onPress: onSecondaryCtaPress
+  })));
+};
+/**
+ * Renders error page
+ *
+ * @param {ErrorProps}
+ * @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,
+    variant = _ref2$variant === void 0 ? 'in-page' : _ref2$variant,
+    title = _ref2.title,
+    description = _ref2.description,
+    testID = _ref2.testID,
+    ctaText = _ref2.ctaText,
+    onCtaPress = _ref2.onCtaPress,
+    secondaryCtaText = _ref2.secondaryCtaText,
+    onSecondaryCtaPress = _ref2.onSecondaryCtaPress,
+    nativeProps = _objectWithoutProperties(_ref2, _excluded2);
+  var _useState = React.useState(visible),
+    _useState2 = _slicedToArray(_useState, 2),
+    isVisible = _useState2[0],
+    setIsVisible = _useState2[1];
+  var _useState3 = React.useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    ctaPressed = _useState4[0],
+    setCtaPressed = _useState4[1];
+  var onCloseModal = React.useCallback(function () {
+    if (ctaPressed === 'cta' && onCtaPress) {
+      onCtaPress();
+    }
+    if (ctaPressed === 'secondaryCta' && onSecondaryCtaPress) {
+      onSecondaryCtaPress();
+    }
+    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) {
+      setIsVisible(false);
+    }
+  }, [ctaPressed]);
+  React.useEffect(function () {
+    if (!isVisible) {
+      onCloseModal();
+    }
+  }, [isVisible, onCloseModal]);
+  if (variant === 'full-screen') {
+    return /*#__PURE__*/React__default["default"].createElement(StyledErrorModal, {
+      visible: isVisible,
+      onRequestClose: function onRequestClose() {
+        return setIsVisible(false);
+      },
+      onDismiss: function onDismiss() {
+        return setIsVisible(false);
+      },
+      animationType: "slide"
+    }, /*#__PURE__*/React__default["default"].createElement(ErrorPage, _extends$1({
+      variant: variant,
+      title: title,
+      description: description,
+      testID: testID,
+      ctaText: ctaText,
+      onCtaPress: onCtaPress && function () {
+        setCtaPressed('cta');
+      },
+      secondaryCtaText: secondaryCtaText,
+      onSecondaryCtaPress: onSecondaryCtaPress && function () {
+        setCtaPressed('secondaryCta');
+      }
+    }, nativeProps)));
+  }
+  return /*#__PURE__*/React__default["default"].createElement(ErrorPage, _extends$1({
+    variant: variant,
+    title: title,
+    description: description,
+    testID: testID,
+    ctaText: ctaText,
+    onCtaPress: onCtaPress,
+    secondaryCtaText: secondaryCtaText,
+    onSecondaryCtaPress: onSecondaryCtaPress
+  }, nativeProps));
+};
+
 var StyledFABContainer = index$a(reactNative.TouchableHighlight)(function (_ref) {
   var theme = _ref.theme;
   return {
@@ -14557,9 +14796,8 @@ var getTabItem$1 = function getTabItem(_ref) {
     color: color
   });
 };
-var ScrollableTab = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
-  var _ref2$onTabPress = _ref2.onTabPress,
-    onTabPress = _ref2$onTabPress === void 0 ? noop : _ref2$onTabPress,
+var ScrollableTab = function ScrollableTab(_ref2) {
+  var onTabPress = _ref2.onTabPress,
     selectedTabKey = _ref2.selectedTabKey,
     tabs = _ref2.tabs,
     containerStyle = _ref2.containerStyle,
@@ -14581,46 +14819,20 @@ var ScrollableTab = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var tabsAnims = useAnimatedValueArray(tabs.map(function (_, i) {
     return i === selectedTabIndex ? 1 : 0;
   }));
-  React__default["default"].useImperativeHandle(ref, function () {
-    return {
-      selectTabKey: function selectTabKey(tabKey) {
-        var index = tabs.findIndex(function (item) {
-          return item.key === tabKey;
-        });
-        if (index !== -1) {
-          var _flatListRef$current, _pagerViewRef$current;
-          (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
-            index: index,
-            viewPosition: 0.5
-          });
-          (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 ? void 0 : _pagerViewRef$current.setPage(index);
-          if (onTabPress) {
-            onTabPress(tabKey);
-          }
-        }
-      },
-      getFlatListRef: function getFlatListRef() {
-        return flatListRef.current;
-      },
-      getPagerViewRef: function getPagerViewRef() {
-        return pagerViewRef.current;
-      }
-    };
-  }, [pagerViewRef, flatListRef, tabs]);
   React__default["default"].useEffect(function () {
     var timeoutHandle = null;
     if (selectedTabIndex !== -1) {
-      var _flatListRef$current2;
-      (_flatListRef$current2 = flatListRef.current) === null || _flatListRef$current2 === void 0 ? void 0 : _flatListRef$current2.scrollToIndex({
+      var _flatListRef$current;
+      (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
         index: selectedTabIndex,
         viewPosition: 0.5
       });
       // If the selected tab is changed too quickly, the setPage is crashed and not work anymore
       // We apply throttle to prevent this issue https://github.com/Thinkei/hero-design/issues/1715
       timeoutHandle = setTimeout(function () {
-        var _pagerViewRef$current2;
+        var _pagerViewRef$current;
         // use no animation to prevent unexpected behavior if users select tab too quickly
-        (_pagerViewRef$current2 = pagerViewRef.current) === null || _pagerViewRef$current2 === void 0 ? void 0 : _pagerViewRef$current2.setPageWithoutAnimation(selectedTabIndex);
+        (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 ? void 0 : _pagerViewRef$current.setPageWithoutAnimation(selectedTabIndex);
       }, 200);
     }
     var animation = reactNative.Animated.parallel(_toConsumableArray(tabs.map(function (_, i) {
@@ -14637,7 +14849,7 @@ var ScrollableTab = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
         clearTimeout(timeoutHandle);
       }
     };
-  }, [selectedTabIndex, selectedTabKey, pagerViewRef]);
+  }, [selectedTabIndex, pagerViewRef]);
   return /*#__PURE__*/React__default["default"].createElement(TabContainer, {
     style: containerStyle,
     testID: componentTestID
@@ -14656,8 +14868,8 @@ var ScrollableTab = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     onScrollToIndexFailed: function onScrollToIndexFailed(_ref3) {
       var index = _ref3.index;
       setTimeout(function () {
-        var _flatListRef$current3;
-        return (_flatListRef$current3 = flatListRef.current) === null || _flatListRef$current3 === void 0 ? void 0 : _flatListRef$current3.scrollToIndex({
+        var _flatListRef$current2;
+        return (_flatListRef$current2 = flatListRef.current) === null || _flatListRef$current2 === void 0 ? void 0 : _flatListRef$current2.scrollToIndex({
           index: index,
           viewPosition: 0.5
         });
@@ -14713,7 +14925,7 @@ var ScrollableTab = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     onPageSelected: function onPageSelected(e) {
       var index = e.nativeEvent.position;
       var selectedItem = tabs[index];
-      if (selectedItem && selectedItem.key !== selectedTabKey) {
+      if (selectedItem) {
         onTabPress(selectedItem.key);
       }
     },
@@ -14733,7 +14945,7 @@ var ScrollableTab = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       collapsable: false
     }, isLazyScreen ? null : component);
   })));
-});
+};
 
 var getTabItem = function getTabItem(_ref) {
   var item = _ref.item,
@@ -31858,7 +32070,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
     hideKeyboardAccessoryView: true,
     keyboardDisplayRequiresUserAction: false,
     height: webviewHeight
-  })))), /*#__PURE__*/React__default["default"].createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledErrorAndMaxLengthContainer, null, error ? /*#__PURE__*/React__default["default"].createElement(StyledErrorContainer$1, null, /*#__PURE__*/React__default["default"].createElement(Icon, {
+  })))), /*#__PURE__*/React__default["default"].createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledErrorAndMaxLengthContainer, null, error ? /*#__PURE__*/React__default["default"].createElement(StyledErrorContainer$2, null, /*#__PURE__*/React__default["default"].createElement(Icon, {
     testID: "input-error-icon",
     icon: "circle-info",
     size: "xsmall",
@@ -31897,6 +32109,7 @@ exports.DatePicker = DatePicker;
 exports.Divider = Divider;
 exports.Drawer = index$7;
 exports.Empty = Empty;
+exports.Error = Error$1;
 exports.FAB = index$6;
 exports.Icon = Icon;
 exports.Image = Image;