@hero-design/rn 8.27.1 → 8.27.3

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

@@ -10,7 +10,7 @@ exports[`Tag renders correctly when variant is filled and intent is danger 1`] =
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
-        "paddingVertical": 2,
+        "paddingVertical": 4,
       },
       undefined,
     ]
@@ -35,6 +35,7 @@ exports[`Tag renders correctly when variant is filled and intent is danger 1`] =
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "includeFontPadding": false,
+            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -63,7 +64,7 @@ exports[`Tag renders correctly when variant is filled and intent is info 1`] = `
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
-        "paddingVertical": 2,
+        "paddingVertical": 4,
       },
       undefined,
     ]
@@ -88,6 +89,7 @@ exports[`Tag renders correctly when variant is filled and intent is info 1`] = `
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "includeFontPadding": false,
+            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -116,7 +118,7 @@ exports[`Tag renders correctly when variant is filled and intent is primary 1`]
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
-        "paddingVertical": 2,
+        "paddingVertical": 4,
       },
       undefined,
     ]
@@ -141,6 +143,7 @@ exports[`Tag renders correctly when variant is filled and intent is primary 1`]
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "includeFontPadding": false,
+            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -169,7 +172,7 @@ exports[`Tag renders correctly when variant is filled and intent is warning 1`]
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
-        "paddingVertical": 2,
+        "paddingVertical": 4,
       },
       undefined,
     ]
@@ -194,6 +197,7 @@ exports[`Tag renders correctly when variant is filled and intent is warning 1`]
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "includeFontPadding": false,
+            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -222,7 +226,7 @@ exports[`Tag renders correctly when variant is outlined and intent is danger 1`]
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
-        "paddingVertical": 2,
+        "paddingVertical": 4,
       },
       undefined,
     ]
@@ -247,6 +251,7 @@ exports[`Tag renders correctly when variant is outlined and intent is danger 1`]
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "includeFontPadding": false,
+            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -275,7 +280,7 @@ exports[`Tag renders correctly when variant is outlined and intent is info 1`] =
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
-        "paddingVertical": 2,
+        "paddingVertical": 4,
       },
       undefined,
     ]
@@ -300,6 +305,7 @@ exports[`Tag renders correctly when variant is outlined and intent is info 1`] =
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "includeFontPadding": false,
+            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -328,7 +334,7 @@ exports[`Tag renders correctly when variant is outlined and intent is primary 1`
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
-        "paddingVertical": 2,
+        "paddingVertical": 4,
       },
       undefined,
     ]
@@ -353,6 +359,7 @@ exports[`Tag renders correctly when variant is outlined and intent is primary 1`
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "includeFontPadding": false,
+            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -381,7 +388,7 @@ exports[`Tag renders correctly when variant is outlined and intent is success 1`
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
-        "paddingVertical": 2,
+        "paddingVertical": 4,
       },
       undefined,
     ]
@@ -406,6 +413,7 @@ exports[`Tag renders correctly when variant is outlined and intent is success 1`
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "includeFontPadding": false,
+            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -434,7 +442,7 @@ exports[`Tag renders correctly when variant is outlined and intent is warning 1`
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
-        "paddingVertical": 2,
+        "paddingVertical": 4,
       },
       undefined,
     ]
@@ -459,6 +467,7 @@ exports[`Tag renders correctly when variant is outlined and intent is warning 1`
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 12,
             "includeFontPadding": false,
+            "lineHeight": 16,
             "textAlign": "center",
             "textAlignVertical": "center",
           },
@@ -487,7 +496,7 @@ exports[`Tag renders correctly with custom content 1`] = `
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
-        "paddingVertical": 2,
+        "paddingVertical": 4,
       },
       undefined,
     ]

package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap

@@ -170,7 +170,7 @@ exports[`LabelContainer renders correctly 1`] = `
         "left": 16,
         "paddingHorizontal": 4,
         "position": "absolute",
-        "top": -5,
+        "top": -4,
         "zIndex": 1,
       },
       undefined,

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

@@ -62,7 +62,7 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
             "left": 16,
             "paddingHorizontal": 4,
             "position": "absolute",
