npm - @hero-design/rn - Versions diffs - 8.23.0 → 8.24.0-alpha.1 - Mend

@hero-design/rn 8.23.0 → 8.24.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (300) hide show

package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap CHANGED Viewed

@@ -50,7 +50,7 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
       }
       testID="text-input-border"
       themeFocused={false}
-      themeVariant="filled"
+      themeState="filled"
     />
     <View
       pointerEvents="none"
@@ -94,8 +94,8 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
         themeFontSize="small"
         themeFontWeight="regular"
         themeIntent="body"
+        themeState="filled"
         themeTypeface="neutral"
-        themeVariant="filled"
       >
         *
       </Text>
@@ -124,8 +124,8 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
         themeFontSize="small"
         themeFontWeight="regular"
         themeIntent="body"
+        themeState="filled"
         themeTypeface="neutral"
-        themeVariant="filled"
       >
         Amount (AUD)
       </Text>
@@ -178,8 +178,11 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
             Object {
               "alignSelf": "stretch",
               "flexGrow": 2,
-              "fontSize": 14,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "height": undefined,
               "marginHorizontal": 8,
+              "maxHeight": 144,
               "paddingVertical": 0,
               "textAlignVertical": "center",
             },
@@ -190,6 +193,7 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
           ]
         }
         testID="text-input"
+        themeVariant="text"
         value="2000"
       />
     </View>
@@ -270,8 +274,8 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
         themeFontSize="small"
         themeFontWeight="regular"
         themeIntent="body"
+        themeState="filled"
         themeTypeface="neutral"
-        themeVariant="filled"
       >
         4
         /
@@ -332,7 +336,7 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
       }
       testID="text-input-border"
       themeFocused={false}
-      themeVariant="filled"
+      themeState="filled"
     />
     <View
       pointerEvents="none"
@@ -376,8 +380,8 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
         themeFontSize="small"
         themeFontWeight="regular"
         themeIntent="body"
+        themeState="filled"
         themeTypeface="neutral"
-        themeVariant="filled"
       >
         *
       </Text>
@@ -406,8 +410,8 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
         themeFontSize="small"
         themeFontWeight="regular"
         themeIntent="body"
+        themeState="filled"
         themeTypeface="neutral"
-        themeVariant="filled"
       >
         Amount (AUD)
       </Text>
@@ -460,8 +464,11 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
             Object {
               "alignSelf": "stretch",
               "flexGrow": 2,
-              "fontSize": 14,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "height": undefined,
               "marginHorizontal": 8,
+              "maxHeight": 144,
               "paddingVertical": 0,
               "textAlignVertical": "center",
             },
@@ -472,6 +479,7 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
           ]
         }
         testID="text-input"
+        themeVariant="text"
       />
     </View>
   </View>
@@ -551,8 +559,8 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
         themeFontSize="small"
         themeFontWeight="regular"
         themeIntent="body"
+        themeState="filled"
         themeTypeface="neutral"
-        themeVariant="filled"
       >
         4
         /
@@ -613,7 +621,7 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
       }
       testID="text-input-border"
       themeFocused={false}
-      themeVariant="filled"
+      themeState="filled"
     />
     <View
       pointerEvents="none"
@@ -657,8 +665,8 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
         themeFontSize="small"
         themeFontWeight="regular"
         themeIntent="body"
+        themeState="filled"
         themeTypeface="neutral"
-        themeVariant="filled"
       >
         *
       </Text>
@@ -687,8 +695,8 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
         themeFontSize="small"
         themeFontWeight="regular"
         themeIntent="body"
+        themeState="filled"
         themeTypeface="neutral"
-        themeVariant="filled"
       >
         Amount (AUD)
       </Text>
@@ -741,8 +749,11 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
             Object {
               "alignSelf": "stretch",
               "flexGrow": 2,
-              "fontSize": 14,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "height": undefined,
               "marginHorizontal": 8,
+              "maxHeight": 144,
               "paddingVertical": 0,
               "textAlignVertical": "center",
             },
@@ -753,6 +764,7 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
           ]
         }
         testID="text-input"
