@hero-design/rn 8.12.3 → 8.12.4

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

@@ -99,18 +99,35 @@ exports[`ListItem renders correctly ListItem with children 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"
             >
               ML
             </Text>
@@ -128,6 +145,7 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
         }
       >
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -148,6 +166,7 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
           Menu List
         </Text>
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -216,6 +235,7 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
         }
       >
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -236,6 +256,7 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
           Gross pay
         </Text>
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -266,6 +287,7 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
         }
       >
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -286,6 +308,7 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
           Gross pay
         </Text>
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -370,6 +393,7 @@ exports[`ListItem renders correctly ListItem with icon 1`] = `
         }
       >
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -390,6 +414,7 @@ exports[`ListItem renders correctly ListItem with icon 1`] = `
           List item
         </Text>
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -513,6 +538,7 @@ exports[`ListItem renders correctly ListItem with leading status 1`] = `
         }
       >
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -663,18 +689,35 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
             }
           >
             <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"
             >
               ML
             </Text>
@@ -692,6 +735,7 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
         }
       >
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -712,6 +756,7 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
           List item
         </Text>
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {

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

@@ -26,6 +26,7 @@ exports[`StyledListItemContainer renders correctly themeSelected false themeDisa
   }
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
@@ -74,6 +75,7 @@ exports[`StyledListItemContainer renders correctly themeSelected false themeDisa
   }
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
@@ -122,6 +124,7 @@ exports[`StyledListItemContainer renders correctly themeSelected true themeDisab
   }
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
@@ -170,6 +173,7 @@ exports[`StyledListItemContainer renders correctly themeSelected true themeDisab
   }
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {

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

@@ -118,6 +118,7 @@ exports[`ListItemContainer renders correctly themeSelected false themeVariant ca
   }
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
@@ -163,6 +164,7 @@ exports[`ListItemContainer renders correctly themeSelected false themeVariant fu
   }
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
@@ -218,6 +220,7 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant car
   }
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
@@ -263,6 +266,7 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant ful
   }
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {

package/src/components/PinInput/StyledPinInput.tsx

@@ -1,5 +1,6 @@
 import styled from '@emotion/native';
-import { Text, TextInput, View } from 'react-native';
+import { TextInput, View } from 'react-native';
+import Typography from '../Typography';
 
 export const StyledWrapper = styled(View)(() => ({
   alignContent: 'flex-start',
@@ -26,11 +27,12 @@ export const StyledCell = styled(View)<{
   borderColor: theme.__hd__.pinInput.colors[themeState],
 }));
 
-export const StyledCellText = styled(Text)<{
+export const StyledCellText = styled(Typography.Text)<{
   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],
 }));
 
@@ -78,9 +80,10 @@ export const StyledHiddenInput = styled(TextInput)<{ themePinLength: number }>(
 export const StyledErrorContainer = styled(View)(({ theme }) => ({
   flexDirection: 'row',
   paddingTop: theme.__hd__.pinInput.space.errorMessagePadding,
+  alignItems: 'center',
 }));
 
-export const StyledErrorMessage = styled(Text)(({ theme }) => ({
+export const StyledErrorMessage = styled(Typography.Text)(({ theme }) => ({
   fontFamily: theme.__hd__.pinInput.fonts.errorMessage,
   fontSize: theme.__hd__.pinInput.fontSizes.errorMessage,
   color: theme.__hd__.pinInput.colors.error,

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

@@ -20,17 +20,32 @@ exports[`PinCell renders correctly when focused is false, state is default 1`] =
   themeState="default"
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 28,
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
         },
-        undefined,
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-SemiBold",
+            "fontSize": 28,
+            "lineHeight": 36,
+          },
+          undefined,
+        ],
       ]
     }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
     themeState="default"
+    themeTypeface="neutral"
   >
     1
   </Text>
@@ -57,17 +72,32 @@ exports[`PinCell renders correctly when focused is false, state is disabled 1`]
   themeState="disabled"
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
-          "color": "#bfc1c5",
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 28,
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
         },
-        undefined,
+        Array [
+          Object {
+            "color": "#bfc1c5",
+            "fontFamily": "BeVietnamPro-SemiBold",
+            "fontSize": 28,
+            "lineHeight": 36,
+          },
+          undefined,
+        ],
       ]
     }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
     themeState="disabled"
+    themeTypeface="neutral"
   >
     1
   </Text>
