@hero-design/rn 8.33.1 → 8.33.2

package/src/components/List/__tests__/__snapshots__/ListItem.spec.tsx.snap

@@ -157,10 +157,9 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
               undefined,
             ]
           }
-          themeFontSize="large"
-          themeFontWeight="regular"
           themeIntent="body"
           themeTypeface="neutral"
+          themeVariant="regular"
         >
           Menu List
         </Text>
@@ -172,16 +171,14 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
                 "color": "#4d6265",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 12,
-                "letterSpacing": 0.36,
+                "letterSpacing": 0.48,
                 "lineHeight": 16,
               },
               undefined,
             ]
           }
-          themeFontSize="small"
           themeFontWeight="regular"
           themeIntent="subdued"
-          themeTypeface="neutral"
         >
           Got a common question?
         </Text>
@@ -240,17 +237,16 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
               Object {
                 "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 14,
-                "letterSpacing": 0.42,
-                "lineHeight": 22,
+                "fontSize": 16,
+                "letterSpacing": 0.48,
+                "lineHeight": 24,
               },
               undefined,
             ]
           }
-          themeFontSize="medium"
-          themeFontWeight="regular"
           themeIntent="body"
           themeTypeface="neutral"
+          themeVariant="regular"
         >
           Gross pay
         </Text>
@@ -261,17 +257,16 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
               Object {
                 "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 14,
-                "letterSpacing": 0.42,
-                "lineHeight": 22,
+                "fontSize": 16,
+                "letterSpacing": 0.48,
+                "lineHeight": 24,
               },
               undefined,
             ]
           }
-          themeFontSize="medium"
-          themeFontWeight="regular"
           themeIntent="body"
           themeTypeface="neutral"
+          themeVariant="regular"
         >
           $1052.03
         </Text>
@@ -292,17 +287,16 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
               Object {
                 "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 14,
-                "letterSpacing": 0.42,
-                "lineHeight": 22,
+                "fontSize": 16,
+                "letterSpacing": 0.48,
+                "lineHeight": 24,
               },
               undefined,
             ]
           }
-          themeFontSize="medium"
-          themeFontWeight="regular"
           themeIntent="body"
           themeTypeface="neutral"
+          themeVariant="regular"
         >
           Gross pay
         </Text>
@@ -313,17 +307,16 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
               Object {
                 "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 14,
-                "letterSpacing": 0.42,
-                "lineHeight": 22,
+                "fontSize": 16,
+                "letterSpacing": 0.48,
+                "lineHeight": 24,
               },
               undefined,
             ]
           }
-          themeFontSize="medium"
-          themeFontWeight="regular"
           themeIntent="body"
           themeTypeface="neutral"
+          themeVariant="regular"
         >
           $1052.03
         </Text>
@@ -405,10 +398,9 @@ exports[`ListItem renders correctly ListItem with icon 1`] = `
               undefined,
             ]
           }
-          themeFontSize="large"
-          themeFontWeight="regular"
           themeIntent="body"
           themeTypeface="neutral"
+          themeVariant="regular"
         >
           List item
         </Text>
@@ -420,16 +412,14 @@ exports[`ListItem renders correctly ListItem with icon 1`] = `
                 "color": "#4d6265",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 12,
-                "letterSpacing": 0.36,
+                "letterSpacing": 0.48,
                 "lineHeight": 16,
               },
               undefined,
             ]
           }
-          themeFontSize="small"
           themeFontWeight="regular"
           themeIntent="subdued"
-          themeTypeface="neutral"
         >
           subtitle
         </Text>
@@ -550,10 +540,9 @@ exports[`ListItem renders correctly ListItem with leading status 1`] = `
               undefined,
             ]
           }
-          themeFontSize="large"
-          themeFontWeight="regular"
           themeIntent="body"
           themeTypeface="neutral"
+          themeVariant="regular"
         >
           03:00 PM - 9:00 PM
         </Text>
@@ -746,10 +735,9 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
               undefined,
             ]
           }
-          themeFontSize="large"
-          themeFontWeight="regular"
           themeIntent="body"
           themeTypeface="neutral"
+          themeVariant="regular"
         >
           List item
         </Text>
@@ -761,16 +749,14 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
                 "color": "#4d6265",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 12,
-                "letterSpacing": 0.36,
+                "letterSpacing": 0.48,
                 "lineHeight": 16,
               },
               undefined,
             ]
           }
-          themeFontSize="small"
           themeFontWeight="regular"
           themeIntent="subdued"
-          themeTypeface="neutral"
         >
           subtitle
         </Text>

package/src/components/List/__tests__/__snapshots__/StyledBasicListItem.spec.tsx.snap

@@ -33,16 +33,15 @@ exports[`StyledListItemContainer renders correctly themeSelected false themeDisa
           "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"
   >
     StyledListItemContainer
   </Text>
