framepayments-react-native 3.0.0 → 4.0.0

package/lib/ui/primitives/BillingAddressDetailView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BillingAddressDetailView.d.ts","sourceRoot":"","sources":["../../../src/ui/primitives/BillingAddressDetailView.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAMjF,MAAM,WAAW,6BAA6B;IAC5C,OAAO,EAAE,iBAAiB,CAAC;IAC3B,sDAAsD;IACtD,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACzC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,iBAAiB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvE;8EAC0E;IAC1E,aAAa,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,wBAAwB,CAAC,EACvC,OAAO,EACP,MAAM,EACN,aAAa,EACb,aAAa,EACb,MAAM,GACP,EAAE,6BAA6B,+BA2E/B"}

package/lib/ui/primitives/BillingAddressDetailView.js

@@ -0,0 +1,55 @@
+import { useEffect, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useFrameTheme } from '../theme/ThemeContext';
+import { ValidatedTextField } from './ValidatedTextField';
+import { CountryPicker } from './CountryPicker';
+export function BillingAddressDetailView({ address, errors, onChangeField, international, testID, }) {
+    const theme = useFrameTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    // In non-international mode the country picker is hidden and validation
+    // rules are US-only. Force the underlying state to 'US' so the form can't
+    // end up displaying US rules against a stale non-US country.
+    //
+    // Also reset `state` + `postalCode` whenever the country is swapped to US
+    // because their formats are mutually incompatible (US: 2-letter state +
+    // 5-digit zip vs. non-US: free-form state and country-specific postal).
+    // Line1 / Line2 / City are free-text and preserved across the swap.
+    useEffect(() => {
+        if (!international && address.country !== 'US') {
+            onChangeField('country', 'US');
+            onChangeField('state', '');
+            onChangeField('postalCode', '');
+        }
+    }, [international, address.country, onChangeField]);
+    const isUS = address.country === 'US';
+    const postalLabel = !international || isUS ? 'Zip code' : 'Postal code';
+    const stateLabel = !international || isUS ? 'State' : 'State / province / region';
+    return (<View testID={testID} style={styles.stack}>
+      <ValidatedTextField prompt="Address line 1" value={address.line1} onChangeText={(v) => onChangeField('line1', v)} error={errors['address.line1']} autoCapitalize="words"/>
+      <ValidatedTextField prompt="Address line 2 (optional)" value={address.line2} onChangeText={(v) => onChangeField('line2', v)} autoCapitalize="words"/>
+      <View style={styles.row}>
+        <View style={styles.cell}>
+          <ValidatedTextField prompt="City" value={address.city} onChangeText={(v) => onChangeField('city', v)} error={errors['address.city']} autoCapitalize="words"/>
+        </View>
+        <View style={styles.cell}>
+          <ValidatedTextField prompt={stateLabel} value={address.state} onChangeText={(v) => onChangeField('state', v)} error={errors['address.state']} autoCapitalize={!international || isUS ? 'characters' : 'words'} characterLimit={!international || isUS ? 2 : undefined}/>
+        </View>
+      </View>
+      <ValidatedTextField prompt={postalLabel} value={address.postalCode} onChangeText={(v) => onChangeField('postalCode', v)} error={errors['address.postalCode']} keyboardType={!international || isUS ? 'number-pad' : 'default'}/>
+      {international ? (<CountryPicker selectedAlpha2={address.country} onSelect={(c) => onChangeField('country', c.alpha2Code)}/>) : null}
+    </View>);
+}
+function createStyles(_theme) {
+    return StyleSheet.create({
+        stack: {
+            gap: 12,
+        },
+        row: {
+            flexDirection: 'row',
+            gap: 12,
+        },
+        cell: {
+            flex: 1,
+        },
+    });
+}

package/lib/ui/primitives/BottomSheet.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from 'react';
+import { type ViewStyle } from 'react-native';
+export interface BottomSheetProps {
+    title?: string;
+    onClose?: () => void;
+    showCloseButton?: boolean;
+    style?: ViewStyle;
+    children: ReactNode;
+}
+export declare function BottomSheet({ title, onClose, showCloseButton, style, children, }: BottomSheetProps): import("react").JSX.Element;
+//# sourceMappingURL=BottomSheet.d.ts.map

