@incodetech/prizma-core-screens 0.2.4 → 0.2.12

package/src/CurpGenerateScreen.tsx

@@ -56,6 +56,14 @@ export interface CurpGenerateScreenProps
  * The `dropdown` section IS the open-menu spec state, which Core exposes as the
  * documentation-only `forceOpen` (a screen is one static state, never a live
  * interaction) — the same mechanism Phone Input's `countryCode` section uses.
+ *
+ * `emptyError` is the empty-submit state (rule from Elena, 2026-09-30,
+ * GUIDELINES §6-E empty-submit rule): "Generate" was pressed with the form
+ * empty. All six fields carry the required `*`, so all six render empty with no
+ * placeholder, in Core's error state with `requiredError`; no menu is open and
+ * the primary CTA is disabled, following the drawn precedent in
+ * `FormsFieldScreen`. The resting `default` keeps the CTA enabled so the user
+ * can reach this state.
  */
 export const CurpGenerateScreen = forwardRef<HTMLDivElement, CurpGenerateScreenProps>(
   (
@@ -75,21 +83,30 @@ export const CurpGenerateScreen = forwardRef<HTMLDivElement, CurpGenerateScreenP
   ) => {
     const copy = strings.generate;
 
+    // Empty submit: every required field drops its value and placeholder and
+    // takes Core's error state with the shared "required" row; the CTA greys.
+    const emptyError = state === 'emptyError';
+    const ph = (placeholder?: string) => (emptyError ? undefined : placeholder);
+    const err = {
+      error: emptyError,
+      errorText: emptyError ? strings.requiredError : undefined,
+    };
+
     return (
       <PrizmaFormScreen
         ref={ref}
-        /* Scopes the two module rules in CurpLayout.css (see the foundation and
-           Core requests recorded there):
-           - `--scroll` lets the six-field stack scroll inside the 844 frame
-             instead of overflowing its box and painting over the CTA. EVERY
-             section gets it, `dropdown` included — Figma draws "Generate"
-             clear and unobstructed under the open menu.
-           - `--menu-open` flips Core's absolutely-positioned menu above its
-             trigger on the one section that forces it open, so the three
-             gender rows stay inside the scrolling column. */
+        /* The six-field stack scrolls inside the 844 frame through the
+           foundation's `scrollFields` (overflow + the Spacing/16 that keeps the
+           cut clear of "Generate"). EVERY section gets it, `dropdown` included:
+           Figma draws "Generate" clear and unobstructed under the open menu.
+           It replaces the module's old `--scroll` rule, which scrolled but
+           carried no spacing, so the last field ran flush into the button.
+           `--menu-open` (CurpLayout.css) flips Core's absolutely-positioned
+           menu above its trigger on the one section that forces it open, so
+           the three gender rows stay inside the scrolling column. */
+        scrollFields
         className={[
           'curp-generate',
-          'curp-generate--scroll',
           state === 'dropdown' ? 'curp-generate--menu-open' : '',
           className,
         ]
@@ -98,6 +115,7 @@ export const CurpGenerateScreen = forwardRef<HTMLDivElement, CurpGenerateScreenP
         title={copy.title}
         subtitle={copy.subtitle}
         ctaLabel={copy.ctaLabel}
+        ctaDisabled={emptyError}
         ctaLoadingLabel={copy.ctaLoadingLabel}
         verifiedLabel={strings.verifiedLabel}
         navLabel={strings.navLabel}
@@ -112,54 +130,60 @@ export const CurpGenerateScreen = forwardRef<HTMLDivElement, CurpGenerateScreenP
             (DEVIATIONS #PI-6). */}
         <PrizmaTextField
           label={copy.firstName.label}
-          placeholder={copy.firstName.placeholder}
+          placeholder={ph(copy.firstName.placeholder)}
           required
           requiredHint={strings.requiredHint}
           autoComplete="off"
-          defaultValue={values?.firstName ?? ''}
+          defaultValue={emptyError ? '' : values?.firstName ?? ''}
+          {...err}
         />
         <PrizmaTextField
           label={copy.firstLastName.label}
-          placeholder={copy.firstLastName.placeholder}
+          placeholder={ph(copy.firstLastName.placeholder)}
           required
           requiredHint={strings.requiredHint}
           autoComplete="off"
-          defaultValue={values?.firstLastName ?? ''}
+          defaultValue={emptyError ? '' : values?.firstLastName ?? ''}
+          {...err}
         />
         <PrizmaTextField
           label={copy.secondLastName.label}
-          placeholder={copy.secondLastName.placeholder}
+          placeholder={ph(copy.secondLastName.placeholder)}
           required
           requiredHint={strings.requiredHint}
           autoComplete="off"
-          defaultValue={values?.secondLastName ?? ''}
+          defaultValue={emptyError ? '' : values?.secondLastName ?? ''}
+          {...err}
         />
         <PrizmaDropdown
           label={copy.gender.label}
-          placeholder={copy.gender.placeholder}
+          placeholder={ph(copy.gender.placeholder)}
           required
           requiredHint={strings.requiredHint}
           options={genders}
-          defaultValue={values?.gender ?? null}
+          defaultValue={emptyError ? null : values?.gender ?? null}
+          {...err}
           searchPlaceholder={copy.gender.searchPlaceholder}
           /* The `dropdown` section is the open Gender menu. */
           forceOpen={state === 'dropdown'}
         />
         <PrizmaDateField
           label={copy.dateOfBirth.label}
-          placeholder={copy.dateOfBirth.placeholder}
+          placeholder={ph(copy.dateOfBirth.placeholder)}
           required
           requiredHint={strings.requiredHint}
           calendarLabel={copy.dateOfBirth.calendarLabel}
-          defaultValue={values?.dateOfBirth ?? ''}
+          defaultValue={emptyError ? '' : values?.dateOfBirth ?? ''}
+          {...err}
         />
         <PrizmaDropdown
           label={copy.birthState.label}
-          placeholder={copy.birthState.placeholder}
+          placeholder={ph(copy.birthState.placeholder)}
           required
           requiredHint={strings.requiredHint}
           options={states}
-          defaultValue={values?.birthState ?? null}
+          defaultValue={emptyError ? null : values?.birthState ?? null}
+          {...err}
           searchable
           searchPlaceholder={copy.birthState.searchPlaceholder}
         />

package/src/CurpLayout.css

@@ -1,6 +1,6 @@
 /* CURP — module layout additions.
  *
- * THREE rules, and none of them declares spacing: the content column, the 24px
+ * TWO rules, and none of them declares spacing: the content column, the 24px
  * gutters, the title → fields Spacing/32, the field gaps, the CTA column and
  * the anchored footer all stay the foundation's (`ScreenLayout.css`,
  * `FormScreen.css`). Nothing here re-declares an archetype value, invents a
@@ -10,40 +10,14 @@
  */
 
 /* ── The generator's field stack is taller than the screen ───────────────────
- * `CURP.Gene.default` is a 1051-tall frame: its `input-list` alone is 548 tall
- * (six 78px labelled fields at Spacing/16) and the CONTENT frame grows to 861
- * instead of the usual 654. At the 390×844 reference the column has ~470 for
- * it, so the last dropdown and the CTA fall past the fold.
- *
- * Archetype E's `.prizma-form-screen__fields` is `flex: 1; min-height: 0` with
- * no overflow behaviour — it was measured against Phone Input, whose forms are
- * one or two fields — so the surplus is silently clipped by `ScreenShell`'s
- * `overflow: hidden`, and (because the fields cannot shrink below
- * `--prizma-input-size-field-height`) it first PAINTS OVER the sibling CTA.
- * Screens are authored at 390×844 and never reflow (README / DEVIATIONS #17),
- * so growing the frame is not an option either.
- *
- * The stack is therefore allowed to scroll INSIDE the column: the title, the
- * CTA and the anchored tag stay put and the six fields pan, which is the
- * closest a fixed 844 frame gets to Figma's taller page. It adds NO padding, NO
- * gap and NO size of its own.
- *
- * Applied to EVERY `CURP.Gene.*` section including `dropdown`. The earlier
- * build withheld it from `dropdown` to keep Core's absolutely-positioned menu
- * from being clipped, and that traded one clipped element for a worse one: with
- * `overflow: visible` the 548-tall stack overflowed its box and painted the
- * open menu straight across the "Generate" button, which Figma (2058:16373)
- * draws clear and unobstructed under the menu. The CTA is never allowed to be
- * overlapped; the menu is handled by the next rule instead.
- *
- * FOUNDATION REQUEST: promote this to `FormScreen.css` as a
- * `.prizma-form-screen__fields--scroll` variant (or make overflow the default),
- * driven by a `scrollFields` prop on `PrizmaFormScreen`. Every long-form module
- * still to come in Wave 3 — eKYC, eKYB, address entry — will hit the same wall.
+ * `CURP.Gene.default` is a 1051-tall frame (six 78px labelled fields at
+ * Spacing/16), so at 390×844 the stack scrolls inside the column. That is the
+ * foundation's `scrollFields` on `PrizmaFormScreen` now (FormScreen.css
+ * `__fields--scroll`), which also carries the Spacing/16 between the cut and
+ * the CTA. The module used to hand-roll `overflow-y: auto` here with no
+ * spacing, so the last field ran flush into "Generate" (Elena, 2026-09-30).
+ * Removed in favour of the foundation rule.
  */
-.curp-generate--scroll .prizma-form-screen__fields {
-  overflow-y: auto;
-}
 
 /* ── The open Gender menu must stay inside the scrolling column ──────────────
  * `CURP.Gene.dropdown` exists to show the three gender rows, so they may not be

package/src/CurpStrings.ts

@@ -27,16 +27,30 @@
  * - `error`   — negative field + clear ✕ + the "Invalid CURP" row
  * - `loading` — both actions inert while the lookup runs; the spinner rides the
  *   CTA, never the field (the Phone Input lesson, DEVIATIONS #PI-5)
+ * - `emptyError` — "Continue" pressed with the field still empty: the field
+ *   stays empty (no placeholder) in Core's error state with `requiredError`,
+ *   and the CTA is disabled. GUIDELINES §6-E empty-submit rule (Elena,
+ *   2026-09-30).
  */
-export type CurpEnterState = 'default' | 'focused' | 'filled' | 'error' | 'loading';
+export type CurpEnterState =
+  | 'default'
+  | 'focused'
+  | 'filled'
+  | 'error'
+  | 'loading'
+  | 'emptyError';
 
 /**
  * The `CURP.Gene.*` form sections — the six-field generator:
  * - `default`  — every field empty on its placeholder
  * - `dropdown` — the Gender menu open over the form (Core's `forceOpen`)
  * - `filled`   — every field carrying a value
+ * - `emptyError` — "Generate" pressed with the form still empty: every required
+ *   field stays empty (no placeholder) in Core's error state with
+ *   `requiredError`, no menu is open, and the CTA is disabled. GUIDELINES §6-E
+ *   empty-submit rule (Elena, 2026-09-30).
  */
-export type CurpGenerateState = 'default' | 'dropdown' | 'filled';
+export type CurpGenerateState = 'default' | 'dropdown' | 'filled' | 'emptyError';
 
 /**
  * The two spinner sections. `verifying` is `CURP.EnterCURP.veryfing` (the
@@ -96,6 +110,12 @@ export interface CurpStrings {
    * the marker is localizable and never hardcoded in a screen.
    */
   requiredHint?: string;
+  /**
+   * Error row under every required field left empty when the primary CTA is
+   * pressed (the `emptyError` state of the entry and generator forms):
+   * "This field is required". SDK key `dynamicForms.fieldRequired`.
+   */
+  requiredError: string;
 
   /** CURP.EnterCURP.{default,focused,filled,error,loading} */
   enter: {

package/src/DemoScreensLayout.css

@@ -389,6 +389,22 @@
   background: var(--prizma-surface-neutral-50);
   align-items: center;
   justify-content: center;
+  /* The card hugs its content and is taller than a short window: on the Duo
+   * open full screen (626) unsafe centring put 90px of it above the page and
+   * 90 below, heading cut off (sweep 2026-10-20). `safe` starts the card at
+   * the top of the page when it does not fit, and does nothing when it does
+   * (#F-37, same mechanism). The plain `center` is the fallback. */
+  justify-content: safe center;
+}
+
+/* …and under 720 the page scrolls, as a desktop page does when the window is
+ * shorter than its content. The shell is `overflow: hidden` for the screens
+ * that pin chrome to its edges; this page pins nothing, the tag rides in the
+ * card's band. */
+@container pcs-screen (max-height: 720px) {
+  .prizma-screen-shell.demo-screens-redirect {
+    overflow-y: auto;
+  }
 }
 
 .demo-screens-redirect__card {

package/src/DemoScreensRedirectScreen.tsx

@@ -21,8 +21,13 @@ import './DemoScreensLayout.css';
  *  - `resend`    "Link sent!", resend available
  *  - `resent`    "Link sent!" with the "resent" snackbar
  *  - `tooMany`   "Too many attempts"
+ *  - `invalidUuid` the link's UUID was rejected (expired or unknown): no leg
+ *                to offer, only the error. One message for Flows and
+ *                Workflows alike, since the backend answers the same way for
+ *                both (Elena, 2026-10-21: web SDK 2.0 showed "QR code
+ *                expired" for Flows and "Session expired" with 2.0 off).
  */
-export type DemoScreensRedirectStage = 'qr' | 'sms' | 'smsFilled' | 'sent' | 'resend' | 'resent' | 'tooMany';
+export type DemoScreensRedirectStage = 'qr' | 'sms' | 'smsFilled' | 'sent' | 'resend' | 'resent' | 'tooMany' | 'invalidUuid';
 
 export interface DemoScreensRedirectScreenProps
   extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'> {
@@ -79,7 +84,8 @@ export const DemoScreensRedirectScreen = forwardRef<HTMLDivElement, DemoScreensR
       { code: 'RS', name: 'Serbia', dialCode: '+381', flag: '' },
     ].find(c => c.code === r.countryCode);
     const subtitle = sms ? r.subtitle : desktop ? r.subtitleQrDesktop : r.subtitleQrOnly;
-    const verdict = stage === 'sent' || stage === 'resend' || stage === 'resent' || stage === 'tooMany';
+    const invalid = stage === 'invalidUuid';
+    const verdict = stage === 'sent' || stage === 'resend' || stage === 'resent' || stage === 'tooMany' || invalid;
 
     return (
       <PrizmaScreenShell
@@ -96,8 +102,8 @@ export const DemoScreensRedirectScreen = forwardRef<HTMLDivElement, DemoScreensR
         <div className="demo-screens-redirect__card">
           <PrizmaScreenNav logo={overrides?.logo} navLabel={strings.navLabel} />
           <div className="prizma-screen-layout__content demo-screens-redirect__content">
-            <PrizmaTitle variant="centered" title={r.title} showSubtitle subtitle={subtitle} />
-            {sms ? (
+            {invalid ? null : <PrizmaTitle variant="centered" title={r.title} showSubtitle subtitle={subtitle} />}
+            {sms && !invalid ? (
               <div className="demo-screens-tabs" role="tablist">
                 <button type="button" role="tab" aria-selected={!onSms} className={['demo-screens-tabs__tab', !onSms ? 'demo-screens-tabs__tab--active' : ''].join(' ')} onClick={() => onAction?.({ type: 'secondary', screenId })}>
                   {r.tabs.qr}
@@ -138,7 +144,9 @@ export const DemoScreensRedirectScreen = forwardRef<HTMLDivElement, DemoScreensR
 
             {verdict ? (
               <div className="demo-screens-redirect__leg demo-screens-redirect__leg--verdict">
-                {stage === 'tooMany' ? (
+                {invalid ? (
+                  <PrizmaTitle variant="centered" title={r.invalidUuid.title} showSubtitle subtitle={r.invalidUuid.subtitle} icon={{ type: 'status', status: 'error' }} />
+                ) : stage === 'tooMany' ? (
                   <PrizmaTitle variant="centered" title={r.tooMany.title} showSubtitle subtitle={r.tooMany.subtitle} icon={{ type: 'status', status: 'error' }} />
                 ) : (
                   <PrizmaTitle
@@ -149,7 +157,7 @@ export const DemoScreensRedirectScreen = forwardRef<HTMLDivElement, DemoScreensR
                     icon={{ type: 'status', status: 'success' }}
                   />
                 )}
-                {stage === 'tooMany' ? (
+                {invalid ? null : stage === 'tooMany' ? (
                   <PrizmaButton variant="tertiary-link" size="L" onClick={() => onAction?.({ type: 'tertiary', screenId })}>
                     {r.tooMany.changeLabel}
                   </PrizmaButton>

package/src/DemoScreensStrings.ts

@@ -171,6 +171,11 @@ export interface DemoScreensStrings {
       subtitle: string;
       changeLabel: string;
     };
+    /** The link's UUID was rejected: the same copy for Flows and Workflows. */
+    invalidUuid: {
+      title: string;
+      subtitle: string;
+    };
   };
 
   /** WEB · `demo_2` — the front door: language, the wordmark, one CTA. */

package/src/DigitalIdUploadErrorScreen.tsx

@@ -0,0 +1,83 @@
+import React, { forwardRef } from 'react';
+import { PrizmaCaptureDigitalId } from '@incodetech/prizma-core-web/capture-digital-id';
+import { PrizmaReviewScreen, type PrizmaReviewScreenProps } from './ReviewScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { DigitalIdUploadStrings } from './DigitalIdUploadStrings';
+import './ScreenLayout.css';
+
+export interface DigitalIdUploadErrorScreenProps
+  extends Omit<
+    PrizmaReviewScreenProps,
+    | 'stage'
+    | 'title'
+    | 'subtitle'
+    | 'successTitle'
+    | 'analyzingLabel'
+    | 'primaryLabel'
+    | 'secondaryLabel'
+    | 'verifiedLabel'
+    | 'children'
+  > {
+  /** Module copy — this screen reads the `error` slice. */
+  strings: DigitalIdUploadStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Digital ID Upload — the uploaded file was rejected, built on the
+ * `PrizmaReviewScreen` archetype's `error` stage (GUIDELINES.md §6-H). Figma:
+ * `Upload Digital ID` file (wxFsHRvllern4VnjRqM4JO), `Errors` section,
+ * `Error` frame (node 25874:11957).
+ *
+ * Kept separate from `DigitalIdUploadReviewScreen` (the confirm flow) rather
+ * than folded into it as a fourth stage of that wrapper — same split Document
+ * Capture draws between its confirm screens and
+ * `DocumentCaptureGenericErrorScreen`, even though here both wrappers happen
+ * to share the same archetype under the hood. The media is
+ * `PrizmaCaptureDigitalId state="error"` (red 4px border) — the same managed
+ * component every other stage uses, not a bespoke verdict illustration — and
+ * the header/footer are hidden exactly like `analyzing`/`success`
+ * (`centeredWhenNoNav`, since this Figma frame draws the identical symmetric
+ * header/media/CTA skeleton).
+ */
+export const DigitalIdUploadErrorScreen = forwardRef<
+  HTMLDivElement,
+  DigitalIdUploadErrorScreenProps
+>(
+  (
+    {
+      strings,
+      screenId = 'digital-id-upload-error',
+      showHeader = false,
+      showFooter = false,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaReviewScreen
+      ref={ref}
+      stage="error"
+      title={strings.error.title}
+      subtitle={strings.error.subtitle}
+      primaryLabel={strings.error.ctaLabel}
+      centeredWhenNoNav
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      showHeader={showHeader}
+      showFooter={showFooter}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    >
+      <PrizmaCaptureDigitalId state="error" />
+    </PrizmaReviewScreen>
+  ),
+);
+DigitalIdUploadErrorScreen.displayName = 'DigitalIdUploadErrorScreen';
+
+export default DigitalIdUploadErrorScreen;

package/src/DigitalIdUploadFileTooLargeScreen.tsx

@@ -0,0 +1,67 @@
+import React, { forwardRef } from 'react';
+import { PrizmaResultScreen, type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { DigitalIdUploadStrings } from './DigitalIdUploadStrings';
+import './ScreenLayout.css';
+
+export interface DigitalIdUploadFileTooLargeScreenProps
+  extends Omit<
+    PrizmaResultScreenProps,
+    'status' | 'title' | 'subtitle' | 'ctaLabel' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `fileTooLarge` slice. */
+  strings: DigitalIdUploadStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Digital ID Upload — the selected file exceeds the size limit, built on the
+ * `PrizmaResultScreen` archetype (GUIDELINES.md §6-F). Figma: `Upload Digital
+ * ID` file (wxFsHRvllern4VnjRqM4JO), `Errors` section, `File Limit Error`
+ * frame (node 26083:3981).
+ *
+ * Unlike `DigitalIdUploadErrorScreen` (the rejected-document verdict, built on
+ * the Review archetype because it reuses `PrizmaCaptureDigitalId`), this
+ * screen never had a file to show — the size check runs before anything
+ * uploads — so Figma draws the plain F recipe: status icon + title + subtitle
+ * centred in the full height, one CTA pinned near the bottom. No media slot,
+ * no card, nothing to reuse from the capture component.
+ */
+export const DigitalIdUploadFileTooLargeScreen = forwardRef<
+  HTMLDivElement,
+  DigitalIdUploadFileTooLargeScreenProps
+>(
+  (
+    {
+      strings,
+      screenId = 'digital-id-upload-file-too-large',
+      showHeader = false,
+      showFooter = false,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaResultScreen
+      ref={ref}
+      status="error"
+      title={strings.fileTooLarge.title}
+      subtitle={strings.fileTooLarge.subtitle}
+      ctaLabel={strings.fileTooLarge.ctaLabel}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      showHeader={showHeader}
+      showFooter={showFooter}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    />
+  ),
+);
+DigitalIdUploadFileTooLargeScreen.displayName = 'DigitalIdUploadFileTooLargeScreen';
+
+export default DigitalIdUploadFileTooLargeScreen;

package/src/DigitalIdUploadReviewScreen.tsx

@@ -0,0 +1,119 @@
+import React, { forwardRef } from 'react';
+import { PrizmaCaptureDigitalId } from '@incodetech/prizma-core-web/capture-digital-id';
+import { PrizmaReviewScreen, type PrizmaReviewScreenProps } from './ReviewScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type {
+  DigitalIdUploadConfirmStage,
+  DigitalIdUploadStrings,
+} from './DigitalIdUploadStrings';
+import './ScreenLayout.css';
+
+export interface DigitalIdUploadReviewScreenProps
+  extends Omit<
+    PrizmaReviewScreenProps,
+    | 'title'
+    | 'subtitle'
+    | 'successTitle'
+    | 'analyzingLabel'
+    | 'primaryLabel'
+    | 'secondaryLabel'
+    | 'verifiedLabel'
+    | 'children'
+    | 'stage'
+  > {
+  /** Module copy — this screen reads the `review` slice. */
+  strings: DigitalIdUploadStrings;
+  /** Which stage of the confirm flow to render. Default `review`. */
+  stage?: DigitalIdUploadConfirmStage;
+  /** The uploaded file's name, shown under the card on `review` only. Not
+   *  copy — it is runtime data from the picker, so it stays out of
+   *  `strings` (same contract as `DocumentCaptureConfirmUploadScreen`). */
+  filename?: string;
+  /** Loading-bar progress on `analyzing`, 0–100. */
+  progress?: number;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Digital ID Upload — review / analyzing / success, built on the
+ * `PrizmaReviewScreen` archetype (GUIDELINES.md §6-H). Figma: `Upload Digital
+ * ID` file (wxFsHRvllern4VnjRqM4JO), "Web Happy Path - Light Mode" section —
+ * `Review Document` / `Analyzing` / `Success` (nodes 25351:14725/6/7).
+ *
+ * The media stage is Core's `PrizmaCaptureDigitalId` across all three stages
+ * — its own state enum (`review` / `analyzing` / `success`) maps directly
+ * onto the archetype's stage axis, so it already owns the border treatment
+ * (neutral on review, green 4px on analyzing/success), the scan-flash sweep
+ * and the filename row. Nothing is hand-built here, unlike
+ * `DocumentCaptureConfirmUploadScreen`'s bespoke file-card — Core ships a
+ * purpose-built component for this module.
+ *
+ * Header/footer visibility is genuinely per-stage in this Figma (logo nav +
+ * verified tag show on `review`, both are absent on `analyzing` and
+ * `success`) — not a layout choice this file invents, just the existing
+ * `showHeader`/`showFooter` chrome knobs (owner rule 2026-08-18: header and
+ * footer are independently controlled) applied per stage.
+ *
+ * Always opts into the archetype's `centeredWhenNoNav` — it only takes effect
+ * while the nav is hidden (`analyzing`/`success` here), where this Figma
+ * draws the header + media as one group centred with equal space above and
+ * below it, not a pinned header (see ReviewScreen.tsx for the mechanics).
+ * `review` always shows its own nav, so the flag is a no-op there, and the
+ * default `false` leaves Document Capture's existing analyzing/success
+ * screens byte-for-byte unchanged (neither ever hides the nav here).
+ *
+ * GAP (report, not workaround — README rule 2): Figma's `Success` section
+ * also shows a subtitle ("Let's continue") under the success title, but the
+ * shared `PrizmaReviewScreen` archetype only renders a subtitle on
+ * `stage="review"` — every other current consumer's success state has none.
+ * Left unset here pending an owner call on whether to extend the shared
+ * archetype with a `successSubtitle` slot.
+ */
+export const DigitalIdUploadReviewScreen = forwardRef<
+  HTMLDivElement,
+  DigitalIdUploadReviewScreenProps
+>(
+  (
+    {
+      strings,
+      stage = 'review',
+      filename,
+      progress = 45,
+      showHeader = stage === 'review',
+      showFooter = stage === 'review',
+      screenId = `digital-id-upload-${stage}`,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaReviewScreen
+      ref={ref}
+      stage={stage}
+      title={strings.review.title}
+      subtitle={strings.review.subtitle}
+      successTitle={strings.review.successTitle}
+      analyzingLabel={strings.review.analyzingLabel}
+      centeredWhenNoNav
+      progress={progress}
+      primaryLabel={strings.review.ctaLabel}
+      secondaryLabel={strings.review.replaceLabel}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      showHeader={showHeader}
+      showFooter={showFooter}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    >
+      <PrizmaCaptureDigitalId state={stage} filename={filename} />
+    </PrizmaReviewScreen>
+  ),
+);
+DigitalIdUploadReviewScreen.displayName = 'DigitalIdUploadReviewScreen';
+
+export default DigitalIdUploadReviewScreen;