@incodetech/prizma-core-screens 0.2.7 → 0.2.14

package/src/IdCaptureStageScreen.tsx

@@ -6,6 +6,7 @@ import {
 } from '@incodetech/prizma-core-web/id-capture';
 import { PrizmaCaptureManual } from '@incodetech/prizma-core-web/capture-manual';
 import { PrizmaCaptureFeedback } from '@incodetech/prizma-core-web/capture-feedback';
+import { PrizmaSnackbar } from '@incodetech/prizma-core-web/snackbar';
 import { PrizmaTag } from '@incodetech/prizma-core-web/tag';
 import { PrizmaScreenShell, type PrizmaScreenShellProps } from './ScreenShell';
 import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
@@ -80,6 +81,28 @@ export interface IdCaptureStageScreenProps
   still?: ReactNode;
   /** Digit shown by the countdown Timer (`*-countdown` sections 1..3). */
   countdownValue?: 1 | 2 | 3;
+  /**
+   * Raise the "Need more time?" offer over the feed — the accessibility
+   * notification shown 20 s before auto-capture falls back to the shutter.
+   *
+   * A MODIFIER of whatever stage state is already showing, not a twelfth
+   * state: the 30 s fallback timer runs underneath the hint overlay, so the
+   * person can be shown the hand-and-document ghost and offered more time in
+   * the same frame. Needs `strings.stage.extendTime`; without it the flag is a
+   * no-op, which is what a host that has not localized the copy should get
+   * rather than English. Same contract as `FaceCaptureCapturingScreen`.
+   */
+  extendTime?: boolean;
+  /** Tapping "Extend auto-capture". The host resets its own fallback timer. */
+  onExtendTime?: () => void;
+  /**
+   * A notice band of the host's own, in the slot `extendTime` uses. Wins over
+   * `extendTime` when both are given. Exists for a host that needs the
+   * Snackbar to do something the static one cannot — Core Lab's prototype
+   * swaps in a copy whose count actually runs down — without reaching into
+   * the screen. The static `extendTime` notice stays the default.
+   */
+  notice?: ReactNode;
   screenId?: string;
   overrides?: PrizmaScreenOverrides;
   onAction?: PrizmaScreenActionHandler;
