@hero-design/rn 8.12.3 → 8.12.4

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

@@ -70,6 +70,7 @@ exports[`Alert Icon render custom icon correctly 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -164,6 +165,7 @@ exports[`Alert renders correctly when intent is error 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -184,6 +186,7 @@ exports[`Alert renders correctly when intent is error 1`] = `
         Title
       </Text>
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -313,6 +316,7 @@ exports[`Alert renders correctly when intent is info 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -333,6 +337,7 @@ exports[`Alert renders correctly when intent is info 1`] = `
         Title
       </Text>
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -435,6 +440,7 @@ exports[`Alert renders correctly when intent is notification 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -455,6 +461,7 @@ exports[`Alert renders correctly when intent is notification 1`] = `
         Title
       </Text>
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -584,6 +591,7 @@ exports[`Alert renders correctly when intent is success 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -604,6 +612,7 @@ exports[`Alert renders correctly when intent is success 1`] = `
         Title
       </Text>
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -733,6 +742,7 @@ exports[`Alert renders correctly when intent is warning 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -753,6 +763,7 @@ exports[`Alert renders correctly when intent is warning 1`] = `
         Title
       </Text>
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -882,6 +893,7 @@ exports[`Alert renders correctly without rounded  1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -902,6 +914,7 @@ exports[`Alert renders correctly without rounded  1`] = `
         Title
       </Text>
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {

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

@@ -61,6 +61,7 @@ exports[`Attachment renders correctly 1`] = `
       testID="attachment-content"
     >
       <Text
+        allowFontScaling={false}
         numberOfLines={1}
         style={
           Array [

package/src/components/Avatar/AvatarStack/__tests__/__snapshots__/StyledAvatarStack.spec.tsx.snap

@@ -46,18 +46,35 @@ exports[`StyledAvatar renders correctly 1`] = `
     }
   >
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
-            "color": "#ffffff",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 18,
-            "overflow": "hidden",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
           },
-          undefined,
+          Array [
+            Object {
+              "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 18,
+              "lineHeight": 0,
+              "overflow": "hidden",
+              "textAlign": "center",
+              "textAlignVertical": "center",
+            },
+            undefined,
+          ],
         ]
       }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
       themeSize="medium"
+      themeTypeface="neutral"
     >
       AA
     </Text>

package/src/components/Avatar/AvatarStack/__tests__/__snapshots__/index.spec.tsx.snap

@@ -60,18 +60,35 @@ exports[`AvatarStack renders correctly by default 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
-              "color": "#ffffff",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 16,
-              "overflow": "hidden",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
             },
-            undefined,
+            Array [
+              Object {
+                "color": "#ffffff",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 16,
+                "lineHeight": 0,
+                "overflow": "hidden",
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              undefined,
+            ],
           ]
         }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
         themeSize="small"
+        themeTypeface="neutral"
       >
         TT
       </Text>
@@ -121,18 +138,35 @@ exports[`AvatarStack renders correctly by default 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
-              "color": "#ffffff",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 16,
-              "overflow": "hidden",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
             },
-            undefined,
+            Array [
+              Object {
+                "color": "#ffffff",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 16,
+                "lineHeight": 0,
+                "overflow": "hidden",
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              undefined,
+            ],
           ]
         }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
         themeSize="small"
+        themeTypeface="neutral"
       >
         SS
       </Text>
@@ -182,18 +216,35 @@ exports[`AvatarStack renders correctly by default 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
-              "color": "#ffffff",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 16,
-              "overflow": "hidden",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
             },
-            undefined,
+            Array [
+              Object {
+                "color": "#ffffff",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 16,
+                "lineHeight": 0,
+                "overflow": "hidden",
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              undefined,
+            ],
           ]
         }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
         themeSize="small"
+        themeTypeface="neutral"
       >
         AA
       </Text>
@@ -243,18 +294,35 @@ exports[`AvatarStack renders correctly by default 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
-              "color": "#ffffff",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 16,
-              "overflow": "hidden",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
             },
-            undefined,
+            Array [
+              Object {
+                "color": "#ffffff",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 16,
+                "lineHeight": 0,
+                "overflow": "hidden",
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              undefined,
+            ],
           ]
         }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
         themeSize="small"
+        themeTypeface="neutral"
       >
         OO
       </Text>
@@ -304,18 +372,35 @@ exports[`AvatarStack renders correctly by default 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
-              "color": "#ffffff",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 16,
-              "overflow": "hidden",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
             },
-            undefined,
+            Array [
+              Object {
+                "color": "#ffffff",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 16,
+                "lineHeight": 0,
+                "overflow": "hidden",
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              undefined,
+            ],
           ]
         }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
         themeSize="small"
+        themeTypeface="neutral"
       >
         NA
       </Text>
@@ -384,18 +469,35 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
-              "color": "#ffffff",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 18,
-              "overflow": "hidden",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
             },
-            undefined,
+            Array [
+              Object {
+                "color": "#ffffff",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 18,
+                "lineHeight": 0,
+                "overflow": "hidden",
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              undefined,
+            ],
           ]
         }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
         themeSize="medium"
+        themeTypeface="neutral"
       >
         TT
       </Text>
@@ -445,18 +547,35 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
-              "color": "#ffffff",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 18,
-              "overflow": "hidden",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
             },
-            undefined,
+            Array [
+              Object {
+                "color": "#ffffff",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 18,
+                "lineHeight": 0,
+                "overflow": "hidden",
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              undefined,
+            ],
           ]
         }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
         themeSize="medium"
+        themeTypeface="neutral"
       >
         SS
       </Text>
@@ -506,18 +625,35 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
-              "color": "#ffffff",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 18,
-              "overflow": "hidden",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
             },
-            undefined,
+            Array [
+              Object {
+                "color": "#ffffff",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 18,
+                "lineHeight": 0,
+                "overflow": "hidden",
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              undefined,
+            ],
           ]
         }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
         themeSize="medium"
+        themeTypeface="neutral"
       >
         AA
       </Text>
@@ -567,18 +703,35 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
-              "color": "#ffffff",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 18,
-              "overflow": "hidden",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
             },
-            undefined,
+            Array [
+              Object {
+                "color": "#ffffff",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 18,
+                "lineHeight": 0,
+                "overflow": "hidden",
+                "textAlign": "center",
+                "textAlignVertical": "center",
+              },
+              undefined,
+            ],
           ]
         }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
         themeSize="medium"
+        themeTypeface="neutral"
       >
         +2
       </Text>

package/src/components/Avatar/StyledAvatar.tsx

@@ -1,5 +1,7 @@
-import { View, Image, TouchableOpacity, Text } from 'react-native';
+import { View, Image, TouchableOpacity } from 'react-native';
 import styled from '@emotion/native';
+import Typography from '../Typography';
+import { TextProps } from '../Typography/Text';
 
 type ThemeSize =
   | 'small'
@@ -31,11 +33,16 @@ const StyledTextWrapper = styled(View)(() => ({
   height: '100%',
 }));
 
-const StyledText = styled(Text)<{
-  themeSize: ThemeSize;
-}>(({ themeSize, theme }) => ({
+const StyledText = styled(Typography.Text)<
+  TextProps & {
+    themeSize: ThemeSize;
+  }
+>(({ themeSize, theme }) => ({
   fontFamily: theme.__hd__.avatar.fonts.default,
   fontSize: theme.__hd__.avatar.fontSizes[themeSize],
+  lineHeight: 0, // auto center
+  textAlignVertical: 'center',
+  textAlign: 'center',
   color: theme.__hd__.avatar.colors.text,
   overflow: 'hidden',
 }));

package/src/components/Avatar/__tests__/__snapshots__/StyledAvatar.spec.tsx.snap

@@ -47,18 +47,35 @@ exports[`StyledPressable renders correct style 1`] = `
 
 exports[`StyledText renders correct style 1`] = `
 <Text
+  allowFontScaling={false}
   style={
     Array [
       Object {
-        "color": "#ffffff",
+        "color": "#001f23",
         "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 16,
-        "overflow": "hidden",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
       },
-      undefined,
+      Array [
+        Object {
+          "color": "#ffffff",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 16,
+          "lineHeight": 0,
+          "overflow": "hidden",
+          "textAlign": "center",
+          "textAlignVertical": "center",
+        },
+        undefined,
+      ],
     ]
   }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
   themeSize="small"
+  themeTypeface="neutral"
 >
   MD
 </Text>

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

@@ -43,18 +43,35 @@ exports[`Avatar fallbacks to title when there image failed to load 1`] = `
     }
   >
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
-            "color": "#ffffff",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 16,
-            "overflow": "hidden",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
           },
-          undefined,
+          Array [
+            Object {
+              "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "lineHeight": 0,
+              "overflow": "hidden",
+              "textAlign": "center",
+              "textAlignVertical": "center",
+            },
+            undefined,
+          ],
         ]
       }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
       themeSize="small"
+      themeTypeface="neutral"
     >
       TT
     </Text>
@@ -180,18 +197,35 @@ exports[`Avatar shows title when there is no source 1`] = `
     }
   >
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
-            "color": "#ffffff",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 16,
-            "overflow": "hidden",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
           },
-          undefined,
+          Array [
+            Object {
+              "color": "#ffffff",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "lineHeight": 0,
+              "overflow": "hidden",
+              "textAlign": "center",
+              "textAlignVertical": "center",
+            },
+            undefined,
+          ],
         ]
       }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
       themeSize="small"
+      themeTypeface="neutral"
     >
       TT
     </Text>

package/src/components/Badge/StyledBadge.tsx

@@ -1,5 +1,6 @@
-import { Animated, Text } from 'react-native';
+import { Animated } from 'react-native';
 import styled from '@emotion/native';
+import Typography from '../Typography';
 
 type ThemeIntent =
   | 'primary'
@@ -27,9 +28,10 @@ const StyledView = styled(Animated.View)<{
       : undefined,
 }));
 
-const StyledText = styled(Text)(({ theme }) => ({
+const StyledText = styled(Typography.Text)(({ theme }) => ({
   fontFamily: theme.__hd__.badge.fonts.default,
   fontSize: theme.__hd__.badge.fontSizes.default,
+  lineHeight: theme.__hd__.badge.lineHeights.default,
   color: theme.__hd__.badge.colors.text,
   includeFontPadding: false,
   textAlignVertical: 'center',