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

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

@@ -2,687 +2,855 @@
 
 exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
 <View
-  accessibilityState={
-    Object {
-      "disabled": false,
-    }
-  }
-  accessible={true}
-  collapsable={false}
-  focusable={true}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "opacity": 1,
+    {
+      "flex": 1,
     }
   }
 >
   <View
-    pointerEvents="none"
-    testID="datePickerInputAndroid"
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "opacity": 1,
+      }
+    }
   >
     <View
-      pointerEvents="auto"
-      style={
-        Array [
-          Object {
-            "marginTop": 8,
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
+      pointerEvents="none"
+      testID="datePickerInputAndroid"
     >
       <View
+        pointerEvents="auto"
         style={
-          Array [
-            Object {
-              "alignItems": "center",
-              "backgroundColor": "#ffffff",
-              "borderRadius": 8,
-              "flexDirection": "row",
-              "padding": 16,
+          [
+            {
+              "marginTop": 8,
+              "width": "100%",
             },
             undefined,
           ]
         }
       >
         <View
+          onLayout={[Function]}
           style={
-            Array [
-              Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              Array [
-                Object {
-                  "backgroundColor": "#ffffff",
-                },
-                undefined,
-              ],
-            ]
-          }
-          testID="text-input-border"
-          themeFocused={false}
-          themeState="filled"
-        />
-        <View
-          pointerEvents="none"
-          style={
-            Array [
-              Object {
+            [
+              {
+                "alignItems": "center",
                 "backgroundColor": "#ffffff",
+                "borderRadius": 8,
                 "flexDirection": "row",
-                "left": 16,
-                "paddingHorizontal": 4,
-                "position": "absolute",
-                "top": -4,
-                "zIndex": 1,
-              },
-              Object {
-                "backgroundColor": "#ffffff",
+                "padding": 16,
               },
+              undefined,
             ]
           }
-          testID="label-container"
         >
-          <Text
-            allowFontScaling={false}
+          <View
             style={
-              Array [
-                Object {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+              [
+                {
+                  "borderColor": "#001f23",
+                  "borderRadius": 8,
+                  "borderWidth": 1,
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
                 },
-                Array [
-                  Object {
-                    "color": "#001f23",
-                    "fontSize": 12,
-                    "lineHeight": 12,
-                  },
-                  Object {
+                [
+                  {
                     "backgroundColor": "#ffffff",
                   },
+                  undefined,
                 ],
               ]
             }
-            testID="input-label"
-            themeFontSize="medium"
-            themeFontWeight="regular"
-            themeIntent="body"
+            testID="text-input-border"
+            themeFocused={false}
             themeState="filled"
-            themeTypeface="neutral"
-          >
-            Start date
-          </Text>
-        </View>
-        <View
-          style={
-            Array [
-              Object {
+          />
+          <View
+            onLayout={[Function]}
+          />
+          <View
+            collapsable={false}
+            pointerEvents="none"
+            style={
+              {
                 "alignItems": "center",
-                "alignSelf": "stretch",
                 "flexDirection": "row",
-                "flexGrow": 2,
-                "flexShrink": 1,
-              },
-              undefined,
-            ]
-          }
-        >
-          <TextInput
-            accessibilityState={
-              Object {
-                "disabled": false,
+                "justifyContent": "center",
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": -10.666666666666666,
+                "transform": [
+                  {
+                    "translateY": 0,
+                  },
+                  {
+                    "translateX": 24,
+                  },
+                  {
+                    "scale": 1,
+                  },
+                ],
+                "zIndex": 1,
               }
             }
-            allowFontScaling={false}
-            editable={true}
-            onBlur={[Function]}
-            onChangeText={[Function]}
-            onFocus={[Function]}
-            placeholder=" "
+            themeVariant="text"
+          >
+            <Text
+              allowFontScaling={false}
+              onLayout={[Function]}
+              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="filled"
+              themeTypeface="neutral"
+              themeVariant="regular"
+            >
+              Start date
+            </Text>
+          </View>
+          <View
             style={
-              Array [
-                Object {
+              [
+                {
+                  "alignItems": "center",
                   "alignSelf": "stretch",
+                  "flexDirection": "row",
                   "flexGrow": 2,
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 16,
-                  "height": undefined,
-                  "marginHorizontal": 8,
-                  "maxHeight": 144,
-                  "paddingVertical": 0,
-                  "textAlignVertical": "center",
+                  "flexShrink": 1,
                 },
-                Object {
-                  "backgroundColor": "#ffffff",
+                undefined,
+              ]
+            }
+          >
+            <TextInput
+              accessibilityState={
+                {
+                  "disabled": false,
+                }
+              }
+              allowFontScaling={false}
+              editable={true}
+              onBlur={[Function]}
+              onChangeText={[Function]}
+              onFocus={[Function]}
+              placeholder=" "
+              style={
+                [
+                  {
+                    "alignSelf": "stretch",
+                    "flexGrow": 2,
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "height": undefined,
+                    "marginHorizontal": 8,
+                    "maxHeight": 144,
+                    "paddingVertical": 0,
+                    "textAlignVertical": "center",
+                  },
+                  {
+                    "backgroundColor": "#ffffff",
+                    "color": "#001f23",
+                  },
+                ]
+              }
+              testID="text-input"
+              themeVariant="text"
+              value="17/12/1995"
+            />
+          </View>
+          <HeroIcon
+            name="calendar-dates-outlined"
+            style={
+              [
+                {
                   "color": "#001f23",
+                  "fontSize": 24,
                 },
+                undefined,
               ]
             }
-            testID="text-input"
-            themeVariant="text"
-            value="17/12/1995"
+            testID="input-suffix"
+            themeIntent="text"
+            themeSize="medium"
           />
         </View>
-        <HeroIcon
-          name="calendar-dates-outlined"
-          style={
-            Array [
-              Object {
-                "color": "#001f23",
-                "fontSize": 24,
-              },
-              undefined,
-            ]
-          }
-          testID="input-suffix"
-          themeIntent="text"
-          themeSize="medium"
-        />
-      </View>
-      <View
-        style={
-          Array [
-            Object {
-              "minHeight": 16,
-              "paddingLeft": 16,
-            },
-            undefined,
-          ]
-        }
-      >
         <View
           style={
-            Array [
-              Object {
-                "flexDirection": "row",
-                "justifyContent": "space-between",
+            [
+              {
+                "minHeight": 16,
+                "paddingHorizontal": 16,
+                "paddingTop": 2,
               },
               undefined,
             ]
           }
-        />
+        >
+          <View
+            style={
+              [
+                {
+                  "alignItems": "flex-start",
+                  "flexDirection": "row",
+                  "justifyContent": "space-between",
+                },
+                undefined,
+              ]
+            }
+          />
+        </View>
       </View>
     </View>
   </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
 </View>
 `;
 
 exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
 <View
-  accessibilityState={
-    Object {
-      "disabled": false,
-    }
-  }
-  accessible={true}
-  collapsable={false}
-  focusable={true}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "opacity": 1,
+    {
+      "flex": 1,
     }
   }
 >
   <View
-    pointerEvents="none"
-    testID="datePickerInputIOS"
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "opacity": 1,
+      }
+    }
   >
     <View
-      pointerEvents="auto"
-      style={
-        Array [
-          Object {
-            "marginTop": 8,
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
+      pointerEvents="none"
+      testID="datePickerInputIOS"
     >
       <View
+        pointerEvents="auto"
         style={
-          Array [
-            Object {
-              "alignItems": "center",
-              "backgroundColor": "#ffffff",
-              "borderRadius": 8,
-              "flexDirection": "row",
-              "padding": 16,
+          [
+            {
+              "marginTop": 8,
+              "width": "100%",
             },
             undefined,
           ]
         }
       >
         <View
+          onLayout={[Function]}
           style={
-            Array [
-              Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              Array [
-                Object {
-                  "backgroundColor": "#ffffff",
-                },
-                undefined,
-              ],
-            ]
-          }
-          testID="text-input-border"
-          themeFocused={false}
-          themeState="filled"
-        />
-        <View
-          pointerEvents="none"
-          style={
-            Array [
-              Object {
+            [
+              {
+                "alignItems": "center",
                 "backgroundColor": "#ffffff",
+                "borderRadius": 8,
                 "flexDirection": "row",
-                "left": 16,
-                "paddingHorizontal": 4,
-                "position": "absolute",
-                "top": -4,
-                "zIndex": 1,
-              },
-              Object {
-                "backgroundColor": "#ffffff",
+                "padding": 16,
               },
+              undefined,
             ]
           }
-          testID="label-container"
         >
-          <Text
-            allowFontScaling={false}
+          <View
             style={
-              Array [
-                Object {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+              [
+                {
+                  "borderColor": "#001f23",
+                  "borderRadius": 8,
+                  "borderWidth": 1,
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
                 },
-                Array [
-                  Object {
-                    "color": "#001f23",
-                    "fontSize": 12,
-                    "lineHeight": 12,
-                  },
-                  Object {
+                [
+                  {
                     "backgroundColor": "#ffffff",
                   },
+                  undefined,
                 ],
               ]
             }
-            testID="input-label"
-            themeFontSize="medium"
-            themeFontWeight="regular"
-            themeIntent="body"
+            testID="text-input-border"
+            themeFocused={false}
             themeState="filled"
-            themeTypeface="neutral"
-          >
-            Start date
-          </Text>
-        </View>
-        <View
-          style={
-            Array [
-              Object {
+          />
+          <View
+            onLayout={[Function]}
+          />
+          <View
+            collapsable={false}
+            pointerEvents="none"
+            style={
+              {
                 "alignItems": "center",
-                "alignSelf": "stretch",
                 "flexDirection": "row",
-                "flexGrow": 2,
-                "flexShrink": 1,
-              },
-              undefined,
-            ]
-          }
-        >
-          <TextInput
-            accessibilityState={
-              Object {
-                "disabled": false,
+                "justifyContent": "center",
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": -10.666666666666666,
+                "transform": [
+                  {
+                    "translateY": 0,
+                  },
+                  {
+                    "translateX": 24,
+                  },
+                  {
+                    "scale": 1,
+                  },
+                ],
+                "zIndex": 1,
               }
             }
-            allowFontScaling={false}
-            editable={true}
-            onBlur={[Function]}
-            onChangeText={[Function]}
-            onFocus={[Function]}
-            placeholder=" "
+            themeVariant="text"
+          >
+            <Text
+              allowFontScaling={false}
+              onLayout={[Function]}
+              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="filled"
+              themeTypeface="neutral"
+              themeVariant="regular"
+            >
+              Start date
+            </Text>
+          </View>
+          <View
             style={
-              Array [
-                Object {
+              [
+                {
+                  "alignItems": "center",
                   "alignSelf": "stretch",
+                  "flexDirection": "row",
                   "flexGrow": 2,
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 16,
-                  "height": undefined,
-                  "marginHorizontal": 8,
-                  "maxHeight": 144,
-                  "paddingVertical": 0,
-                  "textAlignVertical": "center",
+                  "flexShrink": 1,
                 },
-                Object {
-                  "backgroundColor": "#ffffff",
+                undefined,
+              ]
+            }
+          >
+            <TextInput
+              accessibilityState={
+                {
+                  "disabled": false,
+                }
+              }
+              allowFontScaling={false}
+              editable={true}
+              onBlur={[Function]}
+              onChangeText={[Function]}
+              onFocus={[Function]}
+              placeholder=" "
+              style={
+                [
+                  {
+                    "alignSelf": "stretch",
+                    "flexGrow": 2,
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "height": undefined,
+                    "marginHorizontal": 8,
+                    "maxHeight": 144,
+                    "paddingVertical": 0,
+                    "textAlignVertical": "center",
+                  },
+                  {
+                    "backgroundColor": "#ffffff",
+                    "color": "#001f23",
+                  },
+                ]
+              }
+              testID="text-input"
+              themeVariant="text"
+              value="17/12/1995"
+            />
+          </View>
+          <HeroIcon
+            name="calendar-dates-outlined"
+            style={
+              [
+                {
                   "color": "#001f23",
+                  "fontSize": 24,
                 },
+                undefined,
               ]
             }
-            testID="text-input"
-            themeVariant="text"
-            value="17/12/1995"
+            testID="input-suffix"
+            themeIntent="text"
+            themeSize="medium"
           />
         </View>
-        <HeroIcon
-          name="calendar-dates-outlined"
-          style={
-            Array [
-              Object {
-                "color": "#001f23",
-                "fontSize": 24,
-              },
-              undefined,
-            ]
-          }
-          testID="input-suffix"
-          themeIntent="text"
-          themeSize="medium"
-        />
-      </View>
-      <View
-        style={
-          Array [
-            Object {
-              "minHeight": 16,
-              "paddingLeft": 16,
-            },
-            undefined,
-          ]
-        }
-      >
         <View
           style={
-            Array [
-              Object {
-                "flexDirection": "row",
-                "justifyContent": "space-between",
+            [
+              {
+                "minHeight": 16,
+                "paddingHorizontal": 16,
+                "paddingTop": 2,
               },
               undefined,
             ]
           }
-        />
+        >
+          <View
+            style={
+              [
+                {
+                  "alignItems": "flex-start",
+                  "flexDirection": "row",
+                  "justifyContent": "space-between",
+                },
+                undefined,
+              ]
+            }
+          />
+        </View>
       </View>
     </View>
+    <Modal
+      hardwareAccelerated={false}
+      onRequestClose={[Function]}
+      transparent={true}
+      visible={false}
+    />
   </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[`DatePicker renders variant Calendar 1`] = `
 <View
-  accessibilityState={
-    Object {
-      "disabled": false,
-    }
-  }
-  accessible={true}
-  collapsable={false}
-  focusable={true}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "opacity": 1,
+    {
+      "flex": 1,
     }
   }
 >
   <View
-    pointerEvents="none"
-    testID="datePickerCalendar"
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "opacity": 1,
+      }
+    }
   >
     <View
-      pointerEvents="auto"
-      style={
-        Array [
-          Object {
-            "marginTop": 8,
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
+      pointerEvents="none"
+      testID="datePickerCalendar"
     >
       <View
+        pointerEvents="auto"
         style={
-          Array [
-            Object {
-              "alignItems": "center",
-              "backgroundColor": "#ffffff",
-              "borderRadius": 8,
-              "flexDirection": "row",
-              "padding": 16,
+          [
+            {
+              "marginTop": 8,
+              "width": "100%",
             },
             undefined,
           ]
         }
       >
         <View
+          onLayout={[Function]}
           style={
-            Array [
-              Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              Array [
-                Object {
-                  "backgroundColor": "#ffffff",
-                },
-                undefined,
-              ],
-            ]
-          }
-          testID="text-input-border"
-          themeFocused={false}
-          themeState="filled"
-        />
-        <View
-          pointerEvents="none"
-          style={
-            Array [
-              Object {
+            [
+              {
+                "alignItems": "center",
                 "backgroundColor": "#ffffff",
+                "borderRadius": 8,
                 "flexDirection": "row",
-                "left": 16,
-                "paddingHorizontal": 4,
-                "position": "absolute",
-                "top": -4,
-                "zIndex": 1,
-              },
-              Object {
-                "backgroundColor": "#ffffff",
+                "padding": 16,
               },
+              undefined,
             ]
           }
-          testID="label-container"
         >
-          <Text
-            allowFontScaling={false}
+          <View
             style={
-              Array [
-                Object {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+              [
+                {
+                  "borderColor": "#001f23",
+                  "borderRadius": 8,
+                  "borderWidth": 1,
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
                 },
-                Array [
-                  Object {
-                    "color": "#001f23",
-                    "fontSize": 12,
-                    "lineHeight": 12,
-                  },
-                  Object {
+                [
+                  {
                     "backgroundColor": "#ffffff",
                   },
+                  undefined,
                 ],
               ]
             }
-            testID="input-label"
-            themeFontSize="medium"
-            themeFontWeight="regular"
-            themeIntent="body"
+            testID="text-input-border"
+            themeFocused={false}
             themeState="filled"
-            themeTypeface="neutral"
-          >
-            Start date
-          </Text>
-        </View>
-        <View
-          style={
-            Array [
-              Object {
+          />
+          <View
+            onLayout={[Function]}
+          />
+          <View
+            collapsable={false}
+            pointerEvents="none"
+            style={
+              {
                 "alignItems": "center",
-                "alignSelf": "stretch",
                 "flexDirection": "row",
-                "flexGrow": 2,
-                "flexShrink": 1,
-              },
-              undefined,
-            ]
-          }
-        >
-          <TextInput
-            accessibilityState={
-              Object {
-                "disabled": false,
+                "justifyContent": "center",
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": -10.666666666666666,
+                "transform": [
+                  {
+                    "translateY": 0,
+                  },
+                  {
+                    "translateX": 24,
+                  },
+                  {
+                    "scale": 1,
+                  },
+                ],
+                "zIndex": 1,
               }
             }
-            allowFontScaling={false}
-            editable={true}
-            onBlur={[Function]}
-            onChangeText={[Function]}
-            onFocus={[Function]}
-            placeholder=" "
+            themeVariant="text"
+          >
+            <Text
+              allowFontScaling={false}
+              onLayout={[Function]}
+              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="filled"
+              themeTypeface="neutral"
+              themeVariant="regular"
+            >
+              Start date
+            </Text>
+          </View>
+          <View
             style={
-              Array [
-                Object {
+              [
+                {
+                  "alignItems": "center",
                   "alignSelf": "stretch",
+                  "flexDirection": "row",
                   "flexGrow": 2,
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 16,
-                  "height": undefined,
-                  "marginHorizontal": 8,
-                  "maxHeight": 144,
-                  "paddingVertical": 0,
-                  "textAlignVertical": "center",
+                  "flexShrink": 1,
                 },
-                Object {
-                  "backgroundColor": "#ffffff",
+                undefined,
+              ]
+            }
+          >
+            <TextInput
+              accessibilityState={
+                {
+                  "disabled": false,
+                }
+              }
+              allowFontScaling={false}
+              editable={true}
+              onBlur={[Function]}
+              onChangeText={[Function]}
+              onFocus={[Function]}
+              placeholder=" "
+              style={
+                [
+                  {
+                    "alignSelf": "stretch",
+                    "flexGrow": 2,
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 16,
+                    "height": undefined,
+                    "marginHorizontal": 8,
+                    "maxHeight": 144,
+                    "paddingVertical": 0,
+                    "textAlignVertical": "center",
+                  },
+                  {
+                    "backgroundColor": "#ffffff",
+                    "color": "#001f23",
+                  },
+                ]
+              }
+              testID="text-input"
+              themeVariant="text"
+              value="17/12/1995"
+            />
+          </View>
+          <HeroIcon
+            name="calendar-dates-outlined"
+            style={
+              [
+                {
                   "color": "#001f23",
+                  "fontSize": 24,
                 },
+                undefined,
               ]
             }
-            testID="text-input"
-            themeVariant="text"
-            value="17/12/1995"
+            testID="input-suffix"
+            themeIntent="text"
+            themeSize="medium"
           />
         </View>
-        <HeroIcon
-          name="calendar-dates-outlined"
-          style={
-            Array [
-              Object {
-                "color": "#001f23",
-                "fontSize": 24,
-              },
-              undefined,
-            ]
-          }
-          testID="input-suffix"
-          themeIntent="text"
-          themeSize="medium"
-        />
-      </View>
-      <View
-        style={
-          Array [
-            Object {
-              "minHeight": 16,
-              "paddingLeft": 16,
-            },
-            undefined,
-          ]
-        }
-      >
         <View
           style={
-            Array [
-              Object {
-                "flexDirection": "row",
-                "justifyContent": "space-between",
+            [
+              {
+                "minHeight": 16,
+                "paddingHorizontal": 16,
+                "paddingTop": 2,
               },
               undefined,
             ]
           }
-        />
+        >
+          <View
+            style={
+              [
+                {
+                  "alignItems": "flex-start",
+                  "flexDirection": "row",
+                  "justifyContent": "space-between",
+                },
+                undefined,
+              ]
+            }
+          />
+        </View>
       </View>
     </View>
+    <Modal
+      hardwareAccelerated={false}
+      onRequestClose={[Function]}
+      transparent={true}
+      visible={false}
+    />
   </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>
 `;