+        themeVariant="text"
         value="2000"
       />
     </View>
@@ -833,8 +845,8 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
         themeFontSize="small"
         themeFontWeight="regular"
         themeIntent="body"
+        themeState="filled"
         themeTypeface="neutral"
-        themeVariant="filled"
       >
         4
         /
@@ -896,7 +908,7 @@ exports[`TextInput disabled renders correctly 1`] = `
       }
       testID="text-input-border"
       themeFocused={false}
-      themeVariant="disabled"
+      themeState="disabled"
     />
     <View
       pointerEvents="none"
@@ -940,8 +952,8 @@ exports[`TextInput disabled renders correctly 1`] = `
         themeFontSize="small"
         themeFontWeight="regular"
         themeIntent="body"
+        themeState="disabled"
         themeTypeface="neutral"
-        themeVariant="disabled"
       >
         *
       </Text>
@@ -970,8 +982,8 @@ exports[`TextInput disabled renders correctly 1`] = `
         themeFontSize="small"
         themeFontWeight="regular"
         themeIntent="body"
+        themeState="disabled"
         themeTypeface="neutral"
-        themeVariant="disabled"
       >
         Amount (AUD)
       </Text>
@@ -1007,8 +1019,11 @@ exports[`TextInput disabled renders correctly 1`] = `
             Object {
               "alignSelf": "stretch",
               "flexGrow": 2,
-              "fontSize": 14,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "height": undefined,
               "marginHorizontal": 8,
+              "maxHeight": 144,
               "paddingVertical": 0,
               "textAlignVertical": "center",
             },
@@ -1019,6 +1034,7 @@ exports[`TextInput disabled renders correctly 1`] = `
           ]
         }
         testID="text-input"
+        themeVariant="text"
         value="100"
       />
     </View>
@@ -1099,7 +1115,7 @@ exports[`TextInput error renders correctly 1`] = `
       }
       testID="text-input-border"
       themeFocused={false}
-      themeVariant="error"
+      themeState="error"
     />
     <HeroIcon
       name="dollar-sign"
@@ -1147,6 +1163,7 @@ exports[`TextInput error renders correctly 1`] = `
             undefined,
           ]
         }
+        themeVariant="text"
       >
         <Text
           allowFontScaling={false}
@@ -1162,7 +1179,7 @@ exports[`TextInput error renders correctly 1`] = `
               Array [
                 Object {
                   "color": "#de350b",
-                  "fontSize": 14,
+                  "fontSize": 16,
                 },
                 undefined,
               ],
@@ -1171,8 +1188,8 @@ exports[`TextInput error renders correctly 1`] = `
           themeFontSize="medium"
           themeFontWeight="regular"
           themeIntent="body"
+          themeState="error"
           themeTypeface="neutral"
-          themeVariant="error"
         >
           *
         </Text>
@@ -1192,7 +1209,7 @@ exports[`TextInput error renders correctly 1`] = `
                   "alignContent": "center",
                   "alignItems": "center",
                   "color": "#001f23",
-                  "fontSize": 14,
+                  "fontSize": 16,
                   "marginTop": -2,
                   "textAlignVertical": "center",
                 },
@@ -1204,8 +1221,8 @@ exports[`TextInput error renders correctly 1`] = `
           themeFontSize="medium"
           themeFontWeight="regular"
           themeIntent="body"
+          themeState="error"
           themeTypeface="neutral"
-          themeVariant="error"
         >
           Amount (AUD)
         </Text>
@@ -1227,8 +1244,11 @@ exports[`TextInput error renders correctly 1`] = `
             Object {
               "alignSelf": "stretch",
               "flexGrow": 2,
-              "fontSize": 14,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "height": undefined,
               "marginHorizontal": 8,
+              "maxHeight": 144,
               "paddingVertical": 0,
               "textAlignVertical": "center",
             },
@@ -1239,6 +1259,7 @@ exports[`TextInput error renders correctly 1`] = `
           ]
         }
         testID="text-input"
+        themeVariant="text"
       />
     </View>
   </View>
@@ -1378,7 +1399,7 @@ exports[`TextInput filled renders correctly 1`] = `
       }
       testID="text-input-border"
       themeFocused={false}
