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

package/lib/index.js

@@ -2211,7 +2211,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
   };
@@ -2244,7 +2244,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,
@@ -2723,6 +2723,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,
@@ -2817,7 +2855,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,
@@ -2910,12 +2948,15 @@ var getTextInputTheme = function getTextInputTheme(theme) {
     containerMarginTop: theme.space.small,
     labelInsideTextInputMarginTop: -theme.space.xxsmall
   };
+  var fonts = {
+    text: theme.fonts.neutral.regular
+  };
   var fontSizes = {
-    text: theme.fontSizes.medium,
-    labelInsideTextInput: theme.fontSizes.medium,
+    text: theme.fontSizes.large,
+    labelInsideTextInput: theme.fontSizes.large,
     error: theme.fontSizes.small,
     maxLength: theme.fontSizes.small,
-    asteriskLabel: theme.fontSizes.medium
+    asteriskLabel: theme.fontSizes.large
   };
   var borderWidths = {
     container: {
@@ -2927,11 +2968,14 @@ var getTextInputTheme = function getTextInputTheme(theme) {
     container: theme.radii.medium
   };
   var sizes = {
-    errorAndHelpTextContainerHeight: theme.sizes.medium
+    errorAndHelpTextContainerHeight: theme.sizes.medium,
+    textareaHeight: theme.sizes['15xlarge'],
+    textInputMaxHeight: theme.sizes['15xlarge']
   };
   return {
     colors: colors,
     space: space,
+    fonts: fonts,
     fontSizes: fontSizes,
     borderWidths: borderWidths,
     radii: radii,
@@ -3106,6 +3150,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),
@@ -6030,7 +6075,7 @@ var useDeprecation = function useDeprecation(message) {
   React.useEffect(function () {
     // eslint-disable-next-line no-console
     if (cond) {
-      console.error(message);
+      console.warn(message);
     }
   }, [message, cond]);
 };
@@ -6126,7 +6171,7 @@ var StyledText$3 = index$a(reactNative.Text)(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,
@@ -6139,7 +6184,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__default["default"].createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
     themeFontWeight: fontWeight,
@@ -6661,10 +6706,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 = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
     var animation = reactNative.Animated.loop(reactNative.Animated.timing(rotateAnimation.current, {
@@ -6770,7 +6815,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,
@@ -6791,7 +6836,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__default["default"].createElement(React__default["default"].Fragment, {
       key: key
@@ -6886,6 +6931,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__default["default"].createElement(Container$1, {
     themeVariant: variant,
     themeIntent: intent,
@@ -7188,7 +7234,7 @@ var StyledStatus = index$a(reactNative.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,
@@ -7197,7 +7243,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__default["default"].useRef(new reactNative.Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React__default["default"].useRef(true);
@@ -7230,7 +7276,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';
@@ -7245,7 +7291,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__default["default"].useRef(new reactNative.Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React__default["default"].useRef(true);
@@ -7349,7 +7395,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;
@@ -7360,7 +7406,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 = reactNativeSafeAreaContext.useSafeAreaInsets();
   /**
    * List of loaded tabs, tabs will be loaded when navigated to.
@@ -7447,13 +7493,13 @@ var StyledDivider = index$a(reactNative.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__default["default"].createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
     themeMarginVertical: marginVertical,
@@ -7583,7 +7629,7 @@ var StyledLoadingDot = index$a(reactNative.View)(function (_ref2) {
   }, themeStyling());
 });
 
-var _excluded$l = ["count", "size", "testID", "themeVariant"];
+var _excluded$m = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = reactNative.Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = reactNative.Animated.createAnimatedComponent(StyledLoadingDot);
 var renderDotComponent = function renderDotComponent(_ref) {
@@ -7615,7 +7661,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 = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
     var animation = reactNative.Animated.loop(reactNative.Animated.timing(progressAnimation.current, {
@@ -8042,11 +8088,11 @@ var Header = function Header(_ref) {
   })) : null), showDivider ? /*#__PURE__*/React__default["default"].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 = React.useContext(BottomSheetContext),
     setInternalShowDivider = _useContext.setInternalShowDivider;
   var onScrollBeginDrag = React.useCallback(function (e) {
@@ -8361,7 +8407,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];
@@ -8388,18 +8434,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$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__default["default"].createElement(StyledBox, _extends$1({}, otherProps, {
     style: style,
     testID: testID
@@ -10967,7 +11013,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,
@@ -10975,7 +11021,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__default["default"].createElement(reactNative.Image, _extends$1({
@@ -11179,12 +11225,12 @@ var Indicator = index$a(reactNative.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__default["default"].createElement(StyledDataCard, nativeProps, /*#__PURE__*/React__default["default"].createElement(Indicator, {
     themeIntent: intent,
     testID: "data-card-indicator"
@@ -11202,11 +11248,11 @@ var StyledCard$1 = index$a(reactNative.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__default["default"].createElement(StyledCard$1, _extends$1({}, nativeProps, {
     themeIntent: intent
   }), children);
@@ -11394,7 +11440,7 @@ var CardCarousel = /*#__PURE__*/React.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 = React.useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
@@ -11419,7 +11465,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 = React.useRef(null);
@@ -11605,47 +11651,48 @@ var StyledLabelContainer = index$a(reactNative.View)(function (_ref2) {
 });
 var StyledLabel = index$a(Typography.Text)(function (_ref3) {
   var theme = _ref3.theme,
-    themeVariant = _ref3.themeVariant;
+    themeState = _ref3.themeState;
   return {
-    color: theme.__hd__.textInput.colors.labels[themeVariant]
+    color: theme.__hd__.textInput.colors.labels[themeState]
   };
 });
 var StyledAsteriskLabel = index$a(Typography.Text)(function (_ref4) {
   var theme = _ref4.theme,
-    themeVariant = _ref4.themeVariant;
+    themeState = _ref4.themeState;
   return {
-    color: theme.__hd__.textInput.colors.asterisks[themeVariant]
+    color: theme.__hd__.textInput.colors.asterisks[themeState]
   };
 });
-var StyledLabelContainerInsideTextInput = index$a(reactNative.View)(function () {
+var StyledLabelContainerInsideTextInput = index$a(reactNative.View)(function (_ref5) {
+  var themeVariant = _ref5.themeVariant;
   return _objectSpread2({
     flexDirection: 'row',
     zIndex: 9999,
-    alignItems: 'center'
+    alignItems: themeVariant === 'text' ? 'center' : 'flex-start'
   }, reactNative.StyleSheet.absoluteFillObject);
 });
-var StyledLabelInsideTextInput = index$a(Typography.Text)(function (_ref5) {
-  var theme = _ref5.theme,
-    themeVariant = _ref5.themeVariant;
+var StyledLabelInsideTextInput = index$a(Typography.Text)(function (_ref6) {
+  var theme = _ref6.theme,
+    themeState = _ref6.themeState;
   return {
     textAlignVertical: 'center',
     alignContent: 'center',
     fontSize: theme.__hd__.textInput.fontSizes.labelInsideTextInput,
     alignItems: 'center',
-    color: theme.__hd__.textInput.colors.labelsInsideTextInput[themeVariant],
+    color: theme.__hd__.textInput.colors.labelsInsideTextInput[themeState],
     marginTop: theme.__hd__.textInput.space.labelInsideTextInputMarginTop
   };
 });
-var StyledAsteriskLabelInsideTextInput = index$a(Typography.Text)(function (_ref6) {
-  var theme = _ref6.theme,
-    themeVariant = _ref6.themeVariant;
+var StyledAsteriskLabelInsideTextInput = index$a(Typography.Text)(function (_ref7) {
+  var theme = _ref7.theme,
+    themeState = _ref7.themeState;
   return {
-    color: theme.__hd__.textInput.colors.asterisks[themeVariant],
+    color: theme.__hd__.textInput.colors.asterisks[themeState],
     fontSize: theme.__hd__.textInput.fontSizes.asteriskLabel
   };
 });
-var StyledErrorContainer$2 = index$a(reactNative.View)(function (_ref7) {
-  var theme = _ref7.theme;
+var StyledErrorContainer$2 = index$a(reactNative.View)(function (_ref8) {
+  var theme = _ref8.theme;
   return {
     marginRight: theme.__hd__.textInput.space.errorContainerMarginRight,
     flexDirection: 'row',
@@ -11654,19 +11701,19 @@ var StyledErrorContainer$2 = index$a(reactNative.View)(function (_ref7) {
     flexGrow: 4
   };
 });
-var StyledError = index$a(Typography.Text)(function (_ref8) {
-  var theme = _ref8.theme;
+var StyledError = index$a(Typography.Text)(function (_ref9) {
+  var theme = _ref9.theme;
   return {
     color: theme.__hd__.textInput.colors.error,
     fontSize: theme.__hd__.textInput.fontSizes.error,
     marginLeft: theme.__hd__.textInput.space.errorMarginLeft
   };
 });
-var StyledMaxLengthMessage = index$a(Typography.Text)(function (_ref9) {
-  var theme = _ref9.theme,
-    themeVariant = _ref9.themeVariant;
+var StyledMaxLengthMessage = index$a(Typography.Text)(function (_ref10) {
+  var theme = _ref10.theme,
+    themeState = _ref10.themeState;
   return {
-    color: theme.__hd__.textInput.colors.maxLengthLabels[themeVariant],
+    color: theme.__hd__.textInput.colors.maxLengthLabels[themeState],
     fontSize: theme.__hd__.textInput.fontSizes.maxLength,
     marginRight: theme.__hd__.textInput.space.maxLengthLabelMarginLeft,
     alignSelf: 'flex-end',
@@ -11675,36 +11722,40 @@ var StyledMaxLengthMessage = index$a(Typography.Text)(function (_ref9) {
     textAlign: 'right'
   };
 });
-var StyledHelperText = index$a(Typography.Text)(function (_ref10) {
-  var theme = _ref10.theme;
+var StyledHelperText = index$a(Typography.Text)(function (_ref11) {
+  var theme = _ref11.theme;
   return {
     fontSize: theme.__hd__.textInput.fontSizes.error
   };
 });
-var StyledTextInput = index$a(reactNative.TextInput)(function (_ref11) {
-  var theme = _ref11.theme;
+var StyledTextInput = index$a(reactNative.TextInput)(function (_ref12) {
+  var theme = _ref12.theme,
+    themeVariant = _ref12.themeVariant;
   return {
-    textAlignVertical: 'center',
+    textAlignVertical: themeVariant === 'text' ? 'center' : 'top',
     fontSize: theme.__hd__.textInput.fontSizes.text,
     alignSelf: 'stretch',
     flexGrow: 2,
     marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin,
-    paddingVertical: 0
+    paddingVertical: 0,
+    maxHeight: theme.__hd__.textInput.sizes.textInputMaxHeight,
+    height: themeVariant === 'text' ? undefined : theme.__hd__.textInput.sizes.textareaHeight,
+    fontFamily: theme.__hd__.textInput.fonts.text
   };
 });
-var StyledBorderBackDrop = index$a(reactNative.View)(function (_ref12) {
+var StyledBorderBackDrop = index$a(reactNative.View)(function (_ref13) {
   var _theme$__hd__$textInp;
-  var theme = _ref12.theme,
-    themeFocused = _ref12.themeFocused,
-    themeVariant = _ref12.themeVariant;
+  var theme = _ref13.theme,
+    themeFocused = _ref13.themeFocused,
+    themeState = _ref13.themeState;
   return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
     borderWidth: themeFocused ? theme.__hd__.textInput.borderWidths.container.focused : theme.__hd__.textInput.borderWidths.container.normal,
     borderRadius: theme.__hd__.textInput.radii.container,
-    borderColor: (_theme$__hd__$textInp = theme.__hd__.textInput.colors.borders[themeVariant]) !== null && _theme$__hd__$textInp !== void 0 ? _theme$__hd__$textInp : theme.__hd__.textInput.colors.borders["default"]
+    borderColor: (_theme$__hd__$textInp = theme.__hd__.textInput.colors.borders[themeState]) !== null && _theme$__hd__$textInp !== void 0 ? _theme$__hd__$textInp : theme.__hd__.textInput.colors.borders["default"]
   });
 });
-var StyledTextInputContainer = index$a(reactNative.View)(function (_ref13) {
-  var theme = _ref13.theme;
+var StyledTextInputContainer = index$a(reactNative.View)(function (_ref14) {
+  var theme = _ref14.theme;
   return {
     flexDirection: 'row',
     alignItems: 'center',
@@ -11722,8 +11773,8 @@ var StyledTextInputAndLabelContainer = index$a(reactNative.View)(function () {
     flexShrink: 1
   };
 });
-var StyledErrorAndHelpTextContainer = index$a(reactNative.View)(function (_ref14) {
-  var theme = _ref14.theme;
+var StyledErrorAndHelpTextContainer = index$a(reactNative.View)(function (_ref15) {
+  var theme = _ref15.theme;
   return {
     paddingLeft: theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingLeft,
     minHeight: theme.__hd__.textInput.sizes.errorAndHelpTextContainerHeight
@@ -11736,8 +11787,8 @@ var StyledErrorAndMaxLengthContainer = index$a(reactNative.View)(function () {
   };
 });
 
-var _excluded$d = ["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 _excluded$e = ["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,
     editable = _ref.editable,
@@ -11778,13 +11829,17 @@ var TextInput = /*#__PURE__*/React.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);
+    _ref2$variant = _ref2.variant,
+    variant = _ref2$variant === void 0 ? 'text' : _ref2$variant,
+    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;
@@ -11792,7 +11847,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isFocused = _React$useState2[0],
     setIsFocused = _React$useState2[1];
-  var variant = getVariant$1({
+  var state = getState$1({
     disabled: disabled,
     error: error,
     editable: editable,
@@ -11800,7 +11855,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     isFocused: isFocused,
     isEmptyValue: isEmptyValue
   });
-  var shouldShowMaxLength = maxLength !== undefined;
+  var shouldShowMaxLength = maxLength !== undefined && !hideCharacterCount;
   var theme = useTheme();
   var innerTextInput = React__default["default"].useRef();
   React__default["default"].useImperativeHandle(ref, function () {
@@ -11868,7 +11923,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     }, textStyleWithoutBorderStyle]),
     testID: 'text-input',
     accessibilityState: {
-      disabled: variant === 'disabled' || variant === 'readonly'
+      disabled: state === 'disabled' || state === 'readonly'
     },
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
@@ -11897,11 +11952,11 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   });
   return /*#__PURE__*/React__default["default"].createElement(StyledContainer$4, {
     style: styleWithoutBackgroundColor,
-    pointerEvents: variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto',
+    pointerEvents: state === 'disabled' || state === 'readonly' ? 'none' : 'auto',
     testID: testID
   }, /*#__PURE__*/React__default["default"].createElement(StyledTextInputContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledBorderBackDrop, {
     themeFocused: isFocused,
-    themeVariant: variant,
+    themeState: state,
     testID: "text-input-border",
     style: [{
       backgroundColor: backgroundColor
@@ -11913,36 +11968,39 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       backgroundColor: backgroundColor
     }
   }, required && /*#__PURE__*/React__default["default"].createElement(StyledAsteriskLabel, {
-    themeVariant: variant,
+    themeState: state,
     fontSize: "small"
   }, "*"), !!label && /*#__PURE__*/React__default["default"].createElement(StyledLabel, {
     nativeID: accessibilityLabelledBy,
     testID: "input-label",
     fontSize: "small",
-    themeVariant: variant,
+    themeState: state,
     style: {
       backgroundColor: backgroundColor
     }
   }, label)), typeof prefix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-    intent: variant === 'disabled' ? 'disabled-text' : 'text',
+    intent: state === 'disabled' ? 'disabled-text' : 'text',
     testID: "input-prefix",
     icon: prefix,
     size: "xsmall"
   }) : prefix, /*#__PURE__*/React__default["default"].createElement(StyledTextInputAndLabelContainer, null, !isFocused && isEmptyValue && /*#__PURE__*/React__default["default"].createElement(StyledLabelContainerInsideTextInput, {
+    themeVariant: variant,
     pointerEvents: "none"
   }, required && /*#__PURE__*/React__default["default"].createElement(StyledAsteriskLabelInsideTextInput, {
-    themeVariant: variant
+    themeState: state
   }, "*"), !!label && /*#__PURE__*/React__default["default"].createElement(StyledLabelInsideTextInput, {
     nativeID: accessibilityLabelledBy,
     testID: "input-label",
     fontSize: "medium",
-    themeVariant: variant
+    themeState: state
   }, label)), renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React__default["default"].createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
+    themeVariant: variant,
+    multiline: variant === 'textarea' || nativeProps.multiline,
     ref: function ref(reference) {
       innerTextInput.current = reference;
     }
   }))), typeof actualSuffix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-    intent: variant === 'disabled' ? 'disabled-text' : 'text',
+    intent: state === 'disabled' ? 'disabled-text' : 'text',
     testID: "input-suffix",
     icon: actualSuffix,
     spin: actualSuffix === 'loading',
@@ -11955,7 +12013,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   }), /*#__PURE__*/React__default["default"].createElement(StyledError, {
     testID: "input-error-message"
   }, error)) : !!helpText && /*#__PURE__*/React__default["default"].createElement(StyledHelperText, null, helpText), shouldShowMaxLength && /*#__PURE__*/React__default["default"].createElement(StyledMaxLengthMessage, {
-    themeVariant: variant,
+    themeState: state,
     fontSize: "small"
   }, displayText.length, "/", maxLength))));
 });
@@ -12209,11 +12267,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__default["default"].createElement(DatePickerCalendar, props);
   }
@@ -12652,9 +12710,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__*/React.isValidElement(image)) {
     return /*#__PURE__*/React__default["default"].cloneElement(image, {
       testID: 'error-image'
@@ -12678,14 +12736,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__default["default"].createElement(StyledErrorContainer$1, _extends$1({
     testID: testID,
     themeVariant: variant
-  }, nativeProps), /*#__PURE__*/React__default["default"].createElement(StyledErrorContent, null, image && /*#__PURE__*/React__default["default"].createElement(StyledErrorImageContainer, null, renderImage(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, {
+  }, nativeProps), /*#__PURE__*/React__default["default"].createElement(StyledErrorContent, null, image && /*#__PURE__*/React__default["default"].createElement(StyledErrorImageContainer, null, renderImage$1(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
@@ -12832,11 +12890,11 @@ var StyledFABContainer = index$a(Box)(function (_ref4) {
   };
 });
 
-var _excluded$a = ["active"];
+var _excluded$b = ["active"];
 var AnimatedIcons = reactNative.Animated.createAnimatedComponent(StyledFABIcon);
 var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
   var active = _ref.active,
-    iconProps = _objectWithoutProperties(_ref, _excluded$a);
+    iconProps = _objectWithoutProperties(_ref, _excluded$b);
   var rotateAnimation = React.useRef(new reactNative.Animated.Value(active ? 1 : 0));
   React.useEffect(function () {
     var animation = reactNative.Animated.timing(rotateAnimation.current, {
@@ -13193,10 +13251,10 @@ var ListItem = function ListItem(_ref) {
   }, prefix && /*#__PURE__*/React__default["default"].createElement(StyledPrefixContainer$1, null, typeof prefix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
     icon: prefix,
     intent: disabled ? 'disabled-text' : 'primary'
-  }) : prefix), /*#__PURE__*/React__default["default"].createElement(StyledTitleContainer$1, null, /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
+  }) : prefix), /*#__PURE__*/React__default["default"].createElement(StyledTitleContainer$1, null, typeof title === 'string' ? /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
     intent: "body",
     fontSize: "large"
-  }, title), !!subtitle && /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
+  }, title) : title, !!subtitle && /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
     intent: "subdued",
     fontSize: "small"
   }, subtitle)), suffix && /*#__PURE__*/React__default["default"].createElement(StyledSuffixContainer$1, null, typeof suffix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
@@ -13576,7 +13634,7 @@ var StyledStrokeEnd = index$a(reactNative.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;
@@ -13597,7 +13655,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 = React.useRef(new reactNative.Animated.Value(0));
@@ -13714,14 +13772,14 @@ var StyledInner = index$a(reactNative.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 = React.useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     width = _useState2[0],
@@ -13912,14 +13970,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__default["default"].createElement(StyledView$1, nativeProps, /*#__PURE__*/React__default["default"].createElement(StyledSpinnerContainer, {
     testID: testID
   }, /*#__PURE__*/React__default["default"].createElement(AnimatedSpinner, {
@@ -13952,7 +14010,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],
@@ -13977,7 +14035,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 = reactNative.useWindowDimensions(),
     width = _useWindowDimensions.width;
   var swipeableRef = React.useRef(null);
@@ -14282,7 +14340,7 @@ var StyledSectionList = index$a(reactNative.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,
@@ -14291,7 +14349,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 = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -14360,7 +14418,7 @@ var Option$2 = function Option(_ref) {
   return highlighted === true ? /*#__PURE__*/React__default["default"].createElement(List.Item, props) : /*#__PURE__*/React__default["default"].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,
@@ -14371,7 +14429,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);
@@ -14559,7 +14617,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,
@@ -14570,7 +14628,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;
@@ -14735,7 +14793,7 @@ var StyledGradientContainer = index$a(Box)(function (_ref2) {
   };
 });
 
-var _excluded$2 = ["intent", "variant", "style", "onLayout"];
+var _excluded$3 = ["intent", "variant", "style", "onLayout"];
 var AnimatedLinearGradient = reactNative.Animated.createAnimatedComponent(LinearGradient__default["default"]);
 var gradientPositions = {
   start: {
@@ -14767,7 +14825,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 = React.useMemo(function () {
     return getGradientColors(theme, intent);
@@ -14831,6 +14889,134 @@ var Skeleton = function Skeleton(_ref) {
   })));
 };
 
+var StyledSuccessContainer = 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__.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(reactNative.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(reactNative.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(reactNative.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(reactNative.Modal)({
+  height: '100%',
+  width: '100%'
+});
+
+var _excluded$2 = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress"];
+var renderImage = function renderImage(image) {
+  if ( /*#__PURE__*/React.isValidElement(image)) {
+    return /*#__PURE__*/React__default["default"].cloneElement(image, {
+      testID: 'success-image'
+    });
+  }
+  return /*#__PURE__*/React__default["default"].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__default["default"].createElement(StyledSuccessContainer, _extends$1({
+    testID: testID,
+    themeVariant: variant
+  }, nativeProps), /*#__PURE__*/React__default["default"].createElement(StyledSuccessContent, null, !!image && /*#__PURE__*/React__default["default"].createElement(StyledSuccessImageContainer, null, renderImage(image)), /*#__PURE__*/React__default["default"].createElement(StyledSuccessTitle, null, title), !!description && /*#__PURE__*/React__default["default"].createElement(StyledSuccessDescription, null, description)), !!ctaText && /*#__PURE__*/React__default["default"].createElement(StyledSuccessButtonContainer, null, /*#__PURE__*/React__default["default"].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__default["default"].createElement(StyledSuccessModal, {
+      animationType: "slide"
+    }, /*#__PURE__*/React__default["default"].createElement(SuccessPage, props));
+  }
+  return /*#__PURE__*/React__default["default"].createElement(SuccessPage, props);
+};
+
 var StyledWrapper$1 = index$a(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
@@ -15179,48 +15365,35 @@ var getTabItem$1 = function getTabItem(_ref) {
     color: color
   });
 };
-var ScrollableTab = function ScrollableTab(_ref2) {
+var ScrollableTabHeader = function ScrollableTabHeader(_ref2) {
   var onTabPress = _ref2.onTabPress,
-    selectedTabKey = _ref2.selectedTabKey,
+    selectedIndex = _ref2.selectedIndex,
     tabs = _ref2.tabs,
-    containerStyle = _ref2.containerStyle,
     barStyle = _ref2.barStyle,
-    _ref2$lazy = _ref2.lazy,
-    lazy = _ref2$lazy === void 0 ? false : _ref2$lazy,
-    _ref2$lazyPreloadDist = _ref2.lazyPreloadDistance,
-    lazyPreloadDistance = _ref2$lazyPreloadDist === void 0 ? 1 : _ref2$lazyPreloadDist,
-    _ref2$swipeEnabled = _ref2.swipeEnabled,
-    swipeEnabled = _ref2$swipeEnabled === void 0 ? true : _ref2$swipeEnabled,
-    componentTestID = _ref2.testID;
+    testID = _ref2.testID,
+    _ref2$insets = _ref2.insets,
+    insets = _ref2$insets === void 0 ? {
+      top: 0,
+      bottom: 0,
+      right: 0,
+      left: 0
+    } : _ref2$insets;
   var flatListRef = React__default["default"].useRef(null);
-  var pagerViewRef = React__default["default"].useRef(null);
-  var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
   var theme = useTheme$1();
-  var selectedTabIndex = tabs.findIndex(function (item) {
-    return item.key === selectedTabKey;
-  });
   var tabsAnims = useAnimatedValueArray(tabs.map(function (_, i) {
-    return i === selectedTabIndex ? 1 : 0;
+    return i === selectedIndex ? 1 : 0;
   }));
   React__default["default"].useEffect(function () {
-    var timeoutHandle = null;
-    if (selectedTabIndex !== -1) {
+    if (selectedIndex !== undefined && selectedIndex !== -1) {
       var _flatListRef$current;
       (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
-        index: selectedTabIndex,
+        index: selectedIndex,
         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$current;
-        // use no animation to prevent unexpected behavior if users select tab too quickly
-        (_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) {
       return reactNative.Animated.timing(tabsAnims[i], {
-        toValue: i === selectedTabIndex ? 1 : 0,
+        toValue: i === selectedIndex ? 1 : 0,
         duration: 150,
         useNativeDriver: true
       });
@@ -15228,19 +15401,13 @@ var ScrollableTab = function ScrollableTab(_ref2) {
     animation.start();
     return function () {
       animation.stop();
-      if (timeoutHandle) {
-        clearTimeout(timeoutHandle);
-      }
     };
-  }, [selectedTabIndex, pagerViewRef]);
-  return /*#__PURE__*/React__default["default"].createElement(TabContainer, {
-    style: containerStyle,
-    testID: componentTestID
-  }, /*#__PURE__*/React__default["default"].createElement(HeaderTabWrapper, {
+  }, [selectedIndex]);
+  return /*#__PURE__*/React__default["default"].createElement(HeaderTabWrapper, {
     themeInsets: insets,
     style: barStyle
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.FlatList, {
-    testID: componentTestID ? "".concat(componentTestID, "-tab-bar") : undefined,
+    testID: testID,
     ref: flatListRef,
     horizontal: true,
     data: tabs,
@@ -15265,11 +15432,11 @@ var ScrollableTab = function ScrollableTab(_ref2) {
       var tab = _ref4.item,
         index = _ref4.index;
       var key = tab.key,
-        testID = tab.testID,
+        tabItemTestID = tab.testID,
         activeItem = tab.activeItem,
         originalInactiveItem = tab.inactiveItem,
         badge = tab.badge;
-      var active = selectedTabKey === key;
+      var active = selectedIndex === index;
       var activeAnimated = tabsAnims[index];
       var outlineScale = active ? activeAnimated.interpolate({
         inputRange: [0, 1],
@@ -15286,7 +15453,7 @@ var ScrollableTab = function ScrollableTab(_ref2) {
         onPress: function onPress() {
           onTabPress(key);
         },
-        testID: testID
+        testID: tabItemTestID
       }, /*#__PURE__*/React__default["default"].createElement(HeaderTabItem, {
         isFirstItem: index === 0
       }, /*#__PURE__*/React__default["default"].createElement(HeaderTabItemOutlineWrapper, null, /*#__PURE__*/React__default["default"].createElement(HeaderTabItemOutline, {
@@ -15302,7 +15469,55 @@ var ScrollableTab = function ScrollableTab(_ref2) {
         tabItem: tabItem
       }))));
     }
-  })), /*#__PURE__*/React__default["default"].createElement(ContentWrapper, {
+  }));
+};
+
+var ScrollableTab$1 = function ScrollableTab(_ref) {
+  var onTabPress = _ref.onTabPress,
+    selectedTabKey = _ref.selectedTabKey,
+    tabs = _ref.tabs,
+    containerStyle = _ref.containerStyle,
+    barStyle = _ref.barStyle,
+    _ref$lazy = _ref.lazy,
+    lazy = _ref$lazy === void 0 ? false : _ref$lazy,
+    _ref$lazyPreloadDista = _ref.lazyPreloadDistance,
+    lazyPreloadDistance = _ref$lazyPreloadDista === void 0 ? 1 : _ref$lazyPreloadDista,
+    _ref$swipeEnabled = _ref.swipeEnabled,
+    swipeEnabled = _ref$swipeEnabled === void 0 ? true : _ref$swipeEnabled,
+    componentTestID = _ref.testID;
+  var pagerViewRef = React__default["default"].useRef(null);
+  var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
+  var selectedTabIndex = tabs.findIndex(function (item) {
+    return item.key === selectedTabKey;
+  });
+  React__default["default"].useEffect(function () {
+    var timeoutHandle = null;
+    if (selectedTabIndex !== -1) {
+      // 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$current;
+        // use no animation to prevent unexpected behavior if users select tab too quickly
+        (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 ? void 0 : _pagerViewRef$current.setPageWithoutAnimation(selectedTabIndex);
+      }, 200);
+    }
+    return function () {
+      if (timeoutHandle) {
+        clearTimeout(timeoutHandle);
+      }
+    };
+  }, [selectedTabIndex, pagerViewRef]);
+  return /*#__PURE__*/React__default["default"].createElement(TabContainer, {
+    style: containerStyle,
+    testID: componentTestID
+  }, /*#__PURE__*/React__default["default"].createElement(ScrollableTabHeader, {
+    tabs: tabs,
+    selectedIndex: selectedTabIndex,
+    onTabPress: onTabPress,
+    barStyle: barStyle,
+    insets: insets,
+    testID: componentTestID ? "".concat(componentTestID, "-tab-bar") : undefined
+  }), /*#__PURE__*/React__default["default"].createElement(ContentWrapper, {
     initialPage: selectedTabIndex,
     ref: pagerViewRef,
     onPageSelected: function onPageSelected(e) {
@@ -15330,6 +15545,151 @@ var ScrollableTab = function ScrollableTab(_ref2) {
   })));
 };
 
+var SceneView = function SceneView(_ref) {
+  var _ref$lazy = _ref.lazy,
+    lazy = _ref$lazy === void 0 ? false : _ref$lazy,
+    _ref$lazyPreloadDista = _ref.lazyPreloadDistance,
+    lazyPreloadDistance = _ref$lazyPreloadDista === void 0 ? 1 : _ref$lazyPreloadDista,
+    children = _ref.children,
+    index = _ref.index,
+    selectedIndex = _ref.selectedIndex,
+    focused = _ref.focused,
+    testID = _ref.testID;
+  var _React$useState = React__default["default"].useState(Math.abs(selectedIndex - index) > lazyPreloadDistance),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isLoading = _React$useState2[0],
+    setIsLoading = _React$useState2[1];
+  if (isLoading && Math.abs(selectedIndex - index) <= lazyPreloadDistance) {
+    // Always render the route when it becomes focused
+    setIsLoading(false);
+  }
+  if (lazy && isLoading) {
+    console.error('Lazy loading is not supported in this version of Tabs');
+  }
+  React__default["default"].useEffect(function () {
+    var timer;
+    if (!lazy && isLoading) {
+      // If lazy mode is not enabled, render the scene with a delay if not loaded already
+      // This improves the initial startup time as the scene is no longer blocking
+      timer = setTimeout(function () {
+        return setIsLoading(false);
+      }, 0);
+    }
+    return function () {
+      clearTimeout(timer);
+    };
+  }, [index, isLoading, lazy, focused]);
+  return /*#__PURE__*/React__default["default"].createElement(TabScreen, {
+    accessibilityElementsHidden: !focused,
+    importantForAccessibility: focused ? 'auto' : 'no-hide-descendants',
+    style: [{
+      flex: 1,
+      overflow: 'hidden'
+    }, focused ? reactNative.StyleSheet.absoluteFill : null],
+    testID: testID
+  }, focused || !isLoading ? children : null);
+};
+
+var TabContext = /*#__PURE__*/React__default["default"].createContext(null);
+var ScreenContext = /*#__PURE__*/React__default["default"].createContext(null);
+var useIsFocused = function useIsFocused() {
+  var context = React__default["default"].useContext(TabContext);
+  var key = React__default["default"].useContext(ScreenContext);
+  if (!context || !key) {
+    return;
+  }
+  var isFocused = context.selectedTabKey === key;
+  return isFocused;
+};
+var ScrollableTab = function ScrollableTab(_ref) {
+  var onTabPress = _ref.onTabPress,
+    selectedTabKey = _ref.selectedTabKey,
+    tabs = _ref.tabs,
+    containerStyle = _ref.containerStyle,
+    barStyle = _ref.barStyle,
+    _ref$lazy = _ref.lazy,
+    lazy = _ref$lazy === void 0 ? false : _ref$lazy,
+    _ref$lazyPreloadDista = _ref.lazyPreloadDistance,
+    lazyPreloadDistance = _ref$lazyPreloadDista === void 0 ? 1 : _ref$lazyPreloadDista,
+    _ref$swipeEnabled = _ref.swipeEnabled,
+    swipeEnabled = _ref$swipeEnabled === void 0 ? true : _ref$swipeEnabled,
+    componentTestID = _ref.testID;
+  var pagerViewRef = React__default["default"].useRef(null);
+  var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
+  var selectedTabIndex = tabs.findIndex(function (item) {
+    return item.key === selectedTabKey;
+  });
+  React__default["default"].useEffect(function () {
+    var timeoutHandle = null;
+    if (selectedTabIndex !== -1) {
+      // 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$current;
+        // use no animation to prevent unexpected behavior if users select tab too quickly
+        (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 ? void 0 : _pagerViewRef$current.setPageWithoutAnimation(selectedTabIndex);
+      }, 200);
+    }
+    return function () {
+      if (timeoutHandle) {
+        clearTimeout(timeoutHandle);
+      }
+    };
+  }, [selectedTabIndex, pagerViewRef]);
+  var indexRef = React__default["default"].useRef(selectedTabIndex);
+  var tabContextProviderValue = React__default["default"].useMemo(function () {
+    return {
+      selectedTabKey: selectedTabKey
+    };
+  }, [selectedTabKey]);
+  return /*#__PURE__*/React__default["default"].createElement(TabContext.Provider, {
+    value: tabContextProviderValue
+  }, /*#__PURE__*/React__default["default"].createElement(TabContainer, {
+    style: containerStyle,
+    testID: componentTestID
+  }, /*#__PURE__*/React__default["default"].createElement(ScrollableTabHeader, {
+    tabs: tabs,
+    selectedIndex: selectedTabIndex,
+    onTabPress: onTabPress,
+    barStyle: barStyle,
+    insets: insets,
+    testID: componentTestID ? "".concat(componentTestID, "-tab-bar") : undefined
+  }), /*#__PURE__*/React__default["default"].createElement(ContentWrapper, {
+    initialPage: selectedTabIndex,
+    ref: pagerViewRef,
+    onPageSelected: function onPageSelected(e) {
+      var index = e.nativeEvent.position;
+      var selectedItem = tabs[index];
+      if (selectedItem) {
+        setTimeout(function () {
+          onTabPress(selectedItem.key);
+        });
+      }
+      indexRef.current = index;
+    },
+    scrollEnabled: swipeEnabled
+  }, tabs.map(function (tab, index) {
+    var key = tab.key,
+      component = tab.component,
+      testID = tab.testID;
+    return /*#__PURE__*/React__default["default"].createElement(ScreenContext.Provider, {
+      value: key
+    }, /*#__PURE__*/React__default["default"].createElement(SceneView, {
+      testID: testID,
+      key: key,
+      index: index,
+      selectedIndex: indexRef.current,
+      lazy: lazy,
+      lazyPreloadDistance: lazyPreloadDistance,
+      focused: selectedTabKey === key
+    }, component));
+  }))));
+};
+
+var ScrollableTabsV2 = Object.assign(ScrollableTab, {
+  useIsFocused: useIsFocused
+});
+
 var getTabItem = function getTabItem(_ref) {
   var item = _ref.item,
     color = _ref.color,
@@ -15456,12 +15816,13 @@ var Tabs = function Tabs(_ref2) {
   })));
 };
 var index$2 = Object.assign(Tabs, {
-  Scroll: ScrollableTab
+  Scroll: ScrollableTab$1,
+  ScrollV2: ScrollableTabsV2
 });
 
 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")]
   };
@@ -32311,7 +32672,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
   var isEmptyValue = React.useMemo(function () {
     return lib.exports.isEmptyContent(value);
   }, [value]);
-  var variant = React.useMemo(function () {
+  var state = React.useMemo(function () {
     if (error) {
       return 'error';
     }
@@ -32419,25 +32780,26 @@ var RichTextEditor = function RichTextEditor(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(StyledContainer$4, {
     testID: testID
   }, /*#__PURE__*/React__default["default"].createElement(StyledTextInputContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledBorderBackDrop, {
-    themeVariant: variant,
+    themeState: state,
     themeFocused: isFocused
   }), (isFocused || label && !isEmptyValue) && /*#__PURE__*/React__default["default"].createElement(StyledLabelContainer, {
     pointerEvents: "none"
   }, required && /*#__PURE__*/React__default["default"].createElement(StyledAsteriskLabel, {
-    themeVariant: variant,
+    themeState: state,
     fontSize: "small"
   }, "*"), !!label && /*#__PURE__*/React__default["default"].createElement(StyledLabel, {
     testID: "input-label",
     fontSize: "small",
-    themeVariant: variant
+    themeState: state
   }, label)), /*#__PURE__*/React__default["default"].createElement(StyledTextInputAndLabelContainer, null, !isFocused && isEmptyValue && /*#__PURE__*/React__default["default"].createElement(StyledLabelContainerInsideTextInput, {
+    themeVariant: "text",
     pointerEvents: "none"
   }, required && /*#__PURE__*/React__default["default"].createElement(StyledAsteriskLabelInsideTextInput, {
-    themeVariant: variant
+    themeState: state
   }, "*"), !!label && /*#__PURE__*/React__default["default"].createElement(StyledLabelInsideTextInput, {
     testID: "input-label",
     fontSize: "medium",
-    themeVariant: variant
+    themeState: state
   }, label)), /*#__PURE__*/React__default["default"].createElement(reactNative.TouchableWithoutFeedback, {
     onPress: function onPress(e) {
       return e.stopPropagation();
@@ -32510,6 +32872,7 @@ exports.Select = index$4;
 exports.Skeleton = Skeleton;
 exports.Slider = Slider;
 exports.Spinner = Spinner;
+exports.Success = Success;
 exports.Swipeable = index$5;
 exports.Switch = index$3;
 exports.Tabs = index$2;