@@ -82,16 +81,15 @@ exports[`StyledListItemContainer renders correctly themeSelected false themeDisa
           "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"
   >
     StyledListItemContainer
   </Text>
@@ -131,16 +129,15 @@ exports[`StyledListItemContainer renders correctly themeSelected true themeDisab
           "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"
   >
     StyledListItemContainer
   </Text>
@@ -180,16 +177,15 @@ exports[`StyledListItemContainer renders correctly themeSelected true themeDisab
           "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"
   >
     StyledListItemContainer
   </Text>

package/src/components/List/__tests__/__snapshots__/StyledListItem.spec.tsx.snap

@@ -125,16 +125,15 @@ exports[`ListItemContainer renders correctly themeSelected false themeVariant ca
           "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"
   >
     StyledListItemContainer
   </Text>
@@ -171,16 +170,15 @@ exports[`ListItemContainer renders correctly themeSelected false themeVariant fu
           "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"
   >
     StyledListItemContainer
   </Text>
@@ -227,16 +225,15 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant car
           "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"
   >
     StyledListItemContainer
   </Text>
@@ -273,16 +270,15 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant ful
           "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"
   >
     StyledListItemContainer
   </Text>

package/src/components/PageControl/index.tsx

@@ -32,7 +32,6 @@ const PageControl = ({
   style,
 }: PageControlProps) => {
   const theme = useTheme();
-
   const animatedValue = React.useRef(new Animated.Value(currentPage)).current;
 
   React.useEffect(() => {

package/src/components/PinInput/PinCell.tsx

@@ -25,7 +25,9 @@ function PinCell({
         <StyledFilledMask themeState={state} testID="pin-cell-filled-mask" />
       )}
       {value !== '' && !secure && (
-        <StyledCellText themeState={state}>{value}</StyledCellText>
+        <StyledCellText themeState={state} level="h3">
+          {value}
+        </StyledCellText>
       )}
     </StyledCell>
   );

package/src/components/PinInput/StyledPinInput.tsx

@@ -27,12 +27,9 @@ export const StyledCell = styled(View)<{
   borderColor: theme.__hd__.pinInput.colors[themeState],
 }));
 
-export const StyledCellText = styled(Typography.Text)<{
+export const StyledCellText = styled(Typography.Title)<{
   themeState: State;
 }>(({ theme, themeState }) => ({
-  fontFamily: theme.__hd__.pinInput.fonts.cellText,
-  fontSize: theme.__hd__.pinInput.fontSizes.cellText,
-  lineHeight: theme.__hd__.pinInput.lineHeights.cellText,
   color: theme.__hd__.pinInput.colors[themeState],
 }));
 
@@ -83,9 +80,7 @@ export const StyledErrorContainer = styled(View)(({ theme }) => ({
   alignItems: 'center',
 }));
 
-export const StyledErrorMessage = styled(Typography.Text)(({ theme }) => ({
-  fontFamily: theme.__hd__.pinInput.fonts.errorMessage,
-  fontSize: theme.__hd__.pinInput.fontSizes.errorMessage,
+export const StyledErrorMessage = styled(Typography.Caption)(({ theme }) => ({
   color: theme.__hd__.pinInput.colors.error,
   paddingLeft: theme.__hd__.pinInput.space.errorMessagePadding,
 }));

package/src/components/PinInput/__tests__/__snapshots__/PinCell.spec.tsx.snap

@@ -25,25 +25,21 @@ exports[`PinCell renders correctly when focused is false, state is default 1`] =
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 28,
+          "letterSpacing": 0.24,
+          "lineHeight": 36,
         },
         Array [
           Object {
             "color": "#001f23",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 28,
-            "lineHeight": 36,
           },
           undefined,
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
+    themeLevel="h3"
     themeState="default"
     themeTypeface="neutral"
   >
@@ -77,25 +73,21 @@ exports[`PinCell renders correctly when focused is false, state is disabled 1`]
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 28,
+          "letterSpacing": 0.24,
+          "lineHeight": 36,
         },
         Array [
           Object {
             "color": "#bfc1c5",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 28,
-            "lineHeight": 36,
           },
           undefined,
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
+    themeLevel="h3"
     themeState="disabled"
     themeTypeface="neutral"
   >
@@ -129,25 +121,21 @@ exports[`PinCell renders correctly when focused is false, state is error 1`] = `
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 28,
+          "letterSpacing": 0.24,
+          "lineHeight": 36,
         },
         Array [
           Object {
             "color": "#de350b",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 28,
-            "lineHeight": 36,
           },
           undefined,
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
+    themeLevel="h3"
     themeState="error"
     themeTypeface="neutral"
   >
@@ -181,25 +169,21 @@ exports[`PinCell renders correctly when focused is true, state is default 1`] =
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 28,
+          "letterSpacing": 0.24,
+          "lineHeight": 36,
         },
         Array [
           Object {
             "color": "#001f23",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 28,
-            "lineHeight": 36,
           },
           undefined,
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
+    themeLevel="h3"
     themeState="default"
     themeTypeface="neutral"
   >
@@ -233,25 +217,21 @@ exports[`PinCell renders correctly when focused is true, state is error 1`] = `
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 14,
-          "letterSpacing": 0.42,
-          "lineHeight": 22,
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 28,
+          "letterSpacing": 0.24,
+          "lineHeight": 36,
         },
         Array [
           Object {
             "color": "#de350b",
-            "fontFamily": "BeVietnamPro-SemiBold",
-            "fontSize": 28,
-            "lineHeight": 36,
           },
           undefined,
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
+    themeLevel="h3"
     themeState="error"
     themeTypeface="neutral"
   >

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

@@ -497,25 +497,21 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
           Array [
             Object {
               "color": "#001f23",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 14,
-              "letterSpacing": 0.42,
-              "lineHeight": 22,
+              "fontFamily": "BeVietnamPro-SemiBold",
+              "fontSize": 28,
+              "letterSpacing": 0.24,
+              "lineHeight": 36,
             },
             Array [
               Object {
                 "color": "#001f23",
-                "fontFamily": "BeVietnamPro-SemiBold",
-                "fontSize": 28,
-                "lineHeight": 36,
               },
               undefined,
             ],
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="regular"
         themeIntent="body"
+        themeLevel="h3"
         themeState="default"
         themeTypeface="neutral"
       >
@@ -556,25 +552,21 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
           Array [
             Object {
               "color": "#001f23",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 14,
-              "letterSpacing": 0.42,
-              "lineHeight": 22,
+              "fontFamily": "BeVietnamPro-SemiBold",
+              "fontSize": 28,
+              "letterSpacing": 0.24,
+              "lineHeight": 36,
             },
             Array [
               Object {
                 "color": "#001f23",
-                "fontFamily": "BeVietnamPro-SemiBold",
-                "fontSize": 28,
-                "lineHeight": 36,
               },
               undefined,
             ],
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="regular"
         themeIntent="body"
+        themeLevel="h3"
         themeState="default"
         themeTypeface="neutral"
       >
@@ -615,25 +607,21 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
           Array [
             Object {
               "color": "#001f23",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 14,
-              "letterSpacing": 0.42,
-              "lineHeight": 22,
+              "fontFamily": "BeVietnamPro-SemiBold",
+              "fontSize": 28,
+              "letterSpacing": 0.24,
+              "lineHeight": 36,
             },
             Array [
               Object {
                 "color": "#001f23",
-                "fontFamily": "BeVietnamPro-SemiBold",
-                "fontSize": 28,
-                "lineHeight": 36,
               },
               undefined,
             ],
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="regular"
         themeIntent="body"
+        themeLevel="h3"
         themeState="default"
         themeTypeface="neutral"
       >
@@ -1036,25 +1024,21 @@ exports[`rendering renders correctly when there is error 1`] = `
           Object {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 14,
-            "letterSpacing": 0.42,
-            "lineHeight": 22,
+            "fontSize": 12,
+            "letterSpacing": 0.48,
+            "lineHeight": 16,
           },
           Array [
             Object {
               "color": "#de350b",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 12,
               "paddingLeft": 4,
             },
             undefined,
           ],
         ]
       }
-      themeFontSize="medium"
       themeFontWeight="regular"
       themeIntent="body"
-      themeTypeface="neutral"
     >
       PIN is not correct
     </Text>

package/src/components/Progress/ProgressCircle.tsx

@@ -171,9 +171,7 @@ const ProgressCircle = ({
           <StyledStrokeEnd themeIntent={intent} />
         </Animated.View>
         <StyledDonutCircle>
-          <Typography.Text fontSize="large">
-            {renderValue(value)}
-          </Typography.Text>
+          <Typography.Body>{renderValue(value)}</Typography.Body>
         </StyledDonutCircle>
       </StyledContainer>
     </View>