-      themeVariant="filled"
+      themeState="filled"
     />
     <View
       pointerEvents="none"
@@ -1425,8 +1446,8 @@ exports[`TextInput filled renders correctly 1`] = `
         themeFontSize="small"
         themeFontWeight="regular"
         themeIntent="body"
+        themeState="filled"
         themeTypeface="neutral"
-        themeVariant="filled"
       >
         Amount (AUD)
       </Text>
@@ -1477,8 +1498,11 @@ exports[`TextInput filled renders correctly 1`] = `
             Object {
               "alignSelf": "stretch",
               "flexGrow": 2,
-              "fontSize": 14,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "height": undefined,
               "marginHorizontal": 8,
+              "maxHeight": 144,
               "paddingVertical": 0,
               "textAlignVertical": "center",
             },
@@ -1489,6 +1513,7 @@ exports[`TextInput filled renders correctly 1`] = `
           ]
         }
         testID="text-input"
+        themeVariant="text"
         value="100"
       />
     </View>
@@ -1584,7 +1609,7 @@ exports[`TextInput helper text renders correctly 1`] = `
       }
       testID="text-input-border"
       themeFocused={false}
-      themeVariant="default"
+      themeState="default"
     />
     <HeroIcon
       name="dollar-sign"
@@ -1632,6 +1657,7 @@ exports[`TextInput helper text renders correctly 1`] = `
             undefined,
           ]
         }
+        themeVariant="text"
       >
         <Text
           allowFontScaling={false}
@@ -1647,7 +1673,7 @@ exports[`TextInput helper text renders correctly 1`] = `
               Array [
                 Object {
                   "color": "#de350b",
-                  "fontSize": 14,
+                  "fontSize": 16,
                 },
                 undefined,
               ],
@@ -1656,8 +1682,8 @@ exports[`TextInput helper text renders correctly 1`] = `
           themeFontSize="medium"
           themeFontWeight="regular"
           themeIntent="body"
+          themeState="default"
           themeTypeface="neutral"
-          themeVariant="default"
         >
           *
         </Text>
@@ -1677,7 +1703,7 @@ exports[`TextInput helper text renders correctly 1`] = `
                   "alignContent": "center",
                   "alignItems": "center",
                   "color": "#001f23",
-                  "fontSize": 14,
+                  "fontSize": 16,
                   "marginTop": -2,
                   "textAlignVertical": "center",
                 },
@@ -1689,8 +1715,8 @@ exports[`TextInput helper text renders correctly 1`] = `
           themeFontSize="medium"
           themeFontWeight="regular"
           themeIntent="body"
+          themeState="default"
           themeTypeface="neutral"
-          themeVariant="default"
         >
           Amount (AUD)
         </Text>
@@ -1712,8 +1738,11 @@ exports[`TextInput helper text renders correctly 1`] = `
             Object {
               "alignSelf": "stretch",
               "flexGrow": 2,
-              "fontSize": 14,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "height": undefined,
               "marginHorizontal": 8,
+              "maxHeight": 144,
               "paddingVertical": 0,
               "textAlignVertical": "center",
             },
@@ -1724,6 +1753,7 @@ exports[`TextInput helper text renders correctly 1`] = `
           ]
         }
         testID="text-input"
+        themeVariant="text"
       />
     </View>
   </View>
@@ -1833,7 +1863,7 @@ exports[`TextInput idle renders correctly 1`] = `
       }
       testID="text-input-border"
       themeFocused={false}
-      themeVariant="default"
+      themeState="default"
     />
     <HeroIcon
       name="dollar-sign"
@@ -1881,6 +1911,7 @@ exports[`TextInput idle renders correctly 1`] = `
             undefined,
           ]
         }
+        themeVariant="text"
       >
         <Text
           allowFontScaling={false}
@@ -1898,7 +1929,7 @@ exports[`TextInput idle renders correctly 1`] = `
                   "alignContent": "center",
                   "alignItems": "center",
                   "color": "#001f23",
