@incodetech/prizma-core-screens 0.1.0

package/src/EkycSuccessScreen.tsx

@@ -0,0 +1,63 @@
+import React, { forwardRef } from 'react';
+import {
+  PrizmaProcessingScreen,
+  type PrizmaProcessingScreenProps,
+} from './ProcessingScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { EkycStrings } from './EkycStrings';
+import './ScreenLayout.css';
+
+export interface EkycSuccessScreenProps
+  extends Omit<
+    PrizmaProcessingScreenProps,
+    'status' | 'title' | 'subtitle' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `success` slice. */
+  strings: EkycStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * eKYC — the submitted verdict, built on the Processing archetype
+ * (GUIDELINES.md §6-C, `PrizmaProcessingScreen`).
+ *
+ * Figma: the purple `eKYC.success` section (2101:7969). A centred positive mark
+ * over a bare H2 ("Information submitted!") with **no subtitle and no CTA** —
+ * the module hands control straight back to the flow, so it sits on C while its
+ * sibling error verdict sits on F. That split follows the archetype rule rather
+ * than the module's own symmetry, the same call `EmailInputSuccessScreen`
+ * settled (DEVIATIONS #EI-4).
+ *
+ * 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 EkycSuccessScreen = forwardRef<HTMLDivElement, EkycSuccessScreenProps>(
+  (
+    {
+      strings,
+      screenId = 'ekyc-success',
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaProcessingScreen
+      ref={ref}
+      status="success"
+      title={strings.success.title}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    />
+  ),
+);
+EkycSuccessScreen.displayName = 'EkycSuccessScreen';
+
+export default EkycSuccessScreen;

package/src/ElectronicSignatureDrawScreen.tsx

@@ -0,0 +1,127 @@
+import React, { forwardRef } from 'react';
+import { PrizmaSignaturePad } from '@incodetech/prizma-core-web/signature-pad';
+import { PrizmaFormScreen, type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type {
+  ElectronicSignatureDrawState,
+  ElectronicSignatureStrings,
+} from './ElectronicSignatureStrings';
+import './ScreenLayout.css';
+
+export interface ElectronicSignatureDrawScreenProps
+  extends Omit<
+    PrizmaFormScreenProps,
+    | 'title'
+    | 'subtitle'
+    | 'ctaLabel'
+    | 'ctaDisabled'
+    | 'verifiedLabel'
+    | 'children'
+    | 'navLabel'
+    | 'linkLabel'
+    | 'linkContent'
+  > {
+  /** Module copy — this screen reads the `draw` slice. */
+  strings: ElectronicSignatureStrings;
+  /** Which purple section to render: `draw` (empty) or `signed`. Default `draw`. */
+  state?: ElectronicSignatureDrawState;
+  /**
+   * Core's own extension point for the drawing engine
+   * (`PrizmaSignaturePad.onCanvasReady`: "consumers wire their drawing engine
+   * to the canvas inside this callback"). Forwarded untouched so a host — or
+   * the hub gallery, which paints a specimen stroke for the `signed` cell — can
+   * put real ink on the pad. The screen itself stays presentational: it holds
+   * no state and touches no browser API.
+   */
+  onCanvasReady?: (canvas: HTMLCanvasElement) => void;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Electronic Signature — the signature-pad screen, built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for both purple pad sections — `eSign.draw` (4116:10325) and
+ * `eSign.signed` (4116:10336). Measured against the 390 frames they share an
+ * identical skeleton — nav → Title (H2 + H5) → Spacing/32 → the pad → primary
+ * CTA → tag — and differ ONLY in what the pad and the CTA are doing. The pad is
+ * Core's `PrizmaSignaturePad` (the Figma `Signature pad` component, 6291:56383)
+ * verbatim: it owns the 256-tall field, the placeholder, the Spacing/8 to the
+ * Clear row and the Clear control itself, so nothing here re-creates any of it.
+ *
+ * The state axis is a single boolean into Core, and every one of its three
+ * visible consequences is Core's own (checked against `SignaturePad.tsx`, not
+ * assumed — the #CURP-3 lesson about props that silently do nothing):
+ *
+ *  - `draw`   → `isFilled={false}`: the "Sign here" placeholder shows, Core
+ *               forces the Clear link Disabled (`disabled={disabled || !filled}`),
+ *               and the primary CTA is disabled — Figma's grey `Done`.
+ *  - `signed` → `isFilled={true}`: the placeholder is gone, Clear renders as the
+ *               live blue `tertiary-link`, and the primary CTA is enabled.
+ *
+ * The ink itself is host-drawn through `onCanvasReady`, because the canvas is a
+ * real `<canvas>` whose bitmap only exists once a drawing engine paints it.
+ * That is Core's documented division of labour, not a workaround — see the
+ * module's DEVIATIONS row and the Core request recorded there.
+ *
+ * Standing rulings applied: the sections draw a close ✕ at the nav's right,
+ * which §3 does not offer and no module hand-rolls (DEVIATIONS #PI-9); the
+ * in-flight treatment, if this module ever gains one, rides the CTA rather than
+ * the field (#PI-5) — Core explicitly ships no Loading state for the pad.
+ */
+export const ElectronicSignatureDrawScreen = forwardRef<
+  HTMLDivElement,
+  ElectronicSignatureDrawScreenProps
+>(
+  (
+    {
+      strings,
+      state = 'draw',
+      onCanvasReady,
+      screenId = `electronic-signature-${state}`,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const signed = state === 'signed';
+
+    return (
+      <PrizmaFormScreen
+        ref={ref}
+        title={strings.draw.title}
+        subtitle={strings.draw.subtitle}
+        ctaLabel={strings.draw.ctaLabel}
+        /* `eSign.draw` draws `Done` on Button/Primary/Surface/Disabled — there
+           is nothing to submit until the canvas has ink. */
+        ctaDisabled={!signed}
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={overrides}
+        onAction={onAction}
+        {...shell}
+      >
+        <PrizmaSignaturePad
+          isFilled={signed}
+          /* Full-signature sub-type, not the initials one. */
+          isInitials={false}
+          placeholder={strings.draw.placeholder}
+          canvasLabel={strings.draw.canvasLabel}
+          clearLabel={strings.draw.clearLabel}
+          /* Clearing the canvas is a different flow from submitting it, so it
+             emits its own event rather than collapsing into the CTA
+             (DEVIATIONS #PI-10). */
+          onClear={() => onAction?.({ type: 'secondary', screenId })}
+          onCanvasReady={onCanvasReady}
+        />
+      </PrizmaFormScreen>
+    );
+  },
+);
+ElectronicSignatureDrawScreen.displayName = 'ElectronicSignatureDrawScreen';
+
+export default ElectronicSignatureDrawScreen;

package/src/ElectronicSignatureErrorScreen.tsx

@@ -0,0 +1,74 @@
+import React, { forwardRef } from 'react';
+import { PrizmaResultScreen, 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 const ElectronicSignatureErrorScreen = forwardRef<
+  HTMLDivElement,
+  ElectronicSignatureErrorScreenProps
+>(
+  (
+    {
+      strings,
+      screenId = 'electronic-signature-error',
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <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/src/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/src/ElectronicSignatureReviewScreen.tsx

@@ -0,0 +1,106 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import { PrizmaListScreen, 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 const ElectronicSignatureReviewScreen = forwardRef<
+  HTMLDivElement,
+  ElectronicSignatureReviewScreenProps
+>(
+  (
+    {
+      strings,
+      document,
+      screenId = 'electronic-signature-review',
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaListScreen
+      ref={ref}
+      title={strings.review.title}
+      ctaLabel={strings.review.ctaLabel}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    >
+      <div
+        className="electronic-signature-document"
+        role="region"
+        aria-label={strings.review.documentLabel}
+        tabIndex={0}
+      >
+        {document}
+      </div>
+    </PrizmaListScreen>
+  ),
+);
+ElectronicSignatureReviewScreen.displayName = 'ElectronicSignatureReviewScreen';
+
+export default ElectronicSignatureReviewScreen;

package/src/ElectronicSignatureStrings.ts

@@ -0,0 +1,67 @@
+// 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.
+
+/**
+ * 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/src/ElectronicSignatureSuccessScreen.tsx

@@ -0,0 +1,67 @@
+import React, { forwardRef } from 'react';
+import {
+  PrizmaProcessingScreen,
+  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 const ElectronicSignatureSuccessScreen = forwardRef<
+  HTMLDivElement,
+  ElectronicSignatureSuccessScreenProps
+>(
+  (
+    {
+      strings,
+      screenId = 'electronic-signature-success',
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <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/src/EmailInputErrorScreen.tsx

@@ -0,0 +1,67 @@
+import React, { forwardRef } from 'react';
+import { PrizmaResultScreen, 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 const EmailInputErrorScreen = forwardRef<HTMLDivElement, EmailInputErrorScreenProps>(
+  (
+    {
+      strings,
+      screenId = 'email-input-error',
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <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;