@hero-design/rn 8.101.1 → 8.101.2-alpha.1

package/src/components/Switch/SelectorSwitch/__tests__/__snapshots__/Option.spec.tsx.snap

@@ -55,8 +55,8 @@ exports[`Option renders correctly when not selected 1`] = `
             "height": 8,
             "opacity": 1,
             "position": "absolute",
-            "right": -2,
-            "top": -2,
+            "right": -4,
+            "top": -4,
             "transform": [
               {
                 "scale": 1,
@@ -155,8 +155,8 @@ exports[`Option renders correctly when selected 1`] = `
             "height": 8,
             "opacity": 1,
             "position": "absolute",
-            "right": -2,
-            "top": -2,
+            "right": -4,
+            "top": -4,
             "transform": [
               {
                 "scale": 1,
@@ -277,8 +277,8 @@ exports[`OptionContent renders correctly when there is a badge 1`] = `
           "height": 8,
           "opacity": 1,
           "position": "absolute",
-          "right": -2,
-          "top": -2,
+          "right": -4,
+          "top": -4,
           "transform": [
             {
               "scale": 1,

package/src/components/Switch/SelectorSwitch/__tests__/__snapshots__/index.spec.tsx.snap

@@ -130,8 +130,8 @@ exports[`SelectorSwitch renders correctly 1`] = `
               "height": 8,
               "opacity": 1,
               "position": "absolute",
-              "right": -2,
-              "top": -2,
+              "right": -4,
+              "top": -4,
               "transform": [
                 {
                   "scale": 1,

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabs.spec.tsx.snap

@@ -560,8 +560,8 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                           "height": 8,
                           "opacity": 1,
                           "position": "absolute",
-                          "right": -2,
-                          "top": -2,
+                          "right": -4,
+                          "top": -4,
                           "transform": [
                             {
                               "scale": 1,
@@ -1493,8 +1493,8 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                           "height": 8,
                           "opacity": 1,
                           "position": "absolute",
-                          "right": -2,
-                          "top": -2,
+                          "right": -4,
+                          "top": -4,
                           "transform": [
                             {
                               "scale": 1,
@@ -2426,8 +2426,8 @@ exports[`useIsFocused renders correctly 1`] = `
                           "height": 8,
                           "opacity": 1,
                           "position": "absolute",
-                          "right": -2,
-                          "top": -2,
+                          "right": -4,
+                          "top": -4,
                           "transform": [
                             {
                               "scale": 1,

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabsHeader.spec.tsx.snap

@@ -453,8 +453,8 @@ exports[`ScrollableTabsHeader highlighted variant renders correctly 1`] = `
                         "height": 8,
                         "opacity": 1,
                         "position": "absolute",
-                        "right": -2,
-                        "top": -2,
+                        "right": -4,
+                        "top": -4,
                         "transform": [
                           {
                             "scale": 1,
@@ -1069,8 +1069,8 @@ exports[`ScrollableTabsHeader underlined variant renders correctly 1`] = `
                         "height": 8,
                         "opacity": 1,
                         "position": "absolute",
-                        "right": -2,
-                        "top": -2,
+                        "right": -4,
+                        "top": -4,
                         "transform": [
                           {
                             "scale": 1,

package/src/components/Tabs/__tests__/__snapshots__/TabWithBadge.spec.tsx.snap

@@ -128,8 +128,8 @@ exports[`TabWithBadge renders correctly with status badge config 1`] = `
           "height": 8,
           "opacity": 1,
           "position": "absolute",
-          "right": -2,
-          "top": -2,
+          "right": -4,
+          "top": -4,
           "transform": [
             {
               "scale": 1,

package/src/components/Tabs/__tests__/__snapshots__/index.spec.tsx.snap

@@ -340,8 +340,8 @@ exports[`Tabs renders correctly 1`] = `
                       "height": 8,
                       "opacity": 1,
                       "position": "absolute",
-                      "right": -2,
-                      "top": -2,
+                      "right": -4,
+                      "top": -4,
                       "transform": [
                         {
                           "scale": 1,
@@ -1017,8 +1017,8 @@ exports[`useIsFocused renders correctly 1`] = `
                       "height": 8,
                       "opacity": 1,
                       "position": "absolute",
-                      "right": -2,
-                      "top": -2,
+                      "right": -4,
+                      "top": -4,
                       "transform": [
                         {
                           "scale": 1,
@@ -1694,8 +1694,8 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
                       "height": 8,
                       "opacity": 1,
                       "position": "absolute",
-                      "right": -2,
-                      "top": -2,
+                      "right": -4,
+                      "top": -4,
                       "transform": [
                         {
                           "scale": 1,

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

@@ -679,253 +679,270 @@ exports[`TimePickerIOS renders correctly 1`] = `
                     }
                   }
                 />
-                <RCTSafeAreaView
-                  collapsable={false}
+                <RNCSafeAreaView
+                  edges={
+                    {
+                      "bottom": "off",
+                      "left": "additive",
+                      "right": "additive",
+                      "top": "additive",
+                    }
+                  }
                   style={
                     {
-                      "backgroundColor": "#ffffff",
-                      "borderTopLeftRadius": 16,
-                      "borderTopRightRadius": 16,
                       "maxHeight": "94%",
-                      "transform": [
-                        {
-                          "scaleY": 1,
-                        },
-                        {
-                          "translateY": 0,
-                        },
-                      ],
-                      "width": "100%",
                     }
                   }
                 >
                   <View
+                    collapsable={false}
                     style={
-                      [
-                        {
-                          "flexDirection": "row",
-                          "paddingHorizontal": 16,
-                          "paddingVertical": 8,
-                        },
-                        undefined,
-                      ]
+                      {
+                        "backgroundColor": "#ffffff",
+                        "borderTopLeftRadius": 16,
+                        "borderTopRightRadius": 16,
+                        "maxHeight": "100%",
+                        "paddingBottom": 24,
+                        "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": "flex-end",
-                            "height": 48,
-                            "justifyContent": "center",
-                            "marginLeft": 12,
-                            "width": 48,
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      <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"
+                        <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": "flex-end",
+                              "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={
-                          {
-                            "disabled": false,
-                          }
-                        }
-                        accessibilityValue={
+                      <Picker
+                        display="spinner"
+                        mode="time"
+                        onChange={[Function]}
+                        style={
                           {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
+                            "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",
-                              "height": 60,
-                              "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",
-                                  "textAlignVertical": "center",
-                                },
-                                undefined,
-                              ],
+                              undefined,
                             ]
                           }
-                          themeButtonVariant="text-primary"
-                          themeIntent="body"
-                          themeIsCompact={false}
-                          themeIsPressed={false}
-                          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",
+                                    "textAlignVertical": "center",
+                                  },
+                                  undefined,
+                                ],
+                              ]
+                            }
+                            themeButtonVariant="text-primary"
+                            themeIntent="body"
+                            themeIsCompact={false}
+                            themeIsPressed={false}
+                            themeTypeface="neutral"
+                            themeVariant="regular-bold"
+                          >
+                            Confirm
+                          </Text>
+                        </View>
                       </View>
                     </View>
                   </View>
-                </RCTSafeAreaView>
+                </RNCSafeAreaView>
               </View>
             </View>
           </View>

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -157,7 +157,7 @@ exports[`theme returns correct theme object 1`] = `
         "warning": "#ac5d00",
       },
       "fontSizes": {
-        "count": 6,
+        "count": 8,
         "icon": {
           "medium": 12,
           "small": 8,
@@ -170,7 +170,7 @@ exports[`theme returns correct theme object 1`] = `
         "small": "BeVietnamPro-SemiBold",
       },
       "lineHeights": {
-        "count": 12,
+        "count": 18,
         "medium": 16,
         "small": 10,
       },
@@ -179,8 +179,8 @@ exports[`theme returns correct theme object 1`] = `
       },
       "sizes": {
         "count": {
-          "height": 12,
-          "width": 12,
+          "height": 16,
+          "width": 16,
         },
         "medium": {
           "height": 24,
@@ -201,8 +201,8 @@ exports[`theme returns correct theme object 1`] = `
         "small": {
           "horizontalPadding": 4,
         },
-        "statusPositionRight": -2,
-        "statusPositionTop": -2,
+        "statusPositionRight": -4,
+        "statusPositionTop": -4,
       },
     },
     "bottomNavigation": {
@@ -251,6 +251,7 @@ exports[`theme returns correct theme object 1`] = `
       },
       "space": {
         "closeIconMargin": 12,
+        "contentPaddingBottom": 24,
         "floatingContentMargin": 16,
         "floatingHeaderIconPadding": 8,
         "floatingInnerPadding": 8,