-                  "fontSize": 14,
+                  "fontSize": 16,
                   "marginTop": -2,
                   "textAlignVertical": "center",
                 },
@@ -1910,8 +1941,8 @@ exports[`TextInput idle renders correctly 1`] = `
           themeFontSize="medium"
           themeFontWeight="regular"
           themeIntent="body"
+          themeState="default"
           themeTypeface="neutral"
-          themeVariant="default"
         >
           Amount (AUD)
         </Text>
@@ -1933,8 +1964,11 @@ exports[`TextInput idle renders correctly 1`] = `
             Object {
               "alignSelf": "stretch",
               "flexGrow": 2,
-              "fontSize": 14,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "height": undefined,
               "marginHorizontal": 8,
+              "maxHeight": 144,
               "paddingVertical": 0,
               "textAlignVertical": "center",
             },
@@ -1945,6 +1979,7 @@ exports[`TextInput idle renders correctly 1`] = `
           ]
         }
         testID="text-input"
+        themeVariant="text"
       />
     </View>
     <HeroIcon
@@ -2039,7 +2074,7 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
       }
       testID="text-input-border"
       themeFocused={false}
-      themeVariant="default"
+      themeState="default"
     />
     <HeroIcon
       name="eye-circle"
@@ -2087,6 +2122,7 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
             undefined,
           ]
         }
+        themeVariant="text"
       >
         <Text
           allowFontScaling={false}
@@ -2102,7 +2138,7 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
               Array [
                 Object {
                   "color": "#de350b",
-                  "fontSize": 14,
+                  "fontSize": 16,
                 },
                 undefined,
               ],
@@ -2111,8 +2147,8 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
           themeFontSize="medium"
           themeFontWeight="regular"
           themeIntent="body"
+          themeState="default"
           themeTypeface="neutral"
-          themeVariant="default"
         >
           *
         </Text>
@@ -2132,7 +2168,7 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
                   "alignContent": "center",
                   "alignItems": "center",
                   "color": "#001f23",
-                  "fontSize": 14,
+                  "fontSize": 16,
                   "marginTop": -2,
                   "textAlignVertical": "center",
                 },
@@ -2144,8 +2180,8 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
           themeFontSize="medium"
           themeFontWeight="regular"
           themeIntent="body"
+          themeState="default"
           themeTypeface="neutral"
-          themeVariant="default"
         >
           Amount (AUD)
         </Text>
@@ -2167,8 +2203,11 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
             Object {
               "alignSelf": "stretch",
               "flexGrow": 2,
-              "fontSize": 14,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "height": undefined,
               "marginHorizontal": 8,
+              "maxHeight": 144,
               "paddingVertical": 0,
               "textAlignVertical": "center",
             },
@@ -2179,6 +2218,7 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
           ]
         }
         testID="text-input"
+        themeVariant="text"
       />
     </View>
     <HeroIcon
@@ -2273,7 +2313,7 @@ exports[`TextInput loading renders correctly 1`] = `
       }
       testID="text-input-border"
       themeFocused={false}
-      themeVariant="readonly"
+      themeState="readonly"
     />
     <View
       style={
@@ -2306,6 +2346,7 @@ exports[`TextInput loading renders correctly 1`] = `
             undefined,
           ]
         }
+        themeVariant="text"
       />
       <TextInput
         accessibilityState={
@@ -2323,8 +2364,11 @@ exports[`TextInput loading renders correctly 1`] = `
             Object {
               "alignSelf": "stretch",
               "flexGrow": 2,
-              "fontSize": 14,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "height": undefined,
               "marginHorizontal": 8,
+              "maxHeight": 144,
               "paddingVertical": 0,
               "textAlignVertical": "center",
             },
@@ -2335,6 +2379,7 @@ exports[`TextInput loading renders correctly 1`] = `
           ]
         }
         testID="text-input"
+        themeVariant="text"
       />
     </View>
     <View
@@ -2442,7 +2487,7 @@ exports[`TextInput max length renders correctly 1`] = `
       }
       testID="text-input-border"
       themeFocused={false}
