@hero-design/rn-work-uikit 1.2.0-alpha.1 → 1.2.0

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

@@ -23,6 +23,9 @@ exports[`TextInput when user applies custom styling should respect user-provided
       {},
     ]
   }
+  themeFocused={false}
+  themeHasError={false}
+  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -103,7 +106,13 @@ exports[`TextInput when user applies custom styling should respect user-provided
       }
       themeVariant="text"
     >
-      <AnimatedView>
+      <AnimatedView
+        style={
+          {
+            "flexDirection": "row",
+          }
+        }
+      >
         <Text
           allowFontScaling={false}
           numberOfLines={1}
@@ -139,7 +148,7 @@ exports[`TextInput when user applies custom styling should respect user-provided
         </Text>
       </AnimatedView>
     </AnimatedView>
-    <View
+    <Pressable
       style={
         [
           [
@@ -149,29 +158,16 @@ exports[`TextInput when user applies custom styling should respect user-provided
               "flexGrow": 2,
               "flexShrink": 1,
               "gap": 3.9230769230769234,
+              "opacity": 1,
             },
           ],
           undefined,
         ]
       }
+      themeOpacity={1}
     >
-      <AnimatedView
-        style={
-          {
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
-          }
-        }
-      >
+      <View>
         <View
-          accessibilityElementsHidden={false}
           testID="input-prefix"
         >
           <Text
@@ -209,22 +205,12 @@ exports[`TextInput when user applies custom styling should respect user-provided
             
           </Text>
         </View>
-      </AnimatedView>
-      <AnimatedView
-        accessibilityElementsHidden={false}
+      </View>
+      <View
         accessibilityLabel="Text input field"
         style={
           {
             "flex": 1,
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
           }
         }
         testID="input-row-input-wrapper"
@@ -271,8 +257,8 @@ exports[`TextInput when user applies custom styling should respect user-provided
           themeVariant="text"
           value="2000"
         />
-      </AnimatedView>
-    </View>
+      </View>
+    </Pressable>
     <View
       style={
         [
@@ -384,6 +370,9 @@ exports[`TextInput when user chooses textarea variant should provide multiline t
       {},
     ]
   }
+  themeFocused={false}
+  themeHasError={false}
+  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -464,7 +453,13 @@ exports[`TextInput when user chooses textarea variant should provide multiline t
       }
       themeVariant="textarea"
     >
-      <AnimatedView>
+      <AnimatedView
+        style={
+          {
+            "flexDirection": "row",
+          }
+        }
+      >
         <Text
           allowFontScaling={false}
           numberOfLines={1}
@@ -497,11 +492,39 @@ exports[`TextInput when user chooses textarea variant should provide multiline t
           themeState="filled"
         >
           Amount (AUD)
+        </Text>
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 11.76923076923077,
+                  "letterSpacing": 0.36,
+                  "lineHeight": 15.76923076923077,
+                },
+              ],
+              [
+                [
+                  {
+                    "color": "#808f91",
+                  },
+                ],
+                undefined,
+              ],
+            ]
+          }
+          themeFontWeight="regular"
+          themeIntent="body"
+          themeState="filled"
+        >
            (Optional)
         </Text>
       </AnimatedView>
     </AnimatedView>
-    <View
+    <Pressable
       style={
         [
           [
@@ -511,42 +534,20 @@ exports[`TextInput when user chooses textarea variant should provide multiline t
               "flexGrow": 2,
               "flexShrink": 1,
               "gap": 3.9230769230769234,
+              "opacity": 1,
             },
           ],
           undefined,
         ]
       }
+      themeOpacity={1}
     >
-      <AnimatedView
-        style={
-          {
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
-          }
-        }
-      />
-      <AnimatedView
-        accessibilityElementsHidden={false}
+      <View />
+      <View
         accessibilityLabel="Text input field"
         style={
           {
             "flex": 1,
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
           }
         }
         testID="input-row-input-wrapper"
@@ -592,8 +593,8 @@ exports[`TextInput when user chooses textarea variant should provide multiline t
           themeVariant="textarea"
           value="2000"
         />
-      </AnimatedView>
-    </View>
+      </View>
+    </Pressable>
     <View
       style={
         [
@@ -649,7 +650,9 @@ exports[`TextInput when user encounters a disabled field should display content
       {},
     ]
   }
