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

package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -262,11 +262,37 @@ exports[`rendering allows custom renderer 1`] = `
       </View>
     </View>
   </View>
-  <Modal
-    hardwareAccelerated={false}
-    onRequestClose={[Function]}
-    transparent={true}
-    visible={true}
+  <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,
+          },
+        ],
+      }
+    }
   >
     <View
       pointerEvents="box-none"
@@ -1423,10 +1449,9 @@ exports[`rendering allows custom renderer 1`] = `
         </RCTSafeAreaView>
       </View>
     </View>
-  </Modal>
+  </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -1710,15 +1735,8 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
       </View>
     </View>
   </View>
-  <Modal
-    hardwareAccelerated={false}
-    onRequestClose={[Function]}
-    transparent={true}
-    visible={false}
-  />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -2002,11 +2020,37 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
       </View>
     </View>
   </View>
-  <Modal
-    hardwareAccelerated={false}
-    onRequestClose={[Function]}
-    transparent={true}
-    visible={true}
+  <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,
+          },
+        ],
+      }
+    }
   >
     <View
       pointerEvents="box-none"
@@ -3313,10 +3357,9 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
         </RCTSafeAreaView>
       </View>
     </View>
-  </Modal>
+  </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -3613,15 +3656,8 @@ exports[`rendering renders correctly when input is loading 1`] = `
       </View>
     </View>
   </View>
-  <Modal
-    hardwareAccelerated={false}
-    onRequestClose={[Function]}
-    transparent={true}
-    visible={false}
-  />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -3905,11 +3941,37 @@ exports[`rendering renders correctly when receives sections 1`] = `
       </View>
     </View>
   </View>
-  <Modal
-    hardwareAccelerated={false}
-    onRequestClose={[Function]}
-    transparent={true}
-    visible={true}
+  <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,
+          },
+        ],
+      }
+    }
   >
     <View
       pointerEvents="box-none"
