@hero-design/rn 8.68.0-alpha.1 → 8.69.0

package/es/index.js

@@ -1741,7 +1741,7 @@ var palette$4 = Object.assign(Object.assign({}, palette$9), {
 });
 var violet$3 = colorScales.violet;
 var palette$3 = Object.assign(Object.assign({}, palette$9), {
-  violet: violet$3.base
+  violetLight90: violet$3.lighten90
 });
 var scarletGum = colorScales.scarletGum,
   violet1 = colorScales.violet1,
@@ -1908,18 +1908,25 @@ var swagDarkBrandSystemPalette = {
 var swagDarkSystemPalette = _objectSpread2(_objectSpread2({}, globalPalette), swagDarkBrandSystemPalette);
 
 var swagBrandSystemPallete = {
-  primary: palette$3.violet,
-  onPrimary: '#FDFBFF',
-  secondary: '#460078',
+  primary: '#460078',
+  onPrimary: '#fdfbff',
+  secondary: '#b382fd',
   onSecondary: palette$3.white,
-  defaultSurface: '#FDFBFF',
-  highlightedSurface: '#F1E9FB',
+  defaultSurface: '#fdfbff',
+  highlightedSurface: palette$3.violetLight90,
   pressedSurface: '#380060',
-  decorativePrimary: '#FDFBFF',
-  decorativePrimarySurface: '#DDC8F5'
+  decorativePrimary: '#fdfbff',
+  decorativePrimarySurface: '#dacce4'
 };
 var swagSystemPalette = _objectSpread2(_objectSpread2({}, globalPalette$1), swagBrandSystemPallete);
 
+var swagLightJobsSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette), {}, {
+  secondary: '#40d1ff',
+  onSecondary: '#460078',
+  decorativeSecondary: '#fdfbff',
+  decorativeSecondarySurface: '#d9f6ff'
+});
+
 var workBrandSystemPallete = {
   primary: palette.black,
   onPrimary: palette.white,
@@ -2156,11 +2163,20 @@ var getAccordionTheme = function getAccordionTheme(theme) {
 
 var getAlertTheme = function getAlertTheme(theme) {
   var colors = {
-    success: theme.colors.success,
-    warning: theme.colors.warning,
-    error: theme.colors.error,
-    info: theme.colors.info,
-    notification: theme.colors.defaultGlobalSurface,
+    backgrounds: {
+      success: theme.colors.successSurface,
+      warning: theme.colors.warningSurface,
+      error: theme.colors.errorSurface,
+      info: theme.colors.infoSurface,
+      notification: theme.colors.defaultGlobalSurface
+    },
+    texts: {
+      success: theme.colors.onSuccessSurface,
+      warning: theme.colors.onWarningSurface,
+      error: theme.colors.onErrorSurface,
+      info: theme.colors.onInfoSurface,
+      notification: theme.colors.onDefaultGlobalSurface
+    },
     divider: theme.colors.secondaryOutline
   };
   var sizes = {
@@ -2281,22 +2297,36 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     text: theme.colors.onDarkGlobalSurface
   };
   var fonts = {
-    "default": theme.fonts.neutral.semiBold
+    medium: theme.fonts.neutral.regular,
+    small: theme.fonts.neutral.semiBold
   };
   var fontSizes = {
-    "default": theme.fontSizes.small
+    medium: theme.fontSizes.small,
+    small: 8
   };
   var lineHeights = {
-    "default": theme.lineHeights.small
+    medium: theme.lineHeights.small,
+    small: 10
   };
   var sizes = {
-    height: theme.fontSizes.small + theme.sizes.small,
-    minWidth: theme.fontSizes.small + theme.sizes.small,
+    medium: {
+      height: theme.sizes.large,
+      minWidth: theme.sizes.large
+    },
+    small: {
+      height: theme.sizes.medium,
+      minWidth: theme.sizes.medium
+    },
     statusHeight: theme.sizes.small,
     statusWidth: theme.sizes.small
   };
   var space = {
-    horizontalPadding: theme.space.small,
+    medium: {
+      horizontalPadding: theme.space.small
+    },
+    small: {
+      horizontalPadding: theme.space.xsmall
+    },
     statusPositionTop: -theme.space.xxsmall,
     statusPositionRight: -theme.space.xxsmall
   };
@@ -2342,17 +2372,22 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
   var colors = {
     shadow: theme.colors.primaryOutline,
     background: theme.colors.defaultGlobalSurface,
-    backdrop: theme.colors.overlayGlobalSurface
+    backdrop: theme.colors.overlayGlobalSurface,
+    floatingHeaderIconBackground: theme.colors.archivedSurface
   };
   var sizes = {
-    closeIcon: theme.sizes.xxxlarge
+    closeIcon: theme.sizes.xxxlarge,
+    floatingCloseIcon: theme.sizes.smallMedium
   };
   var space = {
     headerWrapperVerticalPadding: theme.space.small,
     headerWrapperHorizontalPadding: theme.space.medium,
     closeIconMargin: theme.space.smallMedium,
     footerVerticalPadding: theme.space.xxsmall,
-    footerHorizontalPadding: theme.space.smallMedium
+    footerHorizontalPadding: theme.space.smallMedium,
+    floatingContentMargin: theme.space.medium,
+    floatingInnerPadding: theme.space.small,
+    floatingHeaderIconPadding: theme.space.small
   };
   var shadows = {
     offset: {
@@ -2364,7 +2399,9 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
     elevation: 10
   };
   var radii = {
-    "default": theme.radii.xlarge
+    "default": theme.radii.xlarge,
+    floating: theme.radii['5xlarge'],
+    floatingHeaderIcon: theme.radii.rounded
   };
   return {
     colors: colors,
@@ -3017,20 +3054,30 @@ var getProgressTheme = function getProgressTheme(theme) {
       dangerInverted: theme.colors.mutedError,
       infoInverted: theme.colors.mutedInfo,
       archivedInverted: theme.colors.mutedArchived
+    },
+    step: {
+      complete: theme.colors.primary,
+      incomplete: theme.colors.archivedSurface,
+      current: '#DACCE4'
     }
   };
   var sizes = {
     circleDiameter: theme.sizes['6xlarge'],
     circleCompletenessHeight: theme.sizes.small,
-    barHeight: theme.sizes.small
+    barHeight: theme.sizes.small,
+    stepHeight: theme.sizes.small
   };
   var radii = {
     "default": theme.radii.rounded
   };
+  var space = {
+    stepGap: theme.space.xsmall
+  };
   return {
     colors: colors,
     sizes: sizes,
-    radii: radii
+    radii: radii,
+    space: space
   };
 };
 
@@ -3763,9 +3810,55 @@ var getTypographyTheme = function getTypographyTheme(theme) {
   };
 };
 
+var getSearchTheme = function getSearchTheme(theme) {
+  var colors = {
+    containerBackground: theme.colors.neutralGlobalSurface,
+    surfixBackground: theme.colors.defaultGlobalSurface,
+    text: theme.colors.onDefaultGlobalSurface,
+    borders: theme.colors.primaryOutline
+  };
+  var space = {
+    containerHorizontalPadding: theme.space.small,
+    containerVerticalPadding: theme.space.small,
+    inputHorizontalMargin: theme.space.small,
+    prefixHorizontalPadding: theme.space.xsmall,
+    surfixPadding: theme.space.small,
+    badgeTop: -theme.space.xxsmall,
+    badgeRight: -theme.space.xxsmall
+  };
+  var fonts = {
+    text: theme.fonts.neutral.regular
+  };
+  var fontSizes = {
+    text: theme.fontSizes.large
+  };
+  var borderWidths = {
+    container: {
+      normal: theme.borderWidths.base,
+      focused: theme.borderWidths.medium
+    }
+  };
+  var radii = {
+    container: theme.radii.rounded,
+    surfix: theme.radii.rounded
+  };
+  var sizes = {
+    surfixSize: theme.sizes.xxlarge
+  };
+  return {
+    colors: colors,
+    space: space,
+    fonts: fonts,
+    fontSizes: fontSizes,
+    borderWidths: borderWidths,
+    radii: radii,
+    sizes: sizes
+  };
+};
+
 var getTheme$1 = function getTheme() {
   var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : scale$1;
-  var systemPallete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : swagSystemPalette;
+  var systemPallete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : swagSystemPalette$1;
   var globalTheme = getGlobalTheme(scale, systemPallete);
   return _objectSpread2(_objectSpread2({}, globalTheme), {}, {
     __hd__: {
@@ -3800,6 +3893,7 @@ var getTheme$1 = function getTheme() {
       rate: getRateTheme(globalTheme),
       refreshControl: getRefreshControlTheme(globalTheme),
       richTextEditor: getRichTextEditorTheme(globalTheme),
+      search: getSearchTheme(globalTheme),
       sectionHeading: getSectionHeadingTheme(globalTheme),
       select: getSelectTheme(globalTheme),
       skeleton: getSkeletonTheme(globalTheme),
@@ -4984,7 +5078,7 @@ var useTheme = useTheme$1;
 
 var ThemeSwitcher = function ThemeSwitcher(_ref) {
   var _ref$name = _ref.name,
-    name = _ref$name === void 0 ? 'swagLight' : _ref$name,
+    name = _ref$name === void 0 ? 'swag' : _ref$name,
     children = _ref.children;
   var theme = useMemo(function () {
     switch (name) {
@@ -5000,8 +5094,6 @@ var ThemeSwitcher = function ThemeSwitcher(_ref) {
         return getTheme$1(scale$1, eBensSystemPalette);
       case 'swagDark':
         return getTheme$1(scale$1, swagDarkSystemPalette);
-      case 'swagLight':
-        return getTheme$1(scale$1, swagSystemPalette);
     }
   }, [name]);
   return /*#__PURE__*/React__default.createElement(ThemeProvider, {
@@ -6893,7 +6985,7 @@ var StyledText$3 = index$9(Text$1)(function (_ref) {
   });
 });
 
-var _excluded$D = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
+var _excluded$F = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
 var Text = function Text(_ref) {
   var children = _ref.children,
     _ref$fontSize = _ref.fontSize,
@@ -6906,7 +6998,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$D);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$F);
   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,
@@ -6936,7 +7028,7 @@ var StyledCaption = index$9(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$C = ["children", "fontWeight", "intent", "allowFontScaling"];
+var _excluded$E = ["children", "fontWeight", "intent", "allowFontScaling"];
 var Caption = function Caption(_ref) {
   var children = _ref.children,
     _ref$fontWeight = _ref.fontWeight,
@@ -6945,7 +7037,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$C);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$E);
   return /*#__PURE__*/React__default.createElement(StyledCaption, _extends$1({}, nativeProps, {
     themeFontWeight: fontWeight,
     themeIntent: intent,
@@ -6964,14 +7056,14 @@ var StyledLabel$1 = index$9(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$B = ["children", "intent", "allowFontScaling"];
+var _excluded$D = ["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$B);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$D);
   return /*#__PURE__*/React__default.createElement(StyledLabel$1, _extends$1({}, nativeProps, {
     themeIntent: intent,
     allowFontScaling: allowFontScaling
@@ -6992,7 +7084,7 @@ var StyledTitle$1 = index$9(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$A = ["children", "intent", "allowFontScaling", "level", "typeface"];
+var _excluded$C = ["children", "intent", "allowFontScaling", "level", "typeface"];
 var Title = function Title(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -7003,7 +7095,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$A);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$C);
   return /*#__PURE__*/React__default.createElement(StyledTitle$1, _extends$1({}, nativeProps, {
     themeLevel: level,
     themeTypeface: typeface,
@@ -7024,7 +7116,7 @@ var FONTSIZE_MAP = {
   'regular-bold': 'regular',
   'small-bold': 'small'
 };
-var StyledBody = index$9(Text$1)(function (_ref) {
+var StyledBody$1 = index$9(Text$1)(function (_ref) {
   var themeIntent = _ref.themeIntent,
     theme = _ref.theme,
     themeTypeface = _ref.themeTypeface,
@@ -7038,7 +7130,7 @@ var StyledBody = index$9(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$z = ["children", "intent", "allowFontScaling", "typeface", "variant"];
+var _excluded$B = ["children", "intent", "allowFontScaling", "typeface", "variant"];
 var Body = function Body(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -7049,8 +7141,8 @@ 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$z);
-  return /*#__PURE__*/React__default.createElement(StyledBody, _extends$1({}, nativeProps, {
+    nativeProps = _objectWithoutProperties(_ref, _excluded$B);
+  return /*#__PURE__*/React__default.createElement(StyledBody$1, _extends$1({}, nativeProps, {
     themeTypeface: typeface,
     themeIntent: intent,
     themeVariant: variant,
@@ -7616,10 +7708,10 @@ var StyledHeroIcon = index$9(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$y = ["style"];
+var _excluded$A = ["style"];
 var AnimatedIcon = function AnimatedIcon(_ref) {
   var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$y);
+    otherProps = _objectWithoutProperties(_ref, _excluded$A);
   var rotateAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(rotateAnimation.current, {
@@ -7724,7 +7816,7 @@ var AccordionItem = function AccordionItem(_ref) {
   }, content));
 };
 
-var _excluded$x = ["key"];
+var _excluded$z = ["key"];
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
     activeItemKey = _ref.activeItemKey,
@@ -7745,7 +7837,7 @@ var Accordion = function Accordion(_ref) {
     testID: testID
   }, items.map(function (_ref2, index) {
     var key = _ref2.key,
-      props = _objectWithoutProperties(_ref2, _excluded$x);
+      props = _objectWithoutProperties(_ref2, _excluded$z);
     var open = _activeItemKey === key;
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: key
@@ -7768,7 +7860,7 @@ var Container$1 = index$9(View)(function (_ref) {
     themeIntent = _ref.themeIntent;
   return {
     borderRadius: themeVariant === 'rounded' ? theme.__hd__.alert.radii["default"] : 0,
-    backgroundColor: theme.__hd__.alert.colors[themeIntent],
+    backgroundColor: theme.__hd__.alert.colors.backgrounds[themeIntent],
     minHeight: theme.__hd__.alert.sizes.height,
     flexDirection: 'row'
   };
@@ -7780,16 +7872,30 @@ var IconContainer$1 = index$9(View)(function (_ref2) {
     paddingLeft: theme.__hd__.alert.space.iconLeftPadding
   };
 });
-var TextContainer$1 = index$9(View)(function (_ref3) {
-  var theme = _ref3.theme;
+var StyledIcon$2 = index$9(Icon)(function (_ref3) {
+  var theme = _ref3.theme,
+    themeIntent = _ref3.themeIntent;
+  return {
+    color: theme.__hd__.alert.colors.texts[themeIntent]
+  };
+});
+var TextContainer$1 = index$9(View)(function (_ref4) {
+  var theme = _ref4.theme;
   return {
     paddingHorizontal: theme.__hd__.alert.space.textPaddingHorizontal,
     flex: 1
   };
 });
-var ContentContainer$1 = index$9(View)(function (_ref4) {
-  var theme = _ref4.theme,
-    showDivider = _ref4.showDivider;
+var StyledBody = index$9(Typography.Body)(function (_ref5) {
+  var theme = _ref5.theme,
+    themeIntent = _ref5.themeIntent;
+  return {
+    color: theme.__hd__.alert.colors.texts[themeIntent]
+  };
+});
+var ContentContainer$1 = index$9(View)(function (_ref6) {
+  var theme = _ref6.theme,
+    showDivider = _ref6.showDivider;
   return {
     paddingVertical: theme.__hd__.alert.space.contentPaddingHorizontal,
     flex: 1,
@@ -7798,8 +7904,8 @@ var ContentContainer$1 = index$9(View)(function (_ref4) {
     flexDirection: 'row'
   };
 });
-var CTAWrapper$1 = index$9(TouchableOpacity)(function (_ref5) {
-  var theme = _ref5.theme;
+var CTAWrapper$1 = index$9(TouchableOpacity)(function (_ref7) {
+  var theme = _ref7.theme;
   return {
     paddingHorizontal: theme.__hd__.alert.space.ctaPadding,
     justifyContent: 'center'
@@ -7821,12 +7927,14 @@ var getIntentIcon$1 = function getIntentIcon(intent) {
   }
 };
 var AlertIcon = function AlertIcon(_ref) {
-  var icon = _ref.icon;
+  var icon = _ref.icon,
+    intent = _ref.intent;
   return icon ? /*#__PURE__*/React__default.createElement(IconContainer$1, {
     testID: "alert-left-icon"
-  }, /*#__PURE__*/React__default.createElement(Icon, {
+  }, /*#__PURE__*/React__default.createElement(StyledIcon$2, {
     icon: icon,
-    size: "small"
+    size: "small",
+    themeIntent: intent
   })) : null;
 };
 var Alert = function Alert(_ref2) {
@@ -7850,23 +7958,28 @@ var Alert = function Alert(_ref2) {
   }, /*#__PURE__*/React__default.createElement(ContentContainer$1, {
     showDivider: !!onClose
   }, icon !== null ? /*#__PURE__*/React__default.createElement(AlertIcon, {
-    icon: icon || getIntentIcon$1(intent)
-  }) : null, /*#__PURE__*/React__default.createElement(TextContainer$1, null, typeof title === 'string' ? /*#__PURE__*/React__default.createElement(Typography.Body, {
-    variant: "small-bold"
-  }, title) : title, typeof content === 'string' ? /*#__PURE__*/React__default.createElement(Typography.Body, {
-    variant: "small"
+    icon: icon || getIntentIcon$1(intent),
+    intent: intent
+  }) : null, /*#__PURE__*/React__default.createElement(TextContainer$1, null, typeof title === 'string' ? /*#__PURE__*/React__default.createElement(StyledBody, {
+    variant: "small-bold",
+    themeIntent: intent
+  }, title) : title, typeof content === 'string' ? /*#__PURE__*/React__default.createElement(StyledBody, {
+    variant: "small",
+    themeIntent: intent
   }, content) : content)), onClose ? /*#__PURE__*/React__default.createElement(CTAWrapper$1, {
     onPress: onClose,
     testID: "alert-close-icon"
-  }, typeof actionLabel === 'string' ? /*#__PURE__*/React__default.createElement(Typography.Body, {
-    variant: "small-bold"
-  }, actionLabel) : /*#__PURE__*/React__default.createElement(Icon, {
+  }, typeof actionLabel === 'string' ? /*#__PURE__*/React__default.createElement(StyledBody, {
+    variant: "small-bold",
+    themeIntent: intent
+  }, actionLabel) : /*#__PURE__*/React__default.createElement(StyledIcon$2, {
     icon: "cancel",
-    size: "small"
+    size: "small",
+    themeIntent: intent
   })) : null);
 };
 
-var StyledContainer$6 = index$9(View)({
+var StyledContainer$7 = index$9(View)({
   alignItems: 'center',
   flexDirection: 'row'
 });
@@ -7908,7 +8021,7 @@ var Attachment = function Attachment(_ref) {
     backgroundHighlighted = _ref$backgroundHighli === void 0 ? false : _ref$backgroundHighli,
     style = _ref.style,
     testID = _ref.testID;
-  return /*#__PURE__*/React__default.createElement(StyledContainer$6, {
+  return /*#__PURE__*/React__default.createElement(StyledContainer$7, {
     testID: testID,
     style: style
   }, /*#__PURE__*/React__default.createElement(StyledContentContainer$1, {
@@ -8218,7 +8331,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$w = ["theme"];
+var _excluded$y = ["theme"];
 var getThemeValue = function getThemeValue(theme, key, props) {
   var propConfig = config[key];
   var propValue = props[key];
@@ -8245,18 +8358,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$w);
+    otherProps = _objectWithoutProperties(_ref5, _excluded$y);
   var styleProps = pick(configKeys, otherProps);
   var flexProps = pick(_toConsumableArray(flexPropsKey), otherProps);
   return _objectSpread2(_objectSpread2({}, mapStylePropToThemeValue(theme, styleProps)), flexProps);
 });
 
-var _excluded$v = ["children", "style", "testID"];
+var _excluded$x = ["children", "style", "testID"];
 var Box = function Box(_ref) {
   var children = _ref.children,
     style = _ref.style,
     testID = _ref.testID,
-    otherProps = _objectWithoutProperties(_ref, _excluded$v);
+    otherProps = _objectWithoutProperties(_ref, _excluded$x);
   return /*#__PURE__*/React__default.createElement(StyledBox, _extends$1({}, otherProps, {
     style: style,
     testID: testID
@@ -8436,20 +8549,25 @@ var index$8 = Object.assign(Avatar, {
 var StyledView$2 = index$9(Animated.View)(function (_ref) {
   var themeIntent = _ref.themeIntent,
     themePadding = _ref.themePadding,
+    themeSize = _ref.themeSize,
     theme = _ref.theme;
   return {
-    height: theme.__hd__.badge.sizes.height,
-    minWidth: theme.__hd__.badge.sizes.minWidth,
+    height: theme.__hd__.badge.sizes[themeSize].height,
+    minWidth: theme.__hd__.badge.sizes[themeSize].minWidth,
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: theme.__hd__.badge.colors[themeIntent],
     borderRadius: theme.radii.rounded,
-    paddingHorizontal: themePadding === 'wideContent' ? theme.__hd__.badge.space.horizontalPadding : undefined
+    paddingHorizontal: themePadding === 'wideContent' ? theme.__hd__.badge.space[themeSize].horizontalPadding : undefined
   };
 });
 var StyledText$1 = index$9(Typography.Caption)(function (_ref2) {
-  var theme = _ref2.theme;
+  var theme = _ref2.theme,
+    themeSize = _ref2.themeSize;
   return {
+    fontSize: theme.__hd__.badge.fontSizes[themeSize],
+    lineHeight: theme.__hd__.badge.lineHeights[themeSize],
+    fontFamily: theme.__hd__.badge.fonts[themeSize],
     color: theme.__hd__.badge.colors.text,
     includeFontPadding: false,
     textAlignVertical: 'center',
@@ -8470,7 +8588,7 @@ var StyledStatus = index$9(Animated.View)(function (_ref3) {
   };
 });
 
-var _excluded$u = ["children", "visible", "intent", "style", "testID"];
+var _excluded$w = ["children", "visible", "intent", "style", "testID"];
 var Status = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
@@ -8479,7 +8597,7 @@ var Status = function Status(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$u);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$w);
   var _React$useRef = React__default.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React__default.useRef(true);
@@ -8512,7 +8630,7 @@ var Status = function Status(_ref) {
   }));
 };
 
-var _excluded$t = ["content", "visible", "max", "intent", "style", "testID"];
+var _excluded$v = ["content", "visible", "max", "intent", "style", "testID", "size"];
 var DEFAULT_MAX_NUMBER = 99;
 var getPaddingState = function getPaddingState(content) {
   return content.length > 1 ? 'wideContent' : 'narrowContent';
@@ -8527,7 +8645,9 @@ var Badge = function Badge(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$t);
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    nativeProps = _objectWithoutProperties(_ref, _excluded$v);
   var _React$useRef = React__default.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React__default.useRef(true);
@@ -8547,6 +8667,7 @@ var Badge = function Badge(_ref) {
   return /*#__PURE__*/React__default.createElement(StyledView$2, _extends$1({}, nativeProps, {
     themeIntent: intent,
     themePadding: getPaddingState(content),
+    themeSize: size,
     style: [{
       opacity: opacity,
       transform: [{
@@ -8557,7 +8678,9 @@ var Badge = function Badge(_ref) {
       }]
     }, style],
     testID: testID
-  }), /*#__PURE__*/React__default.createElement(StyledText$1, null, content));
+  }), /*#__PURE__*/React__default.createElement(StyledText$1, {
+    themeSize: size
+  }, content));
 };
 var Badge$1 = Object.assign(Badge, {
   Status: Status
@@ -8614,7 +8737,7 @@ var StyledBottomBarText = index$9(Typography.Caption)(function (_ref3) {
   };
 });
 
-var _excluded$s = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$u = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
   return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
@@ -8625,7 +8748,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
     selectedTabKey = _ref.selectedTabKey,
     tabs = _ref.tabs,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$s);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$u);
   var insets = useSafeAreaInsets();
   /**
    * List of loaded tabs, tabs will be loaded when navigated to.
@@ -8711,13 +8834,13 @@ var StyledDivider = index$9(View)(function (_ref) {
   }, horizontalMargin), verticalMargin);
 });
 
-var _excluded$r = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$t = ["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$r);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$t);
   return /*#__PURE__*/React__default.createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
     themeMarginVertical: marginVertical,
@@ -8737,8 +8860,29 @@ var StyledKeyboardAvoidingView = index$9(KeyboardAvoidingView)(function () {
     flexDirection: 'column-reverse'
   };
 });
-var StyledBottomSheet = index$9(AnimatedSafeAreaView)(function (_ref) {
+var StyledFloatingWrapper = index$9(AnimatedSafeAreaView)(function (_ref) {
   var theme = _ref.theme;
+  return {
+    margin: theme.__hd__.bottomSheet.space.floatingContentMargin
+  };
+});
+var StyledFloatingBottomSheet = index$9(Animated.View)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    width: '100%',
+    shadowColor: theme.__hd__.bottomSheet.colors.shadow,
+    shadowOffset: theme.__hd__.bottomSheet.shadows.offset,
+    shadowOpacity: theme.__hd__.bottomSheet.shadows.opacity,
+    shadowRadius: theme.__hd__.bottomSheet.shadows.radius,
+    elevation: theme.__hd__.bottomSheet.shadows.elevation,
+    backgroundColor: theme.__hd__.bottomSheet.colors.background,
+    borderRadius: theme.__hd__.bottomSheet.radii.floating,
+    maxHeight: '100%',
+    padding: theme.__hd__.bottomSheet.space.floatingInnerPadding
+  };
+});
+var StyledBottomSheet = index$9(AnimatedSafeAreaView)(function (_ref3) {
+  var theme = _ref3.theme;
   return {
     borderTopLeftRadius: theme.__hd__.bottomSheet.radii["default"],
     borderTopRightRadius: theme.__hd__.bottomSheet.radii["default"],
@@ -8752,15 +8896,15 @@ var StyledBottomSheet = index$9(AnimatedSafeAreaView)(function (_ref) {
     maxHeight: '94%'
   };
 });
-var StyledBackdrop$2 = index$9(AnimatedPressable$2)(function (_ref2) {
-  var theme = _ref2.theme;
+var StyledBackdrop$2 = index$9(AnimatedPressable$2)(function (_ref4) {
+  var theme = _ref4.theme;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.bottomSheet.colors.backdrop,
     opacity: 0.4
   });
 });
-var StyledHeaderWrapper = index$9(View)(function (_ref3) {
-  var theme = _ref3.theme;
+var StyledHeaderWrapper = index$9(View)(function (_ref5) {
+  var theme = _ref5.theme;
   return {
     flexDirection: 'row',
     paddingVertical: theme.__hd__.bottomSheet.space.headerWrapperVerticalPadding,
@@ -8771,8 +8915,8 @@ var StyledHeader = index$9(View)({
   flex: 1,
   justifyContent: 'center'
 });
-var StyledFooter = index$9(View)(function (_ref4) {
-  var theme = _ref4.theme;
+var StyledFooter = index$9(View)(function (_ref6) {
+  var theme = _ref6.theme;
   return {
     paddingHorizontal: theme.__hd__.bottomSheet.space.footerHorizontalPadding,
     paddingVertical: theme.__hd__.bottomSheet.space.footerVerticalPadding,
@@ -8781,16 +8925,24 @@ var StyledFooter = index$9(View)(function (_ref4) {
     flexDirection: 'row'
   };
 });
-var StyledIconWrapper$4 = index$9(View)(function (_ref5) {
-  var theme = _ref5.theme;
+var StyledIconWrapper$4 = index$9(View)(function (_ref7) {
+  var theme = _ref7.theme;
   return {
-    alignItems: 'center',
+    alignItems: 'flex-end',
     justifyContent: 'center',
     width: theme.__hd__.bottomSheet.sizes.closeIcon,
     height: theme.__hd__.bottomSheet.sizes.closeIcon,
     marginLeft: theme.__hd__.bottomSheet.space.closeIconMargin
   };
 });
+var StyledFloatingHeaderWrapper = index$9(TouchableOpacity)(function (_ref8) {
+  var theme = _ref8.theme;
+  return {
+    padding: theme.__hd__.bottomSheet.space.floatingHeaderIconPadding,
+    backgroundColor: theme.__hd__.bottomSheet.colors.floatingHeaderIconBackground,
+    borderRadius: theme.__hd__.bottomSheet.radii.floatingHeaderIcon
+  };
+});
 
 var Footer$1 = function Footer(_ref) {
   var children = _ref.children,
@@ -8798,6 +8950,9 @@ var Footer$1 = function Footer(_ref) {
   return /*#__PURE__*/React__default.createElement(View, null, showDivider ? /*#__PURE__*/React__default.createElement(Divider, null) : null, /*#__PURE__*/React__default.createElement(StyledFooter, null, children));
 };
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+var noop$1 = function noop() {};
+
 var genLoadingIndicatorStyles = function genLoadingIndicatorStyles(theme, intent) {
   return {
     backgroundColor: theme.__hd__.button.colors[intent]
@@ -8841,7 +8996,7 @@ var StyledLoadingDot = index$9(View)(function (_ref) {
   }, themeStyling());
 });
 
-var _excluded$q = ["count", "size", "testID", "themeVariant"];
+var _excluded$s = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = Animated.createAnimatedComponent(StyledLoadingDot);
 var renderDotComponent = function renderDotComponent(_ref) {
@@ -8873,7 +9028,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
     size = _ref2$size === void 0 ? 12 : _ref2$size,
     testID = _ref2.testID,
     themeVariant = _ref2.themeVariant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$q);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$s);
   var progressAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(progressAnimation.current, {
@@ -9284,35 +9439,43 @@ var CompoundButton = Button;
 CompoundButton.Icon = IconButton;
 CompoundButton.Utility = UtilityButton;
 
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-var noop$1 = function noop() {};
-
 var Header = function Header(_ref) {
   var content = _ref.content,
     showDivider = _ref.showDivider,
     _ref$onRequestClose = _ref.onRequestClose,
     onRequestClose = _ref$onRequestClose === void 0 ? noop$1 : _ref$onRequestClose,
-    showCloseButton = _ref.showCloseButton;
+    showCloseButton = _ref.showCloseButton,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'fixed' : _ref$variant;
+  var theme = useTheme();
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledHeaderWrapper, null, typeof content === 'string' ? /*#__PURE__*/React__default.createElement(StyledHeader, null, /*#__PURE__*/React__default.createElement(Typography.Body, {
     variant: "regular-bold"
   }, content)) : /*#__PURE__*/React__default.createElement(View, {
     style: {
       flex: 1
     }
-  }, content), showCloseButton ? /*#__PURE__*/React__default.createElement(StyledIconWrapper$4, null, /*#__PURE__*/React__default.createElement(CompoundButton.Icon, {
+  }, content), showCloseButton ? /*#__PURE__*/React__default.createElement(StyledIconWrapper$4, null, variant === 'fixed' ? /*#__PURE__*/React__default.createElement(CompoundButton.Icon, {
     icon: "cancel",
     onPress: onRequestClose,
     intent: "text",
     testID: "bottom-sheet-close-icon",
     size: "xsmall"
-  })) : null), showDivider ? /*#__PURE__*/React__default.createElement(Divider, null) : null);
+  }) : /*#__PURE__*/React__default.createElement(StyledFloatingHeaderWrapper, {
+    onPress: onRequestClose,
+    testID: "bottom-sheet-close-icon"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    icon: "cancel",
+    style: {
+      fontSize: theme.__hd__.bottomSheet.sizes.floatingCloseIcon
+    }
+  }))) : null), showDivider ? /*#__PURE__*/React__default.createElement(Divider, null) : null);
 };
 
-var _excluded$p = ["scrollEventThrottle"];
+var _excluded$r = ["scrollEventThrottle"];
 var BottomSheetScrollView = function BottomSheetScrollView(_ref) {
   var _ref$scrollEventThrot = _ref.scrollEventThrottle,
     scrollEventThrottle = _ref$scrollEventThrot === void 0 ? 100 : _ref$scrollEventThrot,
-    props = _objectWithoutProperties(_ref, _excluded$p);
+    props = _objectWithoutProperties(_ref, _excluded$r);
   var _useContext = useContext(BottomSheetContext),
     setInternalShowDivider = _useContext.setInternalShowDivider;
   var onScrollBeginDrag = useCallback(function (e) {
@@ -9358,7 +9521,9 @@ var BottomSheet = function BottomSheet(_ref) {
     _ref$keyboardAvoiding = _ref.keyboardAvoidingViewProps,
     keyboardAvoidingViewProps = _ref$keyboardAvoiding === void 0 ? {} : _ref$keyboardAvoiding,
     _ref$supportedOrienta = _ref.supportedOrientations,
-    supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta;
+    supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'fixed' : _ref$variant;
   var _Dimensions$get = Dimensions.get('window'),
     height = _Dimensions$get.height;
   // Internal state to control modal open/close timing with animation
@@ -9416,6 +9581,8 @@ var BottomSheet = function BottomSheet(_ref) {
       setInternalShowDivider: setInternalShowDivider
     };
   }, [setInternalShowDivider]);
+  var BottomSheetWrapperComponent = variant === 'fixed' ? React__default.Fragment : StyledFloatingWrapper;
+  var BottomSheetComponent = variant === 'fixed' ? StyledBottomSheet : StyledFloatingBottomSheet;
   return /*#__PURE__*/React__default.createElement(Modal$1, {
     visible: visible,
     onRequestClose: onRequestClose,
@@ -9432,7 +9599,7 @@ var BottomSheet = function BottomSheet(_ref) {
       opacity: interpolateOpacity
     },
     onPress: onRequestClose
-  }), /*#__PURE__*/React__default.createElement(StyledBottomSheet, {
+  }), /*#__PURE__*/React__default.createElement(BottomSheetWrapperComponent, null, /*#__PURE__*/React__default.createElement(BottomSheetComponent, {
     style: [style, {
       transform: [{
         scaleY: height > 0 ? 1 : 0
@@ -9441,6 +9608,7 @@ var BottomSheet = function BottomSheet(_ref) {
       }]
     }]
   }, header !== undefined ? /*#__PURE__*/React__default.createElement(Header, {
+    variant: variant,
     content: header,
     showDivider: internalShowDivider,
     onRequestClose: onRequestClose,
@@ -9449,7 +9617,7 @@ var BottomSheet = function BottomSheet(_ref) {
     value: BottomSheetContextValue
   }, children), footer ? /*#__PURE__*/React__default.createElement(Footer$1, {
     showDivider: showDivider
-  }, footer) : null))));
+  }, footer) : null)))));
 };
 var BottomSheet$1 = Object.assign(BottomSheet, {
   ScrollView: BottomSheetScrollView
@@ -11770,7 +11938,7 @@ function ContentNavigator(_ref) {
   }));
 }
 
-var StyledContainer$5 = index$9(View)(function (_ref) {
+var StyledContainer$6 = index$9(View)(function (_ref) {
   var theme = _ref.theme;
   return {
     backgroundColor: theme.__hd__.calendar.colors.background
@@ -11984,7 +12152,7 @@ var Calendar = function Calendar(_ref) {
   var disableNextButton = maxDate === undefined ? false : !daysOfNextMonth.some(function (date) {
     return date !== undefined;
   }) || maxDate <= lastDateOfMonth;
-  return /*#__PURE__*/React__default.createElement(StyledContainer$5, {
+  return /*#__PURE__*/React__default.createElement(StyledContainer$6, {
     testID: testID
   }, /*#__PURE__*/React__default.createElement(StyledCalendarHeader, null, /*#__PURE__*/React__default.createElement(ContentNavigator, {
     value: !useMonthPicker ? format('MMMM yyyy', visibleDate) : /*#__PURE__*/React__default.createElement(TouchableOpacity, {
@@ -12124,12 +12292,12 @@ var Indicator = index$9(View)(function (_ref2) {
   };
 });
 
-var _excluded$o = ["intent", "children"];
+var _excluded$q = ["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$o);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$q);
   return /*#__PURE__*/React__default.createElement(StyledDataCard, nativeProps, /*#__PURE__*/React__default.createElement(Indicator, {
     themeIntent: intent,
     testID: "data-card-indicator"
@@ -12147,11 +12315,11 @@ var StyledCard$1 = index$9(View)(function (_ref) {
   });
 });
 
-var _excluded$n = ["intent", "children"];
+var _excluded$p = ["intent", "children"];
 var Card = function Card(_ref) {
   var intent = _ref.intent,
     children = _ref.children,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$n);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$p);
   return /*#__PURE__*/React__default.createElement(StyledCard$1, _extends$1({}, nativeProps, {
     themeIntent: intent
   }), children);
@@ -12412,7 +12580,7 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 CardCarousel.displayName = 'CardCarousel';
 
-var _excluded$m = ["rounded", "size", "testID", "style"];
+var _excluded$o = ["rounded", "size", "testID", "style"];
 var Image = function Image(_ref) {
   var _ref$rounded = _ref.rounded,
     rounded = _ref$rounded === void 0 ? false : _ref$rounded,
@@ -12420,7 +12588,7 @@ var Image = function Image(_ref) {
     size = _ref$size === void 0 ? '6xlarge' : _ref$size,
     testID = _ref.testID,
     style = _ref.style,
-    imageNativeProps = _objectWithoutProperties(_ref, _excluded$m);
+    imageNativeProps = _objectWithoutProperties(_ref, _excluded$o);
   var theme = useTheme();
   var imageSize = theme.__hd__.image.sizes[size];
   return /*#__PURE__*/React__default.createElement(Image$1, _extends$1({
@@ -12554,7 +12722,7 @@ var CarouselItem = function CarouselItem(_ref) {
   }, heading), !!body && /*#__PURE__*/React__default.createElement(Typography.Body, null, body)));
 };
 
-var _excluded$l = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "testID", "pageControlPosition"];
+var _excluded$n = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "testID", "pageControlPosition"];
 function useStateFromProp(initialValue) {
   var _useState = useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
@@ -12581,7 +12749,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$l);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$n);
   useDeprecation("shouldShowPagination prop has been deprecated", shouldShowPagination !== noop);
   useDeprecation("The use of 'pageControlPosition == bottom' has been deprecated", pageControlPosition === 'bottom');
   var theme = useTheme();
@@ -12791,7 +12959,7 @@ var StyledIcon$1 = index$9(Icon)(function (_ref4) {
   };
 });
 
-var _excluded$k = ["label", "variant", "selected", "icon", "onPress"];
+var _excluded$m = ["label", "variant", "selected", "icon", "onPress"];
 var Chip = function Chip(_ref) {
   var label = _ref.label,
     _ref$variant = _ref.variant,
@@ -12800,7 +12968,7 @@ var Chip = function Chip(_ref) {
     selected = _ref$selected === void 0 ? false : _ref$selected,
     icon = _ref.icon,
     onPress = _ref.onPress,
-    otherProps = _objectWithoutProperties(_ref, _excluded$k);
+    otherProps = _objectWithoutProperties(_ref, _excluded$m);
   var internalIcon = React__default.useMemo(function () {
     if (icon && variant === 'filled') {
       return icon;
@@ -12919,7 +13087,7 @@ var Checkbox = function Checkbox(_ref2) {
   })));
 };
 
-var StyledContainer$4 = index$9(View)(function (_ref) {
+var StyledContainer$5 = index$9(View)(function (_ref) {
   var theme = _ref.theme;
   return {
     width: '100%',
@@ -13047,8 +13215,8 @@ var StyledErrorAndMaxLengthContainer = index$9(View)(function () {
   };
 });
 
-var _excluded$j = ["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 _excluded$l = ["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,
     editable = _ref.editable,
@@ -13084,7 +13252,7 @@ var renderErrorOrHelpText = function renderErrorOrHelpText(_ref2) {
     testID: "input-error-message"
   }, error)) : !!helpText && /*#__PURE__*/React__default.createElement(StyledHelperText, null, helpText);
 };
-var renderInput = function renderInput(_ref3) {
+var renderInput$1 = function renderInput(_ref3) {
   var variant = _ref3.variant,
     nativeInputProps = _ref3.nativeInputProps,
     renderInputValue = _ref3.renderInputValue,
@@ -13095,7 +13263,7 @@ var renderInput = function renderInput(_ref3) {
     ref: ref
   }));
 };
-var renderSuffix = function renderSuffix(_ref4) {
+var renderSuffix$1 = function renderSuffix(_ref4) {
   var state = _ref4.state,
     loading = _ref4.loading,
     suffix = _ref4.suffix;
@@ -13108,7 +13276,7 @@ var renderSuffix = function renderSuffix(_ref4) {
     size: "medium"
   }) : suffix;
 };
-var renderPrefix = function renderPrefix(_ref5) {
+var renderPrefix$1 = function renderPrefix(_ref5) {
   var state = _ref5.state,
     prefix = _ref5.prefix;
   return typeof prefix === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
@@ -13159,7 +13327,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$j);
+    nativeProps = _objectWithoutProperties(_ref8, _excluded$l);
   var displayText = getDisplayText(value, defaultValue);
   var isEmptyValue = displayText.length === 0;
   var _React$useState = React__default.useState({
@@ -13181,7 +13349,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     _React$useState8 = _slicedToArray(_React$useState7, 2),
     isFocused = _React$useState8[0],
     setIsFocused = _React$useState8[1];
-  var state = getState$1({
+  var state = getState$2({
     disabled: disabled,
     error: error,
     editable: editable,
@@ -13311,7 +13479,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     defaultValue: defaultValue,
     placeholder: isFocused || label === undefined ? nativeProps.placeholder : EMPTY_PLACEHOLDER_VALUE
   });
-  return /*#__PURE__*/React__default.createElement(StyledContainer$4, {
+  return /*#__PURE__*/React__default.createElement(StyledContainer$5, {
     style: styleWithoutBackgroundColor,
     pointerEvents: state === 'disabled' || state === 'readonly' ? 'none' : 'auto',
     testID: testID
@@ -13326,7 +13494,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     }, borderStyle]
   }), /*#__PURE__*/React__default.createElement(View, {
     onLayout: onPrefixLayout
-  }, renderPrefix({
+  }, renderPrefix$1({
     state: state,
     prefix: prefix
   })), /*#__PURE__*/React__default.createElement(StyledLabelContainerInsideTextInput, {
@@ -13366,14 +13534,14 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     testID: "input-label",
     themeState: state,
     onLayout: onLabelLayout
-  }, label)), /*#__PURE__*/React__default.createElement(StyledTextInputAndLabelContainer, null, renderInput({
+  }, label)), /*#__PURE__*/React__default.createElement(StyledTextInputAndLabelContainer, null, renderInput$1({
     variant: variant,
     nativeInputProps: nativeInputProps,
     renderInputValue: renderInputValue,
     ref: function ref(rnTextInputRef) {
       innerTextInput.current = rnTextInputRef;
     }
-  })), renderSuffix({
+  })), renderSuffix$1({
     state: state,
     loading: loading,
     suffix: suffix
@@ -13704,11 +13872,11 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
   }))));
 };
 
-var _excluded$i = ["variant"];
+var _excluded$k = ["variant"];
 var DatePicker = function DatePicker(_ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
-    props = _objectWithoutProperties(_ref, _excluded$i);
+    props = _objectWithoutProperties(_ref, _excluded$k);
   if (variant === 'calendar') {
     return /*#__PURE__*/React__default.createElement(DatePickerCalendar, props);
   }
@@ -13719,7 +13887,7 @@ var DatePicker = function DatePicker(_ref) {
 };
 
 var AnimatedPressable$1 = Animated.createAnimatedComponent(Pressable);
-var StyledContainer$3 = index$9(View)(function (_ref) {
+var StyledContainer$4 = index$9(View)(function (_ref) {
   var theme = _ref.theme,
     enableShadow = _ref.enableShadow;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
@@ -13775,7 +13943,7 @@ var StyledDragableDrawerContainer = index$9(Animated.View)(function (_ref5) {
     maxHeight: '100%'
   };
 });
-var StyledHandlerContainer = index$9(View)(function (_ref6) {
+var StyledHandlerContainer$1 = index$9(View)(function (_ref6) {
   var theme = _ref6.theme;
   return {
     backgroundColor: theme.__hd__.drawer.colors.background,
@@ -13943,7 +14111,7 @@ var DragableDrawer = function DragableDrawer(_ref) {
       var nativeEvent = _ref3.nativeEvent;
       setHeight(nativeEvent.layout.height);
     }
-  }, /*#__PURE__*/React__default.createElement(StyledHandlerContainer, panResponder.panHandlers, /*#__PURE__*/React__default.createElement(StyledHandler, null)), children));
+  }, /*#__PURE__*/React__default.createElement(StyledHandlerContainer$1, panResponder.panHandlers, /*#__PURE__*/React__default.createElement(StyledHandler, null)), children));
 };
 
 var Drawer = function Drawer(_ref) {
@@ -13978,7 +14146,7 @@ var Drawer = function Drawer(_ref) {
       return animation.stop();
     };
   }, [visible]);
-  return /*#__PURE__*/React__default.createElement(StyledContainer$3, {
+  return /*#__PURE__*/React__default.createElement(StyledContainer$4, {
     testID: testID,
     enableShadow: enableShadow,
     pointerEvents: "box-none"
@@ -14262,7 +14430,7 @@ var Portal$1 = Object.assign(Portal, {
   Host: PortalHost
 });
 
-var _excluded$h = ["visible"];
+var _excluded$j = ["visible"];
 var DEFAULT_BACKDROP_OPACITY = 0.4;
 var DEFAULT_ANIMATION_CONFIG = {
   easing: Easing.inOut(Easing.cubic),
@@ -14358,7 +14526,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$h);
+    props = _objectWithoutProperties(_ref3, _excluded$j);
   var modalRef = useRef(null);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
@@ -14468,7 +14636,7 @@ var StyledErrorDescription = index$9(Typography.Body)(function (_ref9) {
   };
 });
 
-var _excluded$g = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"],
+var _excluded$i = ["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)) {
@@ -14494,7 +14662,7 @@ var ErrorPage = function ErrorPage(_ref) {
     onCtaPress = _ref.onCtaPress,
     secondaryCtaText = _ref.secondaryCtaText,
     onSecondaryCtaPress = _ref.onSecondaryCtaPress,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$g);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$i);
   var showCta = ctaText && onCtaPress !== undefined;
   var showSecondaryCta = secondaryCtaText && onSecondaryCtaPress !== undefined;
   var showButtonContainer = showCta || showSecondaryCta;
@@ -14655,11 +14823,11 @@ var StyledIconContainer = index$9(Box)(function (_ref4) {
   };
 });
 
-var _excluded$f = ["active"];
+var _excluded$h = ["active"];
 var AnimatedIcons = Animated.createAnimatedComponent(StyledFABIcon);
 var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
   var active = _ref.active,
-    iconProps = _objectWithoutProperties(_ref, _excluded$f);
+    iconProps = _objectWithoutProperties(_ref, _excluded$h);
   var rotateAnimation = useRef(new Animated.Value(active ? 1 : 0));
   useEffect(function () {
     var animation = Animated.spring(rotateAnimation.current, {
@@ -14907,7 +15075,7 @@ var ActionItem = function ActionItem(_ref) {
   })), /*#__PURE__*/React__default.createElement(StyledActionItemText, null, title))));
 };
 
-var StyledContainer$2 = index$9(View)({
+var StyledContainer$3 = index$9(View)({
   position: 'absolute',
   left: 0,
   right: 0,
@@ -15003,7 +15171,7 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
     inputRange: [0, 1],
     outputRange: [0, 1]
   });
-  return /*#__PURE__*/React__default.createElement(StyledContainer$2, {
+  return /*#__PURE__*/React__default.createElement(StyledContainer$3, {
     testID: testID,
     pointerEvents: "box-none",
     style: style
@@ -15453,7 +15621,7 @@ var StyledPrefixContainer$1 = index$9(View)(function (_ref4) {
     marginRight: theme.__hd__.list.space.prefixContainerMarginRight
   };
 });
-var StyledSuffixContainer$1 = index$9(View)(function (_ref5) {
+var StyledSuffixContainer$2 = index$9(View)(function (_ref5) {
   var theme = _ref5.theme;
   return {
     marginLeft: theme.__hd__.list.space.suffixContainerMarginLeft
@@ -15505,7 +15673,7 @@ var ListItem = function ListItem(_ref) {
     intent: "body"
   }, title) : title, !!subtitle && /*#__PURE__*/React__default.createElement(Typography.Caption, {
     intent: "subdued"
-  }, subtitle)), suffix && /*#__PURE__*/React__default.createElement(StyledSuffixContainer$1, null, typeof suffix === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
+  }, subtitle)), suffix && /*#__PURE__*/React__default.createElement(StyledSuffixContainer$2, null, typeof suffix === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
     icon: suffix,
     intent: disabled ? 'disabled-text' : 'primary',
     size: "small"
@@ -15518,7 +15686,7 @@ var StyledPrefixContainer = index$9(View)(function (_ref) {
     marginRight: theme.__hd__.list.space.prefixContainerMarginRight
   };
 });
-var StyledSuffixContainer = index$9(View)(function (_ref2) {
+var StyledSuffixContainer$1 = index$9(View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     marginLeft: theme.__hd__.list.space.suffixContainerMarginLeft
@@ -15571,7 +15739,7 @@ var BasicListItem = function BasicListItem(_ref) {
     intent: "body"
   }, title) : title, subtitle && /*#__PURE__*/React__default.createElement(Typography.Caption, {
     intent: "subdued"
-  }, subtitle)), suffix && /*#__PURE__*/React__default.createElement(StyledSuffixContainer, null, typeof suffix === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
+  }, subtitle)), suffix && /*#__PURE__*/React__default.createElement(StyledSuffixContainer$1, null, typeof suffix === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
     icon: suffix,
     size: "small",
     intent: disabled ? 'disabled-text' : 'primary'
@@ -15700,7 +15868,7 @@ function PinCell(_ref) {
   }, value));
 }
 
-function getState(_ref) {
+function getState$1(_ref) {
   var disabled = _ref.disabled,
     error = _ref.error;
   if (disabled) {
@@ -15739,7 +15907,7 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     focused = _useState2[0],
     setFocused = _useState2[1];
-  var state = getState({
+  var state = getState$1({
     disabled: disabled,
     error: error
   });
@@ -15842,7 +16010,7 @@ var THEME_INTENT_MAP = {
   'archived-inverted': 'archivedInverted'
 };
 
-var StyledContainer$1 = index$9(View)(function (_ref) {
+var StyledContainer$2 = index$9(View)(function (_ref) {
   var theme = _ref.theme;
   return {
     flexDirection: 'row',
@@ -15908,7 +16076,7 @@ var StyledStrokeEnd = index$9(View)(function (_ref6) {
   };
 });
 
-var _excluded$e = ["value", "renderValue", "intent", "style", "testID"];
+var _excluded$g = ["value", "renderValue", "intent", "style", "testID"];
 var HalfCircle = function HalfCircle(_ref) {
   var type = _ref.type,
     themeIntent = _ref.themeIntent;
@@ -15929,7 +16097,7 @@ var ProgressCircle = function ProgressCircle(_ref2) {
     intent = _ref2$intent === void 0 ? 'primary' : _ref2$intent,
     style = _ref2.style,
     testID = _ref2.testID,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$e);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$g);
   var theme = useTheme$1();
   var radius = theme.__hd__.progress.sizes.circleDiameter / 2;
   var progressAnimatedValue = useRef(new Animated.Value(0));
@@ -15969,7 +16137,7 @@ var ProgressCircle = function ProgressCircle(_ref2) {
   return /*#__PURE__*/React__default.createElement(View, _extends$1({}, nativeProps, {
     testID: testID,
     style: style
-  }), /*#__PURE__*/React__default.createElement(StyledContainer$1, null, /*#__PURE__*/React__default.createElement(View, null, /*#__PURE__*/React__default.createElement(HalfCircle, {
+  }), /*#__PURE__*/React__default.createElement(StyledContainer$2, null, /*#__PURE__*/React__default.createElement(View, null, /*#__PURE__*/React__default.createElement(HalfCircle, {
     type: "foreground",
     themeIntent: intent
   }), /*#__PURE__*/React__default.createElement(Animated.View, {
@@ -16045,14 +16213,14 @@ var StyledInner = index$9(Animated.View)(function (_ref2) {
   };
 });
 
-var _excluded$d = ["value", "intent", "style", "testID"];
+var _excluded$f = ["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$d);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$f);
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     width = _useState2[0],
@@ -16098,9 +16266,99 @@ var ProgressBar = function ProgressBar(_ref) {
   }));
 };
 
+var StyledStepContainer = index$9(Box)({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  alignItems: 'center'
+});
+var StyledStep = index$9(Box)(function (_ref) {
+  var theme = _ref.theme,
+    themeState = _ref.themeState,
+    themeWidth = _ref.themeWidth;
+  return {
+    height: theme.__hd__.progress.sizes.stepHeight,
+    borderRadius: theme.__hd__.progress.radii["default"],
+    backgroundColor: theme.__hd__.progress.colors.step[themeState],
+    width: themeWidth
+  };
+});
+var StyledSingleStepContainer = index$9(Box)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    height: theme.__hd__.progress.sizes.stepHeight,
+    borderRadius: theme.__hd__.progress.radii["default"],
+    backgroundColor: theme.__hd__.progress.colors.step.current,
+    width: '100%',
+    position: 'relative'
+  };
+});
+var StyledSingleStep = index$9(Box)(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    height: theme.__hd__.progress.sizes.stepHeight,
+    borderRadius: theme.__hd__.progress.radii["default"],
+    backgroundColor: theme.__hd__.progress.colors.step.complete,
+    width: '70%',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0
+  };
+});
+
+var _excluded$e = ["steps", "current", "onLayout"];
+var getStepState = function getStepState(current, index) {
+  if (index < current) {
+    return 'complete';
+  }
+  if (index === current) {
+    return 'current';
+  }
+  return 'incomplete';
+};
+var ProgressStep = function ProgressStep(_ref) {
+  var steps = _ref.steps,
+    current = _ref.current,
+    onLayout = _ref.onLayout,
+    props = _objectWithoutProperties(_ref, _excluded$e);
+  var theme = useTheme$1();
+  var _React$useState = React__default.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    containerWidth = _React$useState2[0],
+    setContainerWidth = _React$useState2[1];
+  var onContainerLayout = function onContainerLayout(event) {
+    setContainerWidth(event.nativeEvent.layout.width);
+    onLayout === null || onLayout === void 0 || onLayout(event);
+  };
+  // Calculate the width for each step
+  var stepWidth = useMemo(function () {
+    var width = 0;
+    if (containerWidth > 0) {
+      width = (containerWidth - (steps - 1) * theme.__hd__.progress.space.stepGap) / steps;
+    }
+    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(StyledStepContainer, _extends$1({}, props, {
+    onLayout: onContainerLayout
+  }), Array.from({
+    length: steps
+  }).map(function (_, index) {
+    return /*#__PURE__*/React__default.createElement(StyledStep, {
+      themeState: getStepState(current - 1, index),
+      themeWidth: stepWidth
+    });
+  }));
+};
+
 var Progress = {
   Circle: ProgressCircle,
-  Bar: ProgressBar
+  Bar: ProgressBar,
+  Step: ProgressStep
 };
 
 var Slider = function Slider(_ref) {
@@ -16243,14 +16501,14 @@ var AnimatedSpinner = function AnimatedSpinner(_ref) {
   }, dotProps))));
 };
 
-var _excluded$c = ["testID", "size", "intent"];
+var _excluded$d = ["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$c);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$d);
   return /*#__PURE__*/React__default.createElement(StyledView$1, nativeProps, /*#__PURE__*/React__default.createElement(StyledSpinnerContainer, {
     testID: testID
   }, /*#__PURE__*/React__default.createElement(AnimatedSpinner, {
@@ -16283,7 +16541,7 @@ var SwipeableAction = function SwipeableAction(_ref) {
   }, children);
 };
 
-var _excluded$b = ["children", "state", "onStateChange", "leftActions", "leftActionsWidth", "rightActions", "rightActionsWidth", "variant"];
+var _excluded$c = ["children", "state", "onStateChange", "leftActions", "leftActionsWidth", "rightActions", "rightActionsWidth", "variant"];
 var renderActions = function renderActions(actions, width, progress, direction) {
   var trans = progress.interpolate({
     inputRange: [0, 1],
@@ -16312,7 +16570,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$b);
+    swipeableProps = _objectWithoutProperties(_ref, _excluded$c);
   var theme = useTheme();
   var _useWindowDimensions = useWindowDimensions(),
     width = _useWindowDimensions.width;
@@ -16663,7 +16921,7 @@ var StyledSectionList = index$9(SectionList)(function (_ref4) {
   };
 });
 
-var _excluded$a = ["keyExtractor", "loading", "onEndReached", "onQueryChange", "sections", "renderItem", "sectionListRef"];
+var _excluded$b = ["keyExtractor", "loading", "onEndReached", "onQueryChange", "sections", "renderItem", "sectionListRef"];
 var BaseOptionList = function BaseOptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -16672,7 +16930,7 @@ var BaseOptionList = function BaseOptionList(_ref) {
     sections = _ref.sections,
     renderItem = _ref.renderItem,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$a);
+    rest = _objectWithoutProperties(_ref, _excluded$b);
   var theme = useTheme$1();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -16742,7 +17000,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$9 = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
+var _excluded$a = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
 var OptionList$1 = function OptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -16753,7 +17011,7 @@ var OptionList$1 = 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 = value.includes(info.item.value);
@@ -16944,7 +17202,7 @@ var StyledOptionList = index$9(BaseOptionList)(function (_ref) {
   };
 });
 
-var _excluded$8 = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
+var _excluded$9 = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
 var OptionList = function OptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -16955,7 +17213,7 @@ var OptionList = function OptionList(_ref) {
     renderOption = _ref.renderOption,
     value = _ref.value,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$8);
+    rest = _objectWithoutProperties(_ref, _excluded$9);
   var renderItem = function renderItem(info) {
     var item = info.item;
     var selected = item.value === value;
@@ -17105,7 +17363,7 @@ var index$4 = Object.assign(SingleSelect, {
   Multi: MultiSelect
 });
 
-var StyledContainer = index$9(Box)(function (_ref) {
+var StyledContainer$1 = index$9(Box)(function (_ref) {
   var theme = _ref.theme,
     themeIntent = _ref.themeIntent,
     themeVariant = _ref.themeVariant;
@@ -17123,7 +17381,7 @@ var StyledGradientContainer = index$9(Box)(function (_ref2) {
   };
 });
 
-var _excluded$7 = ["intent", "variant", "style", "onLayout"];
+var _excluded$8 = ["intent", "variant", "style", "onLayout"];
 var AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
 var gradientPositions = {
   start: {
@@ -17155,7 +17413,7 @@ var Skeleton = function Skeleton(_ref) {
     variant = _ref$variant === void 0 ? 'rounded' : _ref$variant,
     style = _ref.style,
     onLayout = _ref.onLayout,
-    props = _objectWithoutProperties(_ref, _excluded$7);
+    props = _objectWithoutProperties(_ref, _excluded$8);
   var theme = useTheme();
   var colors = useMemo(function () {
     return getGradientColors(theme, intent);
@@ -17191,7 +17449,7 @@ var Skeleton = function Skeleton(_ref) {
     }
     onLayout === null || onLayout === void 0 || onLayout(e);
   }, []);
-  return /*#__PURE__*/React__default.createElement(StyledContainer, _extends$1({
+  return /*#__PURE__*/React__default.createElement(StyledContainer$1, _extends$1({
     style: style,
     themeVariant: variant,
     themeIntent: intent,
@@ -17287,7 +17545,7 @@ var StyledSuccessModal = index$9(ModalWrapper)({
   width: '100%'
 });
 
-var _excluded$6 = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"];
+var _excluded$7 = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"];
 var renderImage = function renderImage(image) {
   if ( /*#__PURE__*/isValidElement(image)) {
     return /*#__PURE__*/React__default.cloneElement(image, {
@@ -17313,7 +17571,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$6);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$7);
   var showSecondaryButton = secondaryCtaText && onSecondaryCtaPress;
   return /*#__PURE__*/React__default.createElement(StyledSuccessContainer, _extends$1({
     testID: testID,
@@ -18331,7 +18589,7 @@ var StyledText = index$9(Typography.Caption)(function (_ref2) {
   };
 });
 
-var _excluded$5 = ["content", "variant", "intent", "style", "testID"];
+var _excluded$6 = ["content", "variant", "intent", "style", "testID"];
 var Tag = function Tag(_ref) {
   var content = _ref.content,
     _ref$variant = _ref.variant,
@@ -18340,7 +18598,7 @@ var Tag = function Tag(_ref) {
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$5);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$6);
   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,
@@ -18658,10 +18916,10 @@ var ToolbarGroup = function ToolbarGroup(_ref) {
   }));
 };
 
-var _excluded$4 = ["children"];
+var _excluded$5 = ["children"];
 var Toolbar = function Toolbar(_ref) {
   var children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$4);
+    rest = _objectWithoutProperties(_ref, _excluded$5);
   return /*#__PURE__*/React__default.createElement(ToolbarWrapper, rest, children);
 };
 var index$1 = Object.assign(Toolbar, {
@@ -18680,7 +18938,7 @@ var StyledIconWrapper = index$9(AnimatedBox)(function (_ref) {
   };
 });
 
-var _excluded$3 = ["options", "value", "onChange", "readonly", "disabled"];
+var _excluded$4 = ["options", "value", "onChange", "readonly", "disabled"];
 var Rate = function Rate(_ref) {
   var options = _ref.options,
     value = _ref.value,
@@ -18689,7 +18947,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$3);
+    otherProps = _objectWithoutProperties(_ref, _excluded$4);
   var valueIndex = useMemo(function () {
     return options.findIndex(function (item) {
       return item.value === value;
@@ -35854,7 +36112,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
         break;
     }
   }, []);
-  return /*#__PURE__*/React__default.createElement(StyledContainer$4, {
+  return /*#__PURE__*/React__default.createElement(StyledContainer$5, {
     testID: testID
   }, /*#__PURE__*/React__default.createElement(StyledLabelContainerInsideTextInput, {
     themeVariant: "text",
@@ -36080,34 +36338,294 @@ function AnimatedScroller(_ref) {
   }));
 }
 
-var _excluded$2 = ["fabProps"];
+var _excluded$3 = ["fabProps"];
 var ScrollViewWithFAB = function ScrollViewWithFAB(_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(ScrollView, props),
     fabProps: fabProps
   });
 };
 
-var _excluded$1 = ["fabProps"];
+var _excluded$2 = ["fabProps"];
 function FlatListWithFAB(_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(FlatList, props),
     fabProps: fabProps
   });
 }
 
-var _excluded = ["fabProps"];
+var _excluded$1 = ["fabProps"];
 function SectionListWithFAB(_ref) {
   var fabProps = _ref.fabProps,
-    props = _objectWithoutProperties(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded$1);
   return /*#__PURE__*/React__default.createElement(AnimatedScroller, {
     ScrollComponent: /*#__PURE__*/React__default.createElement(SectionList, props),
     fabProps: fabProps
   });
 }
 
-export { Accordion, Alert, Attachment, index$8 as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar, Card$1 as Card, index$7 as Carousel, Checkbox, Chip, Collapse, ContentNavigator, DatePicker, Divider, index$6 as Drawer, Empty, ErrorComponent as Error, FAB, FlatListWithFAB, HeroDesignProvider, Icon, Image, List, PageControl, PinInput, Portal$1 as Portal, Progress, CompoundRadio as Radio, Rate, RefreshControl, index as RichTextEditor, ScrollViewWithFAB, SectionHeading, SectionListWithFAB, index$4 as Select, Skeleton, Slider, Spinner, Success, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, getTheme$1 as getTheme, jobsSystemPalette, scale, swagDarkSystemPalette, swagSystemPalette as swagLightSystemPalette, swagSystemPalette$1 as swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };
+var StyledContainer = index$9(View)(function () {
+  return {
+    width: '100%'
+  };
+});
+var StyledInputContainer = index$9(View)(function (_ref) {
+  var theme = _ref.theme,
+    themeFocused = _ref.themeFocused;
+  return {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: theme.__hd__.search.space.containerHorizontalPadding,
+    paddingVertical: theme.__hd__.search.space.containerVerticalPadding,
+    backgroundColor: theme.__hd__.search.colors.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
+  };
+});
+var StyledAffixContainer = index$9(View)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    paddingHorizontal: theme.__hd__.search.space.prefixHorizontalPadding
+  };
+});
+var StyledSuffixContainer = index$9(View)(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: theme.__hd__.search.sizes.surfixSize,
+    height: theme.__hd__.search.sizes.surfixSize,
+    backgroundColor: theme.__hd__.search.colors.surfixBackground,
+    borderRadius: theme.__hd__.search.radii.surfix
+  };
+});
+var StyledInput = index$9(TextInput$1)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    textAlignVertical: 'center',
+    fontSize: theme.__hd__.search.fontSizes.text,
+    alignSelf: 'stretch',
+    flexGrow: 1,
+    flexShrink: 1,
+    marginHorizontal: theme.__hd__.search.space.inputHorizontalMargin,
+    paddingVertical: 0,
+    fontFamily: theme.__hd__.search.fonts.text
+  };
+});
+var StyledHandlerContainer = index$9(View)(function (_ref5) {
+  var theme = _ref5.theme;
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    flexGrow: 1,
+    height: '100%',
+    marginHorizontal: theme.__hd__.search.space.inputHorizontalMargin
+  };
+});
+var StyledBadge = index$9(Badge$1)(function (_ref6) {
+  var theme = _ref6.theme;
+  return {
+    position: 'absolute',
+    top: theme.__hd__.search.space.badgeTop,
+    right: theme.__hd__.search.space.badgeRight,
+    zIndex: 2
+  };
+});
+
+var renderPrefix = function renderPrefix(_ref) {
+  var prefix = _ref.prefix;
+  return typeof prefix === 'string' ? /*#__PURE__*/React__default.createElement(StyledAffixContainer, null, /*#__PURE__*/React__default.createElement(Icon, {
+    intent: "text",
+    testID: "input-prefix",
+    icon: prefix,
+    size: "small"
+  })) : prefix;
+};
+var renderSuffix = function renderSuffix(_ref2) {
+  var suffix = _ref2.suffix;
+  return typeof suffix === 'string' ? /*#__PURE__*/React__default.createElement(StyledAffixContainer, null, /*#__PURE__*/React__default.createElement(Icon, {
+    intent: "text",
+    testID: "input-suffix",
+    icon: suffix,
+    size: "small"
+  })) : suffix;
+};
+
+var SearchTwoLine = function SearchTwoLine(props) {
+  var _props$prefix = props.prefix,
+    prefix = _props$prefix === void 0 ? 'search-outlined' : _props$prefix,
+    suffix = props.suffix,
+    style = props.style,
+    label = props.label,
+    content = props.content,
+    testID = props.testID;
+  return /*#__PURE__*/React__default.createElement(StyledContainer, {
+    style: style,
+    testID: testID
+  }, /*#__PURE__*/React__default.createElement(StyledInputContainer, {
+    themeFocused: false
+  }, renderPrefix({
+    prefix: prefix
+  }), /*#__PURE__*/React__default.createElement(StyledHandlerContainer, null, /*#__PURE__*/React__default.createElement(Typography.Caption, {
+    fontWeight: "semi-bold"
+  }, label), content), !!suffix && renderSuffix({
+    suffix: suffix
+  })));
+};
+
+var _excluded = ["prefix", "suffix", "style", "allowFontScaling", "accessibilityLabelledBy", "editable", "maxLength", "value", "defaultValue", "placeholder", "disabled", "testID"];
+var getState = function getState(_ref) {
+  var disabled = _ref.disabled,
+    editable = _ref.editable,
+    isEmptyValue = _ref.isEmptyValue;
+  if (disabled) {
+    return 'disabled';
+  }
+  if (!editable) {
+    return 'readonly';
+  }
+  if (!isEmptyValue) {
+    return 'filled';
+  }
+  return 'default';
+};
+var renderInput = function renderInput(_ref2) {
+  var nativeInputProps = _ref2.nativeInputProps,
+    ref = _ref2.ref;
+  return /*#__PURE__*/React__default.createElement(StyledInput, _extends$1({}, nativeInputProps, {
+    ref: ref
+  }));
+};
+var SearchOneLine = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _ref3;
+  var _props$prefix = props.prefix,
+    prefix = _props$prefix === void 0 ? 'search-outlined' : _props$prefix,
+    suffix = props.suffix,
+    style = props.style,
+    allowFontScaling = props.allowFontScaling,
+    accessibilityLabelledBy = props.accessibilityLabelledBy,
+    _props$editable = props.editable,
+    editable = _props$editable === void 0 ? true : _props$editable,
+    maxLength = props.maxLength,
+    value = props.value,
+    defaultValue = props.defaultValue,
+    placeholder = props.placeholder,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    testID = props.testID,
+    nativeProps = _objectWithoutProperties(props, _excluded);
+  var _React$useState = React__default.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isFocused = _React$useState2[0],
+    setIsFocused = _React$useState2[1];
+  var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
+  var isEmptyValue = displayText.length === 0;
+  var state = getState({
+    disabled: disabled,
+    editable: editable,
+    isFocused: isFocused,
+    isEmptyValue: isEmptyValue
+  });
+  var innerTextInput = React__default.useRef();
+  React__default.useImperativeHandle(ref, function () {
+    return {
+      // we don't expose this method, it's for testing https://medium.com/developer-rants/how-to-test-useref-without-mocking-useref-699165f4994e
+      getNativeTextInputRef: function getNativeTextInputRef() {
+        return innerTextInput.current;
+      },
+      setNativeProps: function setNativeProps(args) {
+        var _innerTextInput$curre;
+        return (_innerTextInput$curre = innerTextInput.current) === null || _innerTextInput$curre === void 0 ? void 0 : _innerTextInput$curre.setNativeProps(args);
+      },
+      focus: function focus() {
+        var _innerTextInput$curre2;
+        (_innerTextInput$curre2 = innerTextInput.current) === null || _innerTextInput$curre2 === void 0 || _innerTextInput$curre2.focus();
+      },
+      blur: function blur() {
+        var _innerTextInput$curre3;
+        return (_innerTextInput$curre3 = innerTextInput.current) === null || _innerTextInput$curre3 === void 0 ? void 0 : _innerTextInput$curre3.blur();
+      },
+      clear: function clear() {
+        var _innerTextInput$curre4;
+        return (_innerTextInput$curre4 = innerTextInput.current) === null || _innerTextInput$curre4 === void 0 ? void 0 : _innerTextInput$curre4.clear();
+      },
+      isFocused: function isFocused() {
+        var _innerTextInput$curre5;
+        return ((_innerTextInput$curre5 = innerTextInput.current) === null || _innerTextInput$curre5 === void 0 ? void 0 : _innerTextInput$curre5.isFocused()) || false;
+      }
+    };
+  }, [innerTextInput]);
+  return /*#__PURE__*/React__default.createElement(StyledContainer, {
+    pointerEvents: state === 'disabled' || state === 'readonly' ? 'none' : 'auto',
+    testID: testID,
+    style: style
+  }, /*#__PURE__*/React__default.createElement(StyledInputContainer, {
+    themeFocused: isFocused
+  }, renderPrefix({
+    prefix: prefix
+  }), renderInput({
+    nativeInputProps: _objectSpread2(_objectSpread2({
+      testID: 'text-input',
+      accessibilityState: {
+        disabled: state === 'disabled' || state === 'readonly'
+      },
+      accessibilityLabelledBy: accessibilityLabelledBy,
+      allowFontScaling: allowFontScaling
+    }, nativeProps), {}, {
+      onFocus: function onFocus(event) {
+        var _nativeProps$onFocus;
+        setIsFocused(true);
+        (_nativeProps$onFocus = nativeProps.onFocus) === null || _nativeProps$onFocus === void 0 || _nativeProps$onFocus.call(nativeProps, event);
+      },
+      onBlur: function onBlur(event) {
+        var _nativeProps$onBlur;
+        setIsFocused(false);
+        (_nativeProps$onBlur = nativeProps.onBlur) === null || _nativeProps$onBlur === void 0 || _nativeProps$onBlur.call(nativeProps, event);
+      },
+      editable: editable,
+      maxLength: maxLength,
+      value: value,
+      defaultValue: defaultValue,
+      placeholder: placeholder
+    }),
+    ref: function ref(rnTextInputRef) {
+      innerTextInput.current = rnTextInputRef;
+    }
+  }), !!suffix && renderSuffix({
+    suffix: suffix
+  })));
+});
+
+var SearchSuffixIcon = function SearchSuffixIcon(props) {
+  var suffix = props.suffix,
+    testID = props.testID,
+    style = props.style,
+    badge = props.badge;
+  return /*#__PURE__*/React__default.createElement(StyledSuffixContainer, {
+    testID: testID,
+    style: style
+  }, !!badge && /*#__PURE__*/React__default.createElement(StyledBadge, _extends$1({
+    intent: "primary"
+  }, badge, {
+    size: "small"
+  })), renderSuffix({
+    suffix: suffix
+  }));
+};
+
+var Search = {
+  OneLine: SearchOneLine,
+  TwoLine: SearchTwoLine,
+  SuffixIcon: SearchSuffixIcon
+};
+
+export { Accordion, Alert, Attachment, index$8 as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar, Card$1 as Card, index$7 as Carousel, Checkbox, Chip, Collapse, ContentNavigator, DatePicker, Divider, index$6 as Drawer, Empty, ErrorComponent as Error, FAB, FlatListWithFAB, HeroDesignProvider, Icon, Image, List, PageControl, PinInput, Portal$1 as Portal, Progress, CompoundRadio as Radio, Rate, RefreshControl, index as RichTextEditor, ScrollViewWithFAB, Search, SectionHeading, SectionListWithFAB, index$4 as Select, Skeleton, Slider, Spinner, Success, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, getTheme$1 as getTheme, jobsSystemPalette, scale, swagDarkSystemPalette, swagLightJobsSystemPalette, swagSystemPalette as swagLightSystemPalette, swagSystemPalette$1 as swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };