@hero-design/rn 8.33.1 → 8.34.0

package/src/components/Button/__tests__/__snapshots__/StyledButton.spec.tsx.snap

@@ -412,7 +412,7 @@ exports[`StyledButtonIcon has outlined-danger style 1`] = `
       Array [
         Object {
           "color": "#de350b",
-          "fontSize": 18,
+          "fontSize": 20,
         },
         undefined,
       ],
@@ -435,7 +435,7 @@ exports[`StyledButtonIcon has outlined-primary style 1`] = `
       Array [
         Object {
           "color": "#401960",
-          "fontSize": 18,
+          "fontSize": 20,
         },
         undefined,
       ],
@@ -458,7 +458,7 @@ exports[`StyledButtonIcon has outlined-secondary style 1`] = `
       Array [
         Object {
           "color": "#795e90",
-          "fontSize": 18,
+          "fontSize": 20,
         },
         undefined,
       ],
@@ -481,7 +481,7 @@ exports[`StyledButtonIcon has text-danger style 1`] = `
       Array [
         Object {
           "color": "#de350b",
-          "fontSize": 16,
+          "fontSize": 20,
         },
         undefined,
       ],
@@ -504,7 +504,7 @@ exports[`StyledButtonIcon has text-primary style 1`] = `
       Array [
         Object {
           "color": "#401960",
-          "fontSize": 16,
+          "fontSize": 20,
         },
         undefined,
       ],
@@ -527,7 +527,7 @@ exports[`StyledButtonIcon has text-secondary style 1`] = `
       Array [
         Object {
           "color": "#795e90",
-          "fontSize": 16,
+          "fontSize": 20,
         },
         undefined,
       ],
@@ -597,27 +597,24 @@ exports[`StyledButtonText has filled-danger style 1`] = `
       Object {
         "color": "#001f23",
         "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
+        "fontSize": 42,
+        "letterSpacing": 0,
+        "lineHeight": 50,
       },
       Array [
         Object {
           "color": "#ffffff",
           "flexShrink": 1,
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 18,
           "textAlign": "center",
         },
         undefined,
       ],
     ]
   }
-  themeFontSize="medium"
-  themeFontWeight="regular"
+  themeButtonVariant="filled-danger"
   themeIntent="body"
+  themeLevel="h1"
   themeTypeface="neutral"
-  themeVariant="filled-danger"
 >
   Example
 </Text>
@@ -631,27 +628,24 @@ exports[`StyledButtonText has filled-primary style 1`] = `
       Object {
         "color": "#001f23",
         "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
+        "fontSize": 42,
+        "letterSpacing": 0,
+        "lineHeight": 50,
       },
       Array [
         Object {
           "color": "#ffffff",
           "flexShrink": 1,
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 18,
           "textAlign": "center",
         },
         undefined,
       ],
     ]
   }
-  themeFontSize="medium"
-  themeFontWeight="regular"
+  themeButtonVariant="filled-primary"
   themeIntent="body"
+  themeLevel="h1"
   themeTypeface="neutral"
-  themeVariant="filled-primary"
 >
   Example
 </Text>
@@ -665,27 +659,24 @@ exports[`StyledButtonText has filled-secondary style 1`] = `
       Object {
         "color": "#001f23",
         "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
+        "fontSize": 42,
+        "letterSpacing": 0,
+        "lineHeight": 50,
       },
       Array [
         Object {
           "color": "#ffffff",
           "flexShrink": 1,
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 18,
           "textAlign": "center",
         },
         undefined,
       ],
     ]
   }
-  themeFontSize="medium"
-  themeFontWeight="regular"
+  themeButtonVariant="filled-secondary"
   themeIntent="body"
+  themeLevel="h1"
   themeTypeface="neutral"
-  themeVariant="filled-secondary"
 >
   Example
 </Text>
@@ -699,27 +690,24 @@ exports[`StyledButtonText has outlined-danger style 1`] = `
       Object {
         "color": "#001f23",
         "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
+        "fontSize": 42,
+        "letterSpacing": 0,
+        "lineHeight": 50,
       },
       Array [
         Object {
           "color": "#de350b",
           "flexShrink": 1,
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 18,
           "textAlign": "center",
         },
         undefined,
       ],
     ]
   }
-  themeFontSize="medium"
-  themeFontWeight="regular"
+  themeButtonVariant="outlined-danger"
   themeIntent="body"
+  themeLevel="h1"
   themeTypeface="neutral"
-  themeVariant="outlined-danger"
 >
   Example
 </Text>
@@ -733,27 +721,24 @@ exports[`StyledButtonText has outlined-primary style 1`] = `
       Object {
         "color": "#001f23",
         "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
+        "fontSize": 42,
+        "letterSpacing": 0,
+        "lineHeight": 50,
       },
       Array [
         Object {
           "color": "#401960",
           "flexShrink": 1,
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 18,
           "textAlign": "center",
         },
         undefined,
       ],
     ]
   }
-  themeFontSize="medium"
-  themeFontWeight="regular"
+  themeButtonVariant="outlined-primary"
   themeIntent="body"
+  themeLevel="h1"
   themeTypeface="neutral"
-  themeVariant="outlined-primary"
 >
   Example
 </Text>
@@ -767,27 +752,24 @@ exports[`StyledButtonText has outlined-secondary style 1`] = `
       Object {
         "color": "#001f23",
         "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
+        "fontSize": 42,
+        "letterSpacing": 0,
+        "lineHeight": 50,
       },
       Array [
         Object {
           "color": "#795e90",
           "flexShrink": 1,
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 18,
           "textAlign": "center",
         },
         undefined,
       ],
     ]
   }
-  themeFontSize="medium"
-  themeFontWeight="regular"
+  themeButtonVariant="outlined-secondary"
   themeIntent="body"
+  themeLevel="h1"
   themeTypeface="neutral"
-  themeVariant="outlined-secondary"
 >
   Example
 </Text>
@@ -801,27 +783,24 @@ exports[`StyledButtonText has text-danger style 1`] = `
       Object {
         "color": "#001f23",
         "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
+        "fontSize": 42,
+        "letterSpacing": 0,
+        "lineHeight": 50,
       },
       Array [
         Object {
           "color": "#de350b",
           "flexShrink": 1,
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 16,
           "textAlign": "center",
         },
         undefined,
       ],
     ]
   }
-  themeFontSize="medium"
-  themeFontWeight="regular"
+  themeButtonVariant="text-danger"
   themeIntent="body"
+  themeLevel="h1"
   themeTypeface="neutral"
-  themeVariant="text-danger"
 >
   Example
 </Text>
@@ -835,27 +814,24 @@ exports[`StyledButtonText has text-primary style 1`] = `
       Object {
         "color": "#001f23",
         "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
+        "fontSize": 42,
+        "letterSpacing": 0,
+        "lineHeight": 50,
       },
       Array [
         Object {
           "color": "#401960",
           "flexShrink": 1,
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 16,
           "textAlign": "center",
         },
         undefined,
       ],
     ]
   }
-  themeFontSize="medium"
-  themeFontWeight="regular"
+  themeButtonVariant="text-primary"
   themeIntent="body"
+  themeLevel="h1"
   themeTypeface="neutral"
-  themeVariant="text-primary"
 >
   Example
 </Text>
@@ -869,27 +845,24 @@ exports[`StyledButtonText has text-secondary style 1`] = `
       Object {
         "color": "#001f23",
         "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
+        "fontSize": 42,
+        "letterSpacing": 0,
+        "lineHeight": 50,
       },
       Array [
         Object {
           "color": "#795e90",
           "flexShrink": 1,
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 16,
           "textAlign": "center",
         },
         undefined,
       ],
     ]
   }
-  themeFontSize="medium"
-  themeFontWeight="regular"
+  themeButtonVariant="text-secondary"
   themeIntent="body"
+  themeLevel="h1"
   themeTypeface="neutral"
-  themeVariant="text-secondary"
 >
   Example
 </Text>
@@ -904,27 +877,24 @@ exports[`StyledButtonText renders disabled correctly 1`] = `
       Object {
         "color": "#001f23",
         "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
+        "fontSize": 42,
+        "letterSpacing": 0,
+        "lineHeight": 50,
       },
       Array [
         Object {
           "color": "#ffffff",
           "flexShrink": 1,
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 18,
           "textAlign": "center",
         },
         undefined,
       ],
     ]
   }
