@hero-design/rn 8.68.0 → 8.70.0

package/es/index.js

@@ -1358,7 +1358,8 @@ var BASE_COLORS = {
   theatreGold: '#a56822',
   uniformGreen: '#4d4628',
   yellow: '#fadb14',
-  windsorGrey: '#606065'
+  windsorGrey: '#606065',
+  woodsmoke: '#121214'
 };
 var colorScales = Object.entries(BASE_COLORS).reduce(function (acc, _ref16) {
   var _ref17 = _slicedToArray(_ref16, 2),
@@ -1739,9 +1740,13 @@ var palette$4 = Object.assign(Object.assign({}, palette$9), {
   violet: violet1$1.base,
   mauve: mauve$1.base
 });
-var violet$3 = colorScales.violet;
+var violet$3 = colorScales.violet,
+  woodsmoke = colorScales.woodsmoke;
 var palette$3 = Object.assign(Object.assign({}, palette$9), {
-  violet: violet$3.base
+  violetLight90: violet$3.lighten90,
+  offBlack: woodsmoke.base,
+  offBlackLight30: woodsmoke.lighten30,
+  offBlackLight50: woodsmoke.lighten50
 });
 var scarletGum = colorScales.scarletGum,
   violet1 = colorScales.violet1,
@@ -1907,18 +1912,33 @@ var swagDarkBrandSystemPalette = {
 };
 var swagDarkSystemPalette = _objectSpread2(_objectSpread2({}, globalPalette), swagDarkBrandSystemPalette);
 
+var swagLightGlobalPalette = _objectSpread2(_objectSpread2({}, globalPalette$1), {}, {
+  onDefaultGlobalSurface: palette$3.offBlack,
+  mutedOnDefaultGlobalSurface: palette$3.offBlackLight30,
+  inactiveOnDefaultGlobalSurface: palette$3.offBlackLight50,
+  primaryOutline: palette$3.offBlack,
+  inactiveOutline: palette$3.offBlackLight50
+});
+
 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: '#B382FD'
+  decorativePrimary: '#fdfbff',
+  decorativePrimarySurface: '#dacce4'
 };
-var swagSystemPalette = _objectSpread2(_objectSpread2({}, globalPalette$1), swagBrandSystemPallete);
+var swagSystemPalette = _objectSpread2(_objectSpread2({}, swagLightGlobalPalette), swagBrandSystemPallete);
+
+var swagLightJobsSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette), {}, {
+  secondary: '#40d1ff',
+  onSecondary: '#460078',
+  decorativeSecondary: '#fdfbff',
+  decorativeSecondarySurface: '#d9f6ff'
+});
 
 var workBrandSystemPallete = {
   primary: palette.black,
@@ -2365,17 +2385,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: {
@@ -2387,7 +2412,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,
@@ -2513,7 +2540,8 @@ var getCardTheme = function getCardTheme(theme) {
     indicatorWidth: theme.sizes.medium
   };
   var radii = {
-    "default": theme.radii.large
+    "default": theme.radii.large,
+    superRound: theme.radii.xxxlarge
   };
   return {
     colors: colors,
@@ -2602,21 +2630,23 @@ var getCheckboxTheme = function getCheckboxTheme(theme) {
 
 var getChipTheme = function getChipTheme(theme) {
   var colors = {
-    primaryBackground: theme.colors.darkGlobalSurface,
     secondaryBackground: theme.colors.highlightedSurface,
     filledBackground: theme.colors.defaultGlobalSurface,
-    outlinedBackground: 'transparent',
-    wrapperBorder: theme.colors.primaryOutline,
     wrapperSelectedBorder: 'transparent',
-    selectedPrimaryText: theme.colors.defaultGlobalSurface
+    outlinedDefaultBackground: theme.colors.defaultGlobalSurface,
+    outlinedSelectedBackground: theme.colors.secondaryOutline,
+    outlinedSelectedBorder: theme.colors.primaryOutline,
+    outlinedDefaultBorder: theme.colors.disabledOnDefaultGlobalSurface
   };
   var space = {
     wrapperHorizontalPadding: theme.space.smallMedium,
     wrapperVerticalPadding: theme.space.small,
-    iconWrapperMarginRight: theme.space.small
+    iconWrapperHorizontalMargin: theme.space.small,
+    outlinedSelectedMarginTop: -theme.space.xxsmall
   };
   var sizes = {
-    wrapperBorder: theme.borderWidths.base
+    outlinedDefaultBorder: theme.borderWidths.base,
+    outlinedSelectedBorder: theme.borderWidths.medium
   };
   var radii = {
     wrapper: theme.radii.rounded
@@ -3040,20 +3070,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
   };
 };
 
@@ -6961,7 +7001,7 @@ var StyledText$3 = index$9(Text$1)(function (_ref) {
   });
 });
 
-var _excluded$E = ["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,
@@ -6974,7 +7014,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$E);
+    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,
@@ -7004,7 +7044,7 @@ var StyledCaption = index$9(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$D = ["children", "fontWeight", "intent", "allowFontScaling"];
+var _excluded$E = ["children", "fontWeight", "intent", "allowFontScaling"];
 var Caption = function Caption(_ref) {
   var children = _ref.children,
     _ref$fontWeight = _ref.fontWeight,
@@ -7013,7 +7053,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$D);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$E);
   return /*#__PURE__*/React__default.createElement(StyledCaption, _extends$1({}, nativeProps, {
     themeFontWeight: fontWeight,
     themeIntent: intent,
@@ -7021,7 +7061,7 @@ var Caption = function Caption(_ref) {
   }), children);
 };
 
-var StyledLabel$1 = index$9(Text$1)(function (_ref) {
+var StyledLabel = index$9(Text$1)(function (_ref) {
   var themeIntent = _ref.themeIntent,
     theme = _ref.theme;
   return {
@@ -7032,15 +7072,15 @@ var StyledLabel$1 = index$9(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$C = ["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$C);
-  return /*#__PURE__*/React__default.createElement(StyledLabel$1, _extends$1({}, nativeProps, {
+    nativeProps = _objectWithoutProperties(_ref, _excluded$D);
+  return /*#__PURE__*/React__default.createElement(StyledLabel, _extends$1({}, nativeProps, {
     themeIntent: intent,
     allowFontScaling: allowFontScaling
   }), children);
@@ -7060,7 +7100,7 @@ var StyledTitle$1 = index$9(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$B = ["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,
@@ -7071,7 +7111,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$B);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$C);
   return /*#__PURE__*/React__default.createElement(StyledTitle$1, _extends$1({}, nativeProps, {
     themeLevel: level,
     themeTypeface: typeface,
@@ -7106,7 +7146,7 @@ var StyledBody$1 = index$9(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$A = ["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,
@@ -7117,7 +7157,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$A);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$B);
   return /*#__PURE__*/React__default.createElement(StyledBody$1, _extends$1({}, nativeProps, {
     themeTypeface: typeface,
     themeIntent: intent,
@@ -7684,10 +7724,10 @@ var StyledHeroIcon = index$9(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$z = ["style"];
+var _excluded$A = ["style"];
 var AnimatedIcon = function AnimatedIcon(_ref) {
   var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$z);
+    otherProps = _objectWithoutProperties(_ref, _excluded$A);
   var rotateAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(rotateAnimation.current, {
@@ -7792,7 +7832,7 @@ var AccordionItem = function AccordionItem(_ref) {
   }, content));
 };
 
-var _excluded$y = ["key"];
+var _excluded$z = ["key"];
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
     activeItemKey = _ref.activeItemKey,
@@ -7813,7 +7853,7 @@ var Accordion = function Accordion(_ref) {
     testID: testID
   }, items.map(function (_ref2, index) {
     var key = _ref2.key,
-      props = _objectWithoutProperties(_ref2, _excluded$y);
+      props = _objectWithoutProperties(_ref2, _excluded$z);
     var open = _activeItemKey === key;
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: key
@@ -7848,7 +7888,7 @@ var IconContainer$1 = index$9(View)(function (_ref2) {
     paddingLeft: theme.__hd__.alert.space.iconLeftPadding
   };
 });
-var StyledIcon$2 = index$9(Icon)(function (_ref3) {
+var StyledIcon$1 = index$9(Icon)(function (_ref3) {
   var theme = _ref3.theme,
     themeIntent = _ref3.themeIntent;
   return {
@@ -7907,7 +7947,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$2, {
+  }, /*#__PURE__*/React__default.createElement(StyledIcon$1, {
     icon: icon,
     size: "small",
     themeIntent: intent
@@ -7948,7 +7988,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$2, {
+  }, actionLabel) : /*#__PURE__*/React__default.createElement(StyledIcon$1, {
     icon: "cancel",
     size: "small",
     themeIntent: intent
@@ -8307,7 +8347,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$x = ["theme"];
+var _excluded$y = ["theme"];
 var getThemeValue = function getThemeValue(theme, key, props) {
   var propConfig = config[key];
   var propValue = props[key];
@@ -8334,18 +8374,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$x);
+    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$w = ["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$w);
+    otherProps = _objectWithoutProperties(_ref, _excluded$x);
   return /*#__PURE__*/React__default.createElement(StyledBox, _extends$1({}, otherProps, {
     style: style,
     testID: testID
@@ -8564,7 +8604,7 @@ var StyledStatus = index$9(Animated.View)(function (_ref3) {
   };
 });
 
-var _excluded$v = ["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,
@@ -8573,7 +8613,7 @@ var Status = function Status(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$v);
+    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);
@@ -8606,7 +8646,7 @@ var Status = function Status(_ref) {
   }));
 };
 
-var _excluded$u = ["content", "visible", "max", "intent", "style", "testID", "size"];
+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';
@@ -8623,7 +8663,7 @@ var Badge = function Badge(_ref) {
     testID = _ref.testID,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$u);
+    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);
@@ -8713,7 +8753,7 @@ var StyledBottomBarText = index$9(Typography.Caption)(function (_ref3) {
   };
 });
 
-var _excluded$t = ["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;
@@ -8724,7 +8764,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
     selectedTabKey = _ref.selectedTabKey,
     tabs = _ref.tabs,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$t);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$u);
   var insets = useSafeAreaInsets();
   /**
    * List of loaded tabs, tabs will be loaded when navigated to.
@@ -8810,13 +8850,13 @@ var StyledDivider = index$9(View)(function (_ref) {
   }, horizontalMargin), verticalMargin);
 });
 
-var _excluded$s = ["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$s);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$t);
   return /*#__PURE__*/React__default.createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
     themeMarginVertical: marginVertical,
@@ -8836,8 +8876,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"],
@@ -8851,15 +8912,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,
@@ -8870,8 +8931,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,
@@ -8880,16 +8941,24 @@ var StyledFooter = index$9(View)(function (_ref4) {
     flexDirection: 'row'
   };
 });
-var StyledIconWrapper$4 = index$9(View)(function (_ref5) {
-  var theme = _ref5.theme;
+var StyledIconWrapper$3 = 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,
@@ -8897,6 +8966,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]
@@ -8940,7 +9012,7 @@ var StyledLoadingDot = index$9(View)(function (_ref) {
   }, themeStyling());
 });
 
-var _excluded$r = ["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) {
@@ -8972,7 +9044,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
     size = _ref2$size === void 0 ? 12 : _ref2$size,
     testID = _ref2.testID,
     themeVariant = _ref2.themeVariant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$r);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$s);
   var progressAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(progressAnimation.current, {
@@ -9383,35 +9455,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$3, 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$q = ["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$q);
+    props = _objectWithoutProperties(_ref, _excluded$r);
   var _useContext = useContext(BottomSheetContext),
     setInternalShowDivider = _useContext.setInternalShowDivider;
   var onScrollBeginDrag = useCallback(function (e) {
@@ -9457,7 +9537,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
@@ -9515,6 +9597,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,
@@ -9531,7 +9615,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
@@ -9540,6 +9624,7 @@ var BottomSheet = function BottomSheet(_ref) {
       }]
     }]
   }, header !== undefined ? /*#__PURE__*/React__default.createElement(Header, {
+    variant: variant,
     content: header,
     showDivider: internalShowDivider,
     onRequestClose: onRequestClose,
@@ -9548,7 +9633,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
@@ -12223,12 +12308,12 @@ var Indicator = index$9(View)(function (_ref2) {
   };
 });
 
-var _excluded$p = ["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$p);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$q);
   return /*#__PURE__*/React__default.createElement(StyledDataCard, nativeProps, /*#__PURE__*/React__default.createElement(Indicator, {
     themeIntent: intent,
     testID: "data-card-indicator"
@@ -12237,22 +12322,26 @@ var DataCard = function DataCard(_ref) {
 
 var StyledCard$1 = index$9(View)(function (_ref) {
   var theme = _ref.theme,
-    themeIntent = _ref.themeIntent;
+    themeIntent = _ref.themeIntent,
+    themeVariant = _ref.themeVariant;
   return _objectSpread2(_objectSpread2({}, themeIntent !== undefined && {
     backgroundColor: theme.__hd__.card.colors[themeIntent]
   }), {}, {
-    borderRadius: theme.__hd__.card.radii["default"],
+    borderRadius: themeVariant === 'basic' ? theme.__hd__.card.radii["default"] : theme.__hd__.card.radii.superRound,
     overflow: 'hidden'
   });
 });
 
-var _excluded$o = ["intent", "children"];
+var _excluded$p = ["intent", "children", "variant"];
 var Card = function Card(_ref) {
   var intent = _ref.intent,
     children = _ref.children,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$o);
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'basic' : _ref$variant,
+    nativeProps = _objectWithoutProperties(_ref, _excluded$p);
   return /*#__PURE__*/React__default.createElement(StyledCard$1, _extends$1({}, nativeProps, {
-    themeIntent: intent
+    themeIntent: intent,
+    themeVariant: variant
   }), children);
 };
 var Card$1 = Object.assign(Card, {
@@ -12511,7 +12600,7 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 CardCarousel.displayName = 'CardCarousel';
 
-var _excluded$n = ["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,
@@ -12519,7 +12608,7 @@ var Image = function Image(_ref) {
     size = _ref$size === void 0 ? '6xlarge' : _ref$size,
     testID = _ref.testID,
     style = _ref.style,
-    imageNativeProps = _objectWithoutProperties(_ref, _excluded$n);
+    imageNativeProps = _objectWithoutProperties(_ref, _excluded$o);
   var theme = useTheme();
   var imageSize = theme.__hd__.image.sizes[size];
   return /*#__PURE__*/React__default.createElement(Image$1, _extends$1({
@@ -12653,7 +12742,7 @@ var CarouselItem = function CarouselItem(_ref) {
   }, heading), !!body && /*#__PURE__*/React__default.createElement(Typography.Body, null, body)));
 };
 
-var _excluded$m = ["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),
@@ -12680,7 +12769,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$m);
+    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();
@@ -12804,26 +12893,19 @@ var StyledChipWrapper = index$9(TouchableOpacity)(function (_ref) {
     }
   };
   var getBorderStyles = function getBorderStyles() {
-    var commonStyle = {
-      borderWidth: theme.__hd__.chip.sizes.wrapperBorder
-    };
-    if (themeSelected) {
-      return _objectSpread2(_objectSpread2({}, commonStyle), {}, {
-        borderColor: theme.__hd__.chip.colors.wrapperSelectedBorder
-      });
-    }
     switch (themeVariant) {
       case 'outlined':
         {
-          return _objectSpread2(_objectSpread2({}, commonStyle), {}, {
-            borderColor: theme.__hd__.chip.colors.wrapperBorder
-          });
+          return {
+            borderColor: themeSelected ? theme.__hd__.chip.colors.outlinedSelectedBorder : theme.__hd__.chip.colors.outlinedDefaultBorder,
+            borderWidth: themeSelected ? theme.__hd__.chip.sizes.outlinedSelectedBorder : theme.__hd__.chip.sizes.outlinedDefaultBorder
+          };
         }
       case 'filled':
         {
-          return _objectSpread2(_objectSpread2({}, commonStyle), {}, {
+          return {
             borderColor: theme.__hd__.chip.colors.wrapperSelectedBorder
-          });
+          };
         }
     }
   };
@@ -12833,7 +12915,7 @@ var StyledChipWrapper = index$9(TouchableOpacity)(function (_ref) {
         case 'outlined':
           {
             return {
-              backgroundColor: theme.__hd__.chip.colors.primaryBackground
+              backgroundColor: themeSelected ? theme.__hd__.chip.colors.outlinedSelectedBackground : theme.__hd__.chip.colors.outlinedDefaultBackground
             };
           }
         case 'filled':
@@ -12846,7 +12928,7 @@ var StyledChipWrapper = index$9(TouchableOpacity)(function (_ref) {
         case 'outlined':
           {
             return {
-              backgroundColor: theme.__hd__.chip.colors.outlinedBackground
+              backgroundColor: theme.__hd__.chip.colors.outlinedDefaultBackground
             };
           }
         case 'filled':
@@ -12864,33 +12946,11 @@ var StyledChipWrapper = index$9(TouchableOpacity)(function (_ref) {
     borderRadius: theme.__hd__.chip.radii.wrapper,
     paddingVertical: theme.__hd__.chip.space.wrapperVerticalPadding,
     paddingHorizontal: theme.__hd__.chip.space.wrapperHorizontalPadding,
-    borderWidth: theme.__hd__.chip.sizes.wrapperBorder
+    marginTop: themeSelected ? theme.__hd__.chip.space.outlinedSelectedMarginTop : undefined
   }, getShadowStyles()), getBorderStyles()), getBackgroundStyles());
 });
-var StyledIconWrapper$3 = index$9(Box)(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    marginRight: theme.__hd__.chip.space.iconWrapperMarginRight
-  };
-});
-var StyledLabel = index$9(Typography.Body)(function (_ref3) {
-  var themeSelected = _ref3.themeSelected,
-    themeVariant = _ref3.themeVariant,
-    theme = _ref3.theme;
-  return {
-    color: themeSelected && themeVariant === 'outlined' ? theme.__hd__.chip.colors.selectedPrimaryText : undefined
-  };
-});
-var StyledIcon$1 = index$9(Icon)(function (_ref4) {
-  var themeSelected = _ref4.themeSelected,
-    themeVariant = _ref4.themeVariant,
-    theme = _ref4.theme;
-  return {
-    color: themeSelected && themeVariant === 'outlined' ? theme.__hd__.chip.colors.selectedPrimaryText : undefined
-  };
-});
 
-var _excluded$l = ["label", "variant", "selected", "icon", "onPress"];
+var _excluded$m = ["label", "variant", "selected", "icon", "onPress", "showSelectedIcon"];
 var Chip = function Chip(_ref) {
   var label = _ref.label,
     _ref$variant = _ref.variant,
@@ -12899,31 +12959,27 @@ var Chip = function Chip(_ref) {
     selected = _ref$selected === void 0 ? false : _ref$selected,
     icon = _ref.icon,
     onPress = _ref.onPress,
-    otherProps = _objectWithoutProperties(_ref, _excluded$l);
-  var internalIcon = React__default.useMemo(function () {
-    if (icon && variant === 'filled') {
-      return icon;
-    }
-    if (selected) {
-      return 'checkmark';
-    }
-    return undefined;
-  }, [icon, selected, variant]);
+    _ref$showSelectedIcon = _ref.showSelectedIcon,
+    showSelectedIcon = _ref$showSelectedIcon === void 0 ? true : _ref$showSelectedIcon,
+    otherProps = _objectWithoutProperties(_ref, _excluded$m);
+  var shouldShowSelectedIcon = variant === 'outlined' && selected && showSelectedIcon;
   return /*#__PURE__*/React__default.createElement(StyledChipWrapper, _extends$1({
     onPress: onPress,
     themeVariant: variant,
     themeSelected: selected
-  }, otherProps), internalIcon && /*#__PURE__*/React__default.createElement(StyledIconWrapper$3, null, /*#__PURE__*/React__default.createElement(StyledIcon$1, {
+  }, otherProps), icon && /*#__PURE__*/React__default.createElement(Box, {
+    marginRight: "small"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
     size: "xsmall",
-    icon: internalIcon,
-    themeSelected: selected,
-    themeVariant: variant,
-    testID: "chip-icon-".concat(internalIcon)
-  })), /*#__PURE__*/React__default.createElement(StyledLabel, {
-    variant: "small",
-    themeVariant: variant,
-    themeSelected: selected
-  }, label));
+    icon: icon,
+    testID: "chip-icon-".concat(icon)
+  })), /*#__PURE__*/React__default.createElement(Typography.Body, null, label), shouldShowSelectedIcon && /*#__PURE__*/React__default.createElement(Box, {
+    marginLeft: "small"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    size: "xsmall",
+    icon: "cancel",
+    testID: "selected-chip-icon-cancel"
+  })));
 };
 
 var StyledWrapper$7 = index$9(TouchableOpacity)(function (_ref) {
@@ -13146,7 +13202,7 @@ var StyledErrorAndMaxLengthContainer = index$9(View)(function () {
   };
 });
 
-var _excluded$k = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "hideCharacterCount", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling", "variant"];
+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,
@@ -13258,7 +13314,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$k);
+    nativeProps = _objectWithoutProperties(_ref8, _excluded$l);
   var displayText = getDisplayText(value, defaultValue);
   var isEmptyValue = displayText.length === 0;
   var _React$useState = React__default.useState({
@@ -13803,11 +13859,11 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
   }))));
 };
 
-var _excluded$j = ["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$j);
+    props = _objectWithoutProperties(_ref, _excluded$k);
   if (variant === 'calendar') {
     return /*#__PURE__*/React__default.createElement(DatePickerCalendar, props);
   }
@@ -14361,7 +14417,7 @@ var Portal$1 = Object.assign(Portal, {
   Host: PortalHost
 });
 
-var _excluded$i = ["visible"];
+var _excluded$j = ["visible"];
 var DEFAULT_BACKDROP_OPACITY = 0.4;
 var DEFAULT_ANIMATION_CONFIG = {
   easing: Easing.inOut(Easing.cubic),
@@ -14457,7 +14513,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$i);
+    props = _objectWithoutProperties(_ref3, _excluded$j);
   var modalRef = useRef(null);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
@@ -14567,7 +14623,7 @@ var StyledErrorDescription = index$9(Typography.Body)(function (_ref9) {
   };
 });
 
-var _excluded$h = ["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)) {
@@ -14593,7 +14649,7 @@ var ErrorPage = function ErrorPage(_ref) {
     onCtaPress = _ref.onCtaPress,
     secondaryCtaText = _ref.secondaryCtaText,
     onSecondaryCtaPress = _ref.onSecondaryCtaPress,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$h);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$i);
   var showCta = ctaText && onCtaPress !== undefined;
   var showSecondaryCta = secondaryCtaText && onSecondaryCtaPress !== undefined;
   var showButtonContainer = showCta || showSecondaryCta;
@@ -14754,11 +14810,11 @@ var StyledIconContainer = index$9(Box)(function (_ref4) {
   };
 });
 
-var _excluded$g = ["active"];
+var _excluded$h = ["active"];
 var AnimatedIcons = Animated.createAnimatedComponent(StyledFABIcon);
 var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
   var active = _ref.active,
-    iconProps = _objectWithoutProperties(_ref, _excluded$g);
+    iconProps = _objectWithoutProperties(_ref, _excluded$h);
   var rotateAnimation = useRef(new Animated.Value(active ? 1 : 0));
   useEffect(function () {
     var animation = Animated.spring(rotateAnimation.current, {
@@ -16007,7 +16063,7 @@ var StyledStrokeEnd = index$9(View)(function (_ref6) {
   };
 });
 
-var _excluded$f = ["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;
@@ -16028,7 +16084,7 @@ var ProgressCircle = function ProgressCircle(_ref2) {
     intent = _ref2$intent === void 0 ? 'primary' : _ref2$intent,
     style = _ref2.style,
     testID = _ref2.testID,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$f);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$g);
   var theme = useTheme$1();
   var radius = theme.__hd__.progress.sizes.circleDiameter / 2;
   var progressAnimatedValue = useRef(new Animated.Value(0));
@@ -16144,14 +16200,14 @@ var StyledInner = index$9(Animated.View)(function (_ref2) {
   };
 });
 
-var _excluded$e = ["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$e);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$f);
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     width = _useState2[0],
@@ -16197,9 +16253,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) {
@@ -36469,4 +36615,4 @@ var Search = {
   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, swagSystemPalette as swagLightSystemPalette, swagSystemPalette$1 as swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };
+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 };