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

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -2,493 +2,573 @@
 
 exports[`TimePickerIOS renders correct with hide suffix 1`] = `
 <View
-  accessibilityState={
-    {
-      "disabled": false,
-    }
-  }
-  accessible={true}
-  collapsable={false}
-  focusable={true}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
   style={
     {
-      "opacity": 1,
+      "flex": 1,
     }
   }
 >
   <View
-    pointerEvents="none"
-    testID="timePickerInputIOS"
+    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={
-        [
-          {
-            "marginTop": 8,
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
+      pointerEvents="none"
+      testID="timePickerInputIOS"
     >
       <View
+        pointerEvents="auto"
         style={
           [
             {
-              "alignItems": "center",
-              "backgroundColor": "#ffffff",
-              "borderRadius": 8,
-              "flexDirection": "row",
-              "padding": 16,
+              "marginTop": 8,
+              "width": "100%",
             },
             undefined,
           ]
         }
       >
         <View
+          onLayout={[Function]}
           style={
             [
               {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              [
-                {
-                  "backgroundColor": "#ffffff",
-                },
-                undefined,
-              ],
-            ]
-          }
-          testID="text-input-border"
-          themeFocused={false}
-          themeState="filled"
-        />
-        <View
-          pointerEvents="none"
-          style={
-            [
-              {
+                "alignItems": "center",
                 "backgroundColor": "#ffffff",
+                "borderRadius": 8,
                 "flexDirection": "row",
-                "left": 16,
-                "paddingHorizontal": 4,
-                "position": "absolute",
-                "top": -4,
-                "zIndex": 1,
-              },
-              {
-                "backgroundColor": "#ffffff",
+                "padding": 16,
               },
+              undefined,
             ]
           }
-          testID="label-container"
         >
-          <Text
-            allowFontScaling={false}
+          <View
             style={
               [
                 {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 12,
-                  "letterSpacing": 0.48,
-                  "lineHeight": 16,
+                  "borderColor": "#001f23",
+                  "borderRadius": 8,
+                  "borderWidth": 1,
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
                 },
                 [
-                  {
-                    "color": "#001f23",
-                    "lineHeight": 12,
-                  },
                   {
                     "backgroundColor": "#ffffff",
                   },
+                  undefined,
                 ],
               ]
             }
-            testID="input-label"
-            themeFontWeight="regular"
-            themeIntent="body"
+            testID="text-input-border"
+            themeFocused={false}
             themeState="filled"
-          >
-            Break time
-          </Text>
-        </View>
-        <View
-          style={
-            [
+          />
+          <View
+            onLayout={[Function]}
+          />
+          <View
+            collapsable={false}
+            pointerEvents="none"
+            style={
               {
                 "alignItems": "center",
-                "alignSelf": "stretch",
                 "flexDirection": "row",
-                "flexGrow": 2,
-                "flexShrink": 1,
-              },
-              undefined,
-            ]
-          }
-        >
-          <TextInput
-            accessibilityState={
-              {
-                "disabled": false,
+                "left": -32,
+                "position": "absolute",
+                "right": 0,
+                "top": -10.666666666666666,
+                "transform": [
+                  {
+                    "translateY": 0,
+                  },
+                  {
+                    "translateX": 48,
+                  },
+                  {
+                    "scale": 1,
+                  },
+                ],
+                "zIndex": 1,
               }
             }
-            allowFontScaling={false}
-            editable={true}
-            onBlur={[Function]}
-            onChangeText={[Function]}
-            onFocus={[Function]}
-            placeholder=" "
+            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="filled"
+              themeTypeface="neutral"
+              themeVariant="regular"
+            >
+              Break time
+            </Text>
+          </View>
+          <View
             style={
               [
                 {
+                  "alignItems": "center",
                   "alignSelf": "stretch",
+                  "flexDirection": "row",
                   "flexGrow": 2,
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 16,
-                  "height": undefined,
-                  "marginHorizontal": 8,
-                  "maxHeight": 144,
-                  "paddingVertical": 0,
-                  "textAlignVertical": "center",
-                },
-                {
-                  "backgroundColor": "#ffffff",
-                  "color": "#001f23",
+                  "flexShrink": 1,
                 },
+                undefined,
               ]
             }
-            testID="text-input"
-            themeVariant="text"
-            value="03:24 AM"
-          />
+          >
+            <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="03:24 AM"
+            />
+          </View>
         </View>
-      </View>
-      <View
-        style={
-          [
-            {
-              "minHeight": 16,
-              "paddingLeft": 16,
-              "paddingTop": 2,
-            },
-            undefined,
-          ]
-        }
-      >
         <View
           style={
             [
               {
-                "flexDirection": "row",
-                "justifyContent": "space-between",
+                "minHeight": 16,
+                "paddingLeft": 16,
+                "paddingTop": 2,
               },
               undefined,
             ]
           }
         >
-          <Text
-            allowFontScaling={false}
+          <View
             style={
               [
                 {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 12,
-                  "letterSpacing": 0.48,
-                  "lineHeight": 16,
+                  "flexDirection": "row",
+                  "justifyContent": "space-between",
                 },
                 undefined,
               ]
             }
-            themeFontWeight="regular"
-            themeIntent="body"
           >
-            This is help text
-          </Text>
+            <Text
+              allowFontScaling={false}
+              style={
+                [
+                  {
+                    "color": "#001f23",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 12,
+                    "letterSpacing": 0.48,
+                    "lineHeight": 16,
+                  },
+                  undefined,
+                ]
+              }
+              themeFontWeight="regular"
+              themeIntent="body"
+            >
+              This is help text
+            </Text>
+          </View>
         </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[`TimePickerIOS renders correctly 1`] = `
 <View