-  themeFontSize="medium"
-  themeFontWeight="regular"
+  themeButtonVariant="filled-primary"
   themeIntent="body"
+  themeLevel="h1"
   themeTypeface="neutral"
-  themeVariant="filled-primary"
 >
   Example
 </Text>

package/src/components/Calendar/CalendarRowItem.tsx

@@ -35,9 +35,12 @@ const CalendarRowItem = ({
       variant={getCellVariant(isSelected, isCurrent)}
       onPress={onPress}
     >
-      <Typography.Text intent={isSelected ? 'inverted' : textIntent}>
+      <Typography.Body
+        variant="small"
+        intent={isSelected ? 'inverted' : textIntent}
+      >
         {date ? date.getDate() : ''}
-      </Typography.Text>
+      </Typography.Body>
       {marked ? (
         <StyledMark
           testID="calendar-date-mark"

package/src/components/Calendar/__tests__/__snapshots__/CalendarRowItem.spec.tsx.snap

@@ -49,16 +49,15 @@ exports[`CalendarRowItem renders correctly 1`] = `
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 14,
-            "letterSpacing": 0.42,
+            "letterSpacing": 0.48,
             "lineHeight": 22,
           },
           undefined,
         ]
       }
-      themeFontSize="medium"
-      themeFontWeight="regular"
       themeIntent="body"
       themeTypeface="neutral"
+      themeVariant="small"
     >
       10
     </Text>
@@ -132,16 +131,15 @@ exports[`CalendarRowItem renders correctly 2`] = `
             "color": "#4d6265",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 14,
-            "letterSpacing": 0.42,
+            "letterSpacing": 0.48,
             "lineHeight": 22,
           },
           undefined,
         ]
       }
-      themeFontSize="medium"
-      themeFontWeight="regular"
       themeIntent="subdued"
       themeTypeface="neutral"
+      themeVariant="small"
     >
       10
     </Text>
@@ -215,16 +213,15 @@ exports[`CalendarRowItem renders correctly when is current date 1`] = `
             "color": "#ffffff",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 14,
-            "letterSpacing": 0.42,
+            "letterSpacing": 0.48,
             "lineHeight": 22,
           },
           undefined,
         ]
       }
-      themeFontSize="medium"
-      themeFontWeight="regular"
       themeIntent="inverted"
       themeTypeface="neutral"
+      themeVariant="small"
     >
       10
     </Text>
@@ -298,16 +295,15 @@ exports[`CalendarRowItem renders correctly when selected, and is current date eq
             "color": "#ffffff",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 14,
-            "letterSpacing": 0.42,
+            "letterSpacing": 0.48,
             "lineHeight": 22,
           },
           undefined,
         ]
       }
-      themeFontSize="medium"
-      themeFontWeight="regular"
       themeIntent="inverted"
       themeTypeface="neutral"
+      themeVariant="small"
     >
       10
     </Text>
@@ -381,16 +377,15 @@ exports[`CalendarRowItem renders correctly when selected, and is current date eq
             "color": "#ffffff",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 14,
-            "letterSpacing": 0.42,
+            "letterSpacing": 0.48,
             "lineHeight": 22,
           },
           undefined,
         ]
       }
-      themeFontSize="medium"
-      themeFontWeight="regular"
       themeIntent="inverted"
       themeTypeface="neutral"
+      themeVariant="small"
     >
       10
     </Text>

package/src/components/Calendar/index.tsx

@@ -165,7 +165,7 @@ const Calendar = ({
         {DAYS_OF_WEEK.map((day) => (
           <StyledCalendarRowItem key={day}>
             <StyledCalendarDayNameCell>
-              <Typography.Text>{day}</Typography.Text>
+              <Typography.Body variant="small">{day}</Typography.Body>
             </StyledCalendarDayNameCell>
           </StyledCalendarRowItem>
         ))}

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

@@ -22,16 +22,15 @@ exports[`Card renders correctly when intent is archived 1`] = `
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
-          "letterSpacing": 0.42,
+          "letterSpacing": 0.48,
           "lineHeight": 22,
         },
         undefined,
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
+    themeVariant="small"
   >
     Card Content
   </Text>
