@hero-design/rn 8.101.1 → 8.101.2-alpha.1

package/es/index.js

@@ -3,7 +3,7 @@ import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, UIMan
 import * as React from 'react';
 import React__default, { useMemo, useEffect, useCallback, useRef, useLayoutEffect, useState, createContext, forwardRef, useContext, memo, useReducer, useImperativeHandle, isValidElement } from 'react';
 import { createIconSet } from 'react-native-vector-icons';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useSafeAreaInsets, SafeAreaView as SafeAreaView$1 } from 'react-native-safe-area-context';
 import { MonthYearPickerViewIOS, MonthYearPickerDialogueAndroid } from '@hero-design/react-native-month-year-picker';
 import Svg, { G, ForeignObject, Line as Line$1, Path as Path$1, Rect, Mask, Circle as Circle$1, Defs, ClipPath } from 'react-native-svg';
 import DateTimePicker from '@react-native-community/datetimepicker';
@@ -2684,15 +2684,15 @@ var getBadgeTheme = function getBadgeTheme(theme) {
       medium: theme.fontSizes.small,
       small: 8
     },
-    count: 6
+    count: 10
   };
   var lineHeights = {
     medium: theme.lineHeights.small,
     small: 10,
     count: Platform.select({
-      android: 11,
+      android: 15,
       // vertical alignment
-      "default": 12
+      "default": 16
     })
   };
   var radii = {
@@ -2710,8 +2710,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     statusHeight: theme.sizes.small,
     statusWidth: theme.sizes.small,
     count: {
-      width: theme.sizes.smallMedium,
-      height: theme.sizes.smallMedium
+      width: theme.sizes.medium,
+      height: theme.sizes.medium
     }
   };
   var borderWidths = {
@@ -2724,8 +2724,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     small: {
       horizontalPadding: theme.space.xsmall
     },
-    statusPositionTop: -theme.space.xxsmall,
-    statusPositionRight: -theme.space.xxsmall,
+    statusPositionTop: -theme.space.xsmall,
+    statusPositionRight: -theme.space.xsmall,
     countPaddingHorizontal: theme.space.xxsmall
   };
   return {
@@ -2786,7 +2786,8 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
     footerHorizontalPadding: theme.space.smallMedium,
     floatingContentMargin: theme.space.medium,
     floatingInnerPadding: theme.space.small,
-    floatingHeaderIconPadding: theme.space.small
+    floatingHeaderIconPadding: theme.space.small,
+    contentPaddingBottom: theme.space.large
   };
   var radii = {
     "default": theme.radii.xlarge,
@@ -8572,7 +8573,7 @@ var StyledBody$1 = index$b(Typography.Body)(function (_ref5) {
     color: theme.__hd__.alert.colors.texts[themeIntent]
   };
 });