@@ -94,17 +124,32 @@ exports[`PinCell renders correctly when focused is false, state is error 1`] = `
   themeState="error"
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
-          "color": "#de350b",
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 28,
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
         },
-        undefined,
+        Array [
+          Object {
+            "color": "#de350b",
+            "fontFamily": "BeVietnamPro-SemiBold",
+            "fontSize": 28,
+            "lineHeight": 36,
+          },
+          undefined,
+        ],
       ]
     }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
     themeState="error"
+    themeTypeface="neutral"
   >
     1
   </Text>
@@ -131,17 +176,32 @@ exports[`PinCell renders correctly when focused is true, state is default 1`] =
   themeState="default"
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 28,
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
         },
-        undefined,
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-SemiBold",
+            "fontSize": 28,
+            "lineHeight": 36,
+          },
+          undefined,
+        ],
       ]
     }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
     themeState="default"
+    themeTypeface="neutral"
   >
     1
   </Text>
@@ -168,17 +228,32 @@ exports[`PinCell renders correctly when focused is true, state is error 1`] = `
   themeState="error"
 >
   <Text
+    allowFontScaling={false}
     style={
       Array [
         Object {
-          "color": "#de350b",
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 28,
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
         },
-        undefined,
+        Array [
+          Object {
+            "color": "#de350b",
+            "fontFamily": "BeVietnamPro-SemiBold",
+            "fontSize": 28,
+            "lineHeight": 36,
+          },
+          undefined,
+        ],
       ]
     }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
     themeState="error"
+    themeTypeface="neutral"
   >
     1
   </Text>

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

@@ -492,17 +492,32 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
       themeState="default"
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
               "color": "#001f23",
-              "fontFamily": "BeVietnamPro-SemiBold",
-              "fontSize": 28,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
             },
-            undefined,
+            Array [
+              Object {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-SemiBold",
+                "fontSize": 28,
+                "lineHeight": 36,
+              },
+              undefined,
+            ],
           ]
         }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
         themeState="default"
+        themeTypeface="neutral"
       >
         1
       </Text>
@@ -536,17 +551,32 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
       themeState="default"
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
               "color": "#001f23",
-              "fontFamily": "BeVietnamPro-SemiBold",
-              "fontSize": 28,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
             },
-            undefined,
+            Array [
+              Object {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-SemiBold",
+                "fontSize": 28,
+                "lineHeight": 36,
+              },
+              undefined,
+            ],
           ]
         }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
         themeState="default"
+        themeTypeface="neutral"
       >
         2
       </Text>
@@ -580,17 +610,32 @@ exports[`rendering renders correctly when length is 6 and secure is false 1`] =
       themeState="default"
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
               "color": "#001f23",
-              "fontFamily": "BeVietnamPro-SemiBold",
-              "fontSize": 28,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
             },
-            undefined,
+            Array [
+              Object {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-SemiBold",
+                "fontSize": 28,
+                "lineHeight": 36,
+              },
+              undefined,
+            ],
           ]
         }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
         themeState="default"
+        themeTypeface="neutral"
       >
         3
       </Text>
@@ -961,6 +1006,7 @@ exports[`rendering renders correctly when there is error 1`] = `
     style={
       Array [
         Object {
+          "alignItems": "center",
           "flexDirection": "row",
           "paddingTop": 4,
         },
@@ -984,17 +1030,31 @@ exports[`rendering renders correctly when there is error 1`] = `
       themeSize="xsmall"
     />
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
-            "color": "#de350b",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 12,
-            "paddingLeft": 4,
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
           },
-          undefined,
+          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/__tests__/__snapshots__/index.spec.js.snap

@@ -342,6 +342,7 @@ exports[`Progress.Circle allows to custom value renderer 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -632,6 +633,7 @@ exports[`Progress.Circle renders correctly 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -922,6 +924,7 @@ exports[`Progress.Circle renders correctly with intent 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {

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

@@ -41,6 +41,7 @@ exports[`rendering renders correctly when checked 1`] = `
     }
   >
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
@@ -147,6 +148,7 @@ exports[`rendering renders correctly when not checked 1`] = `
     }
   >
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {

package/src/components/Radio/__tests__/__snapshots__/RadioGroup.spec.tsx.snap

@@ -42,6 +42,7 @@ exports[`rendering renders correctly 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -140,6 +141,7 @@ exports[`rendering renders correctly 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -238,6 +240,7 @@ exports[`rendering renders correctly 1`] = `
       }
     >
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {

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

@@ -78,6 +78,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
         }
       >
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -235,6 +236,7 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
           themeSize="xsmall"
         />
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -346,6 +348,7 @@ exports[`RichTextEditor should render correctly 1`] = `
         }
       >
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {
@@ -502,6 +505,7 @@ exports[`RichTextEditor should render correctly 1`] = `
           themeSize="xsmall"
         />
         <Text
+          allowFontScaling={false}
           style={
             Array [
               Object {