@myazahq/kyc-sdk-react-native 2.2.0 → 2.4.0

package/src/components/MyazaSelect.tsx

@@ -1,10 +1,12 @@
 import React, { useState } from 'react';
-import { Modal, Pressable, ScrollView, TextInput, useWindowDimensions, View } from 'react-native';
+import { Pressable, ScrollView, TextInput, useWindowDimensions, View } from 'react-native';
 
 import { radius, spacing } from '../config/theme';
 import { useTheme } from './runtime';
+import { useInputFontFamily } from './fonts';
 import { MyazaText } from './Typography';
 import { Icon } from './Icon';
+import { FloatingSheet } from './glass/FloatingSheet';
 
 // ---------------------------------------------------------------------------
 // The select field — a collapsed value that opens a sheet of options.
@@ -72,6 +74,9 @@ export function MyazaSelect<T extends string | number>({
   searchable?: boolean;
 }): React.ReactElement {
   const { colors } = useTheme();
+  // TextInput does not inherit fontFamily in RN — set it or the search field
+  // (and its placeholder) renders in the system face.
+  const fontFamily = useInputFontFamily();
   const { height: windowHeight } = useWindowDimensions();
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState('');
@@ -127,45 +132,16 @@ export function MyazaSelect<T extends string | number>({
         <Icon name="chevron-down" size={18} color={colors.textSecondary} />
       </Pressable>
 
-      <Modal
+      <FloatingSheet
         visible={open}
-        transparent
-        animationType="slide"
-        onRequestClose={() => {
+        onClose={() => {
           setOpen(false);
           setQuery('');
         }}
+        // Long option lists stay inside the sheet and scroll.
+        maxHeight={windowHeight * 0.6}
+        closeLabel={`Close ${sheetTitle ?? hint}`}
       >
-        {/* Tapping the backdrop dismisses, matching the platform sheet. */}
-        <Pressable
-          onPress={() => {
-            setOpen(false);
-            setQuery('');
-          }}
-          style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.45)', justifyContent: 'flex-end' }}
-        >
-          {/* Stops a tap inside the sheet from closing it. */}
-          <Pressable
-            onPress={() => {}}
-            style={{
-              backgroundColor: colors.background,
-              borderTopLeftRadius: radius.lg,
-              borderTopRightRadius: radius.lg,
-              paddingBottom: spacing.lg,
-              // Long option lists stay inside the sheet and scroll.
-              maxHeight: windowHeight * 0.6,
-            }}
-          >
-            <View
-              style={{
-                alignSelf: 'center',
-                width: 36,
-                height: 4,
-                borderRadius: radius.full,
-                backgroundColor: colors.border,
-                marginTop: spacing.sm,
-              }}
-            />
             <MyazaText
               variant="body"
               style={{
@@ -207,6 +183,7 @@ export function MyazaSelect<T extends string | number>({
                     paddingHorizontal: spacing.sm,
                     color: colors.textDark,
                     fontSize: 15,
+                    fontFamily,
                   }}
                 />
                 {query !== '' ? (
@@ -217,7 +194,13 @@ export function MyazaSelect<T extends string | number>({
               </View>
             ) : null}
 
-            <ScrollView bounces={false} keyboardShouldPersistTaps="handled">
+            <ScrollView
+              bounces={false}
+              keyboardShouldPersistTaps="handled"
+              // The floating shell has no bottom padding of its own, so the
+              // last option must not sit flush against the rounded corner.
+              contentContainerStyle={{ paddingBottom: spacing.lg }}
+            >
               {visible.length === 0 ? (
                 <MyazaText
                   variant="bodySmall"
@@ -275,9 +258,7 @@ export function MyazaSelect<T extends string | number>({
                 );
               })}
             </ScrollView>
-          </Pressable>
-        </Pressable>
-      </Modal>
+      </FloatingSheet>
     </>
   );
 }

package/src/components/PoweredBy.tsx

@@ -45,17 +45,9 @@ export function PoweredBy({ bottomInset = 0 }: { bottomInset?: number }): React.
         alignItems: 'center',
       }}
     >
-      {/* openURL can reject (no browser / a locked-down device). The mark itself
-          is the point, so a failed open is swallowed rather than surfaced. */}
-      <Pressable
-        onPress={() => {
-          void Linking.openURL(PRODUCT_URL).catch(() => undefined);
-        }}
-        accessibilityRole="link"
-        accessibilityLabel="Powered by Myaza Trust"
-        hitSlop={8}
-        style={{ flexDirection: 'row', alignItems: 'center', gap: 10, opacity: 0.9 }}
-      >
+      {/* The ROW is not the link — only the mark is. "Powered by" is a label,
+          not a destination, so it does not carry the tap. */}
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10, opacity: 0.9 }}>
         {/* Small and muted on purpose — "Powered by" is connective tissue, not
             the message. The BRAND carries the weight. */}
         <MyazaText variant="body" color={markColor} style={{ flexShrink: 1, fontSize: 12 }}>
@@ -63,8 +55,21 @@ export function PoweredBy({ bottomInset = 0 }: { bottomInset?: number }): React.
         </MyazaText>
 
         {/* The lockup, spaced TIGHTER than the gap before it so it reads as one
-            mark rather than three evenly-spaced items. */}
-        <View style={{ flexDirection: 'row', alignItems: 'center', gap: spacing.sm }}>
+            mark rather than three evenly-spaced items. This is the link:
+            wordmark, rule and TRUST are one brand, so the whole lockup is the
+            target — but nothing beyond it is.
+
+            openURL can reject (no browser / a locked-down device). The mark
+            itself is the point, so a failed open is swallowed. */}
+        <Pressable
+          onPress={() => {
+            void Linking.openURL(PRODUCT_URL).catch(() => undefined);
+          }}
+          accessibilityRole="link"
+          accessibilityLabel="Myaza Trust"
+          hitSlop={8}
+          style={{ flexDirection: 'row', alignItems: 'center', gap: spacing.sm }}
+        >
           <MyazaWordmark height={28} wordmark={markColor} />
 
           <View style={{ width: 1, height: 24, backgroundColor: markColor, opacity: 0.35 }} />
@@ -82,8 +87,8 @@ export function PoweredBy({ bottomInset = 0 }: { bottomInset?: number }): React.
           >
             TRUST
           </MyazaText>
-        </View>
-      </Pressable>
+        </Pressable>
+      </View>
     </View>
   );
 }

