@hero-design/rn 8.22.0-alpha.0 → 8.23.0

package/es/index.js

@@ -1427,26 +1427,26 @@ var globalPalette = {
   inactiveOutline: palette$7.maasstrichtBlueLight60,
   disabledOutline: palette$7.greyDark20,
   // Accents
-  error: palette$7.pastelRed,
-  mutedError: palette$7.pastelRedLight20,
-  errorSurface: palette$7.linen,
-  onErrorSurface: palette$7.vermilion,
-  warning: palette$7.mellowApricot,
-  mutedWarning: palette$7.mellowApricotLight20,
-  warningSurface: palette$7.seashell,
-  onWarningSurface: palette$7.deepSaffron,
-  success: palette$7.emerald,
-  mutedSuccess: palette$7.emeraldLight20,
-  successSurface: palette$7.honeydew,
-  onSuccessSurface: palette$7.pineGreen,
-  info: palette$7.vodka,
-  mutedInfo: palette$7.vodkaLight20,
-  infoSurface: palette$7.aliceBlue,
-  onInfoSurface: palette$7.ultramarineBlue,
-  archived: palette$7.silverChalice,
-  mutedArchived: palette$7.silverChaliceLight20,
-  archivedSurface: palette$7.antiFlashWhite,
-  onArchivedSurface: palette$7.sonicSilver
+  error: palette$7.vermilionDark10,
+  mutedError: palette$7.vermilionLight20,
+  errorSurface: palette$7.moussaka,
+  onErrorSurface: palette$7.indianDance,
+  warning: palette$7.theatreGold,
+  mutedWarning: palette$7.theatreGoldLight20,
+  warningSurface: palette$7.uniformGreen,
+  onWarningSurface: palette$7.blazingBonfire,
+  success: palette$7.pineGreenDark10,
+  mutedSuccess: palette$7.pineGreenLight20,
+  successSurface: palette$7.deepIntoTheJungle,
+  onSuccessSurface: palette$7.mintLeaf,
+  info: palette$7.ultramarineBlueDark10,
+  mutedInfo: palette$7.ultramarineBlueLight20,
+  infoSurface: palette$7.blueOblivion,
+  onInfoSurface: palette$7.pastelBlue,
+  archived: palette$7.sonicSilverDark10,
+  mutedArchived: palette$7.sonicSilverLight50,
+  archivedSurface: palette$7.bigStone,
+  onArchivedSurface: palette$7.flagstone
   // End of Updated 21 / Nov / 22
 };
 