-  accessibilityState={
-    {
-      "disabled": false,
-    }
-  }
-  accessible={true}
-  collapsable={false}
-  focusable={true}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
   style={
     {
-      "opacity": 1,
+      "flex": 1,
     }
   }
 >
   <View
-    pointerEvents="none"
-    testID="timePickerInputIOS"
+    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={
-        [
-          {
-            "marginTop": 8,
-            "width": "100%",
-          },
-          undefined,
-        ]
-      }
+      pointerEvents="none"
+      testID="timePickerInputIOS"
     >
       <View
+        pointerEvents="auto"
         style={
           [
             {
-              "alignItems": "center",
-              "backgroundColor": "#ffffff",
-              "borderRadius": 8,
-              "flexDirection": "row",
-              "padding": 16,
+              "marginTop": 8,
+              "width": "100%",
             },
             undefined,
           ]
         }
       >
         <View
+          onLayout={[Function]}
           style={
             [
               {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              [
-                {
-                  "backgroundColor": "#ffffff",
-                },
-                undefined,
-              ],
-            ]
-          }
-          testID="text-input-border"
-          themeFocused={false}
-          themeState="filled"
-        />
-        <View
-          pointerEvents="none"
-          style={
-            [
-              {
+                "alignItems": "center",
                 "backgroundColor": "#ffffff",
+                "borderRadius": 8,
                 "flexDirection": "row",
-                "left": 16,
-                "paddingHorizontal": 4,
-                "position": "absolute",
-                "top": -4,
-                "zIndex": 1,
-              },
-              {
-                "backgroundColor": "#ffffff",
+                "padding": 16,
               },
+              undefined,
             ]
           }
-          testID="label-container"
         >
-          <Text
-            allowFontScaling={false}
+          <View
             style={
               [
                 {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 12,
-                  "letterSpacing": 0.48,
-                  "lineHeight": 16,
+                  "borderColor": "#001f23",
+                  "borderRadius": 8,
+                  "borderWidth": 1,
+                  "bottom": 0,
+                  "left": 0,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
                 },
                 [
-                  {
-                    "color": "#001f23",
-                    "lineHeight": 12,
-                  },
                   {
                     "backgroundColor": "#ffffff",
                   },
+                  undefined,
                 ],
               ]
             }
-            testID="input-label"
-            themeFontWeight="regular"
-            themeIntent="body"
+            testID="text-input-border"
+            themeFocused={false}
             themeState="filled"
-          >
-            Break time
-          </Text>
-        </View>
-        <View
-          style={
-            [
+          />
+          <View
+            onLayout={[Function]}
+          />
+          <View
+            collapsable={false}
+            pointerEvents="none"
+            style={
               {
                 "alignItems": "center",
-                "alignSelf": "stretch",
                 "flexDirection": "row",
-                "flexGrow": 2,
-                "flexShrink": 1,
-              },
-              undefined,
-            ]
-          }
-        >
-          <TextInput
-            accessibilityState={
-              {
-                "disabled": false,
+                "left": -32,
+                "position": "absolute",
+                "right": 0,
+                "top": -10.666666666666666,
+                "transform": [
+                  {
+                    "translateY": 0,
+                  },
+                  {
+                    "translateX": 48,
+                  },
+                  {
+                    "scale": 1,
+                  },
+                ],
+                "zIndex": 1,
               }
             }
-            allowFontScaling={false}
-            editable={true}
-            onBlur={[Function]}
-            onChangeText={[Function]}
-            onFocus={[Function]}
-            placeholder=" "
+            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="filled"
+              themeTypeface="neutral"
+              themeVariant="regular"
+            >
+              Break time
+            </Text>
+          </View>
+          <View
             style={
               [
                 {
+                  "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,
                 },
+                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="03:24 AM"
+            />
+          </View>
+          <HeroIcon
+            name="clock-3"
+            style={
+              [
                 {
-                  "backgroundColor": "#ffffff",
                   "color": "#001f23",
+                  "fontSize": 24,
                 },
+                undefined,
               ]
             }
-            testID="text-input"
-            themeVariant="text"
-            value="03:24 AM"
+            testID="input-suffix"
+            themeIntent="text"
+            themeSize="medium"
           />
         </View>
-        <HeroIcon
-          name="clock-3"
-          style={
-            [
-              {
-                "color": "#001f23",
-                "fontSize": 24,
-              },
-              undefined,
-            ]
-          }
-          testID="input-suffix"
-          themeIntent="text"
-          themeSize="medium"
-        />
-      </View>
-      <View
-        style={
-          [
-            {
-              "minHeight": 16,
-              "paddingLeft": 16,
-              "paddingTop": 2,
-            },
-            undefined,
-          ]
-        }
-      >
         <View
           style={
             [
               {
-                "flexDirection": "row",
-                "justifyContent": "space-between",
+                "minHeight": 16,
+                "paddingLeft": 16,
+                "paddingTop": 2,
               },
               undefined,
             ]
           }
-        />
+        >
+          <View
+            style={
+              [
+                {
+                  "flexDirection": "row",
+                  "justifyContent": "space-between",
+                },
+                undefined,
+              ]
+            }
+          />
+        </View>
       </View>
     </View>
-  </View>
-  <RCTModalHostView
-    animationType="none"
-    hardwareAccelerated={false}
-    identifier={0}
-    onDismiss={[Function]}
-    onRequestClose={[Function]}
-    onStartShouldSetResponder={[Function]}
-    presentationStyle="overFullScreen"
-    style={
-      {
-        "position": "absolute",
-      }
-    }
-    transparent={true}
-    visible={true}
-  >
-    <View
-      collapsable={false}
+    <RCTModalHostView
+      animationType="none"
+      hardwareAccelerated={false}
+      identifier={0}
+      onDismiss={[Function]}
+      onRequestClose={[Function]}
+      onStartShouldSetResponder={[Function]}
+      presentationStyle="overFullScreen"
       style={
-        [
-          {
-            "flex": 1,
-            "left": 0,
-            "top": 0,
-          },
-          {
-            "backgroundColor": "transparent",
-          },
-        ]
+        {
+          "position": "absolute",
+        }
       }
+      transparent={true}
+      visible={true}
     >
       <View
-        pointerEvents="box-none"
+        collapsable={false}
         style={
-          {
-            "flex": 1,
-          }
+          [
+            {
+              "flex": 1,
+              "left": 0,
+              "top": 0,
+            },
+            {
+              "backgroundColor": "transparent",
+            },
+          ]
         }
       >
         <View
-          collapsable={true}
           pointerEvents="box-none"
           style={
             {
@@ -497,295 +577,367 @@ exports[`TimePickerIOS renders correctly 1`] = `
           }
         >
           <View
+            collapsable={true}
             pointerEvents="box-none"
             style={
-              [
-                {
-                  "bottom": 0,
-                  "flexDirection": "column-reverse",
-                  "left": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                },
-                undefined,
-              ]
+              {
+                "flex": 1,
+              }
             }
           >
             <View
-              onLayout={[Function]}
+              pointerEvents="box-none"
               style={
                 [
-                  [
-                    {
-                      "flex": 1,
-                      "flexDirection": "column-reverse",
-                    },
-                    undefined,
-                  ],
                   {
-                    "paddingBottom": 0,
-                  },
-                ]
-              }
-            >
-              <View
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  {
-                    "backgroundColor": "#000000",
                     "bottom": 0,
+                    "flexDirection": "column-reverse",
                     "left": 0,
-                    "opacity": 0.48,
                     "position": "absolute",
                     "right": 0,
                     "top": 0,
-                  }
-                }
-              />
-              <RCTSafeAreaView
-                collapsable={false}
-                emulateUnlessSupported={true}
+                  },
+                  undefined,
+                ]
+              }
+            >
+              <View
+                onLayout={[Function]}
                 style={
-                  {
-                    "backgroundColor": "#ffffff",
-                    "borderTopLeftRadius": 16,
-                    "borderTopRightRadius": 16,
-                    "elevation": 10,
-                    "maxHeight": "94%",
-                    "shadowColor": "#001f23",
-                    "shadowOffset": {
-                      "height": 3,
-                      "width": 0,
-                    },
-                    "shadowOpacity": 0.4,
-                    "shadowRadius": 16,
-                    "transform": [
-                      {
-                        "scaleY": 1,
-                      },
+                  [
+                    [
                       {
-                        "translateY": 0,
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
                       },
+                      undefined,
                     ],
-                    "width": "100%",
-                  }
+                    {
+                      "paddingBottom": 0,
+                    },
+                  ]
                 }
               >
                 <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}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
                   style={
-                    [
-                      {
-                        "flexDirection": "row",
-                        "paddingHorizontal": 16,
-                        "paddingVertical": 8,
+                    {
+                      "backgroundColor": "#000000",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0.48,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
+                  }
+                />
+                <RCTSafeAreaView
+                  collapsable={false}
+                  style={
+                    {
+                      "backgroundColor": "#ffffff",
+                      "borderTopLeftRadius": 16,
+                      "borderTopRightRadius": 16,
+                      "elevation": 10,
+                      "maxHeight": "94%",
+                      "shadowColor": "#001f23",
+                      "shadowOffset": {
+                        "height": 3,
+                        "width": 0,
                       },
-                      undefined,
-                    ]
+                      "shadowOpacity": 0.4,
+                      "shadowRadius": 16,
+                      "transform": [
+                        {
+                          "scaleY": 1,
+                        },
+                        {
+                          "translateY": 0,
+                        },
+                      ],
+                      "width": "100%",
+                    }
                   }
                 >
                   <View
                     style={
                       [
                         {
-                          "flex": 1,
-                          "justifyContent": "center",
+                          "flexDirection": "row",
+                          "paddingHorizontal": 16,
+                          "paddingVertical": 8,
                         },
                         undefined,
                       ]
                     }
                   >
-                    <Text
-                      allowFontScaling={false}
+                    <View
                       style={
                         [
                           {
-                            "color": "#001f23",
-                            "fontFamily": "BeVietnamPro-SemiBold",
-                            "fontSize": 16,
-                            "letterSpacing": 0.24,
-                            "lineHeight": 24,
+                            "flex": 1,
+                            "justifyContent": "center",
                           },
                           undefined,
                         ]
                       }
-                      themeIntent="body"
-                      themeTypeface="neutral"
-                      themeVariant="regular-bold"
-                    >
-                      Break time
-                    </Text>
-                  </View>
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "height": 48,
-                          "justifyContent": "center",
-                          "marginLeft": 12,
-                          "width": 48,
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <View
-                      accessible={true}
-                      collapsable={false}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
-                      style={
-                        {
-                          "opacity": 1,
-                        }
-                      }
-                      testID="bottom-sheet-close-icon"
                     >
-                      <HeroIcon
-                        name="cancel"
+                      <Text
+                        allowFontScaling={false}
                         style={
                           [
                             {
                               "color": "#001f23",
+                              "fontFamily": "BeVietnamPro-SemiBold",
                               "fontSize": 16,
+                              "letterSpacing": 0.24,
+                              "lineHeight": 24,
                             },
                             undefined,
                           ]
                         }
-                        themeIntent="text"
-                        themeSize="xsmall"
-                      />
+                        themeIntent="body"
+                        themeTypeface="neutral"
+                        themeVariant="regular-bold"
+                      >
+                        Break time
+                      </Text>
                     </View>
-                  </View>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "height": 176,
-                      },
-                      undefined,
-                    ]
-                  }
-                >
-                  <Picker
-                    display="spinner"
-                    mode="time"
-                    onChange={[Function]}
-                    style={
-                      {
-                        "flex": 1,
+                    <View
+                      style={
+                        [
+                          {
+                            "alignItems": "center",
+                            "height": 48,
+                            "justifyContent": "center",
+                            "marginLeft": 12,
+                            "width": 48,
+                          },
+                          undefined,
+                        ]
                       }
-                    }
-                    testID="timePickerIOS"
-                    textColor="#001f23"
-                    value={1995-12-17T03:24:00.000Z}
-                  />
-                </View>
-                <View>
+                    >
+                      <View
+                        accessibilityState={
+                          {
+                            "busy": undefined,
+                            "checked": undefined,
+                            "disabled": undefined,
+                            "expanded": undefined,
+                            "selected": undefined,
+                          }
+                        }
+                        accessibilityValue={
+                          {
+                            "max": undefined,
+                            "min": undefined,
+                            "now": undefined,
+                            "text": undefined,
+                          }
+                        }
+                        accessible={true}
+                        collapsable={false}
+                        focusable={true}
+                        onClick={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
+                        style={
+                          {
+                            "opacity": 1,
+                          }
+                        }
+                        testID="bottom-sheet-close-icon"
+                      >
+                        <HeroIcon
+                          name="cancel"
+                          style={
+                            [
+                              {
+                                "color": "#001f23",
+                                "fontSize": 16,
+                              },
+                              undefined,
+                            ]
+                          }
+                          themeIntent="text"
+                          themeSize="xsmall"
+                        />
+                      </View>
+                    </View>
+                  </View>
                   <View
                     style={
                       [
                         {
-                          "alignItems": "center",
-                          "flexDirection": "row",
-                          "justifyContent": "flex-end",
-                          "paddingHorizontal": 12,
-                          "paddingVertical": 2,
+                          "height": 176,
                         },
                         undefined,
                       ]
                     }
                   >
-                    <View
-                      accessibilityState={
+                    <Picker
+                      display="spinner"
+                      mode="time"
+                      onChange={[Function]}
+                      style={
                         {
-                          "disabled": false,
+                          "flex": 1,
                         }
                       }
-                      accessible={true}
-                      focusable={true}
-                      onClick={[Function]}
-                      onResponderGrant={[Function]}
-                      onResponderMove={[Function]}
-                      onResponderRelease={[Function]}
-                      onResponderTerminate={[Function]}
-                      onResponderTerminationRequest={[Function]}
-                      onStartShouldSetResponder={[Function]}
+                      testID="timePickerIOS"
+                      textColor="#001f23"
+                      value={1995-12-17T03:24:00.000Z}
+                    />
+                  </View>
+                  <View>
+                    <View
                       style={
                         [
                           {
                             "alignItems": "center",
-                            "backgroundColor": "transparent",
-                            "borderRadius": 4,
-                            "borderWidth": 0,
                             "flexDirection": "row",
-                            "justifyContent": "center",
-                            "padding": 12,
+                            "justifyContent": "flex-end",
+                            "paddingHorizontal": 12,
+                            "paddingVertical": 2,
                           },
                           undefined,
                         ]
                       }
                     >
-                      <Text
-                        allowFontScaling={false}
-                        disabled={false}
-                        ellipsizeMode="tail"
-                        numberOfLines={1}
+                      <View
+                        accessibilityState={
+                          {
+                            "disabled": false,
+                          }
+                        }
+                        accessibilityValue={
+                          {
+                            "max": undefined,
+                            "min": undefined,
+                            "now": undefined,
+                            "text": undefined,
+                          }
+                        }
+                        accessible={true}
+                        focusable={true}
+                        onClick={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           [
                             {
-                              "color": "#001f23",
-                              "fontFamily": "BeVietnamPro-SemiBold",
-                              "fontSize": 16,
-                              "letterSpacing": 0.24,
-                              "lineHeight": 24,
+                              "alignItems": "center",
+                              "backgroundColor": "transparent",
+                              "borderRadius": 4,
+                              "borderWidth": 0,
+                              "flexDirection": "row",
+                              "height": 60,
+                              "justifyContent": "center",
+                              "padding": 12,
                             },
-                            [
-                              {
-                                "color": "#401960",
-                                "flexShrink": 1,
-                                "lineHeight": 22,
-                                "textAlign": "center",
-                              },
-                              undefined,
-                            ],
+                            undefined,
                           ]
                         }
-                        themeButtonVariant="text-primary"
-                        themeIntent="body"
-                        themeTypeface="neutral"
-                        themeVariant="regular-bold"
                       >
-                        Confirm
-                      </Text>
+                        <Text
+                          allowFontScaling={false}
+                          disabled={false}
+                          ellipsizeMode="tail"
+                          numberOfLines={1}
+                          style={
+                            [
+                              {
+                                "color": "#001f23",
+                                "fontFamily": "BeVietnamPro-SemiBold",
+                                "fontSize": 16,
+                                "letterSpacing": 0.24,
+                                "lineHeight": 24,
+                              },
+                              [
+                                {
+                                  "color": "#401960",
+                                  "flexShrink": 1,
+                                  "lineHeight": 22,
+                                  "textAlign": "center",
+                                },
+                                undefined,
+                              ],
+                            ]
+                          }
+                          themeButtonVariant="text-primary"
+                          themeIntent="body"
+                          themeTypeface="neutral"
+                          themeVariant="regular-bold"
+                        >
+                          Confirm
+                        </Text>
+                      </View>
                     </View>
                   </View>
-                </View>
-              </RCTSafeAreaView>
+                </RCTSafeAreaView>
+              </View>
             </View>
           </View>
         </View>
       </View>
-    </View>
-  </RCTModalHostView>
+    </RCTModalHostView>
+  </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>
 `;