@hero-design/rn 8.34.2 → 8.35.0-alpha.1

package/es/index.js

@@ -2523,8 +2523,8 @@ var getProgressTheme = function getProgressTheme(theme) {
   };
   var sizes = {
     circleDiameter: theme.sizes['6xlarge'],
-    circleCompletenessHeight: theme.sizes.small,
-    barHeight: theme.sizes.small
+    circleCompletenessHeight: theme.sizes.xsmall,
+    barHeight: theme.sizes.xsmall
   };
   var radii = {
     "default": theme.radii.rounded
@@ -2778,8 +2778,8 @@ var getSwitchTheme = function getSwitchTheme(theme) {
     },
     thumb: theme.colors.onSecondary,
     selector: {
-      background: theme.colors.defaultGlobalSurface,
-      textBackground: theme.colors.decorativePrimarySurface
+      background: theme.colors.neutralGlobalSurface,
+      textBackground: theme.colors.decorativePrimary
     }
   };
   var sizes = {
@@ -2787,14 +2787,14 @@ var getSwitchTheme = function getSwitchTheme(theme) {
     width: theme.sizes.xxxlarge,
     height: theme.sizes.large,
     selector: {
-      height: theme.sizes.xxlarge
+      height: theme.sizes.xxxxlarge
     }
   };
   var spaces = {
     paddingHorizontal: theme.space.xsmall,
     selector: {
       iconPadding: theme.space.medium,
-      wrapperHorizontalPadding: theme.space.xsmall
+      wrapperPadding: theme.space.xsmall
     }
   };
   var radii = {
@@ -2829,7 +2829,7 @@ var getTabsTheme = function getTabsTheme(theme) {
     outlineVerticalPadding: theme.space.xsmall
   };
   var radii = {
-    outline: theme.radii.xlarge
+    outline: theme.radii.medium
   };
   var borderWidths = {
     headerBottom: theme.borderWidths.base
@@ -6324,7 +6324,7 @@ var StyledText$3 = index$b(Text$1)(function (_ref) {
   });
 });
 
-var _excluded$z = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
+var _excluded$A = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
 var Text = function Text(_ref) {
   var children = _ref.children,
     _ref$fontSize = _ref.fontSize,
@@ -6337,7 +6337,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$z);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$A);
   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.createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
