@incodetech/prizma-core-screens 0.1.0

package/dist/ElectronicSignatureErrorScreen.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { ElectronicSignatureStrings } from './ElectronicSignatureStrings';
+import './ScreenLayout.css';
+export interface ElectronicSignatureErrorScreenProps extends Omit<PrizmaResultScreenProps, 'status' | 'title' | 'subtitle' | 'ctaLabel' | 'secondaryCtaLabel' | 'verifiedLabel' | 'navLabel' | 'children'> {
+    /** Module copy — this screen reads the `error` slice. */
+    strings: ElectronicSignatureStrings;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Electronic Signature — the failure verdict (`eSign.error`, 6291:67151), built
+ * on the Result archetype (GUIDELINES.md §6-F, `PrizmaResultScreen`).
+ *
+ * Archetype F, not C: the section centres the status block AND draws a primary
+ * "Try again" under it, which is the line §6-F draws between the two.
+ *
+ * The mark is the WARNING status, not the negative one: the section draws the
+ * amber `!` disc, and the copy ("we couldn't process it — try again") reports a
+ * recoverable failure rather than a rejection. Core renders it as the outline
+ * `IconStatusWarning` (DEVIATIONS #15).
+ *
+ * The module has ONE error section and no `noConnection` family, so this screen
+ * ships no `variant` axis and no Wi-Fi glyph — the asymmetry with Phone Input's
+ * three-way error is real, not an omission (the #EI-5 precedent). Logo header
+ * and tag both stay, as they do on every non-capture screen (#PI-8 / #F-30).
+ */
+export declare const ElectronicSignatureErrorScreen: React.ForwardRefExoticComponent<ElectronicSignatureErrorScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default ElectronicSignatureErrorScreen;

package/dist/ElectronicSignatureErrorScreen.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaResultScreen } from './ResultScreen';
+import './ScreenLayout.css';
+/**
+ * Electronic Signature — the failure verdict (`eSign.error`, 6291:67151), built
+ * on the Result archetype (GUIDELINES.md §6-F, `PrizmaResultScreen`).
+ *
+ * Archetype F, not C: the section centres the status block AND draws a primary
+ * "Try again" under it, which is the line §6-F draws between the two.
+ *
+ * The mark is the WARNING status, not the negative one: the section draws the
+ * amber `!` disc, and the copy ("we couldn't process it — try again") reports a
+ * recoverable failure rather than a rejection. Core renders it as the outline
+ * `IconStatusWarning` (DEVIATIONS #15).
+ *
+ * The module has ONE error section and no `noConnection` family, so this screen
+ * ships no `variant` axis and no Wi-Fi glyph — the asymmetry with Phone Input's
+ * three-way error is real, not an omission (the #EI-5 precedent). Logo header
+ * and tag both stay, as they do on every non-capture screen (#PI-8 / #F-30).
+ */
+export const ElectronicSignatureErrorScreen = forwardRef(({ strings, screenId = 'electronic-signature-error', overrides, onAction, ...shell }, ref) => (_jsx(PrizmaResultScreen, { ref: ref, status: "warning", title: strings.error.title, subtitle: strings.error.subtitle, ctaLabel: strings.error.ctaLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell })));
+ElectronicSignatureErrorScreen.displayName = 'ElectronicSignatureErrorScreen';
+export default ElectronicSignatureErrorScreen;

package/dist/ElectronicSignatureLayout.css

@@ -0,0 +1,80 @@
+/* Electronic Signature — module layout additions.
+ *
+ * TWO blocks, and neither declares an archetype value. The content column, the
+ * 24px gutters, the title → middle Spacing/24, the middle → CTA band, the
+ * CTA column and the anchored footer all stay the foundation's
+ * (`ScreenLayout.css`). Everything below shapes CONTENT the design system does
+ * not own — the same class of exception as Document Capture's uploaded-file
+ * card and standalone encrypted notice (DEVIATIONS #DC-26 / #DC-27), and built
+ * the same way: from Core's own tokens, with no primitive re-implemented and no
+ * `!important`.
+ */
+
+/* ── The agreement frame (`eSign.default`) ───────────────────────────────────
+ * The purple section draws the document as a rendered page inside a 342-wide
+ * box: `Border/Neutral/100` hairline, `Border/Radius/small`, clipped, with a
+ * 4px scroll indicator riding its right edge. Core ships no document viewer and
+ * no scrollbar primitive — `PrizmaCardDocumentContainer` is a filename + action
+ * ROW, not a page frame (DEVIATIONS #DC-27 settled the same point for the
+ * uploaded-file card) — so the frame is composed here from the identical Card
+ * tokens and the page itself arrives through the screen's `document` slot, the
+ * same host-supplied-content contract the capture screens use for `camera`
+ * (DEVIATIONS #FM-22).
+ *
+ * Figma's page is an artboard image that bleeds to the frame edge; a TEXT
+ * agreement needs a gutter, so the frame carries Spacing/16 and the paragraph
+ * rhythm below it — content padding, never screen spacing.
+ *
+ * The scroll is the browser's own: the designed 4px track + thumb would be an
+ * invented primitive, and releasing overflow is the same idiom CURP used to fit
+ * a taller-than-844 Figma page into the 390×844 reference (DEVIATIONS #CURP-1).
+ * CORE REQUEST: a `PrizmaDocumentViewer` / page-frame primitive — Electronic
+ * Signature is the first module to need one and consent flows will need it next.
+ *
+ * The screen itself is archetype G (`PrizmaListScreen`), whose `__list` middle
+ * already fills the space between the title block and the CTA band — so there is
+ * no centring to cancel and no stage rule here. The single LAYOUT line below is
+ * the overflow release, identical to `.qualified-signature-document`; everything
+ * else on this class shapes CONTENT the design system does not own.
+ */
+.electronic-signature-document {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  box-sizing: border-box;
+  padding: var(--prizma-spacing-16);
+  background-color: var(--prizma-surface-neutral-0);
+  border: var(--prizma-border-width-regular) solid var(--prizma-border-neutral-100);
+  border-radius: var(--prizma-border-radius-small);
+  text-align: start;
+}
+
+/* The agreement's own typography — Body/M Regular on Text/Body/500, the pair
+   Core uses for every secondary block of prose (`CardList.css`, `Card.css`).
+   Applied to the host's markup by descendant selector so the document slot
+   takes plain `<h4>` / `<p>` and needs no inline styles. */
+.electronic-signature-document > * {
+  margin: 0;
+}
+
+.electronic-signature-document > * + * {
+  margin-top: var(--prizma-spacing-12);
+}
+
+.electronic-signature-document p {
+  font-family: var(--prizma-body-family);
+  font-weight: var(--prizma-body-m-regular-font-weight);
+  font-size: var(--prizma-body-m-regular-font-size);
+  line-height: var(--prizma-body-m-regular-line-height);
+  letter-spacing: var(--prizma-body-m-regular-letter-spacing);
+  color: var(--prizma-text-body-500-secondary);
+}
+
+.electronic-signature-document h4 {
+  font-family: var(--prizma-headline-family);
+  font-weight: var(--prizma-headline-h5-font-weight);
+  font-size: var(--prizma-headline-h5-font-size);
+  line-height: var(--prizma-headline-h5-line-height);
+  letter-spacing: var(--prizma-headline-h5-letter-spacing);
+  color: var(--prizma-text-body-800-primary);
+}

package/dist/ElectronicSignatureReviewScreen.d.ts

@@ -0,0 +1,51 @@
+import React, { type ReactNode } from 'react';
+import { type PrizmaListScreenProps } from './ListScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { ElectronicSignatureStrings } from './ElectronicSignatureStrings';
+import './ScreenLayout.css';
+import './ElectronicSignatureLayout.css';
+export interface ElectronicSignatureReviewScreenProps extends Omit<PrizmaListScreenProps, 'status' | 'title' | 'subtitle' | 'glyph' | 'children' | 'listAlign' | 'disclaimer' | 'ctaLabel' | 'secondaryCtaLabel' | 'linkLabel' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `review` slice. */
+    strings: ElectronicSignatureStrings;
+    /**
+     * The agreement itself: a rendered page (`<img>` of the PDF, host markup,
+     * plain `<h4>` / `<p>` prose). Runtime DATA supplied by the host, never copy
+     * the design system owns — the same slot contract the capture screens use for
+     * `camera` (GUIDELINES §10) and Qualified Signature uses for its contract page.
+     * Core ships no document viewer; the frame around this node is the module's,
+     * built from Core's Card tokens (see `ElectronicSignatureLayout.css`).
+     */
+    document: ReactNode;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Electronic Signature — the document-review screen (`eSign.default`,
+ * 6291:27012), built on the List archetype (GUIDELINES.md §6-G,
+ * `PrizmaListScreen`).
+ *
+ * Archetype G, not H: the frame draws the logo header, a centred H2, a
+ * host-supplied agreement page filling the whole middle, one primary CTA and
+ * the verified tag — which is G's definition line for line ("content filling
+ * the space between the title block and the CTA band"). It is also the shape
+ * the sibling `QualifiedSignatureDocumentScreen` already uses for exactly this
+ * content, a scrolling contract page.
+ *
+ * H was the earlier reading and was wrong: H is captured-MEDIA confirmation, it
+ * carries no logo by default and it centres its stage, so the module had to
+ * override the archetype twice (a `showHeader` opt-in and a local
+ * `align-items: stretch` rule) just to hold a document. G needs neither —
+ * `showHeader` already defaults to true and `__list` already fills the middle —
+ * so the screen now renders ONE archetype call and declares no layout of its
+ * own. The only module CSS left is the overflow release on the document frame,
+ * the same single-constraint release Qualified Signature and CURP use
+ * (DEVIATIONS #CURP-1).
+ *
+ * One owner rule still overrides the purple section:
+ * **No close ✕.** The sibling `eSign.signed` / `eSign.success` sections draw one
+ * at the nav's right; GUIDELINES §3 stands and there is no slot for it
+ * (DEVIATIONS #PI-9).
+ */
+export declare const ElectronicSignatureReviewScreen: React.ForwardRefExoticComponent<ElectronicSignatureReviewScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default ElectronicSignatureReviewScreen;

package/dist/ElectronicSignatureReviewScreen.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaListScreen } from './ListScreen';
+import './ScreenLayout.css';
+import './ElectronicSignatureLayout.css';
+/**
+ * Electronic Signature — the document-review screen (`eSign.default`,
+ * 6291:27012), built on the List archetype (GUIDELINES.md §6-G,
+ * `PrizmaListScreen`).
+ *
+ * Archetype G, not H: the frame draws the logo header, a centred H2, a
+ * host-supplied agreement page filling the whole middle, one primary CTA and
+ * the verified tag — which is G's definition line for line ("content filling
+ * the space between the title block and the CTA band"). It is also the shape
+ * the sibling `QualifiedSignatureDocumentScreen` already uses for exactly this
+ * content, a scrolling contract page.
+ *
+ * H was the earlier reading and was wrong: H is captured-MEDIA confirmation, it
+ * carries no logo by default and it centres its stage, so the module had to
+ * override the archetype twice (a `showHeader` opt-in and a local
+ * `align-items: stretch` rule) just to hold a document. G needs neither —
+ * `showHeader` already defaults to true and `__list` already fills the middle —
+ * so the screen now renders ONE archetype call and declares no layout of its
+ * own. The only module CSS left is the overflow release on the document frame,
+ * the same single-constraint release Qualified Signature and CURP use
+ * (DEVIATIONS #CURP-1).
+ *
+ * One owner rule still overrides the purple section:
+ * **No close ✕.** The sibling `eSign.signed` / `eSign.success` sections draw one
+ * at the nav's right; GUIDELINES §3 stands and there is no slot for it
+ * (DEVIATIONS #PI-9).
+ */
+export const ElectronicSignatureReviewScreen = forwardRef(({ strings, document, screenId = 'electronic-signature-review', overrides, onAction, ...shell }, ref) => (_jsx(PrizmaListScreen, { ref: ref, title: strings.review.title, ctaLabel: strings.review.ctaLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell, children: _jsx("div", { className: "electronic-signature-document", role: "region", "aria-label": strings.review.documentLabel, tabIndex: 0, children: document }) })));
+ElectronicSignatureReviewScreen.displayName = 'ElectronicSignatureReviewScreen';
+export default ElectronicSignatureReviewScreen;

package/dist/ElectronicSignatureStrings.d.ts

@@ -0,0 +1,50 @@
+/**
+ * The two states the signature-pad screen draws — `eSign.draw` (empty canvas,
+ * placeholder visible, both actions inert) and `eSign.signed` (ink on the
+ * canvas, Clear live, Done live). One screen, one Figma-drawn axis.
+ */
+export type ElectronicSignatureDrawState = 'draw' | 'signed';
+export interface ElectronicSignatureStrings {
+    /** "verified by" attribution copy for the footer tag. */
+    verifiedLabel: string;
+    /** Accessible name for the logo row. */
+    navLabel: string;
+    /** `eSign.default` — read the agreement before signing it. */
+    review: {
+        /** H2 — "Review your document". */
+        title: string;
+        /** Accessible name for the scrolling document frame. */
+        documentLabel: string;
+        /** Primary CTA — "Continue". */
+        ctaLabel: string;
+    };
+    /** `eSign.draw` + `eSign.signed` — the signature pad. */
+    draw: {
+        /** H2 — "Draw your signature". */
+        title: string;
+        /** H5 — "Use your finger or mouse". */
+        subtitle: string;
+        /** Canvas placeholder, shown while the pad is empty — "Sign here". */
+        placeholder: string;
+        /** Accessible name for the drawing canvas (Core has no default). */
+        canvasLabel: string;
+        /** Core's Clear-canvas tertiary link — "Clear canvas". */
+        clearLabel: string;
+        /** Primary CTA — "Done". */
+        ctaLabel: string;
+    };
+    /** `eSign.success` — the verdict, reported with no action. */
+    success: {
+        /** H2 — "Signed successfully!". */
+        title: string;
+    };
+    /** `eSign.error` — the single failure verdict the module draws. */
+    error: {
+        /** H2 — "We couldn't process your signature". */
+        title: string;
+        /** H5 — "Please try again.". */
+        subtitle: string;
+        /** Primary CTA — "Try again". */
+        ctaLabel: string;
+    };
+}

package/dist/ElectronicSignatureStrings.js

@@ -0,0 +1,12 @@
+// Electronic Signature — the module's whole copy surface.
+//
+// Every string the four screen families render lives here, so a screen carries
+// no hardcoded English and a host can translate the module by supplying one
+// object (README rule 3, the same contract as `PhoneInputStrings` /
+// `CurpStrings`).
+//
+// Figma: `✍️ Signature (Electronic) - Screens specs + Localization`
+// (`kUsDigsC8Mq1WobTewF0R6`, page `5:13191`, section `4116:10249`). Five purple
+// parent sections — `eSign.default` · `eSign.draw` · `eSign.signed` ·
+// `eSign.success` · `eSign.error` — with ES / PT columns beside the EN one.
+export {};

package/dist/ElectronicSignatureSuccessScreen.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { type PrizmaProcessingScreenProps } from './ProcessingScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { ElectronicSignatureStrings } from './ElectronicSignatureStrings';
+import './ScreenLayout.css';
+export interface ElectronicSignatureSuccessScreenProps extends Omit<PrizmaProcessingScreenProps, 'status' | 'title' | 'subtitle' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `success` slice. */
+    strings: ElectronicSignatureStrings;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Electronic Signature — the signed verdict (`eSign.success`, 4116:10347),
+ * built on the Processing archetype (GUIDELINES.md §6-C,
+ * `PrizmaProcessingScreen`).
+ *
+ * Archetype C, not F: the section draws a centred status mark and one line and
+ * offers **no button at all** — §6-F reserves C for exactly that pure case, and
+ * the same split was already ruled on between two sibling modules (Email
+ * Input's success is C, Phone Input's is F — DEVIATIONS #EI-4). Reaching for F
+ * here would render an empty CTA band.
+ *
+ * The mark is Core's outline `IconStatusPositive` at Title/Icon/Size 40, where
+ * the section draws a filled green disc at a smaller size — the icon-outline
+ * sweep settled that for every module (DEVIATIONS #15). The section's close ✕
+ * is not composed (DEVIATIONS #PI-9).
+ */
+export declare const ElectronicSignatureSuccessScreen: React.ForwardRefExoticComponent<ElectronicSignatureSuccessScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default ElectronicSignatureSuccessScreen;

package/dist/ElectronicSignatureSuccessScreen.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaProcessingScreen, } from './ProcessingScreen';
+import './ScreenLayout.css';
+/**
+ * Electronic Signature — the signed verdict (`eSign.success`, 4116:10347),
+ * built on the Processing archetype (GUIDELINES.md §6-C,
+ * `PrizmaProcessingScreen`).
+ *
+ * Archetype C, not F: the section draws a centred status mark and one line and
+ * offers **no button at all** — §6-F reserves C for exactly that pure case, and
+ * the same split was already ruled on between two sibling modules (Email
+ * Input's success is C, Phone Input's is F — DEVIATIONS #EI-4). Reaching for F
+ * here would render an empty CTA band.
+ *
+ * The mark is Core's outline `IconStatusPositive` at Title/Icon/Size 40, where
+ * the section draws a filled green disc at a smaller size — the icon-outline
+ * sweep settled that for every module (DEVIATIONS #15). The section's close ✕
+ * is not composed (DEVIATIONS #PI-9).
+ */
+export const ElectronicSignatureSuccessScreen = forwardRef(({ strings, screenId = 'electronic-signature-success', overrides, onAction, ...shell }, ref) => (_jsx(PrizmaProcessingScreen, { ref: ref, status: "success", title: strings.success.title, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell })));
+ElectronicSignatureSuccessScreen.displayName = 'ElectronicSignatureSuccessScreen';
+export default ElectronicSignatureSuccessScreen;

package/dist/EmailInputErrorScreen.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { EmailInputStrings } from './EmailInputStrings';
+import './ScreenLayout.css';
+export interface EmailInputErrorScreenProps extends Omit<PrizmaResultScreenProps, 'status' | 'title' | 'subtitle' | 'ctaLabel' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `error` slice. */
+    strings: EmailInputStrings;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Email Input — the failure verdict, built on the Result archetype
+ * (GUIDELINES.md §6-F, `PrizmaResultScreen`).
+ *
+ * Figma: the purple `email.error` section, which holds exactly ONE screen —
+ * `email.error.somethingWentWrong`. A centred status mark + H2 over the
+ * "Try again" CTA band (40:33375).
+ *
+ * DEVIATIONS #EI-5 — unlike its Phone Input sibling this module draws no
+ * `tryAgain` split and, notably, **no connectivity section anywhere in the
+ * file**: `email.error` (3058:103116) has a single child section, and the four
+ * purple parents are verifyEmail / OTP / error / success with no no-connection
+ * screen among them. So this screen ships NO `variant` prop and no Wi-Fi
+ * glyph — there is nothing to switch between, and adding the axis would be
+ * inventing a state the spec does not have. The #PI-8 ruling still applies to
+ * the one screen that exists: the header and the verified tag stay.
+ *
+ * The mark is Core's outline status icon; the module Figma still draws the
+ * two-tone filled disc, one icon sweep behind (DEVIATIONS #15).
+ */
+export declare const EmailInputErrorScreen: React.ForwardRefExoticComponent<EmailInputErrorScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default EmailInputErrorScreen;

package/dist/EmailInputErrorScreen.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaResultScreen } from './ResultScreen';
+import './ScreenLayout.css';
+/**
+ * Email Input — the failure verdict, built on the Result archetype
+ * (GUIDELINES.md §6-F, `PrizmaResultScreen`).
+ *
+ * Figma: the purple `email.error` section, which holds exactly ONE screen —
+ * `email.error.somethingWentWrong`. A centred status mark + H2 over the
+ * "Try again" CTA band (40:33375).
+ *
+ * DEVIATIONS #EI-5 — unlike its Phone Input sibling this module draws no
+ * `tryAgain` split and, notably, **no connectivity section anywhere in the
+ * file**: `email.error` (3058:103116) has a single child section, and the four
+ * purple parents are verifyEmail / OTP / error / success with no no-connection
+ * screen among them. So this screen ships NO `variant` prop and no Wi-Fi
+ * glyph — there is nothing to switch between, and adding the axis would be
+ * inventing a state the spec does not have. The #PI-8 ruling still applies to
+ * the one screen that exists: the header and the verified tag stay.
+ *
+ * The mark is Core's outline status icon; the module Figma still draws the
+ * two-tone filled disc, one icon sweep behind (DEVIATIONS #15).
+ */
+export const EmailInputErrorScreen = forwardRef(({ strings, screenId = 'email-input-error', overrides, onAction, ...shell }, ref) => (_jsx(PrizmaResultScreen, { ref: ref, status: "error", title: strings.error.title, subtitle: strings.error.subtitle, ctaLabel: strings.error.ctaLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell })));
+EmailInputErrorScreen.displayName = 'EmailInputErrorScreen';
+export default EmailInputErrorScreen;

package/dist/EmailInputOtpScreen.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+import { type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { EmailInputOtpState, EmailInputStrings } from './EmailInputStrings';
+import './ScreenLayout.css';
+export interface EmailInputOtpScreenProps extends Omit<PrizmaFormScreenProps, 'title' | 'subtitle' | 'ctaLabel' | 'verifiedLabel' | 'children' | 'navLabel'> {
+    /** Module copy — this screen reads the `otp` slice. */
+    strings: EmailInputStrings;
+    /** Which purple `email.OTP.*` section to render. Default `typing`. */
+    state?: EmailInputOtpState;
+    /** The code as typed. Figma's sample is the alphanumeric `A1B2C3`. */
+    value?: string;
+    /** How many characters the code carries. Default 6. */
+    length?: number;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Email Input — the one-time-code screen, built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for all five purple `email.OTP.*` sections (`typing` / `filled` /
+ * `processing` and the module's TWO error sections) — identical layout,
+ * differing in the state of the code field, the CTA, and the line under it.
+ *
+ * The code field is Core's `PrizmaOtp`, which is a single centred, letter-spaced
+ * field rather than a segmented box row — exactly what the Figma sections draw
+ * ("A1B2C3" as one line of type inside one 56px field).
+ *
+ * `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 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.
+ * DEVIATIONS #PI-5.
+ *
+ * DEVIATIONS #EI-3 — the band under the CTA is NOT one treatment for all five
+ * sections, which is this module's own finding rather than anything inherited
+ * from Phone Input. Measured on the 390 frames, three different treatments:
+ * - `typing` (146:37111) draws a re-send COUNTDOWN ("Resend code in 30s") —
+ *   plain secondary copy, NO links, because the code has only just been sent
+ *   and re-sending it immediately is meaningless
+ * - `filled` (150:38395) and both error sections (150:63411 generic,
+ *   150:70717 invalid-code) draw the two-link sentence
+ * - `processing` (150:63409) draws that same sentence INERT — every word in
+ *   the secondary ink, no underline, nothing clickable, because the request is
+ *   in flight. Rendering the labels as plain text is what produces that, so
+ *   `processing` reads differently from `filled` in the band as well as in the
+ *   field.
+ * The consequence for a host: `resendCountdown` and `resendPrompt` are not
+ * alternatives it may choose between — which one is drawn is decided by
+ * `state`, so both must be supplied for the five sections to render as drawn.
+ */
+export declare const EmailInputOtpScreen: React.ForwardRefExoticComponent<EmailInputOtpScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default EmailInputOtpScreen;

package/dist/EmailInputOtpScreen.js

@@ -0,0 +1,82 @@
+'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';
+/**
+ * Email Input — the one-time-code screen, built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for all five purple `email.OTP.*` sections (`typing` / `filled` /
+ * `processing` and the module's TWO error sections) — identical layout,
+ * differing in the state of the code field, the CTA, and the line under it.
+ *
+ * The code field is Core's `PrizmaOtp`, which is a single centred, letter-spaced
+ * field rather than a segmented box row — exactly what the Figma sections draw
+ * ("A1B2C3" as one line of type inside one 56px field).
+ *
+ * `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 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.
+ * DEVIATIONS #PI-5.
+ *
+ * DEVIATIONS #EI-3 — the band under the CTA is NOT one treatment for all five
+ * sections, which is this module's own finding rather than anything inherited
+ * from Phone Input. Measured on the 390 frames, three different treatments:
+ * - `typing` (146:37111) draws a re-send COUNTDOWN ("Resend code in 30s") —
+ *   plain secondary copy, NO links, because the code has only just been sent
+ *   and re-sending it immediately is meaningless
+ * - `filled` (150:38395) and both error sections (150:63411 generic,
+ *   150:70717 invalid-code) draw the two-link sentence
+ * - `processing` (150:63409) draws that same sentence INERT — every word in
+ *   the secondary ink, no underline, nothing clickable, because the request is
+ *   in flight. Rendering the labels as plain text is what produces that, so
+ *   `processing` reads differently from `filled` in the band as well as in the
+ *   field.
+ * The consequence for a host: `resendCountdown` and `resendPrompt` are not
+ * alternatives it may choose between — which one is drawn is decided by
+ * `state`, so both must be supplied for the five sections to render as drawn.
+ */
+export const EmailInputOtpScreen = forwardRef(({ strings, state = 'typing', value, length = 6, screenId = `email-input-otp-${state}`, overrides, onAction, ...shell }, ref) => {
+    const busy = state === 'processing';
+    const invalid = state === 'error' || state === 'errorGeneric';
+    const focused = state === 'typing';
+    const errorText = state === 'error'
+        ? strings.otp.errorText
+        : state === 'errorGeneric'
+            ? strings.otp.genericErrorText
+            : undefined;
+    /* `typing` shows the countdown; every other section shows the sentence. */
+    const countdown = focused ? strings.otp.resendCountdown : undefined;
+    /* Both links are wrapped by the same helper so the inert (`processing`)
+       rendering cannot drift from the actionable one — only the element type
+       changes. Each link emits a DISTINCT action: re-sending the code and
+       returning to email entry are different flows a host must tell apart
+       (DEVIATIONS #PI-10). */
+    const link = (label, type) => busy ? (label) : (_jsx("button", { type: "button", className: "prizma-screen-layout__inline-link", onClick: () => onAction?.({ type, screenId }), children: label }));
+    const resendLine = countdown ? (_jsx("p", { className: "prizma-screen-layout__inline-prompt", children: countdown })) : strings.otp.resendPrompt ? (_jsxs("p", { className: "prizma-screen-layout__inline-prompt", children: [strings.otp.resendPrompt, ' ', strings.otp.resendLabel ? link(strings.otp.resendLabel, 'secondary') : null, strings.otp.changeEmailLabel ? (_jsxs(_Fragment, { children: [' ', strings.otp.resendSeparator, ' ', link(strings.otp.changeEmailLabel, 'tertiary')] })) : null] })) : undefined;
+    return (_jsx(PrizmaFormScreen, { ref: ref, title: strings.otp.title, subtitle: strings.otp.subtitle, ctaLabel: strings.otp.ctaLabel, 
+        /* Figma greys the CTA on both error sections; `typing` keeps it live. */
+        ctaDisabled: invalid, 
+        /* The spinner rides the CTA, not the field (see the note above). */
+        ctaLoading: busy, ctaLoadingLabel: strings.otp.ctaLoadingLabel, linkContent: resendLine, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell, children: _jsx(PrizmaOtp, { length: length, 
+            /* Core's own static-focus modifier, the same mechanism the verify
+               field uses: `typing` is the one section Figma draws focused, and
+               `filled` sits on the resting border. DEVIATIONS #PI-7. */
+            className: focused ? 'prizma-input-otp--focused' : undefined, "aria-label": strings.otp.fieldLabel, 
+            /* Uncontrolled, for the same reason as the email 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 ?? '', 
+            /* Figma's code is alphanumeric ("A1B2C3"), so the field must not
+               advertise a numeric keypad the way Core's OTP default does. */
+            inputMode: "text", 
+            /* `processing` is the one section Figma greys — the code stays
+               legible while the check runs. */
+            disabled: busy, error: invalid, errorText: errorText }) }));
+});
+EmailInputOtpScreen.displayName = 'EmailInputOtpScreen';
+export default EmailInputOtpScreen;

package/dist/EmailInputProcessingScreen.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { type PrizmaProcessingScreenProps } from './ProcessingScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { EmailInputStrings } from './EmailInputStrings';
+import './ScreenLayout.css';
+export interface EmailInputProcessingScreenProps extends Omit<PrizmaProcessingScreenProps, 'status' | 'title' | 'subtitle' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `processing` slice. */
+    strings: EmailInputStrings;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Email Input — the code is being checked, built on the Processing archetype
+ * (GUIDELINES.md §6-C, `PrizmaProcessingScreen`).
+ *
+ * Figma: the purple `email.OTP.processing` section holding `email.processing`
+ * — a separate SCREEN from the in-form `email.OTP.processing` state, which
+ * keeps the code field and only swaps the CTA. This one is a pure spinner + H2
+ * with no button, which is exactly the case §6-F reserves for C rather than the
+ * Result archetype.
+ *
+ * Figma draws this section with a close ✕ in the nav and no verified tag; both
+ * are owner-settled and neither is reproduced — GUIDELINES §3 forbids the ✕
+ * (DEVIATIONS #PI-9, a standing Wave-3 ruling) and the chrome stays constant
+ * across the module's screens (#F-30, #F-34, #PI-8).
+ */
+export declare const EmailInputProcessingScreen: React.ForwardRefExoticComponent<EmailInputProcessingScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default EmailInputProcessingScreen;

package/dist/EmailInputProcessingScreen.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaProcessingScreen, } from './ProcessingScreen';
+import './ScreenLayout.css';
+/**
+ * Email Input — the code is being checked, built on the Processing archetype
+ * (GUIDELINES.md §6-C, `PrizmaProcessingScreen`).
+ *
+ * Figma: the purple `email.OTP.processing` section holding `email.processing`
+ * — a separate SCREEN from the in-form `email.OTP.processing` state, which
+ * keeps the code field and only swaps the CTA. This one is a pure spinner + H2
+ * with no button, which is exactly the case §6-F reserves for C rather than the
+ * Result archetype.
+ *
+ * Figma draws this section with a close ✕ in the nav and no verified tag; both
+ * are owner-settled and neither is reproduced — GUIDELINES §3 forbids the ✕
+ * (DEVIATIONS #PI-9, a standing Wave-3 ruling) and the chrome stays constant
+ * across the module's screens (#F-30, #F-34, #PI-8).
+ */
+export const EmailInputProcessingScreen = forwardRef(({ strings, screenId = 'email-input-processing', overrides, onAction, ...shell }, ref) => (_jsx(PrizmaProcessingScreen, { ref: ref, status: "loading", title: strings.processing.title, subtitle: strings.processing.subtitle, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell })));
+EmailInputProcessingScreen.displayName = 'EmailInputProcessingScreen';
+export default EmailInputProcessingScreen;