@incodetech/prizma-core-screens 0.1.0

package/dist/PermissionsRequiredScreen.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { type PrizmaListScreenProps } from './ListScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { PermissionsCapability, PermissionsStrings } from './PermissionsStrings';
+import './ScreenLayout.css';
+export interface PermissionsRequiredScreenProps extends Omit<PrizmaListScreenProps, 'status' | 'title' | 'subtitle' | 'children' | 'ctaLabel' | 'linkLabel' | 'verifiedLabel' | 'navLabel'> {
+    /** Family copy — this screen reads the `required` slice. */
+    strings: PermissionsStrings;
+    /** Which capability is being asked for. Keys the first row's glyph. Default `camera`. */
+    capability?: PermissionsCapability;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Permissions — "Camera permission is required", built on the List archetype
+ * (GUIDELINES.md §6-G, `PrizmaListScreen`).
+ *
+ * Figma: `1-3-2-id` of the `Permissions` section (qGJjfL4O0JSjz1x4tOjJn8,
+ * 3:1193). This is the screen a user lands on after refusing the browser's own
+ * prompt: a warning mark, the headline, three rows saying what the capability
+ * is for, a tertiary "quit" link and the ask.
+ *
+ * `1-3-2-id-quit-process` is the SAME screen with an iOS confirm alert layered
+ * over it — an OS surface, not a second Prizma screen, so it is not built here
+ * (see `PermissionsStrings.ts`).
+ *
+ * `showHeader={false}` keeps the section's logo-free chrome — the flow has not
+ * started — with the nav row still reserved so nothing shifts on the next
+ * screen.
+ *
+ * Figma draws the status mark as a filled amber disc; Core renders the
+ * canonical OUTLINE warning mark (icon-outline sweep, DEVIATIONS #15). The
+ * generic file is one sweep behind, exactly as the module files were.
+ */
+export declare const PermissionsRequiredScreen: React.ForwardRefExoticComponent<PermissionsRequiredScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default PermissionsRequiredScreen;

package/dist/PermissionsRequiredScreen.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { IconApproval, IconBankCardSearch, IconCamera, IconGeoPin, IconMicrophone, } from '@incodetech/prizma-core-icons';
+import { PrizmaCardListCommonIssues } from '@incodetech/prizma-core-web/card-list';
+import { PrizmaListScreen } from './ListScreen';
+import './ScreenLayout.css';
+/**
+ * The reason rows' leading glyphs, in the order the frame lists them: the
+ * capability itself · what it proves · that it is required. Canonical bank only
+ * (§10). The first row is keyed to the capability so a microphone prompt does
+ * not lead with a camera.
+ */
+const LEAD_ICON = {
+    camera: _jsx(IconCamera, { size: "m" }),
+    microphone: _jsx(IconMicrophone, { size: "m" }),
+    location: _jsx(IconGeoPin, { size: "m" }),
+};
+const TRAILING_ICONS = [
+    _jsx(IconBankCardSearch, { size: "m" }, "authenticity"),
+    _jsx(IconApproval, { size: "m" }, "required"),
+];
+/**
+ * Permissions — "Camera permission is required", built on the List archetype
+ * (GUIDELINES.md §6-G, `PrizmaListScreen`).
+ *
+ * Figma: `1-3-2-id` of the `Permissions` section (qGJjfL4O0JSjz1x4tOjJn8,
+ * 3:1193). This is the screen a user lands on after refusing the browser's own
+ * prompt: a warning mark, the headline, three rows saying what the capability
+ * is for, a tertiary "quit" link and the ask.
+ *
+ * `1-3-2-id-quit-process` is the SAME screen with an iOS confirm alert layered
+ * over it — an OS surface, not a second Prizma screen, so it is not built here
+ * (see `PermissionsStrings.ts`).
+ *
+ * `showHeader={false}` keeps the section's logo-free chrome — the flow has not
+ * started — with the nav row still reserved so nothing shifts on the next
+ * screen.
+ *
+ * Figma draws the status mark as a filled amber disc; Core renders the
+ * canonical OUTLINE warning mark (icon-outline sweep, DEVIATIONS #15). The
+ * generic file is one sweep behind, exactly as the module files were.
+ */
+export const PermissionsRequiredScreen = forwardRef(({ strings, capability = 'camera', screenId = 'permissions-required', showHeader = false, overrides, onAction, ...shell }, ref) => (_jsx(PrizmaListScreen, { ref: ref, showHeader: showHeader, status: "warning", title: strings.required.title, subtitle: strings.required.description, ctaLabel: strings.required.ctaLabel, linkLabel: strings.required.quitLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell, children: _jsx(PrizmaCardListCommonIssues, { items: strings.required.rows.map((row, i) => ({
+            icon: i === 0 ? LEAD_ICON[capability] : TRAILING_ICONS[(i - 1) % TRAILING_ICONS.length],
+            title: row.title,
+            subtitle: row.description,
+            showSubtitle: Boolean(row.description),
+        })) }) })));
+PermissionsRequiredScreen.displayName = 'PermissionsRequiredScreen';
+export default PermissionsRequiredScreen;

package/dist/PermissionsStrings.d.ts

@@ -0,0 +1,70 @@
+/**
+ * The capability being asked for. The Figma section is drawn for the camera
+ * throughout, but the skeleton is identical for a microphone or a location
+ * prompt — so the screens never name the device themselves, the copy does, and
+ * this type exists only to key the reason-row glyphs.
+ */
+export type PermissionsCapability = 'camera' | 'microphone' | 'location';
+/** A single reason row — Core `PrizmaCardListCommonIssues` rows. */
+export interface PermissionsReasonRow {
+    title: string;
+    description?: string;
+}
+/**
+ * Which browser's "turn it back on" journey to show. `safariIos` is the base
+ * `1-4-2-id` frame; the other four are the `Android browsers` section of the
+ * Web flow (4:8159). Re-enabling a permission is a different journey in every
+ * browser, which is why one screen carries five step lists rather than five
+ * screens carrying one skeleton.
+ */
+export type PermissionsBrowser = 'safariIos' | 'chromeAndroid' | 'firefoxAndroid' | 'samsungAndroid' | 'operaAndroid';
+/**
+ * Step kind → canonical bank glyph, resolved in
+ * `PermissionsBrowserStepsScreen`. Figma leads every row with OS/browser chrome
+ * the Prizma bank does not ship — a ⋮ overflow, a gear tile, a permission
+ * toggle, and each browser's own logo on the last row. Shipping those would
+ * mean inventing primitives and bundling brand rasters, so each row takes the
+ * nearest canonical glyph. Same substitution table Geolocation already
+ * escalated (`GeolocationBrowserStepsScreen`); this family reuses it rather
+ * than inventing a second one.
+ */
+export type PermissionsStepKind = 'settings' | 'browser' | 'menu' | 'permissions' | 'camera' | 'toggle' | 'device' | 'apps' | 'return';
+export interface PermissionsStep {
+    kind: PermissionsStepKind;
+    label: string;
+}
+export interface PermissionsBrowserSteps {
+    /** Names the browser under the headline. Figma labels the section, not the
+     *  screen; the label keeps five otherwise near-identical cards apart. */
+    label: string;
+    steps: PermissionsStep[];
+}
+export interface PermissionsStrings {
+    /** Accessible name for the logo nav region (i18n — no baked-in English). */
+    navLabel?: string;
+    /** "verified by" attribution copy for the footer tag. */
+    verifiedLabel: string;
+    /** `1-3-2-id` — the permission was refused and the flow explains why it needs it. */
+    required: {
+        title: string;
+        /** Optional line under the title. Figma's frame draws the rows alone. */
+        description?: string;
+        rows: PermissionsReasonRow[];
+        /** Tertiary link — "Quit process". */
+        quitLabel: string;
+        ctaLabel: string;
+    };
+    /** `1-3-2-id-allow-camera` — the first ask, before any refusal. */
+    allow: {
+        title: string;
+        subtitle?: string;
+        quitLabel: string;
+        ctaLabel: string;
+    };
+    /** `1-4-2-id` + the four `Android browsers` siblings. */
+    browserSteps: {
+        title: string;
+        ctaLabel: string;
+        browsers: Record<PermissionsBrowser, PermissionsBrowserSteps>;
+    };
+}

package/dist/PermissionsStrings.js

@@ -0,0 +1,36 @@
+// Permission screens — copy contract for the GENERIC family.
+//
+// Figma: `Module Generic Screens` (qGJjfL4O0JSjz1x4tOjJn8), section
+// `Permissions` (3:1193), with the two full-flow frames `🍎 iOS` (3:7788) and
+// `🌐 Web` (3:620).
+//
+// These screens are not one module's. Every module that reaches for the camera
+// — ID Capture, Face Capture, Document Capture, Video Selfie — shows the SAME
+// three surfaces when the browser or the OS says no, which is why the file that
+// documents them is called "Generic Screens" and why they live here rather than
+// under a module prefix. `IdCapturePermissionScreen` predates this family and
+// is the ID Capture-flavoured copy of the same skeleton; it stays where it is so
+// nothing that imports it breaks (DEVIATIONS #IDC-26).
+//
+// The section's seven frames collapse onto THREE built screens:
+//
+//   1-3-2-id                          → PermissionsRequiredScreen  (reason rows)
+//   1-3-2-id-allow-camera             → PermissionsAllowScreen     (subtitle)
+//   1-4-2-id (+ 4 Android siblings)   → PermissionsBrowserStepsScreen
+//
+// The other four are OS chrome and are NOT built:
+//
+//   1-3-1-id-permission-modal   the browser's own "Allow camera access" sheet
+//   1-4-1-id                    the iOS "…Would Like to Access the Camera" alert
+//   1-3-2-id-quit-process       an iOS confirm alert layered over 1-3-2-id
+//   1-3-2-id-allow-camera-quit  the same alert layered over the allow screen
+//
+// None of them is a Prizma surface: their chrome does not exist in Core and
+// rebuilding it would mean inventing primitives and shipping platform rasters,
+// both forbidden (rule 1, GUIDELINES §10). Same call as Document Capture's iOS
+// action sheets (#DC-20) and Geolocation's system alert. Core Lab draws them as
+// dashed OS mocks on the flow instead, so the chain still reads.
+//
+// No hardcoded English anywhere in a screen: every visible string arrives here,
+// so a host's locale pack drives the family.
+export {};

package/dist/PhoneInputErrorScreen.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { PhoneInputErrorVariant, PhoneInputStrings } from './PhoneInputStrings';
+import './ScreenLayout.css';
+export interface PhoneInputErrorScreenProps extends Omit<PrizmaResultScreenProps, 'status' | 'title' | 'subtitle' | 'glyph' | 'ctaLabel' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `error` slice its `variant` names. */
+    strings: PhoneInputStrings;
+    /** Which purple `phoneNumber.error.*` section to render. Default `tryAgain`. */
+    variant?: PhoneInputErrorVariant;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Phone Input — the error verdicts, built on the Result archetype
+ * (GUIDELINES.md §6-F, `PrizmaResultScreen`).
+ *
+ * ONE screen for the three purple `phoneNumber.error.*` sections:
+ * - `tryAgain`  — the code could not be sent, retry
+ * - `unknown`   — `phonenumber.error.unknown`, the generic failure
+ * - `noNetwork` — the connectivity family every module carries
+ *
+ * `noNetwork` KEEPS the logo header and the verified tag, exactly as the three
+ * Wave-2 `*NoConnectionScreen`s do. The module Figma draws this section bare —
+ * DEVIATIONS #9 recorded that observation in Wave 1 — but the owner rule of
+ * 2026-08-18 (#F-34) supersedes it: the chrome is constant across every screen
+ * so nothing shifts between states, and all four modules' connectivity screens
+ * must read identically. DEVIATIONS #PI-8.
+ *
+ * The Wi-Fi mark is Figma's `Icon / Wi-Fi`; Core's `PrizmaTitle` icon allowlist
+ * is `status | spinner | none`, so it rides the archetype's `glyph` slot with
+ * the foundation's `__glyph` class, drawn from the canonical icon bank
+ * (DEVIATIONS #10).
+ */
+export declare const PhoneInputErrorScreen: React.ForwardRefExoticComponent<PhoneInputErrorScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default PhoneInputErrorScreen;

package/dist/PhoneInputErrorScreen.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { IconWifiOff } from '@incodetech/prizma-core-icons';
+import { PrizmaResultScreen } from './ResultScreen';
+import './ScreenLayout.css';
+/**
+ * Phone Input — the error verdicts, built on the Result archetype
+ * (GUIDELINES.md §6-F, `PrizmaResultScreen`).
+ *
+ * ONE screen for the three purple `phoneNumber.error.*` sections:
+ * - `tryAgain`  — the code could not be sent, retry
+ * - `unknown`   — `phonenumber.error.unknown`, the generic failure
+ * - `noNetwork` — the connectivity family every module carries
+ *
+ * `noNetwork` KEEPS the logo header and the verified tag, exactly as the three
+ * Wave-2 `*NoConnectionScreen`s do. The module Figma draws this section bare —
+ * DEVIATIONS #9 recorded that observation in Wave 1 — but the owner rule of
+ * 2026-08-18 (#F-34) supersedes it: the chrome is constant across every screen
+ * so nothing shifts between states, and all four modules' connectivity screens
+ * must read identically. DEVIATIONS #PI-8.
+ *
+ * The Wi-Fi mark is Figma's `Icon / Wi-Fi`; Core's `PrizmaTitle` icon allowlist
+ * is `status | spinner | none`, so it rides the archetype's `glyph` slot with
+ * the foundation's `__glyph` class, drawn from the canonical icon bank
+ * (DEVIATIONS #10).
+ */
+export const PhoneInputErrorScreen = forwardRef(({ strings, variant = 'tryAgain', screenId = `phone-input-error-${variant}`, overrides, onAction, ...shell }, ref) => {
+    const noConnection = variant === 'noNetwork';
+    const copy = noConnection
+        ? strings.error.noConnection
+        : variant === 'unknown'
+            ? strings.error.unknown
+            : strings.error.tryAgain;
+    return (_jsx(PrizmaResultScreen, { ref: ref, 
+        /* The connectivity screen leads with the Wi-Fi glyph instead of a
+           status mark; the other two carry the canonical error mark. */
+        status: noConnection ? 'none' : 'error', glyph: noConnection ? (_jsx("span", { className: [
+                'prizma-screen-layout__glyph',
+                'prizma-screen-layout__glyph--negative',
+                overrides?.align === 'left' ? 'prizma-screen-layout__glyph--left' : '',
+            ]
+                .filter(Boolean)
+                .join(' '), children: _jsx(IconWifiOff, { size: "l" }) })) : undefined, title: copy.title, subtitle: copy.subtitle, ctaLabel: copy.ctaLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell }));
+});
+PhoneInputErrorScreen.displayName = 'PhoneInputErrorScreen';
+export default PhoneInputErrorScreen;

package/dist/PhoneInputLayout.css

@@ -0,0 +1,61 @@
+/* Phone Input — module layout additions.
+ *
+ * ONLY what the foundation archetypes and Prizma Core do not already own.
+ * Every value is a token. Nothing here re-declares an archetype spacing rule:
+ * the content column, the 24px gutters, the title → fields offset and the
+ * anchored footer all stay the foundation's (`ScreenLayout.css`,
+ * `FormScreen.css`).
+ */
+
+/* ── Combined country + phone row ────────────────────────────────────────────
+ * Figma `Input / Combined` (3939:41889): "a combined form element that allows
+ * users to input phone number" — a dropdown + text field pair at Spacing/8,
+ * the dropdown hugging its content, the field filling the rest.
+ *
+ * Core ships both primitives; what it has no component for is the PAIRING, so
+ * the row lives here. `align-items: start` keeps the two fields top-aligned
+ * when the text field grows an error/helper row that the dropdown does not.
+ */
+.phone-input-combined {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--prizma-spacing-8);
+  width: 100%;
+}
+
+/* The dial-code dropdown hugs its content ("🇷🇸 +381"), as Figma draws it.
+ *
+ * Core's `.prizma-dropdown` is `width: 100%` (Dropdown.css) — it is built to
+ * FILL its container and ships no hug/auto-width variant, so inside this row it
+ * consumed the whole column and pushed the number field out. Constrained here
+ * from the module layer (no Core file touched, no !important): `width: auto`
+ * releases the fill and `flex: 0 0 auto` keeps the row from stretching it back.
+ * The inner `__anchor` inherits the same rule for the same reason.
+ * A `width`/`fit` prop on `PrizmaDropdown` would remove this — DEVIATIONS #PI-1.
+ */
+.phone-input-combined__country,
+.phone-input-combined__country .prizma-dropdown__anchor,
+.phone-input-combined__country .prizma-dropdown__label-container {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+/* …and the number field takes the remaining width. `min-width: 0` is what lets
+ * it actually shrink inside the flex row instead of overflowing the column. */
+.phone-input-combined__number {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* The open menu must NOT inherit the hugged anchor's width: Core anchors the
+ * menu to the trigger, so once the trigger hugs "🇷🇸 +381" the option rows
+ * truncate ("+…"). The menu keeps its own readable width — it lists country
+ * names and dial codes, which the closed field never shows. Sized to the
+ * content and capped at the 342 column so it never escapes the screen.
+ * DEVIATIONS #PI-1 (same root cause as the hug).
+ */
+.phone-input-combined__country .prizma-dropdown__menu {
+  width: max-content;
+  min-width: 100%;
+  max-width: 342px;
+}

package/dist/PhoneInputOtpScreen.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { PhoneInputOtpState, PhoneInputStrings } from './PhoneInputStrings';
+import './ScreenLayout.css';
+import './PhoneInputLayout.css';
+export interface PhoneInputOtpScreenProps extends Omit<PrizmaFormScreenProps, 'title' | 'subtitle' | 'ctaLabel' | 'verifiedLabel' | 'children' | 'navLabel'> {
+    /** Module copy — this screen reads the `otp` slice. */
+    strings: PhoneInputStrings;
+    /** Which purple `phoneNumber.OTP.*` section to render. Default `typing`. */
+    state?: PhoneInputOtpState;
+    /** The code as typed. `typing` draws a partial value, `filled` a complete one. */
+    value?: string;
+    /** How many digits the code carries. Default 6. */
+    length?: number;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Phone Input — the one-time-code screen, built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for all four purple `phoneNumber.OTP.*` sections
+ * (`typing` / `filled` / `processing` / `error`) — identical layout, differing
+ * only in the state of the code field and the CTA.
+ *
+ * `processing` deliberately does NOT use Core's `PrizmaOtp.loading`. That prop
+ * centres the spinner INSIDE the code field (owner definition 2026-07-12), but
+ * the purple `OTP.processing` section draws the field simply DISABLED with the
+ * code still legible and puts the spinner in the CTA — the same treatment as
+ * `verify.loading`, which is what makes the module read consistently. Figma
+ * wins; `PrizmaOtp.loading` stays correct for hosts that want the in-field
+ * spinner. DEVIATIONS #PI-5.
+ */
+export declare const PhoneInputOtpScreen: React.ForwardRefExoticComponent<PhoneInputOtpScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default PhoneInputOtpScreen;

package/dist/PhoneInputOtpScreen.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaOtp } from '@incodetech/prizma-core-web/otp';
+import { PrizmaFormScreen } from './FormScreen';
+import './ScreenLayout.css';
+import './PhoneInputLayout.css';
+/**
+ * Phone Input — the one-time-code screen, built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for all four purple `phoneNumber.OTP.*` sections
+ * (`typing` / `filled` / `processing` / `error`) — identical layout, differing
+ * only in the state of the code field and the CTA.
+ *
+ * `processing` deliberately does NOT use Core's `PrizmaOtp.loading`. That prop
+ * centres the spinner INSIDE the code field (owner definition 2026-07-12), but
+ * the purple `OTP.processing` section draws the field simply DISABLED with the
+ * code still legible and puts the spinner in the CTA — the same treatment as
+ * `verify.loading`, which is what makes the module read consistently. Figma
+ * wins; `PrizmaOtp.loading` stays correct for hosts that want the in-field
+ * spinner. DEVIATIONS #PI-5.
+ */
+export const PhoneInputOtpScreen = forwardRef(({ strings, state = 'typing', value, length = 6, screenId = `phone-input-otp-${state}`, overrides, onAction, ...shell }, ref) => (_jsx(PrizmaFormScreen, { ref: ref, title: strings.otp.title, subtitle: strings.otp.subtitle, ctaLabel: strings.otp.ctaLabel, 
+    /* Figma greys the CTA until the code is complete. */
+    ctaDisabled: state === 'typing', 
+    /* The spinner rides the CTA, not the field (see the note above). */
+    ctaLoading: state === 'processing', ctaLoadingLabel: strings.otp.ctaLoadingLabel, 
+    /* "Didn't receive the code? Resend code or Change phone number" — drawn
+       under the CTA on every OTP section. ONE sentence, TWO independently
+       actionable links, so it uses the archetype's composed-line slot rather
+       than `linkLabel` (a full-width 56px button cannot sit inside a line of
+       body text, and one button could not tell the two actions apart —
+       DEVIATIONS #PI-10). */
+    linkContent: strings.otp.resendPrompt ? (_jsxs("p", { className: "prizma-screen-layout__inline-prompt", children: [strings.otp.resendPrompt, ' ', strings.otp.resendLabel ? (_jsx("button", { type: "button", className: "prizma-screen-layout__inline-link", onClick: () => onAction?.({ type: 'secondary', screenId }), children: strings.otp.resendLabel })) : null, strings.otp.changeNumberLabel ? (_jsxs(_Fragment, { children: [' ', strings.otp.resendSeparator, ' ', _jsx("button", { type: "button", className: "prizma-screen-layout__inline-link", onClick: () => onAction?.({ type: 'tertiary', screenId }), children: strings.otp.changeNumberLabel })] })) : null] })) : undefined, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell, children: _jsx(PrizmaOtp, { length: length, 
+        /* Uncontrolled, for the same reason as the phone field: `readOnly`
+           would paint Core's DISABLED surface on the resting states, which is
+           grey Figma does not draw there (DEVIATIONS #PI-6). */
+        defaultValue: value ?? '', 
+        /* `processing` is the one section Figma greys — the code stays legible
+           while the check runs. */
+        disabled: state === 'processing', error: state === 'error', errorText: state === 'error' ? strings.otp.errorText : undefined }) })));
+PhoneInputOtpScreen.displayName = 'PhoneInputOtpScreen';
+export default PhoneInputOtpScreen;

package/dist/PhoneInputSnaLoadingScreen.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { type PrizmaProcessingScreenProps } from './ProcessingScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { PhoneInputStrings } from './PhoneInputStrings';
+import './ScreenLayout.css';
+export interface PhoneInputSnaLoadingScreenProps extends Omit<PrizmaProcessingScreenProps, 'status' | 'title' | 'subtitle' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `sna` slice. */
+    strings: PhoneInputStrings;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Phone Input — Silent Network Auth in flight, built on the Processing
+ * archetype (GUIDELINES.md §6-C, `PrizmaProcessingScreen`).
+ *
+ * Figma: the purple `phoneNumber.loading` section (`phoneNumber.SNA.loading`).
+ * A pure spinner + H2 screen with no button, which is exactly the case §6-F
+ * reserves for C rather than the Result archetype — nothing here needs a CTA
+ * band, so the centred column stays.
+ */
+export declare const PhoneInputSnaLoadingScreen: React.ForwardRefExoticComponent<PhoneInputSnaLoadingScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default PhoneInputSnaLoadingScreen;

package/dist/PhoneInputSnaLoadingScreen.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaProcessingScreen, } from './ProcessingScreen';
+import './ScreenLayout.css';
+/**
+ * Phone Input — Silent Network Auth in flight, built on the Processing
+ * archetype (GUIDELINES.md §6-C, `PrizmaProcessingScreen`).
+ *
+ * Figma: the purple `phoneNumber.loading` section (`phoneNumber.SNA.loading`).
+ * A pure spinner + H2 screen with no button, which is exactly the case §6-F
+ * reserves for C rather than the Result archetype — nothing here needs a CTA
+ * band, so the centred column stays.
+ */
+export const PhoneInputSnaLoadingScreen = forwardRef(({ strings, screenId = 'phone-input-sna-loading', overrides, onAction, ...shell }, ref) => (_jsx(PrizmaProcessingScreen, { ref: ref, status: "loading", title: strings.sna.title, subtitle: strings.sna.subtitle, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell })));
+PhoneInputSnaLoadingScreen.displayName = 'PhoneInputSnaLoadingScreen';
+export default PhoneInputSnaLoadingScreen;

package/dist/PhoneInputStrings.d.ts

@@ -0,0 +1,121 @@
+/**
+ * The `phoneNumber.verify.*` sections. All five draw the SAME layout — the
+ * country dropdown + phone field pair — and differ only in field content and
+ * CTA state, so they are states of one screen rather than five screens:
+ * - `default`     — placeholder phone, CTA enabled (Figma draws it enabled)
+ * - `countryCode` — the country dropdown open over the form
+ * - `typing`      — partial value, focused field
+ * - `filled`      — complete value
+ * - `loading`     — CTA in its loading treatment while the code is requested
+ */
+export type PhoneInputVerifyState = 'default' | 'countryCode' | 'typing' | 'filled' | 'loading';
+/**
+ * The `phoneNumber.OTP.*` sections — same layout, different field state:
+ * - `typing`     — partial code
+ * - `filled`     — complete code
+ * - `processing` — code submitted, `PrizmaOtp` in its loading treatment
+ * - `error`      — wrong code, negative field + error row
+ */
+export type PhoneInputOtpState = 'typing' | 'filled' | 'processing' | 'error';
+/**
+ * The `phoneNumber.error.*` sections. `tryAgain` and `unknown` keep the module
+ * chrome; `noNetwork` is the connectivity family every module carries — no nav,
+ * no tag, a Wi-Fi glyph above the title (DEVIATIONS #9, #10).
+ */
+export type PhoneInputErrorVariant = 'tryAgain' | 'unknown' | 'noNetwork';
+/** One selectable country in the dial-code dropdown. Runtime data, not copy —
+ *  the host supplies its own list; `flag` is the emoji Figma draws (Core has no
+ *  country-flag primitive — DEVIATIONS #PI-3). */
+export interface PhoneInputCountry {
+    /** Stable value, e.g. an ISO 3166-1 alpha-2 code. */
+    value: string;
+    /** Dial code as drawn, e.g. `+381`. */
+    dialCode: string;
+    /** Country name for the open menu row. */
+    label: string;
+    /** Emoji flag, e.g. `🇷🇸`. */
+    flag?: string;
+}
+export interface PhoneInputStrings {
+    /** "verified by" attribution in the footer tag. */
+    verifiedLabel: string;
+    /** Accessible name for the logo nav row. */
+    navLabel?: string;
+    /** phoneNumber.verify.* */
+    verify: {
+        /** H2 ("Verify your phone number"). */
+        title: string;
+        /** H5 ("We'll send you a code to ensure it's yours"). */
+        subtitle: string;
+        /** Phone field placeholder ("(123) 123-45-67"). */
+        placeholder: string;
+        /** Accessible label for the phone field. */
+        fieldLabel?: string;
+        /** Accessible label for the country dial-code dropdown. */
+        countryLabel?: string;
+        /** Search placeholder inside the open country menu. */
+        countrySearchPlaceholder?: string;
+        /** Primary CTA ("Continue"). */
+        ctaLabel: string;
+        /** Accessible busy label while the code is requested (`loading`). */
+        ctaLoadingLabel?: string;
+    };
+    /** phoneNumber.OTP.* */
+    otp: {
+        /** H2 ("Enter the code we've sent via SMS"). */
+        title: string;
+        /** H5 — carries the masked destination number, when the section shows one. */
+        subtitle?: string;
+        /** Error row on the `error` state ("Incorrect code, try again"). */
+        errorText: string;
+        /**
+         * The line under the CTA is ONE sentence carrying TWO separate links:
+         * "Didn't receive the code? [Resend code] or [Change phone number]".
+         * It is split into four strings because the links are independently
+         * actionable — the host must be able to tell a re-send from a return to
+         * phone entry — and because a locale needs to order the fragments itself.
+         * Omit `resendPrompt` to render no line at all.
+         */
+        resendPrompt?: string;
+        /** First link — re-sends the code. Emits `secondary`. */
+        resendLabel?: string;
+        /** The conjunction between the two links ("or"). */
+        resendSeparator?: string;
+        /** Second link — returns to phone entry. Emits `tertiary`. */
+        changeNumberLabel?: string;
+        /** Primary CTA. */
+        ctaLabel: string;
+        /** Accessible / visible busy copy while the code is checked (`processing`). */
+        ctaLoadingLabel?: string;
+    };
+    /** phoneNumber.loading — Silent Network Auth, a pure processing screen. */
+    sna: {
+        /** H2 shown under the spinner. */
+        title: string;
+        subtitle?: string;
+    };
+    /** phoneNumber.success */
+    success: {
+        title: string;
+        subtitle?: string;
+        ctaLabel?: string;
+    };
+    /** phoneNumber.error.* — one slice per variant. */
+    error: {
+        tryAgain: {
+            title: string;
+            subtitle?: string;
+            ctaLabel: string;
+        };
+        unknown: {
+            title: string;
+            subtitle?: string;
+            ctaLabel: string;
+        };
+        noConnection: {
+            title: string;
+            subtitle?: string;
+            ctaLabel: string;
+        };
+    };
+}

package/dist/PhoneInputStrings.js

@@ -0,0 +1,13 @@
+// Phone Input — copy contract.
+//
+// Figma: `📞 Phone - Screens specs + Localization` (nIj8kklozEOMs2e5sLzGFi,
+// page 5:13191). Five purple parent sections:
+//   phoneNumber.verify   — default / countryCode / phonetyping / phoneFilled / loading
+//   phoneNumber.OTP      — typing / filled / processing / error
+//   phoneNumber.loading  — SNA.loading (Silent Network Auth)
+//   phoneNumber.success  — success
+//   phoneNumber.error    — tryAgain / unknown / noNetwork
+//
+// No hardcoded English anywhere in a screen: every visible string arrives here,
+// so the host's locale pack drives the module (the file ships ES + PT columns).
+export {};

package/dist/PhoneInputSuccessScreen.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { PhoneInputStrings } from './PhoneInputStrings';
+import './ScreenLayout.css';
+export interface PhoneInputSuccessScreenProps extends Omit<PrizmaResultScreenProps, 'status' | 'title' | 'subtitle' | 'ctaLabel' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `success` slice. */
+    strings: PhoneInputStrings;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Phone Input — the verified verdict, built on the Result archetype
+ * (GUIDELINES.md §6-F, `PrizmaResultScreen`).
+ *
+ * Figma: the purple `phoneNumber.success` section. Centred status mark + title
+ * over the CTA band. The mark is Core's outline status icon via
+ * `PrizmaTitle`'s icon slot — the module Figma still draws the two-tone filled
+ * disc, one icon sweep behind (DEVIATIONS #15, unchanged here).
+ */
+export declare const PhoneInputSuccessScreen: React.ForwardRefExoticComponent<PhoneInputSuccessScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default PhoneInputSuccessScreen;

package/dist/PhoneInputSuccessScreen.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaResultScreen } from './ResultScreen';
+import './ScreenLayout.css';
+/**
+ * Phone Input — the verified verdict, built on the Result archetype
+ * (GUIDELINES.md §6-F, `PrizmaResultScreen`).
+ *
+ * Figma: the purple `phoneNumber.success` section. Centred status mark + title
+ * over the CTA band. The mark is Core's outline status icon via
+ * `PrizmaTitle`'s icon slot — the module Figma still draws the two-tone filled
+ * disc, one icon sweep behind (DEVIATIONS #15, unchanged here).
+ */
+export const PhoneInputSuccessScreen = forwardRef(({ strings, screenId = 'phone-input-success', overrides, onAction, ...shell }, ref) => (_jsx(PrizmaResultScreen, { ref: ref, status: "success", title: strings.success.title, subtitle: strings.success.subtitle, ctaLabel: strings.success.ctaLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell })));
+PhoneInputSuccessScreen.displayName = 'PhoneInputSuccessScreen';
+export default PhoneInputSuccessScreen;