@incodetech/prizma-core-screens 0.1.0

package/src/CurpLayout.css

@@ -0,0 +1,92 @@
+/* CURP — module layout additions.
+ *
+ * THREE rules, and none of them declares spacing: the content column, the 24px
+ * gutters, the title → fields Spacing/32, the field gaps, the CTA column and
+ * the anchored footer all stay the foundation's (`ScreenLayout.css`,
+ * `FormScreen.css`). Nothing here re-declares an archetype value, invents a
+ * primitive or repaints one — every rule RELEASES a Core/foundation constraint
+ * that a purple CURP section contradicts, the same idiom as Phone Input's
+ * `width: auto` on Core's fill-width Dropdown (DEVIATIONS #PI-1).
+ */
+
+/* ── The generator's field stack is taller than the screen ───────────────────
+ * `CURP.Gene.default` is a 1051-tall frame: its `input-list` alone is 548 tall
+ * (six 78px labelled fields at Spacing/16) and the CONTENT frame grows to 861
+ * instead of the usual 654. At the 390×844 reference the column has ~470 for
+ * it, so the last dropdown and the CTA fall past the fold.
+ *
+ * Archetype E's `.prizma-form-screen__fields` is `flex: 1; min-height: 0` with
+ * no overflow behaviour — it was measured against Phone Input, whose forms are
+ * one or two fields — so the surplus is silently clipped by `ScreenShell`'s
+ * `overflow: hidden`, and (because the fields cannot shrink below
+ * `--prizma-input-size-field-height`) it first PAINTS OVER the sibling CTA.
+ * Screens are authored at 390×844 and never reflow (README / DEVIATIONS #17),
+ * so growing the frame is not an option either.
+ *
+ * The stack is therefore allowed to scroll INSIDE the column: the title, the
+ * CTA and the anchored tag stay put and the six fields pan, which is the
+ * closest a fixed 844 frame gets to Figma's taller page. It adds NO padding, NO
+ * gap and NO size of its own.
+ *
+ * Applied to EVERY `CURP.Gene.*` section including `dropdown`. The earlier
+ * build withheld it from `dropdown` to keep Core's absolutely-positioned menu
+ * from being clipped, and that traded one clipped element for a worse one: with
+ * `overflow: visible` the 548-tall stack overflowed its box and painted the
+ * open menu straight across the "Generate" button, which Figma (2058:16373)
+ * draws clear and unobstructed under the menu. The CTA is never allowed to be
+ * overlapped; the menu is handled by the next rule instead.
+ *
+ * FOUNDATION REQUEST: promote this to `FormScreen.css` as a
+ * `.prizma-form-screen__fields--scroll` variant (or make overflow the default),
+ * driven by a `scrollFields` prop on `PrizmaFormScreen`. Every long-form module
+ * still to come in Wave 3 — eKYC, eKYB, address entry — will hit the same wall.
+ */
+.curp-generate--scroll .prizma-form-screen__fields {
+  overflow-y: auto;
+}
+
+/* ── The open Gender menu must stay inside the scrolling column ──────────────
+ * `CURP.Gene.dropdown` exists to show the three gender rows, so they may not be
+ * clipped. Core's menu is `position: absolute; top: calc(100% + 8px)` on the
+ * field anchor with no portal (Dropdown.css:186-192) and no collision
+ * detection, so opening DOWNWARD from the 4th of six fields runs past the
+ * bottom of the scrolling box.
+ *
+ * The one section that forces the menu open therefore anchors it ABOVE its
+ * trigger — the flip a positioned menu normally performs for itself. Only the
+ * anchor edge changes: Core's own overlay, own menu, own Spacing/8 offset, own
+ * shadow, own rows. The stacking Figma draws (menu over the fields BELOW it)
+ * becomes menu over the fields above it, which is the concession a 390×844
+ * frame owes an 1111-tall Figma page.
+ *
+ * CORE REQUEST: `PrizmaDropdown` needs a portalled (or `position: fixed`) menu
+ * with flip/shift collision handling — today the menu cannot escape any
+ * scrolling or clipping ancestor. Every module that puts a dropdown in a long
+ * form inherits this.
+ */
+.curp-generate--menu-open .prizma-dropdown__overlay {
+  top: auto;
+  bottom: calc(100% + var(--prizma-spacing-8));
+}
+
+/* ── The invalid CURP field keeps its clear ✕ ────────────────────────────────
+ * `CURP.EnterCURP.error` (76:36434) draws three things at once: the red field,
+ * the "● Invalid CURP" row AND the grey clear ✕ at the field's right edge.
+ * Core renders that button (`PrizmaTextField clearable`) but reveals it only
+ * under `:focus-within:not(--error)` (TextField.css:119-121) — two guards a
+ * static error spec state can never satisfy, so the ✕ never appeared.
+ *
+ * This releases the guard for that ONE section. It is Core's own button, icon,
+ * box and color token — nothing is hand-rolled (§9/§10) and no ✕ glyph is
+ * declared here; only Core's `display: none` is lifted, and only where the
+ * button already carries Core's own `--show` state (i.e. the field has a
+ * value, exactly as Core decides). Every other CURP section keeps Core's
+ * behaviour: `filled` (79:1553) draws NO ✕ and gets none.
+ *
+ * CORE REQUEST: `PrizmaTextField` needs the `forceState` prop `PrizmaDropdown`
+ * already has (the open ask in DEVIATIONS #PI-7) plus a relaxed guard so the
+ * clear affordance can coexist with the error treatment, as Figma draws it.
+ */
+.curp-enter--error .prizma-input-textfield--error .prizma-input-textfield__clear--show {
+  display: inline-flex;
+}

package/src/CurpProcessingScreen.tsx

@@ -0,0 +1,75 @@
+import React, { forwardRef } from 'react';
+import {
+  PrizmaProcessingScreen,
+  type PrizmaProcessingScreenProps,
+} from './ProcessingScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { CurpProcessingVariant, CurpStrings } from './CurpStrings';
+import './ScreenLayout.css';
+
+export interface CurpProcessingScreenProps
+  extends Omit<
+    PrizmaProcessingScreenProps,
+    'status' | 'title' | 'subtitle' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `processing` slice. */
+  strings: CurpStrings;
+  /** Which spinner section to render. Default `verifying`. */
+  variant?: CurpProcessingVariant;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * CURP — the two in-flight screens, built on the Processing archetype
+ * (GUIDELINES.md §6-C, `PrizmaProcessingScreen`).
+ *
+ * ONE screen for both purple spinner sections, which are the same frame with
+ * different copy:
+ * - `verifying`  — `CURP.EnterCURP.veryfing` (the Figma layer name carries the
+ *   typo), the typed CURP being checked
+ * - `generating` — `CURP.Gene.generating`, the key being derived from the form
+ *
+ * Both are the pure spinner + H2 case with no button, which is exactly what
+ * §6-F reserves for C rather than the Result archetype. Measured: the Figma
+ * `middle container` centres the 108-tall spinner block in its 570 box
+ * ((570 − 108) / 2 = 231, the frame's own y), so the archetype's centred column
+ * is the right template — the counter-case DEVIATIONS #11 anticipated.
+ */
+export const CurpProcessingScreen = forwardRef<HTMLDivElement, CurpProcessingScreenProps>(
+  (
+    {
+      strings,
+      variant = 'verifying',
+      screenId = `curp-${variant}`,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const copy =
+      variant === 'generating'
+        ? strings.processing.generating
+        : strings.processing.verifying;
+
+    return (
+      <PrizmaProcessingScreen
+        ref={ref}
+        status="loading"
+        title={copy.title}
+        subtitle={copy.subtitle}
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={overrides}
+        onAction={onAction}
+        {...shell}
+      />
+    );
+  },
+);
+CurpProcessingScreen.displayName = 'CurpProcessingScreen';
+
+export default CurpProcessingScreen;

package/src/CurpResultScreen.tsx

@@ -0,0 +1,80 @@
+import React, { forwardRef } from 'react';
+import { PrizmaResultScreen, type PrizmaResultScreenProps } from './ResultScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { CurpResultVariant, CurpStrings } from './CurpStrings';
+import './ScreenLayout.css';
+
+export interface CurpResultScreenProps
+  extends Omit<
+    PrizmaResultScreenProps,
+    'status' | 'title' | 'subtitle' | 'glyph' | 'ctaLabel' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `result` slice its `variant` names. */
+  strings: CurpStrings;
+  /** Which verdict section to render. Default `verified`. */
+  variant?: CurpResultVariant;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * CURP — the three verdicts, built on the Result archetype
+ * (GUIDELINES.md §6-F, `PrizmaResultScreen`).
+ *
+ * ONE screen for the module's three purple verdict sections, which share the
+ * archetype's skeleton — nav → centred status mark + title block → CTA band →
+ * anchored tag — and differ only in status, copy and whether a button exists:
+ * - `verified`      — `CURP.EnterCURP.verify`, the positive mark. Figma draws
+ *   NO button here: the flow advances on its own once the key checks out, so
+ *   `ctaLabel` is optional in the copy contract and the band disappears.
+ * - `notVerified`   — `CURP.EnterCURP.notVerify`, the negative mark + "Try
+ *   again". Its sibling section `CURP.EnterCURP.notVerifyID` is an
+ *   override-free INSTANCE of the same frame — same mark, same copy, same
+ *   button — so it is this screen, not a second one.
+ * - `generateError` — `CURP.Gene.error`, the generator failing: negative mark,
+ *   a supporting line, and "Edit information" back to the form.
+ *
+ * Core's outline status marks are used, not Figma's two-tone filled discs — the
+ * icon-outline sweep of 2026-07-28 settled that for every module (DEVIATIONS
+ * #15, #DC-34), and this file's Figma is one sweep behind on all three frames.
+ */
+export const CurpResultScreen = forwardRef<HTMLDivElement, CurpResultScreenProps>(
+  (
+    {
+      strings,
+      variant = 'verified',
+      screenId = `curp-result-${variant}`,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const copy =
+      variant === 'notVerified'
+        ? strings.result.notVerified
+        : variant === 'generateError'
+          ? strings.result.generateError
+          : strings.result.verified;
+
+    return (
+      <PrizmaResultScreen
+        ref={ref}
+        status={variant === 'verified' ? 'success' : 'error'}
+        title={copy.title}
+        subtitle={copy.subtitle}
+        ctaLabel={copy.ctaLabel}
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={overrides}
+        onAction={onAction}
+        {...shell}
+      />
+    );
+  },
+);
+CurpResultScreen.displayName = 'CurpResultScreen';
+
+export default CurpResultScreen;

package/src/CurpStrings.ts

@@ -0,0 +1,178 @@
+// CURP — copy contract.
+//
+// Figma: `🏛️ CURP - Screens specs + Localization` (YFYCUUSIxLV6I8jnwWgWDW,
+// page 5:13191). TWO purple parent sections:
+//   CURP.EnterCURP — default / focused / filled / error / loading /
+//                    veryfing / verify / notVerify (+ notVerifyID)
+//   CURP.Gene      — default / dropdown / filled / generating / error / confirm
+//
+// The module is Mexico's national-ID (Clave Única de Registro de Población)
+// lookup: the user either TYPES a CURP and it is verified, or — when they do
+// not know it — GENERATES one from six identity fields and confirms the result.
+//
+// No hardcoded English anywhere in a screen: every visible string arrives here,
+// so the host's locale pack drives the module (the Figma file ships ES + PT
+// columns beside the EN one).
+
+/**
+ * The `CURP.EnterCURP.*` input sections. All five draw the SAME layout —
+ * nav → Title → Spacing/32 → one text field → primary + secondary CTA → tag —
+ * and differ only in field content and CTA state, which is exactly what
+ * GUIDELINES §6-E means by "states are separate screens sharing the identical
+ * layout":
+ * - `default` — empty field showing the placeholder, CTA enabled (Figma draws
+ *   it enabled even with nothing typed)
+ * - `focused` — empty field with the focus ring and the caret (keyboard up)
+ * - `filled`  — focus ring with a complete CURP typed
+ * - `error`   — negative field + clear ✕ + the "Invalid CURP" row
+ * - `loading` — both actions inert while the lookup runs; the spinner rides the
+ *   CTA, never the field (the Phone Input lesson, DEVIATIONS #PI-5)
+ */
+export type CurpEnterState = 'default' | 'focused' | 'filled' | 'error' | 'loading';
+
+/**
+ * The `CURP.Gene.*` form sections — the six-field generator:
+ * - `default`  — every field empty on its placeholder
+ * - `dropdown` — the Gender menu open over the form (Core's `forceOpen`)
+ * - `filled`   — every field carrying a value
+ */
+export type CurpGenerateState = 'default' | 'dropdown' | 'filled';
+
+/**
+ * The two spinner sections. `verifying` is `CURP.EnterCURP.veryfing` (the
+ * Figma layer name carries the typo); `generating` is `CURP.Gene.generating`.
+ */
+export type CurpProcessingVariant = 'verifying' | 'generating';
+
+/**
+ * The three verdict sections:
+ * - `verified`      — `CURP.EnterCURP.verify`, the positive mark, no CTA
+ * - `notVerified`   — `CURP.EnterCURP.notVerify`, the negative mark + retry
+ * - `generateError` — `CURP.Gene.error`, generation failed + "Edit information"
+ */
+export type CurpResultVariant = 'verified' | 'notVerified' | 'generateError';
+
+/** One selectable row in the Gender / Birth-state menus. Runtime data, not
+ *  copy — the host supplies its own list (the state catalogue is 32 entries and
+ *  the gender set is a product decision), exactly as Phone Input takes its dial
+ *  codes as data rather than strings. */
+export interface CurpOption {
+  /** Stable value, e.g. `F` / `M` / `X`, or a 2-letter state code. */
+  value: string;
+  /** The row label as drawn. */
+  label: string;
+}
+
+/** The values the generator form carries. Runtime data, never copy. */
+export interface CurpGenerateValues {
+  firstName?: string;
+  firstLastName?: string;
+  secondLastName?: string;
+  /** A `CurpOption.value` from `genders`. */
+  gender?: string;
+  /** As typed into the date field, e.g. `07/10/1990`. */
+  dateOfBirth?: string;
+  /** A `CurpOption.value` from `states`. */
+  birthState?: string;
+}
+
+/** Copy for one labelled field of the generator form. */
+export interface CurpFieldStrings {
+  /** Visible label ("First name"). The required `*` is appended by Core from
+   *  `CurpStrings.requiredHint`, never baked into this string. */
+  label: string;
+  /** Placeholder inside the field ("Your first name *"). */
+  placeholder?: string;
+}
+
+export interface CurpStrings {
+  /** "verified by" attribution in the footer tag. */
+  verifiedLabel: string;
+  /** Accessible name for the logo nav row. */
+  navLabel?: string;
+  /**
+   * Suffix Core appends to a required field's label — the `*` every
+   * `CURP.Gene.*` label carries. Passed to Core's own `requiredHint` prop so
+   * the marker is localizable and never hardcoded in a screen.
+   */
+  requiredHint?: string;
+
+  /** CURP.EnterCURP.{default,focused,filled,error,loading} */
+  enter: {
+    /** H2 ("Enter your CURP"). */
+    title: string;
+    /** H5 — the purple sections draw none, kept for hosts that want one. */
+    subtitle?: string;
+    /** Field placeholder ("Your CURP"). */
+    placeholder: string;
+    /** Accessible label for the field — Figma draws no visible label row, so
+     *  the copy rides `aria-label` (the #PI-4 precedent). */
+    fieldLabel?: string;
+    /** Accessible name for the clear ✕ shown on the `error` section. */
+    clearLabel?: string;
+    /** Error row on the `error` state ("Invalid CURP"). */
+    errorText: string;
+    /** Primary CTA ("Continue"). */
+    ctaLabel: string;
+    /** Accessible busy label while the lookup runs (`loading`). */
+    ctaLoadingLabel?: string;
+    /** Secondary CTA below the primary ("I don't have a CURP") — it branches
+     *  into the generator. Emits `secondary`. */
+    noCurpLabel: string;
+  };
+
+  /** CURP.Gene.{default,dropdown,filled} */
+  generate: {
+    /** H2 ("Generate your CURP"). */
+    title: string;
+    /** H5 ("All fields marked with * are required."). */
+    subtitle?: string;
+    firstName: CurpFieldStrings;
+    firstLastName: CurpFieldStrings;
+    secondLastName: CurpFieldStrings;
+    gender: CurpFieldStrings & {
+      /** Search placeholder inside the open menu, when the host makes it
+       *  searchable. */
+      searchPlaceholder?: string;
+    };
+    dateOfBirth: CurpFieldStrings & {
+      /** Accessible name for Core's trailing calendar affordance. */
+      calendarLabel?: string;
+    };
+    birthState: CurpFieldStrings & { searchPlaceholder?: string };
+    /** Primary CTA ("Generate"). */
+    ctaLabel: string;
+    /** Accessible busy label, for hosts that keep the user on the form while
+     *  the generator runs instead of moving to the spinner screen. */
+    ctaLoadingLabel?: string;
+  };
+
+  /** CURP.Gene.confirm — the generated CURP shown back for confirmation. */
+  confirm: {
+    /** H2 ("Confirm your CURP"). */
+    title: string;
+    subtitle?: string;
+    /** Accessible label for the read-back field (no visible label row). */
+    fieldLabel?: string;
+    /** Primary CTA ("Continue"). */
+    ctaLabel: string;
+  };
+
+  /** The two spinner screens. */
+  processing: {
+    /** CURP.EnterCURP.veryfing ("Verifying your CURP…"). */
+    verifying: { title: string; subtitle?: string };
+    /** CURP.Gene.generating ("Generating CURP…"). */
+    generating: { title: string; subtitle?: string };
+  };
+
+  /** The three verdict screens. */
+  result: {
+    /** CURP.EnterCURP.verify ("CURP verified!") — Figma draws no CTA. */
+    verified: { title: string; subtitle?: string; ctaLabel?: string };
+    /** CURP.EnterCURP.notVerify ("CURP not verified" / "Try again"). */
+    notVerified: { title: string; subtitle?: string; ctaLabel: string };
+    /** CURP.Gene.error ("Couldn't generate CURP" / "Edit information"). */
+    generateError: { title: string; subtitle?: string; ctaLabel: string };
+  };
+}

package/src/DataSharingConsentConsentScreen.tsx

@@ -0,0 +1,223 @@
+import React, { forwardRef, Fragment, type ReactNode } from 'react';
+import {
+  PrizmaCheckbox,
+  type PrizmaConsentSegment,
+} from '@incodetech/prizma-core-web/checkbox';
+import { PrizmaFormScreen, type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type {
+  DataSharingConsentState,
+  DataSharingConsentStrings,
+} from './DataSharingConsentStrings';
+import './ScreenLayout.css';
+import './DataSharingConsentLayout.css';
+
+export interface DataSharingConsentConsentScreenProps
+  extends Omit<
+    PrizmaFormScreenProps,
+    | 'title'
+    | 'subtitle'
+    | 'ctaLabel'
+    | 'ctaDisabled'
+    | 'verifiedLabel'
+    | 'children'
+    | 'navLabel'
+    | 'linkLabel'
+    | 'linkContent'
+    // The column rhythm and the panning stack are the section's, not a host's.
+    | 'fieldsOffset'
+    | 'fieldsGap'
+    | 'scrollFields'
+  > {
+  /** Module copy — this screen reads the `consent` slice. */
+  strings: DataSharingConsentStrings;
+  /** Which purple `User Consent` treatment to render. Default `default`. */
+  state?: DataSharingConsentState;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Renders an ordered segment list as a line of copy carrying inline links —
+ * the same contract Core's `PrizmaCheckbox size="L"` uses for its own body, so
+ * one shape of copy serves both the disclosure paragraph and the consent cards.
+ * A link is a real `<a href>` (it opens a legal document, it does not advance
+ * the flow) and it additionally emits `tertiary` so a host can intercept it —
+ * distinct from `cta`, per the rule that a sentence carrying links is not one
+ * button (DEVIATIONS #PI-10).
+ */
+function renderSegments(
+  segments: PrizmaConsentSegment[],
+  onLink?: () => void,
+): ReactNode {
+  return segments.map((seg, i) =>
+    typeof seg === 'string' ? (
+      <Fragment key={i}>{seg}</Fragment>
+    ) : (
+      <a
+        key={i}
+        className="data-sharing-consent__body-link"
+        href={seg.href}
+        target={seg.target}
+        rel={seg.rel}
+        onClick={(e) => {
+          seg.onClick?.(e);
+          onLink?.();
+        }}
+      >
+        {seg.text}
+      </a>
+    ),
+  );
+}
+
+/**
+ * Data Sharing Consent — the biometric-disclosure consent screen, built on the
+ * Form archetype (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for the whole purple `User Consent` section (27151:441): the
+ * master component (27151:321), the taller every-consent variant (29645:5306)
+ * and the `🔧 Behavior` frame (27198:2661) share an identical skeleton — nav →
+ * Title (H2, no subtitle) → the legal disclosure → one or more consent cards →
+ * primary CTA → tag — and differ ONLY in how many cards are listed, whether
+ * they are ticked, and whether the CTA is released.
+ *
+ * ONE screen for TWO MODULES, too — `data-sharing-consent` and `user-consent`
+ * are separate SDK modules drawing this same screen, so a host passes its own
+ * `screenId` prefix and nothing else changes. See `DataSharingConsentStrings`.
+ *
+ * WHY ARCHETYPE E AND NOT G. §6-G names "consent" among its consumers and its
+ * title → list offset is the Spacing/24 this section draws, so G was the
+ * obvious first read. It cannot serve this module: `PrizmaListScreen` has **no
+ * `ctaDisabled` slot**, and the gated CTA is the whole point of a consent
+ * screen — Figma greys "Continue" on two of the four sections and releases it
+ * on the other two. Archetype E is also the truthful reading of the middle: a
+ * `PrizmaCheckbox` is a real `<input type="checkbox">` that joins the form, so
+ * this is a form whose validity gates its CTA, not a static card list.
+ *
+ * THE COLUMN RHYTHM IS Spacing/24, NOT E'S DEFAULT 32/16. The master component
+ * (27151:321) draws a flat 24 down the whole middle — title 0→28, the
+ * disclosure at y=52, the disclosure ending 304 and the first consent card at
+ * 328 — and the tall variant (29645:5306) repeats it between every card (459 →
+ * 557 → 655, each 74 tall). E's own 32/16 is Phone Input's measured value
+ * (#PI-2) and stays the archetype default; this screen SELECTS 24 for both
+ * through the archetype's `fieldsOffset` / `fieldsGap` slots. Nothing is
+ * re-declared in `DataSharingConsentLayout.css` — the values live once, in
+ * `FormScreen.css`, keyed off the Prizma spacing scale. DEVIATIONS #DSC-1.
+ *
+ * Three things are deliberate:
+ *
+ * 1. The consent card is Core's `PrizmaCheckbox size="L"` — the component IS
+ *    the tinted container Figma draws (Spacing/20/16 padding, the container
+ *    radius, `Surface/Brand/50`, the 28×28 box, the Size-S body). Nothing about
+ *    the card is composed here.
+ * 2. The boxes are STATIC, like every other spec state in this package: Core's
+ *    `checked` is a required controlled prop and the component always wires its
+ *    own `onChange`, so a screen carries one tick state and raises no React
+ *    warning. `disabled` is NOT used — Figma draws these cards on the live
+ *    surface in every section, and `disabled` would repaint them
+ *    `Surface/Neutral/50` (the #PI-6 lesson: never borrow a semantic state to
+ *    make something inert).
+ * 3. The CTA is gated by `ctaDisabled`, which is Core's own
+ *    `button/primary/surface|text/disabled` treatment — the grey "Continue" the
+ *    master frame draws.
+ * 4. The refusal states pass Core's `error` + `errorText` STRAIGHT THROUGH to
+ *    the checkbox and paint nothing themselves. The card keeps its fill, takes
+ *    no border, and the box keeps its default border; the message row below the
+ *    card is the whole visible error (#1925). A screen that added a wash or an
+ *    outline here would be re-deciding a call the component already made.
+ */
+export const DataSharingConsentConsentScreen = forwardRef<
+  HTMLDivElement,
+  DataSharingConsentConsentScreenProps
+>(
+  (
+    {
+      strings,
+      state = 'default',
+      screenId = `data-sharing-consent-${state}`,
+      className,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    // The master frame lists the mandatory consent alone; the tall variant and
+    // the Behavior frame list every consent the flow asks for.
+    const listsEveryConsent =
+      state === 'multiple' ||
+      state === 'multipleAccepted' ||
+      state === 'multipleRejected';
+    // Ticked on the two sections Figma draws with the blue box and the released
+    // CTA; unticked — and therefore CTA-greyed — everywhere else.
+    const accepted = state === 'accepted' || state === 'multipleAccepted';
+    // Continue was pressed and refused. Never true at the same time as
+    // `accepted`: there is nothing to refuse once the consents are ticked.
+    const rejected = state === 'rejected' || state === 'multipleRejected';
+
+    const items = listsEveryConsent
+      ? strings.consent.items
+      : strings.consent.items.slice(0, 1);
+
+    return (
+      <PrizmaFormScreen
+        ref={ref}
+        /* Scopes the module's one text style (the legal disclosure paragraph
+           and its inline document link). It declares no spacing. */
+        className={['data-sharing-consent', className].filter(Boolean).join(' ')}
+        title={strings.consent.title}
+        subtitle={strings.consent.subtitle}
+        /* The section's flat Spacing/24 column rhythm — selected from the
+           spacing scale, not declared. See the docstring above. */
+        fieldsOffset="24"
+        fieldsGap="24"
+        /* The disclosure is host-supplied legal copy: it can outgrow the 844
+           frame on ANY of the four states, so the stack pans on all of them —
+           the archetype clips it Spacing/16 above the CTA, as 29645:5306 draws
+           the sliced second card. */
+        scrollFields
+        ctaLabel={strings.consent.ctaLabel}
+        /* "Continue" stays inert until the consents are ticked — Core's own
+           disabled primary, the grey button the master frame draws. */
+        ctaDisabled={!accepted}
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={overrides}
+        onAction={onAction}
+        {...shell}
+      >
+        <p className="data-sharing-consent__body">
+          {renderSegments(strings.consent.body, () =>
+            onAction?.({ type: 'tertiary', screenId }),
+          )}
+        </p>
+        {items.map((item, i) => (
+          <PrizmaCheckbox
+            key={i}
+            size="L"
+            checked={accepted}
+            aria-label={item.ariaLabel}
+            /* A refusal is about the MANDATORY consents only — an optional one
+               left unticked is a choice, not a mistake — and it cannot survive
+               the box being ticked. */
+            error={rejected && !!item.required && !accepted}
+            errorText={strings.consent.errorText}
+            /* The `*` on a mandatory consent rides `requiredHint` so it stays
+               localizable rather than being baked into the copy (#CURP-4). */
+            segments={
+              item.required && strings.requiredHint
+                ? [...item.segments, strings.requiredHint]
+                : item.segments
+            }
+          />
+        ))}
+      </PrizmaFormScreen>
+    );
+  },
+);
+DataSharingConsentConsentScreen.displayName = 'DataSharingConsentConsentScreen';
+
+export default DataSharingConsentConsentScreen;