@@ -6367,7 +6367,7 @@ var StyledCaption = index$b(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$y = ["children", "fontWeight", "intent", "allowFontScaling"];
+var _excluded$z = ["children", "fontWeight", "intent", "allowFontScaling"];
 var Caption = function Caption(_ref) {
   var children = _ref.children,
     _ref$fontWeight = _ref.fontWeight,
@@ -6376,7 +6376,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$y);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$z);
   return /*#__PURE__*/React.createElement(StyledCaption, _extends$1({}, nativeProps, {
     themeFontWeight: fontWeight,
     themeIntent: intent,
@@ -6395,14 +6395,14 @@ var StyledLabel$1 = index$b(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$x = ["children", "intent", "allowFontScaling"];
+var _excluded$y = ["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$x);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$y);
   return /*#__PURE__*/React.createElement(StyledLabel$1, _extends$1({}, nativeProps, {
     themeIntent: intent,
     allowFontScaling: allowFontScaling
@@ -6423,7 +6423,7 @@ var StyledTitle$1 = index$b(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$w = ["children", "intent", "allowFontScaling", "level", "typeface"];
+var _excluded$x = ["children", "intent", "allowFontScaling", "level", "typeface"];
 var Title = function Title(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -6434,7 +6434,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$w);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$x);
   return /*#__PURE__*/React.createElement(StyledTitle$1, _extends$1({}, nativeProps, {
     themeLevel: level,
     themeTypeface: typeface,
@@ -6469,7 +6469,7 @@ var StyledBody = index$b(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$v = ["children", "intent", "allowFontScaling", "typeface", "variant"];
+var _excluded$w = ["children", "intent", "allowFontScaling", "typeface", "variant"];
 var Body = function Body(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -6480,7 +6480,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$v);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$w);
   return /*#__PURE__*/React.createElement(StyledBody, _extends$1({}, nativeProps, {
     themeTypeface: typeface,
     themeIntent: intent,
@@ -7010,10 +7010,10 @@ var StyledHeroIcon = index$b(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$u = ["style"];
+var _excluded$v = ["style"];
 var AnimatedIcon = function AnimatedIcon(_ref) {
   var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$u);
+    otherProps = _objectWithoutProperties(_ref, _excluded$v);
   var rotateAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(rotateAnimation.current, {
@@ -7118,7 +7118,7 @@ var AccordionItem = function AccordionItem(_ref) {
   }, content));
 };
 
-var _excluded$t = ["key"];
+var _excluded$u = ["key"];
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
     activeItemKey = _ref.activeItemKey,
@@ -7139,7 +7139,7 @@ var Accordion = function Accordion(_ref) {
     testID: testID
   }, items.map(function (_ref2, index) {
     var key = _ref2.key,
-      props = _objectWithoutProperties(_ref2, _excluded$t);
+      props = _objectWithoutProperties(_ref2, _excluded$u);
     var open = _activeItemKey === key;
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: key
@@ -7537,7 +7537,7 @@ var StyledStatus = index$b(Animated.View)(function (_ref3) {
   };
 });
 
-var _excluded$s = ["children", "visible", "intent", "style", "testID"];
+var _excluded$t = ["children", "visible", "intent", "style", "testID"];
 var Status = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
@@ -7546,7 +7546,7 @@ var Status = function Status(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$s);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$t);
   var _React$useRef = React.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React.useRef(true);
@@ -7579,7 +7579,7 @@ var Status = function Status(_ref) {
   }));
 };
 
-var _excluded$r = ["content", "visible", "max", "intent", "style", "testID"];
+var _excluded$s = ["content", "visible", "max", "intent", "style", "testID"];
 var DEFAULT_MAX_NUMBER = 99;
 var getPaddingState = function getPaddingState(content) {
   return content.length > 1 ? 'wideContent' : 'narrowContent';
@@ -7594,7 +7594,7 @@ var Badge = function Badge(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$r);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$s);
   var _React$useRef = React.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React.useRef(true);
@@ -7698,7 +7698,7 @@ function omit(keys, obj) {
   return result;
 }
 
-var _excluded$q = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$r = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
   return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
@@ -7709,7 +7709,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
     selectedTabKey = _ref.selectedTabKey,
     tabs = _ref.tabs,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$q);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$r);
   var insets = useSafeAreaInsets();
   /**
    * List of loaded tabs, tabs will be loaded when navigated to.
@@ -7795,13 +7795,13 @@ var StyledDivider = index$b(View)(function (_ref) {
   }, horizontalMargin), verticalMargin);
 });
 
-var _excluded$p = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$q = ["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$p);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$q);
   return /*#__PURE__*/React.createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
     themeMarginVertical: marginVertical,
@@ -7931,7 +7931,7 @@ var StyledLoadingDot = index$b(View)(function (_ref2) {
   }, themeStyling());
 });
 
-var _excluded$o = ["count", "size", "testID", "themeVariant"];
+var _excluded$p = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = Animated.createAnimatedComponent(StyledLoadingDot);
 var renderDotComponent = function renderDotComponent(_ref) {
@@ -7963,7 +7963,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
     size = _ref2$size === void 0 ? 12 : _ref2$size,
     testID = _ref2.testID,
     themeVariant = _ref2.themeVariant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$o);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$p);
   var progressAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(progressAnimation.current, {
@@ -8402,11 +8402,11 @@ var Header = function Header(_ref) {
   })) : null), showDivider ? /*#__PURE__*/React.createElement(Divider, null) : null);
 };
 
-var _excluded$n = ["scrollEventThrottle"];
+var _excluded$o = ["scrollEventThrottle"];
 var BottomSheetScrollView = function BottomSheetScrollView(_ref) {
   var _ref$scrollEventThrot = _ref.scrollEventThrottle,
     scrollEventThrottle = _ref$scrollEventThrot === void 0 ? 100 : _ref$scrollEventThrot,
-    props = _objectWithoutProperties(_ref, _excluded$n);
+    props = _objectWithoutProperties(_ref, _excluded$o);
   var _useContext = useContext(BottomSheetContext),
     setInternalShowDivider = _useContext.setInternalShowDivider;
   var onScrollBeginDrag = useCallback(function (e) {
@@ -8721,7 +8721,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$m = ["theme"];
+var _excluded$n = ["theme"];
 var getThemeValue = function getThemeValue(theme, key, props) {
   var propConfig = config[key];
   var propValue = props[key];
@@ -8748,18 +8748,18 @@ var mapStylePropToThemeValue = function mapStylePropToThemeValue(theme, props) {
 var configKeys = Object.keys(config);
 var StyledBox = index$b(View)(function (_ref5) {
   var theme = _ref5.theme,
-    otherProps = _objectWithoutProperties(_ref5, _excluded$m);
+    otherProps = _objectWithoutProperties(_ref5, _excluded$n);
   var styleProps = pick(configKeys, otherProps);
   var flexProps = pick(_toConsumableArray(flexPropsKey), otherProps);
   return _objectSpread2(_objectSpread2({}, mapStylePropToThemeValue(theme, styleProps)), flexProps);
 });
 
-var _excluded$l = ["children", "style", "testID"];
+var _excluded$m = ["children", "style", "testID"];
 var Box = function Box(_ref) {
   var children = _ref.children,
     style = _ref.style,
     testID = _ref.testID,
-    otherProps = _objectWithoutProperties(_ref, _excluded$l);
+    otherProps = _objectWithoutProperties(_ref, _excluded$m);
   return /*#__PURE__*/React.createElement(StyledBox, _extends$1({}, otherProps, {
     style: style,
     testID: testID
@@ -11395,7 +11395,7 @@ var Calendar = function Calendar(_ref) {
   })));
 };
 
-var _excluded$k = ["rounded", "size", "testID", "style"];
+var _excluded$l = ["rounded", "size", "testID", "style"];
 var Image = function Image(_ref) {
   var _ref$rounded = _ref.rounded,
     rounded = _ref$rounded === void 0 ? false : _ref$rounded,
@@ -11403,7 +11403,7 @@ var Image = function Image(_ref) {
     size = _ref$size === void 0 ? '6xlarge' : _ref$size,
     testID = _ref.testID,
     style = _ref.style,
-    imageNativeProps = _objectWithoutProperties(_ref, _excluded$k);
+    imageNativeProps = _objectWithoutProperties(_ref, _excluded$l);
   var theme = useTheme();
   var imageSize = theme.__hd__.image.sizes[size];
   return /*#__PURE__*/React.createElement(Image$1, _extends$1({
@@ -11605,12 +11605,12 @@ var Indicator = index$b(View)(function (_ref2) {
   };
 });
 
-var _excluded$j = ["intent", "children"];
+var _excluded$k = ["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$j);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$k);
   return /*#__PURE__*/React.createElement(StyledDataCard, nativeProps, /*#__PURE__*/React.createElement(Indicator, {
     themeIntent: intent,
     testID: "data-card-indicator"
@@ -11628,11 +11628,11 @@ var StyledCard$1 = index$b(View)(function (_ref) {
   });
 });
 
-var _excluded$i = ["intent", "children"];
+var _excluded$j = ["intent", "children"];
 var Card = function Card(_ref) {
   var intent = _ref.intent,
     children = _ref.children,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$i);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$j);
   return /*#__PURE__*/React.createElement(StyledCard$1, _extends$1({}, nativeProps, {
     themeIntent: intent
   }), children);
@@ -11839,7 +11839,7 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 CardCarousel.displayName = 'CardCarousel';
 
-var _excluded$h = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "pageControlPosition"];
+var _excluded$i = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "pageControlPosition"];
 function useStateFromProp(initialValue) {
   var _useState = useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
@@ -11864,7 +11864,7 @@ var Carousel = function Carousel(_ref) {
     shouldShowPagination = _ref$shouldShowPagina === void 0 ? noop : _ref$shouldShowPagina,
     _ref$pageControlPosit = _ref.pageControlPosition,
     pageControlPosition = _ref$pageControlPosit === void 0 ? 'bottom' : _ref$pageControlPosit,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$h);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$i);
   useDeprecation("shouldShowPagination prop has been deprecated", shouldShowPagination !== noop);
   useDeprecation("The use of 'pageControlPosition == bottom' has been deprecated", pageControlPosition === 'bottom');
   var carouselRef = useRef(null);
@@ -12187,7 +12187,7 @@ var StyledErrorAndMaxLengthContainer = index$b(View)(function () {
   };
 });
 
-var _excluded$g = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "hideCharacterCount", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling", "variant"];
+var _excluded$h = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "hideCharacterCount", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling", "variant"];
 var getState$1 = function getState(_ref) {
   var disabled = _ref.disabled,
     error = _ref.error,
@@ -12239,7 +12239,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     allowFontScaling = _ref2$allowFontScalin === void 0 ? false : _ref2$allowFontScalin,
     _ref2$variant = _ref2.variant,
     variant = _ref2$variant === void 0 ? 'text' : _ref2$variant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$g);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$h);
   var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
   var actualSuffix = loading ? 'loading' : suffix;
@@ -12683,11 +12683,11 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
   }))));
 };
 
-var _excluded$f = ["variant"];
+var _excluded$g = ["variant"];
 var DatePicker = function DatePicker(_ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
-    props = _objectWithoutProperties(_ref, _excluded$f);
+    props = _objectWithoutProperties(_ref, _excluded$g);
   if (variant === 'calendar') {
     return /*#__PURE__*/React.createElement(DatePickerCalendar, props);
   }
@@ -13121,7 +13121,7 @@ var StyledErrorDescription = index$b(Typography.Body)(function (_ref9) {
   };
 });
 
-var _excluded$e = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"],
+var _excluded$f = ["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)) {
@@ -13147,7 +13147,7 @@ var ErrorPage = function ErrorPage(_ref) {
     onCtaPress = _ref.onCtaPress,
     secondaryCtaText = _ref.secondaryCtaText,
     onSecondaryCtaPress = _ref.onSecondaryCtaPress,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$e);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$f);
   var showCta = ctaText && onCtaPress !== undefined;
   var showSecondaryCta = secondaryCtaText && onSecondaryCtaPress !== undefined;
   var showButtonContainer = showCta || showSecondaryCta;
@@ -13306,11 +13306,11 @@ var StyledIconContainer = index$b(Box)(function (_ref4) {
   };
 });
 
-var _excluded$d = ["active"];
+var _excluded$e = ["active"];
 var AnimatedIcons = Animated.createAnimatedComponent(StyledFABIcon);
 var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
   var active = _ref.active,
-    iconProps = _objectWithoutProperties(_ref, _excluded$d);
+    iconProps = _objectWithoutProperties(_ref, _excluded$e);
   var rotateAnimation = useRef(new Animated.Value(active ? 1 : 0));
   useEffect(function () {
     var animation = Animated.spring(rotateAnimation.current, {
@@ -13432,10 +13432,17 @@ var FAB = /*#__PURE__*/forwardRef(function (_ref3, ref) {
   return /*#__PURE__*/React.createElement(StyledFAB$1
   /** Add a small timeout before executing animation to prevent flakiness */, {
     onLayout: function onLayout() {
-      return setTimeout(function () {
+      setTimeout(function () {
         return setCanAnimate(true);
       }, 500);
     },
+    ref: function ref(_ref4) {
+      if (_ref4) {
+        _ref4.measureInWindow(function (x, y, width, height) {
+          console.log('measureInWindow', x, y, width, height);
+        });
+      }
+    },
     underlayColor: theme.__hd__.fab.colors.buttonPressedBackground,
     onPress: onPress,
     style: [style, {
@@ -13916,11 +13923,11 @@ var ModalProvider = function ModalProvider(_ref) {
   return /*#__PURE__*/React.createElement(RootSiblingParent, null, children);
 };
 
-var _excluded$c = ["style", "children"];
+var _excluded$d = ["style", "children"];
 var ModalPresenter = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var style = _ref2.style,
     children = _ref2.children,
-    props = _objectWithoutProperties(_ref2, _excluded$c);
+    props = _objectWithoutProperties(_ref2, _excluded$d);
   var animatedOpacity = useRef(new Animated.Value(0));
   var theme = useTheme();
   React.useEffect(function () {
@@ -14004,7 +14011,7 @@ var showModal = function showModal(content) {
 };
 ModalPresenter.displayName = 'ModalPresenter';
 
-var wrapperStyle = {
+var wrapperStyle$1 = {
   width: Dimensions.get('window').width,
   height: Dimensions.get('window').height
 };
@@ -14025,11 +14032,11 @@ var Modal = function Modal(_ref) {
   var getModalContent = React.useCallback(function () {
     var isUpdate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     return animationType === 'none' ? /*#__PURE__*/React.createElement(View, {
-      style: wrapperStyle,
+      style: wrapperStyle$1,
       testID: testID
     }, children) : /*#__PURE__*/React.createElement(ModalContentWrapper, {
       visible: visible,
-      style: wrapperStyle,
+      style: wrapperStyle$1,
       animationType: animationType,
       testID: testID,
       onShow: onShow,
@@ -14378,7 +14385,7 @@ var StyledStrokeEnd = index$b(View)(function (_ref6) {
   };
 });
 
-var _excluded$b = ["value", "renderValue", "intent", "style", "testID"];
+var _excluded$c = ["value", "renderValue", "intent", "style", "testID"];
 var HalfCircle = function HalfCircle(_ref) {
   var type = _ref.type,
     themeIntent = _ref.themeIntent;
@@ -14399,7 +14406,7 @@ var ProgressCircle = function ProgressCircle(_ref2) {
     intent = _ref2$intent === void 0 ? 'primary' : _ref2$intent,
     style = _ref2.style,
     testID = _ref2.testID,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$b);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$c);
   var theme = useTheme$1();
   var radius = theme.__hd__.progress.sizes.circleDiameter / 2;
   var progressAnimatedValue = useRef(new Animated.Value(0));
@@ -14501,8 +14508,7 @@ var StyledWrapper$4 = index$b(View)(function (_ref) {
     height: theme.__hd__.progress.sizes.barHeight,
     alignSelf: 'stretch',
     backgroundColor: theme.__hd__.progress.colors.incompleteness[THEME_INTENT_MAP[themeIntent]],
-    overflow: 'hidden',
-    borderRadius: theme.__hd__.progress.radii["default"]
+    overflow: 'hidden'
   };
 });
 var StyledInner = index$b(Animated.View)(function (_ref2) {
@@ -14515,14 +14521,14 @@ var StyledInner = index$b(Animated.View)(function (_ref2) {
   };
 });
 
-var _excluded$a = ["value", "intent", "style", "testID"];
+var _excluded$b = ["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$a);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$b);
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     width = _useState2[0],
@@ -14713,14 +14719,14 @@ var AnimatedSpinner = function AnimatedSpinner(_ref) {
   }, dotProps))));
 };
 
-var _excluded$9 = ["testID", "size", "intent"];
+var _excluded$a = ["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$9);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$a);
   return /*#__PURE__*/React.createElement(StyledView$1, nativeProps, /*#__PURE__*/React.createElement(StyledSpinnerContainer, {
     testID: testID
   }, /*#__PURE__*/React.createElement(AnimatedSpinner, {
@@ -14753,7 +14759,7 @@ var SwipeableAction = function SwipeableAction(_ref) {
   }, children);
 };
 
-var _excluded$8 = ["children", "state", "onStateChange", "leftActions", "leftActionsWidth", "rightActions", "rightActionsWidth"];
+var _excluded$9 = ["children", "state", "onStateChange", "leftActions", "leftActionsWidth", "rightActions", "rightActionsWidth"];
 var renderActions = function renderActions(actions, width, progress, direction) {
   var trans = progress.interpolate({
     inputRange: [0, 1],
@@ -14778,7 +14784,7 @@ var Swipeable = function Swipeable(_ref) {
     leftActionsWidth = _ref.leftActionsWidth,
     rightActions = _ref.rightActions,
     rightActionsWidth = _ref.rightActionsWidth,
-    swipeableProps = _objectWithoutProperties(_ref, _excluded$8);
+    swipeableProps = _objectWithoutProperties(_ref, _excluded$9);
   var _useWindowDimensions = useWindowDimensions(),
     width = _useWindowDimensions.width;
   var swipeableRef = useRef(null);
@@ -15083,7 +15089,7 @@ var StyledSectionList = index$b(SectionList)(function (_ref4) {
   };
 });
 
-var _excluded$7 = ["keyExtractor", "loading", "onEndReached", "onQueryChange", "sections", "renderItem", "sectionListRef"];
+var _excluded$8 = ["keyExtractor", "loading", "onEndReached", "onQueryChange", "sections", "renderItem", "sectionListRef"];
 var BaseOptionList = function BaseOptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -15092,7 +15098,7 @@ var BaseOptionList = function BaseOptionList(_ref) {
     sections = _ref.sections,
     renderItem = _ref.renderItem,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$7);
+    rest = _objectWithoutProperties(_ref, _excluded$8);
   var theme = useTheme$1();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -15162,7 +15168,7 @@ var Option$2 = function Option(_ref) {
   return highlighted === true ? /*#__PURE__*/React.createElement(List.Item, props) : /*#__PURE__*/React.createElement(List.BasicItem, props);
 };
 
-var _excluded$6 = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
+var _excluded$7 = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
 var OptionList$1 = function OptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -15173,7 +15179,7 @@ var OptionList$1 = function OptionList(_ref) {
     renderOption = _ref.renderOption,
     value = _ref.value,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$6);
+    rest = _objectWithoutProperties(_ref, _excluded$7);
   var renderItem = function renderItem(info) {
     var item = info.item;
     var selected = value.includes(info.item.value);
@@ -15361,7 +15367,7 @@ var StyledOptionList = index$b(BaseOptionList)(function (_ref) {
   };
 });
 
-var _excluded$5 = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
+var _excluded$6 = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
 var OptionList = function OptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -15372,7 +15378,7 @@ var OptionList = function OptionList(_ref) {
     renderOption = _ref.renderOption,
     value = _ref.value,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$5);
+    rest = _objectWithoutProperties(_ref, _excluded$6);
   var renderItem = function renderItem(info) {
     var item = info.item;
     var selected = item.value === value;
@@ -15537,7 +15543,7 @@ var StyledGradientContainer = index$b(Box)(function (_ref2) {
   };
 });
 
-var _excluded$4 = ["intent", "variant", "style", "onLayout"];
+var _excluded$5 = ["intent", "variant", "style", "onLayout"];
 var AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
 var gradientPositions = {
   start: {
@@ -15569,7 +15575,7 @@ var Skeleton = function Skeleton(_ref) {
     variant = _ref$variant === void 0 ? 'rounded' : _ref$variant,
     style = _ref.style,
     onLayout = _ref.onLayout,
-    props = _objectWithoutProperties(_ref, _excluded$4);
+    props = _objectWithoutProperties(_ref, _excluded$5);
   var theme = useTheme();
   var colors = useMemo(function () {
     return getGradientColors(theme, intent);
@@ -15701,7 +15707,7 @@ var StyledSuccessModal = index$b(Modal$1)({
   width: '100%'
 });
 
-var _excluded$3 = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"];
+var _excluded$4 = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"];
 var renderImage = function renderImage(image) {
   if ( /*#__PURE__*/isValidElement(image)) {
     return /*#__PURE__*/React.cloneElement(image, {
@@ -15727,7 +15733,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$3);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$4);
   var showSecondaryButton = secondaryCtaText && onSecondaryCtaPress;
   return /*#__PURE__*/React.createElement(StyledSuccessContainer, _extends$1({
     testID: testID,
@@ -15769,7 +15775,7 @@ var StyledWrapper$2 = index$b(View)(function (_ref) {
     height: theme.__hd__["switch"].sizes.selector.height,
     borderRadius: theme.__hd__["switch"].radii.selector["default"],
     backgroundColor: theme.__hd__["switch"].colors.selector.background,
-    paddingHorizontal: theme.__hd__["switch"].spaces.selector.wrapperHorizontalPadding,
+    padding: theme.__hd__["switch"].spaces.selector.wrapperPadding,
     position: 'relative'
   };
 });
@@ -15794,10 +15800,15 @@ var StyledIconWrapper$1 = index$b(AnimatedView)(function (_ref3) {
 });
 var StyledKnot$1 = index$b(AnimatedView)(function (_ref4) {
   var theme = _ref4.theme;
-  return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
+  return {
     borderRadius: theme.__hd__["switch"].radii.selector["default"],
-    backgroundColor: theme.__hd__["switch"].colors.selector.textBackground
-  });
+    backgroundColor: theme.__hd__["switch"].colors.selector.textBackground,
+    position: 'absolute',
+    top: theme.__hd__["switch"].spaces.selector.wrapperPadding,
+    bottom: theme.__hd__["switch"].spaces.selector.wrapperPadding,
+    left: theme.__hd__["switch"].spaces.selector.wrapperPadding,
+    right: theme.__hd__["switch"].spaces.selector.wrapperPadding
+  };
 });
 
 var OptionContent = function OptionContent(_ref) {
@@ -15873,6 +15884,7 @@ var SelectorSwitch = function SelectorSwitch(_ref) {
     _onPress = _ref.onPress,
     style = _ref.style,
     testID = _ref.testID;
+  var theme = useTheme$1();
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     knotWidth = _useState2[0],
@@ -15884,7 +15896,7 @@ var SelectorSwitch = function SelectorSwitch(_ref) {
   var animatedValue = useRef(new Animated.Value(0)).current;
   var translateX = animatedValue.interpolate({
     inputRange: [0, 1],
-    outputRange: [0, Math.floor(containerWidth - knotWidth)]
+    outputRange: [0, Math.floor(containerWidth - knotWidth - theme.space.small)]
   });
   useEffect(function () {
     Animated.timing(animatedValue, {
@@ -15893,10 +15905,10 @@ var SelectorSwitch = function SelectorSwitch(_ref) {
       easing: Easing.inOut(Easing.ease),
       useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android'
     }).start();
-  }, [value, animatedValue, options]);
+  }, [value]);
   var onContainerLayout = useCallback(function (e) {
     setContainerWidth(e.nativeEvent.layout.width);
-  }, []);
+  }, [options]);
   var onItemLayout = useCallback(function (e, optionValue) {
     if (optionValue === value) {
       setKnotWidth(e.nativeEvent.layout.width);
@@ -16611,7 +16623,7 @@ var StyledText = index$b(Typography.Caption)(function (_ref3) {
   };
 });
 
-var _excluded$2 = ["content", "variant", "intent", "style", "testID"];
+var _excluded$3 = ["content", "variant", "intent", "style", "testID"];
 var Tag = function Tag(_ref) {
   var content = _ref.content,
     _ref$variant = _ref.variant,
@@ -16620,7 +16632,7 @@ var Tag = function Tag(_ref) {
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$2);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$3);
   return /*#__PURE__*/React.createElement(StyledView, _extends$1({}, nativeProps, {
     themeIntent: intent,
     themeVariant: variant,
@@ -17237,10 +17249,10 @@ var ToolbarGroup = function ToolbarGroup(_ref) {
   }));
 };
 
-var _excluded$1 = ["children"];
+var _excluded$2 = ["children"];
 var Toolbar = function Toolbar(_ref) {
   var children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded$1);
+    rest = _objectWithoutProperties(_ref, _excluded$2);
   return /*#__PURE__*/React.createElement(ToolbarWrapper, rest, children);
 };
 var index$1 = Object.assign(Toolbar, {
@@ -17259,7 +17271,7 @@ var StyledIconWrapper = index$b(AnimatedBox)(function (_ref) {
   };
 });
 
-var _excluded = ["options", "value", "onChange", "readonly", "disabled"];
+var _excluded$1 = ["options", "value", "onChange", "readonly", "disabled"];
 var Rate = function Rate(_ref) {
   var options = _ref.options,
     value = _ref.value,
@@ -17268,7 +17280,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);
+    otherProps = _objectWithoutProperties(_ref, _excluded$1);
   var valueIndex = useMemo(function () {
     return options.findIndex(function (item) {
       return item.value === value;
@@ -33691,4 +33703,134 @@ var index = Object.assign(RichTextEditorWithRef, {
   Toolbar: EditorToolbar
 });
 
-export { Accordion, Alert, Attachment, index$a as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar, Card$1 as Card, index$9 as Carousel, Checkbox, Collapse, ContentNavigator, DatePicker, Divider, index$8 as Drawer, Empty, Error$1 as Error, index$7 as FAB, Icon, Image, List, index$6 as Modal, PageControl, PinInput, Progress, CompoundRadio as Radio, Rate, RefreshControl, index as RichTextEditor, SectionHeading, 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, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };
+var _excluded = ["style", "children"];
+var FABModalPresenter = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var style = _ref2.style,
+    children = _ref2.children,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var animatedOpacity = useRef(new Animated.Value(0));
+  React.useEffect(function () {
+    Animated.spring(animatedOpacity.current, {
+      toValue: 1,
+      useNativeDriver: true
+    }).start();
+  }, []);
+  React.useImperativeHandle(ref, function () {
+    return {
+      animatedOut: function animatedOut(completion) {
+        Animated.spring(animatedOpacity.current, {
+          toValue: 0,
+          useNativeDriver: true
+        }).start(function () {
+          completion === null || completion === void 0 ? void 0 : completion();
+        });
+      }
+    };
+  });
+  return /*#__PURE__*/React.createElement(Box, {
+    style: StyleSheet$1.absoluteFill,
+    pointerEvents: "box-none"
+  }, /*#__PURE__*/React.createElement(Animated.View, _extends$1({
+    style: [{
+      width: '100%',
+      height: '100%',
+      justifyContent: 'center',
+      alignItems: 'center',
+      opacity: animatedOpacity.current
+    }, style]
+  }, props, {
+    pointerEvents: "box-none"
+  }), children));
+});
+/**
+ * Present a modal on screen immediately.
+ *
+ * The new presented modal will be on top of existing modals if there are any.
+ *
+ * @param Content A component to be presented as a modal on screen.
+ * This component will be centered horizontally and vertically on screen with
+ * a semitransparent black overlay underneath.
+ * @param contentProps Props for this modal component.
+ * @returns A `ModalHandler` you can use to dismiss the modal.
+ */
+var showFABModal = function showFABModal(content) {
+  var _ref3 = null;
+  var rootSiblings = null;
+  var dismiss = function dismiss(onDismiss) {
+    if (rootSiblings) {
+      var cleanup = function cleanup() {
+        var _rootSiblings;
+        (_rootSiblings = rootSiblings) === null || _rootSiblings === void 0 ? void 0 : _rootSiblings.destroy();
+        rootSiblings = null;
+        _ref3 = null;
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+      };
+      if (_ref3) {
+        _ref3.animatedOut(cleanup);
+      } else {
+        cleanup();
+      }
+    }
+  };
+  var update = function update(newContent) {
+    var _rootSiblings2;
+    (_rootSiblings2 = rootSiblings) === null || _rootSiblings2 === void 0 ? void 0 : _rootSiblings2.update( /*#__PURE__*/React.createElement(FABModalPresenter, {
+      ref: function ref(_ref) {
+        _ref3 = _ref;
+      }
+    }, newContent));
+  };
+  rootSiblings = new RootSiblings( /*#__PURE__*/React.createElement(FABModalPresenter, {
+    ref: function ref(_ref) {
+      _ref3 = _ref;
+    }
+  }, content));
+  return {
+    dismiss: dismiss,
+    update: update
+  };
+};
+FABModalPresenter.displayName = 'FABModalPresenter';
+
+var wrapperStyle = {
+  width: Dimensions.get('window').width,
+  height: Dimensions.get('window').height
+};
+var fABModal = function fABModal(_ref) {
+  var children = _ref.children,
+    onShow = _ref.onShow,
+    testID = _ref.testID,
+    _ref$visible = _ref.visible,
+    visible = _ref$visible === void 0 ? true : _ref$visible;
+  var _React$useState = React.useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    modalHandler = _React$useState2[0],
+    setModalHandler = _React$useState2[1];
+  var getModalContent = React.useCallback(function () {
+    return /*#__PURE__*/React.createElement(View, {
+      pointerEvents: "box-none",
+      style: wrapperStyle,
+      testID: testID
+    }, children);
+  }, [visible, children, onShow, testID]);
+  React.useEffect(function () {
+    if (visible) {
+      // Modal does not exist, create a new one
+      if (!modalHandler) {
+        var newModalHandler = showFABModal(getModalContent());
+        setModalHandler(newModalHandler);
+        onShow === null || onShow === void 0 ? void 0 : onShow();
+      }
+      // Modal already exists, update it
+      else {
+        modalHandler.update(getModalContent());
+      }
+    } else {
+      modalHandler === null || modalHandler === void 0 ? void 0 : modalHandler.dismiss();
+      setModalHandler(undefined);
+    }
+  }, [getModalContent]);
+  return null;
+};
+
+export { Accordion, Alert, Attachment, index$a as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar, Card$1 as Card, index$9 as Carousel, Checkbox, Collapse, ContentNavigator, DatePicker, Divider, index$8 as Drawer, Empty, Error$1 as Error, index$7 as FAB, fABModal as FABModal, Icon, Image, List, index$6 as Modal, PageControl, PinInput, Progress, CompoundRadio as Radio, Rate, RefreshControl, index as RichTextEditor, SectionHeading, 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, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };