@hero-design/rn 8.12.4 → 8.12.5-alpha.0

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

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

package/src/components/Avatar/StyledAvatar.tsx

@@ -1,7 +1,5 @@
-import { View, Image, TouchableOpacity } from 'react-native';
+import { View, Image, TouchableOpacity, Text } from 'react-native';
 import styled from '@emotion/native';
-import Typography from '../Typography';
-import { TextProps } from '../Typography/Text';
 
 type ThemeSize =
   | 'small'
@@ -33,16 +31,11 @@ const StyledTextWrapper = styled(View)(() => ({
   height: '100%',
 }));
 
-const StyledText = styled(Typography.Text)<
-  TextProps & {
-    themeSize: ThemeSize;
-  }
->(({ themeSize, theme }) => ({
+const StyledText = styled(Text)<{
+  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,35 +47,18 @@ exports[`StyledPressable renders correct style 1`] = `
 
 exports[`StyledText renders correct style 1`] = `
 <Text
-  allowFontScaling={false}
   style={
     Array [
       Object {
-        "color": "#001f23",
+        "color": "#ffffff",
         "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
+        "fontSize": 16,
+        "overflow": "hidden",
       },
-      Array [
-        Object {
-          "color": "#ffffff",
-          "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 16,
-          "lineHeight": 0,
-          "overflow": "hidden",
-          "textAlign": "center",
-          "textAlignVertical": "center",
-        },
-        undefined,
-      ],
+      undefined,
     ]
   }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
   themeSize="small"
-  themeTypeface="neutral"
 >
   MD
 </Text>

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

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

package/src/components/Badge/StyledBadge.tsx

@@ -1,6 +1,5 @@
-import { Animated } from 'react-native';
+import { Animated, Text } from 'react-native';
 import styled from '@emotion/native';
-import Typography from '../Typography';
 
 type ThemeIntent =
   | 'primary'
@@ -28,10 +27,9 @@ const StyledView = styled(Animated.View)<{
       : undefined,
 }));
 
-const StyledText = styled(Typography.Text)(({ theme }) => ({
+const StyledText = styled(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',