@veevarts/design-system 2.27.0 → 2.28.0

package/dist/patterns/AdminTextField/AdminTextField.d.ts

@@ -1,53 +1,13 @@
 import { default as React } from 'react';
+import { AdminFieldLabelProps, AdminTextFieldProps } from './types';
 /**
  * The uppercase field label, standalone — for a control this component does
  * not cover (a checkbox group, a read-only preview) that should still be
  * captioned like every other admin field. `suffix` is the lighter tail:
  * "· optional", "· auto-generated, immutable".
- */
-export declare const AdminFieldLabel: React.FC<{
-    children: React.ReactNode;
-    suffix?: React.ReactNode;
-    className?: string;
-    'data-testid'?: string;
-}>;
-interface AdminTextFieldBase {
-    /** Uppercase label above the control. Omit only when an adjacent element already names it. */
-    label?: React.ReactNode;
-    /** Lighter annotation after the label (e.g. `· optional`). Ignored without a label. */
-    labelSuffix?: React.ReactNode;
-    value: string;
-    placeholder?: string;
-    disabled?: boolean;
-    /** Monospace face without the read-only treatment, for codes the user types. */
-    mono?: boolean;
-    /** Claim initial focus. Only for the first field of a dialog, never on a page. */
-    autoFocus?: boolean;
-    /** Small helper or error text under the control. */
-    hint?: React.ReactNode;
-    /** Renders the hint as an error and marks the control invalid. */
-    invalid?: boolean;
-    className?: string;
-    'data-testid'?: string;
-}
-/**
- * `onChange` is REQUIRED unless the field is read-only.
- *
- * This is a controlled input: given a `value` and no handler, React pins it and
- * typing does nothing — a field that looks editable, accepts focus, and silently
- * discards every keystroke. That is indistinguishable from a bug at a glance,
- * and it is what happens by accident when someone renders one to show a value.
  *
- * Showing a value without accepting edits is a real case, so it stays possible;
- * it just has to be said, with `readOnly`, which also renders it as system-owned
- * and announces it correctly.
+ * `isRequired` adds a visible `*` and the screen-reader `requiredLabel`;
+ * `help` adds an ⓘ that opens it in a popover, kept outside the label text.
  */
-export type AdminTextFieldProps = AdminTextFieldBase & ({
-    readOnly: true;
-    onChange?: never;
-} | {
-    readOnly?: false;
-    onChange: (value: string) => void;
-});
+export declare const AdminFieldLabel: React.FC<AdminFieldLabelProps>;
 export declare const AdminTextField: React.FC<AdminTextFieldProps>;
-export {};

package/dist/patterns/AdminTextField/index.d.ts

@@ -1,3 +1,3 @@
 export { AdminFieldLabel, AdminTextField } from './AdminTextField';
-export type { AdminTextFieldProps } from './AdminTextField';
-export { adminFieldErrorClass, adminFieldHintClass, adminFieldLabelClass, adminFieldLabelSuffixClass, adminInputClass, adminInputReadOnlyClass, adminInputWrapperClass, } from './styles';
+export type { AdminTextFieldProps, AdminFieldLabelProps, AdminFieldRequiredProps, AdminFieldHelpProps } from './types';
+export { adminFieldErrorClass, adminFieldHelpButtonClass, adminFieldHelpContentClass, adminFieldHelpIconClass, adminFieldHintClass, adminFieldLabelClass, adminFieldLabelNoAutoMarkClass, adminFieldLabelRowClass, adminFieldLabelSuffixClass, adminFieldRequiredClass, adminInputClass, adminInputReadOnlyClass, adminInputWrapperClass, } from './styles';

package/dist/patterns/AdminTextField/styles.d.ts

@@ -22,6 +22,35 @@ export declare const adminFieldLabelClass = "text-[11px] font-semibold uppercase
  * aside, not as part of the field's name.
  */
 export declare const adminFieldLabelSuffixClass = "font-normal normal-case tracking-normal";