package/src/components/ProgressBar.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, useAnimatedValue, View } from 'react-native';
+
+import { useTheme } from './runtime';
+
+// The quiet alternative to StepIndicator: a single thin bar sitting ON the
+// header's bottom edge, replacing its border rather than adding a row beneath
+// it — so choosing it costs the header no height at all.
+//
+// Unlike the step circles it does not say WHICH step you are on or how many
+// there are, which is the trade: it is unaffected by step count, so a 14-step
+// KYB flow draws exactly like a 4-step one. Hosts who would rather the chrome
+// said less opt in with `progressStyle: 'bar'`.
+
+export interface ProgressBarProps {
+  /** 0.0–1.0 progress fraction. */
+  progress: number;
+  /** Steps in the flow — announced, not drawn. */
+  stepCount: number;
+}
+
+/**
+ * Thickness of the bar.
+ *
+ * 5, not the 1px border it replaces: at hairline weight it read as a rendering
+ * artefact rather than a deliberate indicator, and the filled portion needs
+ * enough body for its colour to register against the track at a glance.
+ */
+const HEIGHT = 5;
+
+export function ProgressBar({ progress, stepCount }: ProgressBarProps): React.ReactElement {
+  const { colors } = useTheme();
+  const fraction = Math.min(Math.max(progress, 0), 1);
+  const step = Math.min(Math.max(Math.round(fraction * stepCount), 1), stepCount);
+
+  // Animated so advancing a step reads as movement rather than a jump — the
+  // motion IS the feedback that the step was accepted. 250ms sits inside the
+  // 150–300ms micro-interaction band; ease-out because it is entering.
+  const width = useAnimatedValue(fraction);
+  const first = useRef(true);
+  useEffect(() => {
+    if (first.current) {
+      // Don't animate the initial mount from 0 — the flow may be resumed
+      // mid-way, and a bar sweeping in from empty would misreport where the
+      // user actually is.
+      first.current = false;
+      width.setValue(fraction);
+      return;
+    }
+    Animated.timing(width, {
+      toValue: fraction,
+      duration: 250,
+      easing: Easing.out(Easing.cubic),
+      // Width cannot be driven natively, and a scaleX transform would squash
+      // the rounded cap. The bar is one small view, so the JS driver is fine.
+      useNativeDriver: false,
+    }).start();
+  }, [fraction, width]);
+
+  return (
+    <View
+      style={{
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: HEIGHT,
+        // The track doubles as the header's bottom border, which is why the
+        // header drops its own when this is shown.
+        backgroundColor: colors.border,
+      }}
+      accessible
+      accessibilityRole="progressbar"
+      accessibilityLabel={`Step ${step} of ${stepCount}`}
+      accessibilityValue={{ min: 1, max: stepCount, now: step }}
+    >
+      <Animated.View
+        style={{
+          height: HEIGHT,
+          backgroundColor: colors.primary,
+          borderTopRightRadius: HEIGHT / 2,
+          borderBottomRightRadius: HEIGHT / 2,
+          width: width.interpolate({
+            inputRange: [0, 1],
+            outputRange: ['0%', '100%'],
+          }),
+        }}
+      />
+    </View>
+  );
+}

