@hero-design/rn 8.44.0-alpha.0 → 8.44.1

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

@@ -1,11 +1,34 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`rendering allows custom renderer 1`] = `
-[
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
   <View
     pointerEvents="auto"
   >
     <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}
@@ -38,6 +61,7 @@ exports[`rendering allows custom renderer 1`] = `
           }
         >
           <View
+            onLayout={[Function]}
             style={
               [
                 {
@@ -76,6 +100,70 @@ exports[`rendering allows custom renderer 1`] = `
               themeFocused={false}
               themeState="default"
             />
+            <View
+              onLayout={[Function]}
+            />
+            <View
+              collapsable={false}
+              pointerEvents="none"
+              style={
+                {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "left": -32,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": -10.666666666666666,
+                  "transform": [
+                    {
+                      "translateY": 0,
+                    },
+                    {
+                      "translateX": 48,
+                    },
+                    {
+                      "scale": 1,
+                    },
+                  ],
+                  "zIndex": 1,
+                }
+              }
+              themeVariant="text"
+            >
+              <Text
+                allowFontScaling={false}
+                style={
+                  [
+                    {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    [
+                      {
+                        "alignContent": "center",
+                        "alignItems": "center",
+                        "color": "#001f23",
+                        "marginTop": -2,
+                        "textAlignVertical": "center",
+                      },
+                      {
+                        "backgroundColor": "#ffffff",
+                      },
+                    ],
+                  ]
+                }
+                testID="input-label"
+                themeIntent="body"
+                themeState="default"
+                themeTypeface="neutral"
+                themeVariant="regular"
+              >
+                Choose collaborators
+              </Text>
+            </View>
             <View
               style={
                 [
@@ -90,57 +178,6 @@ exports[`rendering allows custom renderer 1`] = `
                 ]
               }
             >
-              <View
-                pointerEvents="none"
-                style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "bottom": 0,
-                      "flexDirection": "row",
-                      "left": 0,
-                      "position": "absolute",
-                      "right": 0,
-                      "top": 0,
-                      "zIndex": 9999,
-                    },
-                    undefined,
-                  ]
-                }
-                themeVariant="text"
-              >
-                <Text
-                  allowFontScaling={false}
-                  style={
-                    [
-                      {
-                        "color": "#001f23",
-                        "fontFamily": "BeVietnamPro-Regular",
-                        "fontSize": 16,
-                        "letterSpacing": 0.48,
-                        "lineHeight": 24,
-                      },
-                      [
-                        {
-                          "alignContent": "center",
-                          "alignItems": "center",
-                          "color": "#001f23",
-                          "marginTop": -2,
-                          "textAlignVertical": "center",
-                        },
-                        undefined,
-                      ],
-                    ]
-                  }
-                  testID="input-label"
-                  themeIntent="body"
-                  themeState="default"
-                  themeTypeface="neutral"
-                  themeVariant="regular"
-                >
-                  Choose collaborators
-                </Text>
-              </View>
               <TextInput
                 accessibilityState={
                   {
@@ -222,7 +259,7 @@ exports[`rendering allows custom renderer 1`] = `
         </View>
       </View>
     </View>
-  </View>,
+  </View>
   <Modal
     hardwareAccelerated={false}
     onRequestClose={[Function]}
@@ -263,6 +300,23 @@ exports[`rendering allows custom renderer 1`] = `
         }
       >
         <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}
@@ -289,7 +343,6 @@ exports[`rendering allows custom renderer 1`] = `
         />
         <RCTSafeAreaView
           collapsable={false}
-          emulateUnlessSupported={true}
           style={
             {
               "backgroundColor": "#ffffff",
@@ -376,6 +429,23 @@ exports[`rendering allows custom renderer 1`] = `
               }
             >
               <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}