-      themeVariant="error"
+      themeState="error"
     />
     <View
       pointerEvents="none"
@@ -2486,8 +2531,8 @@ exports[`TextInput max length renders correctly 1`] = `
         themeFontSize="small"
         themeFontWeight="regular"
         themeIntent="body"
+        themeState="error"
         themeTypeface="neutral"
-        themeVariant="error"
       >
         *
       </Text>
@@ -2516,8 +2561,8 @@ exports[`TextInput max length renders correctly 1`] = `
         themeFontSize="small"
         themeFontWeight="regular"
         themeIntent="body"
+        themeState="error"
         themeTypeface="neutral"
-        themeVariant="error"
       >
         Shout out
       </Text>
@@ -2555,8 +2600,11 @@ exports[`TextInput max length renders correctly 1`] = `
             Object {
               "alignSelf": "stretch",
               "flexGrow": 2,
-              "fontSize": 14,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "height": undefined,
               "marginHorizontal": 8,
+              "maxHeight": 144,
               "paddingVertical": 0,
               "textAlignVertical": "center",
             },
@@ -2567,6 +2615,7 @@ exports[`TextInput max length renders correctly 1`] = `
           ]
         }
         testID="text-input"
+        themeVariant="text"
         value="shout out Tung Van"
       />
     </View>
@@ -2680,8 +2729,8 @@ exports[`TextInput max length renders correctly 1`] = `
         themeFontSize="small"
         themeFontWeight="regular"
         themeIntent="body"
+        themeState="error"
         themeTypeface="neutral"
-        themeVariant="error"
       >
         18
         /
@@ -2742,7 +2791,7 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
       }
       testID="text-input-border"
       themeFocused={false}
-      themeVariant="error"
+      themeState="error"
     />
     <View
       pointerEvents="none"
@@ -2786,8 +2835,8 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
         themeFontSize="small"
         themeFontWeight="regular"
         themeIntent="body"
+        themeState="error"
         themeTypeface="neutral"
-        themeVariant="error"
       >
         *
       </Text>
@@ -2816,8 +2865,8 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
         themeFontSize="small"
         themeFontWeight="regular"
         themeIntent="body"
+        themeState="error"
         themeTypeface="neutral"
-        themeVariant="error"
       >
         Shout out
       </Text>
@@ -2855,8 +2904,11 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
             Object {
               "alignSelf": "stretch",
               "flexGrow": 2,
-              "fontSize": 14,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "height": undefined,
               "marginHorizontal": 8,
+              "maxHeight": 144,
               "paddingVertical": 0,
               "textAlignVertical": "center",
             },
@@ -2867,6 +2919,7 @@ exports[`TextInput max length renders correctly with hide character count 1`] =
           ]
         }
         testID="text-input"
+        themeVariant="text"
         value="shout out Tung Van"
       />
     </View>
@@ -3007,7 +3060,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
       }
       testID="text-input-border"
       themeFocused={false}
-      themeVariant="default"
+      themeState="default"
     />
     <HeroIcon
       name="dollar-sign"
@@ -3055,6 +3108,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
             undefined,
           ]
         }
+        themeVariant="text"
       >
         <Text
           allowFontScaling={false}
@@ -3070,7 +3124,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
               Array [
                 Object {
                   "color": "#de350b",
-                  "fontSize": 14,
+                  "fontSize": 16,
                 },
                 undefined,
               ],
@@ -3079,8 +3133,8 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
           themeFontSize="medium"
           themeFontWeight="regular"
           themeIntent="body"
+          themeState="default"
           themeTypeface="neutral"
-          themeVariant="default"
         >
           *
         </Text>
@@ -3100,7 +3154,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
                   "alignContent": "center",
                   "alignItems": "center",
                   "color": "#001f23",
-                  "fontSize": 14,
+                  "fontSize": 16,
                   "marginTop": -2,
                   "textAlignVertical": "center",
                 },
@@ -3112,8 +3166,8 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
           themeFontSize="medium"
           themeFontWeight="regular"
           themeIntent="body"
+          themeState="default"
           themeTypeface="neutral"
-          themeVariant="default"
         >
           Amount (AUD)
         </Text>
@@ -3135,8 +3189,11 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
             Object {
               "alignSelf": "stretch",
               "flexGrow": 2,
-              "fontSize": 14,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "height": undefined,
               "marginHorizontal": 8,
+              "maxHeight": 144,
               "paddingVertical": 0,
               "textAlignVertical": "center",
             },
@@ -3147,6 +3204,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
           ]
         }
         testID="text-input"
+        themeVariant="text"
       />
     </View>
   </View>
@@ -3253,7 +3311,7 @@ exports[`TextInput readonly renders correctly 1`] = `
       }
       testID="text-input-border"
       themeFocused={false}
