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

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

@@ -2,947 +2,1232 @@
 
 exports[`Toast Icon render custom icon correctly 1`] = `
 <View
-  collapsable={false}
   style={
-    Object {
-      "backgroundColor": "#b5c3fd",
-      "borderRadius": 0,
-      "elevation": 4,
-      "flexDirection": "row",
-      "minHeight": 48,
-      "opacity": 0,
-      "shadowColor": "#001f23",
-      "shadowOffset": Object {
-        "height": 2,
-        "width": 0,
-      },
-      "shadowOpacity": 0.12,
-      "shadowRadius": 4,
-      "transform": Array [
-        Object {
-          "translateY": 20,
-        },
-      ],
+    {
+      "flex": 1,
     }
   }
-  themeIntent="info"
-  themeVariant="default"
 >
   <View
-    showDivider={false}
+    collapsable={false}
     style={
-      Array [
-        Object {
-          "borderColor": "#e8e9ea",
-          "borderRightWidth": 0,
-          "flex": 1,
-          "flexDirection": "row",
-          "paddingVertical": 12,
+      {
+        "backgroundColor": "#b5c3fd",
+        "borderRadius": 0,
+        "elevation": 3,
+        "flexDirection": "row",
+        "minHeight": 48,
+        "opacity": 0,
+        "shadowColor": "#001f23",
+        "shadowOffset": {
+          "height": 2,
+          "width": 0,
         },
-        undefined,
-      ]
+        "shadowOpacity": 0.12,
+        "shadowRadius": 4,
+        "transform": [
+          {
+            "translateY": 20,
+          },
+        ],
+      }
     }
+    themeIntent="info"
+    themeVariant="default"
   >
     <View
+      showDivider={false}
       style={
-        Array [
-          Object {
-            "alignItems": "center",
-            "paddingLeft": 12,
+        [
+          {
+            "borderColor": "#e8e9ea",
+            "borderRightWidth": 0,
+            "flex": 1,
+            "flexDirection": "row",
+            "paddingVertical": 12,
           },
           undefined,
         ]
       }
-      testID="toast-left-icon"
     >
-      <HeroIcon
-        name="home"
+      <View
         style={
-          Array [
-            Object {
-              "color": "#001f23",
-              "fontSize": 20,
+          [
+            {
+              "alignItems": "center",
+              "paddingLeft": 12,
             },
             undefined,
           ]
         }
-        themeIntent="text"
-        themeSize="small"
-      />
-    </View>
-    <View
-      style={
-        Array [
-          Object {
-            "flex": 1,
-            "paddingHorizontal": 12,
-          },
-          undefined,
-        ]
-      }
-    >
-      <Text
-        allowFontScaling={false}
+        testID="toast-left-icon"
+      >
+        <HeroIcon
+          name="home"
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 20,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="text"
+          themeSize="small"
+        />
+      </View>
+      <View
         style={
-          Array [
-            Object {
-              "color": "#001f23",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 14,
-              "letterSpacing": 0.42,
-              "lineHeight": 22,
+          [
+            {
+              "flex": 1,
+              "paddingHorizontal": 12,
             },
             undefined,
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="regular"
-        themeIntent="body"
-        themeTypeface="neutral"
       >
-        Content
-      </Text>
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.48,
+                "lineHeight": 22,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="body"
+          themeTypeface="neutral"
+          themeVariant="small"
+        >
+          Content
+        </Text>
+      </View>
     </View>
   </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>
 `;
 
 exports[`Toast renders correctly when intent is error 1`] = `
 <View
-  collapsable={false}
   style={
-    Object {
-      "backgroundColor": "#f46363",
-      "borderRadius": 0,
-      "elevation": 4,
-      "flexDirection": "row",
-      "minHeight": 48,
-      "opacity": 0,
-      "shadowColor": "#001f23",
-      "shadowOffset": Object {
-        "height": 2,
-        "width": 0,
-      },
-      "shadowOpacity": 0.12,
-      "shadowRadius": 4,
-      "transform": Array [
-        Object {
-          "translateY": 20,
-        },
-      ],
+    {
+      "flex": 1,
     }
   }
-  themeIntent="error"
-  themeVariant="default"
 >
   <View
-    showDivider={true}
+    collapsable={false}
     style={
-      Array [
-        Object {
-          "borderColor": "#e8e9ea",
-          "borderRightWidth": 1,
-          "flex": 1,
-          "flexDirection": "row",
-          "paddingVertical": 12,
+      {
+        "backgroundColor": "#f46363",
+        "borderRadius": 0,
+        "elevation": 3,
+        "flexDirection": "row",
+        "minHeight": 48,
+        "opacity": 0,
+        "shadowColor": "#001f23",
+        "shadowOffset": {
+          "height": 2,
+          "width": 0,
         },
-        undefined,
-      ]
+        "shadowOpacity": 0.12,
+        "shadowRadius": 4,
+        "transform": [
+          {
+            "translateY": 20,
+          },
+        ],
+      }
     }
+    themeIntent="error"
+    themeVariant="default"
   >
     <View
+      showDivider={true}
       style={
-        Array [
-          Object {
-            "alignItems": "center",
-            "paddingLeft": 12,
+        [
+          {
+            "borderColor": "#e8e9ea",
+            "borderRightWidth": 1,
+            "flex": 1,
+            "flexDirection": "row",
+            "paddingVertical": 12,
           },
           undefined,
         ]
       }
-      testID="toast-left-icon"
     >
-      <HeroIcon
-        name="circle-warning"
+      <View
         style={
-          Array [
-            Object {
-              "color": "#001f23",
-              "fontSize": 20,
+          [
+            {
+              "alignItems": "center",
+              "paddingLeft": 12,
             },
             undefined,
           ]
         }
-        themeIntent="text"
-        themeSize="small"
-      />
+        testID="toast-left-icon"
+      >
+        <HeroIcon
+          name="circle-warning"
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 20,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="text"
+          themeSize="small"
+        />
+      </View>
+      <View
+        style={
+          [
+            {
+              "flex": 1,
+              "paddingHorizontal": 12,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.48,
+                "lineHeight": 22,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="body"
+          themeTypeface="neutral"
+          themeVariant="small"
+        >
+          Toast Content
+        </Text>
+      </View>
     </View>
     <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        Array [
-          Object {
-            "flex": 1,
-            "paddingHorizontal": 12,
-          },
-          undefined,
-        ]
+        {
+          "justifyContent": "center",
+          "opacity": 1,
+          "paddingHorizontal": 12,
+        }
       }
+      testID="toast-action-button"
     >
       <Text
         allowFontScaling={false}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "#001f23",
-              "fontFamily": "BeVietnamPro-Regular",
+              "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 14,
-              "letterSpacing": 0.42,
+              "letterSpacing": 0.24,
               "lineHeight": 22,
             },
             undefined,
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="regular"
         themeIntent="body"
         themeTypeface="neutral"
+        themeVariant="small-bold"
       >
-        Toast Content
+        Action
       </Text>
     </View>
   </View>
   <View
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
+    pointerEvents="box-none"
+    position="bottom"
     style={
-      Object {
-        "justifyContent": "center",
-        "opacity": 1,
-        "paddingHorizontal": 12,
-      }
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
     }
-    testID="toast-action-button"
-  >
-    <Text
-      allowFontScaling={false}
-      style={
-        Array [
-          Object {
-            "color": "#001f23",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 14,
-            "letterSpacing": 0.42,
-            "lineHeight": 22,
-          },
-          undefined,
-        ]
-      }
-      themeFontSize="medium"
-      themeFontWeight="semi-bold"
-      themeIntent="body"
-      themeTypeface="neutral"
-    >
-      Action
-    </Text>
-  </View>
+  />
 </View>
 `;
 
 exports[`Toast renders correctly when intent is info 1`] = `
 <View
-  collapsable={false}
   style={
-    Object {
-      "backgroundColor": "#b5c3fd",
-      "borderRadius": 0,
-      "elevation": 4,
-      "flexDirection": "row",
-      "minHeight": 48,
-      "opacity": 0,
-      "shadowColor": "#001f23",
-      "shadowOffset": Object {
-        "height": 2,
-        "width": 0,
-      },
-      "shadowOpacity": 0.12,
-      "shadowRadius": 4,
-      "transform": Array [
-        Object {
-          "translateY": 20,
-        },
-      ],
+    {
+      "flex": 1,
     }
   }
-  themeIntent="info"
-  themeVariant="default"
 >
   <View
-    showDivider={true}
+    collapsable={false}
     style={
-      Array [
-        Object {
-          "borderColor": "#e8e9ea",
-          "borderRightWidth": 1,
-          "flex": 1,
-          "flexDirection": "row",
-          "paddingVertical": 12,
+      {
+        "backgroundColor": "#b5c3fd",
+        "borderRadius": 0,
+        "elevation": 3,
+        "flexDirection": "row",
+        "minHeight": 48,
+        "opacity": 0,
+        "shadowColor": "#001f23",
+        "shadowOffset": {
+          "height": 2,
+          "width": 0,
         },
-        undefined,
-      ]
+        "shadowOpacity": 0.12,
+        "shadowRadius": 4,
+        "transform": [
+          {
+            "translateY": 20,
+          },
+        ],
+      }
     }
+    themeIntent="info"
+    themeVariant="default"
   >
     <View
+      showDivider={true}
       style={
-        Array [
-          Object {
-            "alignItems": "center",
-            "paddingLeft": 12,
+        [
+          {
+            "borderColor": "#e8e9ea",
+            "borderRightWidth": 1,
+            "flex": 1,
+            "flexDirection": "row",
+            "paddingVertical": 12,
           },
           undefined,
         ]
       }
-      testID="toast-left-icon"
     >
-      <HeroIcon
-        name="circle-info"
+      <View
         style={
-          Array [
-            Object {
-              "color": "#001f23",
-              "fontSize": 20,
+          [
+            {
+              "alignItems": "center",
+              "paddingLeft": 12,
             },
             undefined,
           ]
         }
-        themeIntent="text"
-        themeSize="small"
-      />
+        testID="toast-left-icon"
+      >
+        <HeroIcon
+          name="circle-info"
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 20,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="text"
+          themeSize="small"
+        />
+      </View>
+      <View
+        style={
+          [
+            {
+              "flex": 1,
+              "paddingHorizontal": 12,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.48,
+                "lineHeight": 22,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="body"
+          themeTypeface="neutral"
+          themeVariant="small"
+        >
+          Toast Content
+        </Text>
+      </View>
     </View>
     <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        Array [
-          Object {
-            "flex": 1,
-            "paddingHorizontal": 12,
-          },
-          undefined,
-        ]
+        {
+          "justifyContent": "center",
+          "opacity": 1,
+          "paddingHorizontal": 12,
+        }
       }
+      testID="toast-action-button"
     >
       <Text
         allowFontScaling={false}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "#001f23",
-              "fontFamily": "BeVietnamPro-Regular",
+              "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 14,
-              "letterSpacing": 0.42,
+              "letterSpacing": 0.24,
               "lineHeight": 22,
             },
             undefined,
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="regular"
         themeIntent="body"
         themeTypeface="neutral"
+        themeVariant="small-bold"
       >
-        Toast Content
+        Action
       </Text>
     </View>
   </View>
   <View
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
+    pointerEvents="box-none"
+    position="bottom"
     style={
-      Object {
-        "justifyContent": "center",
-        "opacity": 1,
-        "paddingHorizontal": 12,
-      }
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
     }
-    testID="toast-action-button"
-  >
-    <Text
-      allowFontScaling={false}
-      style={
-        Array [
-          Object {
-            "color": "#001f23",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 14,
-            "letterSpacing": 0.42,
-            "lineHeight": 22,
-          },
-          undefined,
-        ]
-      }
-      themeFontSize="medium"
-      themeFontWeight="semi-bold"
-      themeIntent="body"
-      themeTypeface="neutral"
-    >
-      Action
-    </Text>
-  </View>
+  />
 </View>
 `;
 
 exports[`Toast renders correctly when intent is notification 1`] = `
 <View
-  collapsable={false}
   style={
-    Object {
-      "backgroundColor": "#ffffff",
-      "borderRadius": 0,
-      "elevation": 4,
-      "flexDirection": "row",
-      "minHeight": 48,
-      "opacity": 0,
-      "shadowColor": "#001f23",
-      "shadowOffset": Object {
-        "height": 2,
-        "width": 0,
-      },
-      "shadowOpacity": 0.12,
-      "shadowRadius": 4,
-      "transform": Array [
-        Object {
-          "translateY": 20,
-        },
-      ],
+    {
+      "flex": 1,
     }
   }
-  themeIntent="notification"
-  themeVariant="default"
 >
   <View
-    showDivider={true}
+    collapsable={false}
     style={
-      Array [
-        Object {
-          "borderColor": "#e8e9ea",
-          "borderRightWidth": 1,
-          "flex": 1,
-          "flexDirection": "row",
-          "paddingVertical": 12,
+      {
+        "backgroundColor": "#ffffff",
+        "borderRadius": 0,
+        "elevation": 3,
+        "flexDirection": "row",
+        "minHeight": 48,
+        "opacity": 0,
+        "shadowColor": "#001f23",
+        "shadowOffset": {
+          "height": 2,
+          "width": 0,
         },
-        undefined,
-      ]
+        "shadowOpacity": 0.12,
+        "shadowRadius": 4,
+        "transform": [
+          {
+            "translateY": 20,
+          },
+        ],
+      }
     }
+    themeIntent="notification"
+    themeVariant="default"
   >
     <View
+      showDivider={true}
       style={
-        Array [
-          Object {
+        [
+          {
+            "borderColor": "#e8e9ea",
+            "borderRightWidth": 1,
             "flex": 1,
-            "paddingHorizontal": 12,
+            "flexDirection": "row",
+            "paddingVertical": 12,
           },
           undefined,
         ]
       }
+    >
+      <View
+        style={
+          [
+            {
+              "flex": 1,
+              "paddingHorizontal": 12,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.48,
+                "lineHeight": 22,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="body"
+          themeTypeface="neutral"
+          themeVariant="small"
+        >
+          Toast Content
+        </Text>
+      </View>
+    </View>
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "justifyContent": "center",
+          "opacity": 1,
+          "paddingHorizontal": 12,
+        }
+      }
+      testID="toast-action-button"
     >
       <Text
         allowFontScaling={false}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "#001f23",
-              "fontFamily": "BeVietnamPro-Regular",
+              "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 14,
-              "letterSpacing": 0.42,
+              "letterSpacing": 0.24,
               "lineHeight": 22,
             },
             undefined,
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="regular"
         themeIntent="body"
         themeTypeface="neutral"
+        themeVariant="small-bold"
       >
-        Toast Content
+        Action
       </Text>
     </View>
   </View>
   <View
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
+    pointerEvents="box-none"
+    position="bottom"
     style={
-      Object {
-        "justifyContent": "center",
-        "opacity": 1,
-        "paddingHorizontal": 12,
-      }
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
     }
-    testID="toast-action-button"
-  >
-    <Text
-      allowFontScaling={false}
-      style={
-        Array [
-          Object {
-            "color": "#001f23",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 14,
-            "letterSpacing": 0.42,
-            "lineHeight": 22,
-          },
-          undefined,
-        ]
-      }
-      themeFontSize="medium"
-      themeFontWeight="semi-bold"
-      themeIntent="body"
-      themeTypeface="neutral"
-    >
-      Action
-    </Text>
-  </View>
+  />
 </View>
 `;
 
 exports[`Toast renders correctly when intent is snackbar 1`] = `
 <View
-  collapsable={false}
   style={
-    Object {
-      "backgroundColor": "#001f23",
-      "borderRadius": 0,
-      "elevation": 4,
-      "flexDirection": "row",
-      "minHeight": 48,
-      "opacity": 0,
-      "shadowColor": "#001f23",
-      "shadowOffset": Object {
-        "height": 2,
-        "width": 0,
-      },
-      "shadowOpacity": 0.12,
-      "shadowRadius": 4,
-      "transform": Array [
-        Object {
-          "translateY": 20,
-        },
-      ],
+    {
+      "flex": 1,
     }
   }
-  themeIntent="snackbar"
-  themeVariant="default"
 >
   <View
-    showDivider={true}
+    collapsable={false}
     style={
-      Array [
-        Object {
-          "borderColor": "#e8e9ea",
-          "borderRightWidth": 1,
-          "flex": 1,
-          "flexDirection": "row",
-          "paddingVertical": 12,
+      {
+        "backgroundColor": "#001f23",
+        "borderRadius": 0,
+        "elevation": 3,
+        "flexDirection": "row",
+        "minHeight": 48,
+        "opacity": 0,
+        "shadowColor": "#001f23",
+        "shadowOffset": {
+          "height": 2,
+          "width": 0,
         },
-        undefined,
-      ]
+        "shadowOpacity": 0.12,
+        "shadowRadius": 4,
+        "transform": [
+          {
+            "translateY": 20,
+          },
+        ],
+      }
     }
+    themeIntent="snackbar"
+    themeVariant="default"
   >
     <View
+      showDivider={true}
       style={
-        Array [
-          Object {
+        [
+          {
+            "borderColor": "#e8e9ea",
+            "borderRightWidth": 1,
             "flex": 1,
-            "paddingHorizontal": 12,
+            "flexDirection": "row",
+            "paddingVertical": 12,
           },
           undefined,
         ]
       }
+    >
+      <View
+        style={
+          [
+            {
+              "flex": 1,
+              "paddingHorizontal": 12,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#ffffff",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.48,
+                "lineHeight": 22,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="inverted"
+          themeTypeface="neutral"
+          themeVariant="small"
+        >
+          Toast Content
+        </Text>
+      </View>
+    </View>
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "justifyContent": "center",
+          "opacity": 1,
+          "paddingHorizontal": 12,
+        }
+      }
+      testID="toast-action-button"
     >
       <Text
         allowFontScaling={false}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "#ffffff",
-              "fontFamily": "BeVietnamPro-Regular",
+              "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 14,
-              "letterSpacing": 0.42,
+              "letterSpacing": 0.24,
               "lineHeight": 22,
             },
             undefined,
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="regular"
         themeIntent="inverted"
         themeTypeface="neutral"
+        themeVariant="small-bold"
       >
-        Toast Content
+        Action
       </Text>
     </View>
   </View>
   <View
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
+    pointerEvents="box-none"
+    position="bottom"
     style={
-      Object {
-        "justifyContent": "center",
-        "opacity": 1,
-        "paddingHorizontal": 12,
-      }
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
     }
-    testID="toast-action-button"
-  >
-    <Text
-      allowFontScaling={false}
-      style={
-        Array [
-          Object {
-            "color": "#ffffff",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 14,
-            "letterSpacing": 0.42,
-            "lineHeight": 22,
-          },
-          undefined,
-        ]
-      }
-      themeFontSize="medium"
-      themeFontWeight="semi-bold"
-      themeIntent="inverted"
-      themeTypeface="neutral"
-    >
-      Action
-    </Text>
-  </View>
+  />
 </View>
 `;
 
 exports[`Toast renders correctly when intent is success 1`] = `
 <View
-  collapsable={false}
   style={
-    Object {
-      "backgroundColor": "#5ace7d",
-      "borderRadius": 0,
-      "elevation": 4,
-      "flexDirection": "row",
-      "minHeight": 48,
-      "opacity": 0,
-      "shadowColor": "#001f23",
-      "shadowOffset": Object {
-        "height": 2,
-        "width": 0,
-      },
-      "shadowOpacity": 0.12,
-      "shadowRadius": 4,
-      "transform": Array [
-        Object {
-          "translateY": 20,
-        },
-      ],
+    {
+      "flex": 1,
     }
   }
-  themeIntent="success"
-  themeVariant="default"
 >
   <View
-    showDivider={true}
+    collapsable={false}
     style={
-      Array [
-        Object {
-          "borderColor": "#e8e9ea",
-          "borderRightWidth": 1,
-          "flex": 1,
-          "flexDirection": "row",
-          "paddingVertical": 12,
+      {
+        "backgroundColor": "#5ace7d",
+        "borderRadius": 0,
+        "elevation": 3,
+        "flexDirection": "row",
+        "minHeight": 48,
+        "opacity": 0,
+        "shadowColor": "#001f23",
+        "shadowOffset": {
+          "height": 2,
+          "width": 0,
         },
-        undefined,
-      ]
+        "shadowOpacity": 0.12,
+        "shadowRadius": 4,
+        "transform": [
+          {
+            "translateY": 20,
+          },
+        ],
+      }
     }
+    themeIntent="success"
+    themeVariant="default"
   >
     <View
+      showDivider={true}
       style={
-        Array [
-          Object {
-            "alignItems": "center",
-            "paddingLeft": 12,
+        [
+          {
+            "borderColor": "#e8e9ea",
+            "borderRightWidth": 1,
+            "flex": 1,
+            "flexDirection": "row",
+            "paddingVertical": 12,
           },
           undefined,
         ]
       }
-      testID="toast-left-icon"
     >
-      <HeroIcon
-        name="circle-ok"
+      <View
         style={
-          Array [
-            Object {
-              "color": "#001f23",
-              "fontSize": 20,
+          [
+            {
+              "alignItems": "center",
+              "paddingLeft": 12,
             },
             undefined,
           ]
         }
-        themeIntent="text"
-        themeSize="small"
-      />
+        testID="toast-left-icon"
+      >
+        <HeroIcon
+          name="circle-ok"
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 20,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="text"
+          themeSize="small"
+        />
+      </View>
+      <View
+        style={
+          [
+            {
+              "flex": 1,
+              "paddingHorizontal": 12,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.48,
+                "lineHeight": 22,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="body"
+          themeTypeface="neutral"
+          themeVariant="small"
+        >
+          Toast Content
+        </Text>
+      </View>
     </View>
     <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        Array [
-          Object {
-            "flex": 1,
-            "paddingHorizontal": 12,
-          },
-          undefined,
-        ]
+        {
+          "justifyContent": "center",
+          "opacity": 1,
+          "paddingHorizontal": 12,
+        }
       }
+      testID="toast-action-button"
     >
       <Text
         allowFontScaling={false}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "#001f23",
-              "fontFamily": "BeVietnamPro-Regular",
+              "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 14,
-              "letterSpacing": 0.42,
+              "letterSpacing": 0.24,
               "lineHeight": 22,
             },
             undefined,
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="regular"
         themeIntent="body"
         themeTypeface="neutral"
+        themeVariant="small-bold"
       >
-        Toast Content
+        Action
       </Text>
     </View>
   </View>
   <View
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
+    pointerEvents="box-none"
+    position="bottom"
     style={
-      Object {
-        "justifyContent": "center",
-        "opacity": 1,
-        "paddingHorizontal": 12,
-      }
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
     }
-    testID="toast-action-button"
-  >
-    <Text
-      allowFontScaling={false}
-      style={
-        Array [
-          Object {
-            "color": "#001f23",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 14,
-            "letterSpacing": 0.42,
-            "lineHeight": 22,
-          },
-          undefined,
-        ]
-      }
-      themeFontSize="medium"
-      themeFontWeight="semi-bold"
-      themeIntent="body"
-      themeTypeface="neutral"
-    >
-      Action
-    </Text>
-  </View>
+  />
 </View>
 `;
 
 exports[`Toast renders correctly when intent is warning 1`] = `
 <View
-  collapsable={false}
   style={
-    Object {
-      "backgroundColor": "#ffbe71",
-      "borderRadius": 0,
-      "elevation": 4,
-      "flexDirection": "row",
-      "minHeight": 48,
-      "opacity": 0,
-      "shadowColor": "#001f23",
-      "shadowOffset": Object {
-        "height": 2,
-        "width": 0,
-      },
-      "shadowOpacity": 0.12,
-      "shadowRadius": 4,
-      "transform": Array [
-        Object {
-          "translateY": 20,
-        },
-      ],
+    {
+      "flex": 1,
     }
   }
-  themeIntent="warning"
-  themeVariant="default"
 >
   <View
-    showDivider={true}
+    collapsable={false}
     style={
-      Array [
-        Object {
-          "borderColor": "#e8e9ea",
-          "borderRightWidth": 1,
-          "flex": 1,
-          "flexDirection": "row",
-          "paddingVertical": 12,
+      {
+        "backgroundColor": "#ffbe71",
+        "borderRadius": 0,
+        "elevation": 3,
+        "flexDirection": "row",
+        "minHeight": 48,
+        "opacity": 0,
+        "shadowColor": "#001f23",
+        "shadowOffset": {
+          "height": 2,
+          "width": 0,
         },
-        undefined,
-      ]
+        "shadowOpacity": 0.12,
+        "shadowRadius": 4,
+        "transform": [
+          {
+            "translateY": 20,
+          },
+        ],
+      }
     }
+    themeIntent="warning"
+    themeVariant="default"
   >
     <View
+      showDivider={true}
       style={
-        Array [
-          Object {
-            "alignItems": "center",
-            "paddingLeft": 12,
+        [
+          {
+            "borderColor": "#e8e9ea",
+            "borderRightWidth": 1,
+            "flex": 1,
+            "flexDirection": "row",
+            "paddingVertical": 12,
           },
           undefined,
         ]
       }
-      testID="toast-left-icon"
     >
-      <HeroIcon
-        name="warning"
+      <View
         style={
-          Array [
-            Object {
-              "color": "#001f23",
-              "fontSize": 20,
+          [
+            {
+              "alignItems": "center",
+              "paddingLeft": 12,
+            },
+            undefined,
+          ]
+        }
+        testID="toast-left-icon"
+      >
+        <HeroIcon
+          name="warning"
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontSize": 20,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="text"
+          themeSize="small"
+        />
+      </View>
+      <View
+        style={
+          [
+            {
+              "flex": 1,
+              "paddingHorizontal": 12,
             },
             undefined,
           ]
         }
-        themeIntent="text"
-        themeSize="small"
-      />
+      >
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.48,
+                "lineHeight": 22,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="body"
+          themeTypeface="neutral"
+          themeVariant="small"
+        >
+          Toast Content
+        </Text>
+      </View>
     </View>
     <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        Array [
-          Object {
-            "flex": 1,
-            "paddingHorizontal": 12,
-          },
-          undefined,
-        ]
+        {
+          "justifyContent": "center",
+          "opacity": 1,
+          "paddingHorizontal": 12,
+        }
       }
+      testID="toast-action-button"
     >
       <Text
         allowFontScaling={false}
         style={
-          Array [
-            Object {
+          [
+            {
               "color": "#001f23",
-              "fontFamily": "BeVietnamPro-Regular",
+              "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 14,
-              "letterSpacing": 0.42,
+              "letterSpacing": 0.24,
               "lineHeight": 22,
             },
             undefined,
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="regular"
         themeIntent="body"
         themeTypeface="neutral"
+        themeVariant="small-bold"
       >
-        Toast Content
+        Action
       </Text>
     </View>
   </View>
   <View
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
+    pointerEvents="box-none"
+    position="bottom"
     style={
-      Object {
-        "justifyContent": "center",
-        "opacity": 1,
-        "paddingHorizontal": 12,
-      }
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
     }
-    testID="toast-action-button"
-  >
-    <Text
-      allowFontScaling={false}
-      style={
-        Array [
-          Object {
-            "color": "#001f23",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 14,
-            "letterSpacing": 0.42,
-            "lineHeight": 22,
-          },
-          undefined,
-        ]
-      }
-      themeFontSize="medium"
-      themeFontWeight="semi-bold"
-      themeIntent="body"
-      themeTypeface="neutral"
-    >
-      Action
-    </Text>
-  </View>
+  />
 </View>
 `;