@@ -2181,7 +2181,7 @@ var getDrawerTheme = function getDrawerTheme(theme) {
 
 var getEmptyTheme = function getEmptyTheme(theme) {
   var space = {
-    titleMargin: theme.space.medium,
+    titleMargin: theme.space.small,
     imageMargin: theme.space.large,
     wrapperPadding: theme.space.medium
   };
@@ -2214,7 +2214,7 @@ var getEmptyTheme = function getEmptyTheme(theme) {
 var getErrorTheme = function getErrorTheme(theme) {
   var space = {
     titleMarginBottom: theme.space.small,
-    imageMarginBottom: theme.space.xlarge,
+    imageMarginBottom: theme.space.large,
     wrapperPadding: theme.space.large,
     button: {
       wrapperHorizontalPadding: theme.space.medium,
@@ -2259,7 +2259,8 @@ var getFABTheme = function getFABTheme(theme) {
     actionItemPressedBackground: theme.colors.pressedSurface,
     backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onPrimary,
-    actionItemText: theme.colors.onPrimary
+    actionItemText: theme.colors.onPrimary,
+    shadow: theme.colors.primaryOutline
   };
   var sizes = {
     width: theme.sizes.xxxxxlarge,
@@ -2281,6 +2282,15 @@ var getFABTheme = function getFABTheme(theme) {
     title: theme.lineHeights.large,
     icon: theme.lineHeights.large
   };
+  var shadows = {
+    offset: {
+      width: 0,
+      height: 2
+    },
+    opacity: 0.12,
+    radius: theme.radii.medium,
+    elevation: 2
+  };
   var space = {
     actionItemPaddingLeft: theme.space.medium,
     actionItemPaddingRight: theme.space.medium,
@@ -2307,6 +2317,7 @@ var getFABTheme = function getFABTheme(theme) {
     colors: colors,
     sizes: sizes,
     lineHeights: lineHeights,
+    shadows: shadows,
     space: space
   };
 };
@@ -2682,6 +2693,44 @@ var getSpinnerTheme = function getSpinnerTheme(theme) {
   };
 };
 
+var getSuccessTheme = function getSuccessTheme(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 getSwipeableTheme = function getSwipeableTheme(theme) {
   var colors = {
     success: theme.colors.success,
@@ -2776,7 +2825,7 @@ var getTagTheme = function getTagTheme(theme) {
     "default": theme.borderWidths.base
   };
   var colors = {
-    primary: theme.colors.primary,
+    primary: theme.colors.onDefaultGlobalSurface,
     primaryBackground: undefined,
     info: theme.colors.onInfoSurface,
     infoBackground: theme.colors.infoSurface,
@@ -3065,6 +3114,7 @@ var getTheme$1 = function getTheme() {
       skeleton: getSkeletonTheme(globalTheme),
       slider: getSliderTheme(globalTheme),
       spinner: getSpinnerTheme(globalTheme),
+      success: getSuccessTheme(globalTheme),
       swipeable: getSwipeableTheme(globalTheme),
       "switch": getSwitchTheme(globalTheme),
       tabs: getTabsTheme(globalTheme),
@@ -5989,7 +6039,7 @@ var useDeprecation = function useDeprecation(message) {
   useEffect(function () {
     // eslint-disable-next-line no-console
     if (cond) {
-      console.error(message);
+      console.warn(message);
     }
   }, [message, cond]);
 };
@@ -6085,7 +6135,7 @@ var StyledText$3 = index$a(Text$1)(function (_ref) {
   });
 });
 
-var _excluded$s = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
+var _excluded$t = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
 var Text = function Text(_ref) {
   var children = _ref.children,
     _ref$fontSize = _ref.fontSize,
@@ -6098,7 +6148,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$s);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$t);
   return /*#__PURE__*/React.createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
     themeFontWeight: fontWeight,
@@ -6620,10 +6670,10 @@ var StyledHeroIcon = index$a(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$r = ["style"];
+var _excluded$s = ["style"];
 var AnimatedIcon = function AnimatedIcon(_ref) {
   var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$r);
+    otherProps = _objectWithoutProperties(_ref, _excluded$s);
   var rotateAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(rotateAnimation.current, {
@@ -6729,7 +6779,7 @@ var AccordionItem = function AccordionItem(_ref) {
   }, content));
 };
 
-var _excluded$q = ["key"];
+var _excluded$r = ["key"];
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
     activeItemKey = _ref.activeItemKey,
@@ -6750,7 +6800,7 @@ var Accordion = function Accordion(_ref) {
     testID: testID
   }, items.map(function (_ref2, index) {
     var key = _ref2.key,
-      props = _objectWithoutProperties(_ref2, _excluded$q);
+      props = _objectWithoutProperties(_ref2, _excluded$r);
     var open = _activeItemKey === key;
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: key
@@ -6845,6 +6895,7 @@ var Alert = function Alert(_ref2) {
     variant = _ref2$variant === void 0 ? 'rounded' : _ref2$variant,
     style = _ref2.style,
     testID = _ref2.testID;
+  useDeprecation("Alert's notification intent is deprecated and will be removed in the next major release. Please use other intents instead.", intent === 'notification');
   return /*#__PURE__*/React.createElement(Container$1, {
     themeVariant: variant,
     themeIntent: intent,
@@ -7147,7 +7198,7 @@ var StyledStatus = index$a(Animated.View)(function (_ref3) {
   };
 });
 
-var _excluded$p = ["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,
@@ -7156,7 +7207,7 @@ var Status = function Status(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$p);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$q);
   var _React$useRef = React.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React.useRef(true);
@@ -7189,7 +7240,7 @@ var Status = function Status(_ref) {
   }));
 };
 
-var _excluded$o = ["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';
@@ -7204,7 +7255,7 @@ var Badge = function Badge(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$o);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$p);
   var _React$useRef = React.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React.useRef(true);
@@ -7308,7 +7359,7 @@ function omit(keys, obj) {
   return result;
 }
 
-var _excluded$n = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$o = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
   return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
@@ -7319,7 +7370,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
     selectedTabKey = _ref.selectedTabKey,
     tabs = _ref.tabs,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$n);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$o);
   var insets = useSafeAreaInsets();
   /**
    * List of loaded tabs, tabs will be loaded when navigated to.
@@ -7406,13 +7457,13 @@ var StyledDivider = index$a(View)(function (_ref) {
   }, horizontalMargin), verticalMargin);
 });
 
-var _excluded$m = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$n = ["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$m);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$n);
   return /*#__PURE__*/React.createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
     themeMarginVertical: marginVertical,
@@ -7542,7 +7593,7 @@ var StyledLoadingDot = index$a(View)(function (_ref2) {
   }, themeStyling());
 });
 
-var _excluded$l = ["count", "size", "testID", "themeVariant"];
+var _excluded$m = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = Animated.createAnimatedComponent(StyledLoadingDot);
 var renderDotComponent = function renderDotComponent(_ref) {
@@ -7574,7 +7625,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
     size = _ref2$size === void 0 ? 12 : _ref2$size,
     testID = _ref2.testID,
     themeVariant = _ref2.themeVariant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$l);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$m);
   var progressAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(progressAnimation.current, {
@@ -8001,11 +8052,11 @@ var Header = function Header(_ref) {
   })) : null), showDivider ? /*#__PURE__*/React.createElement(Divider, null) : null);
 };
 
-var _excluded$k = ["scrollEventThrottle"];
+var _excluded$l = ["scrollEventThrottle"];
 var BottomSheetScrollView = function BottomSheetScrollView(_ref) {
   var _ref$scrollEventThrot = _ref.scrollEventThrottle,
     scrollEventThrottle = _ref$scrollEventThrot === void 0 ? 100 : _ref$scrollEventThrot,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$l);
   var _useContext = useContext(BottomSheetContext),
     setInternalShowDivider = _useContext.setInternalShowDivider;
   var onScrollBeginDrag = useCallback(function (e) {
@@ -8320,7 +8371,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$j = ["theme"];
+var _excluded$k = ["theme"];
 var getThemeValue = function getThemeValue(theme, key, props) {
   var propConfig = config[key];
   var propValue = props[key];
@@ -8347,18 +8398,18 @@ var mapStylePropToThemeValue = function mapStylePropToThemeValue(theme, props) {
 var configKeys = Object.keys(config);
 var StyledBox = index$a(View)(function (_ref5) {
   var theme = _ref5.theme,
-    otherProps = _objectWithoutProperties(_ref5, _excluded$j);
+    otherProps = _objectWithoutProperties(_ref5, _excluded$k);
   var styleProps = pick(configKeys, otherProps);
   var flexProps = pick(_toConsumableArray(flexPropsKey), otherProps);
   return _objectSpread2(_objectSpread2({}, mapStylePropToThemeValue(theme, styleProps)), flexProps);
 });
 
-var _excluded$i = ["children", "style", "testID"];
+var _excluded$j = ["children", "style", "testID"];
 var Box = function Box(_ref) {
   var children = _ref.children,
     style = _ref.style,
     testID = _ref.testID,
-    otherProps = _objectWithoutProperties(_ref, _excluded$i);
+    otherProps = _objectWithoutProperties(_ref, _excluded$j);
   return /*#__PURE__*/React.createElement(StyledBox, _extends$1({}, otherProps, {
     style: style,
     testID: testID
@@ -10926,7 +10977,7 @@ var Calendar = function Calendar(_ref) {
   })));
 };
 
-var _excluded$h = ["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,
@@ -10934,7 +10985,7 @@ var Image = function Image(_ref) {
     size = _ref$size === void 0 ? '6xlarge' : _ref$size,
     testID = _ref.testID,
     style = _ref.style,
-    imageNativeProps = _objectWithoutProperties(_ref, _excluded$h);
+    imageNativeProps = _objectWithoutProperties(_ref, _excluded$i);
   var theme = useTheme();
   var imageSize = theme.__hd__.image.sizes[size];
   return /*#__PURE__*/React.createElement(Image$1, _extends$1({
@@ -11138,12 +11189,12 @@ var Indicator = index$a(View)(function (_ref2) {
   };
 });
 
-var _excluded$g = ["intent", "children"];
+var _excluded$h = ["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$g);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$h);
   return /*#__PURE__*/React.createElement(StyledDataCard, nativeProps, /*#__PURE__*/React.createElement(Indicator, {
     themeIntent: intent,
     testID: "data-card-indicator"
@@ -11161,11 +11212,11 @@ var StyledCard$1 = index$a(View)(function (_ref) {
   });
 });
 
-var _excluded$f = ["intent", "children"];
+var _excluded$g = ["intent", "children"];
 var Card = function Card(_ref) {
   var intent = _ref.intent,
     children = _ref.children,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$f);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$g);
   return /*#__PURE__*/React.createElement(StyledCard$1, _extends$1({}, nativeProps, {
     themeIntent: intent
   }), children);
@@ -11353,7 +11404,7 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 
-var _excluded$e = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "pageControlPosition"];
+var _excluded$f = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "pageControlPosition"];
 function useStateFromProp(initialValue) {
   var _useState = useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
@@ -11378,7 +11429,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$e);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$f);
   useDeprecation("shouldShowPagination prop has been deprecated", shouldShowPagination !== noop);
   useDeprecation("The use of 'pageControlPosition == bottom' has been deprecated", pageControlPosition === 'bottom');
   var carouselRef = useRef(null);
@@ -11695,7 +11746,7 @@ var StyledErrorAndMaxLengthContainer = index$a(View)(function () {
   };
 });
 
-var _excluded$d = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling"];
+var _excluded$e = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "hideCharacterCount", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling"];
 var getVariant$1 = function getVariant(_ref) {
   var disabled = _ref.disabled,
     error = _ref.error,
@@ -11737,13 +11788,15 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     _ref2$loading = _ref2.loading,
     loading = _ref2$loading === void 0 ? false : _ref2$loading,
     maxLength = _ref2.maxLength,
+    _ref2$hideCharacterCo = _ref2.hideCharacterCount,
+    hideCharacterCount = _ref2$hideCharacterCo === void 0 ? false : _ref2$hideCharacterCo,
     helpText = _ref2.helpText,
     value = _ref2.value,
     defaultValue = _ref2.defaultValue,
     renderInputValue = _ref2.renderInputValue,
     _ref2$allowFontScalin = _ref2.allowFontScaling,
     allowFontScaling = _ref2$allowFontScalin === void 0 ? false : _ref2$allowFontScalin,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$d);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$e);
   var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
   var actualSuffix = loading ? 'loading' : suffix;
@@ -11759,7 +11812,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     isFocused: isFocused,
     isEmptyValue: isEmptyValue
   });
-  var shouldShowMaxLength = maxLength !== undefined;
+  var shouldShowMaxLength = maxLength !== undefined && !hideCharacterCount;
   var theme = useTheme();
   var innerTextInput = React.useRef();
   React.useImperativeHandle(ref, function () {
@@ -12168,11 +12221,11 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
   }))));
 };
 