@@ -4796,10 +4858,9 @@ exports[`rendering renders correctly when receives sections 1`] = `
         </RCTSafeAreaView>
       </View>
     </View>
-  </Modal>
+  </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

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

@@ -78,7 +78,6 @@ exports[`Skeleton renders correctly by default 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -177,7 +176,6 @@ exports[`Skeleton renders correctly when intent is dark and variant is circular
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -276,7 +274,6 @@ exports[`Skeleton renders correctly when intent is dark and variant is rectangul
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -375,7 +372,6 @@ exports[`Skeleton renders correctly when intent is dark and variant is rounded 1
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -474,7 +470,6 @@ exports[`Skeleton renders correctly when intent is light and variant is circular
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -573,7 +568,6 @@ exports[`Skeleton renders correctly when intent is light and variant is rectangu
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -672,7 +666,6 @@ exports[`Skeleton renders correctly when intent is light and variant is rounded
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

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

@@ -20,7 +20,6 @@ exports[`Slider renders correctly by default 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -61,7 +60,6 @@ exports[`Slider renders correctly when disabled 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -105,7 +103,6 @@ exports[`Slider renders correctly with props 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

package/src/components/Spinner/__tests__/__snapshots__/AnimatedSpinner.spec.tsx.snap

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

package/src/components/Spinner/__tests__/__snapshots__/StyledSpinner.spec.tsx.snap

@@ -140,7 +140,6 @@ exports[`StyledSpinnerContainer renders correctly when intent is $themeIntent, a
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -301,7 +300,6 @@ exports[`StyledSpinnerContainer renders correctly when intent is $themeIntent, a
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -462,7 +460,6 @@ exports[`StyledSpinnerContainer renders correctly when intent is $themeIntent, a
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -623,7 +620,6 @@ exports[`StyledSpinnerContainer renders correctly when intent is $themeIntent, a
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -671,7 +667,6 @@ exports[`StyledSpinnerDot renders correctly when position is bottomLeft, size is
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -719,7 +714,6 @@ exports[`StyledSpinnerDot renders correctly when position is bottomLeft, size is
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -767,7 +761,6 @@ exports[`StyledSpinnerDot renders correctly when position is bottomLeft, size is
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -815,7 +808,6 @@ exports[`StyledSpinnerDot renders correctly when position is bottomLeft, size is
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -864,7 +856,6 @@ exports[`StyledSpinnerDot renders correctly when position is bottomRight, size i
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -913,7 +904,6 @@ exports[`StyledSpinnerDot renders correctly when position is bottomRight, size i
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -962,7 +952,6 @@ exports[`StyledSpinnerDot renders correctly when position is bottomRight, size i
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -1011,7 +1000,6 @@ exports[`StyledSpinnerDot renders correctly when position is bottomRight, size i
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -1059,7 +1047,6 @@ exports[`StyledSpinnerDot renders correctly when position is topLeft, size is me
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -1107,7 +1094,6 @@ exports[`StyledSpinnerDot renders correctly when position is topLeft, size is me
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -1155,7 +1141,6 @@ exports[`StyledSpinnerDot renders correctly when position is topLeft, size is sm
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -1203,7 +1188,6 @@ exports[`StyledSpinnerDot renders correctly when position is topLeft, size is sm
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -1252,7 +1236,6 @@ exports[`StyledSpinnerDot renders correctly when position is topRight, size is m
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -1301,7 +1284,6 @@ exports[`StyledSpinnerDot renders correctly when position is topRight, size is m
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -1350,7 +1332,6 @@ exports[`StyledSpinnerDot renders correctly when position is topRight, size is s
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -1399,7 +1380,6 @@ exports[`StyledSpinnerDot renders correctly when position is topRight, size is s
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -1443,7 +1423,6 @@ exports[`StyledSpinnerRow renders correctly when position is bottom, and size is
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -1487,7 +1466,6 @@ exports[`StyledSpinnerRow renders correctly when position is bottom, and size is
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -1531,7 +1509,6 @@ exports[`StyledSpinnerRow renders correctly when position is top, and size is me
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -1575,7 +1552,6 @@ exports[`StyledSpinnerRow renders correctly when position is top, and size is sm
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

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

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

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

@@ -166,7 +166,6 @@ exports[`Success renders full screen success page correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -312,7 +311,6 @@ exports[`Success renders succe screen with custom image element correctly 1`] =
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -466,7 +464,6 @@ exports[`Success renders success screen with image correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -581,7 +578,6 @@ exports[`Success renders title only correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

package/src/components/Swipeable/__tests__/__snapshots__/SwipeableAction.spec.tsx.snap

@@ -67,7 +67,6 @@ exports[`rendering renders correctly when intent is danger 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -155,7 +154,6 @@ exports[`rendering renders correctly when intent is primary 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -243,7 +241,6 @@ exports[`rendering renders correctly when intent is success 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

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

@@ -147,7 +147,6 @@ exports[`Swipeable renders correctly with variant=full-width 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

package/src/components/Switch/SelectorSwitch/__tests__/__snapshots__/Option.spec.tsx.snap

@@ -71,7 +71,6 @@ exports[`Option renders correctly when not selected 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -170,7 +169,6 @@ exports[`Option renders correctly when selected 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -215,7 +213,6 @@ exports[`OptionContent renders correctly there is no badge 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -290,7 +287,6 @@ exports[`OptionContent renders correctly when there is a badge 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

package/src/components/Switch/SelectorSwitch/__tests__/__snapshots__/index.spec.tsx.snap

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

package/src/components/Switch/__tests__/__snapshots__/StyledSwitch.spec.tsx.snap

@@ -21,7 +21,6 @@ exports[`StyledKnot renders correct style 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -69,7 +68,6 @@ exports[`StyledWrapper renders correct style with variant checked 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -117,7 +115,6 @@ exports[`StyledWrapper renders correct style with variant disabled-checked 1`] =
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -165,7 +162,6 @@ exports[`StyledWrapper renders correct style with variant disabled-unchecked 1`]
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -213,7 +209,6 @@ exports[`StyledWrapper renders correct style with variant unchecked 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

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

@@ -59,7 +59,6 @@ exports[`Switch renders correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -139,7 +138,6 @@ exports[`Switch trigger press function correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

package/src/components/Tabs/__tests__/SceneView.spec.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
-import { theme } from '../../../index';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import HeroDesignProvider from '../../HeroDesignProvider';
 import Typography from '../../Typography';
 import ScenceView from '../SceneView';
+import { theme } from '../../../index';
 
 describe('ScenceView', () => {
   describe('lazy', () => {

package/src/components/Tabs/__tests__/__snapshots__/SceneView.spec.tsx.snap

@@ -29,7 +29,6 @@ exports[`ScenceView lazy not renders child correctly when the scence is lazy and
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -100,7 +99,6 @@ exports[`ScenceView lazy not renders child correctly when the scence is lazy and
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -177,7 +175,6 @@ exports[`ScenceView lazy renders child correctly when the scence is focused and
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -248,7 +245,6 @@ exports[`ScenceView lazy renders child correctly when the scence is focused and
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabs.spec.tsx.snap

@@ -883,7 +883,6 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
   </RNCSafeAreaProvider>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -1787,7 +1786,6 @@ exports[`Tabs.Scroll renders correctly 1`] = `
   </RNCSafeAreaProvider>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -2691,7 +2689,6 @@ exports[`useIsFocused renders correctly 1`] = `
   </RNCSafeAreaProvider>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {