@incodetech/prizma-core-screens 0.1.2 → 0.2.3

package/src/EkycCountryCatalog.ts

@@ -0,0 +1,199 @@
+// 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).
+
+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[];
+}
+
+const t = (key: EkycFieldKey, extra: Partial<EkycField> = {}): EkycField => ({ key, kind: 'text', ...extra });
+const date = (key: EkycFieldKey = 'dateOfBirth', extra: Partial<EkycField> = {}): EkycField => ({ 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: string, extra: Partial<EkycField> = {}): EkycField => ({ key: 'phone', kind: 'phone', dialCountry, required: true, ...extra });
+const email = (extra: Partial<EkycField> = {}): EkycField => 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: EkycFieldKey = 'lastName'): EkycField[] => [t('firstName', { required: true, row: 1 }), t(last, { required: true, row: 1 })];
+const DOB_PHONE = (dialCountry: string): EkycField[] => [date(), phone(dialCountry)];
+
+const US_ADDRESS: EkycField[] = [t('street'), t('houseNumber'), t('city'), { key: 'state', kind: 'dropdown', placeholder: 'selectState', row: 3 }, t('zipCode', { row: 3 })];
+const CODE_ADDRESS = (placeholder?: string): EkycField[] => [t('street'), t('houseNumber'), t('city'), t('stateCode', { row: 3, ...(placeholder ? { placeholder } : {}) }), t('postalCode', { row: 3 })];
+const LICENSE: EkycField[] = [t('licenseNumber'), { key: 'licenseState', kind: 'dropdown', placeholder: 'selectState', row: 1 }, date('licenseExpiration', { row: 1 })];
+
+export const EKYC_COUNTRY_CATALOG: EkycCountryVariant[] = [
+  {
+    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: string): EkycCountryVariant | undefined =>
+  EKYC_COUNTRY_CATALOG.find(v => v.id === id);

package/src/EkycCountryFormScreen.tsx

@@ -0,0 +1,184 @@
+import React, { 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, type PrizmaCountry } 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, type PrizmaStepperState } from '@incodetech/prizma-core-web/stepper';
+import { PrizmaButton } from '@incodetech/prizma-core-web/button';
+import { PrizmaFormScreen, PrizmaFormRow, type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { EkycCountryValues, EkycStrings } from './EkycStrings';
+import { ekycCountryVariant, type EkycCountryVariant, type EkycField } 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;
+}
+
+/**
+ * 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: EkycField[]): EkycField[][] => {
+  const groups: EkycField[][] = [];
+  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<HTMLDivElement, EkycCountryFormScreenProps>(
+  ({ 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: PrizmaStepperState = step <= 1 ? 'Start' : (Math.min(step, 6) as PrizmaStepperState);
+
+    const label = (f: EkycField) => c.fields[f.key] ?? f.key;
+    const placeholder = (f: EkycField) => (f.placeholder ? c.placeholders[f.placeholder] : c.placeholders[f.key]);
+
+    const renderField = (f: EkycField) => {
+      // 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,
+      } as const;
+      switch (f.kind) {
+        case 'date':
+          return <PrizmaDateField {...common} placeholder={placeholder(f)} defaultValue={values?.[f.key] ?? ''} />;
+        case 'phone': {
+          const country = phoneCountries?.find(p => p.code === f.dialCountry) ?? phoneCountries?.[0];
+          return (
+            <PrizmaCombined
+              {...common}
+              countries={phoneCountries}
+              defaultCountry={country}
+              countryListLabel={c.countryListLabel}
+              placeholder={placeholder(f)}
+              defaultValue={values?.[f.key] ?? ''}
+              autoComplete="off"
+            />
+          );
+        }
+        case 'dropdown':
+          return (
+            <PrizmaDropdown
+              {...common}
+              placeholder={placeholder(f)}
+              options={options?.[f.key] ?? []}
+              defaultValue={values?.[f.key] ?? null}
+            />
+          );
+        case 'radio':
+          return (
+            <PrizmaRadioGroup key={f.key} name={f.key} legend={label(f)} defaultValue={values?.[f.key]} className="ekyc-country__radios">
+              {c.genderOptions.map(o => (
+                <PrizmaRadio key={o.value} value={o.value} textSize="m" showText text={o.label} />
+              ))}
+            </PrizmaRadioGroup>
+          );
+        default:
+          return <PrizmaTextField {...common} placeholder={placeholder(f)} autoComplete="off" defaultValue={values?.[f.key] ?? ''} />;
+      }
+    };
+
+    return (
+      <PrizmaFormScreen
+        ref={ref}
+        scrollFields
+        progress={
+          v.stepper > 0 ? (
+            <PrizmaStepper steps={v.stepper as 2 | 3} 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 ? (
+            <PrizmaButton variant="secondary" size="L" onClick={() => onAction?.({ type: 'secondary', screenId })}>
+              {c.backLabel}
+            </PrizmaButton>
+          ) : 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
+        {...shell}
+      >
+        {groupRows(s.fields).map(group =>
+          group.length > 1 ? (
+            <PrizmaFormRow key={group.map(f => f.key).join('+')}>{group.map(renderField)}</PrizmaFormRow>
+          ) : (
+            renderField(group[0])
+          ),
+        )}
+      </PrizmaFormScreen>
+    );
+  },
+);
+EkycCountryFormScreen.displayName = 'EkycCountryFormScreen';
+
+export default EkycCountryFormScreen;

package/src/EkycDetailsScreen.tsx

@@ -2,7 +2,7 @@ import React, { 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, type PrizmaFormScreenProps } from './FormScreen';
+import { PrizmaFormScreen, PrizmaFormRow, type PrizmaFormScreenProps } from './FormScreen';
 import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
 import type { EkycDetailsState, EkycDetailsValues, EkycStrings } from './EkycStrings';
 import './ScreenLayout.css';
@@ -131,33 +131,42 @@ export const EkycDetailsScreen = forwardRef<HTMLDivElement, EkycDetailsScreenPro
            that passes its own `align` still wins. */
         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
         {...shell}
       >
