@incodetech/prizma-core-screens 0.1.0

package/dist/DocumentCaptureStrings.d.ts

@@ -0,0 +1,158 @@
+/**
+ * Which purple `documentCapture.tutorial.*` intro variant to render. They are
+ * copy variants of ONE screen (DocumentCaptureTutorialScreen) — the layout is
+ * identical; only the subtitle and the CTA label change with the capture
+ * methods the session enables.
+ */
+export type DocumentCaptureTutorialVariant = 
+/** `tutorial.default` — camera AND upload allowed ("Continue"). */
+'default'
+/** `tutorial.captureOnly` — camera only ("Capture document"). */
+ | 'captureOnly'
+/** `tutorial.uploadOnly` — upload only ("Upload document"). */
+ | 'uploadOnly';
+/**
+ * Which `documentCapture.tutorial.methodSelection*` sheet to render.
+ *
+ *   web          — the 2-row menu: Take photo · Upload document (menu-list-2)
+ *   native       — the 3-row menu: Take photo · Camera roll · Choose file
+ *                  (menu-list-3)
+ *   nativeUpload — the same native menu with the camera row DROPPED, so 2 rows:
+ *                  Camera roll · Choose file (menu-list-2)
+ *
+ * `nativeUpload` has no purple spec section of its own. It comes off the iOS
+ * full flow (`cbFXiChmJ8cWQDHwVghBqJ`, node 4415:38025), where the upload-only
+ * leg presents a `methodSelectionNative` instance whose sheet measures 206 tall
+ * against the spec'd 262 — exactly one row less, with "Take photo" hidden,
+ * because a session that does not allow the camera cannot offer it. The flow is
+ * right and the spec set is one variant short; recorded as such rather than
+ * quietly rendering the 3-row sheet in a flow that forbids the camera.
+ * Flagged for the owner: 2026-09-02, Camila.
+ */
+export type DocumentCaptureMethodSelectionVariant = 'web' | 'native' | 'nativeUpload';
+/**
+ * The three purple states shared by `confirmImage.*` and `confirmUpload.*`.
+ * Identical layout, identical stage — only the header block (title vs loading
+ * bar), the stage verdict and the CTA row change.
+ */
+export type DocumentCaptureConfirmStage = 'review' | 'analyzing' | 'success';
+/** One `commonIssues` row: an H5 title + a Body/M description. */
+export interface DocumentCaptureIssueStrings {
+    title: string;
+    description?: string;
+}
+export interface DocumentCaptureStrings {
+    /** Accessible name for the logo nav region (i18n — no baked-in English). */
+    navLabel?: string;
+    /** "verified by" attribution copy for the footer tag. */
+    verifiedLabel: string;
+    /** "All data is encrypted" reassurance row under every capture / review
+     *  stage. Omit to drop the row (Core's `showEncryptedLabel` boolean). */
+    encryptedLabel?: string;
+    /** documentCapture.tutorial.default / .captureOnly / .uploadOnly — the
+     *  subtitle and CTA label are per-variant; everything else is shared. */
+    tutorial: {
+        title: string;
+        /** Per-variant description (H5). */
+        subtitle: Record<DocumentCaptureTutorialVariant, string>;
+        /** Per-variant primary CTA ("Continue" / "Capture document" / …). */
+        ctaLabel: Record<DocumentCaptureTutorialVariant, string>;
+        /** Tertiary link under the CTA ("Skip this step"). Omit to drop it. */
+        skipLabel?: string;
+    };
+    /** documentCapture.tutorial.methodSelectionWeb / .methodSelectionNative —
+     *  the action rows of the capture-method sheet. `web` shows the first two,
+     *  `native` all three. */
+    methodSelection: {
+        /** Accessible name of the sheet (Core requires it on the menu variants). */
+        sheetLabel: string;
+        /** "Take photo" */
+        takePhotoLabel: string;
+        /** "Upload document" (web) */
+        uploadLabel: string;
+        /** "Choose from camera roll" (native only) */
+        cameraRollLabel: string;
+        /** "Choose file" (native only) */
+        chooseFileLabel: string;
+    };
+    /** documentCapture.commonIssues.default */
+    commonIssues: {
+        title: string;
+        /** The four rows, in Figma order: out of frame · folded · shadows ·
+         *  dirty lens. Icons come from the canonical bank, not from copy
+         *  (DEVIATIONS.md #DC-23). */
+        issues: readonly DocumentCaptureIssueStrings[];
+        /** "Try again" */
+        ctaLabel: string;
+    };
+    /** documentCapture.nextPage.optional / .mandatory */
+    nextPage: {
+        title: string;
+        /** `optional` subtitle ("If there's another page…"). */
+        subtitle: string;
+        /** `mandatory` subtitle ("Take a photo of the next page to continue."). */
+        mandatorySubtitle: string;
+        /** "Next page" */
+        ctaLabel: string;
+        /** "All pages captured" — the tertiary link, `optional` only. */
+        doneLabel?: string;
+    };
+    /** documentCapture.capture.default / .filled — the dark camera stage. */
+    capture: {
+        /** White H2 above the frame ("Show your full document"). */
+        title: string;
+        /** Muted instruction under it. */
+        subtitle?: string;
+        /** Accessible name of the shutter button. */
+        captureLabel: string;
+        /** Accessible name of the "?" help control. */
+        helpLabel: string;
+    };
+    /** documentCapture.confirmImage.reviewPhoto / .analyzing / .success */
+    confirmImage: {
+        /** `review` title ("Review your document"). */
+        title: string;
+        /** `review` description. */
+        subtitle?: string;
+        /** Loading-bar caption on `analyzing` ("Analyzing..."). */
+        analyzingLabel: string;
+        /** H2 on `success` ("Successfully processed!"). */
+        successTitle: string;
+        /** Secondary CTA on `review` ("Replace"). */
+        replaceLabel: string;
+        /** Primary CTA on `review` / `success` ("Continue"). */
+        ctaLabel: string;
+    };
+    /** documentCapture.confirmUpload.reviewFile / .analyzing / .success */
+    confirmUpload: {
+        /** `review` title ("Review your document"). */
+        title: string;
+        /** `review` description. */
+        subtitle?: string;
+        /** Loading-bar caption on `analyzing` ("Uploading..."). */
+        analyzingLabel: string;
+        /** H2 on `success` ("Successfully processed!"). */
+        successTitle: string;
+        /** Secondary CTA on `review` ("Replace"). */
+        replaceLabel: string;
+        /** Primary CTA on `review` / `success` ("Continue"). */
+        ctaLabel: string;
+    };
+    /** documentCapture.errors.genericError / .genericErrorExhausted — the host
+     *  passes the copy of the CURRENT verdict; the exhausted variant changes
+     *  icon + copy + CTA through the same slice. */
+    error: {
+        title: string;
+        description?: string;
+        /** "2 attempts remaining" — omit on the exhausted variant. */
+        attemptsLabel?: string;
+        /** "Recapture document" / "Continue" */
+        ctaLabel: string;
+    };
+    /** documentCapture.errors.noConnection */
+    noConnection: {
+        title: string;
+        description?: string;
+        ctaLabel: string;
+    };
+}

