@hero-design/rn 8.52.2-rc2.0 → 8.54.0

package/src/components/BottomSheet/__tests__/__snapshots__/index.spec.tsx.snap

@@ -8,8 +8,15 @@ exports[`BottomSheet renders correctly with BottomSheet.ScrollView 1`] = `
     }
   }
 >
+  <Modal
+    hardwareAccelerated={false}
+    onRequestClose={[MockFunction]}
+    transparent={true}
+    visible={false}
+  />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -38,8 +45,15 @@ exports[`BottomSheet renders correctly with close state 1`] = `
     }
   }
 >
+  <Modal
+    hardwareAccelerated={false}
+    onRequestClose={[MockFunction]}
+    transparent={true}
+    visible={false}
+  />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -68,37 +82,11 @@ exports[`BottomSheet renders correctly with open state 1`] = `
     }
   }
 >
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "transparent",
-        "bottom": 0,
-        "left": 0,
-        "opacity": 0.4,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  />
-  <View
-    collapsable={false}
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "opacity": 1,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-        "transform": [
-          {
-            "translateY": 0,
-          },
-        ],
-      }
-    }
+  <Modal
+    hardwareAccelerated={false}
+    onRequestClose={[MockFunction]}
+    transparent={true}
+    visible={true}
   >
     <View
       pointerEvents="box-none"
@@ -394,9 +382,10 @@ exports[`BottomSheet renders correctly with open state 1`] = `
         </RCTSafeAreaView>
       </View>
     </View>
-  </View>
+  </Modal>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

package/src/components/BottomSheet/index.tsx

@@ -6,6 +6,7 @@ import {
   Dimensions,
   Easing,
   KeyboardAvoidingViewProps,
+  Modal,
   Platform,
 } from 'react-native';
 import BottomSheetContext from './BottomSheetContext';
@@ -18,7 +19,6 @@ import {
   StyledWrapper,
 } from './StyledBottomSheet';
 import ScrollView from './ScrollView';
-import Modal from '../Modal';
 
 interface BottomSheetProps {
   /**

package/src/components/Box/__tests__/__snapshots__/index.spec.tsx.snap

@@ -41,6 +41,7 @@ exports[`Box allows flex props 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -96,6 +97,7 @@ exports[`Box map prop to valid property and correct color from theme 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -142,6 +144,7 @@ exports[`Box map prop to valid property and correct color from theme 2`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -197,6 +200,7 @@ exports[`Box map prop to valid property and correct color from theme 3`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -243,6 +247,7 @@ exports[`Box map prop to valid property and correct color from theme 4`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -300,6 +305,7 @@ exports[`Box map prop to valid property and correct radius from theme 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -357,6 +363,7 @@ exports[`Box map prop to valid property and correct radius from theme 2`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -414,6 +421,7 @@ exports[`Box map prop to valid property and correct radius from theme 3`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -471,6 +479,7 @@ exports[`Box map prop to valid property and correct radius from theme 4`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -528,6 +537,7 @@ exports[`Box map prop to valid property and correct radius from theme 5`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -603,6 +613,7 @@ exports[`Box map prop to valid property and correct space from theme 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -678,6 +689,7 @@ exports[`Box map prop to valid property and correct space from theme 2`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -753,6 +765,7 @@ exports[`Box map prop to valid property and correct space from theme 3`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -828,6 +841,7 @@ exports[`Box map prop to valid property and correct space from theme 4`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -877,6 +891,7 @@ exports[`Box map prop to valid property and correctborderWidth from theme 1`] =
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -926,6 +941,7 @@ exports[`Box map prop to valid property and correctborderWidth from theme 2`] =
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -967,6 +983,7 @@ exports[`Box map prop with shortcut name to valid property and correct color fro
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1006,6 +1023,7 @@ exports[`Box map prop with shortcut name to valid property and correct color fro
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1047,6 +1065,7 @@ exports[`Box map prop with shortcut name to valid property and correct color fro
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1086,6 +1105,7 @@ exports[`Box map prop with shortcut name to valid property and correct color fro
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1129,6 +1149,7 @@ exports[`Box renders content correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/StyledLoadingIndicator.spec.tsx.snap

@@ -25,6 +25,7 @@ exports[`StyledLoadingIndicator has basic-transparent style 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -70,6 +71,7 @@ exports[`StyledLoadingIndicator has filled-danger style 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -115,6 +117,7 @@ exports[`StyledLoadingIndicator has filled-primary style 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -160,6 +163,7 @@ exports[`StyledLoadingIndicator has filled-secondary style 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -205,6 +209,7 @@ exports[`StyledLoadingIndicator has outlined-danger style 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -250,6 +255,7 @@ exports[`StyledLoadingIndicator has outlined-primary style 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -295,6 +301,7 @@ exports[`StyledLoadingIndicator has outlined-secondary style 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -340,6 +347,7 @@ exports[`StyledLoadingIndicator has text-danger style 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -385,6 +393,7 @@ exports[`StyledLoadingIndicator has text-primary style 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -430,6 +439,7 @@ exports[`StyledLoadingIndicator has text-secondary style 1`] = `
   />
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/index.spec.tsx.snap

@@ -114,6 +114,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is basic-transpare
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -248,6 +249,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is filled-danger 1
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -382,6 +384,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is filled-primary
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -516,6 +519,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is filled-secondar
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -650,6 +654,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-danger
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -784,6 +789,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-primar
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -918,6 +924,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-second
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1052,6 +1059,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-danger 1`]
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1186,6 +1194,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-primary 1`
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1320,6 +1329,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-secondary
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

package/src/components/Button/UtilityButton/__tests__/__snapshots__/index.spec.tsx.snap

@@ -105,6 +105,7 @@ exports[`UtilityButton snapshot has intent primary style 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -230,6 +231,7 @@ exports[`UtilityButton snapshot has intent text style 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

package/src/components/Button/__tests__/__snapshots__/Button.spec.tsx.snap

@@ -81,6 +81,7 @@ exports[`Button renders correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -256,6 +257,7 @@ exports[`Button renders correctly 2`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -357,6 +359,7 @@ exports[`Button renders correctly 3`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -460,6 +463,7 @@ exports[`Button renders correctly 4`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -637,6 +641,7 @@ exports[`Button renders correctly 5`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -740,6 +745,7 @@ exports[`Button renders correctly 6`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -842,6 +848,7 @@ exports[`Button renders correctly 7`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1017,6 +1024,7 @@ exports[`Button renders correctly 8`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1119,6 +1127,7 @@ exports[`Button renders correctly 9`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1221,6 +1230,7 @@ exports[`Button renders correctly 10`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1396,6 +1406,7 @@ exports[`Button renders correctly 11`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1498,6 +1509,7 @@ exports[`Button renders correctly 12`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1600,6 +1612,7 @@ exports[`Button renders correctly 13`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1775,6 +1788,7 @@ exports[`Button renders correctly 14`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -1877,6 +1891,7 @@ exports[`Button renders correctly 15`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -2053,6 +2068,7 @@ exports[`Button renders loading icon 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {

package/src/components/Button/__tests__/__snapshots__/IconButton.spec.tsx.snap

@@ -68,6 +68,7 @@ exports[`IconButton renders correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {