@incodetech/prizma-core-screens 0.1.0

package/src/CaptureOverlay.css

@@ -0,0 +1,55 @@
+/* CaptureOverlay — the one shared capture vignette (GUIDELINES.md §6-D, §7).
+ *
+ * The transparent window carries the scrim as an oversized box-shadow, so the
+ * dimmed surround always hugs the window's rounded geometry. Hardcoded values
+ * below are geometry fixed by design (verified absent from the token set):
+ * the 2000px scrim spread, the rgba(0,0,0,.8) scrim, the 35%-white default
+ * border, and the ID-1 card aspect ratio.
+ */
+
+.prizma-capture-overlay {
+  position: relative;
+  overflow: hidden;
+  flex-shrink: 0;
+  border-radius: var(--prizma-border-radius-medium);
+  border: 4px solid rgba(255, 255, 255, 0.35); /* hardcoded — Figma overlay frame, no token */
+  box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.8); /* hardcoded — the vignette scrim, no token */
+}
+
+/* Ring (face): 342×342 at the 390 reference → 87.7cqw, capped at design size. */
+.prizma-capture-overlay--ring {
+  width: min(87.7cqw, 342px);
+  aspect-ratio: 1;
+  border-radius: var(--prizma-border-radius-full);
+  margin-inline: auto;
+}
+
+/* Landscape (ID card): full content width, ID-1 card ratio. */
+.prizma-capture-overlay--landscape {
+  width: 100%;
+  aspect-ratio: 1.586; /* hardcoded — ISO/IEC 7810 ID-1 card ratio */
+}
+
+/* Portrait (document / proof of address): full content width, letter-ish ratio. */
+.prizma-capture-overlay--portrait {
+  width: 100%;
+  aspect-ratio: 0.72; /* hardcoded — Studio portrait document frame ratio */
+}
+
+.prizma-capture-overlay--focused {
+  border-color: var(--prizma-border-status-focus);
+}
+
+.prizma-capture-overlay--success {
+  border-color: var(--prizma-border-status-positive-static);
+}
+
+/* Window content (camera feed / captured still) fills the window. */
+.prizma-capture-overlay > img,
+.prizma-capture-overlay > video {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

package/src/CaptureOverlay.tsx

@@ -0,0 +1,56 @@
+import React, { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import './CaptureOverlay.css';
+
+export type PrizmaCaptureOverlayShape = 'ring' | 'portrait' | 'landscape';
+export type PrizmaCaptureOverlayState = 'default' | 'focused' | 'success';
+
+export interface PrizmaCaptureOverlayProps extends ComponentPropsWithoutRef<'div'> {
+  /** Window geometry: `ring` (face, circular), `landscape` (ID card),
+   *  `portrait` (document / proof of address). */
+  shape: PrizmaCaptureOverlayShape;
+  /** Border treatment: `default` (35% white), `focused` (focus token),
+   *  `success` (positive token). */
+  state?: PrizmaCaptureOverlayState;
+  /** Content inside the transparent window (camera feed / captured still). */
+  children?: ReactNode;
+}
+
+/**
+ * @deprecated DO NOT USE — scheduled for removal. Use Core instead:
+ * `PrizmaIdCapture` (`type="id" | "passport" | "poa"`, `mode="overlay"`,
+ * `scrim`) or `PrizmaSelfieCapture`.
+ *
+ * This component was written from the Studio-era guidelines' description of the
+ * capture vignette without first checking that the design system already ships
+ * it. It does, and better: Core's scrim is
+ * `box-shadow: 0 0 0 200vmax var(--prizma-surface-neutral-900-80-static)`
+ * (tokenized, viewport-relative) and it carries the real id-h / id-v /
+ * passport-h / passport-v / glare geometry, while this file hardcodes
+ * `rgba(0,0,0,.8)` at a fixed 2000px spread over three generic shapes.
+ *
+ * Keeping a local re-implementation of a Core primitive is exactly the drift
+ * this package exists to end. Zero modules use it (face-capture and face-match
+ * use `PrizmaSelfieCapture`; document-capture uses `PrizmaIdCapture`).
+ * DEVIATIONS.md #F-26.
+ */
+export const PrizmaCaptureOverlay = forwardRef<HTMLDivElement, PrizmaCaptureOverlayProps>(
+  ({ shape, state = 'default', className, children, ...rest }, ref) => (
+    <div
+      ref={ref}
+      className={[
+        'prizma-capture-overlay',
+        `prizma-capture-overlay--${shape}`,
+        `prizma-capture-overlay--${state}`,
+        className ?? '',
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      {...rest}
+    >
+      {children}
+    </div>
+  ),
+);
+PrizmaCaptureOverlay.displayName = 'PrizmaCaptureOverlay';
+
+export default PrizmaCaptureOverlay;

package/src/CaptureScreen.tsx

@@ -0,0 +1,121 @@
+import React, { forwardRef, type ReactNode } from 'react';
+import {
+  PrizmaSelfieCapture,
+  type PrizmaSelfieCaptureState,
+} from '@incodetech/prizma-core-web/selfie-capture';
+import { PrizmaTag } from '@incodetech/prizma-core-web/tag';
+import { PrizmaScreenShell, type PrizmaScreenShellProps } from './ScreenShell';
+import { PrizmaScreenNav } from './ScreenNav';
+import type {
+  PrizmaScreenActionHandler,
+  PrizmaScreenChromeProps,
+  PrizmaScreenOverrides,
+} from './types';
+import './ScreenLayout.css';
+
+export interface PrizmaCaptureScreenProps
+  extends Omit<PrizmaScreenShellProps, 'dark' | 'title'>,
+    PrizmaScreenChromeProps {
+  /** Where the selfie flow is — forwarded to PrizmaSelfieCapture. */
+  state?: PrizmaSelfieCaptureState;
+  /**
+   * Is the LIVE CAMERA FEED open? Default `true`.
+   *
+   * Only feed-open screens count as "capture screens" (owner rule 2026-08-18):
+   * `uploading` / `processing` / `success` reuse this archetype's geometry —
+   * Core dissolves the stage into a spinner or status mark (DEVIATIONS #11) —
+   * but the camera is closed, so they are ordinary screens: header shown, and
+   * they follow the app theme instead of pinning light.
+   */
+  cameraOpen?: boolean;
+  /** Live camera feed (<video>) or captured still (<img>). */
+  camera?: ReactNode;
+  /** Instruction line under the ring (e.g. "Look at the camera"). Rendered by
+   *  PrizmaSelfieCapture as Headline/H4 at the designed offset — this is the
+   *  ONLY place a capture instruction belongs (DEVIATIONS #12, #14). */
+  feedbackText?: string;
+  /** Manual capture mode — shutter button + manual instruction copy. */
+  isManual?: boolean;
+  manualFeedbackText?: string;
+  /** Per-state status copy (uploading / success / error / warning). */
+  statusLabels?: Partial<Record<PrizmaSelfieCaptureState, string>>;
+  /** "verified by" attribution copy for the footer tag. */
+  verifiedLabel: string;
+  navLabel?: string;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Archetype B — Capture / Liveness ring (GUIDELINES.md §6-B).
+ * Nav → capture stage → tag pinned to the bottom. The ring offset (40), the
+ * instruction gap (32), the instruction typography (H4), the silhouette,
+ * and every verdict state live INSIDE Core's PrizmaSelfieCapture — this
+ * archetype adds no offsets of its own (DEVIATIONS #12, #14) and never
+ * re-implements any of it (§7).
+ *
+ * Core also models `uploading` / `success` as capture STATES (the stage
+ * dissolves into the spinner / status title in the ring's own slot), so
+ * loading and result screens of a capture module use this archetype too —
+ * not the centered Processing archetype (DEVIATIONS #11).
+ */
+export const PrizmaCaptureScreen = forwardRef<HTMLDivElement, PrizmaCaptureScreenProps>(
+  (
+    {
+      showHeader,
+      showFooter = true,
+      cameraOpen = true,
+      state,
+      camera,
+      feedbackText,
+      isManual,
+      manualFeedbackText,
+      statusLabels,
+      verifiedLabel,
+      navLabel,
+      screenId,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    // Pin light ONLY while the camera feed is open: Core paints the live
+    // capture area with Static inks because "the capture screen stays WHITE in
+    // both modes — light is needed for the shot" (SelfieCapture.css, owner
+    // 2026-07-14). Feed-closed screens are ordinary screens and follow the app.
+    // DEVIATIONS #F-27.
+    <PrizmaScreenShell ref={ref} theme={cameraOpen ? 'light' : undefined} {...shell}>
+      {/* Feed-open capture screens are footer-only by default: dense screens,
+          and the space is reserved for flashlight / hologram / accepted
+          documents. Supplying `overrides.logo` IS the client opt-in. Once the
+          feed closes (uploading / processing / success) the screen is ordinary
+          and the header returns. Owner rule 2026-08-18. */}
+      <PrizmaScreenNav
+        reserved={!(showHeader ?? (cameraOpen ? Boolean(overrides?.logo) : true))}
+        logo={overrides?.logo}
+        navLabel={navLabel}
+      />
+      <div className="prizma-screen-layout__content prizma-screen-layout__content--capture">
+        <PrizmaSelfieCapture
+          state={state}
+          camera={camera}
+          showFeedback={Boolean(feedbackText ?? manualFeedbackText)}
+          feedbackText={feedbackText}
+          isManual={isManual}
+          manualFeedbackText={manualFeedbackText}
+          statusLabels={statusLabels}
+        />
+        {showFooter ? (
+          <div className="prizma-screen-layout__footer prizma-screen-layout__footer--pinned">
+            <PrizmaTag label={verifiedLabel} />
+          </div>
+        ) : null}
+      </div>
+    </PrizmaScreenShell>
+  ),
+);
+PrizmaCaptureScreen.displayName = 'PrizmaCaptureScreen';
+
+export default PrizmaCaptureScreen;

package/src/CurpConfirmScreen.tsx

@@ -0,0 +1,75 @@
+import React, { forwardRef } from 'react';
+import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
+import { PrizmaFormScreen, type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { CurpStrings } from './CurpStrings';
+import './ScreenLayout.css';
+
+export interface CurpConfirmScreenProps
+  extends Omit<
+    PrizmaFormScreenProps,
+    'title' | 'subtitle' | 'ctaLabel' | 'verifiedLabel' | 'children' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `confirm` slice. */
+  strings: CurpStrings;
+  /** The CURP the generator produced, read back for confirmation. */
+  value?: string;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * CURP — the generated-CURP confirmation, built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * Figma: the purple `CURP.Gene.confirm` section. Structurally it is
+ * `CurpEnterScreen` with one field and one CTA — nav → Title → Spacing/32 →
+ * field → CTA → tag — but the field is a READ-BACK of what the generator
+ * produced rather than an input, and there is no secondary action, so it stays
+ * its own screen rather than a sixth state of the entry form.
+ *
+ * The field is the one place in this module where Core's disabled surface is
+ * correct: Figma paints it `input/surface/disabled` grey with the value in full
+ * ink, which is exactly what `disabled` renders. (`readOnly` would paint the
+ * same grey and is the semantically better match, but it is the prop the pilot
+ * was told not to reach for by reflex — DEVIATIONS #PI-6 — and on a static spec
+ * screen the two are visually identical, so the plainer one is used.)
+ */
+export const CurpConfirmScreen = forwardRef<HTMLDivElement, CurpConfirmScreenProps>(
+  (
+    {
+      strings,
+      value,
+      screenId = 'curp-confirm',
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaFormScreen
+      ref={ref}
+      title={strings.confirm.title}
+      subtitle={strings.confirm.subtitle}
+      ctaLabel={strings.confirm.ctaLabel}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    >
+      <PrizmaTextField
+        /* No visible label row in the section — the title carries the meaning
+           (DEVIATIONS #PI-4). */
+        aria-label={strings.confirm.fieldLabel}
+        defaultValue={value ?? ''}
+        disabled
+      />
+    </PrizmaFormScreen>
+  ),
+);
+CurpConfirmScreen.displayName = 'CurpConfirmScreen';
+
+export default CurpConfirmScreen;

package/src/CurpEnterScreen.tsx

@@ -0,0 +1,149 @@
+import React, { forwardRef } from 'react';
+import { PrizmaTextField } from '@incodetech/prizma-core-web/text-field';
+import { PrizmaButton } from '@incodetech/prizma-core-web/button';
+import { PrizmaFormScreen, type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { CurpEnterState, CurpStrings } from './CurpStrings';
+import './ScreenLayout.css';
+import './CurpLayout.css';
+
+export interface CurpEnterScreenProps
+  extends Omit<
+    PrizmaFormScreenProps,
+    'title' | 'subtitle' | 'ctaLabel' | 'verifiedLabel' | 'children' | 'navLabel' | 'linkContent'
+  > {
+  /** Module copy — this screen reads the `enter` slice. */
+  strings: CurpStrings;
+  /** Which purple `CURP.EnterCURP.*` section to render. Default `default`. */
+  state?: CurpEnterState;
+  /** The CURP as typed. Empty renders the placeholder. */
+  value?: string;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * CURP — the CURP-entry screen, built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for all five purple `CURP.EnterCURP.*` input sections
+ * (`default` / `focused` / `filled` / `error` / `loading`): measured against the
+ * 390 frames they share an identical skeleton — nav → Title (H2, no subtitle)
+ * → Spacing/32 → a single text field → primary CTA → secondary CTA → tag — and
+ * differ ONLY in field content, field treatment and CTA state.
+ *
+ * Three things are deliberate, each a lesson the Phone Input pilot paid for:
+ *
+ * 1. The field is UNCONTROLLED (`defaultValue`). A screen is one static spec
+ *    state, so no `onChange` is needed — and Core's `readOnly`, the other way
+ *    to make a field inert, paints the DISABLED grey surface on states Figma
+ *    draws white (DEVIATIONS #PI-6). `disabled` is set ONLY on `loading`, the
+ *    one section Figma actually greys.
+ * 2. `focused` and `filled` get Core's OWN `--focused` modifier through
+ *    `className` — the class its CSS already implements beside `:focus-within`.
+ *    `PrizmaTextField` has no `forceState` prop yet, unlike `PrizmaDropdown`
+ *    (DEVIATIONS #PI-7); nothing is re-styled here.
+ * 3. The in-flight spinner rides the CTA (`ctaLoading`), never the field
+ *    (DEVIATIONS #PI-5).
+ *
+ * The secondary action, "I don't have a CURP", is drawn by every section as a
+ * full-width OUTLINED button — Core's `PrizmaButton variant="secondary"` — sat
+ * Spacing/16 under the primary. Archetype E has no `secondaryCtaLabel` slot
+ * (archetype F does), so the button is composed into the archetype's
+ * `linkContent` slot: no primitive is invented, no layout is declared, and the
+ * two actions stay distinguishable (`cta` vs `secondary`, the #PI-10 rule).
+ * The gap is reported for promotion — see the module's DEVIATIONS rows.
+ */
+export const CurpEnterScreen = forwardRef<HTMLDivElement, CurpEnterScreenProps>(
+  (
+    {
+      strings,
+      state = 'default',
+      value,
+      screenId = `curp-enter-${state}`,
+      className,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    // Figma treats the five sections as four distinct field treatments:
+    // `loading` greys the field and both actions (the lookup is in flight and
+    // the form is inert); `error` paints the negative surface with the clear ✕
+    // and the "Invalid CURP" row; `focused` / `filled` draw the blue focus ring
+    // with the caret; `default` is the plain resting field on the white
+    // surface.
+    const busy = state === 'loading';
+    const invalid = state === 'error';
+    const focused = state === 'focused' || state === 'filled';
+
+    return (
+      <PrizmaFormScreen
+        ref={ref}
+        /* Scopes the one module rule that lets the `error` section keep the
+           clear ✕ Figma draws inside the invalid field — Core renders the
+           button but hides it behind a `:focus-within:not(--error)` guard a
+           static spec state can never satisfy. See CurpLayout.css and the Core
+           request recorded there. Nothing is hand-rolled: the rule only lifts
+           Core's `display: none`. */
+        className={[
+          'curp-enter',
+          invalid ? 'curp-enter--error' : '',
+          className,
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        title={strings.enter.title}
+        subtitle={strings.enter.subtitle}
+        ctaLabel={strings.enter.ctaLabel}
+        /* The `loading` section swaps the CTA label for Core's spinner. */
+        ctaLoading={busy}
+        ctaLoadingLabel={strings.enter.ctaLoadingLabel}
+        linkContent={
+          <PrizmaButton
+            variant="secondary"
+            size="L"
+            /* Figma greys this action too while the lookup runs. */
+            disabled={busy}
+            onClick={() => onAction?.({ type: 'secondary', screenId })}
+          >
+            {strings.enter.noCurpLabel}
+          </PrizmaButton>
+        }
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={overrides}
+        onAction={onAction}
+        {...shell}
+      >
+        <PrizmaTextField
+          className={focused ? 'prizma-input-textfield--focused' : undefined}
+          /* Figma draws no visible label row — the title and the placeholder
+             carry the meaning — so the copy rides `aria-label` rather than
+             Core's visible `label` slot (DEVIATIONS #PI-4). */
+          aria-label={strings.enter.fieldLabel}
+          placeholder={strings.enter.placeholder}
+          defaultValue={value ?? ''}
+          /* A CURP is an 18-character uppercase key. */
+          autoCapitalize="characters"
+          autoComplete="off"
+          spellCheck={false}
+          disabled={busy}
+          error={invalid}
+          errorText={invalid ? strings.enter.errorText : undefined}
+          /* The clear ✕ is drawn only on the error section (76:36434); the
+             `filled` section (79:1553) draws none. Core still owns WHEN it
+             shows — its `--show` state needs a value in the field. */
+          clearable={invalid}
+          clearLabel={strings.enter.clearLabel}
+        />
+      </PrizmaFormScreen>
+    );
+  },
+);
+CurpEnterScreen.displayName = 'CurpEnterScreen';
+
+export default CurpEnterScreen;

package/src/CurpGenerateScreen.tsx

@@ -0,0 +1,172 @@
+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 { PrizmaFormScreen, type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type {
+  CurpGenerateState,
+  CurpGenerateValues,
+  CurpOption,
+  CurpStrings,
+} from './CurpStrings';
+import './ScreenLayout.css';
+import './CurpLayout.css';
+
+export interface CurpGenerateScreenProps
+  extends Omit<
+    PrizmaFormScreenProps,
+    'title' | 'subtitle' | 'ctaLabel' | 'verifiedLabel' | 'children' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `generate` slice. */
+  strings: CurpStrings;
+  /** Which purple `CURP.Gene.*` section to render. Default `default`. */
+  state?: CurpGenerateState;
+  /** The six field values. Empty fields fall back to their placeholders. */
+  values?: CurpGenerateValues;
+  /** Selectable genders. Runtime data, not copy — the host owns the set. */
+  genders?: CurpOption[];
+  /** Selectable birth states (the 32 Mexican entities plus "born abroad").
+   *  Runtime data — a catalogue, never a string table. */
+  states?: CurpOption[];
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * CURP — the generator form, built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for the three purple `CURP.Gene.*` form sections
+ * (`default` / `dropdown` / `filled`): identical layout — nav → Title (H2 +
+ * H5) → Spacing/32 → six labelled fields at Spacing/16 → CTA → tag — differing
+ * only in field content and whether the Gender menu is open.
+ *
+ * Unlike `CurpEnterScreen`, these fields DO carry visible labels: Figma draws
+ * "First name *", "Gender *" and so on above every field, which is Core's
+ * `label` slot exactly. The required `*` is Core's `requiredHint` suffix rather
+ * than part of the label string, so a locale can move or replace the marker.
+ *
+ * The date field is Core's `PrizmaDateField` (the `Input / Date` kind, with its
+ * DD/MM/YYYY mask and trailing calendar affordance) — the picker itself belongs
+ * to the OS by Core's contract, so no `onCalendarClick` is wired on a static
+ * spec screen and the icon stays decorative.
+ *
+ * The `dropdown` section IS the open-menu spec state, which Core exposes as the
+ * documentation-only `forceOpen` (a screen is one static state, never a live
+ * interaction) — the same mechanism Phone Input's `countryCode` section uses.
+ */
+export const CurpGenerateScreen = forwardRef<HTMLDivElement, CurpGenerateScreenProps>(
+  (
+    {
+      strings,
+      state = 'default',
+      values,
+      genders = [],
+      states = [],
+      screenId = `curp-generate-${state}`,
+      className,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const copy = strings.generate;
+
+    return (
+      <PrizmaFormScreen
+        ref={ref}
+        /* Scopes the two module rules in CurpLayout.css (see the foundation and
+           Core requests recorded there):
+           - `--scroll` lets the six-field stack scroll inside the 844 frame
+             instead of overflowing its box and painting over the CTA. EVERY
+             section gets it, `dropdown` included — Figma draws "Generate"
+             clear and unobstructed under the open menu.
+           - `--menu-open` flips Core's absolutely-positioned menu above its
+             trigger on the one section that forces it open, so the three
+             gender rows stay inside the scrolling column. */
+        className={[
+          'curp-generate',
+          'curp-generate--scroll',
+          state === 'dropdown' ? 'curp-generate--menu-open' : '',
+          className,
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        title={copy.title}
+        subtitle={copy.subtitle}
+        ctaLabel={copy.ctaLabel}
+        ctaLoadingLabel={copy.ctaLoadingLabel}
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={overrides}
+        onAction={onAction}
+        {...shell}
+      >
+        {/* Every field is UNCONTROLLED: a screen is one static spec state, so
+            no `onChange` is needed — and Core's `readOnly` would paint the
+            DISABLED grey surface on states Figma draws white
+            (DEVIATIONS #PI-6). */}
+        <PrizmaTextField
+          label={copy.firstName.label}
+          placeholder={copy.firstName.placeholder}
+          required
+          requiredHint={strings.requiredHint}
+          autoComplete="off"
+          defaultValue={values?.firstName ?? ''}
+        />
+        <PrizmaTextField
+          label={copy.firstLastName.label}
+          placeholder={copy.firstLastName.placeholder}
+          required
+          requiredHint={strings.requiredHint}
+          autoComplete="off"
+          defaultValue={values?.firstLastName ?? ''}
+        />
+        <PrizmaTextField
+          label={copy.secondLastName.label}
+          placeholder={copy.secondLastName.placeholder}
+          required
+          requiredHint={strings.requiredHint}
+          autoComplete="off"
+          defaultValue={values?.secondLastName ?? ''}
+        />
+        <PrizmaDropdown
+          label={copy.gender.label}
+          placeholder={copy.gender.placeholder}
+          required
+          requiredHint={strings.requiredHint}
+          options={genders}
+          defaultValue={values?.gender ?? null}
+          searchPlaceholder={copy.gender.searchPlaceholder}
+          /* The `dropdown` section is the open Gender menu. */
+          forceOpen={state === 'dropdown'}
+        />
+        <PrizmaDateField
+          label={copy.dateOfBirth.label}
+          placeholder={copy.dateOfBirth.placeholder}
+          required
+          requiredHint={strings.requiredHint}
+          calendarLabel={copy.dateOfBirth.calendarLabel}
+          defaultValue={values?.dateOfBirth ?? ''}
+        />
+        <PrizmaDropdown
+          label={copy.birthState.label}
+          placeholder={copy.birthState.placeholder}
+          required
+          requiredHint={strings.requiredHint}
+          options={states}
+          defaultValue={values?.birthState ?? null}
+          searchable
+          searchPlaceholder={copy.birthState.searchPlaceholder}
+        />
+      </PrizmaFormScreen>
+    );
+  },
+);
+CurpGenerateScreen.displayName = 'CurpGenerateScreen';
+
+export default CurpGenerateScreen;