package/dist/DocumentCaptureStrings.js

@@ -0,0 +1,21 @@
+// Document Capture module — copy contract.
+//
+// Every Document Capture screen receives the SAME
+// `strings: DocumentCaptureStrings` object (rule: all copy via props, no
+// hardcoded English — GUIDELINES.md §9). The object is the module's locale
+// pack: one instance drives the whole flow, which is what the FlowPlayer steps
+// through. Sample copy lives only in previews / host apps.
+//
+// Authoritative screen list: the PURPLE "screen specs" sections of the
+// Document Capture Figma file (cbFXiChmJ8cWQDHwVghBqJ, page 4094:15561) —
+// tutorial (4 purple variants + 3 method-selection variants) · commonIssues ·
+// nextPage (optional / mandatory) · capture (default / filled) · confirmImage
+// (reviewPhoto / analyzing / success) · confirmUpload (reviewFile / analyzing /
+// success + 2 native picker specs) · errors (noConnection / genericError /
+// genericErrorExhausted).
+//
+// FOUR purple variants document OS-NATIVE chrome, not Prizma screens, and are
+// therefore NOT part of this contract (DEVIATIONS.md #DC-20):
+// `tutorial.uploadOnlySelector`, `tutorial.nativeMethodSelectionOnWeb`,
+// `upload.selectFromLibrary`, `upload.selectFromFiles`.
+export {};

package/dist/DocumentCaptureTutorialScreen.d.ts