-            "top": -5,
+            "top": -4,
             "zIndex": 1,
           },
           Object {
@@ -259,7 +259,7 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
               "fontFamily": "BeVietnamPro-Regular",
               "fontSize": 12,
               "letterSpacing": 0.36,
-              "lineHeight": 20,
+              "lineHeight": 16,
             },
             Array [
               Object {
@@ -352,7 +352,7 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
             "left": 16,
             "paddingHorizontal": 4,
             "position": "absolute",
-            "top": -5,
+            "top": -4,
             "zIndex": 1,
           },
           Object {
@@ -548,7 +548,7 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
               "fontFamily": "BeVietnamPro-Regular",
               "fontSize": 12,
               "letterSpacing": 0.36,
-              "lineHeight": 20,
+              "lineHeight": 16,
             },
             Array [
               Object {
@@ -641,7 +641,7 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
             "left": 16,
             "paddingHorizontal": 4,
             "position": "absolute",
-            "top": -5,
+            "top": -4,
             "zIndex": 1,
           },
           Object {
@@ -838,7 +838,7 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
               "fontFamily": "BeVietnamPro-Regular",
               "fontSize": 12,
               "letterSpacing": 0.36,
-              "lineHeight": 20,
+              "lineHeight": 16,
             },
             Array [
               Object {
@@ -932,7 +932,7 @@ exports[`TextInput disabled renders correctly 1`] = `
             "left": 16,
             "paddingHorizontal": 4,
             "position": "absolute",
-            "top": -5,
+            "top": -4,
             "zIndex": 1,
           },
           Object {
@@ -1427,7 +1427,7 @@ exports[`TextInput filled renders correctly 1`] = `
             "left": 16,
             "paddingHorizontal": 4,
             "position": "absolute",
-            "top": -5,
+            "top": -4,
             "zIndex": 1,
           },
           Object {
@@ -1541,14 +1541,14 @@ exports[`TextInput filled renders correctly 1`] = `
         Array [
           Object {
             "color": "#001f23",
-            "fontSize": 16,
+            "fontSize": 24,
           },
           undefined,
         ]
       }
       testID="input-suffix"
       themeIntent="text"
-      themeSize="xsmall"
+      themeSize="medium"
     />
   </View>
   <View
@@ -2006,14 +2006,14 @@ exports[`TextInput idle renders correctly 1`] = `
         Array [
           Object {
             "color": "#001f23",
-            "fontSize": 16,
+            "fontSize": 24,
           },
           undefined,
         ]
       }
       testID="input-suffix"
       themeIntent="text"
-      themeSize="xsmall"
+      themeSize="medium"
     />
   </View>
   <View
@@ -2418,14 +2418,14 @@ exports[`TextInput loading renders correctly 1`] = `
           Array [
             Object {
               "color": "#001f23",
-              "fontSize": 16,
+              "fontSize": 24,
             },
             undefined,
           ]
         }
         testID="input-suffix"
         themeIntent="text"
-        themeSize="xsmall"
+        themeSize="medium"
       />
     </View>
   </View>
@@ -2517,7 +2517,7 @@ exports[`TextInput max length renders correctly 1`] = `
             "left": 16,
             "paddingHorizontal": 4,
             "position": "absolute",
-            "top": -5,
+            "top": -4,
             "zIndex": 1,
           },
           Object {
@@ -2732,7 +2732,7 @@ exports[`TextInput max length renders correctly 1`] = `
               "fontFamily": "BeVietnamPro-Regular",
               "fontSize": 12,
               "letterSpacing": 0.36,
-              "lineHeight": 20,
+              "lineHeight": 16,
             },
             Array [
               Object {
@@ -2825,7 +2825,7 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
             "left": 16,
             "paddingHorizontal": 4,
             "position": "absolute",
-            "top": -5,
+            "top": -4,
             "zIndex": 1,
           },
           Object {
@@ -3349,7 +3349,7 @@ exports[`TextInput readonly renders correctly 1`] = `
             "left": 16,
             "paddingHorizontal": 4,
             "position": "absolute",
-            "top": -5,
+            "top": -4,
             "zIndex": 1,
           },
           Object {
@@ -3492,14 +3492,14 @@ exports[`TextInput readonly renders correctly 1`] = `
         Array [
           Object {
             "color": "#001f23",
-            "fontSize": 16,
+            "fontSize": 24,
           },
           undefined,
         ]
       }
       testID="input-suffix"
       themeIntent="text"
-      themeSize="xsmall"
+      themeSize="medium"
     />
   </View>
   <View
@@ -3590,7 +3590,7 @@ exports[`TextInput ref ref methods work correctly 1`] = `
             "left": 16,
             "paddingHorizontal": 4,
             "position": "absolute",
-            "top": -5,
+            "top": -4,
             "zIndex": 1,
           },
           Object {
@@ -3913,14 +3913,14 @@ exports[`TextInput required renders correctly 1`] = `
         Array [
           Object {
             "color": "#001f23",
-            "fontSize": 16,
+            "fontSize": 24,
           },
           undefined,
         ]
       }
       testID="input-suffix"
       themeIntent="text"
-      themeSize="xsmall"
+      themeSize="medium"
     />
   </View>
   <View
@@ -4011,7 +4011,7 @@ exports[`TextInput variants renders textarea variant correctly 1`] = `
             "left": 16,
             "paddingHorizontal": 4,
             "position": "absolute",
-            "top": -5,
+            "top": -4,
             "zIndex": 1,
           },
           Object {

package/src/components/TextInput/index.tsx

@@ -373,7 +373,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
               testID="input-suffix"
               icon={actualSuffix}
               spin={actualSuffix === 'loading'}
-              size="xsmall"
+              size="medium"
             />
           ) : (
             suffix

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

@@ -88,7 +88,7 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
                 "left": 16,
                 "paddingHorizontal": 4,
                 "position": "absolute",
-                "top": -5,
+                "top": -4,
                 "zIndex": 1,
               },
               Object {
@@ -325,7 +325,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
                 "left": 16,
                 "paddingHorizontal": 4,
                 "position": "absolute",
-                "top": -5,
+                "top": -4,
                 "zIndex": 1,
               },
               Object {
@@ -424,14 +424,14 @@ exports[`TimePickerAndroid renders correctly 1`] = `
             Array [
               Object {
                 "color": "#001f23",
-                "fontSize": 16,
+                "fontSize": 24,
               },
               undefined,
             ]
           }
           testID="input-suffix"
           themeIntent="text"
-          themeSize="xsmall"
+          themeSize="medium"
         />
       </View>
       <View

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

@@ -88,7 +88,7 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
                 "left": 16,
                 "paddingHorizontal": 4,
                 "position": "absolute",
-                "top": -5,
+                "top": -4,
                 "zIndex": 1,
               },
               Object {
@@ -325,7 +325,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                 "left": 16,
                 "paddingHorizontal": 4,
                 "position": "absolute",
-                "top": -5,
+                "top": -4,
                 "zIndex": 1,
               },
               Object {
@@ -424,14 +424,14 @@ exports[`TimePickerIOS renders correctly 1`] = `
             Array [
               Object {
                 "color": "#001f23",
-                "fontSize": 16,
+                "fontSize": 24,
               },
               undefined,
             ]
           }
           testID="input-suffix"
           themeIntent="text"
-          themeSize="xsmall"
+          themeSize="medium"
         />
       </View>
       <View

package/src/components/Typography/Text/__tests__/__snapshots__/StyledText.spec.tsx.snap

@@ -285,7 +285,7 @@ exports[`StyledText has small fontSize style 1`] = `
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 12,
         "letterSpacing": 0.36,
-        "lineHeight": 20,
+        "lineHeight": 16,
       },
       undefined,
     ]
@@ -400,7 +400,7 @@ exports[`StyledText has xsmall fontSize style 1`] = `
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 10,
         "letterSpacing": 0.3,
-        "lineHeight": 18,
+        "lineHeight": 14,
       },
       undefined,
     ]

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

