@hero-design/rn 8.74.1 → 8.75.0

package/es/index.js

@@ -3953,6 +3953,35 @@ var getMapPinTheme = function getMapPinTheme(theme) {
   };
 };
 
+var getFloatingIslandTheme = function getFloatingIslandTheme(theme) {
+  var colors = {
+    wrapperBackground: theme.colors.defaultGlobalSurface
+  };
+  var radii = {
+    wrapper: theme.radii.rounded
+  };
+  var shadows = {
+    wrapper: theme.shadows["default"]
+  };
+  var space = {
+    wrapperPadding: theme.space.small,
+    wrapperTop: theme.space.smallMedium,
+    prefixMarginRight: theme.space.small,
+    suffixMarginLeft: theme.space.medium,
+    iconPadding: theme.space.smallMedium
+  };
+  var fontSizes = {
+    iconSize: theme.fontSizes.medium
+  };
+  return {
+    colors: colors,
+    radii: radii,
+    shadows: shadows,
+    space: space,
+    fontSizes: fontSizes
+  };
+};
+
 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$1;
@@ -4006,7 +4035,8 @@ var getTheme$1 = function getTheme() {
       timePicker: getTimePickerTheme(globalTheme),
       toast: getToastTheme(globalTheme),
       toolbar: getToolbarTheme(globalTheme),
-      typography: getTypographyTheme(globalTheme)
+      typography: getTypographyTheme(globalTheme),
+      floatingIsland: getFloatingIslandTheme(globalTheme)
     }
   });
 };
@@ -6962,7 +6992,7 @@ var useDeprecation = function useDeprecation(message) {
   }, [message, cond]);
 };
 