-var _excluded$c = ["variant"];
+var _excluded$d = ["variant"];
 var DatePicker = function DatePicker(_ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
-    props = _objectWithoutProperties(_ref, _excluded$c);
+    props = _objectWithoutProperties(_ref, _excluded$d);
   if (variant === 'calendar') {
     return /*#__PURE__*/React.createElement(DatePickerCalendar, props);
   }
@@ -12611,9 +12664,9 @@ var StyledErrorDescription = index$a(Typography.Text)(function (_ref9) {
   };
 });
 
-var _excluded$b = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"],
+var _excluded$c = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"],
   _excluded2 = ["visible", "variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"];
-var renderImage = function renderImage(image) {
+var renderImage$1 = function renderImage(image) {
   if ( /*#__PURE__*/isValidElement(image)) {
     return /*#__PURE__*/React.cloneElement(image, {
       testID: 'error-image'
@@ -12637,14 +12690,14 @@ var ErrorPage = function ErrorPage(_ref) {
     onCtaPress = _ref.onCtaPress,
     secondaryCtaText = _ref.secondaryCtaText,
     onSecondaryCtaPress = _ref.onSecondaryCtaPress,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$b);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$c);
   var showCta = ctaText && onCtaPress !== undefined;
   var showSecondaryCta = secondaryCtaText && onSecondaryCtaPress !== undefined;
   var showButtonContainer = showCta || showSecondaryCta;
   return /*#__PURE__*/React.createElement(StyledErrorContainer$1, _extends$1({
     testID: testID,
     themeVariant: variant
-  }, nativeProps), /*#__PURE__*/React.createElement(StyledErrorContent, null, image && /*#__PURE__*/React.createElement(StyledErrorImageContainer, null, renderImage(image)), /*#__PURE__*/React.createElement(StyledErrorTitle, null, title), description && /*#__PURE__*/React.createElement(StyledErrorDescription, null, description)), showButtonContainer && /*#__PURE__*/React.createElement(StyledErrorButtonContainer, null, showCta && /*#__PURE__*/React.createElement(StyledErrorButtonPrimary, {
+  }, nativeProps), /*#__PURE__*/React.createElement(StyledErrorContent, null, image && /*#__PURE__*/React.createElement(StyledErrorImageContainer, null, renderImage$1(image)), /*#__PURE__*/React.createElement(StyledErrorTitle, null, title), description && /*#__PURE__*/React.createElement(StyledErrorDescription, null, description)), showButtonContainer && /*#__PURE__*/React.createElement(StyledErrorButtonContainer, null, showCta && /*#__PURE__*/React.createElement(StyledErrorButtonPrimary, {
     variant: "filled",
     text: ctaText,
     onPress: onCtaPress
@@ -12745,7 +12798,7 @@ var Error$1 = function Error(_ref2) {
   }, nativeProps));
 };
 
-var StyledFABContainer = index$a(TouchableHighlight)(function (_ref) {
+var StyledFAB$1 = index$a(TouchableHighlight)(function (_ref) {
   var theme = _ref.theme;
   return {
     backgroundColor: theme.__hd__.fab.colors.buttonBackground,
@@ -12756,7 +12809,8 @@ var StyledFABContainer = index$a(TouchableHighlight)(function (_ref) {
     alignSelf: 'flex-start',
     paddingHorizontal: theme.__hd__.fab.space.containerPaddingHorizontal,
     paddingVertical: theme.__hd__.fab.space.containerPaddingVertical,
-    flexDirection: 'row'
+    flexDirection: 'row',
+    elevation: theme.__hd__.fab.shadows.elevation
   };
 });
 var StyledFABIcon = index$a(Icon)(function (_ref2) {
@@ -12780,12 +12834,21 @@ var StyledFABText = index$a(Typography.Text)(function (_ref3) {
     marginHorizontal: theme.__hd__.fab.space.titleMarginHorizontal
   };
 });
+var StyledFABContainer = index$a(Box)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    shadowColor: theme.__hd__.fab.colors.shadow,
+    shadowOffset: theme.__hd__.fab.shadows.offset,
+    shadowRadius: theme.__hd__.fab.shadows.radius,
+    shadowOpacity: theme.__hd__.fab.shadows.opacity
+  };
+});
 
-var _excluded$a = ["active"];
+var _excluded$b = ["active"];
 var AnimatedIcons = Animated.createAnimatedComponent(StyledFABIcon);
 var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
   var active = _ref.active,
-    iconProps = _objectWithoutProperties(_ref, _excluded$a);
+    iconProps = _objectWithoutProperties(_ref, _excluded$b);
   var rotateAnimation = useRef(new Animated.Value(active ? 1 : 0));
   useEffect(function () {
     var animation = Animated.timing(rotateAnimation.current, {
@@ -12846,9 +12909,10 @@ var FAB = function FAB(_ref3) {
   var isIconOnly = !title;
   var theme = useTheme();
   return /*#__PURE__*/React.createElement(StyledFABContainer, {
-    underlayColor: theme.__hd__.fab.colors.buttonPressedBackground,
-    testID: testID,
     style: style,
+    testID: testID
+  }, /*#__PURE__*/React.createElement(StyledFAB$1, {
+    underlayColor: theme.__hd__.fab.colors.buttonPressedBackground,
     onPress: onPress
   }, isIconOnly ? /*#__PURE__*/React.createElement(IconOnlyContent, {
     animated: animated,
@@ -12857,7 +12921,7 @@ var FAB = function FAB(_ref3) {
   }) : /*#__PURE__*/React.createElement(IconWithTextContent, {
     icon: icon,
     title: title
-  }));
+  })));
 };
 
 var StyledActionItem = index$a(TouchableHighlight)(function (_ref) {
@@ -13141,10 +13205,10 @@ var ListItem = function ListItem(_ref) {
   }, prefix && /*#__PURE__*/React.createElement(StyledPrefixContainer$1, null, typeof prefix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
     icon: prefix,
     intent: disabled ? 'disabled-text' : 'primary'
-  }) : prefix), /*#__PURE__*/React.createElement(StyledTitleContainer$1, null, /*#__PURE__*/React.createElement(Typography.Text, {
+  }) : prefix), /*#__PURE__*/React.createElement(StyledTitleContainer$1, null, typeof title === 'string' ? /*#__PURE__*/React.createElement(Typography.Text, {
     intent: "body",
     fontSize: "large"
-  }, title), !!subtitle && /*#__PURE__*/React.createElement(Typography.Text, {
+  }, title) : title, !!subtitle && /*#__PURE__*/React.createElement(Typography.Text, {
     intent: "subdued",
     fontSize: "small"
   }, subtitle)), suffix && /*#__PURE__*/React.createElement(StyledSuffixContainer$1, null, typeof suffix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
@@ -13524,7 +13588,7 @@ var StyledStrokeEnd = index$a(View)(function (_ref6) {
   };
 });
 
-var _excluded$9 = ["value", "renderValue", "intent", "style", "testID"];
+var _excluded$a = ["value", "renderValue", "intent", "style", "testID"];
 var HalfCircle = function HalfCircle(_ref) {
   var type = _ref.type,
     themeIntent = _ref.themeIntent;
@@ -13545,7 +13609,7 @@ var ProgressCircle = function ProgressCircle(_ref2) {
     intent = _ref2$intent === void 0 ? 'primary' : _ref2$intent,
     style = _ref2.style,
     testID = _ref2.testID,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$9);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$a);
   var theme = useTheme$1();
   var radius = theme.__hd__.progress.sizes.circleDiameter / 2;
   var progressAnimatedValue = useRef(new Animated.Value(0));
@@ -13662,14 +13726,14 @@ var StyledInner = index$a(Animated.View)(function (_ref2) {
   };
 });
 
-var _excluded$8 = ["value", "intent", "style", "testID"];
+var _excluded$9 = ["value", "intent", "style", "testID"];
 var ProgressBar = function ProgressBar(_ref) {
   var value = _ref.value,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$8);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$9);
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     width = _useState2[0],
@@ -13860,14 +13924,14 @@ var AnimatedSpinner = function AnimatedSpinner(_ref) {
   }, dotProps))));
 };
 
-var _excluded$7 = ["testID", "size", "intent"];
+var _excluded$8 = ["testID", "size", "intent"];
 var Spinner = function Spinner(_ref) {
   var testID = _ref.testID,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$7);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$8);
   return /*#__PURE__*/React.createElement(StyledView$1, nativeProps, /*#__PURE__*/React.createElement(StyledSpinnerContainer, {
     testID: testID
   }, /*#__PURE__*/React.createElement(AnimatedSpinner, {
@@ -13900,7 +13964,7 @@ var SwipeableAction = function SwipeableAction(_ref) {
   }, children);
 };
 
-var _excluded$6 = ["children", "state", "onStateChange", "leftActions", "leftActionsWidth", "rightActions", "rightActionsWidth"];
+var _excluded$7 = ["children", "state", "onStateChange", "leftActions", "leftActionsWidth", "rightActions", "rightActionsWidth"];
 var renderActions = function renderActions(actions, width, progress, direction) {
   var trans = progress.interpolate({
     inputRange: [0, 1],
@@ -13925,7 +13989,7 @@ var Swipeable = function Swipeable(_ref) {
     leftActionsWidth = _ref.leftActionsWidth,
     rightActions = _ref.rightActions,
     rightActionsWidth = _ref.rightActionsWidth,
-    swipeableProps = _objectWithoutProperties(_ref, _excluded$6);
+    swipeableProps = _objectWithoutProperties(_ref, _excluded$7);
   var _useWindowDimensions = useWindowDimensions(),
     width = _useWindowDimensions.width;
   var swipeableRef = useRef(null);
@@ -14230,7 +14294,7 @@ var StyledSectionList = index$a(SectionList)(function (_ref4) {
   };
 });
 
-var _excluded$5 = ["keyExtractor", "loading", "onEndReached", "onQueryChange", "sections", "renderItem", "sectionListRef"];
+var _excluded$6 = ["keyExtractor", "loading", "onEndReached", "onQueryChange", "sections", "renderItem", "sectionListRef"];
 var BaseOptionList = function BaseOptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -14239,7 +14303,7 @@ var BaseOptionList = function BaseOptionList(_ref) {
     sections = _ref.sections,
     renderItem = _ref.renderItem,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$5);
+    rest = _objectWithoutProperties(_ref, _excluded$6);
   var theme = useTheme$1();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -14308,7 +14372,7 @@ var Option$2 = function Option(_ref) {
   return highlighted === true ? /*#__PURE__*/React.createElement(List.Item, props) : /*#__PURE__*/React.createElement(List.BasicItem, props);
 };
 
-var _excluded$4 = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
+var _excluded$5 = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
 var OptionList$1 = function OptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -14319,7 +14383,7 @@ var OptionList$1 = function OptionList(_ref) {
     renderOption = _ref.renderOption,
     value = _ref.value,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$4);
+    rest = _objectWithoutProperties(_ref, _excluded$5);
   var renderItem = function renderItem(info) {
     var item = info.item;
     var selected = value.includes(info.item.value);
@@ -14507,7 +14571,7 @@ var StyledOptionList = index$a(BaseOptionList)(function (_ref) {
   };
 });
 
-var _excluded$3 = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
+var _excluded$4 = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
 var OptionList = function OptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -14518,7 +14582,7 @@ var OptionList = function OptionList(_ref) {
     renderOption = _ref.renderOption,
     value = _ref.value,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$3);
+    rest = _objectWithoutProperties(_ref, _excluded$4);
   var renderItem = function renderItem(info) {
     var item = info.item;
     var selected = item.value === value;
@@ -14683,7 +14747,7 @@ var StyledGradientContainer = index$a(Box)(function (_ref2) {
   };
 });
 
-var _excluded$2 = ["intent", "variant", "style", "onLayout"];
+var _excluded$3 = ["intent", "variant", "style", "onLayout"];
 var AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
 var gradientPositions = {
   start: {
@@ -14715,7 +14779,7 @@ var Skeleton = function Skeleton(_ref) {
     variant = _ref$variant === void 0 ? 'rounded' : _ref$variant,
     style = _ref.style,
     onLayout = _ref.onLayout,
-    props = _objectWithoutProperties(_ref, _excluded$2);
+    props = _objectWithoutProperties(_ref, _excluded$3);
   var theme = useTheme();
   var colors = useMemo(function () {
     return getGradientColors(theme, intent);
@@ -14779,6 +14843,134 @@ var Skeleton = function Skeleton(_ref) {
   })));
 };
 
+var StyledSuccessContainer = index$a(View)(function (_ref) {
+  var theme = _ref.theme,
+    themeVariant = _ref.themeVariant;
+  return {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    backgroundColor: themeVariant === 'in-page' ? theme.__hd__.success.colors.inPageBackground : theme.__hd__.success.colors.fullScreenBackground
+  };
+});
+var StyledSuccessImage = index$a(Image)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    marginBottom: theme.__hd__.success.space.imageMarginBottom,
+    width: theme.__hd__.success.sizes.image,
+    height: theme.__hd__.success.sizes.image,
+    resizeMode: 'contain'
+  };
+});
+var StyledSuccessContent = index$a(View)(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: theme.__hd__.success.space.wrapperPadding
+  };
+});
+var StyledSuccessImageContainer = index$a(View)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    marginBottom: theme.__hd__.success.space.imageMarginBottom,
+    width: theme.__hd__.success.sizes.image,
+    height: theme.__hd__.success.sizes.image
+  };
+});
+var StyledSuccessTitle = index$a(Typography.Text)(function (_ref5) {
+  var theme = _ref5.theme;
+  return {
+    fontFamily: theme.__hd__.success.fonts.title,
+    fontSize: theme.__hd__.success.fontSizes.title,
+    textAlign: 'center',
+    marginBottom: theme.__hd__.success.space.titleMarginBottom,
+    color: theme.__hd__.success.colors.title
+  };
+});
+var StyledSuccessDescription = index$a(Typography.Text)(function (_ref6) {
+  var theme = _ref6.theme;
+  return {
+    fontFamily: theme.__hd__.success.fonts.description,
+    fontSize: theme.__hd__.success.fontSizes.description,
+    textAlign: 'center',
+    color: theme.__hd__.success.colors.description
+  };
+});
+var StyledSuccessButtonContainer = index$a(View)(function (_ref7) {
+  var theme = _ref7.theme;
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: theme.__hd__.success.space.button.wrapperHorizontalPadding,
+    paddingVertical: theme.__hd__.success.space.button.wrapperVerticalPadding
+  };
+});
+var StyledSuccessButtonPrimary = index$a(CompoundButton)(function (_ref8) {
+  var theme = _ref8.theme;
+  return {
+    padding: theme.__hd__.success.space.button.padding
+  };
+});
+var StyledSuccessModal = index$a(Modal)({
+  height: '100%',
+  width: '100%'
+});
+
+var _excluded$2 = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress"];
+var renderImage = function renderImage(image) {
+  if ( /*#__PURE__*/isValidElement(image)) {
+    return /*#__PURE__*/React.cloneElement(image, {
+      testID: 'success-image'
+    });
+  }
+  return /*#__PURE__*/React.createElement(StyledSuccessImage, {
+    source: typeof image === 'string' ? {
+      uri: image
+    } : image,
+    testID: "success-image"
+  });
+};
+var SuccessPage = function SuccessPage(_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,
+    _ref$onCtaPress = _ref.onCtaPress,
+    onCtaPress = _ref$onCtaPress === void 0 ? noop$1 : _ref$onCtaPress,
+    nativeProps = _objectWithoutProperties(_ref, _excluded$2);
+  return /*#__PURE__*/React.createElement(StyledSuccessContainer, _extends$1({
+    testID: testID,
+    themeVariant: variant
+  }, nativeProps), /*#__PURE__*/React.createElement(StyledSuccessContent, null, !!image && /*#__PURE__*/React.createElement(StyledSuccessImageContainer, null, renderImage(image)), /*#__PURE__*/React.createElement(StyledSuccessTitle, null, title), !!description && /*#__PURE__*/React.createElement(StyledSuccessDescription, null, description)), !!ctaText && /*#__PURE__*/React.createElement(StyledSuccessButtonContainer, null, /*#__PURE__*/React.createElement(StyledSuccessButtonPrimary, {
+    text: ctaText,
+    onPress: onCtaPress
+  })));
+};
+/**
+ * Renders success page
+ *
+ * @param {SuccessProps} props
+ * @return {*}  {ReactElement}
+ */
+var Success = function Success(props) {
+  var variant = props.variant;
+  if (variant === 'full-screen') {
+    return /*#__PURE__*/React.createElement(StyledSuccessModal, {
+      animationType: "slide"
+    }, /*#__PURE__*/React.createElement(SuccessPage, props));
+  }
+  return /*#__PURE__*/React.createElement(SuccessPage, props);
+};
+
 var StyledWrapper$1 = index$a(View)(function (_ref) {
   var theme = _ref.theme;
   return {
@@ -15409,7 +15601,7 @@ var index$2 = Object.assign(Tabs, {
 
 var getFilledStyles = function getFilledStyles(themeIntent, theme) {
   return {
-    textColor: theme.__hd__.tag.colors.text,
+    textColor: theme.__hd__.tag.colors[themeIntent],
     borderColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")],
     backgroundColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")]
   };
@@ -32423,4 +32615,4 @@ var index = Object.assign(RichTextEditor$1, {
   Toolbar: EditorToolbar
 });
 
-export { Accordion, Alert, Attachment, index$9 as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar, Card$1 as Card, index$8 as Carousel, Checkbox, Collapse, ContentNavigator, DatePicker, Divider, index$7 as Drawer, Empty, Error$1 as Error, index$6 as FAB, Icon, Image, List, PageControl, PinInput, Progress, CompoundRadio as Radio, RefreshControl, index as RichTextEditor, SectionHeading, index$4 as Select, Skeleton, Slider, Spinner, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, getTheme$1 as getTheme, jobsSystemPalette, scale, swagDarkSystemPalette, swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };
+export { Accordion, Alert, Attachment, index$9 as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar, Card$1 as Card, index$8 as Carousel, Checkbox, Collapse, ContentNavigator, DatePicker, Divider, index$7 as Drawer, Empty, Error$1 as Error, index$6 as FAB, Icon, Image, List, PageControl, PinInput, Progress, CompoundRadio as Radio, RefreshControl, index as RichTextEditor, SectionHeading, index$4 as Select, Skeleton, Slider, Spinner, Success, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, getTheme$1 as getTheme, jobsSystemPalette, scale, swagDarkSystemPalette, swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };