@incodetech/prizma-core-screens 0.1.0

package/src/ViewfinderScreen.css

@@ -0,0 +1,107 @@
+/* ViewfinderScreen — Archetype D (GUIDELINES.md §6-D). Always dark; white
+ * copy over the camera surface. The rgba white literals are the Figma camera
+ * HUD treatment (verified absent from the token set — the camera stage sits
+ * outside the light/dark theming model). */
+
+.prizma-viewfinder__surface,
+.prizma-viewfinder__surface > img,
+.prizma-viewfinder__surface > video {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.prizma-viewfinder__content {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 0 var(--prizma-spacing-24) var(--prizma-spacing-24);
+  text-align: center;
+}
+
+.prizma-viewfinder__content--left {
+  text-align: left;
+}
+
+/* Title block bottom-anchored in the area above the capture window.
+ *
+ * `position: relative` + `z-index` is LOAD-BEARING, not tidying. When the stage
+ * runs `mode="overlay" scrim`, Core draws the veil as an absolutely positioned
+ * `.prizma-id-capture__scrim` carrying `box-shadow: rgba(20,21,26,.8) 0 0 0
+ * 3000px` — a dark wash that deliberately escapes its own frame to cover the
+ * whole screen. The scrim is a LATER SIBLING of this block inside
+ * `__content`, and a positioned sibling always paints over non-positioned
+ * content, so an unlifted title block sits UNDER an 80% veil: white copy
+ * rendering at ~20% and reading as dim grey (owner report 2026-09-03,
+ * Document Capture's camera stage).
+ *
+ * `__content` already carries `z-index: 1`, but that lifts it above the CAMERA
+ * SURFACE, not above its own descendants — the scrim is inside it.
+ *
+ * This is the same fix, for the same reason, that `.id-capture-band` makes in
+ * IdCaptureLayout.css; ID Capture's stage composes its own bands and so was
+ * never affected. Anything else that puts plain text beside a scrimmed stage
+ * needs it too. */
+.prizma-viewfinder__intro {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: var(--prizma-spacing-8);
+  padding-bottom: var(--prizma-spacing-24);
+  position: relative;
+  z-index: 1;
+}
+
+.prizma-viewfinder__title {
+  margin: 0;
+  color: #ffffff; /* hardcoded — camera HUD copy, always white, no token */
+  font-family: var(--prizma-headline-family);
+  font-size: var(--prizma-headline-h2-font-size);
+  font-weight: var(--prizma-headline-h2-font-weight);
+  line-height: var(--prizma-headline-h2-line-height);
+  letter-spacing: var(--prizma-headline-h2-letter-spacing);
+}
+
+.prizma-viewfinder__instruction {
+  margin: 0;
+  color: rgba(255, 255, 255, 0.6); /* hardcoded — camera HUD muted copy, no token */
+  font-size: var(--prizma-body-m-regular-font-size);
+  line-height: 1.4;
+}
+
+/* Lock + encrypted notice: 33px row under the capture window. */
+.prizma-viewfinder__encrypted {
+  height: 33px; /* hardcoded — Studio encrypted-row height (GUIDELINES §6-D) */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--prizma-spacing-4);
+  color: #ffffff; /* hardcoded — camera HUD copy, always white, no token */
+  font-size: var(--prizma-body-m-regular-font-size);
+}
+
+.prizma-viewfinder__content--left .prizma-viewfinder__encrypted {
+  justify-content: flex-start;
+}
+
+.prizma-viewfinder__spacer {
+  flex: 1;
+}
+
+/* Help control — bottom-right, 24/24 (GUIDELINES §6-D). */
+.prizma-viewfinder__help {
+  position: absolute;
+  right: var(--prizma-spacing-24);
+  bottom: var(--prizma-spacing-24);
+  display: flex;
+  padding: 0;
+  border: none;
+  background: none;
+  color: #ffffff; /* hardcoded — camera HUD control, always white, no token */
+  cursor: pointer;
+}

package/src/ViewfinderScreen.tsx

@@ -0,0 +1,113 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import { IconLock, IconQuestionCircle } from '@incodetech/prizma-core-icons';
+import {
+  PrizmaCaptureOverlay,
+  type PrizmaCaptureOverlayShape,
+  type PrizmaCaptureOverlayState,
+} from './CaptureOverlay';
+import { PrizmaScreenShell, type PrizmaScreenShellProps } from './ScreenShell';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import './ViewfinderScreen.css';
+import './ScreenLayout.css';
+
+export interface PrizmaViewfinderScreenProps
+  extends Omit<PrizmaScreenShellProps, 'dark' | 'title'> {
+  /** White H2 above the capture window. */
+  title: string;
+  /** Muted instruction line under the title. */
+  instruction?: string;
+  /** "Your data is encrypted" style notice under the window. */
+  encryptedLabel?: string;
+  /** Accessible name for the help control (i18n). Renders the help icon only
+   *  when provided. */
+  helpLabel?: string;
+  /** The camera surface behind the vignette — an <img> still or live <video>.
+   *  Hosts with a real camera pipeline inject their feed here. */
+  cameraSurface?: ReactNode;
+  /** Capture window geometry (landscape ID / portrait document / ring). */
+  overlayShape: PrizmaCaptureOverlayShape;
+  overlayState?: PrizmaCaptureOverlayState;
+  /** Content inside the transparent window (defaults to see-through). */
+  overlayContent?: ReactNode;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * @deprecated DO NOT USE — scheduled for removal. Compose Core's capture
+ * component inside a dark `PrizmaScreenShell` instead: `PrizmaIdCapture`
+ * (`mode="overlay"`, `scrim`) already owns the window, the tokenized scrim,
+ * the encrypted row and the help affordance, and `PrizmaCaptureManual`
+ * supplies the shutter. See `DocumentCaptureCaptureScreen` for the pattern.
+ *
+ * Archetype D was built on the deprecated `CaptureOverlay` (see that file) and
+ * re-implements three Core pieces. Zero modules use it. DEVIATIONS.md #F-26.
+ */
+export const PrizmaViewfinderScreen = forwardRef<HTMLDivElement, PrizmaViewfinderScreenProps>(
+  (
+    {
+      title,
+      instruction,
+      encryptedLabel,
+      helpLabel,
+      cameraSurface,
+      overlayShape,
+      overlayState,
+      overlayContent,
+      screenId,
+      overrides,
+      onAction,
+      className,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaScreenShell
+      ref={ref}
+      dark
+      className={['prizma-viewfinder', className ?? ''].filter(Boolean).join(' ')}
+      {...shell}
+    >
+      <div className="prizma-viewfinder__surface">{cameraSurface}</div>
+      <div
+        className={[
+          'prizma-viewfinder__content',
+          overrides?.align === 'left' ? 'prizma-viewfinder__content--left' : '',
+        ]
+          .filter(Boolean)
+          .join(' ')}
+      >
+        <div className="prizma-viewfinder__intro">
+          <h2 className="prizma-viewfinder__title">{title}</h2>
+          {instruction ? (
+            <p className="prizma-viewfinder__instruction">{instruction}</p>
+          ) : null}
+        </div>
+        <PrizmaCaptureOverlay shape={overlayShape} state={overlayState}>
+          {overlayContent}
+        </PrizmaCaptureOverlay>
+        {encryptedLabel ? (
+          <div className="prizma-viewfinder__encrypted">
+            <IconLock size="s" />
+            <span>{encryptedLabel}</span>
+          </div>
+        ) : null}
+        <div className="prizma-viewfinder__spacer" />
+        {helpLabel ? (
+          <button
+            type="button"
+            className="prizma-viewfinder__help"
+            aria-label={helpLabel}
+            onClick={() => onAction?.({ type: 'help', screenId })}
+          >
+            <IconQuestionCircle size="m" />
+          </button>
+        ) : null}
+      </div>
+    </PrizmaScreenShell>
+  ),
+);
+PrizmaViewfinderScreen.displayName = 'PrizmaViewfinderScreen';
+
+export default PrizmaViewfinderScreen;

package/src/WatchlistBusinessFormScreen.tsx

@@ -0,0 +1,176 @@
+import React, { forwardRef } from 'react';
+import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
+import { PrizmaDropdown } from '@incodetech/prizma-core-web/dropdown';
+import { PrizmaCountryFlag } from '@incodetech/prizma-core-web/combined';
+import { PrizmaFormScreen, type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type {
+  WatchlistBusinessCountry,
+  WatchlistBusinessFormState,
+  WatchlistBusinessFormValues,
+  WatchlistBusinessStrings,
+} from './WatchlistBusinessStrings';
+import './ScreenLayout.css';
+
+export interface WatchlistBusinessFormScreenProps
+  extends Omit<
+    PrizmaFormScreenProps,
+    | 'title'
+    | 'subtitle'
+    | 'ctaLabel'
+    | 'ctaDisabled'
+    | 'verifiedLabel'
+    | 'children'
+    | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `form` slice. */
+  strings: WatchlistBusinessStrings;
+  /** Which purple `watchlist.*` form section to render. Default `default`. */
+  state?: WatchlistBusinessFormState;
+  /** The selectable countries of registration. Runtime data, not copy. */
+  countries?: WatchlistBusinessCountry[];
+  /** The three field values. Empty fields fall back to their placeholders. */
+  values?: WatchlistBusinessFormValues;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Watchlist for Business — the lookup form, built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for both purple form sections (`watchlist.default` and
+ * `watchlist.filled`): measured against the 390 frames they share an identical
+ * skeleton — nav → Title (H2, no subtitle) → Spacing/32 → Country dropdown,
+ * Business Name and Tax ID at Spacing/16 → primary CTA → tag — and differ ONLY
+ * in field content and whether the CTA is live.
+ *
+ * Four things are deliberate, each one a lesson an earlier module paid for:
+ *
+ * 1. The fields DO carry visible labels. Figma draws "Country", "Business Name"
+ *    and "Tax ID" as real label rows above each field, so Core's `label` slot is
+ *    used — the inverse of the #PI-4 / #EI-2 reading, where the design drew no
+ *    label row and the copy had to ride `aria-label` (DEVIATIONS #WB-3).
+ * 2. Every field is UNCONTROLLED (`defaultValue` / `defaultValue` on the
+ *    dropdown). A screen is one static spec state, so no `onChange` is needed —
+ *    and Core's `readOnly`, the other way to make a field inert, paints the
+ *    DISABLED grey surface on states Figma draws white (DEVIATIONS #PI-6).
+ *    Neither section greys anything, so `disabled` is set nowhere.
+ * 3. The CTA state comes from the SECTION, not from the values: Figma greys
+ *    "Continue" on `default` and lights it on `filled` — and `filled` leaves Tax
+ *    ID empty, which is how we know the tax identifier does not gate the lookup
+ *    (DEVIATIONS #WB-2). Deriving `ctaDisabled` from the values would have
+ *    disagreed with the design.
+ * 4. The country flag is Core's canonical raster (24×18, radius 2) in the
+ *    dropdown's LEADING slot — `PrizmaCountryFlag` composed into
+ *    `PrizmaDropdown.renderLeading`, which exists for exactly this case and
+ *    names it in its own docstring. Never an emoji glyph pasted into the
+ *    option label: that renders at a different size on every OS, disappears
+ *    entirely on Windows Chrome (no regional-indicator flag font), and lands
+ *    inside the accessible label text instead of the decorative slot. The
+ *    #PI-3 note ("Core ships no flag primitive") predates the primitive and no
+ *    longer applies — `FormsChoiceScreen` and `FormsLongFormScreen` in this
+ *    same package already use it (DEVIATIONS #WB-4).
+ *
+ * The module declares no layout and no CSS of its own: three fields fit the 844
+ * frame comfortably, so archetype E's stack needs none of CURP's scroll rule
+ * (#CURP-1).
+ */
+export const WatchlistBusinessFormScreen = forwardRef<
+  HTMLDivElement,
+  WatchlistBusinessFormScreenProps
+>(
+  (
+    {
+      strings,
+      state = 'default',
+      countries = [],
+      values,
+      screenId = `watchlist-business-form-${state}`,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const copy = strings.form;
+    // `default` draws the CTA greyed, `filled` draws it live. The section is the
+    // spec, not the field contents (see note 3 above).
+    const empty = state === 'default';
+
+    // The label is the country NAME only. The flag is not part of it — it rides
+    // the dropdown's leading slot below, where Core paints the raster.
+    const options = countries.map((c) => ({
+      value: c.value,
+      label: c.label,
+    }));
+
+    return (
+      <PrizmaFormScreen
+        ref={ref}
+        title={copy.title}
+        subtitle={copy.subtitle}
+        ctaLabel={copy.ctaLabel}
+        ctaDisabled={empty}
+        ctaLoadingLabel={copy.ctaLoadingLabel}
+        /* Figma draws no verified tag on either form section, but GUIDELINES §1
+           and the standing owner rule (#F-30, #PI-8) keep header AND footer on
+           every non-capture screen — so nothing shifts between the form, the
+           spinner and the verdict. DEVIATIONS #WB-1. */
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={overrides}
+        onAction={onAction}
+        {...shell}
+      >
+        <PrizmaDropdown
+          label={copy.country.label}
+          placeholder={copy.country.placeholder}
+          options={options}
+          defaultValue={values?.country ?? null}
+          /* A country catalogue is long enough that Core's own search bar is
+             the right behaviour; no purple section draws the menu open, so
+             nothing about its appearance is being invented here. */
+          searchable
+          searchPlaceholder={copy.country.searchPlaceholder}
+          clearSearchLabel={copy.country.clearSearchLabel}
+          /* Core's canonical flag raster in the leading slot, in the closed
+             field and every menu row alike — the slot `renderLeading` exists
+             for, and what Figma draws ahead of "United States" (see note 4). */
+          renderLeading={(option) => {
+            const match = countries.find((c) => c.value === option.value);
+            return match ? (
+              <PrizmaCountryFlag
+                country={{
+                  code: match.value,
+                  name: match.label,
+                  dialCode: '',
+                  flag: match.flag ?? '',
+                }}
+              />
+            ) : null;
+          }}
+        />
+        <PrizmaTextField
+          label={copy.businessName.label}
+          placeholder={copy.businessName.placeholder}
+          autoComplete="organization"
+          defaultValue={values?.businessName ?? ''}
+        />
+        <PrizmaTextField
+          label={copy.taxId.label}
+          placeholder={copy.taxId.placeholder}
+          autoComplete="off"
+          autoCapitalize="characters"
+          spellCheck={false}
+          defaultValue={values?.taxId ?? ''}
+        />
+      </PrizmaFormScreen>
+    );
+  },
+);
+WatchlistBusinessFormScreen.displayName = 'WatchlistBusinessFormScreen';
+
+export default WatchlistBusinessFormScreen;

package/src/WatchlistBusinessProcessingScreen.tsx

@@ -0,0 +1,63 @@
+import React, { forwardRef } from 'react';
+import {
+  PrizmaProcessingScreen,
+  type PrizmaProcessingScreenProps,
+} from './ProcessingScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { WatchlistBusinessStrings } from './WatchlistBusinessStrings';
+import './ScreenLayout.css';
+
+export interface WatchlistBusinessProcessingScreenProps
+  extends Omit<
+    PrizmaProcessingScreenProps,
+    'status' | 'title' | 'subtitle' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `processing` slice. */
+  strings: WatchlistBusinessStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Watchlist for Business — the in-flight screen, built on the Processing
+ * archetype (GUIDELINES.md §6-C, `PrizmaProcessingScreen`).
+ *
+ * Figma: the purple `watchlist.processing` section — the spinner over "Processing…"
+ * with a supporting line, no button, tag anchored at the bottom. That is exactly
+ * the pure case §6-F reserves for C rather than the Result archetype.
+ *
+ * The subtitle is what visually separates this screen from `success`: the
+ * spinner carries a second line, the verdict does not.
+ */
+export const WatchlistBusinessProcessingScreen = forwardRef<
+  HTMLDivElement,
+  WatchlistBusinessProcessingScreenProps
+>(
+  (
+    {
+      strings,
+      screenId = 'watchlist-business-processing',
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaProcessingScreen
+      ref={ref}
+      status="loading"
+      title={strings.processing.title}
+      subtitle={strings.processing.subtitle}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    />
+  ),
+);
+WatchlistBusinessProcessingScreen.displayName = 'WatchlistBusinessProcessingScreen';
+
+export default WatchlistBusinessProcessingScreen;

package/src/WatchlistBusinessStrings.ts

@@ -0,0 +1,121 @@
+// Watchlist for Business — copy contract.
+//
+// Figma: `🔍 Watchlist business - Screens specs + Localization`
+// (BfHifNPAvPTpBlnMEDfg4J, page 5:13191). FOUR purple parent sections, all
+// under one `watchlist.*` family:
+//   watchlist.default    (7002:4494 → 7002:6018)  — the empty lookup form
+//   watchlist.filled     (7070:10549 → 7070:11692) — the same form carrying values
+//   watchlist.processing (5003:44743 → 5003:44744) — the spinner
+//   watchlist.success    (5003:44753 → 5003:44754) — the positive verdict
+//
+// The module screens a BUSINESS (not a person) against sanction / PEP / adverse
+// -media watchlists: the user picks the country of registration and supplies the
+// legal name and, optionally, the tax identifier; the lookup then runs and
+// reports back.
+//
+// No hardcoded English anywhere in a screen: every visible string arrives here,
+// so the host's locale pack drives the module (the Figma file ships ES + PT
+// columns beside the EN one).
+
+/**
+ * The two purple form sections. They draw the SAME layout — nav → Title (H2, no
+ * subtitle) → Spacing/32 → three LABELLED fields → CTA → tag — and differ only
+ * in field content and whether the CTA is live, which is exactly what
+ * GUIDELINES §6-E means by "states are separate screens sharing the identical
+ * layout":
+ * - `default` — every field empty (the country dropdown on its placeholder),
+ *   CTA greyed
+ * - `filled`  — country selected and business name typed, CTA live
+ *
+ * Note what `filled` does NOT do: it leaves **Tax ID empty** and still enables
+ * the CTA, so the tax identifier is optional and does not gate the lookup
+ * (DEVIATIONS #WB-2).
+ */
+export type WatchlistBusinessFormState = 'default' | 'filled';
+
+/**
+ * One selectable country of registration. Runtime data, never copy — the host
+ * owns the catalogue (a full ISO list is not a string table), exactly as Phone
+ * Input takes its dial codes as data.
+ */
+export interface WatchlistBusinessCountry {
+  /**
+   * Stable value. MUST be the ISO 3166-1 alpha-2 code ("US", "MX"): the screen
+   * feeds it to Core's `PrizmaCountryFlag`, which resolves the canonical
+   * 24×18 raster from the bundled flag bank by that code (DEVIATIONS #WB-4).
+   */
+  value: string;
+  /** The country name as drawn ("United States"). */
+  label: string;
+  /**
+   * FALLBACK ONLY — the emoji glyph Core falls back to when `value` is outside
+   * the bundled raster bank. It is never the primary treatment: the flag is
+   * drawn as Core's raster in the dropdown's leading slot, not pasted into the
+   * option label.
+   */
+  flag?: string;
+}
+
+/** The values the lookup form carries. Runtime data, never copy. */
+export interface WatchlistBusinessFormValues {
+  /** A `WatchlistBusinessCountry.value`. */
+  country?: string;
+  /** The registered legal name, as typed. */
+  businessName?: string;
+  /** The tax identifier, as typed. Optional — see `WatchlistBusinessFormState`. */
+  taxId?: string;
+}
+
+/** Copy for one labelled field of the lookup form. */
+export interface WatchlistBusinessFieldStrings {
+  /** Visible label above the field ("Business Name") — Figma draws a real label
+   *  row here, unlike Phone Input / Email Input / CURP-enter, so Core's visible
+   *  `label` slot is used rather than `aria-label` (DEVIATIONS #WB-3). */
+  label: string;
+  /** Placeholder inside the field. The two text fields draw none. */
+  placeholder?: string;
+}
+
+export interface WatchlistBusinessStrings {
+  /** "verified by" attribution in the footer tag. */
+  verifiedLabel: string;
+  /** Accessible name for the logo nav row. */
+  navLabel?: string;
+
+  /** watchlist.{default,filled} */
+  form: {
+    /** H2 ("Watchlist for business"). */
+    title: string;
+    /** H5 — the purple sections draw none, kept for hosts that want one. */
+    subtitle?: string;
+    country: WatchlistBusinessFieldStrings & {
+      /** Search placeholder inside the open menu. */
+      searchPlaceholder?: string;
+      /** Accessible name for the menu's search-clear button. */
+      clearSearchLabel?: string;
+    };
+    businessName: WatchlistBusinessFieldStrings;
+    taxId: WatchlistBusinessFieldStrings;
+    /** Primary CTA ("Continue"). */
+    ctaLabel: string;
+    /** Accessible busy label, for hosts that keep the user on the form while
+     *  the lookup runs instead of moving to the spinner screen. */
+    ctaLoadingLabel?: string;
+  };
+
+  /** watchlist.processing — the spinner while the lookup runs. */
+  processing: {
+    /** H2 ("Processing…"). */
+    title: string;
+    /** H5 ("This won't take long."). */
+    subtitle?: string;
+  };
+
+  /** watchlist.success — the positive verdict. Figma draws NO button. */
+  success: {
+    /** H2 ("Success!"). */
+    title: string;
+    /** H5 — the section draws none, kept for hosts that want one. */
+    subtitle?: string;
+  };
+}

package/src/WatchlistBusinessSuccessScreen.tsx

@@ -0,0 +1,67 @@
+import React, { forwardRef } from 'react';
+import {
+  PrizmaProcessingScreen,
+  type PrizmaProcessingScreenProps,
+} from './ProcessingScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { WatchlistBusinessStrings } from './WatchlistBusinessStrings';
+import './ScreenLayout.css';
+
+export interface WatchlistBusinessSuccessScreenProps
+  extends Omit<
+    PrizmaProcessingScreenProps,
+    'status' | 'title' | 'subtitle' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `success` slice. */
+  strings: WatchlistBusinessStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Watchlist for Business — the positive verdict, built on the Processing
+ * archetype (GUIDELINES.md §6-C, `PrizmaProcessingScreen`).
+ *
+ * Figma: the purple `watchlist.success` section — the status mark over
+ * "Success!", **no button**, no supporting line, tag anchored at the bottom.
+ * Because it draws no CTA it stays on C, not on the Result archetype: §6-F
+ * reserves C for exactly the pure no-button case, and Email Input's success
+ * already set that precedent against Phone Input's buttoned one (DEVIATIONS
+ * #EI-4).
+ *
+ * The mark is Core's outline status icon via `PrizmaTitle`'s icon slot — this
+ * module's Figma still draws the two-tone filled disc, one icon sweep behind
+ * (DEVIATIONS #15, unchanged here).
+ */
+export const WatchlistBusinessSuccessScreen = forwardRef<
+  HTMLDivElement,
+  WatchlistBusinessSuccessScreenProps
+>(
+  (
+    {
+      strings,
+      screenId = 'watchlist-business-success',
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaProcessingScreen
+      ref={ref}
+      status="success"
+      title={strings.success.title}
+      subtitle={strings.success.subtitle}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    />
+  ),
+);
+WatchlistBusinessSuccessScreen.displayName = 'WatchlistBusinessSuccessScreen';
+
+export default WatchlistBusinessSuccessScreen;