@@ -60,16 +59,15 @@ exports[`Card renders correctly when intent is danger 1`] = `
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
-          "letterSpacing": 0.42,
+          "letterSpacing": 0.48,
           "lineHeight": 22,
         },
         undefined,
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
+    themeVariant="small"
   >
     Card Content
   </Text>
@@ -98,16 +96,15 @@ exports[`Card renders correctly when intent is info 1`] = `
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
-          "letterSpacing": 0.42,
+          "letterSpacing": 0.48,
           "lineHeight": 22,
         },
         undefined,
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
+    themeVariant="small"
   >
     Card Content
   </Text>
@@ -136,16 +133,15 @@ exports[`Card renders correctly when intent is primary 1`] = `
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
-          "letterSpacing": 0.42,
+          "letterSpacing": 0.48,
           "lineHeight": 22,
         },
         undefined,
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
+    themeVariant="small"
   >
     Card Content
   </Text>
@@ -174,16 +170,15 @@ exports[`Card renders correctly when intent is success 1`] = `
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
-          "letterSpacing": 0.42,
+          "letterSpacing": 0.48,
           "lineHeight": 22,
         },
         undefined,
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
+    themeVariant="small"
   >
     Card Content
   </Text>
@@ -210,16 +205,15 @@ exports[`Card renders correctly when intent is undefined 1`] = `
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
-          "letterSpacing": 0.42,
+          "letterSpacing": 0.48,
           "lineHeight": 22,
         },
         undefined,
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
+    themeVariant="small"
   >
     Card Content
   </Text>

package/src/components/Card/__tests__/index.spec.tsx

@@ -28,7 +28,7 @@ describe('Card', () => {
   `('renders correctly when intent is $intent', ({ intent }) => {
     const { toJSON, getByText } = renderWithTheme(
       <Card intent={intent}>
-        <Typography.Text>Card Content</Typography.Text>
+        <Typography.Body variant="small">Card Content</Typography.Body>
       </Card>
     );
 

package/src/components/Carousel/CardCarousel.tsx

@@ -248,3 +248,5 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
     );
   }
 );
+
+CardCarousel.displayName = 'CardCarousel';

package/src/components/Carousel/CarouselItem.tsx

@@ -48,10 +48,10 @@ const CarouselItem = ({
         width={width}
       >
         {content}
-        <StyledCarouselHeading>{heading}</StyledCarouselHeading>
-        {body ? (
-          <Typography.Text fontSize="large">{body}</Typography.Text>
-        ) : null}
+        <StyledCarouselHeading level="h1" typeface="playful">
+          {heading}
+        </StyledCarouselHeading>
+        {body ? <Typography.Body>{body}</Typography.Body> : null}
       </StyledCarouselContentWrapper>
     </Box>
   );

package/src/components/Carousel/StyledCarousel.tsx

@@ -21,12 +21,9 @@ const StyledCarouselView = styled(View)(() => ({
   justifyContent: 'space-between',
 }));
 
-const StyledCarouselHeading = styled(Typography.Text)(({ theme }) => ({
+const StyledCarouselHeading = styled(Typography.Title)(({ theme }) => ({
   marginTop: theme.__hd__.carousel.space.headingMarginTop,
   marginBottom: theme.__hd__.carousel.space.headingMarginBottom,
-  fontFamily: theme.__hd__.carousel.fonts.heading,
-  fontSize: theme.__hd__.carousel.fontSizes.heading,
-  lineHeight: theme.__hd__.carousel.lineHeights.heading,
 }));
 
 const StyledCarouselImage = styled(Image)(() => ({