-      themeVariant="readonly"
+      themeState="readonly"
     />
     <View
       pointerEvents="none"
@@ -3297,8 +3355,8 @@ exports[`TextInput readonly renders correctly 1`] = `
         themeFontSize="small"
         themeFontWeight="regular"
         themeIntent="body"
+        themeState="readonly"
         themeTypeface="neutral"
-        themeVariant="readonly"
       >
         *
       </Text>
@@ -3327,8 +3385,8 @@ exports[`TextInput readonly renders correctly 1`] = `
         themeFontSize="small"
         themeFontWeight="regular"
         themeIntent="body"
+        themeState="readonly"
         themeTypeface="neutral"
-        themeVariant="readonly"
       >
         Amount (AUD)
       </Text>
@@ -3379,8 +3437,11 @@ exports[`TextInput readonly renders correctly 1`] = `
             Object {
               "alignSelf": "stretch",
               "flexGrow": 2,
-              "fontSize": 14,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "height": undefined,
               "marginHorizontal": 8,
+              "maxHeight": 144,
               "paddingVertical": 0,
               "textAlignVertical": "center",
             },
@@ -3391,6 +3452,7 @@ exports[`TextInput readonly renders correctly 1`] = `
           ]
         }
         testID="text-input"
+        themeVariant="text"
         value="100"
       />
     </View>
@@ -3486,7 +3548,7 @@ exports[`TextInput ref ref methods work correctly 1`] = `
       }
       testID="text-input-border"
       themeFocused={false}
-      themeVariant="filled"
+      themeState="filled"
     />
     <View
       pointerEvents="none"
@@ -3533,8 +3595,8 @@ exports[`TextInput ref ref methods work correctly 1`] = `
         themeFontSize="small"
         themeFontWeight="regular"
         themeIntent="body"
+        themeState="filled"
         themeTypeface="neutral"
-        themeVariant="filled"
       >
         Amount (AUD)
       </Text>
@@ -3570,8 +3632,11 @@ exports[`TextInput ref ref methods work correctly 1`] = `
             Object {
               "alignSelf": "stretch",
               "flexGrow": 2,
-              "fontSize": 14,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "height": undefined,
               "marginHorizontal": 8,
+              "maxHeight": 144,
               "paddingVertical": 0,
               "textAlignVertical": "center",
             },
@@ -3582,6 +3647,7 @@ exports[`TextInput ref ref methods work correctly 1`] = `
           ]
         }
         testID="text-input"
+        themeVariant="text"
         value="2000"
       />
     </View>
@@ -3662,7 +3728,7 @@ exports[`TextInput required renders correctly 1`] = `
       }
       testID="text-input-border"
       themeFocused={false}
-      themeVariant="default"
+      themeState="default"
     />
     <HeroIcon
       name="dollar-sign"
@@ -3710,6 +3776,7 @@ exports[`TextInput required renders correctly 1`] = `
             undefined,
           ]
         }
+        themeVariant="text"
       >
         <Text
           allowFontScaling={false}
@@ -3725,7 +3792,7 @@ exports[`TextInput required renders correctly 1`] = `
               Array [
                 Object {
                   "color": "#de350b",
-                  "fontSize": 14,
+                  "fontSize": 16,
                 },
                 undefined,
               ],
@@ -3734,8 +3801,8 @@ exports[`TextInput required renders correctly 1`] = `
           themeFontSize="medium"
           themeFontWeight="regular"
           themeIntent="body"