-  testID="disabled-text-input"
+  themeFocused={false}
+  themeHasError={false}
+  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -730,7 +733,13 @@ exports[`TextInput when user encounters a disabled field should display content
       }
       themeVariant="text"
     >
-      <AnimatedView>
+      <AnimatedView
+        style={
+          {
+            "flexDirection": "row",
+          }
+        }
+      >
         <Text
           allowFontScaling={false}
           numberOfLines={1}
@@ -764,9 +773,38 @@ exports[`TextInput when user encounters a disabled field should display content
         >
           Amount (AUD)
         </Text>
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 11.76923076923077,
+                  "letterSpacing": 0.36,
+                  "lineHeight": 15.76923076923077,
+                },
+              ],
+              [
+                [
+                  {
+                    "color": "#bfc1c5",
+                  },
+                ],
+                undefined,
+              ],
+            ]
+          }
+          themeFontWeight="regular"
+          themeIntent="body"
+          themeState="disabled"
+        >
+           (Optional)
+        </Text>
       </AnimatedView>
     </AnimatedView>
-    <View
+    <Pressable
       style={
         [
           [
@@ -776,42 +814,20 @@ exports[`TextInput when user encounters a disabled field should display content
               "flexGrow": 2,
               "flexShrink": 1,
               "gap": 3.9230769230769234,
+              "opacity": 1,
             },
           ],
           undefined,
         ]
       }
+      themeOpacity={1}
     >
-      <AnimatedView
-        style={
-          {
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
-          }
-        }
-      />
-      <AnimatedView
-        accessibilityElementsHidden={false}
+      <View />
+      <View
         accessibilityLabel="Text input field"
         style={
           {
             "flex": 1,
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
           }
         }
         testID="input-row-input-wrapper"
@@ -856,8 +872,8 @@ exports[`TextInput when user encounters a disabled field should display content
           themeVariant="text"
           value="100"
         />
-      </AnimatedView>
-    </View>
+      </View>
+    </Pressable>
     <View
       style={
         [
@@ -913,7 +929,9 @@ exports[`TextInput when user encounters a read-only field should display content
       {},
     ]
   }
-  testID="readonly-input"
+  themeFocused={false}
+  themeHasError={false}
+  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -994,7 +1012,13 @@ exports[`TextInput when user encounters a read-only field should display content
       }
       themeVariant="text"
     >
-      <AnimatedView>
+      <AnimatedView
+        style={
+          {
+            "flexDirection": "row",
+          }
+        }
+      >
         <Text
           allowFontScaling={false}
           numberOfLines={1}
@@ -1027,11 +1051,39 @@ exports[`TextInput when user encounters a read-only field should display content
           themeState="readonly"
         >
           Amount (AUD)
+        </Text>
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 11.76923076923077,
+                  "letterSpacing": 0.36,
+                  "lineHeight": 15.76923076923077,
+                },
+              ],
+              [
+                [
+                  {
+                    "color": "#808f91",
+                  },
+                ],
+                undefined,
+              ],
+            ]
+          }
+          themeFontWeight="regular"
+          themeIntent="body"
+          themeState="readonly"
+        >
            (Optional)
         </Text>
       </AnimatedView>
     </AnimatedView>
-    <View
+    <Pressable
       style={
         [
           [
@@ -1041,29 +1093,16 @@ exports[`TextInput when user encounters a read-only field should display content
               "flexGrow": 2,
               "flexShrink": 1,
               "gap": 3.9230769230769234,
+              "opacity": 1,
             },
           ],
           undefined,
         ]
       }
+      themeOpacity={1}
     >
-      <AnimatedView
-        style={
-          {
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
-          }
-        }
-      >
+      <View>
         <View
-          accessibilityElementsHidden={false}
           testID="input-prefix"
         >
           <Text
@@ -1101,22 +1140,12 @@ exports[`TextInput when user encounters a read-only field should display content
             
           </Text>
         </View>
-      </AnimatedView>
-      <AnimatedView
-        accessibilityElementsHidden={false}
+      </View>
+      <View
         accessibilityLabel="Text input field"
         style={
           {
             "flex": 1,
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
           }
         }
         testID="input-row-input-wrapper"
@@ -1161,8 +1190,8 @@ exports[`TextInput when user encounters a read-only field should display content
           themeVariant="text"
           value="Read-only value"
         />
-      </AnimatedView>
-    </View>
+      </View>
+    </Pressable>
     <View
       style={
         [
@@ -1253,6 +1282,9 @@ exports[`TextInput when user has entered text should show the input content and
       {},
     ]
   }
+  themeFocused={false}
+  themeHasError={false}
+  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -1333,7 +1365,13 @@ exports[`TextInput when user has entered text should show the input content and
       }
       themeVariant="text"
     >
-      <AnimatedView>
+      <AnimatedView
+        style={
+          {
+            "flexDirection": "row",
+          }
+        }
+      >
         <Text
           allowFontScaling={false}
           numberOfLines={1}
@@ -1366,11 +1404,39 @@ exports[`TextInput when user has entered text should show the input content and
           themeState="filled"
         >
           Amount (AUD)
+        </Text>
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 11.76923076923077,
+                  "letterSpacing": 0.36,
+                  "lineHeight": 15.76923076923077,
+                },
+              ],
+              [
+                [
+                  {
+                    "color": "#808f91",
+                  },
+                ],
+                undefined,
+              ],
+            ]
+          }
+          themeFontWeight="regular"
+          themeIntent="body"
+          themeState="filled"
+        >
            (Optional)
         </Text>
       </AnimatedView>
     </AnimatedView>
-    <View
+    <Pressable
       style={
         [
           [
@@ -1380,29 +1446,16 @@ exports[`TextInput when user has entered text should show the input content and
               "flexGrow": 2,
               "flexShrink": 1,
               "gap": 3.9230769230769234,
+              "opacity": 1,
             },
           ],
           undefined,
         ]
       }
+      themeOpacity={1}
     >
-      <AnimatedView
-        style={
-          {
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
-          }
-        }
-      >
+      <View>
         <View
-          accessibilityElementsHidden={false}
           testID="input-prefix"
         >
           <Text
@@ -1440,22 +1493,12 @@ exports[`TextInput when user has entered text should show the input content and
             
           </Text>
         </View>
-      </AnimatedView>
-      <AnimatedView
-        accessibilityElementsHidden={false}
+      </View>
+      <View
         accessibilityLabel="Text input field"
         style={
           {
             "flex": 1,
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
           }
         }
         testID="input-row-input-wrapper"
@@ -1500,8 +1543,8 @@ exports[`TextInput when user has entered text should show the input content and
           themeVariant="text"
           value="100"
         />
-      </AnimatedView>
-    </View>
+      </View>
+    </Pressable>
     <View
       style={
         [
@@ -1592,6 +1635,9 @@ exports[`TextInput when user interacts with placeholder text starting from empty
       {},
     ]
   }
+  themeFocused={false}
+  themeHasError={false}
+  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -1672,7 +1718,13 @@ exports[`TextInput when user interacts with placeholder text starting from empty
       }
       themeVariant="text"
     >
-      <AnimatedView>
+      <AnimatedView
+        style={
+          {
+            "flexDirection": "row",
+          }
+        }
+      >
         <Text
           allowFontScaling={false}
           numberOfLines={1}
@@ -1708,7 +1760,7 @@ exports[`TextInput when user interacts with placeholder text starting from empty
         </Text>
       </AnimatedView>
     </AnimatedView>
-    <View
+    <Pressable
       style={
         [
           [
@@ -1718,29 +1770,16 @@ exports[`TextInput when user interacts with placeholder text starting from empty
               "flexGrow": 2,
               "flexShrink": 1,
               "gap": 3.9230769230769234,
+              "opacity": 0,
             },
           ],
           undefined,
         ]
       }
+      themeOpacity={0}
     >
-      <AnimatedView
-        style={
-          {
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
-          }
-        }
-      >
+      <View>
         <View
-          accessibilityElementsHidden={true}
           testID="input-prefix"
         >
           <Text
@@ -1778,22 +1817,12 @@ exports[`TextInput when user interacts with placeholder text starting from empty
             
           </Text>
         </View>
-      </AnimatedView>
-      <AnimatedView
-        accessibilityElementsHidden={true}
+      </View>
+      <View
         accessibilityLabel="Text input field"
         style={
           {
             "flex": 1,
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
           }
         }
         testID="input-row-input-wrapper"
@@ -1837,8 +1866,8 @@ exports[`TextInput when user interacts with placeholder text starting from empty
           testID="text-input"
           themeVariant="text"
         />
-      </AnimatedView>
-    </View>
+      </View>
+    </Pressable>
     <View
       style={
         [
@@ -1916,6 +1945,9 @@ exports[`TextInput when user needs programmatic control should provide ref metho
       {},
     ]
   }
+  themeFocused={false}
+  themeHasError={false}
+  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -1996,7 +2028,13 @@ exports[`TextInput when user needs programmatic control should provide ref metho
       }
       themeVariant="text"
     >
-      <AnimatedView>
+      <AnimatedView
+        style={
+          {
+            "flexDirection": "row",
+          }
+        }
+      >
         <Text
           allowFontScaling={false}
           numberOfLines={1}
@@ -2029,11 +2067,39 @@ exports[`TextInput when user needs programmatic control should provide ref metho
           themeState="filled"
         >
           Amount (AUD)
+        </Text>
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 11.76923076923077,
+                  "letterSpacing": 0.36,
+                  "lineHeight": 15.76923076923077,
+                },
+              ],
+              [
+                [
+                  {
+                    "color": "#808f91",
+                  },
+                ],
+                undefined,
+              ],
+            ]
+          }
+          themeFontWeight="regular"
+          themeIntent="body"
+          themeState="filled"
+        >
            (Optional)
         </Text>
       </AnimatedView>
     </AnimatedView>
-    <View
+    <Pressable
       style={
         [
           [
@@ -2043,42 +2109,20 @@ exports[`TextInput when user needs programmatic control should provide ref metho
               "flexGrow": 2,
               "flexShrink": 1,
               "gap": 3.9230769230769234,
+              "opacity": 1,
             },
           ],
           undefined,
         ]
       }
+      themeOpacity={1}
     >
-      <AnimatedView
-        style={
-          {
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
-          }
-        }
-      />
-      <AnimatedView
-        accessibilityElementsHidden={false}
+      <View />
+      <View
         accessibilityLabel="Text input field"
         style={
           {
             "flex": 1,
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
           }
         }
         testID="input-row-input-wrapper"
@@ -2123,8 +2167,8 @@ exports[`TextInput when user needs programmatic control should provide ref metho
           themeVariant="text"
           value="2000"
         />
-      </AnimatedView>
-    </View>
+      </View>
+    </Pressable>
     <View
       style={
         [
@@ -2180,6 +2224,9 @@ exports[`TextInput when user provides default values starting with pre-filled co
       {},
     ]
   }
+  themeFocused={false}
+  themeHasError={false}
+  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -2260,7 +2307,13 @@ exports[`TextInput when user provides default values starting with pre-filled co
       }
       themeVariant="text"
     >
-      <AnimatedView>
+      <AnimatedView
+        style={
+          {
+            "flexDirection": "row",
+          }
+        }
+      >
         <Text
           allowFontScaling={false}
           numberOfLines={1}
@@ -2296,7 +2349,7 @@ exports[`TextInput when user provides default values starting with pre-filled co
         </Text>
       </AnimatedView>
     </AnimatedView>
-    <View
+    <Pressable
       style={
         [
           [
@@ -2306,29 +2359,16 @@ exports[`TextInput when user provides default values starting with pre-filled co
               "flexGrow": 2,
               "flexShrink": 1,
               "gap": 3.9230769230769234,
+              "opacity": 1,
             },
           ],
           undefined,
         ]
       }
+      themeOpacity={1}
     >
-      <AnimatedView
-        style={
-          {
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
-          }
-        }
-      >
+      <View>
         <View
-          accessibilityElementsHidden={false}
           testID="input-prefix"
         >
           <Text
@@ -2366,22 +2406,12 @@ exports[`TextInput when user provides default values starting with pre-filled co
             
           </Text>
         </View>
-      </AnimatedView>
-      <AnimatedView
-        accessibilityElementsHidden={false}
+      </View>
+      <View
         accessibilityLabel="Text input field"
         style={
           {
             "flex": 1,
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
           }
         }
         testID="input-row-input-wrapper"
@@ -2427,8 +2457,8 @@ exports[`TextInput when user provides default values starting with pre-filled co
           testID="text-input"
           themeVariant="text"
         />
-      </AnimatedView>
-    </View>
+      </View>
+    </Pressable>
     <View
       style={
         [
@@ -2540,6 +2570,9 @@ exports[`TextInput when user provides default values when both default and contr
       {},
     ]
   }
+  themeFocused={false}
+  themeHasError={false}
+  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -2620,7 +2653,13 @@ exports[`TextInput when user provides default values when both default and contr
       }
       themeVariant="text"
     >
-      <AnimatedView>
+      <AnimatedView
+        style={
+          {
+            "flexDirection": "row",
+          }
+        }
+      >
         <Text
           allowFontScaling={false}
           numberOfLines={1}
@@ -2656,7 +2695,7 @@ exports[`TextInput when user provides default values when both default and contr
         </Text>
       </AnimatedView>
     </AnimatedView>
-    <View
+    <Pressable
       style={
         [
           [
@@ -2666,29 +2705,16 @@ exports[`TextInput when user provides default values when both default and contr
               "flexGrow": 2,
               "flexShrink": 1,
               "gap": 3.9230769230769234,
+              "opacity": 1,
             },
           ],
           undefined,
         ]
       }
+      themeOpacity={1}
     >
-      <AnimatedView
-        style={
-          {
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
-          }
-        }
-      >
+      <View>
         <View
-          accessibilityElementsHidden={false}
           testID="input-prefix"
         >
           <Text
@@ -2726,22 +2752,12 @@ exports[`TextInput when user provides default values when both default and contr
             
           </Text>
         </View>
-      </AnimatedView>
-      <AnimatedView
-        accessibilityElementsHidden={false}
+      </View>
+      <View
         accessibilityLabel="Text input field"
         style={
           {
             "flex": 1,
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
           }
         }
         testID="input-row-input-wrapper"
@@ -2788,8 +2804,8 @@ exports[`TextInput when user provides default values when both default and contr
           themeVariant="text"
           value="2000"
         />
-      </AnimatedView>
-    </View>
+      </View>
+    </Pressable>
     <View
       style={
         [
@@ -2901,6 +2917,9 @@ exports[`TextInput when user sees a loading state should show loading indicator
       {},
     ]
   }
+  themeFocused={false}
+  themeHasError={false}
+  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -2981,7 +3000,13 @@ exports[`TextInput when user sees a loading state should show loading indicator
       }
       themeVariant="text"
     >
-      <AnimatedView>
+      <AnimatedView
+        style={
+          {
+            "flexDirection": "row",
+          }
+        }
+      >
         <Text
           allowFontScaling={false}
           numberOfLines={1}
@@ -3014,11 +3039,39 @@ exports[`TextInput when user sees a loading state should show loading indicator
           themeState="readonly"
         >
           Amount (AUD)
+        </Text>
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 11.76923076923077,
+                  "letterSpacing": 0.36,
+                  "lineHeight": 15.76923076923077,
+                },
+              ],
+              [
+                [
+                  {
+                    "color": "#808f91",
+                  },
+                ],
+                undefined,
+              ],
+            ]
+          }
+          themeFontWeight="regular"
+          themeIntent="body"
+          themeState="readonly"
+        >
            (Optional)
         </Text>
       </AnimatedView>
     </AnimatedView>
-    <View
+    <Pressable
       style={
         [
           [
@@ -3028,29 +3081,16 @@ exports[`TextInput when user sees a loading state should show loading indicator
               "flexGrow": 2,
               "flexShrink": 1,
               "gap": 3.9230769230769234,
+              "opacity": 1,
             },
           ],
           undefined,
-        ]
-      }
-    >
-      <AnimatedView
-        style={
-          {
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
-          }
-        }
-      >
+        ]
+      }
+      themeOpacity={1}
+    >
+      <View>
         <View
-          accessibilityElementsHidden={false}
           testID="input-prefix"
         >
           <Text
@@ -3088,22 +3128,12 @@ exports[`TextInput when user sees a loading state should show loading indicator
             
           </Text>
         </View>
-      </AnimatedView>
-      <AnimatedView
-        accessibilityElementsHidden={false}
+      </View>
+      <View
         accessibilityLabel="Text input field"
         style={
           {
             "flex": 1,
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
           }
         }
         testID="input-row-input-wrapper"
@@ -3148,8 +3178,8 @@ exports[`TextInput when user sees a loading state should show loading indicator
           themeVariant="text"
           value="100"
         />
-      </AnimatedView>
-    </View>
+      </View>
+    </Pressable>
     <View
       style={
         [
@@ -3259,6 +3289,9 @@ exports[`TextInput when user sees a required field should indicate the field is
       {},
     ]
   }
+  themeFocused={false}
+  themeHasError={false}
+  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -3339,7 +3372,13 @@ exports[`TextInput when user sees a required field should indicate the field is
       }
       themeVariant="text"
     >
-      <AnimatedView>
+      <AnimatedView
+        style={
+          {
+            "flexDirection": "row",
+          }
+        }
+      >
         <Text
           allowFontScaling={false}
           numberOfLines={1}
@@ -3375,7 +3414,7 @@ exports[`TextInput when user sees a required field should indicate the field is
         </Text>
       </AnimatedView>
     </AnimatedView>
-    <View
+    <Pressable
       style={
         [
           [
@@ -3385,29 +3424,16 @@ exports[`TextInput when user sees a required field should indicate the field is
               "flexGrow": 2,
               "flexShrink": 1,
               "gap": 3.9230769230769234,
+              "opacity": 0,
             },
           ],
           undefined,
         ]
       }
+      themeOpacity={0}
     >
-      <AnimatedView
-        style={
-          {
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
-          }
-        }
-      >
+      <View>
         <View
-          accessibilityElementsHidden={true}
           testID="input-prefix"
         >
           <Text
@@ -3445,22 +3471,12 @@ exports[`TextInput when user sees a required field should indicate the field is
             
           </Text>
         </View>
-      </AnimatedView>
-      <AnimatedView
-        accessibilityElementsHidden={true}
+      </View>
+      <View
         accessibilityLabel="Text input field"
         style={
           {
             "flex": 1,
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
           }
         }
         testID="input-row-input-wrapper"
@@ -3504,8 +3520,8 @@ exports[`TextInput when user sees a required field should indicate the field is
           testID="text-input"
           themeVariant="text"
         />
-      </AnimatedView>
-    </View>
+      </View>
+    </Pressable>
     <View
       style={
         [
@@ -3596,6 +3612,9 @@ exports[`TextInput when user sees a textarea with character count should display
       {},
     ]
   }
+  themeFocused={false}
+  themeHasError={false}
+  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -3676,7 +3695,13 @@ exports[`TextInput when user sees a textarea with character count should display
       }
       themeVariant="textarea"
     >
-      <AnimatedView>
+      <AnimatedView
+        style={
+          {
+            "flexDirection": "row",
+          }
+        }
+      >
         <Text
           allowFontScaling={false}
           numberOfLines={1}
@@ -3709,11 +3734,39 @@ exports[`TextInput when user sees a textarea with character count should display
           themeState="filled"
         >
           Amount (AUD)
+        </Text>
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 11.76923076923077,
+                  "letterSpacing": 0.36,
+                  "lineHeight": 15.76923076923077,
+                },
+              ],
+              [
+                [
+                  {
+                    "color": "#808f91",
+                  },
+                ],
+                undefined,
+              ],
+            ]
+          }
+          themeFontWeight="regular"
+          themeIntent="body"
+          themeState="filled"
+        >
            (Optional)
         </Text>
       </AnimatedView>
     </AnimatedView>
-    <View
+    <Pressable
       style={
         [
           [
@@ -3723,29 +3776,16 @@ exports[`TextInput when user sees a textarea with character count should display
               "flexGrow": 2,
               "flexShrink": 1,
               "gap": 3.9230769230769234,
+              "opacity": 1,
             },
           ],
           undefined,
         ]
       }
+      themeOpacity={1}
     >
-      <AnimatedView
-        style={
-          {
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
-          }
-        }
-      >
+      <View>
         <View
-          accessibilityElementsHidden={false}
           testID="input-prefix"
         >
           <Text
@@ -3783,22 +3823,12 @@ exports[`TextInput when user sees a textarea with character count should display
             
           </Text>
         </View>
-      </AnimatedView>
-      <AnimatedView
-        accessibilityElementsHidden={false}
+      </View>
+      <View
         accessibilityLabel="Text input field"
         style={
           {
             "flex": 1,
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
           }
         }
         testID="input-row-input-wrapper"
@@ -3845,8 +3875,8 @@ exports[`TextInput when user sees a textarea with character count should display
           themeVariant="textarea"
           value="100"
         />
-      </AnimatedView>
-    </View>
+      </View>
+    </Pressable>
     <View
       style={
         [
@@ -3972,6 +4002,9 @@ exports[`TextInput when user sees a textarea with character count should hide ch
       {},
     ]
   }
+  themeFocused={false}
+  themeHasError={false}
+  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -4052,7 +4085,13 @@ exports[`TextInput when user sees a textarea with character count should hide ch
       }
       themeVariant="textarea"
     >
-      <AnimatedView>
+      <AnimatedView
+        style={
+          {
+            "flexDirection": "row",
+          }
+        }
+      >
         <Text
           allowFontScaling={false}
           numberOfLines={1}
@@ -4085,11 +4124,39 @@ exports[`TextInput when user sees a textarea with character count should hide ch
           themeState="filled"
         >
           Amount (AUD)
+        </Text>
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 11.76923076923077,
+                  "letterSpacing": 0.36,
+                  "lineHeight": 15.76923076923077,
+                },
+              ],
+              [
+                [
+                  {
+                    "color": "#808f91",
+                  },
+                ],
+                undefined,
+              ],
+            ]
+          }
+          themeFontWeight="regular"
+          themeIntent="body"
+          themeState="filled"
+        >
            (Optional)
         </Text>
       </AnimatedView>
     </AnimatedView>
-    <View
+    <Pressable
       style={
         [
           [
@@ -4099,29 +4166,16 @@ exports[`TextInput when user sees a textarea with character count should hide ch
               "flexGrow": 2,
               "flexShrink": 1,
               "gap": 3.9230769230769234,
+              "opacity": 1,
             },
           ],
           undefined,
         ]
       }
+      themeOpacity={1}
     >
-      <AnimatedView
-        style={
-          {
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
-          }
-        }
-      >
+      <View>
         <View
-          accessibilityElementsHidden={false}
           testID="input-prefix"
         >
           <Text
@@ -4159,22 +4213,12 @@ exports[`TextInput when user sees a textarea with character count should hide ch
             
           </Text>
         </View>
-      </AnimatedView>
-      <AnimatedView
-        accessibilityElementsHidden={false}
+      </View>
+      <View
         accessibilityLabel="Text input field"
         style={
           {
             "flex": 1,
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
           }
         }
         testID="input-row-input-wrapper"
@@ -4221,8 +4265,8 @@ exports[`TextInput when user sees a textarea with character count should hide ch
           themeVariant="textarea"
           value="100"
         />
-      </AnimatedView>
-    </View>
+      </View>
+    </Pressable>
     <View
       style={
         [
@@ -4315,7 +4359,9 @@ exports[`TextInput when user sees an empty input field should display label and
       },
     ]
   }
-  testID="idle-text-input"
+  themeFocused={false}
+  themeHasError={false}
+  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -4396,7 +4442,13 @@ exports[`TextInput when user sees an empty input field should display label and
       }
       themeVariant="text"
     >
-      <AnimatedView>
+      <AnimatedView
+        style={
+          {
+            "flexDirection": "row",
+          }
+        }
+      >
         <Text
           allowFontScaling={false}
           numberOfLines={1}
@@ -4429,11 +4481,39 @@ exports[`TextInput when user sees an empty input field should display label and
           themeState="default"
         >
           Amount (AUD)
+        </Text>
+        <Text
+          allowFontScaling={false}
+          style={
+            [
+              [
+                {
+                  "color": "#001f23",
+                  "fontFamily": "BeVietnamPro-Regular",
+                  "fontSize": 11.76923076923077,
+                  "letterSpacing": 0.36,
+                  "lineHeight": 15.76923076923077,
+                },
+              ],
+              [
+                [
+                  {
+                    "color": "#808f91",
+                  },
+                ],
+                undefined,
+              ],
+            ]
+          }
+          themeFontWeight="regular"
+          themeIntent="body"
+          themeState="default"
+        >
            (Optional)
         </Text>
       </AnimatedView>
     </AnimatedView>
-    <View
+    <Pressable
       style={
         [
           [
@@ -4443,29 +4523,16 @@ exports[`TextInput when user sees an empty input field should display label and
               "flexGrow": 2,
               "flexShrink": 1,
               "gap": 3.9230769230769234,
+              "opacity": 0,
             },
           ],
           undefined,
         ]
       }
+      themeOpacity={0}
     >
-      <AnimatedView
-        style={
-          {
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
-          }
-        }
-      >
+      <View>
         <View
-          accessibilityElementsHidden={true}
           testID="input-prefix"
         >
           <Text
@@ -4503,22 +4570,12 @@ exports[`TextInput when user sees an empty input field should display label and
             
           </Text>
         </View>
-      </AnimatedView>
-      <AnimatedView
-        accessibilityElementsHidden={true}
+      </View>
+      <View
         accessibilityLabel="Text input field"
         style={
           {
             "flex": 1,
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
           }
         }
         testID="input-row-input-wrapper"
@@ -4562,8 +4619,8 @@ exports[`TextInput when user sees an empty input field should display label and
           testID="text-input"
           themeVariant="text"
         />
-      </AnimatedView>
-    </View>
+      </View>
+    </Pressable>
     <View
       style={
         [
@@ -4654,6 +4711,9 @@ exports[`TextInput when user sees an error state should display error message to
       {},
     ]
   }
+  themeFocused={false}
+  themeHasError={true}
+  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -4734,7 +4794,13 @@ exports[`TextInput when user sees an error state should display error message to
       }
       themeVariant="text"
     >
-      <AnimatedView>
+      <AnimatedView
+        style={
+          {
+            "flexDirection": "row",
+          }
+        }
+      >
         <Text
           allowFontScaling={false}
           numberOfLines={1}
@@ -4770,7 +4836,7 @@ exports[`TextInput when user sees an error state should display error message to
         </Text>
       </AnimatedView>
     </AnimatedView>
-    <View
+    <Pressable
       style={
         [
           [
@@ -4780,29 +4846,16 @@ exports[`TextInput when user sees an error state should display error message to
               "flexGrow": 2,
               "flexShrink": 1,
               "gap": 3.9230769230769234,
+              "opacity": 0,
             },
           ],
           undefined,
         ]
       }
+      themeOpacity={0}
     >
-      <AnimatedView
-        style={
-          {
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
-          }
-        }
-      >
+      <View>
         <View
-          accessibilityElementsHidden={true}
           testID="input-prefix"
         >
           <Text
@@ -4840,22 +4893,12 @@ exports[`TextInput when user sees an error state should display error message to
             
           </Text>
         </View>
-      </AnimatedView>
-      <AnimatedView
-        accessibilityElementsHidden={true}
+      </View>
+      <View
         accessibilityLabel="Text input field"
         style={
           {
             "flex": 1,
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
           }
         }
         testID="input-row-input-wrapper"
@@ -4899,8 +4942,8 @@ exports[`TextInput when user sees an error state should display error message to
           testID="text-input"
           themeVariant="text"
         />
-      </AnimatedView>
-    </View>
+      </View>
+    </Pressable>
     <View
       style={
         [
@@ -5036,6 +5079,9 @@ exports[`TextInput when user sees helper text should display guidance text to as
       {},
     ]
   }
+  themeFocused={false}
+  themeHasError={false}
+  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -5116,7 +5162,13 @@ exports[`TextInput when user sees helper text should display guidance text to as
       }
       themeVariant="text"
     >
-      <AnimatedView>
+      <AnimatedView
+        style={
+          {
+            "flexDirection": "row",
+          }
+        }
+      >
         <Text
           allowFontScaling={false}
           numberOfLines={1}
@@ -5152,7 +5204,7 @@ exports[`TextInput when user sees helper text should display guidance text to as
         </Text>
       </AnimatedView>
     </AnimatedView>
-    <View
+    <Pressable
       style={
         [
           [
@@ -5162,29 +5214,16 @@ exports[`TextInput when user sees helper text should display guidance text to as
               "flexGrow": 2,
               "flexShrink": 1,
               "gap": 3.9230769230769234,
+              "opacity": 0,
             },
           ],
           undefined,
         ]
       }
+      themeOpacity={0}
     >
-      <AnimatedView
-        style={
-          {
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
-          }
-        }
-      >
+      <View>
         <View
-          accessibilityElementsHidden={true}
           testID="input-prefix"
         >
           <Text
@@ -5222,22 +5261,12 @@ exports[`TextInput when user sees helper text should display guidance text to as
             
           </Text>
         </View>
-      </AnimatedView>
-      <AnimatedView
-        accessibilityElementsHidden={true}
+      </View>
+      <View
         accessibilityLabel="Text input field"
         style={
           {
             "flex": 1,
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
           }
         }
         testID="input-row-input-wrapper"
@@ -5281,8 +5310,8 @@ exports[`TextInput when user sees helper text should display guidance text to as
           testID="text-input"
           themeVariant="text"
         />
-      </AnimatedView>
-    </View>
+      </View>
+    </Pressable>
     <View
       style={
         [
@@ -5360,6 +5389,9 @@ exports[`TextInput when user sees input with custom prefix and suffix elements s
       {},
     ]
   }
+  themeFocused={false}
+  themeHasError={false}
+  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -5440,7 +5472,13 @@ exports[`TextInput when user sees input with custom prefix and suffix elements s
       }
       themeVariant="text"
     >
-      <AnimatedView>
+      <AnimatedView
+        style={
+          {
+            "flexDirection": "row",
+          }
+        }
+      >
         <Text
           allowFontScaling={false}
           numberOfLines={1}
@@ -5476,7 +5514,7 @@ exports[`TextInput when user sees input with custom prefix and suffix elements s
         </Text>
       </AnimatedView>
     </AnimatedView>
-    <View
+    <Pressable
       style={
         [
           [
@@ -5486,29 +5524,16 @@ exports[`TextInput when user sees input with custom prefix and suffix elements s
               "flexGrow": 2,
               "flexShrink": 1,
               "gap": 3.9230769230769234,
+              "opacity": 0,
             },
           ],
           undefined,
         ]
       }
+      themeOpacity={0}
     >
-      <AnimatedView
-        style={
-          {
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
-          }
-        }
-      >
+      <View>
         <View
-          accessibilityElementsHidden={true}
           testID="input-prefix"
         >
           <Text
@@ -5544,22 +5569,12 @@ exports[`TextInput when user sees input with custom prefix and suffix elements s
             
           </Text>
         </View>
-      </AnimatedView>
-      <AnimatedView
-        accessibilityElementsHidden={true}
+      </View>
+      <View
         accessibilityLabel="Text input field"
         style={
           {
             "flex": 1,
-            "opacity": {
-              "_offset": 0,
-              "_value": 0,
-              "addListener": [MockFunction],
-              "interpolate": [MockFunction],
-              "removeAllListeners": [MockFunction],
-              "removeListener": [MockFunction],
-              "setValue": [MockFunction],
-            },
           }
         }
         testID="input-row-input-wrapper"
@@ -5603,8 +5618,8 @@ exports[`TextInput when user sees input with custom prefix and suffix elements s
           testID="text-input"
           themeVariant="text"
         />
-      </AnimatedView>
-    </View>
+      </View>
+    </Pressable>
     <View
       style={
         [