@incodetech/prizma-core-screens 0.1.2 → 0.2.3

package/dist/EkybBusinessDetailsScreen.js

@@ -4,7 +4,7 @@ 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 { PrizmaFormScreen, PrizmaFormRow } from './FormScreen';
 import './ScreenLayout.css';
 /**
  * eKYB — step 1 of the wizard, the company's identity, built on the Form
@@ -45,13 +45,16 @@ import './ScreenLayout.css';
  */
 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, 
+    return (_jsx(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 ?? '' })] }));
+        overrides: { align: overrides?.align ?? 'left', logo: overrides?.logo }, onAction: onAction, 
+        /* Exploration ekyb-desktop: on a tablet or desktop frame the two
+           fields share a row; on the phone nothing changes. */
+        responsive: true, ...shell, children: _jsxs(PrizmaFormRow, { 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/EkybOwnersScreen.d.ts

@@ -31,6 +31,10 @@ export interface EkybOwnersScreenProps extends Omit<PrizmaFormScreenProps, 'titl
  * - `uboFilled`      5707:49608 — UBO block only, both fields carrying a value
  * - `directorEmpty`  5655:56032 — UBO block + Director block, all four blank
  * - `directorFilled` 5707:49782 — UBO block + Director block, all four filled
+ * - `uboAdded`       (no frame) — `directorFilled` after "Add another UBO": a
+ *   second, blank UBO pair under the first with its own "Remove UBO" link,
+ *   then the same "Add another UBO" link and the Director block. Elena asked
+ *   for the screen the link leads to (2026-09-24); the frames stop at the link.
  * - `loading`        5663:94390 — `directorFilled` with the submission in
  *   flight: every field, both "Add another" links and "Back" go inert, and the
  *   spinner rides the CTA, never a field (the Phone Input lesson, #PI-5)

package/dist/EkybOwnersScreen.js

@@ -1,11 +1,11 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
 import { PrizmaTitle } from '@incodetech/prizma-core-web/title';
 import { PrizmaButton } from '@incodetech/prizma-core-web/button';
 import { PrizmaStepper } from '@incodetech/prizma-core-web/stepper';
-import { PrizmaFormScreen } from './FormScreen';
+import { PrizmaFormScreen, PrizmaFormRow } from './FormScreen';
 import './ScreenLayout.css';
 /**
  * eKYB — step 3 of the wizard, the people behind the company, built on the Form
@@ -23,6 +23,10 @@ import './ScreenLayout.css';
  * - `uboFilled`      5707:49608 — UBO block only, both fields carrying a value
  * - `directorEmpty`  5655:56032 — UBO block + Director block, all four blank
  * - `directorFilled` 5707:49782 — UBO block + Director block, all four filled
+ * - `uboAdded`       (no frame) — `directorFilled` after "Add another UBO": a
+ *   second, blank UBO pair under the first with its own "Remove UBO" link,
+ *   then the same "Add another UBO" link and the Director block. Elena asked
+ *   for the screen the link leads to (2026-09-24); the frames stop at the link.
  * - `loading`        5663:94390 — `directorFilled` with the submission in
  *   flight: every field, both "Add another" links and "Back" go inert, and the
  *   spinner rides the CTA, never a field (the Phone Input lesson, #PI-5)
@@ -64,7 +68,8 @@ import './ScreenLayout.css';
 export const EkybOwnersScreen = forwardRef(({ strings, state = 'uboEmpty', values, screenId = `ekyb-owners-${state}`, className, overrides, onAction, ...shell }, ref) => {
     const copy = strings.owners;
     const busy = state === 'loading';
-    const showDirector = state === 'directorEmpty' || state === 'directorFilled' || busy;
+    const secondUbo = state === 'uboAdded';
+    const showDirector = state === 'directorEmpty' || state === 'directorFilled' || secondUbo || busy;
     return (_jsxs(PrizmaFormScreen, { ref: ref, className: ['ekyb-owners', className].filter(Boolean).join(' '), 
         /* The archetype's own scrolling field stack — two titled blocks, four
            fields and two links do not fit a 844 frame. No module CSS. */
@@ -74,11 +79,14 @@ export const EkybOwnersScreen = forwardRef(({ strings, state = 'uboEmpty', value
         /* `loading` swaps the CTA label for Core's designed spinner. */
         ctaLoading: busy, ctaLoadingLabel: copy.ctaLoadingLabel, linkContent: _jsx(PrizmaButton, { variant: "secondary", size: "L", 
             /* 5663:94390 greys "Back" while the submission runs. */
-            disabled: busy, 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.uboName.label, placeholder: copy.uboName.placeholder, required: true, requiredHint: strings.requiredHint, autoComplete: "off", defaultValue: values?.uboName ?? '', disabled: busy }), _jsx(PrizmaTextField, { label: copy.uboSurname.label, placeholder: copy.uboSurname.placeholder, autoComplete: "off", defaultValue: values?.uboSurname ?? '', disabled: busy }), _jsx(PrizmaButton, { variant: "tertiary-link", size: "L", disabled: busy, 
+            disabled: busy, 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, 
+        /* Exploration ekyb-desktop: name + surname share a row per block on a
+           wide frame; on the phone nothing changes. */
+        responsive: true, ...shell, children: [_jsxs(PrizmaFormRow, { children: [_jsx(PrizmaTextField, { label: copy.uboName.label, placeholder: copy.uboName.placeholder, required: true, requiredHint: strings.requiredHint, autoComplete: "off", defaultValue: values?.uboName ?? '', disabled: busy }), _jsx(PrizmaTextField, { label: copy.uboSurname.label, placeholder: copy.uboSurname.placeholder, autoComplete: "off", defaultValue: values?.uboSurname ?? '', disabled: busy })] }), secondUbo ? (_jsxs(_Fragment, { children: [_jsxs(PrizmaFormRow, { children: [_jsx(PrizmaTextField, { label: copy.uboName.label, placeholder: copy.uboName.placeholder, required: true, requiredHint: strings.requiredHint, autoComplete: "off", defaultValue: values?.secondUboName ?? '' }), _jsx(PrizmaTextField, { label: copy.uboSurname.label, placeholder: copy.uboSurname.placeholder, autoComplete: "off", defaultValue: values?.secondUboSurname ?? '' })] }), copy.removeUboLabel ? (_jsx(PrizmaButton, { variant: "tertiary-link", size: "L", onClick: () => onAction?.({ type: 'tertiary', screenId: `${screenId}-remove-ubo` }), children: copy.removeUboLabel })) : null] })) : null, _jsx(PrizmaButton, { variant: "tertiary-link", size: "L", disabled: busy, 
                 /* Action-qualified id: the two "Add another…" links are different
                    flows and must stay distinguishable (#PI-10), but the action
                    contract has no per-action discriminator yet. */
-                onClick: () => onAction?.({ type: 'tertiary', screenId: `${screenId}-add-ubo` }), children: copy.addUboLabel }), showDirector ? (_jsxs(_Fragment, { children: [_jsx(PrizmaTitle, { variant: "left", title: copy.directorTitle, showSubtitle: Boolean(copy.directorSubtitle), subtitle: copy.directorSubtitle }), _jsx(PrizmaTextField, { label: copy.directorName.label, placeholder: copy.directorName.placeholder, autoComplete: "off", defaultValue: values?.directorName ?? '', disabled: busy }), _jsx(PrizmaTextField, { label: copy.directorSurname.label, placeholder: copy.directorSurname.placeholder, autoComplete: "off", defaultValue: values?.directorSurname ?? '', disabled: busy }), _jsx(PrizmaButton, { variant: "tertiary-link", size: "L", disabled: busy, onClick: () => onAction?.({
+                onClick: () => onAction?.({ type: 'tertiary', screenId: `${screenId}-add-ubo` }), children: copy.addUboLabel }), showDirector ? (_jsxs(_Fragment, { children: [_jsx(PrizmaTitle, { variant: "left", title: copy.directorTitle, showSubtitle: Boolean(copy.directorSubtitle), subtitle: copy.directorSubtitle }), _jsxs(PrizmaFormRow, { children: [_jsx(PrizmaTextField, { label: copy.directorName.label, placeholder: copy.directorName.placeholder, autoComplete: "off", defaultValue: values?.directorName ?? '', disabled: busy }), _jsx(PrizmaTextField, { label: copy.directorSurname.label, placeholder: copy.directorSurname.placeholder, autoComplete: "off", defaultValue: values?.directorSurname ?? '', disabled: busy })] }), _jsx(PrizmaButton, { variant: "tertiary-link", size: "L", disabled: busy, onClick: () => onAction?.({
                             type: 'tertiary',
                             screenId: `${screenId}-add-director`,
                         }), children: copy.addDirectorLabel })] })) : null] }));

package/dist/EkybStrings.d.ts

@@ -25,12 +25,16 @@ export type EkybAddressState = 'empty' | 'filled';
  * - `directorEmpty` — `eKYB.director.empty` (5655:56032): UBO block plus the
  *   Director block, every field blank
  * - `directorFilled`— `eKYB.directorFilled` (5707:49782): all four filled
+ * - `uboAdded`      — what "Add another UBO" does: a second UBO name + surname
+ *   pair opens under the first, blank, with a "Remove" link of its own, and the
+ *   Director block below as before. Not a Figma frame — the frames draw the
+ *   link and stop there; Elena asked for the screen it leads to (2026-09-24).
  * - `loading`       — `eKYB.directorloading` (5663:94390): the submission is in
  *   flight, so EVERY field, both "Add another" links and "Back" go inert and
  *   the spinner rides the CTA, never a field (the Phone Input lesson,
  *   DEVIATIONS #PI-5)
  */
-export type EkybOwnersState = 'uboEmpty' | 'uboFilled' | 'directorEmpty' | 'directorFilled' | 'loading';
+export type EkybOwnersState = 'uboEmpty' | 'uboFilled' | 'directorEmpty' | 'directorFilled' | 'uboAdded' | 'loading';
 /**
  * One selectable row in the country / state menus. Runtime data, not copy — the
  * host owns the catalogue (an ISO country list is ~250 entries and a state list
@@ -67,6 +71,9 @@ export interface EkybAddressValues {
 export interface EkybOwnersValues {
     uboName?: string;
     uboSurname?: string;
+    /** The second UBO, present only in `uboAdded`. */
+    secondUboName?: string;
+    secondUboSurname?: string;
     directorName?: string;
     directorSurname?: string;
 }
@@ -167,6 +174,10 @@ export interface EkybStrings {
         uboSurname: EkybFieldStrings;
         /** The tertiary link under the UBO block ("Add another UBO (Optional)"). */
         addUboLabel: string;
+        /** The tertiary link under a second UBO's pair ("Remove UBO"), `uboAdded`
+         *  only. Optional so existing hosts keep compiling; without it the second
+         *  pair cannot be taken away again. */
+        removeUboLabel?: string;
         /** The Director block's own heading + description. Rendered by Core's
          *  `PrizmaTitle` inside the field stack; see the screen's docstring and the
          *  module's reported deviation about the second heading. */

package/dist/EkycCountryCatalog.d.ts

@@ -0,0 +1,46 @@
+export type EkycFieldKind = 'text' | 'date' | 'phone' | 'dropdown' | 'radio';
+export type EkycFieldKey = 'firstName' | 'middleName' | 'middleNameOptional' | 'lastName' | 'surname' | 'maternalSurname' | 'dateOfBirth' | 'email' | 'phone' | 'ssnLast4' | 'ssnOrItin' | 'nationality' | 'cpf' | 'nationalId' | 'taxId' | 'gender' | 'licenseNumber' | 'licenseState' | 'licenseExpiration' | 'street' | 'houseNumber' | 'city' | 'state' | 'stateCode' | 'zipCode' | 'postalCode';
+export interface EkycField {
+    key: EkycFieldKey;
+    kind: EkycFieldKind;
+    /** Draws the `*` after the label, as the US driver's licence frame does. */
+    required?: boolean;
+    /** Placeholder key into `EkycStrings.country.placeholders`, when the frame draws one. */
+    placeholder?: string;
+    /** For `phone`: the ISO code of the dial code the frame shows (+1, +52, +34…). */
+    dialCountry?: string;
+    /**
+     * Desktop and tablet pairing (DEVIATIONS #EKC-5). Two ADJACENT fields with
+     * the same `row` share a `PrizmaFormRow`: two lanes of 202 on a wide frame,
+     * the ordinary stack on the phone (the archetype's container query, 420 and
+     * up, decides; nothing here re-declares a width). A field without a `row`
+     * spans the column. The rule mirrors eKYB's frames: a name pair shares
+     * (first | last, first | surname, surname | maternal surname), nationality |
+     * CPF share, State | Postal or Zip code share; email, date of birth, the
+     * phone (a Combined field never shares a row, #EKC-7), every identifier
+     * (SSN, ITIN, national ID, tax ID, CPF alone), the gender pair and street,
+     * house number, city span.
+     */
+    row?: number;
+}
+export interface EkycCountryStep {
+    /** Figma frame id. */
+    node: string;
+    /** A section heading under the title ("Address details", "Driver's License details"), when drawn. */
+    section?: 'address' | 'license';
+    fields: EkycField[];
+}
+export interface EkycCountryVariant {
+    /** Stable id; screen ids are `ekyc-<id>-step<n>`. */
+    id: string;
+    /** ISO 3166-1 alpha-2 of the country; `XX` for a country-agnostic provider (IPQS). */
+    country: string;
+    /** Country name and provider, as the frame names them. */
+    label: string;
+    provider: string;
+    /** Segments the frame's stepper draws; 0 when it draws none. */
+    stepper: number;
+    steps: EkycCountryStep[];
+}
+export declare const EKYC_COUNTRY_CATALOG: EkycCountryVariant[];
+export declare const ekycCountryVariant: (id: string) => EkycCountryVariant | undefined;

package/dist/EkycCountryCatalog.js

@@ -0,0 +1,139 @@
+// eKYC — the field catalogue by country and data provider.
+//
+// Figma: `👁️ eKYC Initial screen options` (`TWgYZVhurQCizfC4tfLEut`), section
+// `2098:20867` "1-1-1-eKYC-empty (all options)", read on 2026-09-24. Fifteen
+// step-1 frames, one per country and provider, eight of them with a step 2 and
+// US Telco 1 with a step 3. Every frame is archetype E on the same skeleton;
+// what changes is the LIST OF FIELDS per step. So a country is data, not a
+// screen: `EkycCountryFormScreen` renders any entry of this catalogue.
+//
+// Labels are copy and live in `EkycStrings.country.fields`, keyed by
+// `EkycFieldKey`, so a locale pack translates them once. The catalogue only
+// says WHICH fields, in WHICH order, with WHICH kind of Core input.
+//
+// Node ids per variant are the frame ids in that section; a step's id is the
+// frame that draws it. Nothing here is invented: a field appears because the
+// frame draws it, with the label the frame draws (DEVIATIONS #EKC-1). Two
+// things the frames draw unevenly were ALIGNED by the owner (Elena,
+// 2026-09-24): every step uses the module's "Enter your details" title and
+// subtitle (the US licence frame's copy) rather than a bare "eKYC
+// Verification", and no variant draws a close in the nav; steps after the
+// first get the archetype's Back button instead of a back arrow (#EKC-2).
+const t = (key, extra = {}) => ({ key, kind: 'text', ...extra });
+const date = (key = 'dateOfBirth', extra = {}) => ({ key, kind: 'date', ...extra });
+// Required fields carry Core's asterisk (`required` + `requiredHint`), the
+// owner's rule (Elena, 2026-09-24, DEVIATIONS #EKC-6): first name, last name or
+// surname, email and phone on every variant. Middle name (plain or "Optional")
+// and maternal surname stay optional; date of birth, identifiers, address and
+// licence fields keep what their frame draws (only the US licence step 1 draws
+// asterisks on them). `showErrors` flags required empty fields only.
+const phone = (dialCountry, extra = {}) => ({ key: 'phone', kind: 'phone', dialCountry, required: true, ...extra });
+const email = (extra = {}) => t('email', { required: true, ...extra });
+// The wide-frame pairs (`row`, DEVIATIONS #EKC-5). A row number is only a
+// grouping id, local to its step; 1 is the name pair, 2 Brazil's nationality |
+// CPF, 3 the State | Postal pair of an address. The phone field NEVER shares a
+// row: Core's Combined (dial code + number) collapses to a three-digit stub in
+// a 202 lane (Elena, 2026-09-24, #EKC-7), and date of birth spans with it.
+const NAME_PAIR = (last = 'lastName') => [t('firstName', { required: true, row: 1 }), t(last, { required: true, row: 1 })];
+const DOB_PHONE = (dialCountry) => [date(), phone(dialCountry)];
+const US_ADDRESS = [t('street'), t('houseNumber'), t('city'), { key: 'state', kind: 'dropdown', placeholder: 'selectState', row: 3 }, t('zipCode', { row: 3 })];
+const CODE_ADDRESS = (placeholder) => [t('street'), t('houseNumber'), t('city'), t('stateCode', { row: 3, ...(placeholder ? { placeholder } : {}) }), t('postalCode', { row: 3 })];
+const LICENSE = [t('licenseNumber'), { key: 'licenseState', kind: 'dropdown', placeholder: 'selectState', row: 1 }, date('licenseExpiration', { row: 1 })];
+export const EKYC_COUNTRY_CATALOG = [
+    {
+        id: 'us-drivers-license', country: 'US', label: 'United States', provider: "Driver's license", stepper: 2,
+        steps: [
+            /* First | Last share the wide row, so Middle name follows the pair here
+               and in `EkycDetailsScreen` (the same frame). On the phone the stack
+               reads First, Last, Middle, Date of birth — the one order change the
+               desktop pairing costs (#EKC-5). */
+            { node: '2101:25871', fields: [t('firstName', { required: true, row: 1 }), t('lastName', { required: true, row: 1 }), t('middleName'), date('dateOfBirth', { required: true })] },
+            { node: '5849:73280', section: 'license', fields: LICENSE },
+        ],
+    },
+    {
+        id: 'us-telco-1', country: 'US', label: 'United States', provider: 'Telco 1', stepper: 3,
+        steps: [
+            { node: '2098:9575', fields: [...NAME_PAIR(), email(), ...DOB_PHONE('US'), t('ssnLast4')] },
+            { node: '5854:76222', section: 'license', fields: [t('licenseNumber'), { key: 'licenseState', kind: 'dropdown', placeholder: 'selectState' }] },
+            { node: '5854:76221', section: 'address', fields: US_ADDRESS },
+        ],
+    },
+    {
+        id: 'us-telco-2', country: 'US', label: 'United States', provider: 'Telco 2', stepper: 2,
+        steps: [
+            { node: '2098:9578', fields: [...NAME_PAIR(), ...DOB_PHONE('US')] },
+            { node: '5857:33074', section: 'address', fields: US_ADDRESS },
+        ],
+    },
+    {
+        id: 'us-credit-bureau', country: 'US', label: 'United States', provider: 'Credit bureau', stepper: 2,
+        steps: [
+            /* Same First | Last pair as the licence variant; Middle name (Optional)
+               follows it and spans (#EKC-5). */
+            { node: '2098:9577', fields: [...NAME_PAIR(), t('middleNameOptional'), ...DOB_PHONE('US'), email(), t('ssnOrItin')] },
+            { node: '5857:34094', section: 'address', fields: US_ADDRESS },
+        ],
+    },
+    {
+        id: 'mx-consumer', country: 'MX', label: 'Mexico', provider: 'Consumer', stepper: 0,
+        /* Mexico pairs the two surnames, so First name spans on its own. */
+        steps: [{ node: '2098:9572', fields: [t('firstName', { required: true }), t('surname', { required: true, row: 1 }), t('maternalSurname', { row: 1 }), phone('MX'), email()] }],
+    },
+    {
+        id: 'br-govt', country: 'BR', label: 'Brazil', provider: 'Government', stepper: 2,
+        steps: [
+            { node: '2098:9574', fields: [...NAME_PAIR('surname'), email(), date(), { key: 'nationality', kind: 'dropdown', row: 2 }, t('cpf', { row: 2 })] },
+            { node: '5857:34935', section: 'address', fields: CODE_ADDRESS('stateCodeBr') },
+        ],
+    },
+    {
+        id: 'ca-res-credit', country: 'CA', label: 'Canada', provider: 'Residential credit', stepper: 2,
+        steps: [
+            { node: '2098:9570', fields: [...NAME_PAIR(), email(), ...DOB_PHONE('CA'), t('ssnOrItin')] },
+            { node: '5857:36450', section: 'address', fields: CODE_ADDRESS('stateCodeCa') },
+        ],
+    },
+    {
+        id: 'uk-credit-bureau', country: 'GB', label: 'United Kingdom', provider: 'Credit bureau', stepper: 2,
+        steps: [
+            { node: '2098:9569', fields: [...NAME_PAIR('surname'), date()] },
+            { node: '5857:36888', section: 'address', fields: CODE_ADDRESS() },
+        ],
+    },
+    {
+        id: 'es-telephone-register', country: 'ES', label: 'Spain', provider: 'Telephone register', stepper: 2,
+        steps: [
+            { node: '2098:9573', fields: [...NAME_PAIR('surname'), ...DOB_PHONE('ES'), t('nationalId')] },
+            { node: '5857:37341', section: 'address', fields: CODE_ADDRESS() },
+        ],
+    },
+    {
+        id: 'cl-official-census', country: 'CL', label: 'Chile', provider: 'Official census', stepper: 0,
+        steps: [{ node: '2098:9571', fields: [...NAME_PAIR('surname'), date(), t('nationalId')] }],
+    },
+    {
+        id: 'ar-civil-register', country: 'AR', label: 'Argentina', provider: 'Official civil register', stepper: 2,
+        steps: [
+            { node: '2098:9568', fields: [...NAME_PAIR('surname'), { key: 'gender', kind: 'radio' }, email(), date(), t('nationalId'), t('taxId')] },
+            { node: '5857:38015', section: 'address', fields: [t('street'), t('houseNumber'), t('city'), { key: 'state', kind: 'dropdown', placeholder: 'selectState', row: 3 }, t('postalCode', { row: 3 })] },
+        ],
+    },
+    {
+        id: 'gt', country: 'GT', label: 'Guatemala', provider: 'Registry', stepper: 0,
+        steps: [{ node: '2098:9566', fields: [...NAME_PAIR('surname'), date(), t('nationalId')] }],
+    },
+    {
+        id: 'co', country: 'CO', label: 'Colombia', provider: 'Registry', stepper: 0,
+        steps: [{ node: '2098:9567', fields: [...NAME_PAIR('surname'), t('nationalId')] }],
+    },
+    {
+        id: 'cr', country: 'CR', label: 'Costa Rica', provider: 'Registry', stepper: 0,
+        steps: [{ node: '2098:9565', fields: [...NAME_PAIR('surname'), t('nationalId')] }],
+    },
+    {
+        id: 'ipqs', country: 'XX', label: 'Any country', provider: 'IPQS', stepper: 0,
+        steps: [{ node: '2098:9564', fields: [email(), phone('US')] }],
+    },
+];
+export const ekycCountryVariant = (id) => EKYC_COUNTRY_CATALOG.find(v => v.id === id);

package/dist/EkycCountryFormScreen.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { type PrizmaCountry } from '@incodetech/prizma-core-web/combined';
+import { type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { EkycCountryValues, EkycStrings } from './EkycStrings';
+import { type EkycCountryVariant } from './EkycCountryCatalog';
+import './ScreenLayout.css';
+import './EkycLayout.css';
+export interface EkycCountryFormScreenProps extends Omit<PrizmaFormScreenProps, 'title' | 'subtitle' | 'ctaLabel' | 'ctaDisabled' | 'verifiedLabel' | 'children' | 'navLabel' | 'progress' | 'scrollFields' | 'linkContent'> {
+    strings: EkycStrings;
+    /** A catalogue id (`us-telco-1`) or the variant itself. */
+    variant: string | EkycCountryVariant;
+    /** 1-based step of the variant. Default 1. */
+    step?: number;
+    /** Starting values by field key. Empty renders the resting empty field. */
+    values?: EkycCountryValues;
+    /**
+     * The state after Continue was pressed with fields still empty: every empty
+     * field shows Core's error state and `country.requiredError` under it.
+     * Continue itself is ALWAYS enabled (Elena, 2026-09-24): validation happens
+     * on press, not by greying the button.
+     */
+    showErrors?: boolean;
+    /** Dial codes the phone field offers. Runtime data, never copy. */
+    phoneCountries?: PrizmaCountry[];
+    /** Options for the dropdown fields, keyed by field key. Runtime data. */
+    options?: Record<string, {
+        value: string;
+        label: string;
+    }[]>;
+    screenId?: string;
+    overrides?: PrizmaScreenOverrides;
+    onAction?: PrizmaScreenActionHandler;
+}
+export declare const EkycCountryFormScreen: React.ForwardRefExoticComponent<EkycCountryFormScreenProps & React.RefAttributes<HTMLDivElement>>;
+export default EkycCountryFormScreen;

package/dist/EkycCountryFormScreen.js

@@ -0,0 +1,94 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
+import { PrizmaDateField } from '@incodetech/prizma-core-web/date-field';
+import { PrizmaDropdown } from '@incodetech/prizma-core-web/dropdown';
+import { PrizmaCombined } from '@incodetech/prizma-core-web/combined';
+import { PrizmaRadioGroup } from '@incodetech/prizma-core-web/radio-group';
+import { PrizmaRadio } from '@incodetech/prizma-core-web/radio';
+import { PrizmaStepper } from '@incodetech/prizma-core-web/stepper';
+import { PrizmaButton } from '@incodetech/prizma-core-web/button';
+import { PrizmaFormScreen, PrizmaFormRow } from './FormScreen';
+import { ekycCountryVariant } from './EkycCountryCatalog';
+import './ScreenLayout.css';
+import './EkycLayout.css';
+/**
+ * eKYC — one step of one by-country variant, built on the Form archetype.
+ *
+ * The section `2098:20867` draws fifteen variants on the same skeleton (nav →
+ * optional stepper → title → fields → Continue → tag) and differs only in the
+ * list of fields. This screen reads that list from `EkycCountryCatalog.ts` and
+ * composes Core's own inputs for it — text, date, phone (`PrizmaCombined`),
+ * dropdown, radio pair — so a new country is a catalogue entry, never a file.
+ *
+ * Deliberate, per frame and per owner:
+ * - Continue is ALWAYS enabled (Elena, 2026-09-24, overriding the grey button
+ *   most frames draw): pressing it with empty fields is the `showErrors` state,
+ *   Core's error ring and message under each empty field. The radio pair has
+ *   no error state in Core, so an empty gender shows none (DEVIATIONS #EKC-4).
+ * - ONE title per step (Elena, 2026-09-24): the personal-data step is "Enter
+ *   your details" with its subtitle; a licence step is titled "Driver's
+ *   License details" and an address step "Address details", with nothing
+ *   above them. The frames drew "eKYC Verification" over a section heading;
+ *   the owner aligned the copy to one H2 per form.
+ * - No close in the nav (Core's nav has none, GUIDELINES §3, and the owner
+ *   asked for none). A step after the first gets the archetype's Back button,
+ *   as eKYB does, instead of the back arrow four frames drew. DEVIATIONS #EKC-2.
+ * - Desktop and tablet take the eKYB shape (`responsive`, exploration
+ *   `ekyb-desktop`): two adjacent catalogue fields with the same `row` share a
+ *   `PrizmaFormRow`, so on a wide frame they sit in two lanes and on the phone
+ *   they stack exactly as before. Which fields pair is the catalogue's call,
+ *   never this screen's (DEVIATIONS #EKC-5).
+ */
+/** Adjacent fields sharing a `row` become one group; the rest stand alone. */
+const groupRows = (fields) => {
+    const groups = [];
+    for (const f of fields) {
+        const last = groups[groups.length - 1];
+        if (f.row != null && last && last[0].row === f.row)
+            last.push(f);
+        else
+            groups.push([f]);
+    }
+    return groups;
+};
+export const EkycCountryFormScreen = forwardRef(({ strings, variant, step = 1, values, showErrors = false, phoneCountries, options, screenId, overrides, onAction, ...shell }, ref) => {
+    const v = typeof variant === 'string' ? ekycCountryVariant(variant) : variant;
+    if (!v)
+        return null;
+    const s = v.steps[Math.min(Math.max(step, 1), v.steps.length) - 1];
+    const c = strings.country;
+    const stepperState = step <= 1 ? 'Start' : Math.min(step, 6);
+    const label = (f) => c.fields[f.key] ?? f.key;
+    const placeholder = (f) => (f.placeholder ? c.placeholders[f.placeholder] : c.placeholders[f.key]);
+    const renderField = (f) => {
+        // Only a REQUIRED empty field is an error on press (Elena, 2026-09-24,
+        // DEVIATIONS #EKC-6): an optional field left blank shows nothing.
+        const missing = showErrors && Boolean(f.required) && !values?.[f.key];
+        const common = {
+            key: f.key, label: label(f), required: f.required, requiredHint: strings.details.requiredHint,
+            error: missing || undefined, errorText: missing ? c.requiredError : undefined,
+        };
+        switch (f.kind) {
+            case 'date':
+                return _jsx(PrizmaDateField, { ...common, placeholder: placeholder(f), defaultValue: values?.[f.key] ?? '' });
+            case 'phone': {
+                const country = phoneCountries?.find(p => p.code === f.dialCountry) ?? phoneCountries?.[0];
+                return (_jsx(PrizmaCombined, { ...common, countries: phoneCountries, defaultCountry: country, countryListLabel: c.countryListLabel, placeholder: placeholder(f), defaultValue: values?.[f.key] ?? '', autoComplete: "off" }));
+            }
+            case 'dropdown':
+                return (_jsx(PrizmaDropdown, { ...common, placeholder: placeholder(f), options: options?.[f.key] ?? [], defaultValue: values?.[f.key] ?? null }));
+            case 'radio':
+                return (_jsx(PrizmaRadioGroup, { name: f.key, legend: label(f), defaultValue: values?.[f.key], className: "ekyc-country__radios", children: c.genderOptions.map(o => (_jsx(PrizmaRadio, { value: o.value, textSize: "m", showText: true, text: o.label }, o.value))) }, f.key));
+            default:
+                return _jsx(PrizmaTextField, { ...common, placeholder: placeholder(f), autoComplete: "off", defaultValue: values?.[f.key] ?? '' });
+        }
+    };
+    return (_jsx(PrizmaFormScreen, { ref: ref, scrollFields: true, progress: v.stepper > 0 ? (_jsx(PrizmaStepper, { steps: v.stepper, currentState: stepperState, showIcons: false, "aria-label": strings.stepperLabel })) : undefined, title: s.section === 'address' ? c.addressSection : s.section === 'license' ? c.licenseSection : strings.details.title, subtitle: s.section ? undefined : strings.details.subtitle, linkContent: step > 1 ? (_jsx(PrizmaButton, { variant: "secondary", size: "L", onClick: () => onAction?.({ type: 'secondary', screenId }), children: c.backLabel })) : undefined, ctaLabel: c.ctaLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, overrides: { align: overrides?.align ?? 'left', logo: overrides?.logo }, onAction: onAction, 
+        /* The eKYB desktop shape: catalogue pairs become two lanes at 420 and
+           up, Back | Continue share a row. The phone stack is untouched. */
+        responsive: true, ...shell, children: groupRows(s.fields).map(group => group.length > 1 ? (_jsx(PrizmaFormRow, { children: group.map(renderField) }, group.map(f => f.key).join('+'))) : (renderField(group[0]))) }));
+});
+EkycCountryFormScreen.displayName = 'EkycCountryFormScreen';
+export default EkycCountryFormScreen;

package/dist/EkycDetailsScreen.js

@@ -4,7 +4,7 @@ import { forwardRef } from 'react';
 import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
 import { PrizmaDateField } from '@incodetech/prizma-core-web/date-field';
 import { PrizmaStepper } from '@incodetech/prizma-core-web/stepper';
-import { PrizmaFormScreen } from './FormScreen';
+import { PrizmaFormScreen, PrizmaFormRow } from './FormScreen';
 import './ScreenLayout.css';
 import './EkycLayout.css';
 /**
@@ -73,9 +73,16 @@ export const EkycDetailsScreen = forwardRef(({ strings, state = 'default', value
            defaults to centred. The module supplies its designed alignment through
            the sanctioned override rather than declaring any layout, and a host
            that passes its own `align` still wins. */
-        overrides: { align: overrides?.align ?? 'left', logo: overrides?.logo }, onAction: onAction, ...shell, children: [_jsx(PrizmaTextField, { className: focused ? 'prizma-input-textfield--focused' : undefined, label: strings.details.firstNameLabel, required: true, requiredHint: strings.details.requiredHint, defaultValue: values?.firstName ?? '', autoComplete: "off", 
-                /* Only 2101:8159 draws the ✕, and only in this field. */
-                clearable: focused, clearLabel: strings.details.clearLabel }), _jsx(PrizmaTextField, { label: strings.details.middleNameLabel, defaultValue: values?.middleName ?? '', autoComplete: "off", clearable: false }), _jsx(PrizmaTextField, { label: strings.details.lastNameLabel, required: true, requiredHint: strings.details.requiredHint, defaultValue: values?.lastName ?? '', autoComplete: "off", clearable: false }), _jsx(PrizmaDateField, { label: strings.details.dateOfBirthLabel, required: true, requiredHint: strings.details.requiredHint, defaultValue: values?.dateOfBirth ?? '', autoComplete: "off" })] }));
+        overrides: { align: overrides?.align ?? 'left', logo: overrides?.logo }, onAction: onAction, 
+        /* Exploration ekyb-desktop, applied to eKYC: on a tablet or desktop
+           frame First name | Last name share a row; Middle name and Date of
+           birth span the column. So that the pair is adjacent, Middle name
+           now FOLLOWS Last name, on the phone too (First, Last, Middle, Date of
+           birth), the one order change the pairing costs: the frames drew
+           First, Middle, Last. DEVIATIONS #EKC-5. */
+        responsive: true, ...shell, children: [_jsxs(PrizmaFormRow, { children: [_jsx(PrizmaTextField, { className: focused ? 'prizma-input-textfield--focused' : undefined, label: strings.details.firstNameLabel, required: true, requiredHint: strings.details.requiredHint, defaultValue: values?.firstName ?? '', autoComplete: "off", 
+                        /* Only 2101:8159 draws the ✕, and only in this field. */
+                        clearable: focused, clearLabel: strings.details.clearLabel }), _jsx(PrizmaTextField, { label: strings.details.lastNameLabel, required: true, requiredHint: strings.details.requiredHint, defaultValue: values?.lastName ?? '', autoComplete: "off", clearable: false })] }), _jsx(PrizmaTextField, { label: strings.details.middleNameLabel, defaultValue: values?.middleName ?? '', autoComplete: "off", clearable: false }), _jsx(PrizmaDateField, { label: strings.details.dateOfBirthLabel, required: true, requiredHint: strings.details.requiredHint, defaultValue: values?.dateOfBirth ?? '', autoComplete: "off" })] }));
 });
 EkycDetailsScreen.displayName = 'EkycDetailsScreen';
 export default EkycDetailsScreen;

package/dist/EkycLayout.css

@@ -37,3 +37,26 @@
   .prizma-input-textfield__clear--show {
   display: inline-flex;
 }
+
+/* ── The gender pair sits on one row ──────────────────────────────────────────
+ * Argentina's frame (2098:9568) draws "Female  Male" side by side under the
+ * "Gender" label. Core's `PrizmaRadioGroup` stacks its radios in a column and
+ * has no row option, so this releases that one direction for the pair: the
+ * legend keeps the whole first line, the two radios share the next one at
+ * Spacing/24. Core's radio, its label, its size and colours are untouched.
+ * CORE REQUEST: a `direction="row"` on `PrizmaRadioGroup` would retire this
+ * rule (DEVIATIONS #EKC-3). */
+.ekyc-country__radios {
+  flex-direction: row;
+  flex-wrap: wrap;
+  column-gap: var(--prizma-spacing-24);
+}
+.ekyc-country__radios .prizma-radio-group__legend {
+  flex-basis: 100%;
+}
+/* Core's radio is FILL by design (radio.md §3); on the row each one hugs its
+ * label so the pair reads "Female  Male" as drawn. Same release, same request. */
+.ekyc-country__radios .prizma-radio {
+  width: auto;
+  flex: 0 0 auto;
+}

package/dist/EkycLicenseScreen.js

@@ -5,7 +5,7 @@ import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
 import { PrizmaDateField } from '@incodetech/prizma-core-web/date-field';
 import { PrizmaDropdown } from '@incodetech/prizma-core-web/dropdown';
 import { PrizmaStepper } from '@incodetech/prizma-core-web/stepper';
-import { PrizmaFormScreen } from './FormScreen';
+import { PrizmaFormScreen, PrizmaFormRow } from './FormScreen';
 import './ScreenLayout.css';
 import './EkycLayout.css';
 /**
@@ -60,9 +60,13 @@ export const EkycLicenseScreen = forwardRef(({ strings, state = 'default', value
         /* 5849:71925 swaps the CTA label for Core's designed spinner. */
         ctaLoading: busy, ctaLoadingLabel: strings.license.ctaLoadingLabel, verifiedLabel: strings.verifiedLabel, navLabel: strings.navLabel, screenId: screenId, 
         /* Left-aligned title block, same as page 1; a host `align` still wins. */
-        overrides: { align: overrides?.align ?? 'left', logo: overrides?.logo }, onAction: onAction, ...shell, children: [_jsx(PrizmaTextField, { label: strings.license.numberLabel, defaultValue: values?.number ?? '', autoComplete: "off", spellCheck: false, disabled: busy, 
+        overrides: { align: overrides?.align ?? 'left', logo: overrides?.logo }, onAction: onAction, 
+        /* Exploration ekyb-desktop, applied to eKYC: on a wide frame the
+           licence number spans and State | Expiration date share a row; the
+           phone stack is untouched. DEVIATIONS #EKC-5. */
+        responsive: true, ...shell, children: [_jsx(PrizmaTextField, { label: strings.license.numberLabel, defaultValue: values?.number ?? '', autoComplete: "off", spellCheck: false, disabled: busy, 
                 /* No section on this page draws the clear ✕. */
-                clearable: false }), _jsx(PrizmaDropdown, { label: strings.license.stateLabel, options: stateOptions, defaultValue: values?.state ?? null, disabled: busy }), _jsx(PrizmaDateField, { label: strings.license.expirationLabel, defaultValue: values?.expirationDate ?? '', autoComplete: "off", disabled: busy })] }));
+                clearable: false }), _jsxs(PrizmaFormRow, { children: [_jsx(PrizmaDropdown, { label: strings.license.stateLabel, options: stateOptions, defaultValue: values?.state ?? null, disabled: busy }), _jsx(PrizmaDateField, { label: strings.license.expirationLabel, defaultValue: values?.expirationDate ?? '', autoComplete: "off", disabled: busy })] })] }));
 });
 EkycLicenseScreen.displayName = 'EkycLicenseScreen';
 export default EkycLicenseScreen;

