@hero-design/rn 8.22.0 → 8.24.0-alpha.0

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

@@ -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
         /
@@ -2692,6 +2741,275 @@ exports[`TextInput max length renders correctly 1`] = `
 </View>
 `;
 
+exports[`TextInput max length renders correctly with hide character count 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": "#de350b",
+            "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="error"
+    />
+    <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": "#de350b",
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeFontSize="small"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeState="error"
+        themeTypeface="neutral"
+      >
+        *
+      </Text>
+      <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="error"
+        themeTypeface="neutral"
+      >
+        Shout out
+      </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}
+        maxLength={255}
+        multiline={true}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        placeholder=" "
+        style={
+          Array [
+            Object {
+              "alignSelf": "stretch",
+              "flexGrow": 2,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "height": undefined,
+              "marginHorizontal": 8,
+              "maxHeight": 144,
+              "paddingVertical": 0,
+              "textAlignVertical": "center",
+            },
+            Object {
+              "backgroundColor": "#ffffff",
+              "color": "#001f23",
+            },
+          ]
+        }
+        testID="text-input"
+        themeVariant="text"
+        value="shout out Tung Van"
+      />
+    </View>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "minHeight": 16,
+          "paddingLeft": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flex": 1,
+              "flexDirection": "row",
+              "flexGrow": 4,
+              "marginRight": 4,
+            },
+            undefined,
+          ]
+        }
+      >
+        <HeroIcon
+          name="circle-info"
+          style={
+            Array [
+              Object {
+                "color": "#de350b",
+                "fontSize": 16,
+              },
+              undefined,
+            ]
+          }
+          testID="input-error-icon"
+          themeIntent="danger"
+          themeSize="xsmall"
+        />
+        <Text
+          allowFontScaling={false}
+          style={
+            Array [
+              Object {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.42,
+                "lineHeight": 22,
+              },
+              Array [
+                Object {
+                  "color": "#de350b",
+                  "fontSize": 12,
+                  "marginLeft": 4,
+                },
+                undefined,
+              ],
+            ]
+          }
+          testID="input-error-message"
+          themeFontSize="medium"
+          themeFontWeight="regular"
+          themeIntent="body"
+          themeTypeface="neutral"
+        >
+          must not exceed character limit
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
 exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
 <View
   pointerEvents="auto"
@@ -2742,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"
@@ -2790,6 +3108,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
             undefined,
           ]
         }
+        themeVariant="text"
       >
         <Text
           allowFontScaling={false}
@@ -2805,7 +3124,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
               Array [
                 Object {
                   "color": "#de350b",
-                  "fontSize": 14,
+                  "fontSize": 16,
                 },
                 undefined,
               ],
@@ -2814,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>
@@ -2835,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",
                 },
@@ -2847,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>
@@ -2870,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",
             },
@@ -2882,6 +3204,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
           ]
         }
         testID="text-input"
+        themeVariant="text"
       />
     </View>
   </View>
@@ -2988,7 +3311,7 @@ exports[`TextInput readonly renders correctly 1`] = `
       }
       testID="text-input-border"
       themeFocused={false}
-      themeVariant="readonly"
+      themeState="readonly"
     />
     <View
       pointerEvents="none"
@@ -3032,8 +3355,8 @@ exports[`TextInput readonly renders correctly 1`] = `
         themeFontSize="small"
         themeFontWeight="regular"
         themeIntent="body"
+        themeState="readonly"
         themeTypeface="neutral"
-        themeVariant="readonly"
       >
         *
       </Text>
@@ -3062,8 +3385,8 @@ exports[`TextInput readonly renders correctly 1`] = `
         themeFontSize="small"
         themeFontWeight="regular"
         themeIntent="body"
+        themeState="readonly"
         themeTypeface="neutral"
-        themeVariant="readonly"
       >
         Amount (AUD)
       </Text>
@@ -3114,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",
             },
@@ -3126,6 +3452,7 @@ exports[`TextInput readonly renders correctly 1`] = `
           ]
         }
         testID="text-input"
+        themeVariant="text"
         value="100"
       />
     </View>
@@ -3221,7 +3548,7 @@ exports[`TextInput ref ref methods work correctly 1`] = `
       }
       testID="text-input-border"
       themeFocused={false}
-      themeVariant="filled"
+      themeState="filled"
     />
     <View
       pointerEvents="none"
@@ -3268,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>
@@ -3305,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",
             },
@@ -3317,6 +3647,7 @@ exports[`TextInput ref ref methods work correctly 1`] = `
           ]
         }
         testID="text-input"
+        themeVariant="text"
         value="2000"
       />
     </View>
@@ -3397,7 +3728,7 @@ exports[`TextInput required renders correctly 1`] = `
       }
       testID="text-input-border"
       themeFocused={false}
-      themeVariant="default"
+      themeState="default"
     />
     <HeroIcon
       name="dollar-sign"
@@ -3445,6 +3776,7 @@ exports[`TextInput required renders correctly 1`] = `
             undefined,
           ]
         }
+        themeVariant="text"
       >
         <Text
           allowFontScaling={false}
@@ -3460,7 +3792,7 @@ exports[`TextInput required renders correctly 1`] = `
               Array [
                 Object {
                   "color": "#de350b",
-                  "fontSize": 14,
+                  "fontSize": 16,
                 },
                 undefined,
               ],
@@ -3469,8 +3801,8 @@ exports[`TextInput required renders correctly 1`] = `
           themeFontSize="medium"
           themeFontWeight="regular"
           themeIntent="body"
+          themeState="default"
           themeTypeface="neutral"
-          themeVariant="default"
         >
           *
         </Text>
@@ -3490,7 +3822,7 @@ exports[`TextInput required renders correctly 1`] = `
                   "alignContent": "center",
                   "alignItems": "center",
                   "color": "#001f23",
-                  "fontSize": 14,
+                  "fontSize": 16,
                   "marginTop": -2,
                   "textAlignVertical": "center",
                 },
@@ -3502,8 +3834,8 @@ exports[`TextInput required renders correctly 1`] = `
           themeFontSize="medium"
           themeFontWeight="regular"
           themeIntent="body"
+          themeState="default"
           themeTypeface="neutral"
-          themeVariant="default"
         >
           Amount (AUD)
         </Text>
@@ -3525,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",
             },
@@ -3537,6 +3872,7 @@ exports[`TextInput required renders correctly 1`] = `
           ]
         }
         testID="text-input"
+        themeVariant="text"
       />
     </View>
     <HeroIcon
@@ -3580,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>
+`;