Edit profile dialog ALF refresh (#5633)

src/components/forms/TextField.tsx

@@ -11,7 +11,7 @@ import {
 
 import {HITSLOP_20} from '#/lib/constants'
 import {mergeRefs} from '#/lib/merge-refs'
-import {android, atoms as a, useTheme, web} from '#/alf'
+import {android, atoms as a, TextStyleProp, useTheme, web} from '#/alf'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {Props as SVGIconProps} from '#/components/icons/common'
 import {Text} from '#/components/Typography'
@@ -123,6 +123,11 @@ export function useSharedInputStyles() {
 
 export type InputProps = Omit<TextInputProps, 'value' | 'onChangeText'> & {
   label: string
+  /**
+   * @deprecated Controlled inputs are *strongly* discouraged. Use `defaultValue` instead where possible.
+   *
+   * See https://github.com/facebook/react-native-website/pull/4247
+   */
   value?: string
   onChangeText?: (value: string) => void
   isInvalid?: boolean
@@ -308,10 +313,13 @@ export function SuffixText({
   children,
   label,
   accessibilityHint,
-}: React.PropsWithChildren<{
-  label: string
-  accessibilityHint?: AccessibilityProps['accessibilityHint']
-}>) {
+  style,
+}: React.PropsWithChildren<
+  TextStyleProp & {
+    label: string
+    accessibilityHint?: AccessibilityProps['accessibilityHint']
+  }
+>) {
   const t = useTheme()
   const ctx = React.useContext(Context)
   return (
@@ -334,6 +342,7 @@ export function SuffixText({
               color: t.palette.contrast_800,
             }
           : {},
+        style,
       ]}>
       {children}
     </Text>