@@ -123,7 +123,7 @@ Object {
         "default": "BeVietnamPro-SemiBold",
       },
       "lineHeights": Object {
-        "default": 20,
+        "default": 16,
       },
       "sizes": Object {
         "height": 20,
@@ -512,7 +512,6 @@ Object {
         "containerPadding": 20,
         "headerTextMarginBottom": 24,
         "headerTextMarginRight": 24,
-        "internalFABMarginBottom": 24,
         "titleMarginHorizontal": 8,
       },
     },
@@ -921,12 +920,15 @@ Object {
       "fonts": Object {
         "default": "BeVietnamPro-SemiBold",
       },
+      "lineHeights": Object {
+        "default": 16,
+      },
       "radii": Object {
         "default": 4,
       },
       "space": Object {
         "horizontalPadding": 8,
-        "verticalPadding": 2,
+        "verticalPadding": 4,
       },
     },
     "textInput": Object {
@@ -1010,7 +1012,7 @@ Object {
         "labelInsideTextInputMarginTop": -2,
         "labelLeft": 16,
         "labelPaddingBottom": 8,
-        "labelTop": -5,
+        "labelTop": -4,
         "maxLengthLabelMarginLeft": 4,
       },
     },
@@ -1129,9 +1131,9 @@ Object {
         "7xlarge": 50,
         "large": 24,
         "medium": 22,
-        "small": 20,
+        "small": 16,
         "xlarge": 26,
-        "xsmall": 18,
+        "xsmall": 14,
         "xxxlarge": 32,
         "xxxxlarge": 36,
         "xxxxxlarge": 40,
@@ -1216,9 +1218,9 @@ Object {
     "7xlarge": 50,
     "large": 24,
     "medium": 22,
-    "small": 20,
+    "small": 16,
     "xlarge": 26,
-    "xsmall": 18,
+    "xsmall": 14,
     "xxlarge": 28,
     "xxxlarge": 32,
     "xxxxlarge": 36,

package/src/theme/components/fab.ts

@@ -58,7 +58,6 @@ const getFABTheme = (theme: GlobalTheme) => {
     headerTextMarginBottom: theme.space.large,
     containerPadding: theme.space.large - theme.space.xsmall,
     titleMarginHorizontal: theme.space.small,
-    internalFABMarginBottom: theme.space.large,
   };
 
   const radii = {

package/src/theme/components/tag.ts

@@ -28,17 +28,20 @@ const getTagTheme = (theme: GlobalTheme) => {
   const fontSizes = {
     default: theme.fontSizes.small,
   };
+  const lineHeights = {
+    default: theme.lineHeights.small,
+  };
 
   const space = {
     horizontalPadding: theme.space.small,
-    verticalPadding: theme.space.xxsmall,
+    verticalPadding: theme.space.xsmall,
   };
 
   const radii = {
     default: theme.radii.base,
   };
 
-  return { borderWidths, colors, fonts, fontSizes, space, radii };
+  return { borderWidths, colors, fonts, fontSizes, space, radii, lineHeights };
 };
 
 export default getTagTheme;

package/src/theme/global/typography.ts

@@ -88,8 +88,8 @@ const getLineHeights = (fontSizes: FontSizes): LineHeights => {
     xlarge: fontSizes.xlarge + additionalSpace,
     large: fontSizes.large + additionalSpace,
     medium: fontSizes.medium + additionalSpace,
-    small: fontSizes.small + additionalSpace,
-    xsmall: fontSizes.xsmall + additionalSpace,
+    small: fontSizes.small + additionalSpace / 2,
+    xsmall: fontSizes.xsmall + additionalSpace / 2,
   };
 };
 

package/types/components/Collapse/index.d.ts

@@ -15,5 +15,5 @@ export interface CollapseProps extends ViewProps {
      */
     testID?: string;
 }
-declare const Collapse: ({ open, children, testID, style }: CollapseProps) => JSX.Element;
+declare const Collapse: ({ open, children, testID, style, onLayout, }: CollapseProps) => JSX.Element;
 export default Collapse;

package/types/components/DatePicker/DatePickerIOS.d.ts

@@ -1,3 +1,4 @@
 import type { DatePickerProps } from './types';
+export declare const getInitialDateValue: (value: Date, minDate?: Date | undefined, maxDate?: Date | undefined) => Date;
 declare const DatePickerIOS: ({ value, minDate, maxDate, label, placeholder, onChange, confirmLabel, displayFormat, disabled, required, error, helpText, style, testID, }: Omit<DatePickerProps, 'variant'>) => JSX.Element;
 export default DatePickerIOS;

package/types/components/FAB/ActionGroup/StyledActionGroup.d.ts

@@ -28,10 +28,4 @@ declare const StyledHeaderText: import("@emotion/native").StyledComponent<TextPr
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
-declare const StyledModalView: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, {}, {
-    ref?: import("react").Ref<View> | undefined;
-}>;
-export { StyledHeaderText, StyledBackdrop, StyledContainer, StyledActionGroupContainer, StyledFAB, StyledModalView, };
+export { StyledHeaderText, StyledBackdrop, StyledContainer, StyledActionGroupContainer, StyledFAB, };

package/types/theme/components/fab.d.ts

@@ -57,7 +57,6 @@ declare const getFABTheme: (theme: GlobalTheme) => {
         headerTextMarginBottom: number;
         containerPadding: number;
         titleMarginHorizontal: number;
-        internalFABMarginBottom: number;
     };
 };
 export default getFABTheme;

package/types/theme/components/tag.d.ts

@@ -31,5 +31,8 @@ declare const getTagTheme: (theme: GlobalTheme) => {
     radii: {
         default: number;
     };
+    lineHeights: {
+        default: number;
+    };
 };
 export default getTagTheme;