@@ -0,0 +1,36 @@
+import React, { type ReactNode } from 'react';
+import { type PrizmaTutorialScreenProps } from './TutorialScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { DocumentCaptureStrings, DocumentCaptureTutorialVariant } from './DocumentCaptureStrings';
+import './ScreenLayout.css';
+export interface DocumentCaptureTutorialScreenProps extends Omit<PrizmaTutorialScreenProps, 'title' | 'subtitle' | 'ctaLabel' | 'linkLabel' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `tutorial` slice (+ shared labels). */
+    strings: DocumentCaptureStrings;
+    /** Which purple `documentCapture.tutorial.*` intro section to render. */
+    variant?: DocumentCaptureTutorialVariant;
+    /** Replace the module's document illustration. */
+    illustration?: ReactNode;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * Document Capture — tutorial, built on the `PrizmaTutorialScreen` archetype
+ * (GUIDELINES.md §6-A). Figma: purple sections
+ * `documentCapture.tutorial.default` / `.captureOnly` / `.uploadOnly` — copy
+ * variants of this ONE screen (subtitle + CTA label).
+ *
+ * Measured off the 390 sections (CONTENT 654 tall, `px-24 py-8`):
+ * nav 8→52 · Title 68→127 (nav + Spacing/24) · illustration container flexes ·
+ * CTAs 472→646 = primary + the "Skip this step" tertiary link + Tag.
+ *
+ * There is NO disclaimer on any Document Capture tutorial variant — the slot
+ * GUIDELINES §6-A reserves is simply unused.
+ *
+ * It used to hand-build the shell because the archetype hardcoded a single
+ * `PrizmaButton` with no link slot. The archetype now carries `linkLabel` (#F-32);
+ * the link's gap above the tag comes from the band's flat Spacing/16 rather than
+ * `PrizmaButtonGroup`'s Spacing/12, a 4px consolidation logged as #F-32.
+ */
+export declare const DocumentCaptureTutorialScreen: React.ForwardRefExoticComponent<DocumentCaptureTutorialScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default DocumentCaptureTutorialScreen;

package/dist/DocumentCaptureTutorialScreen.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaTutorialScreen } from './TutorialScreen';
+import { DocumentCaptureIllustration } from './DocumentCaptureIllustration';
+import './ScreenLayout.css';
+/**
+ * Document Capture — tutorial, built on the `PrizmaTutorialScreen` archetype
+ * (GUIDELINES.md §6-A). Figma: purple sections
+ * `documentCapture.tutorial.default` / `.captureOnly` / `.uploadOnly` — copy
+ * variants of this ONE screen (subtitle + CTA label).
+ *
+ * Measured off the 390 sections (CONTENT 654 tall, `px-24 py-8`):
+ * nav 8→52 · Title 68→127 (nav + Spacing/24) · illustration container flexes ·
+ * CTAs 472→646 = primary + the "Skip this step" tertiary link + Tag.
+ *
+ * There is NO disclaimer on any Document Capture tutorial variant — the slot
+ * GUIDELINES §6-A reserves is simply unused.
+ *
+ * It used to hand-build the shell because the archetype hardcoded a single
+ * `PrizmaButton` with no link slot. The archetype now carries `linkLabel` (#F-32);
+ * the link's gap above the tag comes from the band's flat Spacing/16 rather than
+ * `PrizmaButtonGroup`'s Spacing/12, a 4px consolidation logged as #F-32.
+ */
+export const DocumentCaptureTutorialScreen = forwardRef(({ strings, variant = 'default', illustration, screenId = `document-capture-tutorial-${variant}`, overrides, onAction, ...shell }, ref) => (_jsx(PrizmaTutorialScreen, { ref: ref, title: strings.tutorial.title, subtitle: strings.tutorial.subtitle[variant], ctaLabel: strings.tutorial.ctaLabel[variant], linkLabel: strings.tutorial.skipLabel, illustration: illustration ?? _jsx(DocumentCaptureIllustration, {}), verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: overrides, onAction: onAction, ...shell })));
+DocumentCaptureTutorialScreen.displayName = 'DocumentCaptureTutorialScreen';
+export default DocumentCaptureTutorialScreen;