-        <PrizmaTextField
-          className={focused ? 'prizma-input-textfield--focused' : undefined}
-          label={strings.details.firstNameLabel}
-          required
-          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}
-        />
+        <PrizmaFormRow>
+          <PrizmaTextField
+            className={focused ? 'prizma-input-textfield--focused' : undefined}
+            label={strings.details.firstNameLabel}
+            required
+            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}
+          />
+          <PrizmaTextField
+            label={strings.details.lastNameLabel}
+            required
+            requiredHint={strings.details.requiredHint}
+            defaultValue={values?.lastName ?? ''}
+            autoComplete="off"
+            clearable={false}
+          />
+        </PrizmaFormRow>
         <PrizmaTextField
           label={strings.details.middleNameLabel}
           defaultValue={values?.middleName ?? ''}
           autoComplete="off"
           clearable={false}
         />
-        <PrizmaTextField
-          label={strings.details.lastNameLabel}
-          required
-          requiredHint={strings.details.requiredHint}
-          defaultValue={values?.lastName ?? ''}
-          autoComplete="off"
-          clearable={false}
-        />
         <PrizmaDateField
           label={strings.details.dateOfBirthLabel}
           required

package/src/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/src/EkycLicenseScreen.tsx

@@ -3,7 +3,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, type PrizmaStepperState } from '@incodetech/prizma-core-web/stepper';
-import { PrizmaFormScreen, type PrizmaFormScreenProps } from './FormScreen';
+import { PrizmaFormScreen, PrizmaFormRow, type PrizmaFormScreenProps } from './FormScreen';
 import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
 import type {
   EkycLicenseState,
@@ -129,6 +129,10 @@ export const EkycLicenseScreen = forwardRef<HTMLDivElement, EkycLicenseScreenPro
         /* Left-aligned title block, same as page 1; a host `align` still wins. */
         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
         {...shell}
       >
         <PrizmaTextField
@@ -140,21 +144,23 @@ export const EkycLicenseScreen = forwardRef<HTMLDivElement, EkycLicenseScreenPro
           /* No section on this page draws the clear ✕. */
           clearable={false}
         />
-        <PrizmaDropdown
-          label={strings.license.stateLabel}
-          options={stateOptions}
-          defaultValue={values?.state ?? null}
-          disabled={busy}
-        />
-        <PrizmaDateField
-          label={strings.license.expirationLabel}
-          defaultValue={values?.expirationDate ?? ''}
-          autoComplete="off"
-          disabled={busy}
-          /* No `onCalendarClick` — see the note in `EkycDetailsScreen`: Core
-             renders the calendar as a decorative aria-hidden glyph without one,
-             so `calendarLabel` would do nothing and is not passed. */
-        />
+        <PrizmaFormRow>
+          <PrizmaDropdown
+            label={strings.license.stateLabel}
+            options={stateOptions}
+            defaultValue={values?.state ?? null}
+            disabled={busy}
+          />
+          <PrizmaDateField
+            label={strings.license.expirationLabel}
+            defaultValue={values?.expirationDate ?? ''}
+            autoComplete="off"
+            disabled={busy}
+            /* No `onCalendarClick` — see the note in `EkycDetailsScreen`: Core
+               renders the calendar as a decorative aria-hidden glyph without
+               one, so `calendarLabel` would do nothing and is not passed. */
+          />
+        </PrizmaFormRow>
       </PrizmaFormScreen>
     );
   },

package/src/EkycStrings.ts

@@ -57,6 +57,9 @@ export type EkycDetailsState = 'default' | 'focused' | 'filled';
  */
 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. */
@@ -139,6 +142,28 @@ export interface EkycStrings {
     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/src/EmailInputStrings.ts

@@ -63,7 +63,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/src/FaceMatchComparisonScreen.tsx

@@ -16,8 +16,10 @@ import './FaceMatchLayout.css';
  *  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>>;
 
 /**
@@ -179,7 +181,13 @@ export const FaceMatchComparisonScreen = forwardRef<
                           {label}
                         </PrizmaTooltip>
                       ) : null}
-                      <div className="face-match-cluster__photo">
+                      <div
+                        className={
+                          photos?.[role]
+                            ? 'face-match-cluster__photo'
+                            : 'face-match-cluster__photo face-match-cluster__photo--empty'
+                        }
+                      >
                         {photos?.[role]}
                       </div>
                     </div>