package/lib/ui/primitives/BottomSheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomSheet.d.ts","sourceRoot":"","sources":["../../../src/ui/primitives/BottomSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAUtB,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,eAAsB,EACtB,KAAK,EACL,QAAQ,GACT,EAAE,gBAAgB,+BAwClB"}

package/lib/ui/primitives/BottomSheet.js

@@ -0,0 +1,72 @@
+import { useMemo } from 'react';
+import { Platform, Pressable, SafeAreaView, StyleSheet, Text, View, } from 'react-native';
+import { useFrameTheme } from '../theme/ThemeContext';
+import { Icon } from '../assets';
+export function BottomSheet({ title, onClose, showCloseButton = true, style, children, }) {
+    const theme = useFrameTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    return (<SafeAreaView style={[styles.container, { backgroundColor: theme.colors.surface }, style]}>
+      <View style={styles.headerRow}>
+        <View style={styles.headerSide}>
+          {showCloseButton && onClose ? (<Pressable onPress={onClose} accessibilityRole="button" accessibilityLabel="Close" style={({ pressed }) => [styles.closeButton, pressed && { opacity: 0.55 }]} hitSlop={8}>
+              <Icon name="close-circle" size={CLOSE_SIZE} color={theme.colors.textPrimary}/>
+            </Pressable>) : null}
+        </View>
+        <Text style={[
+            styles.title,
+            {
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.headline.size,
+                fontWeight: theme.fontWeights.headline,
+                lineHeight: theme.fontLineHeights.headline,
+            },
+        ]} numberOfLines={1}>
+          {title ?? ''}
+        </Text>
+        <View style={styles.headerSide}/>
+      </View>
+      <View style={[styles.divider, { backgroundColor: theme.colors.surfaceStroke }]}/>
+      <View style={styles.body}>{children}</View>
+    </SafeAreaView>);
+}
+const CLOSE_SIZE = 30;
+function createStyles(_theme) {
+    return StyleSheet.create({
+        container: {
+            flex: 1,
+            ...Platform.select({
+                // pageSheet already supplies rounded top corners + drag indicator on
+                // iOS. On Android the modal is fullscreen — no chrome adjustments.
+                default: {},
+            }),
+        },
+        headerRow: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            paddingHorizontal: 16,
+            paddingVertical: 12,
+        },
+        headerSide: {
+            width: CLOSE_SIZE,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        title: {
+            flex: 1,
+            textAlign: 'center',
+        },
+        closeButton: {
+            width: CLOSE_SIZE,
+            height: CLOSE_SIZE,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        divider: {
+            height: StyleSheet.hairlineWidth,
+        },
+        body: {
+            flex: 1,
+        },
+    });
+}

package/lib/ui/primitives/Button.d.ts

@@ -0,0 +1,17 @@
+import { type ViewStyle } from 'react-native';
+import { resolveButtonColors } from './buttonColors';
+import type { ButtonVariant } from './Button.types';
+export type { ButtonVariant };
+export { resolveButtonColors };
+export interface ButtonProps {
+    text: string;
+    variant?: ButtonVariant;
+    enabled?: boolean;
+    isLoading?: boolean;
+    onPress: () => void;
+    style?: ViewStyle;
+    testID?: string;
+    accessibilityLabel?: string;
+}
+export declare function Button({ text, variant, enabled, isLoading, onPress, style, testID, accessibilityLabel, }: ButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=Button.d.ts.map

package/lib/ui/primitives/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/ui/primitives/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyD,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAErG,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,YAAY,EAAE,aAAa,EAAE,CAAC;AAC9B,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAE/B,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID,wBAAgB,MAAM,CAAC,EACrB,IAAI,EACJ,OAAmB,EACnB,OAAc,EACd,SAAiB,EACjB,OAAO,EACP,KAAK,EACL,MAAM,EACN,kBAAkB,GACnB,EAAE,WAAW,+BAyCb"}

package/lib/ui/primitives/Button.js

@@ -0,0 +1,37 @@
+import { ActivityIndicator, StyleSheet, Text, TouchableOpacity } from 'react-native';
+import { useFrameTheme } from '../theme/ThemeContext';
+import { resolveButtonColors } from './buttonColors';
+export { resolveButtonColors };
+const HEIGHT = 50;
+export function Button({ text, variant = 'primary', enabled = true, isLoading = false, onPress, style, testID, accessibilityLabel, }) {
+    const theme = useFrameTheme();
+    const disabled = !enabled || isLoading;
+    const { background, stroke, foreground } = resolveButtonColors(variant, disabled, theme);
+    return (<TouchableOpacity activeOpacity={0.85} disabled={disabled} onPress={onPress} testID={testID} accessibilityRole="button" accessibilityLabel={accessibilityLabel ?? text} accessibilityState={{ disabled, busy: isLoading }} style={[
+            styles.base,
+            {
+                backgroundColor: background,
+                borderColor: stroke,
+                borderWidth: stroke === 'transparent' ? 0 : 1,
+                borderRadius: theme.radii.medium,
+            },
+            style,
+        ]}>
+      {isLoading ? (<ActivityIndicator color={foreground}/>) : (<Text style={{
+                color: foreground,
+                fontSize: theme.fonts.button.size,
+                fontWeight: theme.fontWeights.button,
+                lineHeight: theme.fontLineHeights.button,
+            }}>
+          {text}
+        </Text>)}
+    </TouchableOpacity>);
+}
+const styles = StyleSheet.create({
+    base: {
+        height: HEIGHT,
+        paddingHorizontal: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});

package/lib/ui/primitives/Button.types.d.ts

@@ -0,0 +1,2 @@
+export type ButtonVariant = 'primary' | 'secondary';
+//# sourceMappingURL=Button.types.d.ts.map

package/lib/ui/primitives/Button.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/ui/primitives/Button.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,CAAC"}

package/lib/ui/primitives/Button.types.js

@@ -0,0 +1 @@
+export {};

package/lib/ui/primitives/Checkbox.d.ts

@@ -0,0 +1,12 @@
+import { type ViewStyle } from 'react-native';
+export interface CheckboxProps {
+    value: boolean;
+    onValueChange: (next: boolean) => void;
+    label?: React.ReactNode;
+    disabled?: boolean;
+    style?: ViewStyle;
+    testID?: string;
+    accessibilityLabel?: string;
+}
+export declare function Checkbox({ value, onValueChange, label, disabled, style, testID, accessibilityLabel, }: CheckboxProps): import("react").JSX.Element;
+//# sourceMappingURL=Checkbox.d.ts.map

package/lib/ui/primitives/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/ui/primitives/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,EAAqC,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAOjF,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,aAAa,EACb,KAAK,EACL,QAAgB,EAChB,KAAK,EACL,MAAM,EACN,kBAAkB,GACnB,EAAE,aAAa,+BAwCf"}

package/lib/ui/primitives/Checkbox.js

@@ -0,0 +1,53 @@
+import { useMemo } from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { useFrameTheme } from '../theme/ThemeContext';
+const BOX_SIZE = 22;
+export function Checkbox({ value, onValueChange, label, disabled = false, style, testID, accessibilityLabel, }) {
+    const theme = useFrameTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    return (<Pressable onPress={() => !disabled && onValueChange(!value)} accessibilityRole="checkbox" accessibilityState={{ checked: value, disabled }} accessibilityLabel={accessibilityLabel} testID={testID} disabled={disabled} style={({ pressed }) => [styles.row, style, pressed && !disabled ? { opacity: 0.7 } : null]}>
+      <View style={[
+            styles.box,
+            {
+                borderColor: value ? theme.colors.primaryButton : theme.colors.surfaceStroke,
+                backgroundColor: value ? theme.colors.primaryButton : 'transparent',
+                borderRadius: theme.radii.small / 2,
+                opacity: disabled ? 0.5 : 1,
+            },
+        ]}>
+        {value ? <Text style={[styles.check, { color: theme.colors.primaryButtonText }]}>✓</Text> : null}
+      </View>
+      {label != null ? <View style={styles.labelWrap}>{typeof label === 'string' ? (<Text style={{
+                    color: theme.colors.textPrimary,
+                    fontSize: theme.fonts.body.size,
+                    lineHeight: theme.fontLineHeights.body,
+                }}>
+          {label}
+        </Text>) : label}</View> : null}
+    </Pressable>);
+}
+function createStyles(_theme) {
+    return StyleSheet.create({
+        row: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 10,
+        },
+        box: {
+            width: BOX_SIZE,
+            height: BOX_SIZE,
+            borderWidth: 1.5,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        check: {
+            fontSize: 14,
+            fontWeight: '700',
+            includeFontPadding: false,
+            lineHeight: 16,
+        },
+        labelWrap: {
+            flex: 1,
+        },
+    });
+}

package/lib/ui/primitives/CountryPicker.d.ts

@@ -0,0 +1,10 @@
+import { type AvailableCountry } from '../../countries';
+export interface CountryPickerProps {
+    /** Currently selected alpha-2 code. */
+    selectedAlpha2: string;
+    /** Triggered with the newly chosen country. */
+    onSelect: (country: AvailableCountry) => void;
+    testID?: string;
+}
+export declare function CountryPicker({ selectedAlpha2, onSelect, testID }: CountryPickerProps): import("react").JSX.Element;
+//# sourceMappingURL=CountryPicker.d.ts.map

package/lib/ui/primitives/CountryPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CountryPicker.d.ts","sourceRoot":"","sources":["../../../src/ui/primitives/CountryPicker.tsx"],"names":[],"mappings":"AAYA,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,iBAAiB,CAAC;AAMzB,MAAM,WAAW,kBAAkB;IACjC,uCAAuC;IACvC,cAAc,EAAE,MAAM,CAAC;IACvB,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,aAAa,CAAC,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,kBAAkB,+BAsDrF"}

package/lib/ui/primitives/CountryPicker.js

@@ -0,0 +1,166 @@
+import { useMemo, useState } from 'react';
+import { FlatList, Modal, Pressable, StyleSheet, Text, TextInput, View, } from 'react-native';
+import { useFrameTheme } from '../theme/ThemeContext';
+import { DEFAULT_COUNTRY, alpha2ToFlag, getAvailableCountries, } from '../../countries';
+export function CountryPicker({ selectedAlpha2, onSelect, testID }) {
+    const [open, setOpen] = useState(false);
+    const theme = useFrameTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    const countries = useMemo(() => getAvailableCountries(), []);
+    const selected = useMemo(() => countries.find((c) => c.alpha2Code === selectedAlpha2) ?? DEFAULT_COUNTRY, [countries, selectedAlpha2]);
+    return (<>
+      <Pressable onPress={() => setOpen(true)} accessibilityRole="button" accessibilityLabel={`Country: ${selected.displayName}`} testID={testID} style={({ pressed }) => [
+            styles.trigger,
+            {
+                borderColor: theme.colors.surfaceStroke,
+                borderRadius: theme.radii.medium,
+                opacity: pressed ? 0.7 : 1,
+            },
+        ]}>
+        <Text style={styles.flag}>{alpha2ToFlag(selected.alpha2Code)}</Text>
+        <Text numberOfLines={1} style={[
+            styles.triggerLabel,
+            {
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.body.size,
+                lineHeight: theme.fontLineHeights.body,
+            },
+        ]}>
+          {selected.displayName}
+        </Text>
+        <Text style={[styles.caret, { color: theme.colors.textSecondary }]}>▾</Text>
+      </Pressable>
+      <CountryPickerSheet visible={open} countries={countries} selectedAlpha2={selectedAlpha2} onClose={() => setOpen(false)} onSelect={(country) => {
+            setOpen(false);
+            onSelect(country);
+        }}/>
+    </>);
+}
+function CountryPickerSheet({ visible, countries, selectedAlpha2, onClose, onSelect }) {
+    const theme = useFrameTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    const [query, setQuery] = useState('');
+    const filtered = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (q === '')
+            return countries;
+        return countries.filter((c) => c.displayName.toLowerCase().includes(q) || c.alpha2Code.toLowerCase().includes(q));
+    }, [countries, query]);
+    const renderItem = ({ item }) => {
+        const isSelected = item.alpha2Code === selectedAlpha2;
+        return (<Pressable onPress={() => onSelect(item)} accessibilityRole="button" accessibilityState={{ selected: isSelected }} style={({ pressed }) => [
+                styles.row,
+                { borderBottomColor: theme.colors.surfaceStroke, opacity: pressed ? 0.7 : 1 },
+            ]}>
+        <Text style={styles.rowFlag}>{alpha2ToFlag(item.alpha2Code)}</Text>
+        <Text numberOfLines={1} style={[
+                styles.rowLabel,
+                {
+                    color: theme.colors.textPrimary,
+                    fontSize: theme.fonts.body.size,
+                    lineHeight: theme.fontLineHeights.body,
+                },
+            ]}>
+          {item.displayName}
+        </Text>
+        {isSelected ? <Text style={[styles.check, { color: theme.colors.textPrimary }]}>✓</Text> : null}
+      </Pressable>);
+    };
+    return (<Modal visible={visible} animationType="slide" transparent={false} presentationStyle="pageSheet" onRequestClose={onClose}>
+      <View style={[styles.sheet, { backgroundColor: theme.colors.surface }]}>
+        <View style={styles.header}>
+          <Pressable onPress={onClose} accessibilityRole="button" accessibilityLabel="Close">
+            <Text style={[styles.cancel, { color: theme.colors.textSecondary }]}>Cancel</Text>
+          </Pressable>
+          <Text style={[
+            styles.title,
+            {
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.headline.size,
+                fontWeight: theme.fontWeights.headline,
+                lineHeight: theme.fontLineHeights.headline,
+            },
+        ]}>
+            Select country
+          </Text>
+          <View style={{ width: 60 }}/>
+        </View>
+        <View style={[styles.searchRow, { borderBottomColor: theme.colors.surfaceStroke }]}>
+          <TextInput value={query} onChangeText={setQuery} placeholder="Search" placeholderTextColor={theme.colors.textSecondary} autoCorrect={false} autoCapitalize="none" style={[
+            styles.searchInput,
+            {
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.body.size,
+            },
+        ]} accessibilityLabel="Search countries"/>
+        </View>
+        <FlatList data={filtered} keyExtractor={(item) => item.alpha2Code} renderItem={renderItem} keyboardShouldPersistTaps="handled"/>
+      </View>
+    </Modal>);
+}
+function createStyles(_theme) {
+    return StyleSheet.create({
+        trigger: {
+            borderWidth: 1,
+            paddingHorizontal: 12,
+            height: 49,
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 8,
+        },
+        flag: {
+            fontSize: 20,
+        },
+        triggerLabel: {
+            flex: 1,
+        },
+        caret: {
+            fontSize: 14,
+            marginLeft: 4,
+        },
+        sheet: {
+            flex: 1,
+        },
+        header: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            paddingHorizontal: 16,
+            paddingVertical: 12,
+        },
+        cancel: {
+            fontSize: 16,
+            width: 60,
+        },
+        title: {
+            flex: 1,
+            textAlign: 'center',
+        },
+        searchRow: {
+            paddingHorizontal: 16,
+            paddingVertical: 8,
+            borderBottomWidth: StyleSheet.hairlineWidth,
+        },
+        searchInput: {
+            paddingVertical: 8,
+        },
+        row: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingHorizontal: 16,
+            paddingVertical: 12,
+            gap: 12,
+            borderBottomWidth: StyleSheet.hairlineWidth,
+        },
+        rowFlag: {
+            fontSize: 22,
+        },
+        rowLabel: {
+            flex: 1,
+        },
+        check: {
+            fontSize: 16,
+            fontWeight: '600',
+        },
+    });
+}