@@ -478,6 +548,7 @@ exports[`rendering allows custom renderer 1`] = `
           >
             <View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -547,6 +618,7 @@ exports[`rendering allows custom renderer 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -609,6 +681,14 @@ exports[`rendering allows custom renderer 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -746,6 +826,7 @@ exports[`rendering allows custom renderer 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -756,6 +837,14 @@ exports[`rendering allows custom renderer 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -886,10 +975,12 @@ exports[`rendering allows custom renderer 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -959,6 +1050,7 @@ exports[`rendering allows custom renderer 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -1021,6 +1113,14 @@ exports[`rendering allows custom renderer 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -1158,6 +1258,7 @@ exports[`rendering allows custom renderer 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -1168,6 +1269,14 @@ exports[`rendering allows custom renderer 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -1298,6 +1407,7 @@ exports[`rendering allows custom renderer 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
@@ -1324,6 +1434,14 @@ exports[`rendering allows custom renderer 1`] = `
                     "disabled": false,
                   }
                 }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
                 accessible={true}
                 focusable={true}
                 onClick={[Function]}
@@ -1341,6 +1459,7 @@ exports[`rendering allows custom renderer 1`] = `
                       "borderRadius": 4,
                       "borderWidth": 0,
                       "flexDirection": "row",
+                      "height": 60,
                       "justifyContent": "center",
                       "padding": 12,
                     },
@@ -1386,16 +1505,59 @@ exports[`rendering allows custom renderer 1`] = `
         </RCTSafeAreaView>
       </View>
     </View>
-  </Modal>,
-]
+  </Modal>
+  <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[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
-[
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
   <View
     pointerEvents="auto"
   >
     <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}
@@ -1428,6 +1590,7 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
           }
         >
           <View
+            onLayout={[Function]}
             style={
               [
                 {
@@ -1467,24 +1630,34 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
               themeState="filled"
             />
             <View
+              onLayout={[Function]}
+            />
+            <View
+              collapsable={false}
               pointerEvents="none"
               style={
-                [
-                  {
-                    "backgroundColor": "#ffffff",
-                    "flexDirection": "row",
-                    "left": 16,
-                    "paddingHorizontal": 4,
-                    "position": "absolute",
-                    "top": -4,
-                    "zIndex": 1,
-                  },
-                  {
-                    "backgroundColor": "#ffffff",
-                  },
-                ]
+                {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "left": -32,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": -10.666666666666666,
+                  "transform": [
+                    {
+                      "translateY": 0,
+                    },
+                    {
+                      "translateX": 48,
+                    },
+                    {
+                      "scale": 1,
+                    },
+                  ],
+                  "zIndex": 1,
+                }
               }
-              testID="label-container"
+              themeVariant="text"
             >
               <Text
                 allowFontScaling={false}
@@ -1493,14 +1666,17 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
                     {
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 12,
+                      "fontSize": 16,
                       "letterSpacing": 0.48,
-                      "lineHeight": 16,
+                      "lineHeight": 24,
                     },
                     [
                       {
+                        "alignContent": "center",
+                        "alignItems": "center",
                         "color": "#001f23",
-                        "lineHeight": 12,
+                        "marginTop": -2,
+                        "textAlignVertical": "center",
                       },
                       {
                         "backgroundColor": "#ffffff",
@@ -1509,9 +1685,10 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
                   ]
                 }
                 testID="input-label"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeState="filled"
+                themeTypeface="neutral"
+                themeVariant="regular"
               >
                 Allow notifications
               </Text>
@@ -1611,22 +1788,65 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
         </View>
       </View>
     </View>
-  </View>,
+  </View>
   <Modal
     hardwareAccelerated={false}
     onRequestClose={[Function]}
     transparent={true}
     visible={false}
-  />,
-]
+  />
+  <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[`rendering renders correctly when bottom sheet is visible 1`] = `
-[
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
   <View
     pointerEvents="auto"
   >
     <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}
@@ -1659,6 +1879,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
           }
         >
           <View
+            onLayout={[Function]}
             style={
               [
                 {
@@ -1698,24 +1919,34 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
               themeState="filled"
             />
             <View
+              onLayout={[Function]}
+            />
+            <View
+              collapsable={false}
               pointerEvents="none"
               style={
-                [
-                  {
-                    "backgroundColor": "#ffffff",
-                    "flexDirection": "row",
-                    "left": 16,
-                    "paddingHorizontal": 4,
-                    "position": "absolute",
-                    "top": -4,
-                    "zIndex": 1,
-                  },
-                  {
-                    "backgroundColor": "#ffffff",
-                  },
-                ]
+                {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "left": -32,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": -10.666666666666666,
+                  "transform": [
+                    {
+                      "translateY": 0,
+                    },
+                    {
+                      "translateX": 48,
+                    },
+                    {
+                      "scale": 1,
+                    },
+                  ],
+                  "zIndex": 1,
+                }
               }
-              testID="label-container"
+              themeVariant="text"
             >
               <Text
                 allowFontScaling={false}
@@ -1724,14 +1955,17 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                     {
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 12,
+                      "fontSize": 16,
                       "letterSpacing": 0.48,
-                      "lineHeight": 16,
+                      "lineHeight": 24,
                     },
                     [
                       {
+                        "alignContent": "center",
+                        "alignItems": "center",
                         "color": "#001f23",
-                        "lineHeight": 12,
+                        "marginTop": -2,
+                        "textAlignVertical": "center",
                       },
                       {
                         "backgroundColor": "#ffffff",
@@ -1740,9 +1974,10 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                   ]
                 }
                 testID="input-label"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeState="filled"
+                themeTypeface="neutral"
+                themeVariant="regular"
               >
                 Allow notifications
               </Text>
@@ -1842,7 +2077,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
         </View>
       </View>
     </View>
-  </View>,
+  </View>
   <Modal
     hardwareAccelerated={false}
     onRequestClose={[Function]}
@@ -1883,6 +2118,23 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
         }
       >
         <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}
@@ -1909,7 +2161,6 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
         />
         <RCTSafeAreaView
           collapsable={false}
-          emulateUnlessSupported={true}
           style={
             {
               "backgroundColor": "#ffffff",
@@ -1996,6 +2247,23 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
               }
             >
               <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}
@@ -2101,10 +2369,12 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
           >
             <View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -2168,6 +2438,14 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -2313,6 +2591,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -2323,6 +2602,14 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -2468,6 +2755,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -2478,6 +2766,14 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -2595,6 +2891,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -2605,6 +2902,14 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -2722,6 +3027,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -2732,6 +3038,14 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -2849,6 +3163,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -2859,6 +3174,14 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -2977,6 +3300,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -2987,6 +3311,14 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                         "disabled": true,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -3099,6 +3431,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
@@ -3125,6 +3458,14 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                     "disabled": false,
                   }
                 }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
                 accessible={true}
                 focusable={true}
                 onClick={[Function]}
@@ -3142,6 +3483,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                       "borderRadius": 4,
                       "borderWidth": 0,
                       "flexDirection": "row",
+                      "height": 60,
                       "justifyContent": "center",
                       "padding": 12,
                     },
@@ -3187,16 +3529,59 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
         </RCTSafeAreaView>
       </View>
     </View>
-  </Modal>,
-]
+  </Modal>
+  <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[`rendering renders correctly when input is loading 1`] = `
-[
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
   <View
     pointerEvents="none"
   >
     <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}
@@ -3229,6 +3614,7 @@ exports[`rendering renders correctly when input is loading 1`] = `
           }
         >
           <View
+            onLayout={[Function]}
             style={
               [
                 {
@@ -3268,24 +3654,34 @@ exports[`rendering renders correctly when input is loading 1`] = `
               themeState="readonly"
             />
             <View
+              onLayout={[Function]}
+            />
+            <View
+              collapsable={false}
               pointerEvents="none"
               style={
-                [
-                  {
-                    "backgroundColor": "#ffffff",
-                    "flexDirection": "row",
-                    "left": 16,
-                    "paddingHorizontal": 4,
-                    "position": "absolute",
-                    "top": -4,
-                    "zIndex": 1,
-                  },
-                  {
-                    "backgroundColor": "#ffffff",
-                  },
-                ]
+                {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "left": -32,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": -10.666666666666666,
+                  "transform": [
+                    {
+                      "translateY": 0,
+                    },
+                    {
+                      "translateX": 48,
+                    },
+                    {
+                      "scale": 1,
+                    },
+                  ],
+                  "zIndex": 1,
+                }
               }
-              testID="label-container"
+              themeVariant="text"
             >
               <Text
                 allowFontScaling={false}
@@ -3294,14 +3690,17 @@ exports[`rendering renders correctly when input is loading 1`] = `
                     {
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 12,
+                      "fontSize": 16,
                       "letterSpacing": 0.48,
-                      "lineHeight": 16,
+                      "lineHeight": 24,
                     },
                     [
                       {
+                        "alignContent": "center",
+                        "alignItems": "center",
                         "color": "#808f91",
-                        "lineHeight": 12,
+                        "marginTop": -2,
+                        "textAlignVertical": "center",
                       },
                       {
                         "backgroundColor": "#ffffff",
@@ -3310,9 +3709,10 @@ exports[`rendering renders correctly when input is loading 1`] = `
                   ]
                 }
                 testID="input-label"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeState="readonly"
+                themeTypeface="neutral"
+                themeVariant="regular"
               >
                 Allow notifications
               </Text>
@@ -3425,22 +3825,65 @@ exports[`rendering renders correctly when input is loading 1`] = `
         </View>
       </View>
     </View>
-  </View>,
+  </View>
   <Modal
     hardwareAccelerated={false}
     onRequestClose={[Function]}
     transparent={true}
     visible={false}
-  />,
-]
+  />
+  <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[`rendering renders correctly when receives sections 1`] = `
-[
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
   <View
     pointerEvents="auto"
   >
     <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}
@@ -3473,6 +3916,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
           }
         >
           <View
+            onLayout={[Function]}
             style={
               [
                 {
@@ -3512,24 +3956,34 @@ exports[`rendering renders correctly when receives sections 1`] = `
               themeState="filled"
             />
             <View
+              onLayout={[Function]}
+            />
+            <View
+              collapsable={false}
               pointerEvents="none"
               style={
-                [
-                  {
-                    "backgroundColor": "#ffffff",
-                    "flexDirection": "row",
-                    "left": 16,
-                    "paddingHorizontal": 4,
-                    "position": "absolute",
-                    "top": -4,
-                    "zIndex": 1,
-                  },
-                  {
-                    "backgroundColor": "#ffffff",
-                  },
-                ]
+                {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "left": -32,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": -10.666666666666666,
+                  "transform": [
+                    {
+                      "translateY": 0,
+                    },
+                    {
+                      "translateX": 48,
+                    },
+                    {
+                      "scale": 1,
+                    },
+                  ],
+                  "zIndex": 1,
+                }
               }
-              testID="label-container"
+              themeVariant="text"
             >
               <Text
                 allowFontScaling={false}
@@ -3538,14 +3992,17 @@ exports[`rendering renders correctly when receives sections 1`] = `
                     {
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 12,
+                      "fontSize": 16,
                       "letterSpacing": 0.48,
-                      "lineHeight": 16,
+                      "lineHeight": 24,
                     },
                     [
                       {
+                        "alignContent": "center",
+                        "alignItems": "center",
                         "color": "#001f23",
-                        "lineHeight": 12,
+                        "marginTop": -2,
+                        "textAlignVertical": "center",
                       },
                       {
                         "backgroundColor": "#ffffff",
@@ -3554,9 +4011,10 @@ exports[`rendering renders correctly when receives sections 1`] = `
                   ]
                 }
                 testID="input-label"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeState="filled"
+                themeTypeface="neutral"
+                themeVariant="regular"
               >
                 Allow notifications
               </Text>
@@ -3656,7 +4114,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
         </View>
       </View>
     </View>
-  </View>,
+  </View>
   <Modal
     hardwareAccelerated={false}
     onRequestClose={[Function]}
@@ -3697,6 +4155,23 @@ exports[`rendering renders correctly when receives sections 1`] = `
         }
       >
         <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}
@@ -3723,7 +4198,6 @@ exports[`rendering renders correctly when receives sections 1`] = `
         />
         <RCTSafeAreaView
           collapsable={false}
-          emulateUnlessSupported={true}
           style={
             {
               "backgroundColor": "#ffffff",
@@ -3810,6 +4284,23 @@ exports[`rendering renders correctly when receives sections 1`] = `
               }
             >
               <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}
@@ -3904,6 +4395,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
           >
             <View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -3973,6 +4465,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -4026,6 +4519,14 @@ exports[`rendering renders correctly when receives sections 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -4127,10 +4628,12 @@ exports[`rendering renders correctly when receives sections 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -4200,6 +4703,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -4253,6 +4757,14 @@ exports[`rendering renders correctly when receives sections 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -4388,6 +4900,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -4398,6 +4911,14 @@ exports[`rendering renders correctly when receives sections 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -4527,6 +5048,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
@@ -4553,6 +5075,14 @@ exports[`rendering renders correctly when receives sections 1`] = `
                     "disabled": false,
                   }
                 }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
                 accessible={true}
                 focusable={true}
                 onClick={[Function]}
@@ -4570,6 +5100,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
                       "borderRadius": 4,
                       "borderWidth": 0,
                       "flexDirection": "row",
+                      "height": 60,
                       "justifyContent": "center",
                       "padding": 12,
                     },
@@ -4615,16 +5146,59 @@ exports[`rendering renders correctly when receives sections 1`] = `
         </RCTSafeAreaView>
       </View>
     </View>
-  </Modal>,
-]
+  </Modal>
+  <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[`rendering renders correctly when receives sections 2`] = `
-[
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
   <View
     pointerEvents="auto"
   >
     <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}
@@ -4657,6 +5231,7 @@ exports[`rendering renders correctly when receives sections 2`] = `
           }
         >
           <View
+            onLayout={[Function]}
             style={
               [
                 {
@@ -4696,24 +5271,34 @@ exports[`rendering renders correctly when receives sections 2`] = `
               themeState="filled"
             />
             <View
+              onLayout={[Function]}
+            />
+            <View
+              collapsable={false}
               pointerEvents="none"
               style={
-                [
-                  {
-                    "backgroundColor": "#ffffff",
-                    "flexDirection": "row",
-                    "left": 16,
-                    "paddingHorizontal": 4,
-                    "position": "absolute",
-                    "top": -4,
-                    "zIndex": 1,
-                  },
-                  {
-                    "backgroundColor": "#ffffff",
-                  },
-                ]
+                {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "left": -32,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": -10.666666666666666,
+                  "transform": [
+                    {
+                      "translateY": 0,
+                    },
+                    {
+                      "translateX": 48,
+                    },
+                    {
+                      "scale": 1,
+                    },
+                  ],
+                  "zIndex": 1,
+                }
               }
-              testID="label-container"
+              themeVariant="text"
             >
               <Text
                 allowFontScaling={false}
@@ -4722,14 +5307,17 @@ exports[`rendering renders correctly when receives sections 2`] = `
                     {
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 12,
+                      "fontSize": 16,
                       "letterSpacing": 0.48,
-                      "lineHeight": 16,
+                      "lineHeight": 24,
                     },
                     [
                       {
+                        "alignContent": "center",
+                        "alignItems": "center",
                         "color": "#001f23",
-                        "lineHeight": 12,
+                        "marginTop": -2,
+                        "textAlignVertical": "center",
                       },
                       {
                         "backgroundColor": "#ffffff",
@@ -4738,9 +5326,10 @@ exports[`rendering renders correctly when receives sections 2`] = `
                   ]
                 }
                 testID="input-label"
-                themeFontWeight="regular"
                 themeIntent="body"
                 themeState="filled"
+                themeTypeface="neutral"
+                themeVariant="regular"
               >
                 Allow notifications
               </Text>
@@ -4840,7 +5429,7 @@ exports[`rendering renders correctly when receives sections 2`] = `
         </View>
       </View>
     </View>
-  </View>,
+  </View>
   <Modal
     hardwareAccelerated={false}
     onRequestClose={[Function]}
@@ -4881,6 +5470,23 @@ exports[`rendering renders correctly when receives sections 2`] = `
         }
       >
         <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}
@@ -4907,7 +5513,6 @@ exports[`rendering renders correctly when receives sections 2`] = `
         />
         <RCTSafeAreaView
           collapsable={false}
-          emulateUnlessSupported={true}
           style={
             {
               "backgroundColor": "#ffffff",
@@ -4994,6 +5599,23 @@ exports[`rendering renders correctly when receives sections 2`] = `
               }
             >
               <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}
@@ -5088,6 +5710,7 @@ exports[`rendering renders correctly when receives sections 2`] = `
           >
             <View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -5157,6 +5780,7 @@ exports[`rendering renders correctly when receives sections 2`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -5210,6 +5834,14 @@ exports[`rendering renders correctly when receives sections 2`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -5339,10 +5971,12 @@ exports[`rendering renders correctly when receives sections 2`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -5412,6 +6046,7 @@ exports[`rendering renders correctly when receives sections 2`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -5465,6 +6100,14 @@ exports[`rendering renders correctly when receives sections 2`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -5572,6 +6215,7 @@ exports[`rendering renders correctly when receives sections 2`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -5582,6 +6226,14 @@ exports[`rendering renders correctly when receives sections 2`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -5683,6 +6335,7 @@ exports[`rendering renders correctly when receives sections 2`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
@@ -5709,6 +6362,14 @@ exports[`rendering renders correctly when receives sections 2`] = `
                     "disabled": false,
                   }
                 }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
                 accessible={true}
                 focusable={true}
                 onClick={[Function]}
@@ -5726,6 +6387,7 @@ exports[`rendering renders correctly when receives sections 2`] = `
                       "borderRadius": 4,
                       "borderWidth": 0,
                       "flexDirection": "row",
+                      "height": 60,
                       "justifyContent": "center",
                       "padding": 12,
                     },
@@ -5771,6 +6433,26 @@ exports[`rendering renders correctly when receives sections 2`] = `
         </RCTSafeAreaView>
       </View>
     </View>
-  </Modal>,
-]
+  </Modal>
+  <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>
 `;