framepayments-react-native 3.0.0 → 4.0.0

package/lib/ui/screens/onboarding/confirmPaymentMethod/AddPaymentMethodScreen.d.ts

@@ -0,0 +1,18 @@
+import type { OnboardingAddress, OnboardingState } from '../onboardingReducer';
+export interface AddPaymentMethodScreenProps {
+    state: OnboardingState;
+    onChangeAddressField: (field: keyof OnboardingAddress, value: string) => void;
+    /** Card-entry mode. Submits PAN/expiry/CVC; returns the new PM id. */
+    onSubmitNewCard: (card: {
+        pan: string;
+        expirationMonth: string;
+        expirationYear: string;
+        cvc: string;
+    }) => Promise<string>;
+    /** Address-only mode. Patches the saved card's billing. */
+    onSubmitAddressOnly: (paymentMethodId: string) => Promise<void>;
+    /** Apple Pay add-to-owner. iOS only. */
+    onAddApplePay: () => Promise<string>;
+}
+export declare function AddPaymentMethodScreen({ state, onChangeAddressField, onSubmitNewCard, onSubmitAddressOnly, onAddApplePay, }: AddPaymentMethodScreenProps): import("react").JSX.Element;
+//# sourceMappingURL=AddPaymentMethodScreen.d.ts.map

package/lib/ui/screens/onboarding/confirmPaymentMethod/AddPaymentMethodScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddPaymentMethodScreen.d.ts","sourceRoot":"","sources":["../../../../../src/ui/screens/onboarding/confirmPaymentMethod/AddPaymentMethodScreen.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAS/E,MAAM,WAAW,2BAA2B;IAC1C,KAAK,EAAE,eAAe,CAAC;IACvB,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,iBAAiB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9E,sEAAsE;IACtE,eAAe,EAAE,CAAC,IAAI,EAAE;QACtB,GAAG,EAAE,MAAM,CAAC;QACZ,eAAe,EAAE,MAAM,CAAC;QACxB,cAAc,EAAE,MAAM,CAAC;QACvB,GAAG,EAAE,MAAM,CAAC;KACb,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IACtB,2DAA2D;IAC3D,mBAAmB,EAAE,CAAC,eAAe,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChE,wCAAwC;IACxC,aAAa,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC;CACtC;AAED,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,oBAAoB,EACpB,eAAe,EACf,mBAAmB,EACnB,aAAa,GACd,EAAE,2BAA2B,+BAkJ7B"}

package/lib/ui/screens/onboarding/confirmPaymentMethod/AddPaymentMethodScreen.js