package/dist/EkycStrings.d.ts

@@ -21,6 +21,8 @@ export type EkycDetailsState = 'default' | 'focused' | 'filled';
  *               a field — the standing #PI-5 ruling)
  */
 export type EkycLicenseState = 'default' | 'filled' | 'loading';
+/** Values for a by-country step, keyed by `EkycFieldKey`. Empty renders the resting empty field. */
+export type EkycCountryValues = Partial<Record<string, string>>;
 /** One row of the licence-state chooser. Runtime data, never copy — the host
  *  supplies the jurisdictions its tenant accepts, exactly as Phone Input's
  *  `PhoneInputCountry` supplies dial codes. */
@@ -96,6 +98,30 @@ export interface EkycStrings {
         /** Visible/accessible copy while the submit is in flight. */
         ctaLoadingLabel: string;
     };
+    /**
+     * The by-country variants (`EkycCountryCatalog.ts`, Figma section
+     * 2098:20867). Field labels keyed by `EkycFieldKey`, placeholders by the
+     * catalogue's `placeholder` keys; one map, translated once.
+     */
+    country: {
+        /** Section headings drawn under the title on a step 2 / 3. */
+        addressSection: string;
+        licenseSection: string;
+        /** Accessible name of the phone field's dial-code list. */
+        countryListLabel: string;
+        /** The gender radio pair, Argentina. */
+        genderOptions: {
+            value: string;
+            label: string;
+        }[];
+        fields: Record<string, string>;
+        placeholders: Record<string, string>;
+        ctaLabel: string;
+        /** The secondary button on a step after the first. */
+        backLabel: string;
+        /** Under every empty field once Continue was pressed (`showErrors`). */
+        requiredError: string;
+    };
     /** `eKYC.processing` — spinner over the status line, no button. */
     processing: {
         title: string;

package/dist/EmailInputStrings.d.ts

@@ -31,7 +31,17 @@ export interface EmailInputStrings {
     verify: {
         /** H2 ("Verify your email"). */
         title: string;
-        /** H5 ("We'll send you a code to ensure it's yours"). */
+        /**
+         * H5 ("We'll use it to verify it's yours").
+         *
+         * DELIBERATELY SILENT ABOUT THE CODE, for the same reason as Phone Input's
+         * twin line. This module ships in TWO configurations and the `Without a
+         * one-time code` one never asks for a code at all (see the `noOtp` variant
+         * in `flow/graphs/email-input.ts`: the spinner runs straight into the
+         * verdict). One screen serves both, and which configuration the session
+         * wants is not something this line can know. It answers "why do you want my
+         * address?" instead, which holds in both.
+         */
         subtitle: string;
         /** Field placeholder ("Email"). */
         placeholder: string;

package/dist/FaceMatchComparisonScreen.d.ts

@@ -7,8 +7,10 @@ import './FaceMatchLayout.css';
 /** Which captured image fills a circle. The host owns the pixels (same
  *  contract as `camera` on the capture screens) — Face Match never captures. */
 export type FaceMatchPhotoRole = 'selfie' | 'id' | 'nfc' | 'secondId';
-/** Host-supplied portraits, one per role the chosen variant asks for. Any role
- *  left out renders an empty neutral disc. */
+/** Host-supplied portraits, one per role the chosen variant asks for. A role
+ *  left out renders the empty state: a Brand/50 disc, marked with
+ *  `.face-match-cluster__photo--empty`. Interim treatment (2026-09-25) while
+ *  the designed no-photo state is drawn; see FaceMatchLayout.css. */
 export type FaceMatchComparisonPhotos = Partial<Record<FaceMatchPhotoRole, ReactNode>>;
 /**
  * Where the comparison is in its own choreography — the module MOVING rather