+          themeState="default"
           themeTypeface="neutral"
-          themeVariant="default"
         >
           *
         </Text>
@@ -3755,7 +3822,7 @@ exports[`TextInput required renders correctly 1`] = `
                   "alignContent": "center",
                   "alignItems": "center",
                   "color": "#001f23",
-                  "fontSize": 14,
+                  "fontSize": 16,
                   "marginTop": -2,
                   "textAlignVertical": "center",
                 },
@@ -3767,8 +3834,8 @@ exports[`TextInput required renders correctly 1`] = `
           themeFontSize="medium"
           themeFontWeight="regular"
           themeIntent="body"
+          themeState="default"
           themeTypeface="neutral"
-          themeVariant="default"
         >
           Amount (AUD)
         </Text>
@@ -3790,8 +3857,11 @@ exports[`TextInput required renders correctly 1`] = `
             Object {
               "alignSelf": "stretch",
               "flexGrow": 2,
-              "fontSize": 14,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "height": undefined,
               "marginHorizontal": 8,
+              "maxHeight": 144,
               "paddingVertical": 0,
               "textAlignVertical": "center",
             },
@@ -3802,6 +3872,7 @@ exports[`TextInput required renders correctly 1`] = `
           ]
         }
         testID="text-input"
+        themeVariant="text"
       />
     </View>
     <HeroIcon
@@ -3845,3 +3916,184 @@ exports[`TextInput required renders correctly 1`] = `
   </View>
 </View>
 `;
+exports[`TextInput variants renders textarea variant correctly 1`] = `
+<View
+  pointerEvents="auto"
+  style={
+    Array [
+      Object {
+        "marginTop": 8,
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 8,
+          "flexDirection": "row",
+          "padding": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          Array [
+            Object {
+              "backgroundColor": "#ffffff",
+            },
+            undefined,
+          ],
+        ]
+      }
+      testID="text-input-border"
+      themeFocused={false}
+      themeState="filled"
+    />
+    <View
+      pointerEvents="none"
+      style={
+        Array [
+          Object {
+            "backgroundColor": "#ffffff",
+            "flexDirection": "row",
+            "left": 16,
+            "paddingHorizontal": 4,
+            "position": "absolute",
+            "top": -10,
+            "zIndex": 1,
+          },
+          Object {
+            "backgroundColor": "#ffffff",
+          },
+        ]
+      }
+      testID="label-container"
+    >
+      <Text
+        allowFontScaling={false}
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 12,
+              "letterSpacing": 0.36,
+              "lineHeight": 20,
+            },
+            Array [
+              Object {
+                "color": "#001f23",
+              },
+              Object {
+                "backgroundColor": "#ffffff",
+              },
+            ],
+          ]
+        }
+        testID="input-label"
+        themeFontSize="small"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeState="filled"
+        themeTypeface="neutral"
+      >
+        Amount (AUD)
+      </Text>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "alignSelf": "stretch",
+            "flexDirection": "row",
+            "flexGrow": 2,
+            "flexShrink": 1,
+          },
+          undefined,
+        ]
+      }
+    >
+      <TextInput
+        accessibilityState={
+          Object {
+            "disabled": false,
+          }
+        }
+        allowFontScaling={false}
+        editable={true}
+        multiline={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        placeholder=" "
+        style={
+          Array [
+            Object {
+              "alignSelf": "stretch",
+              "flexGrow": 2,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "height": 144,
+              "marginHorizontal": 8,
+              "maxHeight": 144,
+              "paddingVertical": 0,
+              "textAlignVertical": "top",
+            },
+            Object {
+              "backgroundColor": "#ffffff",
+              "color": "#001f23",
+            },
+          ]
+        }
+        testID="text-input"
+        themeVariant="textarea"
+        value="2000"
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "minHeight": 16,
+          "paddingLeft": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          },
+          undefined,
+        ]
+      }
+    />
+  </View>
+</View>
+`;