package/src/components/SandboxBanner.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { spacing } from '../config/theme';
+import type { KycState } from '../store/state';
+import { useKyc } from './runtime';
+import { Icon } from './Icon';
+import { MyazaText } from './Typography';
+
+/**
+ * "You are not in production" strip, shown above the sheet's header.
+ *
+ * A sandbox flow is pixel-identical to a live one, which is the point — you are
+ * testing the real thing — and also the hazard: screenshots get mistaken for
+ * production incidents, testers wonder why a real passport was rejected, and a
+ * `pk_test_` key shipped to production looks like it works right up until
+ * nobody is actually verified.
+ *
+ * Environment comes from the SERVER (`/config`), not the API key prefix. Hosted
+ * sessions authenticate with an `hs_` handoff token that carries no environment
+ * slot, so key-sniffing would leave exactly the surface an end user sees
+ * unlabelled.
+ *
+ * DEVELOPMENT is labelled too, and differently: it runs the real pipeline
+ * against staging provider credentials, so "test data only" would be a lie
+ * there. 1:1 with the web and Flutter SDKs.
+ */
+/**
+ * Whether the banner will render. The sheet needs this to decide who owns the
+ * safe-area top inset: the banner sits ABOVE the header, so when it shows it is
+ * the topmost element and must clear the status bar itself — otherwise the
+ * header pads for an inset the banner already crossed, and the strip is drawn
+ * under the clock on Android's edge-to-edge modals.
+ */
+export function useSandboxBannerVisible(): boolean {
+  const environment = useKyc((s: KycState) => s.serverConfig.environment);
+  return environment === 'SANDBOX' || environment === 'DEVELOPMENT';
+}
+
+export function SandboxBanner({
+  topInset = 0,
+}: {
+  /** Safe-area top inset to absorb, when the banner is the topmost element. */
+  topInset?: number;
+}): React.ReactElement | null {
+  const environment = useKyc((s: KycState) => s.serverConfig.environment);
+  if (environment !== 'SANDBOX' && environment !== 'DEVELOPMENT') return null;
+
+  const sandbox = environment === 'SANDBOX';
+
+  return (
+    <View
+      accessibilityRole="alert"
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: spacing.xs + 2,
+        // Amber, not the brand colour: this is an out-of-band status about the
+        // session, and the org's palette would read as part of their flow.
+        backgroundColor: AMBER_TINT,
+        paddingHorizontal: spacing.md,
+        // The tint extends up through the status bar so the strip reads as one
+        // band rather than floating below a bare gap.
+        paddingTop: topInset + spacing.xs + 2,
+        paddingBottom: spacing.xs + 2,
+      }}
+    >
+      {/* Flask, not an alert mark: nothing is wrong — this is a statement about
+          WHICH environment you are in ("test environment", "test data only").
+          An alert glyph reads as a fault and sends testers hunting for one.
+          Same lucide icon the web SDK uses; Flutter mirrors it with
+          Icons.science_outlined. */}
+      <Icon name="flask" size={13} color={AMBER_INK} />
+      <MyazaText
+        variant="bodySmall"
+        color={AMBER_INK}
+        style={{ fontSize: 11, fontWeight: '700', letterSpacing: 1, textTransform: 'uppercase' }}
+      >
+        {sandbox ? 'Sandbox' : 'Development'}
+      </MyazaText>
+      <MyazaText variant="bodySmall" color={AMBER_INK} style={{ fontSize: 11, flexShrink: 1 }}>
+        {sandbox ? 'Test data only, no real checks run' : 'Test environment, results are not live'}
+      </MyazaText>
+    </View>
+  );
+}
+
+// Fixed rather than themed: the strip must read identically in light and dark,
+// and it deliberately does not belong to the org's palette.
+const AMBER_TINT = 'rgba(245, 158, 11, 0.18)';
+const AMBER_INK = '#B45309';