package/lib/ui/primitives/DobInputField.d.ts

@@ -0,0 +1,14 @@
+export interface DobInputFieldProps {
+    month: string;
+    day: string;
+    year: string;
+    onChange: (next: {
+        month: string;
+        day: string;
+        year: string;
+    }) => void;
+    error?: string;
+    testID?: string;
+}
+export declare function DobInputField({ month, day, year, onChange, error, testID }: DobInputFieldProps): import("react").JSX.Element;
+//# sourceMappingURL=DobInputField.d.ts.map

package/lib/ui/primitives/DobInputField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DobInputField.d.ts","sourceRoot":"","sources":["../../../src/ui/primitives/DobInputField.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAMD,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,kBAAkB,+BAyF9F"}

package/lib/ui/primitives/DobInputField.js

@@ -0,0 +1,81 @@
+import { forwardRef, useMemo, useRef } from 'react';
+import { StyleSheet, Text, TextInput, View } from 'react-native';
+import { useFrameTheme } from '../theme/ThemeContext';
+function digitsOnly(s, max) {
+    return s.replace(/\D+/g, '').slice(0, max);
+}
+export function DobInputField({ month, day, year, onChange, error, testID }) {
+    const theme = useFrameTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    const monthRef = useRef(null);
+    const dayRef = useRef(null);
+    const yearRef = useRef(null);
+    function focusNext(ref) {
+        requestAnimationFrame(() => ref.current?.focus());
+    }
+    function onMonth(raw) {
+        const next = digitsOnly(raw, 2);
+        onChange({ month: next, day, year });
+        // Only auto-advance once the value parses as a valid 1–12 month so the
+        // user isn't surprised by focus moving on an obvious typo (e.g. '24').
+        if (next.length === 2) {
+            const n = Number.parseInt(next, 10);
+            if (n >= 1 && n <= 12)
+                focusNext(dayRef);
+        }
+    }
+    function onDay(raw) {
+        const next = digitsOnly(raw, 2);
+        onChange({ month, day: next, year });
+        if (next.length === 2) {
+            const n = Number.parseInt(next, 10);
+            if (n >= 1 && n <= 31)
+                focusNext(yearRef);
+        }
+    }
+    function onYear(raw) {
+        const next = digitsOnly(raw, 4);
+        onChange({ month, day, year: next });
+    }
+    return (<View testID={testID}>
+      <View style={styles.row}>
+        <Cell ref={monthRef} placeholder="MM" value={month} onChangeText={onMonth} maxLength={2} flex={1} theme={theme} error={!!error} accessibilityLabel="Birth month" testID={testID ? `${testID}.month` : undefined}/>
+        <Cell ref={dayRef} placeholder="DD" value={day} onChangeText={onDay} maxLength={2} flex={1} theme={theme} error={!!error} accessibilityLabel="Birth day" testID={testID ? `${testID}.day` : undefined}/>
+        <Cell ref={yearRef} placeholder="YYYY" value={year} onChangeText={onYear} maxLength={4} flex={1.5} theme={theme} error={!!error} accessibilityLabel="Birth year" testID={testID ? `${testID}.year` : undefined}/>
+      </View>
+      {error ? (<Text style={[
+                styles.error,
+                {
+                    color: theme.colors.error,
+                    fontSize: theme.fonts.bodySmall.size,
+                },
+            ]}>
+          {error}
+        </Text>) : null}
+    </View>);
+}
+const Cell = forwardRef(function Cell({ placeholder, value, onChangeText, maxLength, flex, theme, error, accessibilityLabel, testID, }, ref) {
+    return (<TextInput ref={ref} value={value} onChangeText={onChangeText} placeholder={placeholder} placeholderTextColor={theme.colors.textSecondary} keyboardType="number-pad" inputMode="numeric" maxLength={maxLength} accessibilityLabel={accessibilityLabel} testID={testID} style={{
+            flex,
+            height: 49,
+            borderWidth: 1,
+            borderColor: error ? theme.colors.error : theme.colors.surfaceStroke,
+            borderRadius: theme.radii.medium,
+            paddingHorizontal: 12,
+            color: theme.colors.textPrimary,
+            fontSize: theme.fonts.body.size,
+            textAlign: 'center',
+        }}/>);
+});
+function createStyles(_theme) {
+    return StyleSheet.create({
+        row: {
+            flexDirection: 'row',
+            gap: 8,
+            alignItems: 'center',
+        },
+        error: {
+            marginTop: 4,
+        },
+    });
+}

package/lib/ui/primitives/DropDown.d.ts

@@ -0,0 +1,14 @@
+export interface DropDownOption<T extends string> {
+    value: T;
+    label: string;
+}
+export interface DropDownProps<T extends string> {
+    options: ReadonlyArray<DropDownOption<T>>;
+    selected: T;
+    onSelect: (value: T) => void;
+    prompt?: string;
+    testID?: string;
+    error?: string;
+}
+export declare function DropDown<T extends string>({ options, selected, onSelect, prompt, testID, error }: DropDownProps<T>): import("react").JSX.Element;
+//# sourceMappingURL=DropDown.d.ts.map

package/lib/ui/primitives/DropDown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropDown.d.ts","sourceRoot":"","sources":["../../../src/ui/primitives/DropDown.tsx"],"names":[],"mappings":"AAeA,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,MAAM;IAC9C,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,MAAM;IAC7C,OAAO,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1C,QAAQ,EAAE,CAAC,CAAC;IACZ,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,aAAa,CAAC,CAAC,CAAC,+BAmHlH"}