@incodetech/prizma-core-screens 0.1.0

package/dist/VideoSelfieTutorialScreen.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { IconBankCard, IconIdFront, IconMessages, IconMicrophone, IconNumberedList, IconPassport, IconUser, IconWavingHand, } from '@incodetech/prizma-core-icons';
+import { PrizmaListItem } from '@incodetech/prizma-core-web/list';
+import { PrizmaListScreen } from './ListScreen';
+import './ScreenLayout.css';
+/**
+ * Journey beat → canonical bank glyph. ONE map, in one place — the same seven
+ * glyphs Core's `PrizmaStepper` carries (its icon set is documented as "the
+ * Video Selfie sequence"), so the tutorial promises exactly the steps the
+ * stepper later counts off. Nothing is drawn here (§10).
+ */
+const ROW_ICONS = {
+    recording: _jsx(IconMicrophone, { size: "m" }),
+    idFront: _jsx(IconIdFront, { size: "m" }),
+    idBack: _jsx(IconBankCard, { size: "m" }),
+    passport: _jsx(IconPassport, { size: "m" }),
+    frontCamera: _jsx(IconUser, { size: "m" }),
+    waveHand: _jsx(IconWavingHand, { size: "m" }),
+    questions: _jsx(IconNumberedList, { size: "m" }),
+    speak: _jsx(IconMessages, { size: "m" }),
+};
+/**
+ * Video Selfie — tutorial, built on the List archetype (GUIDELINES.md §6-G,
+ * `PrizmaListScreen`). Figma: purple sections `video selfie - tutorial 1.0`
+ * and `1.2 - with passport`.
+ *
+ * The screen is a title block over a promise list and one CTA, which is exactly
+ * archetype G: the rows are Core's `PrizmaListItem` (`icon-m`) verbatim (only
+ * the leading glyph is chosen here, from `ROW_ICONS`), the Spacing/24 above the
+ * list is the archetype's `__list`, and the band is the archetype's. This file
+ * declares no layout of its own.
+ *
+ * NOT archetype A: A centres one illustration in the flexible middle; here the
+ * middle is a seven-row list that must span the column and start at the top —
+ * the distinction `ScreenLayout.css` draws between `__flex` and `__list`.
+ */
+export const VideoSelfieTutorialScreen = forwardRef(({ strings, documentType = 'id', screenId = `video-selfie-tutorial-${documentType}`, overrides, onAction, ...shell }, ref) => (_jsx(PrizmaListScreen, { ref: ref, title: strings.tutorial.title, subtitle: strings.tutorial.subtitle, ctaLabel: strings.tutorial.ctaLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell, children: _jsx("ul", { className: "video-selfie-tutorial-list", children: strings.tutorial.rows[documentType].map((row) => (_jsx("li", { children: _jsx(PrizmaListItem, { variant: "icon-m", label: row.label, icon: ROW_ICONS[row.kind] }) }, row.kind))) }) })));
+VideoSelfieTutorialScreen.displayName = 'VideoSelfieTutorialScreen';
+export default VideoSelfieTutorialScreen;

package/dist/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/dist/ViewfinderScreen.d.ts

