@hero-design/rn 9.0.0-0 → 9.0.0-alpha.0

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

@@ -2,582 +2,1170 @@
 
 exports[`Box allows flex props 1`] = `
 <View
-  alignContent="center"
-  alignItems="flex-end"
-  alignSelf="baseline"
-  display="flex"
-  flex={1}
-  flexBasis={20}
-  flexDirection="row"
-  flexGrow={3}
-  flexShrink={5}
-  flexWrap="wrap"
-  justifyContent="space-around"
   style={
-    Array [
-      Object {
-        "alignContent": "center",
-        "alignItems": "flex-end",
-        "alignSelf": "baseline",
-        "display": "flex",
-        "flex": 1,
-        "flexBasis": 20,
-        "flexDirection": "row",
-        "flexGrow": 3,
-        "flexShrink": 5,
-        "flexWrap": "wrap",
-        "justifyContent": "space-around",
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-/>
+>
+  <View
+    alignContent="center"
+    alignItems="flex-end"
+    alignSelf="baseline"
+    display="flex"
+    flex={1}
+    flexBasis={20}
+    flexDirection="row"
+    flexGrow={3}
+    flexShrink={5}
+    flexWrap="wrap"
+    justifyContent="space-around"
+    style={
+      [
+        {
+          "alignContent": "center",
+          "alignItems": "flex-end",
+          "alignSelf": "baseline",
+          "display": "flex",
+          "flex": 1,
+          "flexBasis": 20,
+          "flexDirection": "row",
+          "flexGrow": 3,
+          "flexShrink": 5,
+          "flexWrap": "wrap",
+          "justifyContent": "space-around",
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Box map prop to valid property and correct color from theme 1`] = `
 <View
-  backgroundColor="warning"
-  borderBottomColor="warning"
-  borderColor="warning"
-  borderEndColor="warning"
-  borderLeftColor="warning"
-  borderRightColor="warning"
-  borderStartColor="warning"
-  borderTopColor="warning"
   style={
-    Array [
-      Object {
-        "backgroundColor": "#ffbe71",
-        "borderBottomColor": "#ffbe71",
-        "borderColor": "#ffbe71",
-        "borderEndColor": "#ffbe71",
-        "borderLeftColor": "#ffbe71",
-        "borderRightColor": "#ffbe71",
-        "borderStartColor": "#ffbe71",
-        "borderTopColor": "#ffbe71",
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-/>
+>
+  <View
+    backgroundColor="warning"
+    borderBottomColor="warning"
+    borderColor="warning"
+    borderEndColor="warning"
+    borderLeftColor="warning"
+    borderRightColor="warning"
+    borderStartColor="warning"
+    borderTopColor="warning"
+    style={
+      [
+        {
+          "backgroundColor": "#ffbe71",
+          "borderBottomColor": "#ffbe71",
+          "borderColor": "#ffbe71",
+          "borderEndColor": "#ffbe71",
+          "borderLeftColor": "#ffbe71",
+          "borderRightColor": "#ffbe71",
+          "borderStartColor": "#ffbe71",
+          "borderTopColor": "#ffbe71",
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Box map prop to valid property and correct color from theme 2`] = `
 <View
-  backgroundColor="danger"
-  borderBottomColor="danger"
-  borderColor="danger"
-  borderEndColor="danger"
-  borderLeftColor="danger"
-  borderRightColor="danger"
-  borderStartColor="danger"
-  borderTopColor="danger"
   style={
-    Array [
-      Object {},
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-/>
+>
+  <View
+    backgroundColor="danger"
+    borderBottomColor="danger"
+    borderColor="danger"
+    borderEndColor="danger"
+    borderLeftColor="danger"
+    borderRightColor="danger"
+    borderStartColor="danger"
+    borderTopColor="danger"
+    style={
+      [
+        {},
+        undefined,
+      ]
+    }
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Box map prop to valid property and correct color from theme 3`] = `
 <View
-  backgroundColor="success"
-  borderBottomColor="success"
-  borderColor="success"
-  borderEndColor="success"
-  borderLeftColor="success"
-  borderRightColor="success"
-  borderStartColor="success"
-  borderTopColor="success"
   style={
-    Array [
-      Object {
-        "backgroundColor": "#5ace7d",
-        "borderBottomColor": "#5ace7d",
-        "borderColor": "#5ace7d",
-        "borderEndColor": "#5ace7d",
-        "borderLeftColor": "#5ace7d",
-        "borderRightColor": "#5ace7d",
-        "borderStartColor": "#5ace7d",
-        "borderTopColor": "#5ace7d",
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-/>
+>
+  <View
+    backgroundColor="success"
+    borderBottomColor="success"
+    borderColor="success"
+    borderEndColor="success"
+    borderLeftColor="success"
+    borderRightColor="success"
+    borderStartColor="success"
+    borderTopColor="success"
+    style={
+      [
+        {
+          "backgroundColor": "#5ace7d",
+          "borderBottomColor": "#5ace7d",
+          "borderColor": "#5ace7d",
+          "borderEndColor": "#5ace7d",
+          "borderLeftColor": "#5ace7d",
+          "borderRightColor": "#5ace7d",
+          "borderStartColor": "#5ace7d",
+          "borderTopColor": "#5ace7d",
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Box map prop to valid property and correct color from theme 4`] = `
 <View
-  backgroundColor="backgroundDark"
-  borderBottomColor="backgroundDark"
-  borderColor="backgroundDark"
-  borderEndColor="backgroundDark"
-  borderLeftColor="backgroundDark"
-  borderRightColor="backgroundDark"
-  borderStartColor="backgroundDark"
-  borderTopColor="backgroundDark"
   style={
-    Array [
-      Object {},
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-/>
+>
+  <View
+    backgroundColor="backgroundDark"
+    borderBottomColor="backgroundDark"
+    borderColor="backgroundDark"
+    borderEndColor="backgroundDark"
+    borderLeftColor="backgroundDark"
+    borderRightColor="backgroundDark"
+    borderStartColor="backgroundDark"
+    borderTopColor="backgroundDark"
+    style={
+      [
+        {},
+        undefined,
+      ]
+    }
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Box map prop to valid property and correct radius from theme 1`] = `
 <View
-  borderBottomEndRadius="base"
-  borderBottomLeftRadius="base"
-  borderBottomRightRadius="base"
-  borderBottomStartRadius="base"
-  borderRadius="base"
-  borderTopEndRadius="base"
-  borderTopLeftRadius="base"
-  borderTopRightRadius="base"
-  borderTopStartRadius="base"
   style={
-    Array [
-      Object {
-        "borderBottomEndRadius": 4,
-        "borderBottomLeftRadius": 4,
-        "borderBottomRightRadius": 4,
-        "borderBottomStartRadius": 4,
-        "borderRadius": 4,
-        "borderTopEndRadius": 4,
-        "borderTopLeftRadius": 4,
-        "borderTopRightRadius": 4,
-        "borderTopStartRadius": 4,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-/>
+>
+  <View
+    borderBottomEndRadius="base"
+    borderBottomLeftRadius="base"
+    borderBottomRightRadius="base"
+    borderBottomStartRadius="base"
+    borderRadius="base"
+    borderTopEndRadius="base"
+    borderTopLeftRadius="base"
+    borderTopRightRadius="base"
+    borderTopStartRadius="base"
+    style={
+      [
+        {
+          "borderBottomEndRadius": 4,
+          "borderBottomLeftRadius": 4,
+          "borderBottomRightRadius": 4,
+          "borderBottomStartRadius": 4,
+          "borderRadius": 4,
+          "borderTopEndRadius": 4,
+          "borderTopLeftRadius": 4,
+          "borderTopRightRadius": 4,
+          "borderTopStartRadius": 4,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Box map prop to valid property and correct radius from theme 2`] = `
 <View
-  borderBottomEndRadius="large"
-  borderBottomLeftRadius="large"
-  borderBottomRightRadius="large"
-  borderBottomStartRadius="large"
-  borderRadius="large"
-  borderTopEndRadius="large"
-  borderTopLeftRadius="large"
-  borderTopRightRadius="large"
-  borderTopStartRadius="large"
   style={
-    Array [
-      Object {
-        "borderBottomEndRadius": 12,
-        "borderBottomLeftRadius": 12,
-        "borderBottomRightRadius": 12,
-        "borderBottomStartRadius": 12,
-        "borderRadius": 12,
-        "borderTopEndRadius": 12,
-        "borderTopLeftRadius": 12,
-        "borderTopRightRadius": 12,
-        "borderTopStartRadius": 12,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-/>
+>
+  <View
+    borderBottomEndRadius="large"
+    borderBottomLeftRadius="large"
+    borderBottomRightRadius="large"
+    borderBottomStartRadius="large"
+    borderRadius="large"
+    borderTopEndRadius="large"
+    borderTopLeftRadius="large"
+    borderTopRightRadius="large"
+    borderTopStartRadius="large"
+    style={
+      [
+        {
+          "borderBottomEndRadius": 12,
+          "borderBottomLeftRadius": 12,
+          "borderBottomRightRadius": 12,
+          "borderBottomStartRadius": 12,
+          "borderRadius": 12,
+          "borderTopEndRadius": 12,
+          "borderTopLeftRadius": 12,
+          "borderTopRightRadius": 12,
+          "borderTopStartRadius": 12,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Box map prop to valid property and correct radius from theme 3`] = `
 <View
-  borderBottomEndRadius="medium"
-  borderBottomLeftRadius="medium"
-  borderBottomRightRadius="medium"
-  borderBottomStartRadius="medium"
-  borderRadius="medium"
-  borderTopEndRadius="medium"
-  borderTopLeftRadius="medium"
-  borderTopRightRadius="medium"
-  borderTopStartRadius="medium"
   style={
-    Array [
-      Object {
-        "borderBottomEndRadius": 8,
-        "borderBottomLeftRadius": 8,
-        "borderBottomRightRadius": 8,
-        "borderBottomStartRadius": 8,
-        "borderRadius": 8,
-        "borderTopEndRadius": 8,
-        "borderTopLeftRadius": 8,
-        "borderTopRightRadius": 8,
-        "borderTopStartRadius": 8,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-/>
+>
+  <View
+    borderBottomEndRadius="medium"
+    borderBottomLeftRadius="medium"
+    borderBottomRightRadius="medium"
+    borderBottomStartRadius="medium"
+    borderRadius="medium"
+    borderTopEndRadius="medium"
+    borderTopLeftRadius="medium"
+    borderTopRightRadius="medium"
+    borderTopStartRadius="medium"
+    style={
+      [
+        {
+          "borderBottomEndRadius": 8,
+          "borderBottomLeftRadius": 8,
+          "borderBottomRightRadius": 8,
+          "borderBottomStartRadius": 8,
+          "borderRadius": 8,
+          "borderTopEndRadius": 8,
+          "borderTopLeftRadius": 8,
+          "borderTopRightRadius": 8,
+          "borderTopStartRadius": 8,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Box map prop to valid property and correct radius from theme 4`] = `
 <View
-  borderBottomEndRadius="xlarge"
-  borderBottomLeftRadius="xlarge"
-  borderBottomRightRadius="xlarge"
-  borderBottomStartRadius="xlarge"
-  borderRadius="xlarge"
-  borderTopEndRadius="xlarge"
-  borderTopLeftRadius="xlarge"
-  borderTopRightRadius="xlarge"
-  borderTopStartRadius="xlarge"
   style={
-    Array [
-      Object {
-        "borderBottomEndRadius": 16,
-        "borderBottomLeftRadius": 16,
-        "borderBottomRightRadius": 16,
-        "borderBottomStartRadius": 16,
-        "borderRadius": 16,
-        "borderTopEndRadius": 16,
-        "borderTopLeftRadius": 16,
-        "borderTopRightRadius": 16,
-        "borderTopStartRadius": 16,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-/>
+>
+  <View
+    borderBottomEndRadius="xlarge"
+    borderBottomLeftRadius="xlarge"
+    borderBottomRightRadius="xlarge"
+    borderBottomStartRadius="xlarge"
+    borderRadius="xlarge"
+    borderTopEndRadius="xlarge"
+    borderTopLeftRadius="xlarge"
+    borderTopRightRadius="xlarge"
+    borderTopStartRadius="xlarge"
+    style={
+      [
+        {
+          "borderBottomEndRadius": 16,
+          "borderBottomLeftRadius": 16,
+          "borderBottomRightRadius": 16,
+          "borderBottomStartRadius": 16,
+          "borderRadius": 16,
+          "borderTopEndRadius": 16,
+          "borderTopLeftRadius": 16,
+          "borderTopRightRadius": 16,
+          "borderTopStartRadius": 16,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Box map prop to valid property and correct radius from theme 5`] = `
 <View
-  borderBottomEndRadius="rounded"
-  borderBottomLeftRadius="rounded"
-  borderBottomRightRadius="rounded"
-  borderBottomStartRadius="rounded"
-  borderRadius="rounded"
-  borderTopEndRadius="rounded"
-  borderTopLeftRadius="rounded"
-  borderTopRightRadius="rounded"
-  borderTopStartRadius="rounded"
   style={
-    Array [
-      Object {
-        "borderBottomEndRadius": 999,
-        "borderBottomLeftRadius": 999,
-        "borderBottomRightRadius": 999,
-        "borderBottomStartRadius": 999,
-        "borderRadius": 999,
-        "borderTopEndRadius": 999,
-        "borderTopLeftRadius": 999,
-        "borderTopRightRadius": 999,
-        "borderTopStartRadius": 999,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-/>
+>
+  <View
+    borderBottomEndRadius="rounded"
+    borderBottomLeftRadius="rounded"
+    borderBottomRightRadius="rounded"
+    borderBottomStartRadius="rounded"
+    borderRadius="rounded"
+    borderTopEndRadius="rounded"
+    borderTopLeftRadius="rounded"
+    borderTopRightRadius="rounded"
+    borderTopStartRadius="rounded"
+    style={
+      [
+        {
+          "borderBottomEndRadius": 999,
+          "borderBottomLeftRadius": 999,
+          "borderBottomRightRadius": 999,
+          "borderBottomStartRadius": 999,
+          "borderRadius": 999,
+          "borderTopEndRadius": 999,
+          "borderTopLeftRadius": 999,
+          "borderTopRightRadius": 999,
+          "borderTopStartRadius": 999,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Box map prop to valid property and correct space from theme 1`] = `
 <View
-  margin="large"
-  marginBottom="large"
-  marginEnd="large"
-  marginHorizontal="large"
-  marginLeft="large"
-  marginRight="large"
-  marginStart="large"
-  marginTop="large"
-  marginVertical="large"
-  padding="large"
-  paddingBottom="large"
-  paddingEnd="large"
-  paddingHorizontal="large"
-  paddingLeft="large"
-  paddingRight="large"
-  paddingStart="large"
-  paddingTop="large"
-  paddingVertical="large"
   style={
-    Array [
-      Object {
-        "margin": 24,
-        "marginBottom": 24,
-        "marginEnd": 24,
-        "marginHorizontal": 24,
-        "marginLeft": 24,
-        "marginRight": 24,
-        "marginStart": 24,
-        "marginTop": 24,
-        "marginVertical": 24,
-        "padding": 24,
-        "paddingBottom": 24,
-        "paddingEnd": 24,
-        "paddingHorizontal": 24,
-        "paddingLeft": 24,
-        "paddingRight": 24,
-        "paddingStart": 24,
-        "paddingTop": 24,
-        "paddingVertical": 24,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-/>
+>
+  <View
+    margin="large"
+    marginBottom="large"
+    marginEnd="large"
+    marginHorizontal="large"
+    marginLeft="large"
+    marginRight="large"
+    marginStart="large"
+    marginTop="large"
+    marginVertical="large"
+    padding="large"
+    paddingBottom="large"
+    paddingEnd="large"
+    paddingHorizontal="large"
+    paddingLeft="large"
+    paddingRight="large"
+    paddingStart="large"
+    paddingTop="large"
+    paddingVertical="large"
+    style={
+      [
+        {
+          "margin": 24,
+          "marginBottom": 24,
+          "marginEnd": 24,
+          "marginHorizontal": 24,
+          "marginLeft": 24,
+          "marginRight": 24,
+          "marginStart": 24,
+          "marginTop": 24,
+          "marginVertical": 24,
+          "padding": 24,
+          "paddingBottom": 24,
+          "paddingEnd": 24,
+          "paddingHorizontal": 24,
+          "paddingLeft": 24,
+          "paddingRight": 24,
+          "paddingStart": 24,
+          "paddingTop": 24,
+          "paddingVertical": 24,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Box map prop to valid property and correct space from theme 2`] = `
 <View
-  margin="medium"
-  marginBottom="medium"
-  marginEnd="medium"
-  marginHorizontal="medium"
-  marginLeft="medium"
-  marginRight="medium"
-  marginStart="medium"
-  marginTop="medium"
-  marginVertical="medium"
-  padding="medium"
-  paddingBottom="medium"
-  paddingEnd="medium"
-  paddingHorizontal="medium"
-  paddingLeft="medium"
-  paddingRight="medium"
-  paddingStart="medium"
-  paddingTop="medium"
-  paddingVertical="medium"
   style={
-    Array [
-      Object {
-        "margin": 16,
-        "marginBottom": 16,
-        "marginEnd": 16,
-        "marginHorizontal": 16,
-        "marginLeft": 16,
-        "marginRight": 16,
-        "marginStart": 16,
-        "marginTop": 16,
-        "marginVertical": 16,
-        "padding": 16,
-        "paddingBottom": 16,
-        "paddingEnd": 16,
-        "paddingHorizontal": 16,
-        "paddingLeft": 16,
-        "paddingRight": 16,
-        "paddingStart": 16,
-        "paddingTop": 16,
-        "paddingVertical": 16,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-/>
+>
+  <View
+    margin="medium"
+    marginBottom="medium"
+    marginEnd="medium"
+    marginHorizontal="medium"
+    marginLeft="medium"
+    marginRight="medium"
+    marginStart="medium"
+    marginTop="medium"
+    marginVertical="medium"
+    padding="medium"
+    paddingBottom="medium"
+    paddingEnd="medium"
+    paddingHorizontal="medium"
+    paddingLeft="medium"
+    paddingRight="medium"
+    paddingStart="medium"
+    paddingTop="medium"
+    paddingVertical="medium"
+    style={
+      [
+        {
+          "margin": 16,
+          "marginBottom": 16,
+          "marginEnd": 16,
+          "marginHorizontal": 16,
+          "marginLeft": 16,
+          "marginRight": 16,
+          "marginStart": 16,
+          "marginTop": 16,
+          "marginVertical": 16,
+          "padding": 16,
+          "paddingBottom": 16,
+          "paddingEnd": 16,
+          "paddingHorizontal": 16,
+          "paddingLeft": 16,
+          "paddingRight": 16,
+          "paddingStart": 16,
+          "paddingTop": 16,
+          "paddingVertical": 16,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Box map prop to valid property and correct space from theme 3`] = `
 <View
-  margin="small"
-  marginBottom="small"
-  marginEnd="small"
-  marginHorizontal="small"
-  marginLeft="small"
-  marginRight="small"
-  marginStart="small"
-  marginTop="small"
-  marginVertical="small"
-  padding="small"
-  paddingBottom="small"
-  paddingEnd="small"
-  paddingHorizontal="small"
-  paddingLeft="small"
-  paddingRight="small"
-  paddingStart="small"
-  paddingTop="small"
-  paddingVertical="small"
   style={
-    Array [
-      Object {
-        "margin": 8,
-        "marginBottom": 8,
-        "marginEnd": 8,
-        "marginHorizontal": 8,
-        "marginLeft": 8,
-        "marginRight": 8,
-        "marginStart": 8,
-        "marginTop": 8,
-        "marginVertical": 8,
-        "padding": 8,
-        "paddingBottom": 8,
-        "paddingEnd": 8,
-        "paddingHorizontal": 8,
-        "paddingLeft": 8,
-        "paddingRight": 8,
-        "paddingStart": 8,
-        "paddingTop": 8,
-        "paddingVertical": 8,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-/>
+>
+  <View
+    margin="small"
+    marginBottom="small"
+    marginEnd="small"
+    marginHorizontal="small"
+    marginLeft="small"
+    marginRight="small"
+    marginStart="small"
+    marginTop="small"
+    marginVertical="small"
+    padding="small"
+    paddingBottom="small"
+    paddingEnd="small"
+    paddingHorizontal="small"
+    paddingLeft="small"
+    paddingRight="small"
+    paddingStart="small"
+    paddingTop="small"
+    paddingVertical="small"
+    style={
+      [
+        {
+          "margin": 8,
+          "marginBottom": 8,
+          "marginEnd": 8,
+          "marginHorizontal": 8,
+          "marginLeft": 8,
+          "marginRight": 8,
+          "marginStart": 8,
+          "marginTop": 8,
+          "marginVertical": 8,
+          "padding": 8,
+          "paddingBottom": 8,
+          "paddingEnd": 8,
+          "paddingHorizontal": 8,
+          "paddingLeft": 8,
+          "paddingRight": 8,
+          "paddingStart": 8,
+          "paddingTop": 8,
+          "paddingVertical": 8,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Box map prop to valid property and correct space from theme 4`] = `
 <View
-  margin="xlarge"
-  marginBottom="xlarge"
-  marginEnd="xlarge"
-  marginHorizontal="xlarge"
-  marginLeft="xlarge"
-  marginRight="xlarge"
-  marginStart="xlarge"
-  marginTop="xlarge"
-  marginVertical="xlarge"
-  padding="xlarge"
-  paddingBottom="xlarge"
-  paddingEnd="xlarge"
-  paddingHorizontal="xlarge"
-  paddingLeft="xlarge"
-  paddingRight="xlarge"
-  paddingStart="xlarge"
-  paddingTop="xlarge"
-  paddingVertical="xlarge"
   style={
-    Array [
-      Object {
-        "margin": 32,
-        "marginBottom": 32,
-        "marginEnd": 32,
-        "marginHorizontal": 32,
-        "marginLeft": 32,
-        "marginRight": 32,
-        "marginStart": 32,
-        "marginTop": 32,
-        "marginVertical": 32,
-        "padding": 32,
-        "paddingBottom": 32,
-        "paddingEnd": 32,
-        "paddingHorizontal": 32,
-        "paddingLeft": 32,
-        "paddingRight": 32,
-        "paddingStart": 32,
-        "paddingTop": 32,
-        "paddingVertical": 32,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-/>
+>
+  <View
+    margin="xlarge"
+    marginBottom="xlarge"
+    marginEnd="xlarge"
+    marginHorizontal="xlarge"
+    marginLeft="xlarge"
+    marginRight="xlarge"
+    marginStart="xlarge"
+    marginTop="xlarge"
+    marginVertical="xlarge"
+    padding="xlarge"
+    paddingBottom="xlarge"
+    paddingEnd="xlarge"
+    paddingHorizontal="xlarge"
+    paddingLeft="xlarge"
+    paddingRight="xlarge"
+    paddingStart="xlarge"
+    paddingTop="xlarge"
+    paddingVertical="xlarge"
+    style={
+      [
+        {
+          "margin": 32,
+          "marginBottom": 32,
+          "marginEnd": 32,
+          "marginHorizontal": 32,
+          "marginLeft": 32,
+          "marginRight": 32,
+          "marginStart": 32,
+          "marginTop": 32,
+          "marginVertical": 32,
+          "padding": 32,
+          "paddingBottom": 32,
+          "paddingEnd": 32,
+          "paddingHorizontal": 32,
+          "paddingLeft": 32,
+          "paddingRight": 32,
+          "paddingStart": 32,
+          "paddingTop": 32,
+          "paddingVertical": 32,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Box map prop to valid property and correctborderWidth from theme 1`] = `
 <View
-  borderBottomWidth="base"
-  borderLeftWidth="base"
-  borderRightWidth="base"
-  borderTopWidth="base"
-  borderWidth="base"
   style={
-    Array [
-      Object {
-        "borderBottomWidth": 1,
-        "borderLeftWidth": 1,
-        "borderRightWidth": 1,
-        "borderTopWidth": 1,
-        "borderWidth": 1,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-/>
+>
+  <View
+    borderBottomWidth="base"
+    borderLeftWidth="base"
+    borderRightWidth="base"
+    borderTopWidth="base"
+    borderWidth="base"
+    style={
+      [
+        {
+          "borderBottomWidth": 1,
+          "borderLeftWidth": 1,
+          "borderRightWidth": 1,
+          "borderTopWidth": 1,
+          "borderWidth": 1,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Box map prop to valid property and correctborderWidth from theme 2`] = `
 <View
-  borderBottomWidth="medium"
-  borderLeftWidth="medium"
-  borderRightWidth="medium"
-  borderTopWidth="medium"
-  borderWidth="medium"
   style={
-    Array [
-      Object {
-        "borderBottomWidth": 2,
-        "borderLeftWidth": 2,
-        "borderRightWidth": 2,
-        "borderTopWidth": 2,
-        "borderWidth": 2,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-/>
+>
+  <View
+    borderBottomWidth="medium"
+    borderLeftWidth="medium"
+    borderRightWidth="medium"
+    borderTopWidth="medium"
+    borderWidth="medium"
+    style={
+      [
+        {
+          "borderBottomWidth": 2,
+          "borderLeftWidth": 2,
+          "borderRightWidth": 2,
+          "borderTopWidth": 2,
+          "borderWidth": 2,
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Box map prop with shortcut name to valid property and correct color from theme 1`] = `
 <View
-  bgColor="warning"
   style={
-    Array [
-      Object {
-        "backgroundColor": "#ffbe71",
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-/>
+>
+  <View
+    bgColor="warning"
+    style={
+      [
+        {
+          "backgroundColor": "#ffbe71",
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Box map prop with shortcut name to valid property and correct color from theme 2`] = `
 <View
-  bgColor="danger"
   style={
-    Array [
-      Object {},
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-/>
+>
+  <View
+    bgColor="danger"
+    style={
+      [
+        {},
+        undefined,
+      ]
+    }
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Box map prop with shortcut name to valid property and correct color from theme 3`] = `
 <View
-  bgColor="success"
   style={
-    Array [
-      Object {
-        "backgroundColor": "#5ace7d",
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-/>
+>
+  <View
+    bgColor="success"
+    style={
+      [
+        {
+          "backgroundColor": "#5ace7d",
+        },
+        undefined,
+      ]
+    }
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Box map prop with shortcut name to valid property and correct color from theme 4`] = `
 <View
-  bgColor="backgroundDark"
   style={
-    Array [
-      Object {},
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-/>
+>
+  <View
+    bgColor="backgroundDark"
+    style={
+      [
+        {},
+        undefined,
+      ]
+    }
+  />
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
 `;
 
 exports[`Box renders content correctly 1`] = `
 <View
   style={
-    Array [
-      Object {},
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  testID="box-test-id"
 >
-  <Text>
-    Box Content
-  </Text>
+  <View
+    style={
+      [
+        {},
+        undefined,
+      ]
+    }
+    testID="box-test-id"
+  >
+    <Text>
+      Box Content
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
 </View>
 `;