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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.52.0",
+  "version": "8.52.2-rc2.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,14 +21,14 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.42.5",
+    "@hero-design/colors": "8.42.6-rc2.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21",
     "nanoid": "^4.0.2"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.42.6",
+    "@hero-design/react-native-month-year-picker": "^8.42.7-rc2.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.4.3",
     "react": "18.2.0",
@@ -47,8 +47,8 @@
     "@babel/preset-typescript": "^7.20.0",
     "@babel/runtime": "^7.20.0",
     "@emotion/jest": "^11.11.0",
-    "@hero-design/eslint-plugin": "8.42.5",
-    "@hero-design/react-native-month-year-picker": "^8.42.6",
+    "@hero-design/eslint-plugin": "8.42.6-rc2.0",
+    "@hero-design/react-native-month-year-picker": "^8.42.7-rc2.0",
     "@react-native-community/datetimepicker": "3.5.2",
     "@react-native-community/slider": "4.4.3",
     "@rollup/plugin-babel": "^5.3.1",
@@ -64,12 +64,12 @@
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
     "core-js": "^3.33.0",
-    "eslint-config-hd": "8.42.4",
+    "eslint-config-hd": "8.42.5-rc2.0",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^29.2.1",
     "jest-environment-jsdom": "^29.2.1",
     "jest-junit": "^16.0.0",
-    "prettier-config-hd": "8.42.4",
+    "prettier-config-hd": "8.42.5-rc2.0",
     "react": "18.2.0",
     "react-native": "0.71.14",
     "react-native-gesture-handler": "~2.5.0",

package/src/components/Accordion/__tests__/__snapshots__/AccordionItem.spec.tsx.snap