@@ -0,0 +1,40 @@
+import React, { type ReactNode } from 'react';
+import { type PrizmaCaptureOverlayShape, type PrizmaCaptureOverlayState } from './CaptureOverlay';
+import { 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 declare const PrizmaViewfinderScreen: React.ForwardRefExoticComponent<PrizmaViewfinderScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default PrizmaViewfinderScreen;

package/dist/ViewfinderScreen.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { IconLock, IconQuestionCircle } from '@incodetech/prizma-core-icons';
+import { PrizmaCaptureOverlay, } from './CaptureOverlay';
+import { PrizmaScreenShell } from './ScreenShell';
+import './ViewfinderScreen.css';
+import './ScreenLayout.css';
+/**
+ * @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(({ title, instruction, encryptedLabel, helpLabel, cameraSurface, overlayShape, overlayState, overlayContent, screenId, overrides, onAction, className, ...shell }, ref) => (_jsxs(PrizmaScreenShell, { ref: ref, dark: true, className: ['prizma-viewfinder', className ?? ''].filter(Boolean).join(' '), ...shell, children: [_jsx("div", { className: "prizma-viewfinder__surface", children: cameraSurface }), _jsxs("div", { className: [
+                'prizma-viewfinder__content',
+                overrides?.align === 'left' ? 'prizma-viewfinder__content--left' : '',
+            ]
+                .filter(Boolean)
+                .join(' '), children: [_jsxs("div", { className: "prizma-viewfinder__intro", children: [_jsx("h2", { className: "prizma-viewfinder__title", children: title }), instruction ? (_jsx("p", { className: "prizma-viewfinder__instruction", children: instruction })) : null] }), _jsx(PrizmaCaptureOverlay, { shape: overlayShape, state: overlayState, children: overlayContent }), encryptedLabel ? (_jsxs("div", { className: "prizma-viewfinder__encrypted", children: [_jsx(IconLock, { size: "s" }), _jsx("span", { children: encryptedLabel })] })) : null, _jsx("div", { className: "prizma-viewfinder__spacer" }), helpLabel ? (_jsx("button", { type: "button", className: "prizma-viewfinder__help", "aria-label": helpLabel, onClick: () => onAction?.({ type: 'help', screenId }), children: _jsx(IconQuestionCircle, { size: "m" }) })) : null] })] })));
+PrizmaViewfinderScreen.displayName = 'PrizmaViewfinderScreen';
+export default PrizmaViewfinderScreen;

package/dist/WatchlistBusinessFormScreen.d.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+import { 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 declare const WatchlistBusinessFormScreen: React.ForwardRefExoticComponent<WatchlistBusinessFormScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default WatchlistBusinessFormScreen;

package/dist/WatchlistBusinessFormScreen.js

@@ -0,0 +1,85 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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 } from './FormScreen';
+import './ScreenLayout.css';
+/**
+ * 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(({ 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 (_jsxs(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, children: [_jsx(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: true, 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 ? (_jsx(PrizmaCountryFlag, { country: {
+                            code: match.value,
+                            name: match.label,
+                            dialCode: '',
+                            flag: match.flag ?? '',
+                        } })) : null;
+                } }), _jsx(PrizmaTextField, { label: copy.businessName.label, placeholder: copy.businessName.placeholder, autoComplete: "organization", defaultValue: values?.businessName ?? '' }), _jsx(PrizmaTextField, { label: copy.taxId.label, placeholder: copy.taxId.placeholder, autoComplete: "off", autoCapitalize: "characters", spellCheck: false, defaultValue: values?.taxId ?? '' })] }));
+});
+WatchlistBusinessFormScreen.displayName = 'WatchlistBusinessFormScreen';
+export default WatchlistBusinessFormScreen;

package/dist/WatchlistBusinessProcessingScreen.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { 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 declare const WatchlistBusinessProcessingScreen: React.ForwardRefExoticComponent<WatchlistBusinessProcessingScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default WatchlistBusinessProcessingScreen;

package/dist/WatchlistBusinessProcessingScreen.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaProcessingScreen, } from './ProcessingScreen';
+import './ScreenLayout.css';
+/**
+ * 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(({ strings, screenId = 'watchlist-business-processing', overrides, onAction, ...shell }, ref) => (_jsx(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/dist/WatchlistBusinessStrings.d.ts

@@ -0,0 +1,95 @@
+/**
+ * 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/dist/WatchlistBusinessStrings.js

@@ -0,0 +1,19 @@
+// 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).
+export {};

package/dist/WatchlistBusinessSuccessScreen.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { 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 declare const WatchlistBusinessSuccessScreen: React.ForwardRefExoticComponent<WatchlistBusinessSuccessScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default WatchlistBusinessSuccessScreen;

package/dist/WatchlistBusinessSuccessScreen.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaProcessingScreen, } from './ProcessingScreen';
+import './ScreenLayout.css';
+/**
+ * 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(({ strings, screenId = 'watchlist-business-success', overrides, onAction, ...shell }, ref) => (_jsx(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;