@hero-design/rn 8.91.6 → 8.91.8

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-(node:3010) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:3034) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 (Use `node --trace-warnings ...` to show where the warning was created)
 
 src/index.ts → lib/index.js, es/index.js...
@@ -10,4 +10,4 @@
                                      ~~~~~~~~~~~~~~~~~~~
 
 (!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 53.8s
+created lib/index.js, es/index.js in 52.7s

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @hero-design/rn
 
+## 8.91.8
+
+### Patch Changes
+
+- [#3725](https://github.com/Thinkei/hero-design/pull/3725) [`a3106d46950f6e5008ff8a75608a738d64e1f028`](https://github.com/Thinkei/hero-design/commit/a3106d46950f6e5008ff8a75608a738d64e1f028) Thanks [@quang-dx](https://github.com/quang-dx)! - [Icon] Add new outlined icons: desktop-computer-outlined, mobile-phone-1-outlined, tablet-outlined
+
+- [#3722](https://github.com/Thinkei/hero-design/pull/3722) [`655027fd13f8d2008db326a81aafc946cc558a1d`](https://github.com/Thinkei/hero-design/commit/655027fd13f8d2008db326a81aafc946cc558a1d) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [FAB.ActionGroup] Update styling:
+
+  - Resolve unexpected children margin change when passing margin
+  - Update backdrop to cover full screen
+
+## 8.91.7
+
+### Patch Changes
+
+- [#3720](https://github.com/Thinkei/hero-design/pull/3720) [`c6acaedafaa8d246f2882a72234db93b3fff93d3`](https://github.com/Thinkei/hero-design/commit/c6acaedafaa8d246f2882a72234db93b3fff93d3) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Mobile] Update shadow naming
+
 ## 8.91.6
 
 ### Patch Changes

package/es/index.js

@@ -2316,16 +2316,6 @@ var getRadii = function getRadii(baseRadius) {
 
 var swagLightShadowPalette = {
   "default": {
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowColor: swagSystemPalette.primaryOutline,
-    shadowOpacity: 0.12,
-    shadowRadius: 4,
-    elevation: 3
-  },
-  cardDrawer: {
     shadowOffset: {
       width: 0,
       height: 2
@@ -2335,7 +2325,7 @@ var swagLightShadowPalette = {
     shadowRadius: 2,
     elevation: 6
   },
-  tabBar: {
+  medium: {
     shadowOffset: {
       width: 0,
       height: -4
@@ -2344,6 +2334,16 @@ var swagLightShadowPalette = {
     shadowOpacity: 0.04,
     shadowRadius: 6,
     elevation: 10
+  },
+  deep: {
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.28,
+    shadowRadius: 8,
+    elevation: 10
   }
 };
 
@@ -2358,40 +2358,30 @@ var swagLightJobsShadowPalette = {
     shadowRadius: 4,
     elevation: 3
   },
-  cardDrawer: {
+  medium: {
     shadowOffset: {
       width: 0,
-      height: 2
+      height: -4
     },
     shadowColor: '#001f23',
-    shadowOpacity: 0.12,
-    shadowRadius: 2,
-    elevation: 6
+    shadowOpacity: 0.04,
+    shadowRadius: 6,
+    elevation: 10
   },
-  tabBar: {
+  deep: {
     shadowOffset: {
       width: 0,
-      height: -4
+      height: 4
     },
     shadowColor: '#001f23',
-    shadowOpacity: 0.04,
-    shadowRadius: 6,
+    shadowOpacity: 0.28,
+    shadowRadius: 8,
     elevation: 10
   }
 };
 
 var ehWorkDarkShadowPalette = {
   "default": {
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowColor: ehWorkDarkSystemPalette.primaryOutline,
-    shadowOpacity: 0.12,
-    shadowRadius: 4,
-    elevation: 3
-  },
-  cardDrawer: {
     shadowOffset: {
       width: 0,
       height: 2
@@ -2401,7 +2391,7 @@ var ehWorkDarkShadowPalette = {
     shadowRadius: 2,
     elevation: 6
   },
-  tabBar: {
+  medium: {
     shadowOffset: {
       width: 0,
       height: -4
@@ -2410,6 +2400,16 @@ var ehWorkDarkShadowPalette = {
     shadowOpacity: 0.24,
     shadowRadius: 6,
     elevation: 10
+  },
+  deep: {
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowColor: '#000000',
+    shadowOpacity: 0.64,
+    shadowRadius: 8,
+    elevation: 10
   }
 };
 
@@ -2499,7 +2499,7 @@ var getAlertTheme = function getAlertTheme(theme) {
     base: theme.borderWidths.base
   };
   var shadows = {
-    wrapper: theme.shadows.cardDrawer
+    wrapper: theme.shadows["default"]
   };
   return {
     colors: colors,
@@ -2670,7 +2670,7 @@ var getBottomNavigationTheme = function getBottomNavigationTheme(theme) {
     height: theme.sizes['6xlarge']
   };
   var shadows = {
-    wrapper: theme.shadows.tabBar
+    wrapper: theme.shadows.medium
   };
   var space = {
     titleMarginTop: theme.space.xsmall
@@ -2985,7 +2985,7 @@ var getChipTheme = function getChipTheme(theme) {
     outlinedDefaultBorder: theme.borderWidths.base
   };
   var shadows = {
-    filledWrapper: theme.shadows.cardDrawer
+    filledWrapper: theme.shadows["default"]
   };
   var fontSizes = {
     icon: theme.fontSizes.small
@@ -3184,7 +3184,7 @@ var getFABTheme = function getFABTheme(theme) {
     icon: theme.lineHeights.large
   };
   var shadows = {
-    "default": theme.shadows.cardDrawer
+    "default": theme.shadows["default"]
   };
   var space = {
     actionItemPadding: theme.space.smallMedium,
@@ -3274,7 +3274,7 @@ var getListTheme = function getListTheme(theme) {
     leadingStatus: theme.radii.rounded
   };
   var shadows = {
-    card: theme.shadows.cardDrawer
+    card: theme.shadows["default"]
   };
   var widths = {
     leadingStatus: 8
@@ -3961,7 +3961,7 @@ var getToastTheme = function getToastTheme(theme) {
     base: theme.borderWidths.base
   };
   var shadows = {
-    wrapper: theme.shadows.cardDrawer
+    wrapper: theme.shadows["default"]
   };
   return {
     colors: colors,
@@ -4215,7 +4215,7 @@ var getSearchTheme = function getSearchTheme(theme) {
     shadow: theme.colors.primaryOutline
   };
   var shadows = {
-    container: theme.shadows.cardDrawer
+    container: theme.shadows["default"]
   };
   var space = {
     containerHorizontalPadding: theme.space.small,
@@ -4295,11 +4295,11 @@ var getMapPinTheme = function getMapPinTheme(theme) {
     iconRight: -theme.space.small
   };
   var shadows = {
-    offset: theme.shadows["default"].shadowOffset,
-    opacity: theme.shadows["default"].shadowOpacity,
-    radius: theme.shadows["default"].shadowRadius,
-    elevation: theme.shadows["default"].elevation,
-    color: theme.shadows["default"].shadowColor
+    offset: theme.shadows.deep.shadowOffset,
+    opacity: theme.shadows.deep.shadowOpacity,
+    radius: theme.shadows.deep.shadowRadius,
+    elevation: theme.shadows.deep.elevation,
+    color: theme.shadows.deep.shadowColor
   };
   return {
     sizes: sizes,
@@ -4320,7 +4320,7 @@ var getFloatingIslandTheme = function getFloatingIslandTheme(theme) {
     wrapper: theme.radii.rounded
   };
   var shadows = {
-    wrapper: theme.shadows.cardDrawer
+    wrapper: theme.shadows["default"]
   };
   var space = {
     wrapperPadding: theme.space.small,
@@ -9776,7 +9776,7 @@ var Divider = function Divider(_ref) {
   }));
 };
 
-var AnimatedPressable$2 = Animated.createAnimatedComponent(Pressable);
+var AnimatedPressable$1 = Animated.createAnimatedComponent(Pressable);
 var AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);
 var StyledWrapper$a = index$a(View)(_objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
   flexDirection: 'column-reverse'
@@ -9813,7 +9813,7 @@ var StyledBottomSheet = index$a(AnimatedSafeAreaView)(function (_ref3) {
     maxHeight: '94%'
   };
 });
-var StyledBackdrop$2 = index$a(AnimatedPressable$2)(function (_ref4) {
+var StyledBackdrop$2 = index$a(AnimatedPressable$1)(function (_ref4) {
   var theme = _ref4.theme;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.bottomSheet.colors.backdrop,
@@ -15336,7 +15336,7 @@ var DatePicker = function DatePicker(_ref) {
   }));
 };
 
-var AnimatedPressable$1 = Animated.createAnimatedComponent(Pressable);
+var AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 var StyledContainer$5 = index$a(View)(function (_ref) {
   var theme = _ref.theme,
     enableShadow = _ref.enableShadow;
@@ -15364,7 +15364,7 @@ var StyledDragableContainer = index$a(View)(function (_ref2) {
     flexDirection: 'column-reverse'
   });
 });
-var StyledBackdrop$1 = index$a(AnimatedPressable$1)(function (_ref3) {
+var StyledBackdrop$1 = index$a(AnimatedPressable)(function (_ref3) {
   var theme = _ref3.theme;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.drawer.colors.backdrop
@@ -16554,8 +16554,17 @@ var StyledFAB$1 = index$a(FAB$1)(function (_ref) {
     alignSelf: 'flex-end'
   };
 });
-var AnimatedPressable = Animated.createAnimatedComponent(Pressable);
-var StyledBackdrop = index$a(AnimatedPressable)(function (_ref2) {
+var StyledBackdropPressable = index$a(Pressable)(function () {
+  return {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    backgroundColor: 'transparent'
+  };
+});
+var StyledBackdrop = index$a(Box)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     position: 'absolute',
@@ -16641,19 +16650,19 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React__default.createElement(StyledContainerInModal, {
     testID: testID,
     style: [style]
-  }, /*#__PURE__*/React__default.createElement(StyledBackdrop, {
+  }, /*#__PURE__*/React__default.createElement(StyledBackdropPressable, {
     testID: "back-drop",
     onPress: onBackdropPress
-  }), /*#__PURE__*/React__default.createElement(StyledActionGroupContainer, {
+  }, active && /*#__PURE__*/React__default.createElement(Portal$1, null, /*#__PURE__*/React__default.createElement(StyledBackdrop, null))), /*#__PURE__*/React__default.createElement(StyledActionGroupContainer, {
     testID: "action-group",
     pointerEvents: "box-none",
     style: {
       opacity: actionGroupOpacity
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
-    style: [style, {
+    style: {
       paddingBottom: 0
-    }]
+    }
   }, items === null || items === void 0 ? void 0 : items.map(function (itemProp, index) {
     return /*#__PURE__*/React__default.createElement(ActionItem, _extends$1({
       key: itemProp.key || "".concat(itemProp.icon, "_").concat(itemProp.title)

package/lib/index.js

@@ -2344,16 +2344,6 @@ var getRadii = function getRadii(baseRadius) {
 
 var swagLightShadowPalette = {
   "default": {
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowColor: swagSystemPalette.primaryOutline,
-    shadowOpacity: 0.12,
-    shadowRadius: 4,
-    elevation: 3
-  },
-  cardDrawer: {
     shadowOffset: {
       width: 0,
       height: 2
@@ -2363,7 +2353,7 @@ var swagLightShadowPalette = {
     shadowRadius: 2,
     elevation: 6
   },
-  tabBar: {
+  medium: {
     shadowOffset: {
       width: 0,
       height: -4
@@ -2372,6 +2362,16 @@ var swagLightShadowPalette = {
     shadowOpacity: 0.04,
     shadowRadius: 6,
     elevation: 10
+  },
+  deep: {
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowColor: '#001f23',
+    shadowOpacity: 0.28,
+    shadowRadius: 8,
+    elevation: 10
   }
 };
 
@@ -2386,40 +2386,30 @@ var swagLightJobsShadowPalette = {
     shadowRadius: 4,
     elevation: 3
   },
-  cardDrawer: {
+  medium: {
     shadowOffset: {
       width: 0,
-      height: 2
+      height: -4
     },
     shadowColor: '#001f23',
-    shadowOpacity: 0.12,
-    shadowRadius: 2,
-    elevation: 6
+    shadowOpacity: 0.04,
+    shadowRadius: 6,
+    elevation: 10
   },
-  tabBar: {
+  deep: {
     shadowOffset: {
       width: 0,
-      height: -4
+      height: 4
     },
     shadowColor: '#001f23',
-    shadowOpacity: 0.04,
-    shadowRadius: 6,
+    shadowOpacity: 0.28,
+    shadowRadius: 8,
     elevation: 10
   }
 };
 
 var ehWorkDarkShadowPalette = {
   "default": {
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowColor: ehWorkDarkSystemPalette.primaryOutline,
-    shadowOpacity: 0.12,
-    shadowRadius: 4,
-    elevation: 3
-  },
-  cardDrawer: {
     shadowOffset: {
       width: 0,
       height: 2
@@ -2429,7 +2419,7 @@ var ehWorkDarkShadowPalette = {
     shadowRadius: 2,
     elevation: 6
   },
-  tabBar: {
+  medium: {
     shadowOffset: {
       width: 0,
       height: -4
@@ -2438,6 +2428,16 @@ var ehWorkDarkShadowPalette = {
     shadowOpacity: 0.24,
     shadowRadius: 6,
     elevation: 10
+  },
+  deep: {
+    shadowOffset: {
+      width: 0,
+      height: 4
+    },
+    shadowColor: '#000000',
+    shadowOpacity: 0.64,
+    shadowRadius: 8,
+    elevation: 10
   }
 };
 
@@ -2527,7 +2527,7 @@ var getAlertTheme = function getAlertTheme(theme) {
     base: theme.borderWidths.base
   };
   var shadows = {
-    wrapper: theme.shadows.cardDrawer
+    wrapper: theme.shadows["default"]
   };
   return {
     colors: colors,
@@ -2698,7 +2698,7 @@ var getBottomNavigationTheme = function getBottomNavigationTheme(theme) {
     height: theme.sizes['6xlarge']
   };
   var shadows = {
-    wrapper: theme.shadows.tabBar
+    wrapper: theme.shadows.medium
   };
   var space = {
     titleMarginTop: theme.space.xsmall
@@ -3013,7 +3013,7 @@ var getChipTheme = function getChipTheme(theme) {
     outlinedDefaultBorder: theme.borderWidths.base
   };
   var shadows = {
-    filledWrapper: theme.shadows.cardDrawer
+    filledWrapper: theme.shadows["default"]
   };
   var fontSizes = {
     icon: theme.fontSizes.small
@@ -3212,7 +3212,7 @@ var getFABTheme = function getFABTheme(theme) {
     icon: theme.lineHeights.large
   };
   var shadows = {
-    "default": theme.shadows.cardDrawer
+    "default": theme.shadows["default"]
   };
   var space = {
     actionItemPadding: theme.space.smallMedium,
@@ -3302,7 +3302,7 @@ var getListTheme = function getListTheme(theme) {
     leadingStatus: theme.radii.rounded
   };
   var shadows = {
-    card: theme.shadows.cardDrawer
+    card: theme.shadows["default"]
   };
   var widths = {
     leadingStatus: 8
@@ -3989,7 +3989,7 @@ var getToastTheme = function getToastTheme(theme) {
     base: theme.borderWidths.base
   };
   var shadows = {
-    wrapper: theme.shadows.cardDrawer
+    wrapper: theme.shadows["default"]
   };
   return {
     colors: colors,
@@ -4243,7 +4243,7 @@ var getSearchTheme = function getSearchTheme(theme) {
     shadow: theme.colors.primaryOutline
   };
   var shadows = {
-    container: theme.shadows.cardDrawer
+    container: theme.shadows["default"]
   };
   var space = {
     containerHorizontalPadding: theme.space.small,
@@ -4323,11 +4323,11 @@ var getMapPinTheme = function getMapPinTheme(theme) {
     iconRight: -theme.space.small
   };
   var shadows = {
-    offset: theme.shadows["default"].shadowOffset,
-    opacity: theme.shadows["default"].shadowOpacity,
-    radius: theme.shadows["default"].shadowRadius,
-    elevation: theme.shadows["default"].elevation,
-    color: theme.shadows["default"].shadowColor
+    offset: theme.shadows.deep.shadowOffset,
+    opacity: theme.shadows.deep.shadowOpacity,
+    radius: theme.shadows.deep.shadowRadius,
+    elevation: theme.shadows.deep.elevation,
+    color: theme.shadows.deep.shadowColor
   };
   return {
     sizes: sizes,
@@ -4348,7 +4348,7 @@ var getFloatingIslandTheme = function getFloatingIslandTheme(theme) {
     wrapper: theme.radii.rounded
   };
   var shadows = {
-    wrapper: theme.shadows.cardDrawer
+    wrapper: theme.shadows["default"]
   };
   var space = {
     wrapperPadding: theme.space.small,
@@ -9804,7 +9804,7 @@ var Divider = function Divider(_ref) {
   }));
 };
 
-var AnimatedPressable$2 = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
+var AnimatedPressable$1 = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
 var AnimatedSafeAreaView = reactNative.Animated.createAnimatedComponent(reactNative.SafeAreaView);
 var StyledWrapper$a = index$a(reactNative.View)(_objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
   flexDirection: 'column-reverse'
@@ -9841,7 +9841,7 @@ var StyledBottomSheet = index$a(AnimatedSafeAreaView)(function (_ref3) {
     maxHeight: '94%'
   };
 });
-var StyledBackdrop$2 = index$a(AnimatedPressable$2)(function (_ref4) {
+var StyledBackdrop$2 = index$a(AnimatedPressable$1)(function (_ref4) {
   var theme = _ref4.theme;
   return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.bottomSheet.colors.backdrop,
@@ -15364,7 +15364,7 @@ var DatePicker = function DatePicker(_ref) {
   }));
 };
 
-var AnimatedPressable$1 = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
+var AnimatedPressable = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
 var StyledContainer$5 = index$a(reactNative.View)(function (_ref) {
   var theme = _ref.theme,
     enableShadow = _ref.enableShadow;
@@ -15392,7 +15392,7 @@ var StyledDragableContainer = index$a(reactNative.View)(function (_ref2) {
     flexDirection: 'column-reverse'
   });
 });
-var StyledBackdrop$1 = index$a(AnimatedPressable$1)(function (_ref3) {
+var StyledBackdrop$1 = index$a(AnimatedPressable)(function (_ref3) {
   var theme = _ref3.theme;
   return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.drawer.colors.backdrop
@@ -16582,8 +16582,17 @@ var StyledFAB$1 = index$a(FAB$1)(function (_ref) {
     alignSelf: 'flex-end'
   };
 });
-var AnimatedPressable = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
-var StyledBackdrop = index$a(AnimatedPressable)(function (_ref2) {
+var StyledBackdropPressable = index$a(reactNative.Pressable)(function () {
+  return {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    backgroundColor: 'transparent'
+  };
+});
+var StyledBackdrop = index$a(Box)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     position: 'absolute',
@@ -16669,19 +16678,19 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React__namespace.default.createElement(StyledContainerInModal, {
     testID: testID,
     style: [style]
-  }, /*#__PURE__*/React__namespace.default.createElement(StyledBackdrop, {
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledBackdropPressable, {
     testID: "back-drop",
     onPress: onBackdropPress
-  }), /*#__PURE__*/React__namespace.default.createElement(StyledActionGroupContainer, {
+  }, active && /*#__PURE__*/React__namespace.default.createElement(Portal$1, null, /*#__PURE__*/React__namespace.default.createElement(StyledBackdrop, null))), /*#__PURE__*/React__namespace.default.createElement(StyledActionGroupContainer, {
     testID: "action-group",
     pointerEvents: "box-none",
     style: {
       opacity: actionGroupOpacity
     }
   }, /*#__PURE__*/React__namespace.default.createElement(Box, {
-    style: [style, {
+    style: {
       paddingBottom: 0
-    }]
+    }
   }, items === null || items === void 0 ? void 0 : items.map(function (itemProp, index) {
     return /*#__PURE__*/React__namespace.default.createElement(ActionItem, _extends$1({
       key: itemProp.key || "".concat(itemProp.icon, "_").concat(itemProp.title)

package/package.json

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

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

@@ -3,6 +3,7 @@ import styled from '@emotion/native';
 import type { ComponentProps } from 'react';
 import type { ViewProps } from 'react-native';
 import FAB from '../FAB';
+import Box from '../../Box';
 
 const StyledContainer = styled(View)<ViewProps>({
   position: 'absolute',
@@ -38,8 +39,16 @@ const StyledFAB = styled(FAB)(({ theme }) => ({
   alignSelf: 'flex-end',
 }));
 
-const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
-const StyledBackdrop = styled(AnimatedPressable)(({ theme }) => ({
+const StyledBackdropPressable = styled(Pressable)(() => ({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  backgroundColor: 'transparent',
+}));
+
+const StyledBackdrop = styled(Box)(({ theme }) => ({
   position: 'absolute',
   left: 0,
   right: 0,
@@ -52,6 +61,7 @@ const StyledBackdrop = styled(AnimatedPressable)(({ theme }) => ({
 export {
   StyledActionGroupContainer,
   StyledBackdrop,
+  StyledBackdropPressable,
   StyledContainer,
   StyledContainerInModal,
   StyledFAB,