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

package/.turbo/turbo-build.log

@@ -4,5 +4,5 @@ $ rollup -c
 src/index.ts → lib/index.js, es/index.js...
 (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
 (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/Volumes/Data/Projects/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-created lib/index.js, es/index.js in 32.7s
+created lib/index.js, es/index.js in 31s
 $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -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, {
@@ -13563,136 +13570,6 @@ var StyledHeaderText = index$b(Typography.Title)(function (_ref3) {
   };
 });
 
-var _excluded$d = ["style", "children"];
-var FABModalPresenter = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var style = _ref2.style,
-    children = _ref2.children,
-    props = _objectWithoutProperties(_ref2, _excluded$d);
-  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$1 = {
-  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$1,
-      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;
-};
-
 var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var headerTitle = _ref.headerTitle,
     onPress = _ref.onPress,
@@ -13743,7 +13620,7 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
     inputRange: [0, 1],
     outputRange: [0, 1]
   });
-  return /*#__PURE__*/React.createElement(fABModal, null, /*#__PURE__*/React.createElement(StyledContainer$2, {
+  return /*#__PURE__*/React.createElement(StyledContainer$2, {
     testID: testID,
     pointerEvents: "box-none",
     style: style
@@ -13787,7 +13664,7 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
     active: active,
     title: fabTitle,
     ref: fabRef
-  })));
+  }));
 });
 ActionGroup.displayName = 'FAB.ActionGroup';
 
@@ -14046,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 () {
@@ -14134,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
 };
@@ -14155,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,
@@ -14508,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;
@@ -14529,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));
@@ -14644,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],
@@ -14842,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, {
@@ -14882,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],
@@ -14907,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);
@@ -15212,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,
@@ -15221,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),
@@ -15291,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,
@@ -15302,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);
@@ -15490,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,
@@ -15501,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;
@@ -15666,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: {
@@ -15698,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);
@@ -15830,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, {
@@ -15856,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,
@@ -16746,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,
@@ -16755,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,
@@ -17372,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, {
@@ -17394,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,
@@ -17403,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;
@@ -33826,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 };

package/lib/index.js

@@ -13463,10 +13463,17 @@ var FAB = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
   return /*#__PURE__*/React__default["default"].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, {
@@ -13594,136 +13601,6 @@ var StyledHeaderText = index$b(Typography.Title)(function (_ref3) {
   };
 });
 
-var _excluded$d = ["style", "children"];
-var FABModalPresenter = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
-  var style = _ref2.style,
-    children = _ref2.children,
-    props = _objectWithoutProperties(_ref2, _excluded$d);
-  var animatedOpacity = React.useRef(new reactNative.Animated.Value(0));
-  React__default["default"].useEffect(function () {
-    reactNative.Animated.spring(animatedOpacity.current, {
-      toValue: 1,
-      useNativeDriver: true
-    }).start();
-  }, []);
-  React__default["default"].useImperativeHandle(ref, function () {
-    return {
-      animatedOut: function animatedOut(completion) {
-        reactNative.Animated.spring(animatedOpacity.current, {
-          toValue: 0,
-          useNativeDriver: true
-        }).start(function () {
-          completion === null || completion === void 0 ? void 0 : completion();
-        });
-      }
-    };
-  });
-  return /*#__PURE__*/React__default["default"].createElement(Box, {
-    style: reactNative.StyleSheet.absoluteFill,
-    pointerEvents: "box-none"
-  }, /*#__PURE__*/React__default["default"].createElement(reactNative.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__default["default"].createElement(FABModalPresenter, {
-      ref: function ref(_ref) {
-        _ref3 = _ref;
-      }
-    }, newContent));
-  };
-  rootSiblings = new RootSiblings__default["default"]( /*#__PURE__*/React__default["default"].createElement(FABModalPresenter, {
-    ref: function ref(_ref) {
-      _ref3 = _ref;
-    }
-  }, content));
-  return {
-    dismiss: dismiss,
-    update: update
-  };
-};
-FABModalPresenter.displayName = 'FABModalPresenter';
-
-var wrapperStyle$1 = {
-  width: reactNative.Dimensions.get('window').width,
-  height: reactNative.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__default["default"].useState(),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    modalHandler = _React$useState2[0],
-    setModalHandler = _React$useState2[1];
-  var getModalContent = React__default["default"].useCallback(function () {
-    return /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
-      pointerEvents: "box-none",
-      style: wrapperStyle$1,
-      testID: testID
-    }, children);
-  }, [visible, children, onShow, testID]);
-  React__default["default"].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;
-};
-
 var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var headerTitle = _ref.headerTitle,
     onPress = _ref.onPress,