-var StyledWrapper$d = index$a(Animated.View)({
+var StyledWrapper$e = index$a(Animated.View)({
   margin: 0,
   padding: 0,
   overflow: 'hidden'
@@ -7016,7 +7046,7 @@ var Collapse = function Collapse(_ref) {
     setComponentMounted(true);
     onLayout === null || onLayout === void 0 || onLayout(e);
   }, []);
-  return /*#__PURE__*/React__default.createElement(StyledWrapper$d, {
+  return /*#__PURE__*/React__default.createElement(StyledWrapper$e, {
     style: {
       height: open ? contentHeight : 0
     },
@@ -7030,7 +7060,7 @@ var Collapse = function Collapse(_ref) {
   }, children)));
 };
 
-var StyledWrapper$c = index$a(View)(function () {
+var StyledWrapper$d = index$a(View)(function () {
   return {};
 });
 var StyledItemWrapper$1 = index$a(View)(function (_ref) {
@@ -7083,7 +7113,7 @@ var StyledText$3 = index$a(Text$1)(function (_ref) {
   });
 });
 
-var _excluded$J = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
+var _excluded$K = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
 var Text = function Text(_ref) {
   var children = _ref.children,
     _ref$fontSize = _ref.fontSize,
@@ -7096,7 +7126,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$J);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$K);
   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,
@@ -7126,7 +7156,7 @@ var StyledCaption = index$a(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$I = ["children", "fontWeight", "intent", "allowFontScaling"];
+var _excluded$J = ["children", "fontWeight", "intent", "allowFontScaling"];
 var Caption = function Caption(_ref) {
   var children = _ref.children,
     _ref$fontWeight = _ref.fontWeight,
@@ -7135,7 +7165,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$I);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$J);
   return /*#__PURE__*/React__default.createElement(StyledCaption, _extends$1({}, nativeProps, {
     themeFontWeight: fontWeight,
     themeIntent: intent,
@@ -7154,14 +7184,14 @@ var StyledLabel$1 = index$a(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$H = ["children", "intent", "allowFontScaling"];
+var _excluded$I = ["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$H);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$I);
   return /*#__PURE__*/React__default.createElement(StyledLabel$1, _extends$1({}, nativeProps, {
     themeIntent: intent,
     allowFontScaling: allowFontScaling
@@ -7182,7 +7212,7 @@ var StyledTitle$1 = index$a(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$G = ["children", "intent", "allowFontScaling", "level", "typeface"];
+var _excluded$H = ["children", "intent", "allowFontScaling", "level", "typeface"];
 var Title = function Title(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -7193,7 +7223,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$G);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$H);
   return /*#__PURE__*/React__default.createElement(StyledTitle$1, _extends$1({}, nativeProps, {
     themeLevel: level,
     themeTypeface: typeface,
@@ -7228,7 +7258,7 @@ var StyledBody$1 = index$a(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$F = ["children", "intent", "allowFontScaling", "typeface", "variant"];
+var _excluded$G = ["children", "intent", "allowFontScaling", "typeface", "variant"];
 var Body = function Body(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -7239,7 +7269,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$F);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$G);
   return /*#__PURE__*/React__default.createElement(StyledBody$1, _extends$1({}, nativeProps, {
     themeTypeface: typeface,
     themeIntent: intent,
@@ -7811,10 +7841,10 @@ var StyledHeroIcon = index$a(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$E = ["style"];
+var _excluded$F = ["style"];
 var AnimatedIcon = function AnimatedIcon(_ref) {
   var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$E);
+    otherProps = _objectWithoutProperties(_ref, _excluded$F);
   var rotateAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(rotateAnimation.current, {
@@ -7919,7 +7949,7 @@ var AccordionItem = function AccordionItem(_ref) {
   }, content));
 };
 
-var _excluded$D = ["key"];
+var _excluded$E = ["key"];
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
     activeItemKey = _ref.activeItemKey,
@@ -7935,12 +7965,12 @@ var Accordion = function Accordion(_ref) {
     _usePropsOrInternalSt2 = _slicedToArray(_usePropsOrInternalSt, 2),
     _activeItemKey = _usePropsOrInternalSt2[0],
     _onItemPress = _usePropsOrInternalSt2[1];
-  return /*#__PURE__*/React__default.createElement(StyledWrapper$c, {
+  return /*#__PURE__*/React__default.createElement(StyledWrapper$d, {
     style: style,
     testID: testID
   }, items.map(function (_ref2, index) {
     var key = _ref2.key,
-      props = _objectWithoutProperties(_ref2, _excluded$D);
+      props = _objectWithoutProperties(_ref2, _excluded$E);
     var open = _activeItemKey === key;
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: key
@@ -7975,7 +8005,7 @@ var IconContainer$1 = index$a(View)(function (_ref2) {
     paddingLeft: theme.__hd__.alert.space.iconLeftPadding
   };
 });
-var StyledIcon$2 = index$a(Icon)(function (_ref3) {
+var StyledIcon$3 = index$a(Icon)(function (_ref3) {
   var theme = _ref3.theme,
     themeIntent = _ref3.themeIntent;
   return {
@@ -8034,7 +8064,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$3, {
     icon: icon,
     size: "small",
     themeIntent: intent
@@ -8075,7 +8105,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$3, {
     icon: "cancel",
     size: "small",
     themeIntent: intent
@@ -8150,7 +8180,7 @@ var Attachment = function Attachment(_ref) {
   })) : null);
 };
 
-var StyledWrapper$b = index$a(TouchableOpacity)(function (_ref) {
+var StyledWrapper$c = index$a(TouchableOpacity)(function (_ref) {
   var themeSize = _ref.themeSize,
     themeIntent = _ref.themeIntent,
     theme = _ref.theme;
@@ -8219,7 +8249,7 @@ var Avatar = function Avatar(_ref) {
     hasImageError = _useState2[0],
     setHasImageError = _useState2[1];
   if (title === undefined && source === undefined) return null;
-  return /*#__PURE__*/React__default.createElement(StyledWrapper$b, {
+  return /*#__PURE__*/React__default.createElement(StyledWrapper$c, {
     testID: testID,
     onPress: onPress,
     disabled: onPress === undefined,
@@ -8434,7 +8464,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$C = ["theme"];
+var _excluded$D = ["theme"];
 var getThemeValue = function getThemeValue(theme, key, props) {
   var propConfig = config[key];
   var propValue = props[key];
@@ -8461,18 +8491,18 @@ var mapStylePropToThemeValue = function mapStylePropToThemeValue(theme, props) {
 var configKeys = Object.keys(config);
 var StyledBox = index$a(View)(function (_ref5) {
   var theme = _ref5.theme,
-    otherProps = _objectWithoutProperties(_ref5, _excluded$C);
+    otherProps = _objectWithoutProperties(_ref5, _excluded$D);
   var styleProps = pick(configKeys, otherProps);
   var flexProps = pick(_toConsumableArray(flexPropsKey), otherProps);
   return _objectSpread2(_objectSpread2({}, mapStylePropToThemeValue(theme, styleProps)), flexProps);
 });
 
-var _excluded$B = ["children", "style", "testID"];
+var _excluded$C = ["children", "style", "testID"];
 var Box = function Box(_ref) {
   var children = _ref.children,
     style = _ref.style,
     testID = _ref.testID,
-    otherProps = _objectWithoutProperties(_ref, _excluded$B);
+    otherProps = _objectWithoutProperties(_ref, _excluded$C);
   return /*#__PURE__*/React__default.createElement(StyledBox, _extends$1({}, otherProps, {
     style: style,
     testID: testID
@@ -8480,7 +8510,7 @@ var Box = function Box(_ref) {
 };
 
 var VISIBLE_RATIO = 0.7;
-var StyledWrapper$a = index$a(View)(function (_ref) {
+var StyledWrapper$b = index$a(View)(function (_ref) {
   var theme = _ref.theme,
     themeSize = _ref.themeSize,
     themeAvatarCount = _ref.themeAvatarCount,
@@ -8618,7 +8648,7 @@ var AvatarStack = function AvatarStack(_ref2) {
     }
     return remain;
   }();
-  return /*#__PURE__*/React__default.createElement(StyledWrapper$a, {
+  return /*#__PURE__*/React__default.createElement(StyledWrapper$b, {
     themeSize: size,
     themeAvatarCount: avatars.length,
     themeHasSurplus: remainingAvatar > 0,
@@ -8693,7 +8723,7 @@ var StyledStatus = index$a(Animated.View)(function (_ref3) {
     borderRadius: theme.radii.rounded
   };
 });
-var StyledIcon$1 = index$a(Icon)(function (_ref4) {
+var StyledIcon$2 = index$a(Icon)(function (_ref4) {
   var themeSize = _ref4.themeSize,
     theme = _ref4.theme;
   return {
@@ -8701,7 +8731,7 @@ var StyledIcon$1 = index$a(Icon)(function (_ref4) {
   };
 });
 
-var _excluded$A = ["children", "visible", "intent", "style", "testID"];
+var _excluded$B = ["children", "visible", "intent", "style", "testID"];
 var Status = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
@@ -8710,7 +8740,7 @@ var Status = function Status(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$A);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$B);
   var _React$useRef = React__default.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React__default.useRef(true);
@@ -8743,7 +8773,7 @@ var Status = function Status(_ref) {
   }));
 };
 
-var _excluded$z = ["content", "visible", "max", "intent", "style", "testID", "size", "variant", "icon"];
+var _excluded$A = ["content", "visible", "max", "intent", "style", "testID", "size", "variant", "icon"];
 var DEFAULT_MAX_NUMBER = 99;
 var getPaddingState = function getPaddingState(content) {
   return content.length > 1 ? 'wideContent' : 'narrowContent';
@@ -8763,7 +8793,7 @@ var Badge = function Badge(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'filled' : _ref$variant,
     icon = _ref.icon,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$z);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$A);
   var _React$useRef = React__default.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React__default.useRef(true);
@@ -8801,7 +8831,7 @@ var Badge = function Badge(_ref) {
       }]
     }, style],
     testID: testID
-  }), isIconBadge ? /*#__PURE__*/React__default.createElement(StyledIcon$1, {
+  }), isIconBadge ? /*#__PURE__*/React__default.createElement(StyledIcon$2, {
     icon: icon,
     themeSize: size,
     intent: "text-inverted"
@@ -8864,7 +8894,7 @@ var StyledBottomBarText = index$a(Typography.Caption)(function (_ref3) {
   };
 });
 
-var _excluded$y = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$z = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
   return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
@@ -8875,7 +8905,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
     selectedTabKey = _ref.selectedTabKey,
     tabs = _ref.tabs,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$y);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$z);
   var insets = useSafeAreaInsets();
   /**
    * List of loaded tabs, tabs will be loaded when navigated to.
@@ -8961,13 +8991,13 @@ var StyledDivider = index$a(View)(function (_ref) {
   }, horizontalMargin), verticalMargin);
 });
 
-var _excluded$x = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$y = ["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$x);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$y);
   return /*#__PURE__*/React__default.createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
     themeMarginVertical: marginVertical,
@@ -8978,7 +9008,7 @@ var Divider = function Divider(_ref) {
 
 var AnimatedPressable$2 = Animated.createAnimatedComponent(Pressable);
 var AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);
-var StyledWrapper$9 = index$a(View)(_objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
+var StyledWrapper$a = index$a(View)(_objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
   flexDirection: 'column-reverse'
 }));
 var StyledKeyboardAvoidingView = index$a(KeyboardAvoidingView)(function () {
@@ -9123,7 +9153,7 @@ var StyledLoadingDot = index$a(View)(function (_ref) {
   }, themeStyling());
 });
 
-var _excluded$w = ["count", "size", "testID", "themeVariant"];
+var _excluded$x = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = Animated.createAnimatedComponent(StyledLoadingDot);
 var renderDotComponent = function renderDotComponent(_ref) {
@@ -9155,7 +9185,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
     size = _ref2$size === void 0 ? 12 : _ref2$size,
     testID = _ref2.testID,
     themeVariant = _ref2.themeVariant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$w);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$x);
   var progressAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(progressAnimation.current, {
@@ -9598,11 +9628,11 @@ var Header = function Header(_ref) {
   }))) : null), showDivider ? /*#__PURE__*/React__default.createElement(Divider, null) : null);
 };
 
-var _excluded$v = ["scrollEventThrottle"];
+var _excluded$w = ["scrollEventThrottle"];
 var BottomSheetScrollView = function BottomSheetScrollView(_ref) {
   var _ref$scrollEventThrot = _ref.scrollEventThrottle,
     scrollEventThrottle = _ref$scrollEventThrot === void 0 ? 100 : _ref$scrollEventThrot,
-    props = _objectWithoutProperties(_ref, _excluded$v);
+    props = _objectWithoutProperties(_ref, _excluded$w);
   var _useContext = useContext(BottomSheetContext),
     setInternalShowDivider = _useContext.setInternalShowDivider;
   var onScrollBeginDrag = useCallback(function (e) {
@@ -9712,7 +9742,7 @@ var BottomSheet = function BottomSheet(_ref) {
     testID: testID,
     onShow: onOpen,
     supportedOrientations: supportedOrientations
-  }, /*#__PURE__*/React__default.createElement(StyledWrapper$9, {
+  }, /*#__PURE__*/React__default.createElement(StyledWrapper$a, {
     pointerEvents: "box-none"
   }, /*#__PURE__*/React__default.createElement(StyledKeyboardAvoidingView, _extends$1({
     behavior: Platform.OS === 'ios' ? 'padding' : 'height'
@@ -12414,12 +12444,12 @@ var Indicator = index$a(View)(function (_ref2) {
   };
 });
 
-var _excluded$u = ["intent", "children"];
+var _excluded$v = ["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$u);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$v);
   return /*#__PURE__*/React__default.createElement(StyledDataCard, nativeProps, /*#__PURE__*/React__default.createElement(Indicator, {
     themeIntent: intent,
     testID: "data-card-indicator"
@@ -12438,13 +12468,13 @@ var StyledCard$1 = index$a(View)(function (_ref) {
   });
 });
 
-var _excluded$t = ["intent", "children", "variant"];
+var _excluded$u = ["intent", "children", "variant"];
 var Card = function Card(_ref) {
   var intent = _ref.intent,
     children = _ref.children,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'basic' : _ref$variant,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$t);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$u);
   return /*#__PURE__*/React__default.createElement(StyledCard$1, _extends$1({}, nativeProps, {
     themeIntent: intent,
     themeVariant: variant
@@ -12521,7 +12551,7 @@ var StyledPageControl$1 = index$a(PageControl)(function (_ref) {
     marginTop: theme.__hd__.cardCarousel.space.pageControlMarginTop
   };
 });
-var StyledWrapper$8 = index$a(View)({});
+var StyledWrapper$9 = index$a(View)({});
 var StyledCard = index$a(Card$1)(function (_ref2) {
   var theme = _ref2.theme;
   return {
@@ -12651,7 +12681,7 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }, /*#__PURE__*/React__default.createElement(StyledCard, null, item));
   }, [itemWidth]);
   var contentContainerPaddingHorizontal = theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal;
-  return /*#__PURE__*/React__default.createElement(StyledWrapper$8, {
+  return /*#__PURE__*/React__default.createElement(StyledWrapper$9, {
     style: style,
     testID: testID
   }, /*#__PURE__*/React__default.createElement(FlatList, {
@@ -12706,7 +12736,7 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 CardCarousel.displayName = 'CardCarousel';
 
-var _excluded$s = ["rounded", "size", "testID", "style"];
+var _excluded$t = ["rounded", "size", "testID", "style"];
 var Image = function Image(_ref) {
   var _ref$rounded = _ref.rounded,
     rounded = _ref$rounded === void 0 ? false : _ref$rounded,
@@ -12714,7 +12744,7 @@ var Image = function Image(_ref) {
     size = _ref$size === void 0 ? '6xlarge' : _ref$size,
     testID = _ref.testID,
     style = _ref.style,
-    imageNativeProps = _objectWithoutProperties(_ref, _excluded$s);
+    imageNativeProps = _objectWithoutProperties(_ref, _excluded$t);
   var theme = useTheme();
   var imageSize = theme.__hd__.image.sizes[size];
   return /*#__PURE__*/React__default.createElement(Image$1, _extends$1({
@@ -12848,7 +12878,7 @@ var CarouselItem = function CarouselItem(_ref) {
   }, heading), !!body && /*#__PURE__*/React__default.createElement(Typography.Body, null, body)));
 };
 
-var _excluded$r = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "testID", "pageControlPosition"];
+var _excluded$s = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "testID", "pageControlPosition"];
 function useStateFromProp(initialValue) {
   var _useState = useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
@@ -12875,7 +12905,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$r);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$s);
   useDeprecation("shouldShowPagination prop has been deprecated", shouldShowPagination !== noop);
   useDeprecation("The use of 'pageControlPosition == bottom' has been deprecated", pageControlPosition === 'bottom');
   var theme = useTheme();
@@ -13089,7 +13119,7 @@ var StyledChipWrapper = index$a(TouchableOpacity)(function (_ref) {
   }, getShadowStyles()), getBorderStyles()), getPaddingStyles()), getBackgroundStyles());
 });
 
-var _excluded$q = ["label", "variant", "selected", "icon", "onPress", "showSelectedIcon"];
+var _excluded$r = ["label", "variant", "selected", "icon", "onPress", "showSelectedIcon"];
 var Chip = function Chip(_ref) {
   var label = _ref.label,
     _ref$variant = _ref.variant,
@@ -13100,7 +13130,7 @@ var Chip = function Chip(_ref) {
     onPress = _ref.onPress,
     _ref$showSelectedIcon = _ref.showSelectedIcon,
     showSelectedIcon = _ref$showSelectedIcon === void 0 ? true : _ref$showSelectedIcon,
-    otherProps = _objectWithoutProperties(_ref, _excluded$q);
+    otherProps = _objectWithoutProperties(_ref, _excluded$r);
   var shouldShowSelectedIcon = variant === 'outlined' && selected && showSelectedIcon;
   return /*#__PURE__*/React__default.createElement(StyledChipWrapper, _extends$1({
     onPress: onPress,
@@ -13121,7 +13151,7 @@ var Chip = function Chip(_ref) {
   })));
 };
 
-var StyledWrapper$7 = index$a(TouchableOpacity)(function (_ref) {
+var StyledWrapper$8 = index$a(TouchableOpacity)(function (_ref) {
   var theme = _ref.theme,
     themeState = _ref.themeState;
   return {
@@ -13195,7 +13225,7 @@ var Checkbox = function Checkbox(_ref2) {
     disabled: disabled,
     readonly: readonly
   });
-  return /*#__PURE__*/React__default.createElement(StyledWrapper$7, {
+  return /*#__PURE__*/React__default.createElement(StyledWrapper$8, {
     onPress: onPress,
     disabled: disabled || readonly,
     themeState: themeState,
@@ -13341,7 +13371,7 @@ var StyledErrorAndMaxLengthContainer = index$a(View)(function () {
   };
 });
 
-var _excluded$p = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "hideCharacterCount", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling", "variant"];
+var _excluded$q = ["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,
@@ -13453,7 +13483,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$p);
+    nativeProps = _objectWithoutProperties(_ref8, _excluded$q);
   var displayText = getDisplayText(value, defaultValue);
   var isEmptyValue = displayText.length === 0;
   var _React$useState = React__default.useState({
@@ -13998,11 +14028,11 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
   }))));
 };
 
-var _excluded$o = ["variant"];
+var _excluded$p = ["variant"];
 var DatePicker = function DatePicker(_ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
-    props = _objectWithoutProperties(_ref, _excluded$o);
+    props = _objectWithoutProperties(_ref, _excluded$p);
   if (variant === 'calendar') {
     return /*#__PURE__*/React__default.createElement(DatePickerCalendar, props);
   }
@@ -14299,7 +14329,7 @@ var index$7 = Object.assign(Drawer, {
   Dragable: DragableDrawer
 });
 
-var StyledWrapper$6 = index$a(View)(function (_ref) {
+var StyledWrapper$7 = index$a(View)(function (_ref) {
   var theme = _ref.theme;
   return {
     display: 'flex',
@@ -14337,7 +14367,7 @@ var Empty = function Empty(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'light' : _ref$variant;
   var theme = useTheme();
-  return /*#__PURE__*/React__default.createElement(StyledWrapper$6, {
+  return /*#__PURE__*/React__default.createElement(StyledWrapper$7, {
     style: style,
     testID: testID
   }, image !== undefined && /*#__PURE__*/React__default.cloneElement(image, _objectSpread2(_objectSpread2({}, image.props), {}, {
@@ -14556,7 +14586,7 @@ var Portal$1 = Object.assign(Portal, {
   Host: PortalHost
 });
 
-var _excluded$n = ["visible"];
+var _excluded$o = ["visible"];
 var DEFAULT_BACKDROP_OPACITY = 0.4;
 var DEFAULT_ANIMATION_CONFIG = {
   easing: Easing.inOut(Easing.cubic),
@@ -14652,7 +14682,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$n);
+    props = _objectWithoutProperties(_ref3, _excluded$o);
   var modalRef = useRef(null);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
@@ -14762,7 +14792,7 @@ var StyledErrorDescription = index$a(Typography.Body)(function (_ref9) {
   };
 });
 
-var _excluded$m = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"],
+var _excluded$n = ["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)) {
@@ -14788,7 +14818,7 @@ var ErrorPage = function ErrorPage(_ref) {
     onCtaPress = _ref.onCtaPress,
     secondaryCtaText = _ref.secondaryCtaText,
     onSecondaryCtaPress = _ref.onSecondaryCtaPress,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$m);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$n);
   var showCta = ctaText && onCtaPress !== undefined;
   var showSecondaryCta = secondaryCtaText && onSecondaryCtaPress !== undefined;
   var showButtonContainer = showCta || showSecondaryCta;
@@ -14921,7 +14951,7 @@ var StyledActionItemText = index$a(Typography.Body)(function (_ref2) {
     color: theme.__hd__.fab.colors.actionItemText
   };
 });
-var StyledIcon = index$a(Icon)(function (_ref3) {
+var StyledIcon$1 = index$a(Icon)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     color: theme.__hd__.fab.colors.actionItemText
@@ -15011,17 +15041,17 @@ var ActionItem = function ActionItem(_ref) {
     style: style,
     onPress: onPress,
     testID: testID
-  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledIconContainer, null, /*#__PURE__*/React__default.createElement(StyledIcon, {
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledIconContainer, null, /*#__PURE__*/React__default.createElement(StyledIcon$1, {
     size: "xsmall",
     icon: icon
   })), /*#__PURE__*/React__default.createElement(StyledActionItemText, null, title))));
 };
 
-var _excluded$l = ["active"];
+var _excluded$m = ["active"];
 var AnimatedIcons = Animated.createAnimatedComponent(StyledFABIcon);
 var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
   var active = _ref.active,
-    iconProps = _objectWithoutProperties(_ref, _excluded$l);
+    iconProps = _objectWithoutProperties(_ref, _excluded$m);
   var rotateAnimation = useRef(new Animated.Value(active ? 1 : 0));
   useEffect(function () {
     var animation = Animated.spring(rotateAnimation.current, {
@@ -15377,11 +15407,11 @@ var StyledFAB = index$a(FAB$1)(function (_ref) {
   };
 });
 
-var _excluded$k = ["fabConfig", "onCancel"];
+var _excluded$l = ["fabConfig", "onCancel"];
 var Pair = function Pair(_ref) {
   var fabConfig = _ref.fabConfig,
     onCancel = _ref.onCancel,
-    props = _objectWithoutProperties(_ref, _excluded$k);
+    props = _objectWithoutProperties(_ref, _excluded$l);
   var icon = fabConfig.icon,
     title = fabConfig.title,
     onPress = fabConfig.onPress,
@@ -15802,11 +15832,11 @@ var StyledFocusIcon = index$a(Icon)(function (_ref5) {
   };
 });
 
-var _excluded$j = ["style", "testID"];
+var _excluded$k = ["style", "testID"];
 var MapPinFocussed = function MapPinFocussed(_ref) {
   var style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$j);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$k);
   return /*#__PURE__*/React__default.createElement(StyledContainer$3, _extends$1({}, nativeProps, {
     style: style,
     testID: testID
@@ -15816,7 +15846,7 @@ var MapPinFocussed = function MapPinFocussed(_ref) {
   }));
 };
 
-var _excluded$i = ["style", "testID", "state", "image", "icon"];
+var _excluded$j = ["style", "testID", "state", "image", "icon"];
 var getBadgeIconName = function getBadgeIconName(state) {
   var iconMap = {
     idle: undefined,
@@ -15832,7 +15862,7 @@ var MapPin = function MapPin(_ref) {
     state = _ref$state === void 0 ? 'idle' : _ref$state,
     image = _ref.image,
     icon = _ref.icon,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$i);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$j);
   var badgeIcon = getBadgeIconName(state);
   return /*#__PURE__*/React__default.createElement(StyledContainer$3, _extends$1({}, nativeProps, {
     style: style,
@@ -16046,7 +16076,7 @@ var List = {
   BasicItem: BasicListItem
 };
 
-var StyledWrapper$5 = index$a(View)(function () {
+var StyledWrapper$6 = index$a(View)(function () {
   return {
     alignContent: 'flex-start'
   };
@@ -16255,7 +16285,7 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       start: trimmedValue.length
     };
   }, [trimmedValue]);
-  return /*#__PURE__*/React__default.createElement(StyledWrapper$5, {
+  return /*#__PURE__*/React__default.createElement(StyledWrapper$6, {
     style: style,
     testID: testID
   }, /*#__PURE__*/React__default.createElement(StyledPinWrapper, null, _toConsumableArray(Array(length).keys()).map(function (index) {
@@ -16374,7 +16404,7 @@ var StyledStrokeEnd = index$a(View)(function (_ref6) {
   };
 });
 
-var _excluded$h = ["value", "renderValue", "intent", "style", "testID"];
+var _excluded$i = ["value", "renderValue", "intent", "style", "testID"];
 var HalfCircle = function HalfCircle(_ref) {
   var type = _ref.type,
     themeIntent = _ref.themeIntent;
@@ -16395,7 +16425,7 @@ var ProgressCircle = function ProgressCircle(_ref2) {
     intent = _ref2$intent === void 0 ? 'primary' : _ref2$intent,
     style = _ref2.style,
     testID = _ref2.testID,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$h);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$i);
   var theme = useTheme$1();
   var radius = theme.__hd__.progress.sizes.circleDiameter / 2;
   var progressAnimatedValue = useRef(new Animated.Value(0));
@@ -16490,7 +16520,7 @@ var ProgressCircle = function ProgressCircle(_ref2) {
   })), /*#__PURE__*/React__default.createElement(StyledDonutCircle, null, /*#__PURE__*/React__default.createElement(Typography.Body, null, renderValue(value)))));
 };
 
-var StyledWrapper$4 = index$a(View)(function (_ref) {
+var StyledWrapper$5 = index$a(View)(function (_ref) {
   var theme = _ref.theme,
     themeIntent = _ref.themeIntent;
   return {
@@ -16511,14 +16541,14 @@ var StyledInner = index$a(Animated.View)(function (_ref2) {
   };
 });
 
-var _excluded$g = ["value", "intent", "style", "testID"];
+var _excluded$h = ["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$g);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$h);
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     width = _useState2[0],
@@ -16544,7 +16574,7 @@ var ProgressBar = function ProgressBar(_ref) {
     outputRange: [999, 0],
     extrapolate: 'clamp'
   });
-  return /*#__PURE__*/React__default.createElement(StyledWrapper$4, _extends$1({}, nativeProps, {
+  return /*#__PURE__*/React__default.createElement(StyledWrapper$5, _extends$1({}, nativeProps, {
     testID: testID,
     style: style,
     themeIntent: intent
@@ -16607,7 +16637,7 @@ var StyledSingleStep = index$a(Box)(function (_ref3) {
   };
 });
 
-var _excluded$f = ["steps", "current", "onLayout"];
+var _excluded$g = ["steps", "current", "onLayout"];
 var getStepState = function getStepState(current, index) {
   if (index < current) {
     return 'complete';
@@ -16621,7 +16651,7 @@ var ProgressStep = function ProgressStep(_ref) {
   var steps = _ref.steps,
     current = _ref.current,
     onLayout = _ref.onLayout,
-    props = _objectWithoutProperties(_ref, _excluded$f);
+    props = _objectWithoutProperties(_ref, _excluded$g);
   var theme = useTheme$1();
   var _React$useState = React__default.useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -16802,14 +16832,14 @@ var AnimatedSpinner = function AnimatedSpinner(_ref) {
   }, dotProps))));
 };
 
-var _excluded$e = ["testID", "size", "intent"];
+var _excluded$f = ["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$e);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$f);
   return /*#__PURE__*/React__default.createElement(StyledView$1, nativeProps, /*#__PURE__*/React__default.createElement(StyledSpinnerContainer, {
     testID: testID
   }, /*#__PURE__*/React__default.createElement(AnimatedSpinner, {
@@ -16842,7 +16872,7 @@ var SwipeableAction = function SwipeableAction(_ref) {
   }, children);
 };
 
-var _excluded$d = ["children", "state", "onStateChange", "leftActions", "leftActionsWidth", "rightActions", "rightActionsWidth", "variant"];
+var _excluded$e = ["children", "state", "onStateChange", "leftActions", "leftActionsWidth", "rightActions", "rightActionsWidth", "variant"];
 var renderActions = function renderActions(actions, width, progress, direction) {
   var trans = progress.interpolate({
     inputRange: [0, 1],
@@ -16871,7 +16901,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$d);
+    swipeableProps = _objectWithoutProperties(_ref, _excluded$e);
   var theme = useTheme();
   var _useWindowDimensions = useWindowDimensions(),
     width = _useWindowDimensions.width;
@@ -17071,7 +17101,7 @@ var StyledIconWrapper$2 = index$a(View)(function (_ref2) {
     marginRight: theme.__hd__.sectionHeading.space.iconMarginRight
   };
 });
-var StyledWrapper$3 = index$a(View)(function () {
+var StyledWrapper$4 = index$a(View)(function () {
   return {
     display: 'flex',
     flexDirection: 'row',
@@ -17108,7 +17138,7 @@ var SectionHeading = function SectionHeading(_ref) {
     themeSize: size,
     style: style,
     testID: testID
-  }, /*#__PURE__*/React__default.createElement(StyledWrapper$3, null, /*#__PURE__*/React__default.createElement(StyledIconWrapper$2, null, icon !== undefined && (typeof icon === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
+  }, /*#__PURE__*/React__default.createElement(StyledWrapper$4, null, /*#__PURE__*/React__default.createElement(StyledIconWrapper$2, null, icon !== undefined && (typeof icon === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
     icon: icon,
     size: ICON_SIZE_MAP[size],
     intent: ICON_INTENT_MAP[intent]
@@ -17222,7 +17252,7 @@ var StyledSectionList = index$a(SectionList)(function (_ref4) {
   };
 });
 
-var _excluded$c = ["keyExtractor", "loading", "onEndReached", "onQueryChange", "sections", "renderItem", "sectionListRef"];
+var _excluded$d = ["keyExtractor", "loading", "onEndReached", "onQueryChange", "sections", "renderItem", "sectionListRef"];
 var BaseOptionList = function BaseOptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -17231,7 +17261,7 @@ var BaseOptionList = function BaseOptionList(_ref) {
     sections = _ref.sections,
     renderItem = _ref.renderItem,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$c);
+    rest = _objectWithoutProperties(_ref, _excluded$d);
   var theme = useTheme$1();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -17301,7 +17331,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$b = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
+var _excluded$c = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
 var OptionList$1 = function OptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -17312,7 +17342,7 @@ var OptionList$1 = function OptionList(_ref) {
     renderOption = _ref.renderOption,
     value = _ref.value,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$b);
+    rest = _objectWithoutProperties(_ref, _excluded$c);
   var renderItem = function renderItem(info) {
     var item = info.item;
     var selected = value.includes(info.item.value);
@@ -17503,7 +17533,7 @@ var StyledOptionList = index$a(BaseOptionList)(function (_ref) {
   };
 });
 
-var _excluded$a = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
+var _excluded$b = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
 var OptionList = function OptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -17514,7 +17544,7 @@ var OptionList = function OptionList(_ref) {
     renderOption = _ref.renderOption,
     value = _ref.value,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$a);
+    rest = _objectWithoutProperties(_ref, _excluded$b);
   var renderItem = function renderItem(info) {
     var item = info.item;
     var selected = item.value === value;
@@ -17682,7 +17712,7 @@ var StyledGradientContainer = index$a(Box)(function (_ref2) {
   };
 });
 
-var _excluded$9 = ["intent", "variant", "style", "onLayout"];
+var _excluded$a = ["intent", "variant", "style", "onLayout"];
 var AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
 var gradientPositions = {
   start: {
@@ -17714,7 +17744,7 @@ var Skeleton = function Skeleton(_ref) {
     variant = _ref$variant === void 0 ? 'rounded' : _ref$variant,
     style = _ref.style,
     onLayout = _ref.onLayout,
-    props = _objectWithoutProperties(_ref, _excluded$9);
+    props = _objectWithoutProperties(_ref, _excluded$a);
   var theme = useTheme();
   var colors = useMemo(function () {
     return getGradientColors(theme, intent);
@@ -17846,7 +17876,7 @@ var StyledSuccessModal = index$a(ModalWrapper)({
   width: '100%'
 });
 
-var _excluded$8 = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"];
+var _excluded$9 = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"];
 var renderImage = function renderImage(image) {
   if ( /*#__PURE__*/isValidElement(image)) {
     return /*#__PURE__*/React__default.cloneElement(image, {
@@ -17872,7 +17902,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$8);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$9);
   var showSecondaryButton = secondaryCtaText && onSecondaryCtaPress;
   return /*#__PURE__*/React__default.createElement(StyledSuccessContainer, _extends$1({
     testID: testID,
@@ -17906,7 +17936,7 @@ var Success = function Success(props) {
 };
 
 var AnimatedView = Animated.createAnimatedComponent(View);
-var StyledWrapper$2 = index$a(View)(function (_ref) {
+var StyledWrapper$3 = index$a(View)(function (_ref) {
   var theme = _ref.theme;
   return {
     flexDirection: 'row',
@@ -18052,7 +18082,7 @@ var SelectorSwitch = function SelectorSwitch(_ref) {
       return _onPress === null || _onPress === void 0 ? void 0 : _onPress(value);
     },
     testID: testID
-  }, /*#__PURE__*/React__default.createElement(StyledWrapper$2, {
+  }, /*#__PURE__*/React__default.createElement(StyledWrapper$3, {
     onLayout: onContainerLayout,
     style: style
   }, options.map(function (opt, index) {
@@ -18076,7 +18106,7 @@ var SelectorSwitch = function SelectorSwitch(_ref) {
   })));
 };
 
-var StyledWrapper$1 = index$a(View)(function (_ref) {
+var StyledWrapper$2 = index$a(View)(function (_ref) {
   var theme = _ref.theme,
     themeVariant = _ref.themeVariant;
   return {
@@ -18138,7 +18168,7 @@ var Switch = function Switch(_ref2) {
     testID: testID,
     onPress: onPress,
     disabled: disabled
-  }, /*#__PURE__*/React__default.createElement(StyledWrapper$1, {
+  }, /*#__PURE__*/React__default.createElement(StyledWrapper$2, {
     themeVariant: variant,
     style: style
   }, /*#__PURE__*/React__default.createElement(StyledKnot, {
@@ -18890,7 +18920,7 @@ var StyledText = index$a(Typography.Caption)(function (_ref2) {
   };
 });
 
-var _excluded$7 = ["content", "variant", "intent", "style", "testID"];
+var _excluded$8 = ["content", "variant", "intent", "style", "testID"];
 var Tag = function Tag(_ref) {
   var content = _ref.content,
     _ref$variant = _ref.variant,
@@ -18899,7 +18929,7 @@ var Tag = function Tag(_ref) {
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$7);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$8);
   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,
@@ -19224,10 +19254,10 @@ var ToolbarGroup = function ToolbarGroup(_ref) {
   }));
 };
 
-var _excluded$6 = ["children"];
+var _excluded$7 = ["children"];
 var Toolbar = function Toolbar(_ref) {
   var children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$6);
+    rest = _objectWithoutProperties(_ref, _excluded$7);
   return /*#__PURE__*/React__default.createElement(ToolbarWrapper, rest, children);
 };
 var index$1 = Object.assign(Toolbar, {
@@ -19235,7 +19265,7 @@ var index$1 = Object.assign(Toolbar, {
 });
 
 var AnimatedBox = Animated.createAnimatedComponent(View);
-var StyledWrapper = index$a(Box)({
+var StyledWrapper$1 = index$a(Box)({
   flexDirection: 'row'
 });
 var StyledIconWrapper = index$a(AnimatedBox)(function (_ref) {
@@ -19246,7 +19276,7 @@ var StyledIconWrapper = index$a(AnimatedBox)(function (_ref) {
   };
 });
 
-var _excluded$5 = ["options", "value", "onChange", "readonly", "disabled"];
+var _excluded$6 = ["options", "value", "onChange", "readonly", "disabled"];
 var Rate = function Rate(_ref) {
   var options = _ref.options,
     value = _ref.value,
@@ -19255,7 +19285,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$5);
+    otherProps = _objectWithoutProperties(_ref, _excluded$6);
   var valueIndex = useMemo(function () {
     return options.findIndex(function (item) {
       return item.value === value;
@@ -19273,7 +19303,7 @@ var Rate = function Rate(_ref) {
       useNativeDriver: Platform.OS !== 'web'
     }).start();
   }, [value, animatedValue]);
-  return /*#__PURE__*/React__default.createElement(StyledWrapper, otherProps, options.length > 0 && options.map(function (item, index) {
+  return /*#__PURE__*/React__default.createElement(StyledWrapper$1, otherProps, options.length > 0 && options.map(function (item, index) {
     return /*#__PURE__*/React__default.createElement(Pressable, {
       key: item.value,
       disabled: disabled || readonly,
@@ -36646,30 +36676,30 @@ function AnimatedScroller(_ref) {
   }));
 }
 
-var _excluded$4 = ["fabProps"];
+var _excluded$5 = ["fabProps"];
 var ScrollViewWithFAB = function ScrollViewWithFAB(_ref) {
   var fabProps = _ref.fabProps,
-    props = _objectWithoutProperties(_ref, _excluded$4);
+    props = _objectWithoutProperties(_ref, _excluded$5);
   return /*#__PURE__*/React__default.createElement(AnimatedScroller, {
     ScrollComponent: /*#__PURE__*/React__default.createElement(ScrollView, props),
     fabProps: fabProps
   });
 };
 
-var _excluded$3 = ["fabProps"];
+var _excluded$4 = ["fabProps"];
 function FlatListWithFAB(_ref) {
   var fabProps = _ref.fabProps,
-    props = _objectWithoutProperties(_ref, _excluded$3);
+    props = _objectWithoutProperties(_ref, _excluded$4);
   return /*#__PURE__*/React__default.createElement(AnimatedScroller, {
     ScrollComponent: /*#__PURE__*/React__default.createElement(FlatList, props),
     fabProps: fabProps
   });
 }
 
-var _excluded$2 = ["fabProps"];
+var _excluded$3 = ["fabProps"];
 function SectionListWithFAB(_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(SectionList, props),
     fabProps: fabProps
@@ -36804,7 +36834,7 @@ var SearchTwoLine = function SearchTwoLine(props) {
   })));
 };
 
-var _excluded$1 = ["prefix", "suffix", "style", "allowFontScaling", "accessibilityLabelledBy", "editable", "maxLength", "value", "defaultValue", "placeholder", "disabled", "testID", "variant"];
+var _excluded$2 = ["prefix", "suffix", "style", "allowFontScaling", "accessibilityLabelledBy", "editable", "maxLength", "value", "defaultValue", "placeholder", "disabled", "testID", "variant"];
 var getState = function getState(_ref) {
   var disabled = _ref.disabled,
     editable = _ref.editable,
@@ -36846,7 +36876,7 @@ var SearchOneLine = /*#__PURE__*/forwardRef(function (props, ref) {
     testID = props.testID,
     _props$variant = props.variant,
     variant = _props$variant === void 0 ? 'basic' : _props$variant,
-    nativeProps = _objectWithoutProperties(props, _excluded$1);
+    nativeProps = _objectWithoutProperties(props, _excluded$2);
   var _React$useState = React__default.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isFocused = _React$useState2[0],
@@ -36930,11 +36960,11 @@ var SearchOneLine = /*#__PURE__*/forwardRef(function (props, ref) {
   })));
 });
 
-var _excluded = ["content", "icon"];
+var _excluded$1 = ["content", "icon"];
 var renderBadge = function renderBadge(props) {
   var content = props.content,
     icon = props.icon,
-    rest = _objectWithoutProperties(props, _excluded);
+    rest = _objectWithoutProperties(props, _excluded$1);
   if (content) return /*#__PURE__*/React__default.createElement(StyledBadge, _extends$1({
     intent: "primary",
     content: content,
@@ -36966,4 +36996,88 @@ var Search = {
   SuffixIcon: SearchSuffixIcon
 };
 
-export { Accordion, Alert, Attachment, index$9 as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar, Card$1 as Card, index$8 as Carousel, Checkbox, Chip, Collapse, ContentNavigator, DatePicker, Divider, index$7 as Drawer, Empty, ErrorComponent as Error, FAB, FlatListWithFAB, HeroDesignProvider, Icon, Image, List, index$6 as MapPin, 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 };
+var StyledWrapper = index$a.TouchableOpacity(function (_ref) {
+  var theme = _ref.theme;
+  return _objectSpread2({
+    alignSelf: 'flex-start',
+    position: 'absolute',
+    left: '50%',
+    zIndex: 9999,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: theme.__hd__.floatingIsland.space.wrapperPadding,
+    borderRadius: theme.__hd__.floatingIsland.radii.wrapper,
+    backgroundColor: theme.__hd__.floatingIsland.colors.wrapperBackground,
+    top: theme.__hd__.floatingIsland.space.wrapperTop
+  }, theme.__hd__.floatingIsland.shadows.wrapper);
+});
+var StyledPrefixWrapper = index$a(Box)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    marginRight: theme.__hd__.floatingIsland.space.prefixMarginRight
+  };
+});
+var StyledSuffixWrapper = index$a(Box)(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    marginLeft: theme.__hd__.floatingIsland.space.suffixMarginLeft
+  };
+});
+var StyledIcon = index$a(Icon)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    padding: theme.__hd__.floatingIsland.space.iconPadding
+  };
+});
+
+var _excluded = ["onPress", "onLayout", "style", "children", "prefix", "suffix"];
+var getPrefixOrSuffix = function getPrefixOrSuffix(_ref) {
+  var element = _ref.element,
+    _ref$isPrefix = _ref.isPrefix,
+    isPrefix = _ref$isPrefix === void 0 ? true : _ref$isPrefix;
+  var Wrapper = isPrefix ? StyledPrefixWrapper : StyledSuffixWrapper;
+  if (typeof element === 'string') {
+    return /*#__PURE__*/React__default.createElement(Wrapper, null, /*#__PURE__*/React__default.createElement(StyledIcon, {
+      testID: "floating-island-".concat(isPrefix ? 'prefix' : 'suffix', "-icon"),
+      size: "small",
+      icon: element
+    }));
+  }
+  return /*#__PURE__*/React__default.createElement(Wrapper, null, element);
+};
+var FloatingIsland = function FloatingIsland(_ref2) {
+  var onPress = _ref2.onPress,
+    onLayout = _ref2.onLayout,
+    style = _ref2.style,
+    children = _ref2.children,
+    prefix = _ref2.prefix,
+    suffix = _ref2.suffix,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var _React$useState = React__default.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    width = _React$useState2[0],
+    setWidth = _React$useState2[1];
+  var onWrapperLayout = function onWrapperLayout(event) {
+    setWidth(event.nativeEvent.layout.width);
+    onLayout === null || onLayout === void 0 || onLayout(event);
+  };
+  return /*#__PURE__*/React__default.createElement(StyledWrapper, _extends$1({}, props, {
+    onLayout: onWrapperLayout,
+    disabled: !onPress,
+    onPress: onPress,
+    style: [style, width > 0 ? {
+      transform: [{
+        translateX: -width / 2
+      }]
+    } : undefined]
+  }), prefix && getPrefixOrSuffix({
+    element: prefix,
+    isPrefix: true
+  }), children, suffix && getPrefixOrSuffix({
+    element: suffix,
+    isPrefix: false
+  }));
+};
+
+export { Accordion, Alert, Attachment, index$9 as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar, Card$1 as Card, index$8 as Carousel, Checkbox, Chip, Collapse, ContentNavigator, DatePicker, Divider, index$7 as Drawer, Empty, ErrorComponent as Error, FAB, FlatListWithFAB, FloatingIsland, HeroDesignProvider, Icon, Image, List, index$6 as MapPin, 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 };