@@ -113,6 +136,31 @@ export interface IdCaptureStageScreenProps
  * to the column's bottom padding) — no offsets are invented here, and
  * PrizmaIdCapture's own frame→encrypted-row adjacency is left untouched
  * (DEVIATIONS.md #12's lesson: never stack an offset a Core component carries).
+ *
+ * ── The "Need more time?" offer (`extendTime`) ──────────────────────────────
+ *
+ * Auto-capture gives up after a configured timeout (30 s in the module's own
+ * flow frames) and drops the person onto the shutter. Someone who is
+ * struggling — a tremor, low vision, a dark room, a card that will not sit
+ * flat — gets moved off the EASIER path precisely because they were slow,
+ * which is backwards. So 20 s before the switch, the stage offers to stay on
+ * auto. A client turns it on per flow from the dashboard; with it off, nothing
+ * about today's capture changes. It is the conformance route for WCAG 2.2.1
+ * Timing Adjustable via the *Extend* clause (warn before the limit, ≥20 s to
+ * act, ≥10 extensions) — the reasoning, the `role="alert"` decision and the
+ * `neutral` state are all Face Capture's (2026-10-05) and are not re-argued
+ * here: `FaceCaptureCapturingScreen`'s header is the record. One feature, two
+ * modules, one Snackbar.
+ *
+ * WHERE IT SITS is the one thing this module decides differently. Face
+ * Capture anchors the notice on the shutter-strip rail because, there, notice
+ * and shutter are alternatives — a capturing screen either raises the offer or
+ * shows the button. ID Capture's strip is never free: the "?" help control
+ * rides it on every stage, auto or manual (IDC-29). So the notice takes the
+ * BOTTOM BAND instead — the flexible air between the encrypted row and the
+ * strip's reserved space — which is the one slot on this stage nothing else
+ * owns. It bottom-anchors there like the band's other content would, so the
+ * frame above does not move when the offer arrives. DEVIATIONS.md #IDC-32.
  */
 export const IdCaptureStageScreen = forwardRef<HTMLDivElement, IdCaptureStageScreenProps>(
   (
@@ -128,6 +176,9 @@ export const IdCaptureStageScreen = forwardRef<HTMLDivElement, IdCaptureStageScr
       camera,
       still,
       countdownValue = 3,
+      extendTime,
+      onExtendTime,
+      notice,
       screenId = `id-capture-${documentType}-${side}-${state}`,
       overrides,
       onAction,
@@ -146,6 +197,29 @@ export const IdCaptureStageScreen = forwardRef<HTMLDivElement, IdCaptureStageScr
     const pillKind = feedback === undefined ? STAGE_FEEDBACK[state] : feedback;
     const pillCopy = pillKind ? strings.feedback[pillKind] : undefined;
 
+    const offer = strings.stage.extendTime;
+    // No copy, no notice: a host that has not localized this must not get
+    // English, and the flag alone is not permission to invent it.
+    const band =
+      notice ??
+      (extendTime && offer ? (
+        <PrizmaSnackbar
+          state="neutral"
+          isMultiline
+          // Assertive on purpose — a polite region can queue behind the
+          // stage's own state announcements and be read out after the 20 s
+          // has already run out. FaceCaptureCapturingScreen's header has the
+          // full reasoning; this instance follows it.
+          role="alert"
+          linkLabel={offer.linkLabel}
+          onLinkClick={onExtendTime}
+        >
+          <strong>{offer.title}</strong>
+          <br />
+          {offer.description}
+        </PrizmaSnackbar>
+      ) : undefined);
+
     return (
       <PrizmaScreenShell
         ref={ref}
@@ -213,6 +287,7 @@ export const IdCaptureStageScreen = forwardRef<HTMLDivElement, IdCaptureStageScr
             still={still}
           />
           <div className="id-capture-band">
+            {band ? <div className="id-capture-stage__notice">{band}</div> : null}
           </div>
         </div>
         <div className="prizma-screen-layout__capture-strip">

package/src/IdCaptureStrings.ts

@@ -126,6 +126,25 @@ export interface IdCaptureStrings {
     /** Visually-hidden state announcements, per stage state — forwarded to
      *  `PrizmaIdCapture.stateLabels`. */
     stateLabels?: Partial<Record<IdCaptureStageState, string>>;
+    /**
+     * stage.extendTime — the accessibility offer that rides the camera stage
+     * 20 s before auto-capture gives up and hands over to the shutter
+     * ("Need more time? / Manual capture starts in 20 s / Extend auto-capture").
+     * The same contract as Face Capture's `extendTime`: one feature, two
+     * modules, identical copy, so the locale overlay translates both at once.
+     *
+     * `description` is one localized sentence that CONTAINS the count, not a
+     * template — ten locales put the number in ten places. Optional: a host
+     * that has not localized it gets no notice rather than English.
+     */
+    extendTime?: {
+      /** Bold first line — "Need more time?" */
+      title: string;
+      /** "Manual capture starts in 20 s" — the count lives inside the copy. */
+      description: string;
+      /** The action that keeps the user on auto — "Extend auto-capture". */
+      linkLabel: string;
+    };
   };
 
   /** The on-camera feedback pills the error stages carry. */

package/src/ListScreen.tsx

@@ -74,6 +74,25 @@ export interface PrizmaListScreenProps
    *  (common issues) and "Quit process" (permission). Figma draws Core's
    *  `tertiary-link` composite in the band's top slot. */
   linkLabel?: string;
+  /**
+   * A SECOND tertiary link, under the first. Reusability's selection draws
+   * "What data will be shared?" over "Incode’s Privacy Policy" with no primary
+   * between them — two non-primary actions a host has to tell apart, so this
+   * one emits `tertiary` where `linkLabel` emits `secondary` (the #PI-10
+   * reasoning). Stacked at the band's flat Spacing/16 like everything else in
+   * it. Omit it and nothing renders, so every existing consumer is untouched.
+   * DEVIATIONS #RU-4.
+   */
+  secondaryLinkLabel?: string;
+  /**
+   * A shell-level layer painted OVER the whole screen — the same slot
+   * archetypes A and E carry (#F-32, #BC-8): a scrim plus Core's
+   * `PrizmaBottomSheetContent` or `PrizmaModalContent`, presented on top of the
+   * dimmed list. It cannot ride in the content column: it is absolutely
+   * positioned against the shell. Reusability's shared-details sheet is the
+   * first List consumer (DEVIATIONS #RU-5).
+   */
+  overlay?: ReactNode;
   /** "verified by" attribution copy for the footer tag. */
   verifiedLabel: string;
   navLabel?: string;
@@ -122,6 +141,8 @@ export const PrizmaListScreen = forwardRef<HTMLDivElement, PrizmaListScreenProps
       ctaLabel,
       secondaryCtaLabel,
       linkLabel,
+      secondaryLinkLabel,
+      overlay,
       verifiedLabel,
       navLabel,
       backLabel,
@@ -171,17 +192,34 @@ export const PrizmaListScreen = forwardRef<HTMLDivElement, PrizmaListScreenProps
         >
           {children}
         </div>
-        {ctaLabel || secondaryCtaLabel || linkLabel || disclaimer ? (
+        {ctaLabel || secondaryCtaLabel || linkLabel || secondaryLinkLabel || disclaimer ? (
           <div className="prizma-screen-layout__band">
             {disclaimer ? <PrizmaDisclaimer text={disclaimer} /> : null}
-            {linkLabel ? (
-              <PrizmaButton
-                variant="tertiary-link"
-                size="L"
-                onClick={() => onAction?.({ type: 'secondary', screenId })}
-              >
-                {linkLabel}
-              </PrizmaButton>
+            {linkLabel || secondaryLinkLabel ? (
+              /* The links share ONE band slot, stacked flush: two 56px link
+                 rows with the band's 16 between them read as two distant
+                 lines (Camila, 2026-10-13); the row height is already the
+                 touch target. ScreenLayout.css `__band__links`. */
+              <div className="prizma-screen-layout__band__links">
+                {linkLabel ? (
+                  <PrizmaButton
+                    variant="tertiary-link"
+                    size="L"
+                    onClick={() => onAction?.({ type: 'secondary', screenId })}
+                  >
+                    {linkLabel}
+                  </PrizmaButton>
+                ) : null}
+                {secondaryLinkLabel ? (
+                  <PrizmaButton
+                    variant="tertiary-link"
+                    size="L"
+                    onClick={() => onAction?.({ type: 'tertiary', screenId })}
+                  >
+                    {secondaryLinkLabel}
+                  </PrizmaButton>
+                ) : null}
+              </div>
             ) : null}
             {/* THE PRIMARY ALWAYS SITS ABOVE THE SECONDARY (owner rule
                 2026-08-19, DEVIATIONS #GEO-1). The rule governs the
@@ -214,6 +252,7 @@ export const PrizmaListScreen = forwardRef<HTMLDivElement, PrizmaListScreenProps
           <PrizmaTag label={verifiedLabel} />
         </div>
       ) : null}
+      {overlay}
     </PrizmaScreenShell>
   ),
 );

package/src/LoaderScreen.tsx

@@ -23,11 +23,13 @@ export interface LoaderScreenProps
  * (GUIDELINES.md §6-C, `PrizmaProcessingScreen`).
  *
  * Figma: `Module Generic Screens` frames `67:2388` ("Processing…") and
- * `67:3593` ("Just a moment…"). ONE screen for both, and for every module
- * loader after them: logo header → Core's spinner → status line → reassurance
- * line → the verified tag, with no CTA. The archetype already IS this recipe;
- * this component exists so the family has a name a designer can point at and a
- * copy contract a host can fill, not to add layout.
+ * `67:3593` ("Just a moment…"), plus the SDK's own "Hold on a sec…" wait that
+ * ID Capture, NFC and the Demo App show (`verifyingIdentity`). ONE screen for
+ * all of them, and for every module loader after them: logo header → Core's
+ * spinner → status line → reassurance line → the verified tag, with no CTA.
+ * The archetype already IS this recipe; this component exists so the family
+ * has a name a designer can point at and a copy contract a host can fill, not
+ * to add layout.
  *
  * Reach for `PrizmaResultScreen` the moment a wait screen needs a button — a
  * loader with a "Cancel" is a result screen, and the missing CTA band here is

package/src/LoadersStrings.ts

@@ -15,12 +15,25 @@
 // No hardcoded English anywhere in a screen: every visible string arrives here.
 
 /**
- * The two frames in the generic file. They are the same screen with different
- * copy — which is the point of the family: the loader is a shape, and the two
- * entries here are examples of filling it, not a closed set. A module that
- * waits for something else supplies its own pair of strings under a new key.
+ * The copy pairs the family records. The loader is a shape, and each entry
+ * here is a way of filling it that more than one module already uses — not a
+ * closed set. A module that waits for something else supplies its own pair of
+ * strings under a new key.
+ *
+ * - `processing`        — frame `67:2388`. "Processing…" over the generic
+ *                         reassurance line. Watchlist for Business, eKYC, eKYB,
+ *                         Email Input and the signatures all draw this title.
+ * - `validating`        — frame `67:3593`. "Just a moment…", the documents
+ *                         are being validated.
+ * - `verifyingIdentity` — the SDK's own `loadingCircle.holdOn` wait: "Hold on
+ *                         a sec…" over "We're verifying your identity". ID
+ *                         Capture, NFC and the Demo App show it between the
+ *                         last capture and the verdict (Camila, 2026-10-09).
+ *
+ * Copy rule for every wait title: the ellipsis is the single `…` character,
+ * never two or three periods, so the same word reads the same in every module.
  */
-export type LoadersVariant = 'processing' | 'validating';
+export type LoadersVariant = 'processing' | 'validating' | 'verifyingIdentity';
 
 export interface LoadersCopy {
   /** H2 status line ("Processing…"). */

package/src/OcrReviewErrorScreen.tsx

@@ -0,0 +1,53 @@
+import React, { forwardRef } from 'react';
+import { PrizmaResultScreen, type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { OcrReviewStrings } from './OcrReviewStrings';
+import './ScreenLayout.css';
+
+export interface OcrReviewErrorScreenProps
+  extends Omit<
+    PrizmaResultScreenProps,
+    'status' | 'title' | 'ctaLabel' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `error` slice. */
+  strings: OcrReviewStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * OCR Review — "Something went wrong", built on Archetype F (GUIDELINES.md
+ * §6-F, `PrizmaResultScreen`). Figma: `OCR Error` (31084:18797), drawn OUTSIDE
+ * the Happy Path section and reached off the "Processed successfully?"
+ * decision's "No" branch — a plain status + title + "Try again" CTA.
+ *
+ * Nav and footer tag are left at the archetype's DEFAULT (shown). The frame
+ * itself draws neither, matching `DigitalIdUploadFileTooLargeScreen.tsx` —
+ * but that screen is the ONE exception in the whole package, not the pattern:
+ * every other error screen (`EkycErrorScreen`, `EkybErrorScreen`,
+ * `EmailInputErrorScreen`, `FormsErrorScreen`, `IdCaptureDocumentErrorScreen`)
+ * keeps both. Hiding them here, with only one CTA to balance the bottom,
+ * pushed the status + title below where every sibling error screen centres it
+ * (Mili, 2026-10-12 — checked against the system's own screens, not re-derived
+ * from the frame).
+ */
+export const OcrReviewErrorScreen = forwardRef<HTMLDivElement, OcrReviewErrorScreenProps>(
+  ({ strings, screenId = 'ocr-review-error', overrides, onAction, ...shell }, ref) => (
+    <PrizmaResultScreen
+      ref={ref}
+      status="error"
+      title={strings.error.title}
+      ctaLabel={strings.error.ctaLabel}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    />
+  ),
+);
+OcrReviewErrorScreen.displayName = 'OcrReviewErrorScreen';
+
+export default OcrReviewErrorScreen;

package/src/OcrReviewLayout.css

@@ -0,0 +1,24 @@
+/* OCR Review — the one piece of chrome the archetype doesn't own.
+ *
+ * `PrizmaFormScreen.media` places whatever the module hands it; the circular
+ * crop and fixed size are the module's own, same split `progress` already
+ * draws (the archetype positions a `PrizmaStepper`, never sizes it). 90×90,
+ * centred — Figma's `Image / Selfie` instance, read straight off the frame. A
+ * `fields` row defaults to `align-items: stretch` (FormScreen.css), so the
+ * thumbnail is the one row that opts itself out with `align-self`.
+ */
+.ocr-review__photo {
+  width: 90px;
+  height: 90px;
+  flex-shrink: 0;
+  align-self: center;
+  border-radius: var(--prizma-border-radius-full);
+  overflow: hidden;
+}
+
+.ocr-review__photo img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

package/src/OcrReviewLoadingScreen.tsx

@@ -0,0 +1,48 @@
+import React, { forwardRef } from 'react';
+import { PrizmaResultScreen, type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { OcrReviewStrings } from './OcrReviewStrings';
+import './ScreenLayout.css';
+
+export interface OcrReviewLoadingScreenProps
+  extends Omit<
+    PrizmaResultScreenProps,
+    'status' | 'title' | 'subtitle' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `loading` slice. */
+  strings: OcrReviewStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * OCR Review — server-side verification wait ("Hold on a sec…"). Figma:
+ * `1-18-1-id-hold-on` (31084:18795) — ID Capture's own frame, redrawn here
+ * rather than imported by reference: every module in this package owns its
+ * hold-on-shaped screen independently (`IdCaptureHoldOnScreen.tsx` is ID
+ * Capture's), and a cross-module import was tried once (Digital ID Upload)
+ * and dropped rather than kept.
+ *
+ * Archetype C (§6-C), `PrizmaResultScreen` with `status="loading"` and no CTA
+ * — identical shape to `IdCaptureHoldOnScreen.tsx`.
+ */
+export const OcrReviewLoadingScreen = forwardRef<HTMLDivElement, OcrReviewLoadingScreenProps>(
+  ({ strings, screenId = 'ocr-review-loading', overrides, onAction, ...shell }, ref) => (
+    <PrizmaResultScreen
+      ref={ref}
+      status="loading"
+      title={strings.loading.title}
+      subtitle={strings.loading.description}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    />
+  ),
+);
+OcrReviewLoadingScreen.displayName = 'OcrReviewLoadingScreen';
+
+export default OcrReviewLoadingScreen;

package/src/OcrReviewScreen.tsx

@@ -0,0 +1,190 @@
+import React, { forwardRef } from 'react';
+import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
+import { PrizmaDateField } from '@incodetech/prizma-core-web/date-field';
+import { PrizmaRadio } from '@incodetech/prizma-core-web/radio';
+import { PrizmaRadioGroup } from '@incodetech/prizma-core-web/radio-group';
+import { PrizmaFormScreen, type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { OcrReviewState, OcrReviewStrings } from './OcrReviewStrings';
+import './ScreenLayout.css';
+import './OcrReviewLayout.css';
+
+export interface OcrReviewScreenProps
+  extends Omit<
+    PrizmaFormScreenProps,
+    'title' | 'ctaLabel' | 'verifiedLabel' | 'children' | 'navLabel' | 'scrollFields'
+  > {
+  /** Module copy — this screen reads the `review` slice. */
+  strings: OcrReviewStrings;
+  /** Which `Review OCR Enable Edit` instance to render. Default `default`.
+   *  Ignored when `editable` is `false` — the disabled frame draws none of
+   *  these states (there is nothing to submit wrong when nothing can be
+   *  typed). */
+  state?: OcrReviewState;
+  /**
+   * `Review OCR Enable Edit` vs `Review OCR Disable Edit` (30530:119373) — the
+   * module's own boolean axis, orthogonal to `state`. `false` renders every
+   * field `disabled` (Core's grey surface + dimmed text, same prop
+   * `PrizmaTextField` / `PrizmaDateField` / `PrizmaRadioGroup` already ship)
+   * with no required asterisks (the frame hides them — nothing to validate on
+   * a field nobody can edit) while Continue stays enabled. Default `true`.
+   */
+  editable?: boolean;
+  /** The subject photo — Figma's `Image / Selfie`, 90×90 circular. */
+  photoSrc: string;
+  /** Field values the fields start with. Every field is uncontrolled
+   *  (`defaultValue`) — a screen is one static spec state, same rule
+   *  `EkycDetailsScreen` draws (#PI-6). */
+  values?: {
+    fullName?: string;
+    dateOfBirth?: string;
+    gender?: 'male' | 'female';
+    documentNumber?: string;
+    expiryDate?: string;
+    address?: string;
+  };
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * OCR Review — "Please check your data", built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for both drawn states: `default` (31084:18792 / 18794 — every
+ * field filled, Continue enabled) and `documentNumberMissing` (31084:18793 —
+ * every OTHER field keeps its filled value, only Document number is cleared
+ * and carries Core's `error` + `documentNumberRequiredError`). Unlike eKYC's
+ * `emptyError` (every required field clears and errors together), this frame
+ * draws a SINGLE field in that state — the empty-submit rule still applies,
+ * scoped to the one field Figma actually shows failing it.
+ *
+ * The photo sits ABOVE Full name as the field stack's own first row — Figma's
+ * `input-list` draws it at the same Spacing/16 rhythm as every field below it.
+ * It is the field stack's plain FIRST CHILD, nothing more: `PrizmaFormScreen`
+ * already renders whatever `children` hands it with that same gap, so this
+ * needed no new slot on the archetype (the archetype is untouched).
+ *
+ * Date of birth and Expiry date are both Core's `PrizmaDateField` — the
+ * frame's "Dropdown" instance name is the shared component's internal name for
+ * a date-kind field, not a literal dropdown (same reading `EkycDetailsScreen`
+ * gives its own Date of birth field). Gender is Core's `PrizmaRadioGroup` +
+ * `PrizmaRadio` — first real consumer of either in this package.
+ *
+ * The field stack SCROLLS (`scrollFields`, the same archetype prop eKYB's
+ * `EkybOwnersScreen`, Forms' long form and Qualified Signature's accept screen
+ * already use): the photo plus six fields do not fit an 844 frame without it,
+ * and without the release the Address row paints under the CTA instead of
+ * above it. Not a prop a caller picks — this module always needs it, so it is
+ * omitted from `OcrReviewScreenProps` and hardcoded here, matching those three
+ * precedents. `Review OCR Disable Edit` overflows the same way (its own
+ * `input-list` measures 654 against a 448 middle container) — one more reason
+ * `editable` is a prop of this same screen rather than a second component.
+ */
+export const OcrReviewScreen = forwardRef<HTMLDivElement, OcrReviewScreenProps>(
+  (
+    {
+      strings,
+      state = 'default',
+      editable = true,
+      photoSrc,
+      values,
+      screenId = editable ? `ocr-review-${state}` : 'ocr-review-disabled',
+      ctaDisabled,
+      className,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    // The empty-submit retry only exists on the editable frame — nothing can
+    // be left empty on a field nobody can type into.
+    const documentNumberMissing = editable && state === 'documentNumberMissing';
+    const documentNumberError = documentNumberMissing
+      ? { error: true, errorText: strings.review.documentNumberRequiredError }
+      : {};
+    // `Review OCR Disable Edit` hides every required asterisk (31256:169923 is
+    // marked `hidden` on its own Gender row) — spread onto every field only
+    // when editable, rather than a `required={editable}` on each that would
+    // still render an empty, pointless suffix slot.
+    const requiredProps = editable
+      ? { required: true, requiredHint: strings.review.requiredHint }
+      : {};
+
+    return (
+      <PrizmaFormScreen
+        ref={ref}
+        className={className}
+        title={strings.review.title}
+        ctaLabel={strings.review.ctaLabel}
+        ctaDisabled={ctaDisabled}
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={overrides}
+        onAction={onAction}
+        /* The archetype's own scrolling field stack — the photo plus six
+           fields do not fit an 844 frame. No module CSS. */
+        scrollFields
+        {...shell}
+      >
+        <div className="ocr-review__photo">
+          <img src={photoSrc} alt="" />
+        </div>
+        <PrizmaTextField
+          label={strings.review.fullNameLabel}
+          {...requiredProps}
+          disabled={!editable}
+          defaultValue={values?.fullName ?? ''}
+          autoComplete="off"
+          clearable={false}
+        />
+        <PrizmaDateField
+          label={strings.review.dateOfBirthLabel}
+          {...requiredProps}
+          disabled={!editable}
+          defaultValue={values?.dateOfBirth ?? ''}
+          autoComplete="off"
+        />
+        <PrizmaRadioGroup
+          name={`${screenId}-gender`}
+          legend={strings.review.genderLabel}
+          defaultValue={values?.gender}
+          disabled={!editable}
+        >
+          <PrizmaRadio textSize="m" value="male" text={strings.review.maleLabel} />
+          <PrizmaRadio textSize="m" value="female" text={strings.review.femaleLabel} />
+        </PrizmaRadioGroup>
+        <PrizmaTextField
+          label={strings.review.documentNumberLabel}
+          {...requiredProps}
+          {...documentNumberError}
+          disabled={!editable}
+          defaultValue={documentNumberMissing ? '' : values?.documentNumber ?? ''}
+          autoComplete="off"
+          clearable={false}
+        />
+        <PrizmaDateField
+          label={strings.review.expiryDateLabel}
+          {...requiredProps}
+          disabled={!editable}
+          defaultValue={values?.expiryDate ?? ''}
+          autoComplete="off"
+        />
+        <PrizmaTextField
+          label={strings.review.addressLabel}
+          {...requiredProps}
+          disabled={!editable}
+          defaultValue={values?.address ?? ''}
+          autoComplete="off"
+          clearable={false}
+        />
+      </PrizmaFormScreen>
+    );
+  },
+);
+OcrReviewScreen.displayName = 'OcrReviewScreen';
+
+export default OcrReviewScreen;

package/src/OcrReviewStrings.ts

@@ -0,0 +1,69 @@
+// OCR Review module — copy contract.
+//
+// Every OCR Review screen receives the SAME `strings: OcrReviewStrings`
+// object (rule: all copy via props, no hardcoded English — GUIDELINES.md §9).
+//
+// Authoritative screens: `ID Capture — Latest Design` file
+// (U1EOfl9RQ1rOlOIuQw3rhL), section `OCR Review - 🍎 iOS - Full flow`
+// (31084:18781) → `Happy Path` (31084:18782). Three `Review OCR Enable Edit`
+// instances draw one screen in two states (filled, and Document number
+// cleared + errored after an empty Continue press), `1-18-1-id-hold-on` is
+// ID Capture's own wait screen redrawn here rather than reused by reference
+// (see OcrReviewLoadingScreen.tsx — every module in this package owns its own
+// hold-on-shaped screen; Digital ID Upload tried sharing one by reference and
+// it was dropped, not kept), `OCR Success` and `OCR Error` (the latter OUTSIDE
+// the Happy Path section, reached off the "Processed successfully?" decision's
+// "No" branch) close the module on Archetype F.
+
+export type OcrReviewState = 'default' | 'documentNumberMissing';
+
+export interface OcrReviewStrings {
+  /** Accessible name for the logo nav region (i18n — no baked-in English). */
+  navLabel?: string;
+  /** "verified by" attribution copy for the footer tag. */
+  verifiedLabel: string;
+
+  /** `Review OCR Enable Edit` (31084:18792 / 18793 / 18794) — one screen, two
+   *  states (`default`, `documentNumberMissing`). */
+  review: {
+    /** "Please check your data" */
+    title: string;
+    /** The asterisk suffix on every required field's label ("*"). */
+    requiredHint: string;
+    fullNameLabel: string;
+    dateOfBirthLabel: string;
+    genderLabel: string;
+    maleLabel: string;
+    femaleLabel: string;
+    documentNumberLabel: string;
+    /** "Field can't be empty" — Document number's error in `documentNumberMissing`. */
+    documentNumberRequiredError: string;
+    expiryDateLabel: string;
+    addressLabel: string;
+    /** "Continue" */
+    ctaLabel: string;
+  };
+
+  /** `1-18-1-id-hold-on`, redrawn for this module (see OcrReviewLoadingScreen.tsx). */
+  loading: {
+    /** "Hold on a sec.." */
+    title: string;
+    /** "We're verifying your identity" */
+    description: string;
+  };
+
+  /** `OCR Success` (31084:18796). */
+  success: {
+    /** "Identity successfully verified" */
+    title: string;
+  };
+
+  /** `OCR Error` (31084:18797) — off the "Processed successfully?" decision's
+   *  "No" branch, drawn outside the Happy Path section. */
+  error: {
+    /** "Something went wrong" */
+    title: string;
+    /** "Try again" */
+    ctaLabel: string;
+  };
+}