@@ -13774,7 +13651,7 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     inputRange: [0, 1],
     outputRange: [0, 1]
   });
-  return /*#__PURE__*/React__default["default"].createElement(fABModal, null, /*#__PURE__*/React__default["default"].createElement(StyledContainer$2, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledContainer$2, {
     testID: testID,
     pointerEvents: "box-none",
     style: style
@@ -13818,7 +13695,7 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     active: active,
     title: fabTitle,
     ref: fabRef
-  })));
+  }));
 });
 ActionGroup.displayName = 'FAB.ActionGroup';
 
@@ -14077,11 +13954,11 @@ var ModalProvider = function ModalProvider(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(RootSiblings.RootSiblingParent, null, children);
 };
 
-var _excluded$c = ["style", "children"];
+var _excluded$d = ["style", "children"];
 var ModalPresenter = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var style = _ref2.style,
     children = _ref2.children,
-    props = _objectWithoutProperties(_ref2, _excluded$c);
+    props = _objectWithoutProperties(_ref2, _excluded$d);
   var animatedOpacity = React.useRef(new reactNative.Animated.Value(0));
   var theme = useTheme();
   React__default["default"].useEffect(function () {
@@ -14165,7 +14042,7 @@ var showModal = function showModal(content) {
 };
 ModalPresenter.displayName = 'ModalPresenter';
 
-var wrapperStyle = {
+var wrapperStyle$1 = {
   width: reactNative.Dimensions.get('window').width,
   height: reactNative.Dimensions.get('window').height
 };
@@ -14186,11 +14063,11 @@ var Modal = function Modal(_ref) {
   var getModalContent = React__default["default"].useCallback(function () {
     var isUpdate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
     return animationType === 'none' ? /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
-      style: wrapperStyle,
+      style: wrapperStyle$1,
       testID: testID
     }, children) : /*#__PURE__*/React__default["default"].createElement(ModalContentWrapper, {
       visible: visible,
-      style: wrapperStyle,
+      style: wrapperStyle$1,
       animationType: animationType,
       testID: testID,
       onShow: onShow,
@@ -14539,7 +14416,7 @@ var StyledStrokeEnd = index$b(reactNative.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;
@@ -14560,7 +14437,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 = React.useRef(new reactNative.Animated.Value(0));
@@ -14675,14 +14552,14 @@ var StyledInner = index$b(reactNative.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 = React.useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     width = _useState2[0],
@@ -14873,14 +14750,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__default["default"].createElement(StyledView$1, nativeProps, /*#__PURE__*/React__default["default"].createElement(StyledSpinnerContainer, {
     testID: testID
   }, /*#__PURE__*/React__default["default"].createElement(AnimatedSpinner, {
@@ -14913,7 +14790,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],
@@ -14938,7 +14815,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 = reactNative.useWindowDimensions(),
     width = _useWindowDimensions.width;
   var swipeableRef = React.useRef(null);
@@ -15243,7 +15120,7 @@ var StyledSectionList = index$b(reactNative.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,
@@ -15252,7 +15129,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 = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -15322,7 +15199,7 @@ var Option$2 = function Option(_ref) {
   return highlighted === true ? /*#__PURE__*/React__default["default"].createElement(List.Item, props) : /*#__PURE__*/React__default["default"].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,
@@ -15333,7 +15210,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);
@@ -15521,7 +15398,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,
@@ -15532,7 +15409,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;
@@ -15697,7 +15574,7 @@ var StyledGradientContainer = index$b(Box)(function (_ref2) {
   };
 });
 
-var _excluded$4 = ["intent", "variant", "style", "onLayout"];
+var _excluded$5 = ["intent", "variant", "style", "onLayout"];
 var AnimatedLinearGradient = reactNative.Animated.createAnimatedComponent(LinearGradient__default["default"]);
 var gradientPositions = {
   start: {
@@ -15729,7 +15606,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 = React.useMemo(function () {
     return getGradientColors(theme, intent);
@@ -15861,7 +15738,7 @@ var StyledSuccessModal = index$b(reactNative.Modal)({
   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__*/React.isValidElement(image)) {
     return /*#__PURE__*/React__default["default"].cloneElement(image, {
@@ -15887,7 +15764,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__default["default"].createElement(StyledSuccessContainer, _extends$1({
     testID: testID,
@@ -16777,7 +16654,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,
@@ -16786,7 +16663,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__default["default"].createElement(StyledView, _extends$1({}, nativeProps, {
     themeIntent: intent,
     themeVariant: variant,
@@ -17403,10 +17280,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__default["default"].createElement(ToolbarWrapper, rest, children);
 };
 var index$1 = Object.assign(Toolbar, {
@@ -17425,7 +17302,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,
@@ -17434,7 +17311,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 = React.useMemo(function () {
     return options.findIndex(function (item) {
       return item.value === value;
@@ -33857,6 +33734,136 @@ var index = Object.assign(RichTextEditorWithRef, {
   Toolbar: EditorToolbar
 });
 
+var _excluded = ["style", "children"];
+var FABModalPresenter = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
+  var style = _ref2.style,
+    children = _ref2.children,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  var animatedOpacity = React.useRef(new reactNative.Animated.Value(0));
+  React__default["default"].useEffect(function () {
+    reactNative.Animated.spring(animatedOpacity.current, {
+      toValue: 1,
+      useNativeDriver: true
+    }).start();
+  }, []);
+  React__default["default"].useImperativeHandle(ref, function () {
+    return {
+      animatedOut: function animatedOut(completion) {
+        reactNative.Animated.spring(animatedOpacity.current, {
+          toValue: 0,
+          useNativeDriver: true
+        }).start(function () {
+          completion === null || completion === void 0 ? void 0 : completion();
+        });
+      }
+    };
+  });
+  return /*#__PURE__*/React__default["default"].createElement(Box, {
+    style: reactNative.StyleSheet.absoluteFill,
+    pointerEvents: "box-none"
+  }, /*#__PURE__*/React__default["default"].createElement(reactNative.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__default["default"].createElement(FABModalPresenter, {
+      ref: function ref(_ref) {
+        _ref3 = _ref;
+      }
+    }, newContent));
+  };
+  rootSiblings = new RootSiblings__default["default"]( /*#__PURE__*/React__default["default"].createElement(FABModalPresenter, {
+    ref: function ref(_ref) {
+      _ref3 = _ref;
+    }
+  }, content));
+  return {
+    dismiss: dismiss,
+    update: update
+  };
+};
+FABModalPresenter.displayName = 'FABModalPresenter';
+
+var wrapperStyle = {
+  width: reactNative.Dimensions.get('window').width,
+  height: reactNative.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__default["default"].useState(),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    modalHandler = _React$useState2[0],
+    setModalHandler = _React$useState2[1];
+  var getModalContent = React__default["default"].useCallback(function () {
+    return /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
+      pointerEvents: "box-none",
+      style: wrapperStyle,
+      testID: testID
+    }, children);
+  }, [visible, children, onShow, testID]);
+  React__default["default"].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;
+};
+
 exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.Attachment = Attachment;
@@ -33878,6 +33885,7 @@ exports.Drawer = index$8;
 exports.Empty = Empty;
 exports.Error = Error$1;
 exports.FAB = index$7;
+exports.FABModal = fABModal;
 exports.Icon = Icon;
 exports.Image = Image;
 exports.List = List;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.35.0-alpha.0",
+  "version": "8.35.0-alpha.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/FAB/ActionGroup/index.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, useRef } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
-import { Animated, Platform } from 'react-native';
+import { Animated, Modal, Platform } from 'react-native';
 import type { IconName } from '../../Icon';
 import type { ActionItemProps } from './ActionItem';
 import ActionItem from './ActionItem';
@@ -14,7 +14,7 @@ import {
 
 import Box from '../../Box';
 import { FABHandles } from '../FAB';
-import FABModal from './FABModal';
+import { FABModal } from '../../..';
 
 export type ActionGroupHandles = {
   showFAB: () => void;
@@ -124,53 +124,71 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
       });
 
     return (
-      <FABModal>
-        <StyledContainer testID={testID} pointerEvents="box-none" style={style}>
-          <StyledBackdrop
-            pointerEvents={active ? 'auto' : 'box-none'}
-            testID="back-drop"
-            style={{ opacity: interpolatedBackdropOpacityAnimation }}
-          />
-          <StyledActionGroupContainer
-            pointerEvents={active ? 'auto' : 'none'}
-            testID="action-group"
-            style={{
-              opacity: interpolatedActionGroupOpacityAnimation,
-            }}
+      <StyledContainer testID={testID} pointerEvents="box-none" style={style}>
+        <FABModal visible={active}>
+          <StyledContainer
+            testID={testID}
+            pointerEvents="box-none"
+            style={style}
           >
-            {!!headerTitle && (
-              <Animated.View
-                style={{ transform: [{ translateY: titleTranslateY }] }}
-              >
-                <StyledHeaderText testID="header-text" level="h4">
-                  {headerTitle}
-                </StyledHeaderText>
-              </Animated.View>
-            )}
-
-            <Box style={[style, { paddingBottom: 0 }]}>
-              {items?.map((itemProp, index) => (
-                <ActionItem
-                  key={itemProp.key || `${itemProp.icon}_${itemProp.title}`}
-                  {...itemProp}
-                  index={active ? index : items.length - index}
-                  active={active}
-                />
-              ))}
-            </Box>
-          </StyledActionGroupContainer>
-
-          <StyledFAB
-            testID="fab"
-            icon={fabIcon}
-            onPress={onPress}
-            animated
-            active={active}
-            title={fabTitle}
-            ref={fabRef}
-          />
-        </StyledContainer>
-      </FABModal>
+            <StyledBackdrop
+              pointerEvents={active ? 'auto' : 'box-none'}
+              testID="back-drop"
+              style={{
+                opacity: interpolatedBackdropOpacityAnimation,
+                backgroundColor: 'yellow',
+              }}
+            />
+            <StyledActionGroupContainer
+              pointerEvents={active ? 'auto' : 'none'}
+              testID="action-group"
+              style={{
+                opacity: interpolatedActionGroupOpacityAnimation,
+                flex: 1,
+              }}
+            >
+              {!!headerTitle && (
+                <Animated.View
+                  style={{ transform: [{ translateY: titleTranslateY }] }}
+                >
+                  <StyledHeaderText testID="header-text" level="h4">
+                    {headerTitle}
+                  </StyledHeaderText>
+                </Animated.View>
+              )}
+
+              <Box style={[style, { paddingBottom: 0 }]}>
+                {items?.map((itemProp, index) => (
+                  <ActionItem
+                    key={itemProp.key || `${itemProp.icon}_${itemProp.title}`}
+                    {...itemProp}
+                    index={active ? index : items.length - index}
+                    active={active}
+                  />
+                ))}
+              </Box>
+            </StyledActionGroupContainer>
+            <StyledFAB
+              testID="fab"
+              icon={fabIcon}
+              onPress={onPress}
+              animated
+              active={active}
+              title={fabTitle}
+              ref={fabRef}
+            />
+          </StyledContainer>
+        </FABModal>
+        <StyledFAB
+          testID="fab"
+          icon={fabIcon}
+          onPress={onPress}
+          animated
+          active={active}
+          title={fabTitle}
+          ref={fabRef}
+        />
+      </StyledContainer>
     );
   }
 );

package/src/components/FAB/FAB.tsx

@@ -163,7 +163,16 @@ const FAB = forwardRef<FABHandles, FABProps>(
     return (
       <StyledFAB
         /** Add a small timeout before executing animation to prevent flakiness */
-        onLayout={() => setTimeout(() => setCanAnimate(true), 500)}
+        onLayout={() => {
+          setTimeout(() => setCanAnimate(true), 500);
+        }}
+        ref={(ref) => {
+          if (ref) {
+            ref.measureInWindow((x, y, width, height) => {
+              console.log('measureInWindow', x, y, width, height);
+            });
+          }
+        }}
         underlayColor={theme.__hd__.fab.colors.buttonPressedBackground}
         onPress={onPress}
         style={[

package/src/index.ts

@@ -60,6 +60,7 @@ import Rate from './components/Rate';
 import RefreshControl from './components/RefreshControl';
 import RichTextEditor from './components/RichTextEditor';
 import PageControl from './components/PageControl';
+import FABModal from './components/FAB/ActionGroup/FABModal';
 
 export {
   theme,
@@ -123,6 +124,7 @@ export {
   Rate,
   RefreshControl,
   RichTextEditor,
+  FABModal,
 };
 
 export * from './types';

package/types/index.d.ts

@@ -47,5 +47,6 @@ import Rate from './components/Rate';
 import RefreshControl from './components/RefreshControl';
 import RichTextEditor from './components/RichTextEditor';
 import PageControl from './components/PageControl';
-export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, Icon, Image, List, Modal, PinInput, Progress, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Success, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, Rate, RefreshControl, RichTextEditor, };
+import FABModal from './components/FAB/ActionGroup/FABModal';
+export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, Accordion, Alert, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Carousel, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, Icon, Image, List, Modal, PinInput, Progress, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, SectionHeading, Select, Success, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, Rate, RefreshControl, RichTextEditor, FABModal, };
 export * from './types';