-var ContentContainer$1 = index$b(View)(function (_ref6) {
+var ContentContainer$2 = index$b(View)(function (_ref6) {
   var theme = _ref6.theme,
     showDivider = _ref6.showDivider;
   return {
@@ -8634,7 +8635,7 @@ var Alert = function Alert(_ref2) {
     themeIntent: intent,
     style: style,
     testID: testID
-  }, /*#__PURE__*/React__default.createElement(ContentContainer$1, {
+  }, /*#__PURE__*/React__default.createElement(ContentContainer$2, {
     showDivider: !!onClose
   }, icon !== null ? /*#__PURE__*/React__default.createElement(AlertIcon, {
     icon: icon || getIntentIcon$1(intent),
@@ -10009,38 +10010,6 @@ var BottomNavigation = function BottomNavigation(_ref) {
 
 var BottomSheetContext = /*#__PURE__*/createContext({});
 
-var StyledDivider = index$b(View)(function (_ref) {
-  var themeMarginHorizontal = _ref.themeMarginHorizontal,
-    themeMarginVertical = _ref.themeMarginVertical,
-    theme = _ref.theme;
-  var horizontalMargin = themeMarginHorizontal !== undefined ? {
-    marginHorizontal: theme.__hd__.divider.space[themeMarginHorizontal]
-  } : {};
-  var verticalMargin = themeMarginVertical !== undefined ? {
-    marginVertical: theme.__hd__.divider.space[themeMarginVertical]
-  } : {};
-  return _objectSpread2(_objectSpread2({
-    maxWidth: '100%',
-    borderBottomColor: theme.__hd__.divider.colors["default"],
-    borderBottomWidth: theme.__hd__.divider.borderWidths["default"]
-  }, horizontalMargin), verticalMargin);
-});
-
-var _excluded$z = ["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$z);
-  return /*#__PURE__*/React__default.createElement(StyledDivider, _extends$1({}, nativeProps, {
-    themeMarginHorizontal: marginHorizontal,
-    themeMarginVertical: marginVertical,
-    style: style,
-    testID: testID
-  }));
-};
-
 var AnimatedPressable$1 = Animated.createAnimatedComponent(Pressable);
 var AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);
 var StyledWrapper$a = index$b(View)(_objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
@@ -10068,14 +10037,15 @@ var StyledFloatingBottomSheet = index$b(Animated.View)(function (_ref2) {
     padding: theme.__hd__.bottomSheet.space.floatingInnerPadding
   };
 });
-var StyledBottomSheet = index$b(AnimatedSafeAreaView)(function (_ref3) {
+var StyledBottomSheet = index$b(Animated.View)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     borderTopLeftRadius: theme.__hd__.bottomSheet.radii["default"],
     borderTopRightRadius: theme.__hd__.bottomSheet.radii["default"],
     backgroundColor: theme.__hd__.bottomSheet.colors.background,
     width: '100%',
-    maxHeight: '94%'
+    maxHeight: '100%',
+    paddingBottom: theme.__hd__.bottomSheet.space.contentPaddingBottom
   };
 });
 var StyledBackdrop$2 = index$b(AnimatedPressable$1)(function (_ref4) {
@@ -10126,6 +10096,54 @@ var StyledFloatingHeaderWrapper = index$b(TouchableOpacity)(function (_ref8) {
   };
 });
 
+var ContentContainer$1 = function ContentContainer(_ref) {
+  var children = _ref.children,
+    variant = _ref.variant,
+    style = _ref.style;
+  return variant === 'fixed' ? /*#__PURE__*/React__default.createElement(SafeAreaView$1, {
+    edges: ['left', 'right', 'top'],
+    style: {
+      maxHeight: '94%'
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledBottomSheet, {
+    style: style
+  }, children)) : /*#__PURE__*/React__default.createElement(StyledFloatingWrapper, null, /*#__PURE__*/React__default.createElement(StyledFloatingBottomSheet, {
+    style: style
+  }, children));
+};
+
+var StyledDivider = index$b(View)(function (_ref) {
+  var themeMarginHorizontal = _ref.themeMarginHorizontal,
+    themeMarginVertical = _ref.themeMarginVertical,
+    theme = _ref.theme;
+  var horizontalMargin = themeMarginHorizontal !== undefined ? {
+    marginHorizontal: theme.__hd__.divider.space[themeMarginHorizontal]
+  } : {};
+  var verticalMargin = themeMarginVertical !== undefined ? {
+    marginVertical: theme.__hd__.divider.space[themeMarginVertical]
+  } : {};
+  return _objectSpread2(_objectSpread2({
+    maxWidth: '100%',
+    borderBottomColor: theme.__hd__.divider.colors["default"],
+    borderBottomWidth: theme.__hd__.divider.borderWidths["default"]
+  }, horizontalMargin), verticalMargin);
+});
+
+var _excluded$z = ["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$z);
+  return /*#__PURE__*/React__default.createElement(StyledDivider, _extends$1({}, nativeProps, {
+    themeMarginHorizontal: marginHorizontal,
+    themeMarginVertical: marginVertical,
+    style: style,
+    testID: testID
+  }));
+};
+
 var Footer$1 = function Footer(_ref) {
   var children = _ref.children,
     showDivider = _ref.showDivider;
@@ -10952,8 +10970,6 @@ var BottomSheet = function BottomSheet(_ref) {
       setInternalShowDivider: setInternalShowDivider
     };
   }, [setInternalShowDivider]);
-  var BottomSheetWrapperComponent = variant === 'fixed' ? React__default.Fragment : StyledFloatingWrapper;
-  var BottomSheetComponent = variant === 'fixed' ? StyledBottomSheet : StyledFloatingBottomSheet;
   return /*#__PURE__*/React__default.createElement(Modal$1, {
     visible: visible,
     onRequestClose: onRequestClose,
@@ -10970,7 +10986,8 @@ var BottomSheet = function BottomSheet(_ref) {
       opacity: interpolateOpacity
     },
     onPress: onRequestClose
-  }), /*#__PURE__*/React__default.createElement(BottomSheetWrapperComponent, null, /*#__PURE__*/React__default.createElement(BottomSheetComponent, {
+  }), /*#__PURE__*/React__default.createElement(ContentContainer$1, {
+    variant: variant,
     style: [style, {
       transform: [{
         scaleY: height > 0 ? 1 : 0
@@ -10988,7 +11005,7 @@ var BottomSheet = function BottomSheet(_ref) {
     value: BottomSheetContextValue
   }, children), footer ? /*#__PURE__*/React__default.createElement(Footer$1, {
     showDivider: showDivider
-  }, footer) : null)))));
+  }, footer) : null))));
 };
 var BottomSheet$1 = Object.assign(BottomSheet, {
   ScrollView: BottomSheetScrollView

package/lib/index.js

@@ -2713,15 +2713,15 @@ var getBadgeTheme = function getBadgeTheme(theme) {
       medium: theme.fontSizes.small,
       small: 8
     },
-    count: 6
+    count: 10
   };
   var lineHeights = {
     medium: theme.lineHeights.small,
     small: 10,
     count: reactNative.Platform.select({
-      android: 11,
+      android: 15,
       // vertical alignment
-      "default": 12
+      "default": 16
     })
   };
   var radii = {
@@ -2739,8 +2739,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     statusHeight: theme.sizes.small,
     statusWidth: theme.sizes.small,
     count: {
-      width: theme.sizes.smallMedium,
-      height: theme.sizes.smallMedium
+      width: theme.sizes.medium,
+      height: theme.sizes.medium
     }
   };
   var borderWidths = {
@@ -2753,8 +2753,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     small: {
       horizontalPadding: theme.space.xsmall
     },
-    statusPositionTop: -theme.space.xxsmall,
-    statusPositionRight: -theme.space.xxsmall,
+    statusPositionTop: -theme.space.xsmall,
+    statusPositionRight: -theme.space.xsmall,
     countPaddingHorizontal: theme.space.xxsmall
   };
   return {
@@ -2815,7 +2815,8 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
     footerHorizontalPadding: theme.space.smallMedium,
     floatingContentMargin: theme.space.medium,
     floatingInnerPadding: theme.space.small,
-    floatingHeaderIconPadding: theme.space.small
+    floatingHeaderIconPadding: theme.space.small,
+    contentPaddingBottom: theme.space.large
   };
   var radii = {
     "default": theme.radii.xlarge,
@@ -8601,7 +8602,7 @@ var StyledBody$1 = index$b(Typography.Body)(function (_ref5) {
     color: theme.__hd__.alert.colors.texts[themeIntent]
   };
 });
-var ContentContainer$1 = index$b(reactNative.View)(function (_ref6) {
+var ContentContainer$2 = index$b(reactNative.View)(function (_ref6) {
   var theme = _ref6.theme,
     showDivider = _ref6.showDivider;
   return {
@@ -8663,7 +8664,7 @@ var Alert = function Alert(_ref2) {
     themeIntent: intent,
     style: style,
     testID: testID
-  }, /*#__PURE__*/React__namespace.default.createElement(ContentContainer$1, {
+  }, /*#__PURE__*/React__namespace.default.createElement(ContentContainer$2, {
     showDivider: !!onClose
   }, icon !== null ? /*#__PURE__*/React__namespace.default.createElement(AlertIcon, {
     icon: icon || getIntentIcon$1(intent),
@@ -10038,38 +10039,6 @@ var BottomNavigation = function BottomNavigation(_ref) {
 
 var BottomSheetContext = /*#__PURE__*/React.createContext({});
 
-var StyledDivider = index$b(reactNative.View)(function (_ref) {
-  var themeMarginHorizontal = _ref.themeMarginHorizontal,
-    themeMarginVertical = _ref.themeMarginVertical,
-    theme = _ref.theme;
-  var horizontalMargin = themeMarginHorizontal !== undefined ? {
-    marginHorizontal: theme.__hd__.divider.space[themeMarginHorizontal]
-  } : {};
-  var verticalMargin = themeMarginVertical !== undefined ? {
-    marginVertical: theme.__hd__.divider.space[themeMarginVertical]
-  } : {};
-  return _objectSpread2(_objectSpread2({
-    maxWidth: '100%',
-    borderBottomColor: theme.__hd__.divider.colors["default"],
-    borderBottomWidth: theme.__hd__.divider.borderWidths["default"]
-  }, horizontalMargin), verticalMargin);
-});
-
-var _excluded$z = ["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$z);
-  return /*#__PURE__*/React__namespace.default.createElement(StyledDivider, _extends$1({}, nativeProps, {
-    themeMarginHorizontal: marginHorizontal,
-    themeMarginVertical: marginVertical,
-    style: style,
-    testID: testID
-  }));
-};
-
 var AnimatedPressable$1 = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
 var AnimatedSafeAreaView = reactNative.Animated.createAnimatedComponent(reactNative.SafeAreaView);
 var StyledWrapper$a = index$b(reactNative.View)(_objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
@@ -10097,14 +10066,15 @@ var StyledFloatingBottomSheet = index$b(reactNative.Animated.View)(function (_re
     padding: theme.__hd__.bottomSheet.space.floatingInnerPadding
   };
 });
-var StyledBottomSheet = index$b(AnimatedSafeAreaView)(function (_ref3) {
+var StyledBottomSheet = index$b(reactNative.Animated.View)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     borderTopLeftRadius: theme.__hd__.bottomSheet.radii["default"],
     borderTopRightRadius: theme.__hd__.bottomSheet.radii["default"],
     backgroundColor: theme.__hd__.bottomSheet.colors.background,
     width: '100%',
-    maxHeight: '94%'
+    maxHeight: '100%',
+    paddingBottom: theme.__hd__.bottomSheet.space.contentPaddingBottom
   };
 });
 var StyledBackdrop$2 = index$b(AnimatedPressable$1)(function (_ref4) {
@@ -10155,6 +10125,54 @@ var StyledFloatingHeaderWrapper = index$b(reactNative.TouchableOpacity)(function
   };
 });
 
+var ContentContainer$1 = function ContentContainer(_ref) {
+  var children = _ref.children,
+    variant = _ref.variant,
+    style = _ref.style;
+  return variant === 'fixed' ? /*#__PURE__*/React__namespace.default.createElement(reactNativeSafeAreaContext.SafeAreaView, {
+    edges: ['left', 'right', 'top'],
+    style: {
+      maxHeight: '94%'
+    }
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledBottomSheet, {
+    style: style
+  }, children)) : /*#__PURE__*/React__namespace.default.createElement(StyledFloatingWrapper, null, /*#__PURE__*/React__namespace.default.createElement(StyledFloatingBottomSheet, {
+    style: style
+  }, children));
+};
+
+var StyledDivider = index$b(reactNative.View)(function (_ref) {
+  var themeMarginHorizontal = _ref.themeMarginHorizontal,
+    themeMarginVertical = _ref.themeMarginVertical,
+    theme = _ref.theme;
+  var horizontalMargin = themeMarginHorizontal !== undefined ? {
+    marginHorizontal: theme.__hd__.divider.space[themeMarginHorizontal]
+  } : {};
+  var verticalMargin = themeMarginVertical !== undefined ? {
+    marginVertical: theme.__hd__.divider.space[themeMarginVertical]
+  } : {};
+  return _objectSpread2(_objectSpread2({
+    maxWidth: '100%',
+    borderBottomColor: theme.__hd__.divider.colors["default"],
+    borderBottomWidth: theme.__hd__.divider.borderWidths["default"]
+  }, horizontalMargin), verticalMargin);
+});
+
+var _excluded$z = ["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$z);
+  return /*#__PURE__*/React__namespace.default.createElement(StyledDivider, _extends$1({}, nativeProps, {
+    themeMarginHorizontal: marginHorizontal,
+    themeMarginVertical: marginVertical,
+    style: style,
+    testID: testID
+  }));
+};
+
 var Footer$1 = function Footer(_ref) {
   var children = _ref.children,
     showDivider = _ref.showDivider;
@@ -10981,8 +10999,6 @@ var BottomSheet = function BottomSheet(_ref) {
       setInternalShowDivider: setInternalShowDivider
     };
   }, [setInternalShowDivider]);
-  var BottomSheetWrapperComponent = variant === 'fixed' ? React__namespace.default.Fragment : StyledFloatingWrapper;
-  var BottomSheetComponent = variant === 'fixed' ? StyledBottomSheet : StyledFloatingBottomSheet;
   return /*#__PURE__*/React__namespace.default.createElement(reactNative.Modal, {
     visible: visible,
     onRequestClose: onRequestClose,
@@ -10999,7 +11015,8 @@ var BottomSheet = function BottomSheet(_ref) {
       opacity: interpolateOpacity
     },
     onPress: onRequestClose
-  }), /*#__PURE__*/React__namespace.default.createElement(BottomSheetWrapperComponent, null, /*#__PURE__*/React__namespace.default.createElement(BottomSheetComponent, {
+  }), /*#__PURE__*/React__namespace.default.createElement(ContentContainer$1, {
+    variant: variant,
     style: [style, {
       transform: [{
         scaleY: height > 0 ? 1 : 0
@@ -11017,7 +11034,7 @@ var BottomSheet = function BottomSheet(_ref) {
     value: BottomSheetContextValue
   }, children), footer ? /*#__PURE__*/React__namespace.default.createElement(Footer$1, {
     showDivider: showDivider
-  }, footer) : null)))));
+  }, footer) : null))));
 };
 var BottomSheet$1 = Object.assign(BottomSheet, {
   ScrollView: BottomSheetScrollView

package/locales/en_AU.d.ts

@@ -0,0 +1,3 @@
+import { LocaleValues } from './types';
+declare const locale: LocaleValues;
+export default locale;

package/locales/en_CA.d.ts

@@ -0,0 +1,3 @@
+import { LocaleValues } from './types';
+declare const locale: LocaleValues;
+export default locale;

package/locales/index.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    'en-AU': import("./types").LocaleValues;
+    'en-CA': import("./types").LocaleValues;
+};
+export default _default;

package/locales/types.d.ts

@@ -0,0 +1,10 @@
+declare const LOCALES: readonly ["en-AU", "en-CA"];
+export type LocaleCode = typeof LOCALES[number];
+export type DateTimeFormats = {
+    fullDate: string;
+};
+export type LocaleValues = {
+    lang: LocaleCode;
+    dateTimeFormats: DateTimeFormats;
+};
+export {};

package/package.json

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

package/src/components/Badge/__tests__/__snapshots__/Count.spec.tsx.snap

@@ -34,15 +34,15 @@ exports[`BadgeCount displays 1 for content 1 1`] = `
             "borderRadius": 999,
             "color": "#ffffff",
             "display": "flex",
-            "height": 12,
+            "height": 16,
             "justifyContent": "center",
-            "minWidth": 12,
+            "minWidth": 16,
             "paddingHorizontal": 2,
             "position": "absolute",
-            "right": -2,
+            "right": -4,
             "textAlign": "center",
             "textAlignVertical": "center",
-            "top": -2,
+            "top": -4,
           },
           undefined,
         ]
@@ -63,9 +63,9 @@ exports[`BadgeCount displays 1 for content 1 1`] = `
             [
               {
                 "color": "#ffffff",
-                "fontSize": 6,
-                "height": 12,
-                "lineHeight": 12,
+                "fontSize": 8,
+                "height": 16,
+                "lineHeight": 18,
               },
               undefined,
             ],
@@ -137,15 +137,15 @@ exports[`BadgeCount displays 12 for content 12 1`] = `
             "borderRadius": 999,
             "color": "#ffffff",
             "display": "flex",
-            "height": 12,
+            "height": 16,
             "justifyContent": "center",
-            "minWidth": 12,
+            "minWidth": 16,
             "paddingHorizontal": 2,
             "position": "absolute",
-            "right": -2,
+            "right": -4,
             "textAlign": "center",
             "textAlignVertical": "center",
-            "top": -2,
+            "top": -4,
           },
           undefined,
         ]
@@ -166,9 +166,9 @@ exports[`BadgeCount displays 12 for content 12 1`] = `
             [
               {
                 "color": "#ffffff",
-                "fontSize": 6,
-                "height": 12,
-                "lineHeight": 12,
+                "fontSize": 8,
+                "height": 16,
+                "lineHeight": 18,
               },
               undefined,
             ],
@@ -240,15 +240,15 @@ exports[`BadgeCount displays 99+ for content 999 1`] = `
             "borderRadius": 999,
             "color": "#ffffff",
             "display": "flex",
-            "height": 12,
+            "height": 16,
             "justifyContent": "center",
-            "minWidth": 12,
+            "minWidth": 16,
             "paddingHorizontal": 2,
             "position": "absolute",
-            "right": -2,
+            "right": -4,
             "textAlign": "center",
             "textAlignVertical": "center",
-            "top": -2,
+            "top": -4,
           },
           undefined,
         ]
@@ -269,9 +269,9 @@ exports[`BadgeCount displays 99+ for content 999 1`] = `
             [
               {
                 "color": "#ffffff",
-                "fontSize": 6,
-                "height": 12,
-                "lineHeight": 12,
+                "fontSize": 8,
+                "height": 16,
+                "lineHeight": 18,
               },
               undefined,
             ],

package/src/components/Badge/__tests__/__snapshots__/Status.spec.tsx.snap

@@ -33,8 +33,8 @@ exports[`Status Badge renders correctly 1`] = `
           "height": 8,
           "opacity": 1,
           "position": "absolute",
-          "right": -2,
-          "top": -2,
+          "right": -4,
+          "top": -4,
           "transform": [
             {
               "scale": 1,
@@ -108,8 +108,8 @@ exports[`Status Badge renders correctly with intent 1`] = `
           "height": 8,
           "opacity": 1,
           "position": "absolute",
-          "right": -2,
-          "top": -2,
+          "right": -4,
+          "top": -4,
           "transform": [
             {
               "scale": 1,

package/src/components/BottomSheet/ContentContainer.tsx

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { StyleProp, ViewStyle } from 'react-native';
+import {
+  StyledBottomSheet,
+  StyledFloatingBottomSheet,
+  StyledFloatingWrapper,
+} from './StyledBottomSheet';
+
+type ContentContainerProps = {
+  children: ReactNode;
+  variant: 'fixed' | 'floating';
+  style?: StyleProp<ViewStyle>;
+};
+
+const ContentContainer = ({
+  children,
+  variant,
+  style,
+}: ContentContainerProps) =>
+  variant === 'fixed' ? (
+    <SafeAreaView edges={['left', 'right', 'top']} style={{ maxHeight: '94%' }}>
+      <StyledBottomSheet style={style}>{children}</StyledBottomSheet>
+    </SafeAreaView>
+  ) : (
+    <StyledFloatingWrapper>
+      <StyledFloatingBottomSheet style={style}>
+        {children}
+      </StyledFloatingBottomSheet>
+    </StyledFloatingWrapper>
+  );
+
+export default ContentContainer;

package/src/components/BottomSheet/StyledBottomSheet.tsx

@@ -39,14 +39,13 @@ const StyledFloatingBottomSheet = styled(Animated.View)(({ theme }) => ({
   padding: theme.__hd__.bottomSheet.space.floatingInnerPadding,
 }));
 
-const StyledBottomSheet = styled(AnimatedSafeAreaView)<
-  ComponentProps<typeof AnimatedSafeAreaView>
->(({ theme }) => ({
+const StyledBottomSheet = styled(Animated.View)(({ theme }) => ({
   borderTopLeftRadius: theme.__hd__.bottomSheet.radii.default,
   borderTopRightRadius: theme.__hd__.bottomSheet.radii.default,
   backgroundColor: theme.__hd__.bottomSheet.colors.background,
   width: '100%',
-  maxHeight: '94%',
+  maxHeight: '100%',
+  paddingBottom: theme.__hd__.bottomSheet.space.contentPaddingBottom,
 }));
 
 const StyledBackdrop = styled(AnimatedPressable)<