@@ -0,0 +1,180 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useFrameTheme } from '../../../theme/ThemeContext';
+import { Button } from '../../../primitives/Button';
+import { PaymentCardField } from '../../../primitives/PaymentCardField';
+import { BillingAddressDetailView } from '../../../primitives/BillingAddressDetailView';
+import { ApplePayButton } from '../../../primitives/ApplePayButton';
+import { canMakeApplePay } from '../../../../applePay';
+import { getApplePayMerchantId } from '../../../../config';
+import { showToast } from '../../../primitives/toastCenter';
+import { FORM_SPACING } from '../formSpacing';
+export function AddPaymentMethodScreen({ state, onChangeAddressField, onSubmitNewCard, onSubmitAddressOnly, onAddApplePay, }) {
+    const theme = useFrameTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    const cardFieldRef = useRef(null);
+    const isAddressOnly = state.addressVerificationOnly;
+    const [applePayReady, setApplePayReady] = useState(false);
+    useEffect(() => {
+        if (isAddressOnly || Platform.OS !== 'ios')
+            return;
+        if (!getApplePayMerchantId())
+            return;
+        let cancelled = false;
+        (async () => {
+            const ready = await canMakeApplePay();
+            if (!cancelled)
+                setApplePayReady(ready);
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [isAddressOnly]);
+    const showApplePay = applePayReady && !isAddressOnly;
+    async function handleSubmit() {
+        if (isAddressOnly) {
+            if (!state.selectedPaymentMethodId) {
+                showToast('No saved card selected.');
+                return;
+            }
+            try {
+                await onSubmitAddressOnly(state.selectedPaymentMethodId);
+            }
+            catch (err) {
+                const message = err instanceof Error ? err.message : 'Could not update billing.';
+                showToast(message);
+            }
+            return;
+        }
+        const cardErrors = cardFieldRef.current?.validate() ?? null;
+        if (cardErrors) {
+            const first = cardErrors.pan ?? cardErrors.expiry ?? cardErrors.cvc ?? 'Enter valid card details.';
+            showToast(first);
+            return;
+        }
+        const values = cardFieldRef.current.getValues();
+        try {
+            await onSubmitNewCard({
+                pan: values.pan,
+                expirationMonth: values.expirationMonth,
+                expirationYear: values.expirationYear,
+                cvc: values.cvc,
+            });
+            cardFieldRef.current?.reset();
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : 'Could not save card.';
+            showToast(message);
+        }
+    }
+    async function handleApplePay() {
+        try {
+            await onAddApplePay();
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : 'Apple Pay add failed.';
+            showToast(message);
+        }
+    }
+    return (<View style={styles.container}>
+      <ScrollView contentContainerStyle={styles.scrollContent} keyboardShouldPersistTaps="handled">
+        <Text style={[
+            styles.heading,
+            {
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.heading.size,
+                fontWeight: theme.fontWeights.heading,
+                lineHeight: theme.fontLineHeights.heading,
+            },
+        ]}>
+          Add New Payment Method
+        </Text>
+
+        {showApplePay ? (<View style={styles.applePayBlock}>
+            <ApplePayButton buttonType="setUp" onPress={handleApplePay}/>
+            <View style={styles.orRow}>
+              <View style={[styles.orLine, { backgroundColor: theme.colors.surfaceStroke }]}/>
+              <Text style={[styles.orLabel, { color: theme.colors.textSecondary }]}>Or</Text>
+              <View style={[styles.orLine, { backgroundColor: theme.colors.surfaceStroke }]}/>
+            </View>
+          </View>) : null}
+
+        {!isAddressOnly ? (<View style={styles.section}>
+            <Text style={[
+                styles.sectionTitle,
+                {
+                    color: theme.colors.textPrimary,
+                    fontSize: theme.fonts.headline.size,
+                    fontWeight: theme.fontWeights.headline,
+                    lineHeight: theme.fontLineHeights.headline,
+                },
+            ]}>
+              Card Information
+            </Text>
+            <PaymentCardField ref={cardFieldRef}/>
+          </View>) : null}
+
+        <View style={styles.section}>
+          <Text style={[
+            styles.sectionTitle,
+            {
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.headline.size,
+                fontWeight: theme.fontWeights.headline,
+                lineHeight: theme.fontLineHeights.headline,
+            },
+        ]}>
+            Billing Address
+          </Text>
+          <BillingAddressDetailView address={state.address} errors={state.fieldErrors} onChangeField={onChangeAddressField} international={false}/>
+        </View>
+      </ScrollView>
+      <View style={styles.footer}>
+        <Button text="Continue" enabled={!state.isPerformingAction} isLoading={state.isPerformingAction} onPress={handleSubmit}/>
+      </View>
+    </View>);
+}
+function createStyles(_theme) {
+    return StyleSheet.create({
+        container: {
+            flex: 1,
+        },
+        scrollContent: {
+            paddingHorizontal: FORM_SPACING.contentHorizontal,
+            paddingBottom: FORM_SPACING.contentBottom,
+        },
+        heading: {
+            marginTop: FORM_SPACING.headingTop,
+            marginBottom: FORM_SPACING.headingBottom,
+        },
+        applePayBlock: {
+            marginBottom: 8,
+        },
+        orRow: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            marginVertical: FORM_SPACING.sectionBottom,
+            gap: 8,
+        },
+        orLine: {
+            flex: 1,
+            height: StyleSheet.hairlineWidth,
+        },
+        orLabel: {
+            fontSize: 12,
+            textTransform: 'uppercase',
+        },
+        section: {
+            marginBottom: FORM_SPACING.sectionBottom,
+            gap: FORM_SPACING.fieldGap,
+        },
+        sectionTitle: {
+        // Title-to-field spacing comes from `section.gap` — keep this empty
+        // so the rhythm matches every other onboarding form.
+        },
+        footer: {
+            paddingHorizontal: FORM_SPACING.footerHorizontal,
+            paddingVertical: FORM_SPACING.footerVertical,
+        },
+    });
+}

package/lib/ui/screens/onboarding/confirmPaymentMethod/SecurePMVerificationScreen.d.ts

@@ -0,0 +1,16 @@
+import type { OnboardingState } from '../onboardingReducer';
+export interface SecurePMVerificationScreenProps {
+    state: OnboardingState;
+    /** Poll threeDS.get until terminal. Resolves on succeeded; throws otherwise.
+     *  The screen passes an AbortSignal so the poll ends on unmount. */
+    onPoll: (signal: AbortSignal) => Promise<void>;
+    /** Re-request the bank's challenge (sends a new SMS / push). */
+    onResend: () => Promise<void>;
+    /** Called once polling resolves successfully — the parent advances. */
+    onSuccess: () => void;
+    /** Called when polling terminates with failure. The parent typically pops
+     *  back to AddPaymentMethod so the user can try a different card. */
+    onFailure: (message: string) => void;
+}
+export declare function SecurePMVerificationScreen({ state, onPoll, onResend, onSuccess, onFailure, }: SecurePMVerificationScreenProps): import("react").JSX.Element;
+//# sourceMappingURL=SecurePMVerificationScreen.d.ts.map

package/lib/ui/screens/onboarding/confirmPaymentMethod/SecurePMVerificationScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SecurePMVerificationScreen.d.ts","sourceRoot":"","sources":["../../../../../src/ui/screens/onboarding/confirmPaymentMethod/SecurePMVerificationScreen.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAS5D,MAAM,WAAW,+BAA+B;IAC9C,KAAK,EAAE,eAAe,CAAC;IACvB;wEACoE;IACpE,MAAM,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,gEAAgE;IAChE,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,uEAAuE;IACvE,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB;yEACqE;IACrE,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,0BAA0B,CAAC,EACzC,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,EACT,SAAS,GACV,EAAE,+BAA+B,+BAgGjC"}

package/lib/ui/screens/onboarding/confirmPaymentMethod/SecurePMVerificationScreen.js

@@ -0,0 +1,117 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
+import { useFrameTheme } from '../../../theme/ThemeContext';
+import { Button } from '../../../primitives/Button';
+import { showToast } from '../../../primitives/toastCenter';
+import { FORM_SPACING } from '../formSpacing';
+export function SecurePMVerificationScreen({ state, onPoll, onResend, onSuccess, onFailure, }) {
+    const theme = useFrameTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    const [resending, setResending] = useState(false);
+    // Latest-callback refs so the poll effect doesn't re-fire on parent re-renders.
+    const onSuccessRef = useRef(onSuccess);
+    const onFailureRef = useRef(onFailure);
+    const onPollRef = useRef(onPoll);
+    onSuccessRef.current = onSuccess;
+    onFailureRef.current = onFailure;
+    onPollRef.current = onPoll;
+    // Poll re-fires whenever the 3DS id rotates (e.g. after Resend returns a
+    // new ThreeDSIntent). On unmount or id change the previous controller is
+    // aborted, terminating the in-flight poll.
+    useEffect(() => {
+        if (!state.threeDsVerificationId) {
+            // Surface the lost-session as a failure rather than rendering a blank
+            // spinner forever — the parent will toast + route back to AddPM.
+            onFailureRef.current('3DS session lost. Please try again.');
+            return;
+        }
+        const controller = new AbortController();
+        (async () => {
+            try {
+                await onPollRef.current(controller.signal);
+                if (controller.signal.aborted)
+                    return;
+                onSuccessRef.current();
+            }
+            catch (err) {
+                if (controller.signal.aborted)
+                    return;
+                const code = err.code;
+                if (code === 'USER_CANCELED')
+                    return; // signal abort from our own controller
+                const message = err instanceof Error ? err.message : 'Verification failed.';
+                onFailureRef.current(message);
+            }
+        })();
+        return () => {
+            controller.abort();
+        };
+    }, [state.threeDsVerificationId]);
+    async function handleResend() {
+        setResending(true);
+        try {
+            await onResend();
+            showToast('A new verification request was sent.', { variant: 'info' });
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : 'Could not resend verification.';
+            showToast(message);
+        }
+        finally {
+            setResending(false);
+        }
+    }
+    return (<View style={styles.container}>
+      <View style={styles.content}>
+        <ActivityIndicator size="large" color={theme.colors.textSecondary}/>
+        <Text style={[
+            styles.title,
+            {
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.heading.size,
+                fontWeight: theme.fontWeights.heading,
+                lineHeight: theme.fontLineHeights.heading,
+            },
+        ]}>
+          Complete verification
+        </Text>
+        <Text style={[
+            styles.body,
+            {
+                color: theme.colors.textSecondary,
+                fontSize: theme.fonts.body.size,
+                lineHeight: theme.fontLineHeights.body,
+            },
+        ]}>
+          Your bank will send a verification request — open the bank app or check your messages, then come back here. We'll continue as soon as it's confirmed.
+        </Text>
+      </View>
+      <View style={styles.footer}>
+        <Button text="Resend verification" variant="secondary" enabled={!resending} isLoading={resending} onPress={handleResend}/>
+      </View>
+    </View>);
+}
+function createStyles(_theme) {
+    return StyleSheet.create({
+        container: {
+            flex: 1,
+            paddingHorizontal: FORM_SPACING.contentHorizontal,
+        },
+        content: {
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: FORM_SPACING.sectionBottom,
+        },
+        title: {
+            marginTop: FORM_SPACING.headingTop,
+            textAlign: 'center',
+        },
+        body: {
+            textAlign: 'center',
+        },
+        footer: {
+            paddingVertical: FORM_SPACING.footerVertical,
+        },
+    });
+}

package/lib/ui/screens/onboarding/confirmPaymentMethod/SelectPaymentMethodScreen.d.ts

@@ -0,0 +1,9 @@
+import type { OnboardingState } from '../onboardingReducer';
+export interface SelectPaymentMethodScreenProps {
+    state: OnboardingState;
+    onLoadMethods: () => Promise<void>;
+    onSelectMethod: (id: string | null) => void;
+    onContinue: () => void;
+}
+export declare function SelectPaymentMethodScreen({ state, onLoadMethods, onSelectMethod, onContinue, }: SelectPaymentMethodScreenProps): import("react").JSX.Element;
+//# sourceMappingURL=SelectPaymentMethodScreen.d.ts.map

package/lib/ui/screens/onboarding/confirmPaymentMethod/SelectPaymentMethodScreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectPaymentMethodScreen.d.ts","sourceRoot":"","sources":["../../../../../src/ui/screens/onboarding/confirmPaymentMethod/SelectPaymentMethodScreen.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAc5D,MAAM,WAAW,8BAA8B;IAC7C,KAAK,EAAE,eAAe,CAAC;IACvB,aAAa,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACnC,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC5C,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,wBAAgB,yBAAyB,CAAC,EACxC,KAAK,EACL,aAAa,EACb,cAAc,EACd,UAAU,GACX,EAAE,8BAA8B,+BA+GhC"}

package/lib/ui/screens/onboarding/confirmPaymentMethod/SelectPaymentMethodScreen.js

@@ -0,0 +1,159 @@
+import { useEffect, useMemo } from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { useFrameTheme } from '../../../theme/ThemeContext';
+import { Button } from '../../../primitives/Button';
+import { PaymentMethodRow } from '../../../primitives/PaymentMethodRow';
+import { Icon } from '../../../assets';
+import { FORM_SPACING } from '../formSpacing';
+// Select a saved card or add a new one. The Continue handler is owned by the
+// parent (OnboardingRoot) and mirrors iOS SelectPaymentMethodView's
+// ContinueButton action:
+//   - address_verification requested + selected card lacks billing → push
+//     AddPaymentMethod in onlyAddressVerification mode
+//   - else → advance to the next onboarding step
+// Note: iOS has a TODO-commented card_verification → 3DS branch but it's not
+// active; we mirror the active iOS behavior, not the commented-out future.
+const ADD_NEW_SENTINEL = '__add_new__';
+export function SelectPaymentMethodScreen({ state, onLoadMethods, onSelectMethod, onContinue, }) {
+    const theme = useFrameTheme();
+    const styles = useMemo(() => createStyles(theme), [theme]);
+    // Fire-and-forget load on mount. Failures stay silent (the catch in the VM
+    // sets savedPaymentMethods=[] so the UI still functions).
+    useEffect(() => {
+        void onLoadMethods();
+    }, [onLoadMethods]);
+    // `selectedPaymentMethodId === null` always means "Debit/Credit card" is
+    // the active choice — the row visually reflects it and Continue routes to
+    // AddPaymentMethod. This screen only renders when sub-step === 'select',
+    // so no extra sub-step gate is needed.
+    const isAddNewSelected = state.selectedPaymentMethodId === null;
+    function selectAddNew() {
+        onSelectMethod(null);
+    }
+    return (<View style={styles.container}>
+      <ScrollView contentContainerStyle={styles.scrollContent} keyboardShouldPersistTaps="handled">
+        <Text style={[
+            styles.heading,
+            {
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.heading.size,
+                fontWeight: theme.fontWeights.heading,
+                lineHeight: theme.fontLineHeights.heading,
+            },
+        ]}>
+          Select A Payment Method
+        </Text>
+        <Text style={[
+            styles.body,
+            {
+                color: theme.colors.textSecondary,
+                fontSize: theme.fonts.body.size,
+                lineHeight: theme.fontLineHeights.body,
+            },
+        ]}>
+          Choose a saved payment method or add a new one to continue
+        </Text>
+
+        {state.savedPaymentMethods.length > 0 ? (<>
+            <Text style={[
+                styles.sectionHeader,
+                {
+                    color: theme.colors.textPrimary,
+                    fontSize: theme.fonts.bodySmall.size,
+                    fontWeight: theme.fontWeights.label,
+                },
+            ]}>
+              Saved Payment Methods
+            </Text>
+            <View style={styles.list}>
+              {state.savedPaymentMethods.map((pm) => (<PaymentMethodRow key={pm.id} title={cardTitle(pm)} subtitle={cardSubtitle(pm) ?? undefined} selected={state.selectedPaymentMethodId === pm.id} onPress={() => onSelectMethod(pm.id)} icon={<Icon name={brandIconName(pm.card?.brand)} width={40} height={28}/>} testID={`onboarding.pm.${pm.id}`}/>))}
+            </View>
+          </>) : null}
+
+        <Text style={[
+            styles.sectionHeader,
+            {
+                color: theme.colors.textPrimary,
+                fontSize: theme.fonts.bodySmall.size,
+                fontWeight: theme.fontWeights.label,
+            },
+        ]}>
+          Add Payment Method
+        </Text>
+        <View style={styles.list}>
+          <PaymentMethodRow title="Debit/Credit Card" selected={isAddNewSelected} onPress={selectAddNew} icon={<Icon name="empty-card" width={40} height={28} color={theme.colors.textPrimary}/>} testID={`onboarding.pm.${ADD_NEW_SENTINEL}`}/>
+        </View>
+      </ScrollView>
+      <View style={styles.footer}>
+        <Button text="Continue" enabled={!state.isPerformingAction} isLoading={state.isPerformingAction} onPress={onContinue}/>
+      </View>
+    </View>);
+}
+function cardTitle(pm) {
+    if (pm.card?.last_four) {
+        const brand = pm.card.brand ? prettyBrand(pm.card.brand) : 'Card';
+        return `${brand} •••• ${pm.card.last_four}`;
+    }
+    return 'Saved card';
+}
+function cardSubtitle(pm) {
+    if (pm.card?.exp_month && pm.card?.exp_year) {
+        return `Exp ${pm.card.exp_month}/${pm.card.exp_year}`;
+    }
+    return null;
+}
+function brandIconName(brand) {
+    switch ((brand ?? '').toLowerCase()) {
+        case 'visa':
+            return 'visa';
+        case 'mastercard':
+            return 'mastercard';
+        case 'amex':
+            return 'amex';
+        case 'discover':
+            return 'discover';
+        default:
+            return 'credit-card';
+    }
+}
+function prettyBrand(brand) {
+    switch (brand.toLowerCase()) {
+        case 'amex': return 'Amex';
+        case 'visa': return 'Visa';
+        case 'mastercard': return 'Mastercard';
+        case 'discover': return 'Discover';
+        case 'diners': return 'Diners';
+        case 'jcb': return 'JCB';
+        case 'unionpay': return 'UnionPay';
+        default: return brand;
+    }
+}
+function createStyles(_theme) {
+    return StyleSheet.create({
+        container: {
+            flex: 1,
+        },
+        scrollContent: {
+            paddingHorizontal: FORM_SPACING.contentHorizontal,
+            paddingBottom: FORM_SPACING.contentBottom,
+        },
+        heading: {
+            marginTop: FORM_SPACING.headingTop,
+        },
+        body: {
+            marginTop: FORM_SPACING.headingTop,
+            marginBottom: FORM_SPACING.subheadBottom,
+        },
+        sectionHeader: {
+            marginTop: FORM_SPACING.sectionBottom,
+            marginBottom: 8,
+        },
+        list: {
+            gap: 8,
+        },
+        footer: {
+            paddingHorizontal: FORM_SPACING.footerHorizontal,
+            paddingVertical: FORM_SPACING.footerVertical,
+        },
+    });
+}

package/lib/ui/screens/onboarding/formSpacing.d.ts

@@ -0,0 +1,20 @@
+export declare const FORM_SPACING: {
+    /** Horizontal padding inside each screen's outer ScrollView. */
+    readonly contentHorizontal: 24;
+    /** Bottom padding inside each screen's outer ScrollView. */
+    readonly contentBottom: 24;
+    /** Top spacing for the screen heading (sits just below the chrome). */
+    readonly headingTop: 8;
+    /** Spacing between the screen heading and the first content block. */
+    readonly headingBottom: 16;
+    /** Spacing between the optional body/subhead and the first field block. */
+    readonly subheadBottom: 16;
+    /** Vertical gap between sibling form fields inside a `section`. */
+    readonly fieldGap: 12;
+    /** Spacing between sections (a section is a heading + its fields). */
+    readonly sectionBottom: 16;
+    /** Footer (continue button) padding. */
+    readonly footerHorizontal: 24;
+    readonly footerVertical: 24;
+};
+//# sourceMappingURL=formSpacing.d.ts.map

package/lib/ui/screens/onboarding/formSpacing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formSpacing.d.ts","sourceRoot":"","sources":["../../../../src/ui/screens/onboarding/formSpacing.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,YAAY;IACvB,gEAAgE;;IAEhE,4DAA4D;;IAE5D,uEAAuE;;IAEvE,sEAAsE;;IAEtE,2EAA2E;;IAE3E,mEAAmE;;IAEnE,sEAAsE;;IAEtE,wCAAwC;;;CAGhC,CAAC"}

package/lib/ui/screens/onboarding/formSpacing.js

@@ -0,0 +1,25 @@
+// Shared onboarding form spacing tokens. Every form screen reads these so
+// padding/heading/field gaps stay consistent across PhoneAuth, Customer
+// Information, Add Payment Method, Add Payout Method, etc. If you find
+// yourself overriding a value here, prefer adding a new named token over
+// hand-tuning per-screen — divergence is what creates the "every screen
+// looks different" complaint.
+export const FORM_SPACING = {
+    /** Horizontal padding inside each screen's outer ScrollView. */
+    contentHorizontal: 24,
+    /** Bottom padding inside each screen's outer ScrollView. */
+    contentBottom: 24,
+    /** Top spacing for the screen heading (sits just below the chrome). */
+    headingTop: 8,
+    /** Spacing between the screen heading and the first content block. */
+    headingBottom: 16,
+    /** Spacing between the optional body/subhead and the first field block. */
+    subheadBottom: 16,
+    /** Vertical gap between sibling form fields inside a `section`. */
+    fieldGap: 12,
+    /** Spacing between sections (a section is a heading + its fields). */
+    sectionBottom: 16,
+    /** Footer (continue button) padding. */
+    footerHorizontal: 24,
+    footerVertical: 24,
+};