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

package/src/components/Select/SingleSelect/__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={
                   {
@@ -221,7 +258,7 @@ exports[`rendering allows custom renderer 1`] = `
         </View>
       </View>
     </View>
-  </View>,
+  </View>
   <Modal
     hardwareAccelerated={false}
     onRequestClose={[Function]}
@@ -262,6 +299,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}
@@ -288,7 +342,6 @@ exports[`rendering allows custom renderer 1`] = `
         />
         <RCTSafeAreaView
           collapsable={false}
-          emulateUnlessSupported={true}
           style={
             {
               "backgroundColor": "#ffffff",
@@ -375,6 +428,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}
@@ -482,6 +552,7 @@ exports[`rendering allows custom renderer 1`] = `
           >
             <View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -551,6 +622,7 @@ exports[`rendering allows custom renderer 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -613,6 +685,14 @@ exports[`rendering allows custom renderer 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -750,6 +830,7 @@ exports[`rendering allows custom renderer 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -760,6 +841,14 @@ exports[`rendering allows custom renderer 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -890,10 +979,12 @@ exports[`rendering allows custom renderer 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -963,6 +1054,7 @@ exports[`rendering allows custom renderer 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -1025,6 +1117,14 @@ exports[`rendering allows custom renderer 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -1162,6 +1262,7 @@ exports[`rendering allows custom renderer 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -1172,6 +1273,14 @@ exports[`rendering allows custom renderer 1`] = `
                         "disabled": false,
                       }
                     }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
                     accessible={true}
                     focusable={true}
                     onClick={[Function]}
@@ -1302,6 +1411,7 @@ exports[`rendering allows custom renderer 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
@@ -1310,16 +1420,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}
@@ -1352,6 +1505,7 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
           }
         >
           <View
+            onLayout={[Function]}
             style={
               [
                 {
@@ -1391,24 +1545,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}
@@ -1417,14 +1581,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",
@@ -1433,9 +1600,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>
@@ -1535,22 +1703,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}
@@ -1583,6 +1794,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
           }
         >
           <View
+            onLayout={[Function]}
             style={
               [
                 {
@@ -1622,24 +1834,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}
@@ -1648,14 +1870,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",
@@ -1664,9 +1889,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>
@@ -1766,7 +1992,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
         </View>
       </View>
     </View>
-  </View>,
+  </View>
   <Modal
     hardwareAccelerated={false}
     onRequestClose={[Function]}
@@ -1807,6 +2033,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}
@@ -1833,7 +2076,6 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
         />
         <RCTSafeAreaView
           collapsable={false}
-          emulateUnlessSupported={true}
           style={
             {
               "backgroundColor": "#ffffff",
@@ -1920,6 +2162,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}
@@ -2030,10 +2289,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}
               >
@@ -2097,6 +2358,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]}
@@ -2214,6 +2483,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -2224,6 +2494,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]}
@@ -2341,6 +2619,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -2351,6 +2630,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]}
@@ -2850,6 +3164,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -2860,6 +3175,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]}
@@ -2972,6 +3295,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
@@ -2980,16 +3304,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}
@@ -3022,6 +3389,7 @@ exports[`rendering renders correctly when input is loading 1`] = `
           }
         >
           <View
+            onLayout={[Function]}
             style={
               [
                 {
@@ -3061,24 +3429,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}
@@ -3087,14 +3465,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",
@@ -3103,9 +3484,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>
@@ -3218,22 +3600,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}
@@ -3266,6 +3691,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
           }
         >
           <View
+            onLayout={[Function]}
             style={
               [
                 {
@@ -3305,24 +3731,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}
@@ -3331,14 +3767,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",
@@ -3347,9 +3786,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>
@@ -3449,7 +3889,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
         </View>
       </View>
     </View>
-  </View>,
+  </View>
   <Modal
     hardwareAccelerated={false}
     onRequestClose={[Function]}
@@ -3490,6 +3930,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}
@@ -3516,7 +3973,6 @@ exports[`rendering renders correctly when receives sections 1`] = `
         />
         <RCTSafeAreaView
           collapsable={false}
-          emulateUnlessSupported={true}
           style={
             {
               "backgroundColor": "#ffffff",
@@ -3603,6 +4059,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}
@@ -3702,6 +4175,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
           >
             <View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -3771,6 +4245,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -3824,6 +4299,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]}
@@ -3925,10 +4408,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}
               >
@@ -3998,6 +4483,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -4051,6 +4537,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]}
@@ -4158,6 +4652,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               >
@@ -4168,6 +4663,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]}
@@ -4269,6 +4772,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
                 </View>
               </View>
               <View
+                onFocusCapture={[Function]}
                 onLayout={[Function]}
                 style={null}
               />
@@ -4277,6 +4781,26 @@ 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>
 `;