@hero-design/rn 8.71.0 → 8.72.0

package/es/index.js

@@ -2307,7 +2307,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     success: theme.colors.onSuccessSurface,
     warning: theme.colors.onWarningSurface,
     archived: theme.colors.onArchivedSurface,
-    text: theme.colors.onDarkGlobalSurface
+    text: theme.colors.onDarkGlobalSurface,
+    border: theme.colors.defaultGlobalSurface
   };
   var fonts = {
     medium: theme.fonts.neutral.regular,
@@ -2315,7 +2316,11 @@ var getBadgeTheme = function getBadgeTheme(theme) {
   };
   var fontSizes = {
     medium: theme.fontSizes.small,
-    small: 8
+    small: 8,
+    icon: {
+      medium: theme.fontSizes.small,
+      small: 8
+    }
   };
   var lineHeights = {
     medium: theme.lineHeights.small,
@@ -2333,6 +2338,9 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     statusHeight: theme.sizes.small,
     statusWidth: theme.sizes.small
   };
+  var borderWidths = {
+    "default": theme.borderWidths.medium
+  };
   var space = {
     medium: {
       horizontalPadding: theme.space.small
@@ -2349,7 +2357,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     fontSizes: fontSizes,
     sizes: sizes,
     space: space,
-    lineHeights: lineHeights
+    lineHeights: lineHeights,
+    borderWidths: borderWidths
   };
 };
 
@@ -2454,7 +2463,7 @@ var getButtonTheme = function getButtonTheme(theme) {
   };
   var colors = {
     primary: theme.colors.primary,
-    secondary: theme.colors.secondary,
+    secondary: theme.colors.mutedOnDefaultGlobalSurface,
     danger: theme.colors.onErrorSurface,
     defaultText: theme.colors.onDefaultGlobalSurface,
     disabledText: theme.colors.disabledOnDefaultGlobalSurface,
@@ -2471,7 +2480,7 @@ var getButtonTheme = function getButtonTheme(theme) {
       outlinedSecondary: theme.colors.highlightedSurface,
       outlineDanger: theme.colors.errorSurface,
       textPrimary: theme.colors.highlightedSurface,
-      textSecondary: theme.colors.highlightedSurface,
+      textSecondary: theme.colors.neutralGlobalSurface,
       textDanger: theme.colors.errorSurface
     }
   };
@@ -2838,7 +2847,9 @@ var getFABTheme = function getFABTheme(theme) {
     width: theme.sizes.xxxxxlarge,
     height: theme.sizes.xxxxxlarge,
     iconContainerWidth: theme.sizes.large,
-    iconContainerHeight: theme.sizes.large
+    iconContainerHeight: theme.sizes.large,
+    fabPairHeight: theme.sizes.xxxlarge,
+    fabPairIconOnlyWidth: theme.sizes.xxxlarge
   };
   var fonts = {
     actionItemText: theme.fonts.neutral.regular,
@@ -2868,7 +2879,8 @@ var getFABTheme = function getFABTheme(theme) {
     buttonMarginTop: theme.space.large,
     buttonMarginRight: theme.space.large,
     containerPadding: theme.space.large - theme.space.xsmall,
-    titleMarginHorizontal: theme.space.small
+    titleMarginHorizontal: theme.space.small,
+    fabPairMarginRight: theme.space.small
   };
   var radii = {
     actionItem: theme.radii.rounded
@@ -3355,9 +3367,9 @@ var getSwitchTheme = function getSwitchTheme(theme) {
       checked: theme.colors.primary,
       unchecked: theme.colors.inactiveOnDefaultGlobalSurface,
       'disabled-checked': theme.colors.highlightedSurface,
-      'disabled-unchecked': theme.colors.disabledOnDefaultGlobalSurface
+      'disabled-unchecked': theme.colors.mutedOnDefaultGlobalSurface
     },
-    thumb: theme.colors.onSecondary,
+    thumb: theme.colors.onDarkGlobalSurface,
     selector: {
       background: theme.colors.defaultGlobalSurface,
       textBackground: theme.colors.decorativePrimarySurface
@@ -3628,7 +3640,7 @@ var getToolbarTheme = function getToolbarTheme(theme) {
     background: theme.colors.defaultGlobalSurface,
     border: theme.colors.secondaryOutline,
     primary: theme.colors.primary,
-    secondary: theme.colors.secondary,
+    secondary: theme.colors.mutedOnDefaultGlobalSurface,
     info: theme.colors.info,
     success: theme.colors.success,
     danger: theme.colors.warning,
@@ -3832,15 +3844,32 @@ var getTypographyTheme = function getTypographyTheme(theme) {
 
 var getSearchTheme = function getSearchTheme(theme) {
   var colors = {
-    containerBackground: theme.colors.neutralGlobalSurface,
-    surfixBackground: theme.colors.defaultGlobalSurface,
+    basic: {
+      containerBackground: theme.colors.neutralGlobalSurface,
+      border: theme.colors.neutralGlobalSurface,
+      focusedBorder: theme.colors.primaryOutline
+    },
+    reversed: {
+      containerBackground: theme.colors.defaultGlobalSurface,
+      border: theme.colors.secondaryOutline,
+      focusedBorder: theme.colors.primaryOutline
+    },
+    suffixBackground: theme.colors.defaultGlobalSurface,
     text: theme.colors.onDefaultGlobalSurface,
-    borders: theme.colors.primaryOutline
+    shadow: theme.colors.primaryOutline
+  };
+  var shadows = {
+    offset: theme.shadows["default"].shadowOffset,
+    opacity: theme.shadows["default"].shadowOpacity,
+    radius: theme.shadows["default"].shadowRadius,
+    elevation: theme.shadows["default"].elevation,
+    color: theme.shadows["default"].shadowColor
   };
   var space = {
     containerHorizontalPadding: theme.space.small,
     containerVerticalPadding: theme.space.small,
     inputHorizontalMargin: theme.space.small,
+    inputVerticalPadding: theme.space.xxsmall,
     prefixHorizontalPadding: theme.space.xsmall,
     surfixPadding: theme.space.small,
     badgeTop: -theme.space.xxsmall,
@@ -3854,8 +3883,14 @@ var getSearchTheme = function getSearchTheme(theme) {
   };
   var borderWidths = {
     container: {
-      normal: theme.borderWidths.base,
-      focused: theme.borderWidths.medium
+      basic: {
+        normal: theme.borderWidths.medium,
+        focused: theme.borderWidths.medium
+      },
+      reversed: {
+        normal: theme.borderWidths.base,
+        focused: theme.borderWidths.medium
+      }
     }
   };
   var radii = {
@@ -3872,7 +3907,8 @@ var getSearchTheme = function getSearchTheme(theme) {
     fontSizes: fontSizes,
     borderWidths: borderWidths,
     radii: radii,
-    sizes: sizes
+    sizes: sizes,
+    shadows: shadows
   };
 };
 
@@ -7005,7 +7041,7 @@ var StyledText$3 = index$9(Text$1)(function (_ref) {
   });
 });
 
-var _excluded$F = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
+var _excluded$H = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
 var Text = function Text(_ref) {
   var children = _ref.children,
     _ref$fontSize = _ref.fontSize,
@@ -7018,7 +7054,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$F);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$H);
   useDeprecation('Typography.Text is deprecated and will be removed in the next major release, please refer to https://design.employmenthero.com/mobile/Components/typography for the appropriate alternatives.');
   return /*#__PURE__*/React__default.createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
@@ -7048,7 +7084,7 @@ var StyledCaption = index$9(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$E = ["children", "fontWeight", "intent", "allowFontScaling"];
+var _excluded$G = ["children", "fontWeight", "intent", "allowFontScaling"];
 var Caption = function Caption(_ref) {
   var children = _ref.children,
     _ref$fontWeight = _ref.fontWeight,
@@ -7057,7 +7093,7 @@ var Caption = function Caption(_ref) {
     intent = _ref$intent === void 0 ? 'body' : _ref$intent,
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$E);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$G);
   return /*#__PURE__*/React__default.createElement(StyledCaption, _extends$1({}, nativeProps, {
     themeFontWeight: fontWeight,
     themeIntent: intent,
@@ -7065,7 +7101,7 @@ var Caption = function Caption(_ref) {
   }), children);
 };
 
-var StyledLabel = index$9(Text$1)(function (_ref) {
+var StyledLabel$1 = index$9(Text$1)(function (_ref) {
   var themeIntent = _ref.themeIntent,
     theme = _ref.theme;
   return {
@@ -7076,15 +7112,15 @@ var StyledLabel = index$9(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$D = ["children", "intent", "allowFontScaling"];
+var _excluded$F = ["children", "intent", "allowFontScaling"];
 var Label = function Label(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'body' : _ref$intent,
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$D);
-  return /*#__PURE__*/React__default.createElement(StyledLabel, _extends$1({}, nativeProps, {
+    nativeProps = _objectWithoutProperties(_ref, _excluded$F);
+  return /*#__PURE__*/React__default.createElement(StyledLabel$1, _extends$1({}, nativeProps, {
     themeIntent: intent,
     allowFontScaling: allowFontScaling
   }), children);
@@ -7104,7 +7140,7 @@ var StyledTitle$1 = index$9(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$C = ["children", "intent", "allowFontScaling", "level", "typeface"];
+var _excluded$E = ["children", "intent", "allowFontScaling", "level", "typeface"];
 var Title = function Title(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -7115,7 +7151,7 @@ var Title = function Title(_ref) {
     level = _ref$level === void 0 ? 'h1' : _ref$level,
     _ref$typeface = _ref.typeface,
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$C);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$E);
   return /*#__PURE__*/React__default.createElement(StyledTitle$1, _extends$1({}, nativeProps, {
     themeLevel: level,
     themeTypeface: typeface,
@@ -7150,7 +7186,7 @@ var StyledBody$1 = index$9(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$B = ["children", "intent", "allowFontScaling", "typeface", "variant"];
+var _excluded$D = ["children", "intent", "allowFontScaling", "typeface", "variant"];
 var Body = function Body(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -7161,7 +7197,7 @@ var Body = function Body(_ref) {
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'regular' : _ref$variant,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$B);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$D);
   return /*#__PURE__*/React__default.createElement(StyledBody$1, _extends$1({}, nativeProps, {
     themeTypeface: typeface,
     themeIntent: intent,
@@ -7728,10 +7764,10 @@ var StyledHeroIcon = index$9(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$A = ["style"];
+var _excluded$C = ["style"];
 var AnimatedIcon = function AnimatedIcon(_ref) {
   var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$A);
+    otherProps = _objectWithoutProperties(_ref, _excluded$C);
   var rotateAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(rotateAnimation.current, {
@@ -7829,14 +7865,14 @@ var AccordionItem = function AccordionItem(_ref) {
     variant: "regular-bold"
   }, header) : header, /*#__PURE__*/React__default.createElement(Icon, {
     icon: open ? 'arrow-up' : 'arrow-down',
-    intent: "secondary",
+    intent: "primary",
     size: "small"
   })), /*#__PURE__*/React__default.createElement(StyledCollapse, {
     open: open
   }, content));
 };
 
-var _excluded$z = ["key"];
+var _excluded$B = ["key"];
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
     activeItemKey = _ref.activeItemKey,
@@ -7857,7 +7893,7 @@ var Accordion = function Accordion(_ref) {
     testID: testID
   }, items.map(function (_ref2, index) {
     var key = _ref2.key,
-      props = _objectWithoutProperties(_ref2, _excluded$z);
+      props = _objectWithoutProperties(_ref2, _excluded$B);
     var open = _activeItemKey === key;
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: key
@@ -7892,7 +7928,7 @@ var IconContainer$1 = index$9(View)(function (_ref2) {
     paddingLeft: theme.__hd__.alert.space.iconLeftPadding
   };
 });
-var StyledIcon$1 = index$9(Icon)(function (_ref3) {
+var StyledIcon$2 = index$9(Icon)(function (_ref3) {
   var theme = _ref3.theme,
     themeIntent = _ref3.themeIntent;
   return {
@@ -7951,7 +7987,7 @@ var AlertIcon = function AlertIcon(_ref) {
     intent = _ref.intent;
   return icon ? /*#__PURE__*/React__default.createElement(IconContainer$1, {
     testID: "alert-left-icon"
-  }, /*#__PURE__*/React__default.createElement(StyledIcon$1, {
+  }, /*#__PURE__*/React__default.createElement(StyledIcon$2, {
     icon: icon,
     size: "small",
     themeIntent: intent
@@ -7992,7 +8028,7 @@ var Alert = function Alert(_ref2) {
   }, typeof actionLabel === 'string' ? /*#__PURE__*/React__default.createElement(StyledBody, {
     variant: "small-bold",
     themeIntent: intent
-  }, actionLabel) : /*#__PURE__*/React__default.createElement(StyledIcon$1, {
+  }, actionLabel) : /*#__PURE__*/React__default.createElement(StyledIcon$2, {
     icon: "cancel",
     size: "small",
     themeIntent: intent
@@ -8351,7 +8387,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$y = ["theme"];
+var _excluded$A = ["theme"];
 var getThemeValue = function getThemeValue(theme, key, props) {
   var propConfig = config[key];
   var propValue = props[key];
@@ -8378,18 +8414,18 @@ var mapStylePropToThemeValue = function mapStylePropToThemeValue(theme, props) {
 var configKeys = Object.keys(config);
 var StyledBox = index$9(View)(function (_ref5) {
   var theme = _ref5.theme,
-    otherProps = _objectWithoutProperties(_ref5, _excluded$y);
+    otherProps = _objectWithoutProperties(_ref5, _excluded$A);
   var styleProps = pick(configKeys, otherProps);
   var flexProps = pick(_toConsumableArray(flexPropsKey), otherProps);
   return _objectSpread2(_objectSpread2({}, mapStylePropToThemeValue(theme, styleProps)), flexProps);
 });
 
-var _excluded$x = ["children", "style", "testID"];
+var _excluded$z = ["children", "style", "testID"];
 var Box = function Box(_ref) {
   var children = _ref.children,
     style = _ref.style,
     testID = _ref.testID,
-    otherProps = _objectWithoutProperties(_ref, _excluded$x);
+    otherProps = _objectWithoutProperties(_ref, _excluded$z);
   return /*#__PURE__*/React__default.createElement(StyledBox, _extends$1({}, otherProps, {
     style: style,
     testID: testID
@@ -8570,6 +8606,7 @@ var StyledView$2 = index$9(Animated.View)(function (_ref) {
   var themeIntent = _ref.themeIntent,
     themePadding = _ref.themePadding,
     themeSize = _ref.themeSize,
+    themeVariant = _ref.themeVariant,
     theme = _ref.theme;
   return {
     height: theme.__hd__.badge.sizes[themeSize].height,
@@ -8578,7 +8615,9 @@ var StyledView$2 = index$9(Animated.View)(function (_ref) {
     justifyContent: 'center',
     backgroundColor: theme.__hd__.badge.colors[themeIntent],
     borderRadius: theme.radii.rounded,
-    paddingHorizontal: themePadding === 'wideContent' ? theme.__hd__.badge.space[themeSize].horizontalPadding : undefined
+    paddingHorizontal: themePadding === 'wideContent' ? theme.__hd__.badge.space[themeSize].horizontalPadding : undefined,
+    borderWidth: theme.__hd__.badge.borderWidths["default"],
+    borderColor: themeVariant === 'outlined' ? theme.__hd__.badge.colors.border : theme.__hd__.badge.colors[themeIntent]
   };
 });
 var StyledText$1 = index$9(Typography.Caption)(function (_ref2) {
@@ -8607,8 +8646,15 @@ var StyledStatus = index$9(Animated.View)(function (_ref3) {
     borderRadius: theme.radii.rounded
   };
 });
+var StyledIcon$1 = index$9(Icon)(function (_ref4) {
+  var themeSize = _ref4.themeSize,
+    theme = _ref4.theme;
+  return {
+    fontSize: theme.__hd__.badge.fontSizes[themeSize]
+  };
+});
 
-var _excluded$w = ["children", "visible", "intent", "style", "testID"];
+var _excluded$y = ["children", "visible", "intent", "style", "testID"];
 var Status = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
@@ -8617,7 +8663,7 @@ var Status = function Status(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$w);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$y);
   var _React$useRef = React__default.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React__default.useRef(true);
@@ -8650,7 +8696,7 @@ var Status = function Status(_ref) {
   }));
 };
 
-var _excluded$v = ["content", "visible", "max", "intent", "style", "testID", "size"];
+var _excluded$x = ["content", "visible", "max", "intent", "style", "testID", "size", "variant", "icon"];
 var DEFAULT_MAX_NUMBER = 99;
 var getPaddingState = function getPaddingState(content) {
   return content.length > 1 ? 'wideContent' : 'narrowContent';
@@ -8667,7 +8713,10 @@ var Badge = function Badge(_ref) {
     testID = _ref.testID,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$v);
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'filled' : _ref$variant,
+    icon = _ref.icon,
+    nativeProps = _objectWithoutProperties(_ref, _excluded$x);
   var _React$useRef = React__default.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React__default.useRef(true);
@@ -8683,11 +8732,18 @@ var Badge = function Badge(_ref) {
       useNativeDriver: true
     }).start();
   }, [visible, opacity]);
-  var content = typeof originalContent === 'number' && originalContent > max ? "".concat(max, "+") : String(originalContent);
+  var isIconBadge = !!icon;
+  var content = useMemo(function () {
+    if (isIconBadge) {
+      return '';
+    }
+    return typeof originalContent === 'number' && originalContent > max ? "".concat(max, "+") : String(originalContent);
+  }, [isIconBadge, originalContent, max]);
   return /*#__PURE__*/React__default.createElement(StyledView$2, _extends$1({}, nativeProps, {
     themeIntent: intent,
     themePadding: getPaddingState(content),
     themeSize: size,
+    themeVariant: variant,
     style: [{
       opacity: opacity,
       transform: [{
@@ -8698,7 +8754,11 @@ var Badge = function Badge(_ref) {
       }]
     }, style],
     testID: testID
-  }), /*#__PURE__*/React__default.createElement(StyledText$1, {
+  }), isIconBadge ? /*#__PURE__*/React__default.createElement(StyledIcon$1, {
+    icon: icon,
+    themeSize: size,
+    intent: "text-inverted"
+  }) : /*#__PURE__*/React__default.createElement(StyledText$1, {
     themeSize: size
   }, content));
 };
@@ -8757,7 +8817,7 @@ var StyledBottomBarText = index$9(Typography.Caption)(function (_ref3) {
   };
 });
 
-var _excluded$u = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$w = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
   return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
@@ -8768,7 +8828,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
     selectedTabKey = _ref.selectedTabKey,
     tabs = _ref.tabs,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$u);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$w);
   var insets = useSafeAreaInsets();
   /**
    * List of loaded tabs, tabs will be loaded when navigated to.
@@ -8854,13 +8914,13 @@ var StyledDivider = index$9(View)(function (_ref) {
   }, horizontalMargin), verticalMargin);
 });
 
-var _excluded$t = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$v = ["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$t);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$v);
   return /*#__PURE__*/React__default.createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
     themeMarginVertical: marginVertical,
@@ -9016,7 +9076,7 @@ var StyledLoadingDot = index$9(View)(function (_ref) {
   }, themeStyling());
 });
 
-var _excluded$s = ["count", "size", "testID", "themeVariant"];
+var _excluded$u = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = Animated.createAnimatedComponent(StyledLoadingDot);
 var renderDotComponent = function renderDotComponent(_ref) {
@@ -9048,7 +9108,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
     size = _ref2$size === void 0 ? 12 : _ref2$size,
     testID = _ref2.testID,
     themeVariant = _ref2.themeVariant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$s);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$u);
   var progressAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(progressAnimation.current, {
@@ -9491,11 +9551,11 @@ var Header = function Header(_ref) {
   }))) : null), showDivider ? /*#__PURE__*/React__default.createElement(Divider, null) : null);
 };
 
-var _excluded$r = ["scrollEventThrottle"];
+var _excluded$t = ["scrollEventThrottle"];
 var BottomSheetScrollView = function BottomSheetScrollView(_ref) {
   var _ref$scrollEventThrot = _ref.scrollEventThrottle,
     scrollEventThrottle = _ref$scrollEventThrot === void 0 ? 100 : _ref$scrollEventThrot,
-    props = _objectWithoutProperties(_ref, _excluded$r);
+    props = _objectWithoutProperties(_ref, _excluded$t);
   var _useContext = useContext(BottomSheetContext),
     setInternalShowDivider = _useContext.setInternalShowDivider;
   var onScrollBeginDrag = useCallback(function (e) {
@@ -12312,12 +12372,12 @@ var Indicator = index$9(View)(function (_ref2) {
   };
 });
 
-var _excluded$q = ["intent", "children"];
+var _excluded$s = ["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$q);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$s);
   return /*#__PURE__*/React__default.createElement(StyledDataCard, nativeProps, /*#__PURE__*/React__default.createElement(Indicator, {
     themeIntent: intent,
     testID: "data-card-indicator"
@@ -12336,13 +12396,13 @@ var StyledCard$1 = index$9(View)(function (_ref) {
   });
 });
 
-var _excluded$p = ["intent", "children", "variant"];
+var _excluded$r = ["intent", "children", "variant"];
 var Card = function Card(_ref) {
   var intent = _ref.intent,
     children = _ref.children,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'basic' : _ref$variant,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$p);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$r);
   return /*#__PURE__*/React__default.createElement(StyledCard$1, _extends$1({}, nativeProps, {
     themeIntent: intent,
     themeVariant: variant
@@ -12604,7 +12664,7 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 CardCarousel.displayName = 'CardCarousel';
 
-var _excluded$o = ["rounded", "size", "testID", "style"];
+var _excluded$q = ["rounded", "size", "testID", "style"];
 var Image = function Image(_ref) {
   var _ref$rounded = _ref.rounded,
     rounded = _ref$rounded === void 0 ? false : _ref$rounded,
@@ -12612,7 +12672,7 @@ var Image = function Image(_ref) {
     size = _ref$size === void 0 ? '6xlarge' : _ref$size,
     testID = _ref.testID,
     style = _ref.style,
-    imageNativeProps = _objectWithoutProperties(_ref, _excluded$o);
+    imageNativeProps = _objectWithoutProperties(_ref, _excluded$q);
   var theme = useTheme();
   var imageSize = theme.__hd__.image.sizes[size];
   return /*#__PURE__*/React__default.createElement(Image$1, _extends$1({
@@ -12746,7 +12806,7 @@ var CarouselItem = function CarouselItem(_ref) {
   }, heading), !!body && /*#__PURE__*/React__default.createElement(Typography.Body, null, body)));
 };
 
-var _excluded$n = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "testID", "pageControlPosition"];
+var _excluded$p = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "testID", "pageControlPosition"];
 function useStateFromProp(initialValue) {
   var _useState = useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
@@ -12773,7 +12833,7 @@ var Carousel = function Carousel(_ref) {
     testID = _ref.testID,
     _ref$pageControlPosit = _ref.pageControlPosition,
     pageControlPosition = _ref$pageControlPosit === void 0 ? 'top' : _ref$pageControlPosit,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$n);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$p);
   useDeprecation("shouldShowPagination prop has been deprecated", shouldShowPagination !== noop);
   useDeprecation("The use of 'pageControlPosition == bottom' has been deprecated", pageControlPosition === 'bottom');
   var theme = useTheme();
@@ -12988,7 +13048,7 @@ var StyledChipWrapper = index$9(TouchableOpacity)(function (_ref) {
   }, getShadowStyles()), getBorderStyles()), getPaddingStyles()), getBackgroundStyles());
 });
 
-var _excluded$m = ["label", "variant", "selected", "icon", "onPress", "showSelectedIcon"];
+var _excluded$o = ["label", "variant", "selected", "icon", "onPress", "showSelectedIcon"];
 var Chip = function Chip(_ref) {
   var label = _ref.label,
     _ref$variant = _ref.variant,
@@ -12999,7 +13059,7 @@ var Chip = function Chip(_ref) {
     onPress = _ref.onPress,
     _ref$showSelectedIcon = _ref.showSelectedIcon,
     showSelectedIcon = _ref$showSelectedIcon === void 0 ? true : _ref$showSelectedIcon,
-    otherProps = _objectWithoutProperties(_ref, _excluded$m);
+    otherProps = _objectWithoutProperties(_ref, _excluded$o);
   var shouldShowSelectedIcon = variant === 'outlined' && selected && showSelectedIcon;
   return /*#__PURE__*/React__default.createElement(StyledChipWrapper, _extends$1({
     onPress: onPress,
@@ -13240,7 +13300,7 @@ var StyledErrorAndMaxLengthContainer = index$9(View)(function () {
   };
 });
 
-var _excluded$l = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "hideCharacterCount", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling", "variant"];
+var _excluded$n = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "hideCharacterCount", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling", "variant"];
 var getState$2 = function getState(_ref) {
   var disabled = _ref.disabled,
     error = _ref.error,
@@ -13352,7 +13412,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     allowFontScaling = _ref8$allowFontScalin === void 0 ? false : _ref8$allowFontScalin,
     _ref8$variant = _ref8.variant,
     variant = _ref8$variant === void 0 ? 'text' : _ref8$variant,
-    nativeProps = _objectWithoutProperties(_ref8, _excluded$l);
+    nativeProps = _objectWithoutProperties(_ref8, _excluded$n);
   var displayText = getDisplayText(value, defaultValue);
   var isEmptyValue = displayText.length === 0;
   var _React$useState = React__default.useState({
@@ -13897,11 +13957,11 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
   }))));
 };
 
-var _excluded$k = ["variant"];
+var _excluded$m = ["variant"];
 var DatePicker = function DatePicker(_ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$m);
   if (variant === 'calendar') {
     return /*#__PURE__*/React__default.createElement(DatePickerCalendar, props);
   }
@@ -14455,7 +14515,7 @@ var Portal$1 = Object.assign(Portal, {
   Host: PortalHost
 });
 
-var _excluded$j = ["visible"];
+var _excluded$l = ["visible"];
 var DEFAULT_BACKDROP_OPACITY = 0.4;
 var DEFAULT_ANIMATION_CONFIG = {
   easing: Easing.inOut(Easing.cubic),
@@ -14551,7 +14611,7 @@ var Modal = /*#__PURE__*/forwardRef(function (_ref, ref) {
 var ModalWrapper = function ModalWrapper(_ref3) {
   var _ref3$visible = _ref3.visible,
     visible = _ref3$visible === void 0 ? true : _ref3$visible,
-    props = _objectWithoutProperties(_ref3, _excluded$j);
+    props = _objectWithoutProperties(_ref3, _excluded$l);
   var modalRef = useRef(null);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
@@ -14661,7 +14721,7 @@ var StyledErrorDescription = index$9(Typography.Body)(function (_ref9) {
   };
 });
 
-var _excluded$i = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"],
+var _excluded$k = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"],
   _excluded2 = ["visible", "variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"];
 var renderImage$1 = function renderImage(image) {
   if ( /*#__PURE__*/isValidElement(image)) {
@@ -14687,7 +14747,7 @@ var ErrorPage = function ErrorPage(_ref) {
     onCtaPress = _ref.onCtaPress,
     secondaryCtaText = _ref.secondaryCtaText,
     onSecondaryCtaPress = _ref.onSecondaryCtaPress,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$i);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$k);
   var showCta = ctaText && onCtaPress !== undefined;
   var showSecondaryCta = secondaryCtaText && onSecondaryCtaPress !== undefined;
   var showButtonContainer = showCta || showSecondaryCta;
@@ -14800,8 +14860,35 @@ var ErrorComponent = function ErrorComponent(_ref2) {
   }, nativeProps));
 };
 
+var StyledActionItem = index$9(TouchableHighlight)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    padding: theme.__hd__.fab.space.actionItemPadding,
+    margin: theme.__hd__.fab.space.actionItemMargin,
+    marginRight: theme.__hd__.fab.space.actionItemMarginRight,
+    backgroundColor: theme.__hd__.fab.colors.actionItemBackground,
+    borderRadius: theme.__hd__.fab.radii.actionItem,
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-end',
+    overflow: 'hidden'
+  };
+});
+var StyledActionItemText = index$9(Typography.Body)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    color: theme.__hd__.fab.colors.actionItemText
+  };
+});
+var StyledIcon = index$9(Icon)(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    color: theme.__hd__.fab.colors.actionItemText
+  };
+});
+
 var AnimatedTouchableHighlight = Animated.createAnimatedComponent(TouchableHighlight);
-var StyledFAB$1 = index$9(AnimatedTouchableHighlight)(function (_ref) {
+var StyledFAB$2 = index$9(AnimatedTouchableHighlight)(function (_ref) {
   var theme = _ref.theme,
     themeActive = _ref.themeActive;
   return {
@@ -14848,11 +14935,52 @@ var StyledIconContainer = index$9(Box)(function (_ref4) {
   };
 });
 
-var _excluded$h = ["active"];
+var ActionItem = function ActionItem(_ref) {
+  var icon = _ref.icon,
+    title = _ref.title,
+    onPress = _ref.onPress,
+    style = _ref.style,
+    testID = _ref.testID,
+    index = _ref.index,
+    _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active;
+  var theme = useTheme();
+  var animatedValue = React__default.useRef(new Animated.Value(0));
+  var translateY = animatedValue.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [50, 0]
+  });
+  React__default.useEffect(function () {
+    Animated.spring(animatedValue.current, {
+      toValue: active ? 1 : 0,
+      useNativeDriver: Platform.OS !== 'web',
+      delay: index * 30,
+      speed: 10,
+      bounciness: 10
+    }).start();
+  }, [active, index]);
+  return /*#__PURE__*/React__default.createElement(Animated.View, {
+    style: {
+      transform: [{
+        translateY: translateY
+      }]
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledActionItem, {
+    underlayColor: theme.__hd__.fab.colors.actionItemPressedBackground,
+    style: style,
+    onPress: onPress,
+    testID: testID
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledIconContainer, null, /*#__PURE__*/React__default.createElement(StyledIcon, {
+    size: "xsmall",
+    icon: icon
+  })), /*#__PURE__*/React__default.createElement(StyledActionItemText, null, title))));
+};
+
+var _excluded$j = ["active"];
 var AnimatedIcons = Animated.createAnimatedComponent(StyledFABIcon);
 var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
   var active = _ref.active,
-    iconProps = _objectWithoutProperties(_ref, _excluded$h);
+    iconProps = _objectWithoutProperties(_ref, _excluded$j);
   var rotateAnimation = useRef(new Animated.Value(active ? 1 : 0));
   useEffect(function () {
     var animation = Animated.spring(rotateAnimation.current, {
@@ -14892,13 +15020,15 @@ var IconOnlyContent = function IconOnlyContent(_ref) {
     return /*#__PURE__*/React__default.createElement(StyledIconContainer, null, /*#__PURE__*/React__default.createElement(AnimatedFABIcon, {
       active: active,
       icon: icon,
-      testID: "animated-fab-icon"
+      testID: "animated-fab-icon",
+      size: "xsmall"
     }));
   }
-  return /*#__PURE__*/React__default.createElement(StyledFABIcon, {
+  return /*#__PURE__*/React__default.createElement(StyledIconContainer, null, /*#__PURE__*/React__default.createElement(StyledFABIcon, {
+    size: "xsmall",
     icon: icon,
     testID: "styled-fab-icon"
-  });
+  }));
 };
 var IconWithTextContent = function IconWithTextContent(_ref2) {
   var icon = _ref2.icon,
@@ -14996,7 +15126,7 @@ var FAB$1 = /*#__PURE__*/forwardRef(function (_ref3, ref) {
       }
     };
   }, []);
-  return /*#__PURE__*/React__default.createElement(StyledFAB$1, {
+  return /*#__PURE__*/React__default.createElement(StyledFAB$2, {
     onLayout: function onLayout(event) {
       return !hasSetButtonWidth && !active && setButtonWidth(event.nativeEvent.layout.width);
     },
@@ -15032,74 +15162,6 @@ var FAB$1 = /*#__PURE__*/forwardRef(function (_ref3, ref) {
 });
 FAB$1.displayName = 'FAB';
 
-var StyledActionItem = index$9(TouchableHighlight)(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    padding: theme.__hd__.fab.space.actionItemPadding,
-    margin: theme.__hd__.fab.space.actionItemMargin,
-    marginRight: theme.__hd__.fab.space.actionItemMarginRight,
-    backgroundColor: theme.__hd__.fab.colors.actionItemBackground,
-    borderRadius: theme.__hd__.fab.radii.actionItem,
-    flexDirection: 'row',
-    alignItems: 'center',
-    alignSelf: 'flex-end',
-    overflow: 'hidden'
-  };
-});
-var StyledActionItemText = index$9(Typography.Body)(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    color: theme.__hd__.fab.colors.actionItemText
-  };
-});
-var StyledIcon = index$9(Icon)(function (_ref3) {
-  var theme = _ref3.theme;
-  return {
-    color: theme.__hd__.fab.colors.actionItemText
-  };
-});
-
-var ActionItem = function ActionItem(_ref) {
-  var icon = _ref.icon,
-    title = _ref.title,
-    onPress = _ref.onPress,
-    style = _ref.style,
-    testID = _ref.testID,
-    index = _ref.index,
-    _ref$active = _ref.active,
-    active = _ref$active === void 0 ? false : _ref$active;
-  var theme = useTheme();
-  var animatedValue = React__default.useRef(new Animated.Value(0));
-  var translateY = animatedValue.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: [50, 0]
-  });
-  React__default.useEffect(function () {
-    Animated.spring(animatedValue.current, {
-      toValue: active ? 1 : 0,
-      useNativeDriver: Platform.OS !== 'web',
-      delay: index * 30,
-      speed: 10,
-      bounciness: 10
-    }).start();
-  }, [active, index]);
-  return /*#__PURE__*/React__default.createElement(Animated.View, {
-    style: {
-      transform: [{
-        translateY: translateY
-      }]
-    }
-  }, /*#__PURE__*/React__default.createElement(StyledActionItem, {
-    underlayColor: theme.__hd__.fab.colors.actionItemPressedBackground,
-    style: style,
-    onPress: onPress,
-    testID: testID
-  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledIconContainer, null, /*#__PURE__*/React__default.createElement(StyledIcon, {
-    size: "xsmall",
-    icon: icon
-  })), /*#__PURE__*/React__default.createElement(StyledActionItemText, null, title))));
-};
-
 var StyledContainer$3 = index$9(View)({
   position: 'absolute',
   left: 0,
@@ -15123,7 +15185,7 @@ var StyledActionGroupContainer = index$9(Animated.View)({
   justifyContent: 'flex-end',
   width: '70%'
 });
-var StyledFAB = index$9(FAB$1)(function (_ref) {
+var StyledFAB$1 = index$9(FAB$1)(function (_ref) {
   var theme = _ref.theme;
   return {
     marginRight: theme.__hd__.fab.space.buttonMarginRight,
@@ -15200,7 +15262,7 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
     testID: testID,
     pointerEvents: "box-none",
     style: style
-  }, /*#__PURE__*/React__default.createElement(Animated.View, null, /*#__PURE__*/React__default.createElement(StyledFAB, {
+  }, /*#__PURE__*/React__default.createElement(Animated.View, null, /*#__PURE__*/React__default.createElement(StyledFAB$1, {
     key: "fab",
     testID: "fab",
     icon: fabIcon,
@@ -15238,7 +15300,7 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
       index: active ? index : items.length - index,
       active: active
     }));
-  }))), active && /*#__PURE__*/React__default.createElement(StyledFAB
+  }))), active && /*#__PURE__*/React__default.createElement(StyledFAB$1
   // This FAB is moved up a bit compared to the original FAB,
   // set marginBottom to negative value to compensate for it
   , {
@@ -15256,8 +15318,51 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 ActionGroup.displayName = 'FAB.ActionGroup';
 
+var StyledFABPairWrapper = index$9(Box)({
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+var StyledFAB = index$9(FAB$1)(function (_ref) {
+  var theme = _ref.theme,
+    _ref$iconOnly = _ref.iconOnly,
+    iconOnly = _ref$iconOnly === void 0 ? false : _ref$iconOnly,
+    _ref$isLast = _ref.isLast,
+    isLast = _ref$isLast === void 0 ? false : _ref$isLast;
+  return {
+    height: theme.__hd__.fab.sizes.fabPairHeight,
+    width: iconOnly ? theme.__hd__.fab.sizes.fabPairIconOnlyWidth : undefined,
+    marginRight: isLast ? undefined : theme.__hd__.fab.space.fabPairMarginRight
+  };
+});
+
+var _excluded$i = ["fabConfig", "onCancel"];
+var Pair = function Pair(_ref) {
+  var fabConfig = _ref.fabConfig,
+    onCancel = _ref.onCancel,
+    props = _objectWithoutProperties(_ref, _excluded$i);
+  var icon = fabConfig.icon,
+    title = fabConfig.title,
+    onPress = fabConfig.onPress,
+    testID = fabConfig.testID;
+  return /*#__PURE__*/React__default.createElement(StyledFABPairWrapper, props, /*#__PURE__*/React__default.createElement(StyledFAB, {
+    icon: "cancel",
+    onPress: onCancel,
+    testID: "fab-pair-cancel",
+    iconOnly: true
+  }), /*#__PURE__*/React__default.createElement(StyledFAB, {
+    icon: icon,
+    title: title,
+    onPress: onPress,
+    testID: testID,
+    iconOnly: !title,
+    isLast: true
+  }));
+};
+
 var FAB = Object.assign(FAB$1, {
-  ActionGroup: ActionGroup
+  ActionGroup: ActionGroup,
+  Pair: Pair
 });
 
 var ToastContainerWrapper = index$9(View)(function (_ref) {
@@ -16101,7 +16206,7 @@ var StyledStrokeEnd = index$9(View)(function (_ref6) {
   };
 });
 
-var _excluded$g = ["value", "renderValue", "intent", "style", "testID"];
+var _excluded$h = ["value", "renderValue", "intent", "style", "testID"];
 var HalfCircle = function HalfCircle(_ref) {
   var type = _ref.type,
     themeIntent = _ref.themeIntent;
@@ -16122,7 +16227,7 @@ var ProgressCircle = function ProgressCircle(_ref2) {
     intent = _ref2$intent === void 0 ? 'primary' : _ref2$intent,
     style = _ref2.style,
     testID = _ref2.testID,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$g);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$h);
   var theme = useTheme$1();
   var radius = theme.__hd__.progress.sizes.circleDiameter / 2;
   var progressAnimatedValue = useRef(new Animated.Value(0));
@@ -16238,14 +16343,14 @@ var StyledInner = index$9(Animated.View)(function (_ref2) {
   };
 });
 
-var _excluded$f = ["value", "intent", "style", "testID"];
+var _excluded$g = ["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$f);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$g);
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     width = _useState2[0],
@@ -16319,12 +16424,13 @@ var StyledSingleStepContainer = index$9(Box)(function (_ref2) {
   };
 });
 var StyledSingleStep = index$9(Box)(function (_ref3) {
-  var theme = _ref3.theme;
+  var theme = _ref3.theme,
+    themeState = _ref3.themeState;
   return {
     height: theme.__hd__.progress.sizes.stepHeight,
     borderRadius: theme.__hd__.progress.radii["default"],
     backgroundColor: theme.__hd__.progress.colors.step.complete,
-    width: '70%',
+    width: themeState === 'complete' ? '100%' : '70%',
     position: 'absolute',
     top: 0,
     left: 0,
@@ -16333,7 +16439,7 @@ var StyledSingleStep = index$9(Box)(function (_ref3) {
   };
 });
 
-var _excluded$e = ["steps", "current", "onLayout"];
+var _excluded$f = ["steps", "current", "onLayout"];
 var getStepState = function getStepState(current, index) {
   if (index < current) {
     return 'complete';
@@ -16347,7 +16453,7 @@ var ProgressStep = function ProgressStep(_ref) {
   var steps = _ref.steps,
     current = _ref.current,
     onLayout = _ref.onLayout,
-    props = _objectWithoutProperties(_ref, _excluded$e);
+    props = _objectWithoutProperties(_ref, _excluded$f);
   var theme = useTheme$1();
   var _React$useState = React__default.useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -16366,7 +16472,9 @@ var ProgressStep = function ProgressStep(_ref) {
     return width;
   }, [containerWidth, steps, theme]);
   if (steps === 1) {
-    return /*#__PURE__*/React__default.createElement(StyledSingleStepContainer, props, /*#__PURE__*/React__default.createElement(StyledSingleStep, null));
+    return /*#__PURE__*/React__default.createElement(StyledSingleStepContainer, props, /*#__PURE__*/React__default.createElement(StyledSingleStep, {
+      themeState: current >= steps ? 'complete' : 'incomplete'
+    }));
   }
   return /*#__PURE__*/React__default.createElement(StyledStepContainer, _extends$1({}, props, {
     onLayout: onContainerLayout
@@ -16526,14 +16634,14 @@ var AnimatedSpinner = function AnimatedSpinner(_ref) {
   }, dotProps))));
 };
 
-var _excluded$d = ["testID", "size", "intent"];
+var _excluded$e = ["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$d);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$e);
   return /*#__PURE__*/React__default.createElement(StyledView$1, nativeProps, /*#__PURE__*/React__default.createElement(StyledSpinnerContainer, {
     testID: testID
   }, /*#__PURE__*/React__default.createElement(AnimatedSpinner, {
@@ -16566,7 +16674,7 @@ var SwipeableAction = function SwipeableAction(_ref) {
   }, children);
 };
 
-var _excluded$c = ["children", "state", "onStateChange", "leftActions", "leftActionsWidth", "rightActions", "rightActionsWidth", "variant"];
+var _excluded$d = ["children", "state", "onStateChange", "leftActions", "leftActionsWidth", "rightActions", "rightActionsWidth", "variant"];
 var renderActions = function renderActions(actions, width, progress, direction) {
   var trans = progress.interpolate({
     inputRange: [0, 1],
@@ -16595,7 +16703,7 @@ var Swipeable = function Swipeable(_ref) {
     rightActionsWidth = _ref.rightActionsWidth,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'card' : _ref$variant,
-    swipeableProps = _objectWithoutProperties(_ref, _excluded$c);
+    swipeableProps = _objectWithoutProperties(_ref, _excluded$d);
   var theme = useTheme();
   var _useWindowDimensions = useWindowDimensions(),
     width = _useWindowDimensions.width;
@@ -16946,7 +17054,7 @@ var StyledSectionList = index$9(SectionList)(function (_ref4) {
   };
 });
 
-var _excluded$b = ["keyExtractor", "loading", "onEndReached", "onQueryChange", "sections", "renderItem", "sectionListRef"];
+var _excluded$c = ["keyExtractor", "loading", "onEndReached", "onQueryChange", "sections", "renderItem", "sectionListRef"];
 var BaseOptionList = function BaseOptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -16955,7 +17063,7 @@ var BaseOptionList = function BaseOptionList(_ref) {
     sections = _ref.sections,
     renderItem = _ref.renderItem,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$b);
+    rest = _objectWithoutProperties(_ref, _excluded$c);
   var theme = useTheme$1();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -17025,7 +17133,7 @@ var Option$2 = function Option(_ref) {
   return highlighted === true ? /*#__PURE__*/React__default.createElement(List.Item, props) : /*#__PURE__*/React__default.createElement(List.BasicItem, props);
 };
 
-var _excluded$a = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
+var _excluded$b = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
 var OptionList$1 = function OptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -17036,7 +17144,7 @@ var OptionList$1 = function OptionList(_ref) {
     renderOption = _ref.renderOption,
     value = _ref.value,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$a);
+    rest = _objectWithoutProperties(_ref, _excluded$b);
   var renderItem = function renderItem(info) {
     var item = info.item;
     var selected = value.includes(info.item.value);
@@ -17227,7 +17335,7 @@ var StyledOptionList = index$9(BaseOptionList)(function (_ref) {
   };
 });
 
-var _excluded$9 = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
+var _excluded$a = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
 var OptionList = function OptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -17238,7 +17346,7 @@ var OptionList = function OptionList(_ref) {
     renderOption = _ref.renderOption,
     value = _ref.value,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$9);
+    rest = _objectWithoutProperties(_ref, _excluded$a);
   var renderItem = function renderItem(info) {
     var item = info.item;
     var selected = item.value === value;
@@ -17406,7 +17514,7 @@ var StyledGradientContainer = index$9(Box)(function (_ref2) {
   };
 });
 
-var _excluded$8 = ["intent", "variant", "style", "onLayout"];
+var _excluded$9 = ["intent", "variant", "style", "onLayout"];
 var AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
 var gradientPositions = {
   start: {
@@ -17438,7 +17546,7 @@ var Skeleton = function Skeleton(_ref) {
     variant = _ref$variant === void 0 ? 'rounded' : _ref$variant,
     style = _ref.style,
     onLayout = _ref.onLayout,
-    props = _objectWithoutProperties(_ref, _excluded$8);
+    props = _objectWithoutProperties(_ref, _excluded$9);
   var theme = useTheme();
   var colors = useMemo(function () {
     return getGradientColors(theme, intent);
@@ -17570,7 +17678,7 @@ var StyledSuccessModal = index$9(ModalWrapper)({
   width: '100%'
 });
 
-var _excluded$7 = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"];
+var _excluded$8 = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"];
 var renderImage = function renderImage(image) {
   if ( /*#__PURE__*/isValidElement(image)) {
     return /*#__PURE__*/React__default.cloneElement(image, {
@@ -17596,7 +17704,7 @@ var SuccessPage = function SuccessPage(_ref) {
     onCtaPress = _ref$onCtaPress === void 0 ? noop$1 : _ref$onCtaPress,
     secondaryCtaText = _ref.secondaryCtaText,
     onSecondaryCtaPress = _ref.onSecondaryCtaPress,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$7);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$8);
   var showSecondaryButton = secondaryCtaText && onSecondaryCtaPress;
   return /*#__PURE__*/React__default.createElement(StyledSuccessContainer, _extends$1({
     testID: testID,
@@ -18614,7 +18722,7 @@ var StyledText = index$9(Typography.Caption)(function (_ref2) {
   };
 });
 
-var _excluded$6 = ["content", "variant", "intent", "style", "testID"];
+var _excluded$7 = ["content", "variant", "intent", "style", "testID"];
 var Tag = function Tag(_ref) {
   var content = _ref.content,
     _ref$variant = _ref.variant,
@@ -18623,7 +18731,7 @@ var Tag = function Tag(_ref) {
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$6);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$7);
   useDeprecation("Tag's variant prop is deprecated and will be removed in the next major release. Please remove it.", variant !== undefined);
   return /*#__PURE__*/React__default.createElement(StyledView, _extends$1({}, nativeProps, {
     themeIntent: intent,
@@ -18852,6 +18960,13 @@ var IconButtonLabel = index$9(Typography.Body)(function (_ref5) {
     marginLeft: theme.__hd__.toolbar.space.iconButtonLabelMarginLeft
   };
 });
+var StyledLabel = index$9(Typography.Body)(function (_ref6) {
+  var theme = _ref6.theme,
+    intent = _ref6.intent;
+  return {
+    color: intent === 'secondary' ? theme.__hd__.toolbar.colors.secondary : theme.__hd__.typography.colors[intent]
+  };
+});
 
 var IconItem = function IconItem(_ref) {
   var icon = _ref.icon,
@@ -18886,7 +19001,7 @@ var ToolbarItemContent = function ToolbarItemContent(_ref2) {
     });
   }
   if (label) {
-    return /*#__PURE__*/React__default.createElement(Typography.Body, {
+    return /*#__PURE__*/React__default.createElement(StyledLabel, {
       variant: "regular-bold",
       intent: disabled ? 'disabled' : intent,
       allowFontScaling: false,
@@ -18941,10 +19056,10 @@ var ToolbarGroup = function ToolbarGroup(_ref) {
   }));
 };
 
-var _excluded$5 = ["children"];
+var _excluded$6 = ["children"];
 var Toolbar = function Toolbar(_ref) {
   var children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$5);
+    rest = _objectWithoutProperties(_ref, _excluded$6);
   return /*#__PURE__*/React__default.createElement(ToolbarWrapper, rest, children);
 };
 var index$1 = Object.assign(Toolbar, {
@@ -18963,7 +19078,7 @@ var StyledIconWrapper = index$9(AnimatedBox)(function (_ref) {
   };
 });
 
-var _excluded$4 = ["options", "value", "onChange", "readonly", "disabled"];
+var _excluded$5 = ["options", "value", "onChange", "readonly", "disabled"];
 var Rate = function Rate(_ref) {
   var options = _ref.options,
     value = _ref.value,
@@ -18972,7 +19087,7 @@ var Rate = function Rate(_ref) {
     readonly = _ref$readonly === void 0 ? false : _ref$readonly,
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    otherProps = _objectWithoutProperties(_ref, _excluded$4);
+    otherProps = _objectWithoutProperties(_ref, _excluded$5);
   var valueIndex = useMemo(function () {
     return options.findIndex(function (item) {
       return item.value === value;
@@ -36363,30 +36478,30 @@ function AnimatedScroller(_ref) {
   }));
 }
 
-var _excluded$3 = ["fabProps"];
+var _excluded$4 = ["fabProps"];
 var ScrollViewWithFAB = function ScrollViewWithFAB(_ref) {
   var fabProps = _ref.fabProps,
-    props = _objectWithoutProperties(_ref, _excluded$3);
+    props = _objectWithoutProperties(_ref, _excluded$4);
   return /*#__PURE__*/React__default.createElement(AnimatedScroller, {
     ScrollComponent: /*#__PURE__*/React__default.createElement(ScrollView, props),
     fabProps: fabProps
   });
 };
 
-var _excluded$2 = ["fabProps"];
+var _excluded$3 = ["fabProps"];
 function FlatListWithFAB(_ref) {
   var fabProps = _ref.fabProps,
-    props = _objectWithoutProperties(_ref, _excluded$2);
+    props = _objectWithoutProperties(_ref, _excluded$3);
   return /*#__PURE__*/React__default.createElement(AnimatedScroller, {
     ScrollComponent: /*#__PURE__*/React__default.createElement(FlatList, props),
     fabProps: fabProps
   });
 }
 
-var _excluded$1 = ["fabProps"];
+var _excluded$2 = ["fabProps"];
 function SectionListWithFAB(_ref) {
   var fabProps = _ref.fabProps,
-    props = _objectWithoutProperties(_ref, _excluded$1);
+    props = _objectWithoutProperties(_ref, _excluded$2);
   return /*#__PURE__*/React__default.createElement(AnimatedScroller, {
     ScrollComponent: /*#__PURE__*/React__default.createElement(SectionList, props),
     fabProps: fabProps
@@ -36398,20 +36513,30 @@ var StyledContainer = index$9(View)(function () {
     width: '100%'
   };
 });
+var getBorderWidth = function getBorderWidth(theme, themeFocused, themeVariant) {
+  return themeFocused ? theme.__hd__.search.borderWidths.container[themeVariant].focused : theme.__hd__.search.borderWidths.container[themeVariant].normal;
+};
 var StyledInputContainer = index$9(View)(function (_ref) {
   var theme = _ref.theme,
-    themeFocused = _ref.themeFocused;
-  return {
+    themeFocused = _ref.themeFocused,
+    themeVariant = _ref.themeVariant;
+  var borderWidth = getBorderWidth(theme, themeFocused, themeVariant);
+  return _objectSpread2({
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: theme.__hd__.search.space.containerHorizontalPadding,
-    paddingVertical: theme.__hd__.search.space.containerVerticalPadding,
-    backgroundColor: theme.__hd__.search.colors.containerBackground,
+    paddingHorizontal: theme.__hd__.search.space.containerHorizontalPadding - borderWidth,
+    paddingVertical: theme.__hd__.search.space.containerVerticalPadding - borderWidth,
+    backgroundColor: theme.__hd__.search.colors[themeVariant].containerBackground,
     height: 56,
     borderRadius: theme.__hd__.search.radii.container,
-    borderWidth: theme.__hd__.search.borderWidths.container.focused,
-    borderColor: themeFocused ? theme.__hd__.search.colors.borders : theme.__hd__.search.colors.containerBackground
-  };
+    borderWidth: borderWidth,
+    borderColor: themeFocused ? theme.__hd__.search.colors[themeVariant].focusedBorder : theme.__hd__.search.colors[themeVariant].border
+  }, themeVariant === 'reversed' && {
+    elevation: theme.__hd__.search.shadows.elevation,
+    shadowOffset: theme.__hd__.search.shadows.offset,
+    shadowOpacity: theme.__hd__.search.shadows.opacity,
+    shadowRadius: theme.__hd__.search.shadows.radius
+  });
 });
 var StyledAffixContainer = index$9(View)(function (_ref2) {
   var theme = _ref2.theme;
@@ -36427,7 +36552,7 @@ var StyledSuffixContainer = index$9(View)(function (_ref3) {
     alignItems: 'center',
     width: theme.__hd__.search.sizes.surfixSize,
     height: theme.__hd__.search.sizes.surfixSize,
-    backgroundColor: theme.__hd__.search.colors.surfixBackground,
+    backgroundColor: theme.__hd__.search.colors.suffixBackground,
     borderRadius: theme.__hd__.search.radii.surfix
   };
 });
@@ -36453,7 +36578,8 @@ var StyledHandlerContainer = index$9(View)(function (_ref5) {
     alignItems: 'flex-start',
     flexGrow: 1,
     height: '100%',
-    marginHorizontal: theme.__hd__.search.space.inputHorizontalMargin
+    marginHorizontal: theme.__hd__.search.space.inputHorizontalMargin,
+    paddingVertical: theme.__hd__.search.space.inputVerticalPadding
   };
 });
 var StyledBadge = index$9(Badge$1)(function (_ref6) {
@@ -36492,12 +36618,15 @@ var SearchTwoLine = function SearchTwoLine(props) {
     style = props.style,
     label = props.label,
     content = props.content,
-    testID = props.testID;
+    testID = props.testID,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'basic' : _props$variant;
   return /*#__PURE__*/React__default.createElement(StyledContainer, {
     style: style,
     testID: testID
   }, /*#__PURE__*/React__default.createElement(StyledInputContainer, {
-    themeFocused: false
+    themeFocused: false,
+    themeVariant: variant
   }, renderPrefix({
     prefix: prefix
   }), /*#__PURE__*/React__default.createElement(StyledHandlerContainer, null, /*#__PURE__*/React__default.createElement(Typography.Caption, {
@@ -36507,7 +36636,7 @@ var SearchTwoLine = function SearchTwoLine(props) {
   })));
 };
 
-var _excluded = ["prefix", "suffix", "style", "allowFontScaling", "accessibilityLabelledBy", "editable", "maxLength", "value", "defaultValue", "placeholder", "disabled", "testID"];
+var _excluded$1 = ["prefix", "suffix", "style", "allowFontScaling", "accessibilityLabelledBy", "editable", "maxLength", "value", "defaultValue", "placeholder", "disabled", "testID", "variant"];
 var getState = function getState(_ref) {
   var disabled = _ref.disabled,
     editable = _ref.editable,
@@ -36547,7 +36676,9 @@ var SearchOneLine = /*#__PURE__*/forwardRef(function (props, ref) {
     _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled,
     testID = props.testID,
-    nativeProps = _objectWithoutProperties(props, _excluded);
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'basic' : _props$variant,
+    nativeProps = _objectWithoutProperties(props, _excluded$1);
   var _React$useState = React__default.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isFocused = _React$useState2[0],
@@ -36594,7 +36725,8 @@ var SearchOneLine = /*#__PURE__*/forwardRef(function (props, ref) {
     testID: testID,
     style: style
   }, /*#__PURE__*/React__default.createElement(StyledInputContainer, {
-    themeFocused: isFocused
+    themeFocused: isFocused,
+    themeVariant: variant
   }, renderPrefix({
     prefix: prefix
   }), renderInput({
@@ -36630,6 +36762,23 @@ var SearchOneLine = /*#__PURE__*/forwardRef(function (props, ref) {
   })));
 });
 
+var _excluded = ["content", "icon"];
+var renderBadge = function renderBadge(props) {
+  var content = props.content,
+    icon = props.icon,
+    rest = _objectWithoutProperties(props, _excluded);
+  if (content) return /*#__PURE__*/React__default.createElement(StyledBadge, _extends$1({
+    intent: "primary",
+    content: content,
+    size: "small"
+  }, rest));
+  if (icon) return /*#__PURE__*/React__default.createElement(StyledBadge, _extends$1({
+    intent: "primary",
+    icon: icon,
+    size: "small"
+  }, rest));
+  return null;
+};
 var SearchSuffixIcon = function SearchSuffixIcon(props) {
   var suffix = props.suffix,
     testID = props.testID,
@@ -36638,11 +36787,7 @@ var SearchSuffixIcon = function SearchSuffixIcon(props) {
   return /*#__PURE__*/React__default.createElement(StyledSuffixContainer, {
     testID: testID,
     style: style
-  }, !!badge && /*#__PURE__*/React__default.createElement(StyledBadge, _extends$1({
-    intent: "primary"
-  }, badge, {
-    size: "small"
-  })), renderSuffix({
+  }, !!badge && renderBadge(badge), renderSuffix({
     suffix: suffix
   }));
 };