@incodetech/prizma-core-screens 0.1.0

package/src/FormsLongFormScreen.tsx

@@ -0,0 +1,295 @@
+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,
+  type PrizmaDropdownOption,
+} from '@incodetech/prizma-core-web/dropdown';
+import { PrizmaCountryFlag, type PrizmaCountry } from '@incodetech/prizma-core-web/combined';
+import { PrizmaFormScreen, type PrizmaFormScreenProps } from './FormScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type {
+  FormsLongFormPreset,
+  FormsLongFormState,
+  FormsStrings,
+} from './FormsStrings';
+import './ScreenLayout.css';
+import './FormsLayout.css';
+
+/** How a row's label is marked. Figma draws all three. */
+type FormsRequirement = 'required' | 'optional' | 'none';
+
+/** One row of a multi-field form. STRUCTURE — the words live in the strings. */
+interface FormsLongFormRow {
+  key: string;
+  kind: 'text' | 'email' | 'date' | 'country' | 'select';
+  requirement: FormsRequirement;
+}
+
+/**
+ * The row stacks each purple section draws, in order. Structure belongs to the
+ * screen (the archetype and Core own everything visual); only the labels and
+ * placeholders come from `FormsStrings`.
+ */
+const PRESET_ROWS: Record<FormsLongFormPreset, FormsLongFormRow[]> = {
+  // `forms.name` — the three-name form.
+  name: [
+    { key: 'fullName', kind: 'text', requirement: 'required' },
+    { key: 'firstName', kind: 'text', requirement: 'required' },
+    { key: 'lastName', kind: 'text', requirement: 'none' },
+  ],
+  // `longform.customizable` — the five-row customizable form.
+  profile: [
+    { key: 'fullName', kind: 'text', requirement: 'required' },
+    { key: 'residence', kind: 'country', requirement: 'required' },
+    { key: 'occupation', kind: 'select', requirement: 'none' },
+    { key: 'dob', kind: 'date', requirement: 'none' },
+    { key: 'referral', kind: 'select', requirement: 'none' },
+  ],
+  // `🧩 Long forms - pre-defined cases` — the four-row eKYC form.
+  eKyc: [
+    { key: 'idNumber', kind: 'text', requirement: 'required' },
+    { key: 'email', kind: 'email', requirement: 'required' },
+    { key: 'residence', kind: 'country', requirement: 'required' },
+    { key: 'dob', kind: 'date', requirement: 'required' },
+  ],
+};
+
+/**
+ * The "Forms and data entry - Optional / Required" pair documents the SAME
+ * eKYC form with a different marker on each row — that is the whole point of
+ * the section, so the override is structure and lives here.
+ */
+const OPTIONAL_VARIANT: Record<string, FormsRequirement> = {
+  idNumber: 'none',
+  email: 'required',
+  residence: 'optional',
+  dob: 'optional',
+};
+
+export interface FormsLongFormScreenProps
+  extends Omit<
+    PrizmaFormScreenProps,
+    'title' | 'subtitle' | 'ctaLabel' | 'verifiedLabel' | 'children' | 'navLabel'
+  > {
+  /** Module copy — this screen reads one `longForm.*` slice. */
+  strings: FormsStrings;
+  /** Which multi-field purple section to render. Default `eKyc`. */
+  preset?: FormsLongFormPreset;
+  /** Which treatment of that section. Default `default`. */
+  state?: FormsLongFormState;
+  /** Value per row key. Text/date rows take the literal value; `country` rows
+   *  take an ISO code; `select` rows take an option value. */
+  values?: Record<string, string>;
+  /** Which row carries the focus ring on the `focused` section. */
+  focusedField?: string;
+  /** Option rows for the `select` kinds. Runtime data, never copy — the host
+   *  supplies its own localized list. */
+  options?: Record<string, PrizmaDropdownOption[]>;
+  /** The selectable countries for `country` rows. */
+  countries?: PrizmaCountry[];
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Forms & Data Entry — the multi-field screen, built on the Form archetype
+ * (GUIDELINES.md §6-E, `PrizmaFormScreen`).
+ *
+ * ONE screen for the module's seven multi-field purple sections: `forms.name`,
+ * `longform.customizable` (default + filled) and the whole
+ * `🧩 Long forms - pre-defined cases` group (`longform.default` / `.focused` /
+ * `.filled` / `.loading` plus the "Optional / Required" documentation pair).
+ * They share the identical skeleton — nav → Title (H2 + the "All fields marked
+ * with * are required." H5) → Spacing/32 → a stack of labelled Core inputs →
+ * primary CTA → tag — and differ in which rows the stack carries and what state
+ * each row is in.
+ *
+ * Four things are deliberate:
+ *
+ * 1. Rows are UNCONTROLLED (`defaultValue`). `readOnly` would paint Core's
+ *    DISABLED grey on the six sections Figma draws white (DEVIATIONS #PI-6);
+ *    `disabled` is set ONLY on `loading`, the one section Figma actually greys
+ *    — and it greys every row at once, exactly as drawn.
+ * 2. The focused row gets Core's OWN `--focused` modifier through `className`
+ *    (DEVIATIONS #PI-7). Its clear ✕ needs one module rule to appear, because
+ *    Core reveals the button under a live `:focus-within` a static spec state
+ *    can never satisfy — see `FormsLayout.css`, which only lifts Core's
+ *    `display: none` and re-styles nothing (the #CURP-3 idiom).
+ * 3. The in-flight spinner rides the CTA (`ctaLoading`), never a field
+ *    (DEVIATIONS #PI-5) — without it `loading` would render as `filled`.
+ * 4. The required marker rides Core's `requiredHint` so it stays localizable.
+ *    Core has no OPTIONAL counterpart, so "(Optional)" is composed into the
+ *    label string instead — DEVIATIONS #FDE-4.
+ *
+ * The stack SCROLLS inside the content column through the archetype's own
+ * `scrollFields` prop: the profile preset is five 78px rows plus gaps and does
+ * not fit a 390×844 frame, and screens never reflow (#17). The variant carries
+ * the `overflow-y: auto` AND the Spacing/16 margin below the clipped stack, so
+ * the sliced last row is followed by clear surface instead of running flush
+ * into the CTA band — the half a module stylesheet kept losing. It is a no-op
+ * on the short `name` preset, whose rows never overflow. DEVIATIONS #DSC-2,
+ * restating #CURP-1.
+ */
+export const FormsLongFormScreen = forwardRef<HTMLDivElement, FormsLongFormScreenProps>(
+  (
+    {
+      strings,
+      preset = 'eKyc',
+      state = 'default',
+      values,
+      focusedField,
+      options,
+      countries,
+      screenId = `forms-long-form-${preset}-${state}`,
+      className,
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => {
+    const copy = strings.longForm[preset];
+    const busy = state === 'loading';
+    const countryList = countries ?? [];
+
+    // The Optional / Required pair documents the eKYC form specifically; no
+    // other preset draws it, so the override never leaks to a preset whose
+    // Figma has no such section.
+    const applyOptional = state === 'optional' && preset === 'eKyc';
+    const rows = PRESET_ROWS[preset].map((row) =>
+      applyOptional && OPTIONAL_VARIANT[row.key]
+        ? { ...row, requirement: OPTIONAL_VARIANT[row.key] }
+        : row,
+    );
+
+    /** Core appends `requiredHint` itself; "(Optional)" has no Core slot. */
+    const labelFor = (row: FormsLongFormRow) => {
+      const base = copy.fields[row.key]?.label ?? '';
+      return row.requirement === 'optional' ? `${base} ${strings.optionalHint}` : base;
+    };
+
+    const renderRow = (row: FormsLongFormRow) => {
+      const fieldCopy = copy.fields[row.key];
+      const label = labelFor(row);
+      const required = row.requirement === 'required';
+      const value = values?.[row.key] ?? '';
+      const focused = !busy && focusedField === row.key;
+
+      switch (row.kind) {
+        case 'country':
+          return (
+            <PrizmaDropdown
+              key={row.key}
+              label={label}
+              required={required}
+              requiredHint={strings.requiredHint}
+              placeholder={fieldCopy?.placeholder}
+              options={countryList.map((c) => ({ value: c.code, label: c.name }))}
+              value={value || null}
+              searchable
+              searchPlaceholder={copy.searchPlaceholder}
+              disabled={busy}
+              forceState={focused ? 'focused' : undefined}
+              renderLeading={(option) => {
+                const match = countryList.find((c) => c.code === option.value);
+                return match ? <PrizmaCountryFlag country={match} /> : null;
+              }}
+            />
+          );
+        case 'select':
+          return (
+            <PrizmaDropdown
+              key={row.key}
+              label={label}
+              required={required}
+              requiredHint={strings.requiredHint}
+              placeholder={fieldCopy?.placeholder}
+              options={options?.[row.key] ?? []}
+              value={value || null}
+              disabled={busy}
+              forceState={focused ? 'focused' : undefined}
+            />
+          );
+        case 'date':
+          return (
+            <PrizmaDateField
+              key={row.key}
+              className={focused ? 'prizma-input-datefield--focused' : undefined}
+              label={label}
+              required={required}
+              requiredHint={strings.requiredHint}
+              placeholder={fieldCopy?.placeholder}
+              defaultValue={value}
+              disabled={busy}
+              calendarLabel={copy.calendarLabel}
+            />
+          );
+        default:
+          return (
+            <PrizmaTextField
+              key={row.key}
+              className={focused ? 'prizma-input-textfield--focused' : undefined}
+              label={label}
+              required={required}
+              requiredHint={strings.requiredHint}
+              placeholder={fieldCopy?.placeholder}
+              defaultValue={value}
+              type={row.kind === 'email' ? 'email' : 'text'}
+              inputMode={row.kind === 'email' ? 'email' : undefined}
+              autoComplete={row.kind === 'email' ? 'email' : 'off'}
+              autoCapitalize={row.kind === 'email' ? 'none' : undefined}
+              spellCheck={false}
+              disabled={busy}
+              /* Figma draws the clear ✕ only on the focused row of
+                 `longform.focused`; every other row draws none. */
+              clearable={focused}
+              clearLabel={copy.clearLabel}
+            />
+          );
+      }
+    };
+
+    return (
+      <PrizmaFormScreen
+        ref={ref}
+        className={[
+          'forms-long-form',
+          /* Scopes the ONE rule that lets Core's own clear ✕ paint on the
+             statically-focused row. See FormsLayout.css. */
+          state === 'focused' ? 'forms-long-form--focused' : '',
+          className,
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        title={copy.title}
+        subtitle={copy.subtitle}
+        ctaLabel={copy.ctaLabel}
+        /* `longform.default` and `longform.customizable`'s default section grey
+           the CTA until something is entered; `forms.name` draws it ENABLED on
+           the same empty form. Figma contradicts its own "optimistic rule"
+           sticky here, so each section is followed literally — DEVIATIONS
+           #FDE-3. */
+        ctaDisabled={state === 'default' && preset !== 'name'}
+        ctaLoading={busy}
+        ctaLoadingLabel={copy.ctaLoadingLabel}
+        /* The four- and five-row stacks are taller than the 844 frame; the
+           archetype's variant pans them and keeps Spacing/16 of clear surface
+           above the CTA. No module CSS re-declares this. */
+        scrollFields
+        verifiedLabel={strings.verifiedLabel}
+        navLabel={strings.navLabel}
+        screenId={screenId}
+        overrides={overrides}
+        onAction={onAction}
+        {...shell}
+      >
+        {rows.map(renderRow)}
+      </PrizmaFormScreen>
+    );
+  },
+);
+FormsLongFormScreen.displayName = 'FormsLongFormScreen';
+
+export default FormsLongFormScreen;

package/src/FormsStrings.ts

@@ -0,0 +1,243 @@
+// Forms & Data Entry — copy contract.
+//
+// Figma: `🧩 Forms and Data entry (Input type) - Screens specs + Localization`
+// (N6otHMuY2Hha5eBqRz0uC3, page 1:222). Two top-level groups of purple parent
+// sections:
+//
+//   🧩 Forms and Data entry (Input type)
+//     forms.idnumber · forms.cpf · forms.email · forms.phone · forms.text
+//     forms.dob (default / typing / iconButton†)
+//     forms.country (Residence: default / open / typing†) · Forms.nationality
+//     forms.select · forms.yesNo · forms.country (question)
+//     forms.name · longform.customizable
+//     forms.success · forms.error · forms.inputerror (empty / invalid)
+//
+//   🧩 Long forms - pre-defined cases
+//     forms.longform.default / longform.focused / longform.filled /
+//     longform.loading / "Forms and data entry - Optional / Required"
+//
+// This is the archetype-E showcase: every section is nav → title block →
+// labelled field stack → CTA → verified tag (GUIDELINES §6-E), and the sections
+// differ only in WHICH Core input sits in the stack and in what state. The
+// module therefore ships four screen families rather than nineteen screens:
+// one for a single field, one for a choice field, one for a multi-field form,
+// plus the two verdicts.
+//
+// † Two sections have no state of their own, because the ONE thing that makes
+// each of them a distinct frame is a piece of Core that does not exist yet: the
+// open date-picker panel (`forms.DOB.iconButton`) and a search bar carrying a
+// typed query (`forms.residencetyping`). Both are logged as Core requests —
+// DEVIATIONS #FDE-5 and #FDE-6 — and neither is faked here: a card that repeats
+// its neighbour is the defect, not the coverage. See the state unions below.
+//
+// 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).
+
+/**
+ * Which single-field section `FormsFieldScreen` renders. Each key names one
+ * purple section and picks the Core input the section draws:
+ * - `idNumber` · `cpf` — `PrizmaTextField`
+ * - `email`            — `PrizmaTextField` with e-mail semantics
+ * - `dob`              — `PrizmaDateField`
+ * - `phone`            — `PrizmaCombined` (country dial code + number)
+ * - `text`             — `PrizmaMultiline`
+ */
+export type FormsFieldKey = 'idNumber' | 'cpf' | 'email' | 'dob' | 'phone' | 'text';
+
+/**
+ * The field treatments the single-field sections draw.
+ *
+ * `forms.DOB.iconButton` (2:12185) has NO state here, deliberately. That frame
+ * draws the date field focused with an OPEN date-picker panel over it — the
+ * "March 2024" month grid instanced beside the frame as `Date Picker`
+ * (2:5458). Core ships no calendar: `PrizmaDateField`'s contract is that "the
+ * date PICKER is the consumer's — the OS picker by contract; the field never
+ * renders one", and it exposes no `forceCalendarOpen` hook. Composing a month
+ * grid here would be inventing a primitive, and shipping the state without one
+ * left a card that was `focused` with a different name. The state returns the
+ * day Core gains the panel — DEVIATIONS #FDE-5.
+ *
+ * - `default`      — resting field, placeholder visible, CTA enabled
+ * - `focused`      — `forms.DOB.typing`: blue focus ring with a partial value
+ * - `filled`       — a complete value on the resting surface
+ * - `emptyError`   — `forms.IDnumber.error` (2443:68470): empty NEGATIVE field,
+ *                    "Enter a valid ID number.", CTA greyed. This is the
+ *                    canvas sticky's "optimistic rule": the CTA starts enabled
+ *                    and only greys after a submit with nothing entered.
+ * - `invalidError` — `forms.IDnumber.error` (2443:69116): a typed value that
+ *                    failed validation, "Invalid ID number", CTA greyed
+ */
+export type FormsFieldState =
+  | 'default'
+  | 'focused'
+  | 'filled'
+  | 'emptyError'
+  | 'invalidError';
+
+/**
+ * Which choice section `FormsChoiceScreen` renders — the label above the
+ * dropdown is what separates them:
+ * - `residence`   — `forms.country` / `forms.Residence` ("Country of residence")
+ * - `nationality` — `Forms.nationality` ("Nationality")
+ * - `question`    — `forms.select` / `forms.yesNo` / `forms.country` question
+ *                   variant ("Enter your question")
+ */
+export type FormsChoiceKey = 'residence' | 'nationality' | 'question';
+
+/**
+ * Which option list the open menu carries. The three question sections draw an
+ * IDENTICAL closed field and differ only here, so the option set is its own
+ * axis rather than three screens:
+ * - `countries` — flag + country name, searchable (`forms.country`)
+ * - `generic`   — "Option 1…5", no search (`forms.select`)
+ * - `yesNo`     — two rows, no search (`forms.yesNo`)
+ */
+export type FormsChoiceOptionSet = 'countries' | 'generic' | 'yesNo';
+
+/**
+ * - `closed` — resting trigger with the placeholder
+ * - `open`   — the menu drawn over the form, nothing selected
+ *
+ * `forms.residencetyping` (68:31241) has NO state here, deliberately. It is the
+ * TYPING frame: the same open menu as `forms.Residenceopen`, distinguished by
+ * the search bar holding "Por" with a live caret and an ✕ replacing the
+ * magnifier. `PrizmaDropdown` ships documentation-only `forceState` and
+ * `forceOpen` but nothing that seeds the query, so the state rendered with an
+ * EMPTY search bar — `open` under another name. Faking it would mean
+ * hand-rolling a search bar the component already owns. The state returns the
+ * day Core gains a `searchValue` — DEVIATIONS #FDE-6.
+ */
+export type FormsChoiceState = 'closed' | 'open';
+
+/**
+ * The multi-field sections `FormsLongFormScreen` renders:
+ * - `name`    — `forms.name`: full / first / last name
+ * - `profile` — `longform.customizable`: the five-field customizable form
+ * - `eKyc`    — the `🧩 Long forms - pre-defined cases` section: ID number,
+ *               e-mail, country of residence, date of birth
+ */
+export type FormsLongFormPreset = 'name' | 'profile' | 'eKyc';
+
+/**
+ * - `default`  — every field empty
+ * - `focused`  — `longform.focused`: one field carries the focus ring, an
+ *                earlier one is already filled
+ * - `filled`   — every field carries a value
+ * - `loading`  — `longform.loading`: the whole form greyed, spinner in the CTA
+ * - `optional` — the "Optional / Required" documentation pair: the same form
+ *                with mixed required and optional markers
+ */
+export type FormsLongFormState =
+  | 'default'
+  | 'focused'
+  | 'filled'
+  | 'loading'
+  | 'optional';
+
+/** Copy for one single-field section. */
+export interface FormsFieldCopy {
+  /** H2 ("Enter your title", "Enter your email", "Enter your phone number"). */
+  title: string;
+  /** H5 below the title, where the section draws one. */
+  subtitle?: string;
+  /** The VISIBLE label row above the field. Unlike Phone Input and CURP
+   *  (DEVIATIONS #PI-4, #EI-2), every section in this module draws one. */
+  label: string;
+  /** Field placeholder. The date field takes Core's own DD/MM/YYYY mask. */
+  placeholder?: string;
+  /** Primary CTA ("Continue"). */
+  ctaLabel: string;
+  /** Accessible busy copy, for hosts that put the field behind a request. */
+  ctaLoadingLabel?: string;
+  /** Accessible name for the clear (✕) affordance. */
+  clearLabel?: string;
+  /** Accessible name for the date field's calendar button (`dob` only). */
+  calendarLabel?: string;
+  /** Accessible name for the dial-code listbox (`phone` only). */
+  countryListLabel?: string;
+  /** Error row on `emptyError` ("Enter a valid ID number."). */
+  emptyErrorText?: string;
+  /** Error row on `invalidError` ("Invalid ID number"). */
+  invalidErrorText?: string;
+}
+
+/** Copy for one choice section. */
+export interface FormsChoiceCopy {
+  title: string;
+  subtitle?: string;
+  /** The visible label above the dropdown. */
+  label: string;
+  /** Trigger placeholder ("Select an option"). */
+  placeholder: string;
+  /** Search-bar placeholder inside the menu ("Search for country"). */
+  searchPlaceholder?: string;
+  /** Accessible name for the search-clear button. */
+  clearSearchLabel?: string;
+  ctaLabel: string;
+}
+
+/** Copy for one field row of a multi-field form. Which rows a preset carries
+ *  is STRUCTURE and lives in `FormsLongFormScreen`; only the words are here. */
+export interface FormsLongFormFieldCopy {
+  label: string;
+  placeholder?: string;
+}
+
+/** Copy for one multi-field section. */
+export interface FormsLongFormCopy {
+  title: string;
+  /** "All fields marked with * are required." */
+  subtitle?: string;
+  ctaLabel: string;
+  ctaLoadingLabel?: string;
+  /** One entry per row the preset draws — see `FormsLongFormScreen`. */
+  fields: Record<string, FormsLongFormFieldCopy>;
+  /** Accessible name for the clear (✕) affordance on the focused row. */
+  clearLabel?: string;
+  /** Accessible name for the calendar button on the date row. */
+  calendarLabel?: string;
+  /** Search-bar placeholder for the country row's menu. */
+  searchPlaceholder?: string;
+}
+
+export interface FormsStrings {
+  /** "verified by" attribution in the footer tag. */
+  verifiedLabel: string;
+  /** Accessible name for the logo nav row. */
+  navLabel?: string;
+  /**
+   * The required marker appended to a label ("*"). It rides Core's
+   * `requiredHint` prop so it stays localizable and so no module paints its
+   * own asterisk — the CURP-4 idiom.
+   */
+  requiredHint: string;
+  /**
+   * The optional marker appended to a label ("(Optional)"). Core has a
+   * `requiredHint` but NO optional counterpart, so the marker is composed into
+   * the label string by the screen. See DEVIATIONS #FDE-4.
+   */
+  optionalHint: string;
+
+  /** The single-field sections. */
+  fields: Record<FormsFieldKey, FormsFieldCopy>;
+
+  /** The choice sections. */
+  choice: Record<FormsChoiceKey, FormsChoiceCopy>;
+
+  /** The multi-field sections. */
+  longForm: Record<FormsLongFormPreset, FormsLongFormCopy>;
+
+  /** `forms.success` — a bare status mark over an H2, no CTA. */
+  success: {
+    title: string;
+    subtitle?: string;
+  };
+
+  /** `forms.error` — status mark, H2 and a "Try again" CTA. */
+  error: {
+    title: string;
+    subtitle?: string;
+    ctaLabel: string;
+  };
+}

package/src/FormsSuccessScreen.tsx

@@ -0,0 +1,67 @@
+import React, { forwardRef } from 'react';
+import {
+  PrizmaProcessingScreen,
+  type PrizmaProcessingScreenProps,
+} from './ProcessingScreen';
+import type { PrizmaScreenActionHandler, PrizmaScreenOverrides } from './types';
+import type { FormsStrings } from './FormsStrings';
+import './ScreenLayout.css';
+
+export interface FormsSuccessScreenProps
+  extends Omit<
+    PrizmaProcessingScreenProps,
+    'status' | 'title' | 'subtitle' | 'verifiedLabel' | 'navLabel'
+  > {
+  /** Module copy — this screen reads the `success` slice. */
+  strings: FormsStrings;
+  screenId?: string;
+  overrides?: PrizmaScreenOverrides;
+  onAction?: PrizmaScreenActionHandler;
+}
+
+/**
+ * Forms & Data Entry — the success verdict, built on the Processing archetype
+ * (GUIDELINES.md §6-C, `PrizmaProcessingScreen`).
+ *
+ * Figma: the purple `forms.success` section (3:18734). A centred status mark
+ * over a bare H2 ("Success!") and then NOTHING — the CTA slot is empty all the
+ * way down to the anchored tag, while the sibling `forms.error` section
+ * (2014:21506) draws "Try again" in that same slot.
+ *
+ * §6-F reserves the Result archetype for "every verdict screen that needs a
+ * button" and keeps C as the pure no-button case, so the module's two verdicts
+ * legitimately sit on two different archetypes — the #EI-4 split, applied
+ * unchanged.
+ *
+ * The mark is Core's outline status icon via `PrizmaTitle`'s icon slot; the
+ * module Figma still draws the two-tone filled disc, one icon sweep behind
+ * (DEVIATIONS #15, unchanged here).
+ */
+export const FormsSuccessScreen = forwardRef<HTMLDivElement, FormsSuccessScreenProps>(
+  (
+    {
+      strings,
+      screenId = 'forms-success',
+      overrides,
+      onAction,
+      ...shell
+    },
+    ref,
+  ) => (
+    <PrizmaProcessingScreen
+      ref={ref}
+      status="success"
+      title={strings.success.title}
+      subtitle={strings.success.subtitle}
+      verifiedLabel={strings.verifiedLabel}
+      navLabel={strings.navLabel}
+      screenId={screenId}
+      overrides={overrides}
+      onAction={onAction}
+      {...shell}
+    />
+  ),
+);
+FormsSuccessScreen.displayName = 'FormsSuccessScreen';
+
+export default FormsSuccessScreen;