@incodetech/prizma-core-screens 0.1.0

package/src/IdCaptureAgeVerificationScreen.tsx

@@ -0,0 +1,84 @@
+import React, { forwardRef } from 'react';
+import { IconCalendar, IconIdFrontScan, IconLockCheck } from '@incodetech/prizma-core-icons';
+import { PrizmaCardListCommonIssues } from '@incodetech/prizma-core-web/card-list';
+import { PrizmaListScreen, type PrizmaListScreenProps } from './ListScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { IdCaptureStrings } from './IdCaptureStrings';
+import './ScreenLayout.css';
+
+/**
+ * The three rows' leading icons, in the order the purple section lists them:
+ * scan the ID · we only read the date of birth · the rest is deleted. From the
+ * canonical bank only (§10) — Figma draws small ID-card thumbnails, which the
+ * 24px `Icon/Size/m` row slot of Core's redesigned list does not take.
+ * DEVIATIONS.md #IDC-24.
+ */
+const ROW_ICONS = [
+  <IconIdFrontScan key="scan" size="m" />,
+  <IconCalendar key="dob" size="m" />,
+  <IconLockCheck key="privacy" size="m" />,
+];
+
+export interface IdCaptureAgeVerificationScreenProps
+  extends Omit<
+    PrizmaListScreenProps,
+    'title' | 'subtitle' | 'children' | 'ctaLabel' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `ageVerification` slice. */
+  strings: IdCaptureStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * ID Capture — age-verification consent, built on the `PrizmaListScreen`
+ * archetype (GUIDELINES.md §6-G).
+ * Figma: purple section `1-1-2-id` of the `Age verification` group.
+ *
+ * Logo nav → Title → three reassurance rows → CTA → verified tag. The rows are
+ * Core's `PrizmaCardListCommonIssues` (Figma `list-unordered`), so the row
+ * geometry, the icon slot and the title/description typography are Core's, and
+ * the Spacing/24 under the title block is the archetype's — this file used to
+ * declare it as `.id-capture-info-list` (deleted; #F-31).
+ */
+export const IdCaptureAgeVerificationScreen = forwardRef<
+  HTMLDivElement,
+  IdCaptureAgeVerificationScreenProps
+>(
+  (
+    {
+      strings,
+      screenId = 'id-capture-age-verification',
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaListScreen
+      ref={ref}
+      title={strings.ageVerification.title}
+      subtitle={strings.ageVerification.subtitle}
+      ctaLabel={strings.ageVerification.ctaLabel}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    >
+      <PrizmaCardListCommonIssues
+        items={strings.ageVerification.rows.map((row, i) => ({
+          icon: ROW_ICONS[i % ROW_ICONS.length],
+          title: row.title,
+          subtitle: row.description,
+          showSubtitle: Boolean(row.description),
+        }))}
+      />
+    </PrizmaListScreen>
+  ),
+);
+IdCaptureAgeVerificationScreen.displayName = 'IdCaptureAgeVerificationScreen';
+
+export default IdCaptureAgeVerificationScreen;

package/src/IdCaptureAnalyzingScreen.tsx

@@ -0,0 +1,94 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import { PrizmaLoadingBar } from '@incodetech/prizma-core-web/loading-bar';
+import { PrizmaIdCapture } from '@incodetech/prizma-core-web/id-capture';
+import { PrizmaTag } from '@incodetech/prizma-core-web/tag';
+import { PrizmaScreenShell, type PrizmaScreenShellProps } from './ScreenShell';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { IdCaptureDocumentType, IdCaptureStrings } from './IdCaptureStrings';
+import './ScreenLayout.css';
+import './IdCaptureLayout.css';
+
+export interface IdCaptureAnalyzingScreenProps
+  extends Omit<PrizmaScreenShellProps, 'dark' | 'title' | 'children'> {
+  /** Module copy — this screen reads the `analyzing` slice. */
+  strings: IdCaptureStrings;
+  /** Which document was captured — Core `PrizmaIdCapture.type`. */
+  documentType?: IdCaptureDocumentType;
+  /** Portrait document orientation — the `↕️ vertical` groups. */
+  vertical?: boolean;
+  /** How far along the upload/analysis is, 0–100 (Core `PrizmaLoadingBar`). */
+  progress?: number;
+  /** The captured document still (<img>) being analyzed. */
+  still?: ReactNode;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * ID Capture — analyzing the captured still.
+ * Figma: purple sections `1-9-1` / `1-9-2-id-analyzing`,
+ * `1-16-1` / `1-16-2-id-back-analyzing`, `3-9-1-id-passport-analyzing`,
+ * `2-9-1-id-vertical-analyzing`, `4-9-1-id-passport-vertical-analyzing`.
+ *
+ * NOT the Processing archetype (§6-C) and not a spinner screen: every purple
+ * analyzing section puts a `Loading bar` + its status line in the SAME top band
+ * the Title occupies on the result screens, with the still below it in the
+ * capture frame — the identical three-band recipe (see `IdCaptureLayout.css`),
+ * so the screen is the result layout with the Title swapped for the bar. Core
+ * owns both halves: `PrizmaLoadingBar` draws the track, the fill and the status
+ * title, and `PrizmaIdCapture`'s `analyzing` state draws the positive frame and
+ * the sweep over the still.
+ *
+ * The bar's `state="analyzing"` is what tints the fill; the screen never picks
+ * a colour of its own.
+ */
+export const IdCaptureAnalyzingScreen = forwardRef<
+  HTMLDivElement,
+  IdCaptureAnalyzingScreenProps
+>(
+  (
+    {
+      strings,
+      documentType = 'id',
+      vertical = false,
+      progress = 30,
+      still,
+      screenId = 'id-capture-analyzing',
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaScreenShell ref={ref} {...shell}>
+      <div className="prizma-screen-layout__content prizma-screen-layout__content--no-nav id-capture-on-surface">
+        <div className="id-capture-band id-capture-band--top">
+          <PrizmaLoadingBar
+            progress={progress}
+            state="analyzing"
+            showTitle
+            title={strings.analyzing.title}
+          />
+        </div>
+        {/* Light surface — same overlay reasoning as IdCaptureResultScreen
+            (DEVIATIONS.md #IDC-28). */}
+        <PrizmaIdCapture
+          type={documentType}
+          state="analyzing"
+          isVertical={vertical}
+          mode="overlay"
+          encryptedLabel={strings.encryptedLabel}
+          still={still}
+        />
+        <div className="id-capture-band" />
+      </div>
+      <div className="prizma-screen-layout__footer">
+        <PrizmaTag label={strings.verifiedLabel} />
+      </div>
+    </PrizmaScreenShell>
+  ),
+);
+IdCaptureAnalyzingScreen.displayName = 'IdCaptureAnalyzingScreen';
+
+export default IdCaptureAnalyzingScreen;

package/src/IdCaptureCommonIssuesScreen.tsx

@@ -0,0 +1,109 @@
+import React, { forwardRef } from 'react';
+import {
+  IconBankCardSearch,
+  IconHide,
+  IconImage,
+  IconQuestionCircle,
+} from '@incodetech/prizma-core-icons';
+import { PrizmaCardListCommonIssues } from '@incodetech/prizma-core-web/card-list';
+import { PrizmaListScreen, type PrizmaListScreenProps } from './ListScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { IdCaptureStrings } from './IdCaptureStrings';
+import './ScreenLayout.css';
+
+/**
+ * The three rows' leading icons, in the order the purple section lists them:
+ * glare present · blur present · info is not readable. Canonical bank only
+ * (§10); the closest bank glyphs to Figma's drawings are the image mark, the
+ * crossed-out eye and the card-with-magnifier.
+ */
+const ROW_ICONS = [
+  <IconImage key="glare" size="m" />,
+  <IconHide key="blur" size="m" />,
+  <IconBankCardSearch key="readable" size="m" />,
+];
+
+export interface IdCaptureCommonIssuesScreenProps
+  extends Omit<
+    PrizmaListScreenProps,
+    'title' | 'children' | 'glyph' | 'ctaLabel' | 'linkLabel' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `commonIssues` slice. */
+  strings: IdCaptureStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * ID Capture — the "Common issues" help screen the stage's "?" opens, built on
+ * the `PrizmaListScreen` archetype (GUIDELINES.md §6-G).
+ * Figma: purple section `1-5-2-id-common-issues` of the front-side group.
+ *
+ * Glyph → Title → three explanatory rows → a tertiary link that switches to
+ * manual capture → the retry CTA. `showHeader={false}` keeps the section's
+ * logo-free chrome while still reserving the nav row, so every offset matches the
+ * rest of the module (owner rule 2026-08-18).
+ *
+ * Figma draws the header glyph as a filled 64px dark disc with a white question
+ * mark. Core's icon bank ships the OUTLINE question-circle and there is no
+ * filled-disc primitive, so the glyph is the bank icon in the archetype's
+ * non-status glyph slot at Title/Icon/Size — the same resolution the Face
+ * Capture pilot reached for its Wi-Fi glyph (DEVIATIONS.md #10) and the same
+ * outline-over-filled rule as the status marks (#15). DEVIATIONS.md #IDC-25.
+ */
+export const IdCaptureCommonIssuesScreen = forwardRef<
+  HTMLDivElement,
+  IdCaptureCommonIssuesScreenProps
+>(
+  (
+    {
+      strings,
+      screenId = 'id-capture-common-issues',
+      showHeader = false,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaListScreen
+      ref={ref}
+      showHeader={showHeader}
+      glyph={
+        <span
+          className={[
+            'prizma-screen-layout__glyph',
+            'prizma-screen-layout__glyph--neutral',
+            overrides?.align === 'left' ? 'prizma-screen-layout__glyph--left' : '',
+          ]
+            .filter(Boolean)
+            .join(' ')}
+        >
+          <IconQuestionCircle size="l" />
+        </span>
+      }
+      title={strings.commonIssues.title}
+      ctaLabel={strings.commonIssues.ctaLabel}
+      linkLabel={strings.commonIssues.manualLabel}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    >
+      <PrizmaCardListCommonIssues
+        items={strings.commonIssues.rows.map((row, i) => ({
+          icon: ROW_ICONS[i % ROW_ICONS.length],
+          title: row.title,
+          subtitle: row.description,
+          showSubtitle: Boolean(row.description),
+        }))}
+      />
+    </PrizmaListScreen>
+  ),
+);
+IdCaptureCommonIssuesScreen.displayName = 'IdCaptureCommonIssuesScreen';
+
+export default IdCaptureCommonIssuesScreen;

package/src/IdCaptureDocumentErrorScreen.tsx

@@ -0,0 +1,92 @@
+import React, { forwardRef } from 'react';
+import { PrizmaCardDocumentList } from '@incodetech/prizma-core-web/card';
+import { PrizmaResultScreen, type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { IdCaptureStrings } from './IdCaptureStrings';
+import './ScreenLayout.css';
+
+export interface IdCaptureDocumentErrorScreenProps
+  extends Omit<
+    PrizmaResultScreenProps,
+    | 'status'
+    | 'title'
+    | 'subtitle'
+    | 'children'
+    | 'disclaimer'
+    | 'ctaLabel'
+    | 'verifiedLabel'
+    | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `documentError` slice. */
+  strings: IdCaptureStrings;
+  /** The `-empty` variant: no accepted-documents list is available yet. */
+  empty?: boolean;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * ID Capture — the document itself is not accepted, built on the
+ * `PrizmaResultScreen` archetype (GUIDELINES.md §6-F).
+ * Figma: purple sections `1-9-12-id-documenterror`, `1-9-13-id-documenterror`
+ * and `1-9-11-id-documenterror-empty` of the `Document Errors 🚧` group.
+ * (`1-9-11-id-documenterror` is an EMPTY purple section — nothing is designed in
+ * it yet, so there is nothing to build; the group's 🚧 marker is honest.)
+ *
+ * Error status mark → Title → the accepted-documents card (the archetype's
+ * `children` slot) → attempts line (`disclaimer`) → retry CTA. The card block
+ * used to carry its own Spacing/24 in `IdCaptureLayout.css`; the archetype's
+ * centred column now supplies the gap, so the module declares no spacing at all
+ * (#F-33 records that the block therefore centres rather than sitting at the top).
+ *
+ * The card is Core's `PrizmaCardDocumentList`, which owns the country row (its
+ * bundled flag raster or an emoji fallback) and the document rows, and ships the
+ * `empty` placeholder the `-empty` section needs. Figma puts the
+ * "Accepted documents for: 🇺🇸 United States" line ABOVE the card while Core
+ * carries the country INSIDE it as the card's own header — the design system
+ * wins and the line is not duplicated outside. DEVIATIONS.md #IDC-27.
+ */
+export const IdCaptureDocumentErrorScreen = forwardRef<
+  HTMLDivElement,
+  IdCaptureDocumentErrorScreenProps
+>(
+  (
+    {
+      strings,
+      empty = false,
+      screenId = empty ? 'id-capture-document-error-empty' : 'id-capture-document-error',
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaResultScreen
+      ref={ref}
+      status="error"
+      title={strings.documentError.title}
+      subtitle={strings.documentError.description}
+      disclaimer={strings.documentError.attemptsLabel}
+      ctaLabel={strings.documentError.ctaLabel}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    >
+      <PrizmaCardDocumentList
+        state={empty ? 'empty' : 'default'}
+        countryCode={strings.documentError.countryCode}
+        flag={strings.documentError.flag}
+        country={strings.documentError.country}
+        documents={strings.documentError.documents}
+        emptyMessage={strings.documentError.emptyMessage}
+      />
+    </PrizmaResultScreen>
+  ),
+);
+IdCaptureDocumentErrorScreen.displayName = 'IdCaptureDocumentErrorScreen';
+
+export default IdCaptureDocumentErrorScreen;

package/src/IdCaptureDocumentSelectionScreen.tsx

@@ -0,0 +1,100 @@
+import React, { forwardRef } from 'react';
+import { PrizmaCardListVerificationOptions } from '@incodetech/prizma-core-web/card-list';
+import { PrizmaListScreen, type PrizmaListScreenProps } from './ListScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { IdCaptureDocumentType, IdCaptureStrings } from './IdCaptureStrings';
+import './ScreenLayout.css';
+
+export interface IdCaptureDocumentSelectionScreenProps
+  extends Omit<
+    PrizmaListScreenProps,
+    'title' | 'subtitle' | 'children' | 'listAlign' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `documentSelection` slice. */
+  strings: IdCaptureStrings;
+  /** Fired with the chosen document type; `onAction` still reports the tap.
+   *  Named `onDocumentSelect`, not `onSelect` — the latter is a native <div>
+   *  event the shell already passes through. */
+  onDocumentSelect?: (documentType: IdCaptureDocumentType) => void;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * ID Capture — choose which document to scan, built on the `PrizmaListScreen`
+ * archetype (GUIDELINES.md §6-G).
+ * Figma: purple sections `1-1-1-id` and `1-1-1-Document Chooser V2` of the
+ * `Document selection` group.
+ *
+ * The rows ARE the actions (Core makes each one a real `<button>`), so the
+ * archetype renders no CTA band; the option list hangs off the bottom of the
+ * middle via `listAlign="end"`, which is the offset this screen used to buy with
+ * a hand-placed `__flex` spacer.
+ *
+ * The two purple sections are two GENERATIONS of the same screen, and Core has
+ * already resolved which one ships: `1-1-1-id` draws each option as a card with
+ * a description line and a round blue arrow button, while
+ * `1-1-1-Document Chooser V2` draws flat rows of a 60px card icon + label +
+ * chevron — and the second is exactly Core's `Card / Verification options`
+ * after its 2026-07-27 redesign (`CardList.tsx`: the descriptive
+ * `Card/Item` stack was replaced, clean break, pre-1.0). The design system wins,
+ * so this screen is V2 and V1 is not rebuilt. DEVIATIONS.md #IDC-23.
+ *
+ * The row artwork comes from Core's card-icon bank (`id` / `passport`), so no
+ * illustration is redrawn here (§10).
+ */
+export const IdCaptureDocumentSelectionScreen = forwardRef<
+  HTMLDivElement,
+  IdCaptureDocumentSelectionScreenProps
+>(
+  (
+    {
+      strings,
+      onDocumentSelect,
+      screenId = 'id-capture-document-selection',
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const choose = (documentType: IdCaptureDocumentType) => {
+      onDocumentSelect?.(documentType);
+      onAction?.({ type: 'cta', screenId });
+    };
+
+    return (
+      <PrizmaListScreen
+        ref={ref}
+        title={strings.documentSelection.title}
+        subtitle={strings.documentSelection.subtitle}
+        listAlign="end"
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={overrides}
+        onAction={onAction}
+        {...shell}
+      >
+        <PrizmaCardListVerificationOptions
+          items={[
+            {
+              icon: 'id',
+              title: strings.documentSelection.idLabel,
+              onClick: () => choose('id'),
+            },
+            {
+              icon: 'passport',
+              title: strings.documentSelection.passportLabel,
+              onClick: () => choose('passport'),
+            },
+          ]}
+        />
+      </PrizmaListScreen>
+    );
+  },
+);
+IdCaptureDocumentSelectionScreen.displayName = 'IdCaptureDocumentSelectionScreen';
+
+export default IdCaptureDocumentSelectionScreen;

package/src/IdCaptureFlipScreen.tsx

@@ -0,0 +1,66 @@
+import React, { forwardRef } from 'react';
+import { PrizmaIllustrationIdFlip } from '@incodetech/prizma-core-web/illustration-id-flip';
+import { PrizmaResultScreen, type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { IdCaptureStrings } from './IdCaptureStrings';
+import './ScreenLayout.css';
+
+export interface IdCaptureFlipScreenProps
+  extends Omit<
+    PrizmaResultScreenProps,
+    'status' | 'title' | 'subtitle' | 'children' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `flip` slice. */
+  strings: IdCaptureStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * ID Capture — the flip interstitial between the two sides, built on the
+ * `PrizmaResultScreen` archetype (GUIDELINES.md §6-F).
+ * Figma: purple section `1-11-1-id-flip` of the `Flip ID` group.
+ *
+ * The module's shortest screen: the CONTENT frame holds only the H2 and the
+ * spinning-card artwork — no logo, and no CTA (the flow advances itself). The
+ * archetype covers it exactly: `status="none"` for the bare title, the artwork in
+ * `children`, no `ctaLabel` so no band is rendered, and `showHeader={false}` to
+ * drop the logo while still reserving the nav row so the offsets match every
+ * other screen (owner rule 2026-08-18).
+ *
+ * The artwork is Core's `PrizmaIllustrationIdFlip` in its `interstitial`
+ * variant — the card spinning inside the static circular arrows, which is
+ * exactly what this moment was designed for (see the component's own
+ * `interstitial` doc note, owner 2026-07-17). Never redrawn here (§7, §10).
+ */
+export const IdCaptureFlipScreen = forwardRef<HTMLDivElement, IdCaptureFlipScreenProps>(
+  (
+    {
+      strings,
+      screenId = 'id-capture-flip',
+      showHeader = false,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaResultScreen
+      ref={ref}
+      showHeader={showHeader}
+      title={strings.flip.title}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    >
+      <PrizmaIllustrationIdFlip variant="interstitial" />
+    </PrizmaResultScreen>
+  ),
+);
+IdCaptureFlipScreen.displayName = 'IdCaptureFlipScreen';
+
+export default IdCaptureFlipScreen;

package/src/IdCaptureHoldOnScreen.tsx

@@ -0,0 +1,51 @@
+import React, { forwardRef } from 'react';
+import { PrizmaResultScreen, type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { IdCaptureStrings } from './IdCaptureStrings';
+import './ScreenLayout.css';
+
+export interface IdCaptureHoldOnScreenProps
+  extends Omit<
+    PrizmaResultScreenProps,
+    'status' | 'title' | 'subtitle' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `holdOn` slice. */
+  strings: IdCaptureStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * ID Capture — server-side verification wait ("Hold on a sec…").
+ * Figma: purple sections `1-18-1-id-hold-on` and `1-4.1-1-id-hold-on`.
+ *
+ * The one screen in the module that is a pure Processing state (§6-C): the
+ * spinner + status copy centred in all remaining space, no capture frame, no
+ * CTA. Built on `PrizmaResultScreen` with `status="loading"` and no CTA label —
+ * the archetype renders no band at all in that case, so this is §6-C's layout
+ * reached through the same template as the module's other verdict screens
+ * instead of a hand-composed shell.
+ *
+ * The spinner is `PrizmaTitle`'s own `spinner` icon slot — the canonical
+ * `PrizmaLoadingSpinner` inside the component, never a new one (§3, §7).
+ */
+export const IdCaptureHoldOnScreen = forwardRef<HTMLDivElement, IdCaptureHoldOnScreenProps>(
+  ({ strings, screenId = 'id-capture-hold-on', overrides, onAction, ...shell }, ref) => (
+    <PrizmaResultScreen
+      ref={ref}
+      status="loading"
+      title={strings.holdOn.title}
+      subtitle={strings.holdOn.description}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    />
+  ),
+);
+IdCaptureHoldOnScreen.displayName = 'IdCaptureHoldOnScreen';
+
+export default IdCaptureHoldOnScreen;