+/**
+ * The visible `*` of a required field. `after:content-none` switches off the
+ * `*` HeroUI's own `isRequired` paints into its label slot, so there is one
+ * mark, the one carrying the screen-reader word.
+ */
+export declare const adminFieldRequiredClass = "ms-0.5 text-acct-danger";
+/**
+ * The label row a field with `help` draws itself, in place of HeroUI's.
+ * HeroUI pushes its box down by `font-size-small + 10px` (24px) to make room
+ * for its outside label; this row takes the same height from the same
+ * variable, so a field with help and one without line up in a form row.
+ * `min-h` rather than `h`, so a label that wraps grows the row instead of
+ * running into the box.
+ *
+ * `text-foreground` because that is the color HeroUI's label actually renders
+ * in above the box (`group-data-[filled-within=true]:text-foreground` beats
+ * the `text-acct-muted` it is given), measured at `rgb(17, 24, 28)`.
+ */
+export declare const adminFieldLabelRowClass = "mb-0 min-h-[calc(var(--heroui-font-size-small)_+_10px)] text-foreground";
+/** Added to HeroUI's `label` slot so its `isRequired` mark does not double ours. */
+export declare const adminFieldLabelNoAutoMarkClass = "after:content-none";
+/**
+ * The ⓘ that opens a field's help: a 24px round hit target (WCAG 2.5.8) whose
+ * negative margin keeps the 11px label row from growing to fit it.
+ */
+export declare const adminFieldHelpButtonClass = "ms-0.5 -my-1.5 size-6 min-w-6 align-middle text-acct-sub data-[hover=true]:bg-acct-page data-[hover=true]:text-acct-ink";
+export declare const adminFieldHelpIconClass = "size-4";
+/** The popover the ⓘ opens. Body copy, so sentence case and ink. */
+export declare const adminFieldHelpContentClass = "max-w-xs rounded-xl px-3 py-2 text-xs leading-normal text-acct-ink2";
 /**
  * The 38px box — HeroUI's `inputWrapper` slot, which carries the border and
  * background (the `input` slot is the bare field).

package/dist/patterns/AdminTextField/types.d.ts

@@ -0,0 +1,78 @@
+import { default as React } from 'react';
+/**
+ * The required mark. Plain optional props rather than a union that forces
+ * `requiredLabel` with `isRequired`: a union collapses under
+ * `Omit<AdminTextFieldProps, …>`, so every wrapper that forwards props would
+ * stop compiling.
+ */
+export interface AdminFieldRequiredProps {
+    /** Adds a visible `*` after the label (and its suffix). */
+    isRequired?: boolean;
+    /**
+     * The word screen readers hear for the `*` ("required", "obligatoire").
+     * Pass it with `isRequired`: the `*` itself is hidden from them.
+     */
+    requiredLabel?: string;
+}
+/** Help on demand: an ⓘ button after the label that opens it in a popover. */
+export interface AdminFieldHelpProps {
+    help?: React.ReactNode;
+    /** Accessible name of the ⓘ ("About timezone"). Without it the ⓘ is named by the label text. */
+    helpLabel?: string;
+}
+export interface AdminFieldLabelProps extends AdminFieldRequiredProps, AdminFieldHelpProps {
+    children: React.ReactNode;
+    /** The lighter tail: "· optional", "· auto-generated, immutable". */
+    suffix?: React.ReactNode;
+    /**
+     * `id` of the control this captions. The text then renders as a real
+     * `<label>`, so clicking it focuses the control. The ⓘ stays outside it.
+     */
+    htmlFor?: string;
+    /** `id` of the text element, for a group to point `aria-labelledby` at. */
+    id?: string;
+    className?: string;
+    'data-testid'?: string;
+}
+export interface AdminTextFieldBase extends AdminFieldRequiredProps, AdminFieldHelpProps {
+    /** Uppercase label above the control. Omit only when an adjacent element already names it. */
+    label?: React.ReactNode;
+    /** Lighter annotation after the label (e.g. `· optional`). Ignored without a label. */
+    labelSuffix?: React.ReactNode;
+    value: string;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Monospace face without the read-only treatment, for codes the user types. */
+    mono?: boolean;
+    /** Claim initial focus. Only for the first field of a dialog, never on a page. */
+    autoFocus?: boolean;
+    /** Small helper or error text under the control. */
+    hint?: React.ReactNode;
+    /** Renders the hint as an error and marks the control invalid. */
+    invalid?: boolean;
+    className?: string;
+    'data-testid'?: string;
+}
+/**
+ * `onChange` is REQUIRED unless the field is read-only.
+ *
+ * This is a controlled input: given a `value` and no handler, React pins it and
+ * typing does nothing — a field that looks editable, accepts focus, and silently
+ * discards every keystroke. That is indistinguishable from a bug at a glance,
+ * and it is what happens by accident when someone renders one to show a value.
+ *
+ * Showing a value without accepting edits is a real case, so it stays possible;
+ * it just has to be said, with `readOnly`, which also renders it as system-owned
+ * and announces it correctly.
+ *
+ * `isRequired` / `help` behave as on {@link AdminFieldLabelProps}, and are
+ * ignored without a `label`. `isRequired` also marks the input
+ * `aria-required`, without the browser's own `required` validation.
+ */
+export type AdminTextFieldProps = AdminTextFieldBase & ({
+    readOnly: true;
+    onChange?: never;
+} | {
+    readOnly?: false;
+    onChange: (value: string) => void;
+});