package/dist/EkybAddressDetailsScreen.d.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+import { type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { EkybAddressState, EkybAddressValues, EkybOption, EkybStrings } from './EkybStrings';
+import './ScreenLayout.css';
+export interface EkybAddressDetailsScreenProps extends Omit<PrizmaFormScreenProps, 'title' | 'subtitle' | 'ctaLabel' | 'ctaLoading' | 'ctaLoadingLabel' | 'verifiedLabel' | 'children' | 'navLabel' | 'linkLabel' | 'linkContent' | 'progress' | 'scrollFields'> {
+    /** Module copy — this screen reads the `address` slice. */
+    strings: EkybStrings;
+    /** Which address section to render. Default `empty`. */
+    state?: EkybAddressState;
+    /** The six field values. Empty renders the resting empty field. */
+    values?: EkybAddressValues;
+    /** The selectable states/provinces. Runtime data, not copy — a jurisdiction
+     *  catalogue, never a string table. */
+    states?: EkybOption[];
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * eKYB — step 2 of the wizard, the registered address, built on the Form
+ * archetype (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for both sections of the SECOND `eKYB.Bdetails` purple parent
+ * (6340:32594): `empty` (6340:50731) and `filled` (6340:38197). They share an
+ * identical skeleton — nav → Title (H2 + H5) → Spacing/32 → six labelled fields
+ * at Spacing/16 → "Continue" → "Back" → tag — and differ ONLY in field content.
+ *
+ * Four things are deliberate:
+ *
+ * 1. The stack SCROLLS inside the content column — now through the archetype's
+ *    own `scrollFields` prop, not a module stylesheet. The Figma frame is
+ *    1128–1158 tall (six labelled fields are 548 on their own); a 390×844
+ *    screen never reflows (#17), and without the release the surplus paints
+ *    over the CTA. The module used to hand-roll `overflow-y: auto` in
+ *    `EkybLayout.css`; five Wave-3 modules hit the same wall, the archetype
+ *    absorbed it (DEVIATIONS #DSC-2), and that file is now deleted. The
+ *    archetype's variant also carries the Spacing/16 margin that keeps the
+ *    clipped column clear of the CTA rather than sliced against it.
+ * 2. Every field is UNCONTROLLED (`defaultValue`) — a screen is one static spec
+ *    state, and Core's `readOnly` would grey a surface Figma draws white
+ *    (#PI-6). Neither section greys anything, so nothing is `disabled`.
+ * 3. "Address line 2" is the ONE optional field of the page: Figma draws no `*`
+ *    on it, so it alone renders no `requiredHint`.
+ * 4. "Back" is composed into the archetype's `linkContent` slot as a Core
+ *    `secondary` button — the #CURP-2 precedent — so it stays a distinct
+ *    `secondary` action and sits BELOW the primary (#GEO-1).
+ *
+ * NOTE on `filled`: 6340:38197 leaves the REQUIRED "State" dropdown on its
+ * "Select state" placeholder while all five text fields carry values. That is
+ * built as drawn rather than silently corrected, and reported as a Figma
+ * self-contradiction (the #CURP-4 class of finding) — a host that passes
+ * `values.state` gets the selected row.
+ *
+ * The three-segment journey bar (6384:86825 / 6340:66380 — segment 1 pale,
+ * segment 2 solid, segment 3 grey) is Core's `PrizmaStepper` at
+ * `currentState={2}`, composed into the archetype's `progress` slot. This is
+ * step 2 of 3.
+ */
+export declare const EkybAddressDetailsScreen: React.ForwardRefExoticComponent<EkybAddressDetailsScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default EkybAddressDetailsScreen;

package/dist/EkybAddressDetailsScreen.js

@@ -0,0 +1,63 @@
+'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 { PrizmaButton } from '@incodetech/prizma-core-web/button';
+import { PrizmaStepper } from '@incodetech/prizma-core-web/stepper';
+import { PrizmaFormScreen } from './FormScreen';
+import './ScreenLayout.css';
+/**
+ * eKYB — step 2 of the wizard, the registered address, built on the Form
+ * archetype (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for both sections of the SECOND `eKYB.Bdetails` purple parent
+ * (6340:32594): `empty` (6340:50731) and `filled` (6340:38197). They share an
+ * identical skeleton — nav → Title (H2 + H5) → Spacing/32 → six labelled fields
+ * at Spacing/16 → "Continue" → "Back" → tag — and differ ONLY in field content.
+ *
+ * Four things are deliberate:
+ *
+ * 1. The stack SCROLLS inside the content column — now through the archetype's
+ *    own `scrollFields` prop, not a module stylesheet. The Figma frame is
+ *    1128–1158 tall (six labelled fields are 548 on their own); a 390×844
+ *    screen never reflows (#17), and without the release the surplus paints
+ *    over the CTA. The module used to hand-roll `overflow-y: auto` in
+ *    `EkybLayout.css`; five Wave-3 modules hit the same wall, the archetype
+ *    absorbed it (DEVIATIONS #DSC-2), and that file is now deleted. The
+ *    archetype's variant also carries the Spacing/16 margin that keeps the
+ *    clipped column clear of the CTA rather than sliced against it.
+ * 2. Every field is UNCONTROLLED (`defaultValue`) — a screen is one static spec
+ *    state, and Core's `readOnly` would grey a surface Figma draws white
+ *    (#PI-6). Neither section greys anything, so nothing is `disabled`.
+ * 3. "Address line 2" is the ONE optional field of the page: Figma draws no `*`
+ *    on it, so it alone renders no `requiredHint`.
+ * 4. "Back" is composed into the archetype's `linkContent` slot as a Core
+ *    `secondary` button — the #CURP-2 precedent — so it stays a distinct
+ *    `secondary` action and sits BELOW the primary (#GEO-1).
+ *
+ * NOTE on `filled`: 6340:38197 leaves the REQUIRED "State" dropdown on its
+ * "Select state" placeholder while all five text fields carry values. That is
+ * built as drawn rather than silently corrected, and reported as a Figma
+ * self-contradiction (the #CURP-4 class of finding) — a host that passes
+ * `values.state` gets the selected row.
+ *
+ * The three-segment journey bar (6384:86825 / 6340:66380 — segment 1 pale,
+ * segment 2 solid, segment 3 grey) is Core's `PrizmaStepper` at
+ * `currentState={2}`, composed into the archetype's `progress` slot. This is
+ * step 2 of 3.
+ */
+export const EkybAddressDetailsScreen = forwardRef(({ strings, state = 'empty', values, states = [], screenId = `ekyb-address-${state}`, className, overrides, onAction, ...shell }, ref) => {
+    const copy = strings.address;
+    return (_jsxs(PrizmaFormScreen, { ref: ref, className: ['ekyb-address', className].filter(Boolean).join(' '), 
+        /* The archetype's own scrolling field stack — the six-field column is
+           548 tall against a middle that cannot be. No module CSS. */
+        scrollFields: true, 
+        /* Step 2 of 3. `showIcons={false}`: the eKYB bar is a bare 5px rail. */
+        progress: _jsx(PrizmaStepper, { steps: 3, currentState: 2, showIcons: false, "aria-label": strings.stepperLabel }), title: copy.title, subtitle: copy.subtitle, ctaLabel: copy.ctaLabel, linkContent: _jsx(PrizmaButton, { variant: "secondary", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: strings.backLabel }), verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: { align: overrides?.align ?? 'left', logo: overrides?.logo }, onAction: onAction, ...shell, children: [_jsx(PrizmaTextField, { label: copy.street.label, placeholder: copy.street.placeholder, required: true, requiredHint: strings.requiredHint, autoComplete: "off", defaultValue: values?.street ?? '' }), _jsx(PrizmaTextField, { label: copy.houseNumber.label, placeholder: copy.houseNumber.placeholder, required: true, requiredHint: strings.requiredHint, autoComplete: "off", defaultValue: values?.houseNumber ?? '' }), _jsx(PrizmaTextField, { label: copy.addressLine2.label, placeholder: copy.addressLine2.placeholder, autoComplete: "off", defaultValue: values?.addressLine2 ?? '' }), _jsx(PrizmaTextField, { label: copy.city.label, placeholder: copy.city.placeholder, required: true, requiredHint: strings.requiredHint, autoComplete: "off", defaultValue: values?.city ?? '' }), _jsx(PrizmaDropdown, { label: copy.state.label, placeholder: copy.state.placeholder, required: true, requiredHint: strings.requiredHint, options: states, 
+                /* Both sections draw the placeholder unless the host supplies a
+                   value — see the docstring note on 6340:38197. */
+                defaultValue: values?.state ?? null }), _jsx(PrizmaTextField, { label: copy.postalCode.label, placeholder: copy.postalCode.placeholder, required: true, requiredHint: strings.requiredHint, autoComplete: "off", defaultValue: values?.postalCode ?? '' })] }));
+});
+EkybAddressDetailsScreen.displayName = 'EkybAddressDetailsScreen';
+export default EkybAddressDetailsScreen;

package/dist/EkybBusinessDetailsScreen.d.ts

@@ -0,0 +1,55 @@
+import React from 'react';
+import { type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { EkybBusinessState, EkybBusinessValues, EkybStrings } from './EkybStrings';
+import './ScreenLayout.css';
+export interface EkybBusinessDetailsScreenProps extends Omit<PrizmaFormScreenProps, 'title' | 'subtitle' | 'ctaLabel' | 'ctaLoading' | 'ctaLoadingLabel' | 'verifiedLabel' | 'children' | 'navLabel' | 'linkLabel' | 'linkContent' | 'progress'> {
+    /** Module copy — this screen reads the `business` slice. */
+    strings: EkybStrings;
+    /** Which purple `eKYB.Bdetails.*` section to render. Default `empty`. */
+    state?: EkybBusinessState;
+    /** The two field values. Empty renders the resting empty field. */
+    values?: EkybBusinessValues;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * eKYB — step 1 of the wizard, the company's identity, built on the Form
+ * archetype (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for both purple `eKYB.Bdetails.*` sections (`empty` 2115:21864,
+ * `filled` 5663:83132): measured against the 390 frames they share an identical
+ * skeleton — nav → Title (H2 + H5) → Spacing/32 → two labelled fields at
+ * Spacing/16 → "Continue" → "Back" → tag — and differ ONLY in field content.
+ *
+ * Three things are deliberate, each a lesson an earlier module paid for:
+ *
+ * 1. The fields are UNCONTROLLED (`defaultValue`). A screen is one static spec
+ *    state, so no `onChange` is needed — and Core's `readOnly`, the other way to
+ *    freeze a field, paints the DISABLED grey surface on sections Figma draws
+ *    white (DEVIATIONS #PI-6). Neither section greys anything, so nothing here
+ *    is `disabled`.
+ * 2. Figma draws no placeholders on these fields — the label row carries the
+ *    meaning — so `empty` really is a blank field, not a hinted one.
+ * 3. "Back" is a full-width OUTLINED `secondary` button under the primary.
+ *    Archetype E has no `secondaryCtaLabel` slot (archetype F does), so it is
+ *    composed into the archetype's `linkContent` slot exactly as CURP does
+ *    (DEVIATIONS #CURP-2): no primitive invented, no layout declared, the
+ *    action stays a distinct `secondary` event, and it lands BELOW the primary,
+ *    which is both what Figma draws and what #GEO-1 requires.
+ *
+ * The required asterisk is Core's `requiredHint` suffix on a `required` field —
+ * the label rows Figma draws as "Business name *" / "Tax ID *" — so the marker
+ * stays localizable and is never baked into the label string.
+ *
+ * The three-segment journey bar Figma draws between the nav and the title is
+ * Core's own `PrizmaStepper` in the archetype's `progress` slot — the slot
+ * archetype E gained for eKYC (DEVIATIONS #EK-1) and the fix for the QA finding
+ * that the wizard shipped with no progress signal. This is step 1 of 3, so the
+ * bar is at `currentState="Start"`: segment 1 filled, segments 2 and 3 grey,
+ * exactly what 5919:68599 renders. Both offsets around it live in
+ * `ScreenLayout.css`, never here.
+ */
+export declare const EkybBusinessDetailsScreen: React.ForwardRefExoticComponent<EkybBusinessDetailsScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default EkybBusinessDetailsScreen;

package/dist/EkybBusinessDetailsScreen.js

@@ -0,0 +1,57 @@
+'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 { PrizmaButton } from '@incodetech/prizma-core-web/button';
+import { PrizmaStepper } from '@incodetech/prizma-core-web/stepper';
+import { PrizmaFormScreen } from './FormScreen';
+import './ScreenLayout.css';
+/**
+ * eKYB — step 1 of the wizard, the company's identity, built on the Form
+ * archetype (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for both purple `eKYB.Bdetails.*` sections (`empty` 2115:21864,
+ * `filled` 5663:83132): measured against the 390 frames they share an identical
+ * skeleton — nav → Title (H2 + H5) → Spacing/32 → two labelled fields at
+ * Spacing/16 → "Continue" → "Back" → tag — and differ ONLY in field content.
+ *
+ * Three things are deliberate, each a lesson an earlier module paid for:
+ *
+ * 1. The fields are UNCONTROLLED (`defaultValue`). A screen is one static spec
+ *    state, so no `onChange` is needed — and Core's `readOnly`, the other way to
+ *    freeze a field, paints the DISABLED grey surface on sections Figma draws
+ *    white (DEVIATIONS #PI-6). Neither section greys anything, so nothing here
+ *    is `disabled`.
+ * 2. Figma draws no placeholders on these fields — the label row carries the
+ *    meaning — so `empty` really is a blank field, not a hinted one.
+ * 3. "Back" is a full-width OUTLINED `secondary` button under the primary.
+ *    Archetype E has no `secondaryCtaLabel` slot (archetype F does), so it is
+ *    composed into the archetype's `linkContent` slot exactly as CURP does
+ *    (DEVIATIONS #CURP-2): no primitive invented, no layout declared, the
+ *    action stays a distinct `secondary` event, and it lands BELOW the primary,
+ *    which is both what Figma draws and what #GEO-1 requires.
+ *
+ * The required asterisk is Core's `requiredHint` suffix on a `required` field —
+ * the label rows Figma draws as "Business name *" / "Tax ID *" — so the marker
+ * stays localizable and is never baked into the label string.
+ *
+ * The three-segment journey bar Figma draws between the nav and the title is
+ * Core's own `PrizmaStepper` in the archetype's `progress` slot — the slot
+ * archetype E gained for eKYC (DEVIATIONS #EK-1) and the fix for the QA finding
+ * that the wizard shipped with no progress signal. This is step 1 of 3, so the
+ * bar is at `currentState="Start"`: segment 1 filled, segments 2 and 3 grey,
+ * exactly what 5919:68599 renders. Both offsets around it live in
+ * `ScreenLayout.css`, never here.
+ */
+export const EkybBusinessDetailsScreen = forwardRef(({ strings, state = 'empty', values, screenId = `ekyb-business-${state}`, overrides, onAction, ...shell }, ref) => {
+    const copy = strings.business;
+    return (_jsxs(PrizmaFormScreen, { ref: ref, 
+        /* Step 1 of 3. `showIcons={false}` because the eKYB frames draw the bar
+           as a bare 5px rail with no glyph row. */
+        progress: _jsx(PrizmaStepper, { steps: 3, currentState: "Start", showIcons: false, "aria-label": strings.stepperLabel }), title: copy.title, subtitle: copy.subtitle, ctaLabel: copy.ctaLabel, linkContent: _jsx(PrizmaButton, { variant: "secondary", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: strings.backLabel }), verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, 
+        /* Left-aligned title block, the alignment every eKYB frame draws; a host
+           `align` still wins (#GEO-2). */
+        overrides: { align: overrides?.align ?? 'left', logo: overrides?.logo }, onAction: onAction, ...shell, children: [_jsx(PrizmaTextField, { label: copy.businessName.label, placeholder: copy.businessName.placeholder, required: true, requiredHint: strings.requiredHint, autoComplete: "off", defaultValue: values?.businessName ?? '' }), _jsx(PrizmaTextField, { label: copy.taxId.label, placeholder: copy.taxId.placeholder, required: true, requiredHint: strings.requiredHint, autoComplete: "off", defaultValue: values?.taxId ?? '' })] }));
+});
+EkybBusinessDetailsScreen.displayName = 'EkybBusinessDetailsScreen';
+export default EkybBusinessDetailsScreen;

package/dist/EkybCountryScreen.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { EkybCountryState, EkybOption, EkybStrings } from './EkybStrings';
+import './ScreenLayout.css';
+export interface EkybCountryScreenProps extends Omit<PrizmaFormScreenProps, 'title' | 'subtitle' | 'ctaLabel' | 'ctaLoading' | 'ctaLoadingLabel' | 'verifiedLabel' | 'children' | 'navLabel' | 'linkLabel' | 'linkContent'> {
+    /** Module copy — this screen reads the `country` slice. */
+    strings: EkybStrings;
+    /** Which purple `eKYB.country.*` section to render. Default `empty`. */
+    state?: EkybCountryState;
+    /** The selectable countries. Runtime data, not copy — the host owns the
+     *  catalogue. */
+    countries?: EkybOption[];
+    /** Selected `EkybOption.value`. Omit to render the placeholder (`empty`). */
+    value?: string;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * eKYB — the country-of-registration page, built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for all three purple `eKYB.country.*` sections (`empty`
+ * 2115:20444, `filled` 5655:42140, `dropdown` 5707:54174): measured against the
+ * 390 frames they share an identical skeleton — nav → Title (H2 + H5) →
+ * Spacing/32 → one labelled dropdown → "Continue" pushed to the bottom → tag —
+ * and differ ONLY in what the dropdown carries, which is exactly what
+ * GUIDELINES §6-E means by "states are separate screens sharing the identical
+ * layout".
+ *
+ * Three things are deliberate:
+ *
+ * 1. The field DOES carry a visible label. Unlike Phone Input's combined row
+ *    (#PI-4), Figma draws "Country" above this dropdown, which is Core's own
+ *    `label` slot — so the copy rides the visible label, not `aria-label`.
+ * 2. `dropdown` IS the open-menu spec state, which Core exposes as the
+ *    documentation-only `forceOpen` (a screen is one static spec state, never a
+ *    live interaction) — the same mechanism Phone Input's `countryCode` and
+ *    CURP's `Gene.dropdown` sections use. The search bar Figma draws inside the
+ *    menu is Core's own `searchable`.
+ * 3. The closed field and the menu row are DIFFERENT faces of one option:
+ *    5707:54174 draws "🇺🇸 United States" in the field while the rows read
+ *    "🇺🇸 +1 United States". That is Core's `PrizmaDropdownOption.fieldLabel`,
+ *    so nothing is hand-composed. The flag travels inside the label text
+ *    because Core still ships no country-flag primitive (#PI-3).
+ *
+ * This page is the only eKYB form page with NO "Back" secondary and NO Stepper —
+ * it is step 0, before the three-step wizard starts.
+ */
+export declare const EkybCountryScreen: React.ForwardRefExoticComponent<EkybCountryScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default EkybCountryScreen;

package/dist/EkybCountryScreen.js

@@ -0,0 +1,58 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaDropdown } from '@incodetech/prizma-core-web/dropdown';
+import { PrizmaFormScreen } from './FormScreen';
+import './ScreenLayout.css';
+/**
+ * eKYB — the country-of-registration page, built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for all three purple `eKYB.country.*` sections (`empty`
+ * 2115:20444, `filled` 5655:42140, `dropdown` 5707:54174): measured against the
+ * 390 frames they share an identical skeleton — nav → Title (H2 + H5) →
+ * Spacing/32 → one labelled dropdown → "Continue" pushed to the bottom → tag —
+ * and differ ONLY in what the dropdown carries, which is exactly what
+ * GUIDELINES §6-E means by "states are separate screens sharing the identical
+ * layout".
+ *
+ * Three things are deliberate:
+ *
+ * 1. The field DOES carry a visible label. Unlike Phone Input's combined row
+ *    (#PI-4), Figma draws "Country" above this dropdown, which is Core's own
+ *    `label` slot — so the copy rides the visible label, not `aria-label`.
+ * 2. `dropdown` IS the open-menu spec state, which Core exposes as the
+ *    documentation-only `forceOpen` (a screen is one static spec state, never a
+ *    live interaction) — the same mechanism Phone Input's `countryCode` and
+ *    CURP's `Gene.dropdown` sections use. The search bar Figma draws inside the
+ *    menu is Core's own `searchable`.
+ * 3. The closed field and the menu row are DIFFERENT faces of one option:
+ *    5707:54174 draws "🇺🇸 United States" in the field while the rows read
+ *    "🇺🇸 +1 United States". That is Core's `PrizmaDropdownOption.fieldLabel`,
+ *    so nothing is hand-composed. The flag travels inside the label text
+ *    because Core still ships no country-flag primitive (#PI-3).
+ *
+ * This page is the only eKYB form page with NO "Back" secondary and NO Stepper —
+ * it is step 0, before the three-step wizard starts.
+ */
+export const EkybCountryScreen = forwardRef(({ strings, state = 'empty', countries = [], value, screenId = `ekyb-country-${state}`, overrides, onAction, ...shell }, ref) => {
+    const copy = strings.country;
+    // `empty` is the only section drawn on the placeholder; both other sections
+    // draw a chosen country in the closed field.
+    const selected = state === 'empty' ? null : (value ?? countries[0]?.value ?? null);
+    return (_jsx(PrizmaFormScreen, { ref: ref, title: copy.title, subtitle: copy.subtitle, ctaLabel: copy.ctaLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, 
+        /* Every eKYB form frame LEFT-aligns its title block, while the archetype
+           defaults to centred. The module supplies its designed alignment
+           through the sanctioned override rather than declaring any layout of
+           its own, and a host that passes `align` still wins (#GEO-2). */
+        overrides: { align: overrides?.align ?? 'left', logo: overrides?.logo }, onAction: onAction, ...shell, children: _jsx(PrizmaDropdown, { label: copy.field.label, placeholder: copy.field.placeholder, options: countries, 
+            /* Uncontrolled: a screen is one static spec state, so no `onChange` is
+               needed. Core's `readOnly`/`disabled` are NOT used to freeze it —
+               they paint the DISABLED grey surface on a section Figma draws white
+               (DEVIATIONS #PI-6). */
+            defaultValue: selected, searchable: true, searchPlaceholder: copy.searchPlaceholder, clearSearchLabel: copy.clearSearchLabel, 
+            /* The `dropdown` section IS the open-menu spec state. */
+            forceOpen: state === 'dropdown' }) }));
+});
+EkybCountryScreen.displayName = 'EkybCountryScreen';
+export default EkybCountryScreen;

package/dist/EkybErrorScreen.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { EkybStrings } from './EkybStrings';
+import './ScreenLayout.css';
+export interface EkybErrorScreenProps extends Omit<PrizmaResultScreenProps, 'status' | 'title' | 'subtitle' | 'glyph' | 'ctaLabel' | 'secondaryCtaLabel' | 'verifiedLabel' | 'navLabel'> {
+    /** Module copy — this screen reads the `error` slice. */
+    strings: EkybStrings;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+/**
+ * eKYB — the negative verdict (`eKYB.error`, 2116:34743), built on the Result
+ * archetype (GUIDELINES.md §6-F, `PrizmaResultScreen`).
+ *
+ * Nav → centred negative mark + H2 ("Something went wrong") → CTA band with the
+ * single "Try again" primary → anchored tag. It sits on F rather than C for one
+ * reason: it has a button, and §6-F reserves C for the pure no-button case —
+ * which is why its `success` sibling is on C and this one is not.
+ *
+ * This is a generic-error screen, and per the standing owner rule it KEEPS the
+ * logo header and the verified tag even where a module's Figma draws them bare
+ * (#PI-8, #F-34) — here Figma draws both anyway, so nothing is overridden.
+ *
+ * Core's outline status mark is used, not Figma's two-tone filled disc
+ * (icon-outline sweep, #15 / #DC-34).
+ */
+export declare const EkybErrorScreen: React.ForwardRefExoticComponent<EkybErrorScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default EkybErrorScreen;