@@ -157,7 +157,6 @@ exports[`AccordionItem renders correctly when header is an element 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -335,7 +334,6 @@ exports[`AccordionItem renders correctly when header is string 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -513,7 +511,6 @@ exports[`AccordionItem renders correctly when open 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -691,7 +688,6 @@ exports[`AccordionItem renders correctly when variant is card 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

package/src/components/Accordion/__tests__/__snapshots__/StyledAccordion.spec.tsx.snap

@@ -23,7 +23,6 @@ exports[`StyledItemWrapper has correct style when variant is card 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -67,7 +66,6 @@ exports[`StyledItemWrapper has correct style when variant is default 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

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

@@ -313,7 +313,6 @@ exports[`Accordion allows fully controlled 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -647,7 +646,6 @@ exports[`Accordion renders correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -992,7 +990,6 @@ exports[`Accordion renders correctly when variant is card 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

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

@@ -101,7 +101,6 @@ exports[`Alert Icon render custom icon correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -295,7 +294,6 @@ exports[`Alert renders correctly when intent is error 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -489,7 +487,6 @@ exports[`Alert renders correctly when intent is info 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -656,7 +653,6 @@ exports[`Alert renders correctly when intent is notification 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -850,7 +846,6 @@ exports[`Alert renders correctly when intent is success 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -1044,7 +1039,6 @@ exports[`Alert renders correctly when intent is warning 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -1186,7 +1180,6 @@ exports[`Alert renders correctly without rounded  1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

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

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

package/src/components/Avatar/AvatarStack/__tests__/__snapshots__/StyledAvatarStack.spec.tsx.snap

@@ -101,7 +101,6 @@ exports[`StyledAvatar renders correctly with $variant 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -415,7 +414,6 @@ exports[`StyledWrapper renders correctly with $variant 2`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

package/src/components/Avatar/AvatarStack/__tests__/__snapshots__/index.spec.tsx.snap

@@ -2613,7 +2613,6 @@ exports[`AvatarStack renders correctly when variant is vertical 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -3023,7 +3022,6 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

package/src/components/Avatar/__tests__/__snapshots__/StyledAvatar.spec.tsx.snap

@@ -27,7 +27,6 @@ exports[`StyledImage renders correct style 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -97,7 +96,6 @@ exports[`StyledPressable renders correct style 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -161,7 +159,6 @@ exports[`StyledText renders correct style 1`] = `
   </Text>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

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

@@ -118,7 +118,6 @@ exports[`Avatar fallbacks to title when there image failed to load 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -211,7 +210,6 @@ exports[`Avatar prioritizes source over title 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -330,7 +328,6 @@ exports[`Avatar shows title when there is no source 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

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

@@ -60,7 +60,6 @@ exports[`Badge has danger style when intent is danger 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -141,7 +140,6 @@ exports[`Badge has info style when intent is info 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -222,7 +220,6 @@ exports[`Badge has info style when intent is primary 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -303,7 +300,6 @@ exports[`Badge has success style when intent is success 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -384,7 +380,6 @@ exports[`Badge has warning style when intent is warning 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -466,7 +461,6 @@ exports[`Badge renders correctly with custom props 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

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

@@ -48,7 +48,6 @@ exports[`Status Badge renders correctly 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -122,7 +121,6 @@ exports[`Status Badge renders correctly with intent 1`] = `
   </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

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

@@ -8,15 +8,8 @@ exports[`BottomSheet renders correctly with BottomSheet.ScrollView 1`] = `
     }
   }
 >
-  <Modal
-    hardwareAccelerated={false}
-    onRequestClose={[MockFunction]}
-    transparent={true}
-    visible={false}
-  />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -45,15 +38,8 @@ exports[`BottomSheet renders correctly with close state 1`] = `
     }
   }
 >
-  <Modal
-    hardwareAccelerated={false}
-    onRequestClose={[MockFunction]}
-    transparent={true}
-    visible={false}
-  />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -82,11 +68,37 @@ exports[`BottomSheet renders correctly with open state 1`] = `
     }
   }
 >
-  <Modal
-    hardwareAccelerated={false}
-    onRequestClose={[MockFunction]}
-    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"
@@ -382,10 +394,9 @@ exports[`BottomSheet renders correctly with open state 1`] = `
         </RCTSafeAreaView>
       </View>
     </View>
-  </Modal>
+  </View>
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {

package/src/components/BottomSheet/index.tsx

@@ -6,7 +6,6 @@ import {
   Dimensions,
   Easing,
   KeyboardAvoidingViewProps,
-  Modal,
   Platform,
 } from 'react-native';
 import BottomSheetContext from './BottomSheetContext';
@@ -19,6 +18,7 @@ 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,7 +41,6 @@ exports[`Box allows flex props 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -97,7 +96,6 @@ exports[`Box map prop to valid property and correct color from theme 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -144,7 +142,6 @@ exports[`Box map prop to valid property and correct color from theme 2`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -200,7 +197,6 @@ exports[`Box map prop to valid property and correct color from theme 3`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -247,7 +243,6 @@ exports[`Box map prop to valid property and correct color from theme 4`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -305,7 +300,6 @@ exports[`Box map prop to valid property and correct radius from theme 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -363,7 +357,6 @@ exports[`Box map prop to valid property and correct radius from theme 2`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -421,7 +414,6 @@ exports[`Box map prop to valid property and correct radius from theme 3`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -479,7 +471,6 @@ exports[`Box map prop to valid property and correct radius from theme 4`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -537,7 +528,6 @@ exports[`Box map prop to valid property and correct radius from theme 5`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -613,7 +603,6 @@ exports[`Box map prop to valid property and correct space from theme 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -689,7 +678,6 @@ exports[`Box map prop to valid property and correct space from theme 2`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -765,7 +753,6 @@ exports[`Box map prop to valid property and correct space from theme 3`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -841,7 +828,6 @@ exports[`Box map prop to valid property and correct space from theme 4`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -891,7 +877,6 @@ exports[`Box map prop to valid property and correctborderWidth from theme 1`] =
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -941,7 +926,6 @@ exports[`Box map prop to valid property and correctborderWidth from theme 2`] =
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -983,7 +967,6 @@ exports[`Box map prop with shortcut name to valid property and correct color fro
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -1023,7 +1006,6 @@ exports[`Box map prop with shortcut name to valid property and correct color fro
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -1065,7 +1047,6 @@ exports[`Box map prop with shortcut name to valid property and correct color fro
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -1105,7 +1086,6 @@ exports[`Box map prop with shortcut name to valid property and correct color fro
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -1149,7 +1129,6 @@ 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,7 +25,6 @@ exports[`StyledLoadingIndicator has basic-transparent style 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -71,7 +70,6 @@ exports[`StyledLoadingIndicator has filled-danger style 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -117,7 +115,6 @@ exports[`StyledLoadingIndicator has filled-primary style 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -163,7 +160,6 @@ exports[`StyledLoadingIndicator has filled-secondary style 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -209,7 +205,6 @@ exports[`StyledLoadingIndicator has outlined-danger style 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -255,7 +250,6 @@ exports[`StyledLoadingIndicator has outlined-primary style 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -301,7 +295,6 @@ exports[`StyledLoadingIndicator has outlined-secondary style 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -347,7 +340,6 @@ exports[`StyledLoadingIndicator has text-danger style 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -393,7 +385,6 @@ exports[`StyledLoadingIndicator has text-primary style 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {
@@ -439,7 +430,6 @@ exports[`StyledLoadingIndicator has text-secondary style 1`] = `
   />
   <View
     pointerEvents="box-none"
-    position="bottom"
     style={
       [
         {