apply fonts to TextField (#6288)

system fonts were leaking. i'm sure there's a better way to apply this
without duplicating but idk it works

src/components/forms/TextField.tsx

@@ -11,7 +11,15 @@ import {
 
 import {HITSLOP_20} from '#/lib/constants'
 import {mergeRefs} from '#/lib/merge-refs'
-import {android, atoms as a, TextStyleProp, useTheme, web} from '#/alf'
+import {
+  android,
+  applyFonts,
+  atoms as a,
+  TextStyleProp,
+  useAlf,
+  useTheme,
+  web,
+} from '#/alf'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {Props as SVGIconProps} from '#/components/icons/common'
 import {Text} from '#/components/Typography'
@@ -148,6 +156,7 @@ export function createInput(Component: typeof TextInput) {
     ...rest
   }: InputProps) {
     const t = useTheme()
+    const {fonts} = useAlf()
     const ctx = React.useContext(Context)
     const withinRoot = Boolean(ctx.inputRef)
 
@@ -171,28 +180,7 @@ export function createInput(Component: typeof TextInput) {
 
     const refs = mergeRefs([ctx.inputRef, inputRef!].filter(Boolean))
 
-    return (
-      <>
-        <Component
-          accessibilityHint={undefined}
-          {...rest}
-          accessibilityLabel={label}
-          ref={refs}
-          value={value}
-          onChangeText={onChangeText}
-          onFocus={e => {
-            ctx.onFocus()
-            onFocus?.(e)
-          }}
-          onBlur={e => {
-            ctx.onBlur()
-            onBlur?.(e)
-          }}
-          placeholder={placeholder || label}
-          placeholderTextColor={t.palette.contrast_500}
-          keyboardAppearance={t.name === 'light' ? 'light' : 'dark'}
-          hitSlop={HITSLOP_20}
-          style={[
+    const flattened = StyleSheet.flatten([
       a.relative,
       a.z_20,
       a.flex_1,
@@ -220,7 +208,42 @@ export function createInput(Component: typeof TextInput) {
         paddingBottom: 8,
       }),
       style,
-          ]}
+    ])
+
+    applyFonts(flattened, fonts.family)
+
+    // should always be defined on `typography`
+    // @ts-ignore
+    if (flattened.fontSize) {
+      // @ts-ignore
+      flattened.fontSize = Math.round(
+        // @ts-ignore
+        flattened.fontSize * fonts.scaleMultiplier,
+      )
+    }
+
+    return (
+      <>
+        <Component
+          accessibilityHint={undefined}
+          {...rest}
+          accessibilityLabel={label}
+          ref={refs}
+          value={value}
+          onChangeText={onChangeText}
+          onFocus={e => {
+            ctx.onFocus()
+            onFocus?.(e)
+          }}
+          onBlur={e => {
+            ctx.onBlur()
+            onBlur?.(e)
+          }}
+          placeholder={placeholder || label}
+          placeholderTextColor={t.palette.contrast_500}
+          keyboardAppearance={t.name === 'light' ? 'light' : 'dark'}
+          hitSlop={HITSLOP_20}
+          style={flattened}
         />
 
         <View