package/src/components/StepHeader.tsx

@@ -12,7 +12,10 @@ import { CountryFlag } from './CountryFlag';
 // title (heading2) + optional country flag, then an optional description below
 // (indented to align under the title when a back button is present).
 
-const BACK_FOOTPRINT = 28 + spacing.sm; // back button width + gap
+// Back button width + gap. Kept in step with BACK_SIZE below: it indents the
+// description so it starts under the title rather than under the button.
+const BACK_SIZE = 40;
+const BACK_FOOTPRINT = BACK_SIZE + spacing.sm;
 
 export interface StepHeaderProps {
   title: string;
@@ -28,7 +31,17 @@ export function StepHeader({ title, description, onBack, country }: StepHeaderPr
       <View style={{ flexDirection: 'row', alignItems: 'center' }}>
         {onBack ? (
           <View style={{ marginRight: spacing.sm }}>
-            <GlassIconButton icon="back" onPress={onBack} size={28} iconSize={22} accessibilityLabel="Back" />
+            {/* Same 40pt footprint as the theme/close chrome above it — a
+                smaller glass circle here read as a different class of control,
+                and 28pt was under the 44pt minimum touch target even with
+                hitSlop. */}
+            <GlassIconButton
+              icon="back"
+              onPress={onBack}
+              size={BACK_SIZE}
+              iconSize={22}
+              accessibilityLabel="Back"
+            />
           </View>
         ) : null}
         <View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>

package/src/components/StepIndicator.tsx

@@ -1,17 +1,23 @@
-import React from 'react';
-import { View } from 'react-native';
+import React, { useState } from 'react';
+import { PixelRatio, useWindowDimensions, View, type LayoutChangeEvent } from 'react-native';
 
 import { spacing } from '../config/theme';
+import { fitStepCircles, windowedSteps, type StepSlot } from '../lib/step-window';
 import { useTheme } from './runtime';
 import { MyazaText } from './Typography';
 import { Icon } from './Icon';
 
 // Segmented numbered step indicator — 1:1 with the Flutter SDK's _StepIndicator.
-// N circles connected by thin lines:
-//   • completed → filled primary + white check
-//   • active    → filled primary + white number
+// N numbered circles connected by thin lines:
+//   • completed → filled primary + number + a check BADGE
+//   • active    → filled primary + number
 //   • upcoming  → outlined (primary200) + muted number
 // activeIndex = round(progress * stepCount) - 1.
+//
+// Long flows COLLAPSE rather than overflow, but only as a LAST RESORT: the row
+// measures itself and shows as many real circles as the width allows, windowing
+// around the current step (first and last always shown) only once the connectors
+// would stop reading as a chain. See lib/step-window.
 
 export interface StepIndicatorProps {
   /** 0.0–1.0 progress fraction. */
@@ -19,47 +25,155 @@ export interface StepIndicatorProps {
   stepCount: number;
 }
 
+/** Base circle size, before text scaling. */
+const CIRCLE = 26;
+
 export function StepIndicator({ progress, stepCount }: StepIndicatorProps): React.ReactElement {
   const { colors } = useTheme();
   const active = Math.round(progress * stepCount) - 1;
 
+  // Grow the circle with the system text size, or the number inside it clips
+  // the moment a user turns Dynamic Type up — the circle was a hard 26px while
+  // the label scaled freely. Capped at 1.4: past that the row matters less than
+  // the step content below it, and an indicator that pushes the title off screen
+  // helps nobody.
+  const scale = Math.min(PixelRatio.getFontScale(), 1.4);
+  const size = Math.round(CIRCLE * scale);
+  const badge = Math.round(13 * scale);
+
+  // How many circles actually fit. Measured rather than assumed, so a flow
+  // collapses on a narrow phone and stays whole on a wide one instead of both
+  // obeying the same hardcoded cap. The window width is the first estimate — it
+  // is right on the first frame, which avoids rendering a collapsed row and then
+  // snapping to a full one — and onLayout corrects it if the row is inset by
+  // anything this does not know about.
+  const { width: screenWidth } = useWindowDimensions();
+  const [measured, setMeasured] = useState(0);
+  const rowWidth = measured || Math.max(0, screenWidth - spacing.md * 2);
+  const slots = windowedSteps(stepCount, active, fitStepCircles(rowWidth, size));
+
+  const onLayout = (e: LayoutChangeEvent): void => {
+    const w = e.nativeEvent.layout.width - spacing.md * 2;
+    // Only react to real changes (rotation, split screen). Setting state on
+    // every layout pass would re-render the row for nothing.
+    setMeasured((prev) => (Math.abs(prev - w) > 1 ? w : prev));
+  };
+
   return (
-    <View style={{ flexDirection: 'row', alignItems: 'center', paddingHorizontal: spacing.md }}>
-      {Array.from({ length: stepCount }).map((_, i) => {
-        const completed = i < active;
-        const isActive = i === active;
+    <View
+      style={{ flexDirection: 'row', alignItems: 'center', paddingHorizontal: spacing.md }}
+      onLayout={onLayout}
+      // ONE label for the whole row. Previously a screen reader walked ten
+      // unlabelled circles and announced a bare "6", which says nothing about
+      // how far through the flow that is.
+      accessible
+      accessibilityRole="progressbar"
+      accessibilityLabel={`Step ${Math.min(Math.max(active + 1, 1), stepCount)} of ${stepCount}`}
+      accessibilityValue={{
+        min: 1,
+        max: stepCount,
+        now: Math.min(Math.max(active + 1, 1), stepCount),
+      }}
+    >
+      {slots.map((slot: StepSlot, position) => {
+        const isEllipsis = slot === 'ellipsis';
+        const completed = !isEllipsis && slot < active;
+        const isActive = !isEllipsis && slot === active;
         const filled = completed || isActive;
         return (
-          <React.Fragment key={i}>
-            <View
-              style={{
-                width: 26,
-                height: 26,
-                borderRadius: 13,
-                alignItems: 'center',
-                justifyContent: 'center',
-                backgroundColor: filled ? colors.primary : 'transparent',
-                borderWidth: 1.5,
-                borderColor: filled ? colors.primary : colors.primary200,
-              }}
-            >
-              {completed ? (
-                <Icon name="check" size={14} color="#FFFFFF" />
-              ) : (
+          <React.Fragment key={isEllipsis ? `gap-${position}` : `step-${slot}`}>
+            {isEllipsis ? (
+              // Collapsed run. Sized to the circle's height so the connectors on
+              // either side stay on the same centre line and the chain reads as
+              // continuous rather than broken in two.
+              <View
+                style={{ height: size, justifyContent: 'center', paddingHorizontal: 2 }}
+                importantForAccessibility="no"
+              >
                 <MyazaText
                   variant="bodySmall"
-                  color={isActive ? '#FFFFFF' : colors.textMuted}
-                  style={{ fontSize: 11, fontWeight: '700' }}
+                  color={colors.textMuted}
+                  style={{ fontSize: 13, letterSpacing: 1 }}
+                  allowFontScaling={false}
                 >
-                  {i + 1}
+                  ···
                 </MyazaText>
-              )}
-            </View>
-            {i < stepCount - 1 ? (
+              </View>
+            ) : (
+              // Positioning context for the badge, which straddles the circle's
+              // edge. Nothing here clips, so the overhang renders.
+              <View style={{ width: size, height: size }} importantForAccessibility="no">
+                <View
+                  style={{
+                    width: size,
+                    height: size,
+                    borderRadius: size / 2,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    backgroundColor: filled ? colors.primary : 'transparent',
+                    borderWidth: 1.5,
+                    borderColor: filled ? colors.primary : colors.primary200,
+                  }}
+                >
+                  {/* The NUMBER stays, completed or not. A check alone says a
+                      step is done but not WHICH step — and once the row is
+                      windowed ("1 ··· 5 6 7 ··· 10") that is precisely what the
+                      numbers are there to answer. */}
+                  <MyazaText
+                    variant="bodySmall"
+                    color={filled ? '#FFFFFF' : colors.textMuted}
+                    style={{ fontSize: 12, fontWeight: '700' }}
+                    // The circle already scales with the system text size, so
+                    // scaling the glyph again would overflow it.
+                    allowFontScaling={false}
+                  >
+                    {slot + 1}
+                  </MyazaText>
+                </View>
+
+                {/* Completion rides as a badge tucked onto the circle's corner.
+                    The ring is WHITE — the same colour as the number inside the
+                    circle — because the badge sits on the circle, not on the
+                    page. Ringing it in the page background (which the chip
+                    portrait's CheckBadge does, correctly, because it sits on a
+                    photo) painted a near-black blob around the check on the dark
+                    theme, where background is #040218. */}
+                {completed ? (
+                  <View
+                    style={{
+                      position: 'absolute',
+                      top: -3,
+                      right: -2,
+                      width: badge,
+                      height: badge,
+                      borderRadius: badge / 2,
+                      backgroundColor: colors.success,
+                      // 1px, not 1.5: on a 13px badge a 1.5px ring eats nearly a
+                      // quarter of the diameter and reads as a white outline
+                      // rather than a hairline separating badge from circle.
+                      borderWidth: 1,
+                      borderColor: '#FFFFFF',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }}
+                  >
+                    <Icon name="check" size={Math.round(badge * 0.6)} color="#FFFFFF" />
+                  </View>
+                ) : null}
+              </View>
+            )}
+            {position < slots.length - 1 ? (
               <View
                 style={{
                   flex: 1,
+                  // Floor, so an unforeseen overflow degrades to a visibly short
+                  // connector rather than a row of circles with no chain at all.
+                  minWidth: 6,
                   height: 2,
+                  // UNIFORM, deliberately: fitStepCircles budgets 3+3 per
+                  // connector, so widening this for completed steps made the row
+                  // need more space than was reserved. The badge is tucked in
+                  // far enough (right: -2) not to need the extra.
                   marginHorizontal: 3,
                   borderRadius: 1,
                   backgroundColor: completed ? colors.primary : colors.primary200,

package/src/components/fonts.ts

@@ -1,6 +1,10 @@
+import type { TextStyle } from 'react-native';
 import { useFonts } from 'expo-font';
 import { SpaceGrotesk_500Medium, SpaceGrotesk_600SemiBold, SpaceGrotesk_700Bold } from '@expo-google-fonts/space-grotesk';
 import { Karla_400Regular, Karla_500Medium, Karla_600SemiBold, Karla_700Bold } from '@expo-google-fonts/karla';
+import { fontFamilyFor } from '../config/font-resolve';
+import { useTheme } from './theme-provider';
+
 export { fontFamilyFor, markFamilyName, brandFamilyName, BRAND_WEIGHTS } from '../config/font-resolve';
 
 
@@ -30,3 +34,22 @@ export function useMyazaFonts(): boolean {
  * Returns `undefined` until fonts are loaded so text falls back to the system
  * font + `fontWeight` without triggering an "unrecognized font" warning.
  */
+
+/**
+ * The body font family for a TEXT INPUT, at the given weight.
+ *
+ * `TextInput` does not inherit `fontFamily` from any ancestor the way web
+ * inputs inherit from a stylesheet — RN resolves it per-element — so an input
+ * that never sets one renders in the system face while every `MyazaText`
+ * beside it renders in the brand's. The placeholder follows the input's own
+ * family too, which is why it looked wrong as well.
+ *
+ * Goes through the same resolver as MyazaText so an org's uploaded brand font
+ * reaches inputs, not just text. Returns undefined until fonts load, which is
+ * the caller's cue to leave `fontFamily` unset rather than name a family the
+ * platform has not registered.
+ */
+export function useInputFontFamily(weight: TextStyle['fontWeight'] = '400'): string | undefined {
+  const { fontsLoaded, brandFonts } = useTheme();
+  return fontFamilyFor(false, weight, fontsLoaded, brandFonts);
+}