package/dist/patterns/FeedbackState/FeedbackState.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react';
 import { EmptyStateProps, ErrorStateProps, FeedbackStateProps, LoadingStateProps, SuccessStateProps } from './type';
-export declare function FeedbackState({ variant, surface, title, titleAs: TitleElement, description, icon, actions, role, ariaLive, iconSize, className, classNames, 'data-testid': dataTestId, }: FeedbackStateProps): JSX.Element;
+export declare function FeedbackState(props: FeedbackStateProps): JSX.Element;
 export declare namespace FeedbackState {
     var displayName: string;
 }

package/dist/patterns/FeedbackState/type.d.ts

@@ -20,6 +20,8 @@ export interface FeedbackStateClassNames {
     spinner?: string;
     title?: string;
     description?: string;
+    /** The `ErrorState` reference code line. */
+    referenceCode?: string;
     actions?: string;
 }
 export interface FeedbackStateProps {
@@ -50,6 +52,14 @@ export interface FeedbackStateProps {
     'data-testid'?: string;
 }
 export type EmptyStateProps = Omit<FeedbackStateProps, 'variant'>;
-export type ErrorStateProps = Omit<FeedbackStateProps, 'variant'>;
+export interface ErrorStateProps extends Omit<FeedbackStateProps, 'variant'> {
+    /**
+     * Support code for this failure, e.g. `"FR-QE-900"`, shown on a small line under the description
+     * so a user can quote it from a screenshot. Nothing is rendered without it.
+     */
+    referenceCode?: string;
+    /** Text before the code. Defaults to `"Reference code:"`; the caller owns i18n. */
+    referenceCodeLabel?: string;
+}
 export type LoadingStateProps = Omit<FeedbackStateProps, 'variant'>;
 export type SuccessStateProps = Omit<FeedbackStateProps, 'variant'>;

package/dist/patterns/Notice/Notice.d.ts

@@ -0,0 +1,16 @@
+import { JSX } from 'react';
+import { NoticeProps } from './type';
+/**
+ * An inline message with a severity: the DS answer to HeroUI's
+ * `Alert variant="flat" isClosable={false}` repeated per call, and to the
+ * hand-rolled red lines and boxes of the POS.
+ *
+ * Danger and warning are `role="alert"` (assertive), info and success
+ * `role="status"` (polite). Copy comes in as props; the caller owns i18n.
+ * The only motion is the dismiss button's press feedback, which is dropped
+ * when the OS or the POS asks for reduced motion.
+ */
+export declare function Notice({ tone, variant, title, description, actions, onDismiss, dismissLabel, role, className, 'data-testid': dataTestId, }: NoticeProps): JSX.Element;
+export declare namespace Notice {
+    var displayName: string;
+}

package/dist/patterns/Notice/index.d.ts

@@ -0,0 +1,2 @@
+export { Notice } from './Notice';
+export type { NoticeProps, NoticeTone, NoticeVariant } from './type';

package/dist/patterns/Notice/styles.d.ts

@@ -0,0 +1,35 @@
+import { NoticeTone, NoticeVariant } from './type';
+/**
+ * One glyph per tone, on every variant. Solar `bold` so the shape reads at
+ * callout size; the danger tone had four different glyphs across the apps
+ * before this (HeroUI's own, two Solar outlines and a gravity-ui fill).
+ */
+export declare const NOTICE_ICON: Record<NoticeTone, string>;
+export declare const NOTICE_DISMISS_ICON = "solar:close-circle-linear";
+/**
+ * Every size is rem (or em off a rem font size), so the POS "Text size"
+ * setting, which scales the root font size, scales the notice with it. The
+ * values are the design hub's px at a 16px root.
+ */
+export declare const noticeClass: Record<NoticeVariant, {
+    root: string;
+    iconWrapper: string;
+    iconSize: string;
+    text: string;
+    title: string;
+    description: string;
+    actions: string;
+    dismiss: string;
+}>;
+/**
+ * Tints. All `pos-*` tokens, the palette the Quick and POS surfaces style
+ * with; each text tone clears 4.5:1 on its fill (`pos-surface.test.ts`). The
+ * banner discs for danger and warning are the mockup's own tints; info and
+ * success have none in the mockup, so their disc is the tone at 15%.
+ */
+export declare const noticeTone: Record<NoticeTone, {
+    callout: string;
+    banner: string;
+    disc: string;
+    title: string;
+}>;

package/dist/patterns/Notice/type.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+/** Severity. Picks the tint, the glyph and the default live-region role. */
+export type NoticeTone = 'info' | 'success' | 'warning' | 'danger';
+/**
+ * Which of the design hub's two notice shapes to draw.
+ *
+ * `callout` is the inline note of the Quick Donation and Quick Membership
+ * mockups (`.callout-info`, `.callout-warn`): a small tinted block, the glyph
+ * on the first line, the title run in bold ahead of the text.
+ *
+ * `banner` is the POS `.banner`: the glyph in a filled disc, the title in the
+ * tone on its own line, muted body copy and an action row under it.
+ */
+export type NoticeVariant = 'callout' | 'banner';
+export interface NoticeProps {
+    /** Severity. Defaults to `info`. */
+    tone?: NoticeTone;
+    /** `callout` (default) or `banner`. */
+    variant?: NoticeVariant;
+    /** Short lead: run in bold before the description on a callout, its own line on a banner. */
+    title?: ReactNode;
+    /** The message. Phrasing content (text, links, `strong`): it shares a line with a callout's title. */
+    description?: ReactNode;
+    /** Buttons or links, rendered under the text. */
+    actions?: ReactNode;
+    /** Shows a dismiss button that calls this. The notice does not hide itself: the caller stops rendering it. */
+    onDismiss?: () => void;
+    /** Accessible name of the dismiss button. Defaults to `"Dismiss"`. */
+    dismissLabel?: string;
+    /**
+     * Live-region role. Defaults to `alert` for `danger` and `warning`, `status`
+     * for `info` and `success`; the matching `aria-live` follows it.
+     */
+    role?: 'alert' | 'status';
+    /** Root className, for layout (margins, width). */
+    className?: string;
+    /** Root test id; the parts are suffixed (`-icon`, `-title`, `-description`, `-actions`, `-dismiss`). */
+    'data-testid'?: string;
+}

package/dist/patterns/TileSelect/TileSelect.d.ts

@@ -1,117 +1,4 @@
 import { default as React } from 'react';
-export interface TileSelectOption {
-    /** Stable identifier returned via `onSelect`. */
-    key: string;
-    /** Visible label rendered under the icon. */
-    label: string;
-    /**
-     * Icon: iconify name (`'lucide:credit-card'`) or a `ReactNode` for
-     * fully-custom SVGs.
-     */
-    icon: string | React.ReactNode;
-    /** Disable the tile (greyed out, no click). */
-    isDisabled?: boolean;
-    /**
-     * One line of supporting copy. Rendered only by `variant="compact"`,
-     * for an option that ended up in the "More" menu, where the label
-     * alone ("Other") rarely says enough.
-     */
-    description?: string;
-    /**
-     * `variant="compact"` only: keep this option in the "More" menu at
-     * every width, however much room the track has. For an action that is
-     * secondary by decision rather than by measurement — a payments picker
-     * that wants "Other" one click away so the methods people actually
-     * reach for own the row.
-     *
-     * The menu is rendered whenever an option asks for it, so this also
-     * overrides the rule that suppresses a menu holding a single option.
-     */
-    alwaysInMenu?: boolean;
-    /**
-     * `variant="compact"` only: what this option is worth keeping on the
-     * track. When the pill runs out of room the LOWEST priority folds into
-     * the menu first; equal priorities fold from the end of the list.
-     * Default `0`.
-     *
-     * Display order is untouched — this decides what survives a squeeze,
-     * not where anything sits. A payments picker can list "Other" before
-     * "Split payment" and still lose "Other" first, because splitting a
-     * payment is the rarer, weightier thing to reach for.
-     */
-    priority?: number;
-    /** Override per-tile test id; defaults to `${dataTestId}-${key}`. */
-    'data-testid'?: string;
-}
-/**
- * `'tiles'` — the icon-over-label grid, with a `<Select>` dropdown under
- * `md`. The picker is the subject of the step.
- *
- * `'compact'` — a segmented pill of label-only toggles at every width,
- * keeping every option the track can hold and folding the rest into a
- * "More" menu rather than scrolling. The picker is a control among others.
- */
-export type TileSelectVariant = 'tiles' | 'compact';
-/**
- * Tile size for `variant="tiles"`.
- *
- * `'md'` (default) — the 80px icon-over-label tile of the payments drop-in.
- *
- * `'sm'` — the 58px tender tile of the Quick Donation / Quick Membership
- * mockups (`.tender-tile`): 17px icon over an 11.5px label, 10px/4px padding,
- * 12px radius, 8px between tiles; the picked tile takes a brand border, a 9%
- * brand tint and brand text. DS tokens only, rem only.
- */
-export type TileSelectSize = 'md' | 'sm';
-export interface TileSelectProps {
-    /** Options to render in order. */
-    options: readonly TileSelectOption[];
-    /** Currently selected option `key`. `null` = no selection. */
-    selectedKey: string | null;
-    /** Fires when a tile is selected. */
-    onSelect: (key: string) => void;
-    /** Optional heading rendered above the grid. */
-    heading?: string;
-    /**
-     * `aria-label` for the wrapping group when `heading` is omitted.
-     * Translatable. Default `'Select an option'`. When `heading` is
-     * provided this prop is ignored — the grid is labelled by the
-     * heading element.
-     */
-    ariaLabel?: string;
-    /**
-     * How the options render. Default `'tiles'`.
-     * See {@link TileSelectVariant}.
-     */
-    variant?: TileSelectVariant;
-    /**
-     * `variant="compact"` only: a CAP on how many options stay on the pill.
-     * Unset by default, and normally best left that way — the pill already
-     * measures the track and keeps every option that fits, folding only
-     * what is left over. Set it when a surface wants a shorter row than
-     * its width allows.
-     *
-     * The cap gives way in one case: when honouring it would leave a single
-     * option in the menu that the track had room for. A "More" button is
-     * wider than most labels, so that fold costs space and buys a click.
-     */
-    maxVisible?: number;
-    /**
-     * `variant="compact"` only: label for the overflow trigger. Shown
-     * until an option inside the menu is selected, after which the
-     * trigger carries that option's label. Translatable. Default `'More'`.
-     */
-    moreLabel?: string;
-    /**
-     * Grid columns on >= sm. Default `3`. Mobile collapses to 2.
-     * `5` and `6` keep a full method set on one row on a wide surface.
-     * Ignored by `variant="compact"`, which is a single strip.
-     */
-    columnsDesktop?: 2 | 3 | 4 | 5 | 6;
-    columnsMobile?: 1 | 2;
-    /** `variant="tiles"` only. See {@link TileSelectSize}. Default `'md'`. */
-    size?: TileSelectSize;
-    className?: string;
-    'data-testid'?: string;
-}
+import { TileSelectProps } from './types';
+export type { TileSelectOption, TileSelectProps, TileSelectSize, TileSelectVariant } from './types';
 export declare const TileSelect: React.FC<TileSelectProps>;

package/dist/patterns/TileSelect/index.d.ts

@@ -1,2 +1,2 @@
 export { TileSelect } from './TileSelect';
-export type { TileSelectProps, TileSelectOption, TileSelectVariant, TileSelectSize } from './TileSelect';
+export type { TileSelectProps, TileSelectOption, TileSelectVariant, TileSelectSize } from './types';

package/dist/patterns/TileSelect/styles.d.ts

@@ -11,4 +11,46 @@ export declare const smallTileClass: {
     readonly active: "border-primary bg-primary/[.09] text-primary data-[hover=true]:bg-primary/[.09]";
     readonly icon: "flex h-[1.0625rem] w-[1.0625rem] items-center justify-center";
     readonly label: "text-[0.71875rem] font-medium leading-[0.875rem]";
+    /** `isLocked`: dashed and muted, and inert under the pointer. `pos-muted` is 4.83:1 on white. */
+    readonly locked: "cursor-not-allowed border-dashed border-pos-line-strong bg-white text-pos-muted data-[hover=true]:border-pos-line-strong data-[hover=true]:bg-white data-[pressed=true]:scale-100";
+};
+/**
+ * `size="md"` tile classes.
+ *
+ * Sized to the Figma spec for the payments-drop-in method picker (PP-1154):
+ * 48px inner content (icon 20 + gap 8 + label 20) + 32px vertical padding
+ * (`py-4`) = 80px. `h-auto` lets the tile grow past that floor when content
+ * wraps (localised long labels, a description).
+ *
+ * `bg-transparent` suppresses HeroUI's own fill so the active and hover
+ * surfaces come from these classes alone.
+ */
+export declare const mediumTileClass: {
+    readonly tile: "flex flex-col items-center justify-center gap-2 h-auto min-h-20 px-4 py-4 border bg-transparent transition-colors motion-reduce:transition-none [html[data-pos-reduce-motion=true]_&]:transition-none";
+    readonly idle: "border-default-200 text-default-800 hover:bg-default-50";
+    readonly active: "border-primary bg-primary-50 text-primary";
+    readonly label: "text-sm font-medium";
+    /**
+     * The grid holds a description or a badge: every tile left-aligns, with
+     * the icon and badge on one row, then the label, then the description.
+     */
+    readonly detailed: "items-start justify-start gap-1 whitespace-normal text-left";
+    /** Wraps the badge under the icon rather than overflowing a narrow tile. */
+    readonly header: "mb-1 flex w-full flex-wrap items-start justify-between gap-2";
+    /**
+     * `default-600`, not 500: on the picked tile's `primary-50` tint the 500
+     * measured 4.498:1, a hair under the floor.
+     */
+    readonly description: "text-xs font-normal leading-snug text-default-600";
+    /** The locked tile's description, muted with the rest of it (4.6:1 on `default-50`). */
+    readonly lockedDescription: "text-default-500";
+    /** `default-600` on `default-100`: about 7:1. */
+    readonly badge: "shrink-0 whitespace-nowrap rounded-full bg-default-100 px-2 py-0.5 text-[11px] font-medium leading-4 text-default-600";
+    /**
+     * `isLocked`: dashed, muted, inert under the pointer. Muted by color, not
+     * opacity, so the text keeps its contrast: `default-500` on `default-50`
+     * measures 4.6:1. HeroUI's hover dim and press scale are switched off.
+     */
+    readonly locked: "cursor-not-allowed border-dashed border-default-300 bg-default-50 text-default-500 hover:bg-default-50 data-[hover=true]:opacity-100 data-[pressed=true]:scale-100";
+    readonly lockedIcon: "text-default-400";
 };

package/dist/patterns/TileSelect/types.d.ts

@@ -0,0 +1,140 @@
+import { default as React } from 'react';
+export interface TileSelectOption {
+    /** Stable identifier returned via `onSelect`. */
+    key: string;
+    /** Visible label rendered under the icon. */
+    label: string;
+    /**
+     * Icon: iconify name (`'lucide:credit-card'`) or a `ReactNode` for
+     * fully-custom SVGs.
+     */
+    icon: string | React.ReactNode;
+    /**
+     * Disable the tile (greyed out, no click). The tile is `disabled`, so it
+     * also leaves the tab order. For an option that exists but cannot be
+     * picked yet, use `isLocked`.
+     */
+    isDisabled?: boolean;
+    /**
+     * One line of supporting copy. `variant="compact"` renders it for an
+     * option that ended up in the "More" menu, where the label alone
+     * ("Other") rarely says enough. `variant="tiles"` renders it only in a
+     * grid opted in to the detailed tile (some option has a `badge` or is
+     * `isLocked`): on the `size="md"` tile under the label, and as the item
+     * description in the small-viewport `<Select>`. On its own it changes
+     * nothing in the tile grid.
+     */
+    description?: string;
+    /**
+     * A short tag on the tile's top row: "Coming soon", "New".
+     * `variant="tiles"` at `size="md"`; also the end of its `<Select>` item.
+     * Opts the grid in to the detailed tile.
+     */
+    badge?: string;
+    /**
+     * Shown, not pickable: a dashed, muted tile that ignores presses. Unlike
+     * `isDisabled` it stays focusable and is `aria-disabled`, so keyboard and
+     * screen-reader users reach it and hear `lockedReason`. `variant="compact"`
+     * and the small-viewport `<Select>` treat it as disabled. Opts the grid in
+     * to the detailed tile.
+     */
+    isLocked?: boolean;
+    /** What a locked tile announces. Defaults to `badge`. */
+    lockedReason?: string;
+    /**
+     * `variant="compact"` only: keep this option in the "More" menu at
+     * every width, however much room the track has. For an action that is
+     * secondary by decision rather than by measurement — a payments picker
+     * that wants "Other" one click away so the methods people actually
+     * reach for own the row.
+     *
+     * The menu is rendered whenever an option asks for it, so this also
+     * overrides the rule that suppresses a menu holding a single option.
+     */
+    alwaysInMenu?: boolean;
+    /**
+     * `variant="compact"` only: what this option is worth keeping on the
+     * track. When the pill runs out of room the LOWEST priority folds into
+     * the menu first; equal priorities fold from the end of the list.
+     * Default `0`.
+     *
+     * Display order is untouched — this decides what survives a squeeze,
+     * not where anything sits. A payments picker can list "Other" before
+     * "Split payment" and still lose "Other" first, because splitting a
+     * payment is the rarer, weightier thing to reach for.
+     */
+    priority?: number;
+    /** Override per-tile test id; defaults to `${dataTestId}-${key}`. */
+    'data-testid'?: string;
+}
+/**
+ * `'tiles'` — the icon-over-label grid, with a `<Select>` dropdown under
+ * `md`. The picker is the subject of the step.
+ *
+ * `'compact'` — a segmented pill of label-only toggles at every width,
+ * keeping every option the track can hold and folding the rest into a
+ * "More" menu rather than scrolling. The picker is a control among others.
+ */
+export type TileSelectVariant = 'tiles' | 'compact';
+/**
+ * Tile size for `variant="tiles"`.
+ *
+ * `'md'` (default) — the 80px icon-over-label tile of the payments drop-in.
+ *
+ * `'sm'` — the 58px tender tile of the Quick Donation / Quick Membership
+ * mockups (`.tender-tile`): 17px icon over an 11.5px label, 10px/4px padding,
+ * 12px radius, 8px between tiles; the picked tile takes a brand border, a 9%
+ * brand tint and brand text. DS tokens only, rem only.
+ */
+export type TileSelectSize = 'md' | 'sm';
+export interface TileSelectProps {
+    /** Options to render in order. */
+    options: readonly TileSelectOption[];
+    /** Currently selected option `key`. `null` = no selection. */
+    selectedKey: string | null;
+    /** Fires when a tile is selected. */
+    onSelect: (key: string) => void;
+    /** Optional heading rendered above the grid. */
+    heading?: string;
+    /**
+     * `aria-label` for the wrapping group when `heading` is omitted.
+     * Translatable. Default `'Select an option'`. When `heading` is
+     * provided this prop is ignored — the grid is labelled by the
+     * heading element.
+     */
+    ariaLabel?: string;
+    /**
+     * How the options render. Default `'tiles'`.
+     * See {@link TileSelectVariant}.
+     */
+    variant?: TileSelectVariant;
+    /**
+     * `variant="compact"` only: a CAP on how many options stay on the pill.
+     * Unset by default, and normally best left that way — the pill already
+     * measures the track and keeps every option that fits, folding only
+     * what is left over. Set it when a surface wants a shorter row than
+     * its width allows.
+     *
+     * The cap gives way in one case: when honouring it would leave a single
+     * option in the menu that the track had room for. A "More" button is
+     * wider than most labels, so that fold costs space and buys a click.
+     */
+    maxVisible?: number;
+    /**
+     * `variant="compact"` only: label for the overflow trigger. Shown
+     * until an option inside the menu is selected, after which the
+     * trigger carries that option's label. Translatable. Default `'More'`.
+     */
+    moreLabel?: string;
+    /**
+     * Grid columns on >= sm. Default `3`. Mobile collapses to 2.
+     * `5` and `6` keep a full method set on one row on a wide surface.
+     * Ignored by `variant="compact"`, which is a single strip.
+     */
+    columnsDesktop?: 2 | 3 | 4 | 5 | 6;
+    columnsMobile?: 1 | 2;
+    /** `variant="tiles"` only. See {@link TileSelectSize}. Default `'md'`. */
+    size?: TileSelectSize;
+    className?: string;
+    'data-testid'?: string;
+}

package/dist/patterns/VerticalSteps/StepPager.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import { StepPagerProps } from './types';
+export declare function StepPager({ steps, currentStep, onStepChange, progressLabel, nextLabel, previousLabel, finalActionLabel, onFinalAction, isFinalActionDisabled, className, 'data-testid': dataTestId, previousTestId, nextTestId, finalActionTestId, }: StepPagerProps): JSX.Element;
+export declare namespace StepPager {
+    var displayName: string;
+}

package/dist/patterns/VerticalSteps/StepsReadiness.d.ts

@@ -0,0 +1,15 @@
+import { JSX } from 'react';
+import { StepsReadinessProps } from './types';
+/**
+ * The verdict that sits in `VerticalSteps`' `header`: ready to publish,
+ * N things to fix, or already live. Copy comes in as props.
+ *
+ * `role="status"` on every variant: the count changes while the user edits,
+ * and a polite announcement is the right weight for it. `data-ready` is
+ * `"true"` for `ready` and `live`, `"false"` for `fix`, so a test can wait on
+ * it without reading copy.
+ */
+export declare function StepsReadiness({ variant, title, description, className, 'data-testid': dataTestId, }: StepsReadinessProps): JSX.Element;
+export declare namespace StepsReadiness {
+    var displayName: string;
+}

package/dist/patterns/VerticalSteps/VerticalSteps.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import { VerticalStepsProps } from './types';
+export declare function VerticalSteps({ steps, currentStep: currentStepProp, defaultStep, onStepChange, isStepReachable, ariaLabel, statusLabels, header, maxHeight, className, style, 'data-testid': dataTestId, ...rest }: VerticalStepsProps): JSX.Element;
+export declare namespace VerticalSteps {
+    var displayName: string;
+}