@leta-io/components 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,4719 @@
+import * as React from 'react';
+import { IconName } from '@leta-io/icons';
+import { Map } from 'leaflet';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ToggleProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    className?: string;
+    id?: string;
+    name?: string;
+}
+declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Toggle Button (Figma `10900:15545`) — a binary, icon-only switch that holds
+ * its on/off state until pressed again (unlike a standard action Button, which
+ * fires a one-shot command). Use it for isolated settings (Mute, Bookmark,
+ * Pin) and formatting toggles (Bold / Italic / Underline in a rich toolbar).
+ * Works on both desktop and mobile.
+ *
+ * The on/off state is exposed to assistive tech via **`aria-pressed`** ("Toggle
+ * Button, pressed" / "…, not pressed"). Same press/hover micro-animations as
+ * `Button` (150ms colour/shadow transitions + `scale(0.96)` on press).
+ *
+ * States (Figma): Idle (transparent) · Hover (neutral bg+border) · Pressed
+ * (mouse-down, darker neutral) · Selected (`aria-pressed`, secondary bg+border)
+ * · Focus (ring) · Disabled (dimmed icon).
+ */
+interface ToggleButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+    /** The glyph (required — the button is icon-only). */
+    icon: IconName;
+    /** Render the outlined icon variant. */
+    outlined?: boolean;
+    /** Controlled on/off state (drives `aria-pressed`). Omit for uncontrolled. */
+    pressed?: boolean;
+    /** Initial on/off state when uncontrolled. Default `false`. */
+    defaultPressed?: boolean;
+    /** Fired with the new on/off state when toggled. */
+    onPressedChange?: (pressed: boolean) => void;
+    /** Accessible name — REQUIRED (the button has no text). */
+    'aria-label': string;
+}
+declare const ToggleButton: React.ForwardRefExoticComponent<ToggleButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface CheckboxProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    className?: string;
+    id?: string;
+    name?: string;
+    value?: string;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+
+interface RadioButtonProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    className?: string;
+    id?: string;
+    name?: string;
+    value?: string;
+}
+declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
+
+interface LetaLogoProps extends Omit<React.SVGProps<SVGSVGElement>, 'type'> {
+    type?: 'symbol' | 'wordmark';
+    size?: 'small' | 'medium' | 'large';
+}
+declare const LetaLogo: React.ForwardRefExoticComponent<Omit<LetaLogoProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+
+type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'ghost-error' | 'dashed' | 'destructive' | 'plain' | 'success';
+type ButtonSize = 'extra-small' | 'small' | 'medium' | 'large' | 'fab';
+type ButtonPlatform = 'desktop' | 'mobile';
+interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    /** Visual variant. Default: 'primary'. Mobile-only: 'success'. FAB-only: 'primary' / 'secondary'. */
+    variant?: ButtonVariant;
+    /** Size. Default: 'medium'. FAB has no Disabled state. */
+    size?: ButtonSize;
+    /** Platform token set. Default: 'desktop'. */
+    platform?: ButtonPlatform;
+    /** Leading icon (`IconName` from @leta-io/icons). With both iconLeft and iconRight + label, renders as Split Button. */
+    iconLeft?: IconName;
+    /** Trailing icon. */
+    iconRight?: IconName;
+    /** When set, button renders icon-only — `children` is ignored. `aria-label` is required. */
+    iconOnly?: IconName;
+    /** Desktop-only "Prominent Icon Only" treatment (medium size only). Larger icon, tighter padding. */
+    prominent?: boolean;
+    /** Render the button's icon(s) using their outlined glyph variant (Figma `Icon/*-Outline`). Default false. */
+    iconOutlined?: boolean;
+    /** For Plain variant: render the link underline. Default: true. */
+    showUnderline?: boolean;
+    /** Standard HTML button type attribute. */
+    type?: 'button' | 'submit' | 'reset';
+    /**
+     * When set, clicking cross-fades the button's icon to this icon for
+     * `copiedDuration` ms — the "copy → check" contextual animation.
+     * Works with `iconOnly`, `iconLeft`, and `iconRight`.
+     */
+    copyIcon?: IconName;
+    /** When provided and `copyIcon` is set, the label text swaps to this string while copied. */
+    copiedLabel?: string;
+    /** How long (ms) to show the copied state before resetting. Default 2000. */
+    copiedDuration?: number;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+type CollapsedSidebarLogoProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'children'> & {
+    /** Required for screen reader users. Suggested: "Expand sidebar". */
+    'aria-label': string;
+};
+declare const CollapsedSidebarLogo: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "type"> & {
+    /** Required for screen reader users. Suggested: "Expand sidebar". */
+    'aria-label': string;
+} & React.RefAttributes<HTMLButtonElement>>;
+
+type AvatarSize = 'xs' | 'small' | 'medium' | 'large';
+type AvatarTone = 'teal' | 'warning' | 'yankee-blue';
+interface AvatarProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** Required — used as the accessible name and as the source for derived initials. */
+    name: string;
+    size?: AvatarSize;
+    /** Photo URL. If it fails to load (onError), Avatar falls back to initials on the chosen tone. */
+    src?: string;
+    /** Tonal background for the initials render mode. Default: 'yankee-blue'. */
+    tone?: AvatarTone;
+    /** Override the derived initials (e.g. corporate accounts using "CO" instead of name-derived). */
+    initials?: string;
+    /** When nested inside an already-labeled interactive parent, set this to hide from SR. */
+    decorative?: boolean;
+}
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
+
+/** The Figma Avatar photo set: `[Photo 1, Photo 2, Photo 3]`. */
+declare const AVATAR_PHOTOS: readonly [string, string, string];
+
+type BadgeColor = 'caution' | 'warning' | 'error' | 'information' | 'success' | 'notice' | 'primary' | 'primary-alt' | 'neutral' | 'highlight' | 'secondary';
+interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** Badge label text. */
+    label: string;
+    /** Semantic color variant. Default: 'neutral'. */
+    color?: BadgeColor;
+    /** Icon rendered before the label (Figma "Leading Icon" type). */
+    leadingIcon?: IconName;
+    /** Icon rendered after the label (Figma "Trailing Icon" type). */
+    trailingIcon?: IconName;
+    /**
+     * Render the badge's icon(s) outlined rather than filled. Defaults to
+     * **filled**, matching Figma's Delivery Badges (`68:36703`), whose icon
+     * instances are all filled glyphs (`Icon/Return`, `Icon/Broadcast`,
+     * `Icon/Check-Circle` — never the `-Outline` siblings). Mirrors `Button`'s
+     * `iconOutlined`: without an explicit value the library-wide outlined default
+     * would silently flip these to the thinner outline glyph.
+     */
+    iconOutlined?: boolean;
+    /**
+     * Override the icon tint. Defaults to the badge colour's own icon token, which
+     * is right for a badge whose icon reinforces its semantic (a red Error glyph on
+     * an error badge). Set this when the glyph carries its own fixed meaning
+     * independent of the badge colour — e.g. the driver rating's gold star on a
+     * neutral badge (`--icons-caution-default`).
+     */
+    iconColor?: string;
+}
+/**
+ * Desktop Badge — a compact, non-interactive label that states a fact about the
+ * thing beside it: a status, a count, an outcome.
+ *
+ * **When to use:** naming state on a row, card or header.
+ * **When not to use:** anything the user can act on (Chip / Tag / Button).
+ *
+ * ## Badges do not normally carry a tooltip — the SLA badge is the exception
+ *
+ * A badge is already the short form of its own meaning, so hovering one usually
+ * has nothing left to reveal, and attaching a tip to every badge would put
+ * hover targets all over a table that reward the user with a restatement.
+ *
+ * An **SLA badge is the deliberate exception**: it is interactive when there is
+ * additional SLA information behind it, and hovering or focusing it reveals the
+ * relevant SLA tooltip — the state badge repeated as a heading, over a sentence
+ * naming what is late and against which configured target (Figma
+ * `2032:131435` … `2038:133959`). The extra information is real, and it is the
+ * only thing that turns "Delayed" into something a dispatcher can act on.
+ *
+ * The rule that follows from that (ruled 2026-09-04): **wherever the same order
+ * shows an SLA badge, it shows the same SLA tooltip** — the drawer's badge and
+ * the table row's status icon resolve one tooltip, never two copies. In this
+ * repo that single source is the playground's `lib/slaTip.tsx`.
+ */
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+
+interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** Tag label text. */
+    label: string;
+    /**
+     * When provided, renders a trailing Cancel icon as a <button>.
+     * Callback fires on button click.
+     */
+    onRemove?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Accessible label for the remove button. Default: "Remove". */
+    removeLabel?: string;
+}
+declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLSpanElement>>;
+
+interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** Chip label text. */
+    label: string;
+    /** Optional icon before the label. */
+    leadingIcon?: IconName;
+    /** Optional icon after the label. */
+    trailingIcon?: IconName;
+    /** When true the chip renders in the Active (selected) state. Caller-controlled. */
+    active?: boolean;
+}
+/**
+ * Desktop Chip — a compact, pill-shaped element that represents a specific
+ * piece of information, an attribute, or a discrete action. Chips help users
+ * filter content, make selections, or trigger context-specific tasks.
+ *
+ * **When to use:**
+ * - Above **stacked lists** to filter the items shown.
+ * - As toggleable attribute tags (e.g. category, status, type).
+ * - As compact triggers for a context-specific action tied to a list item.
+ *
+ * **When NOT to use:**
+ * - To filter **table** data — use the table's built-in column filters instead.
+ * - As a navigation element — use Tabs or Segments for that.
+ * - To replace a full-width button or a form control.
+ *
+ * 4 types (No Icon / Leading / Trailing / Leading + Trailing) × 5 states
+ * (Idle / Hover / Pressed / Active / Focus) = 20 Figma variants (`7139:53343`).
+ * Renders as a `<button>`; Active state is caller-controlled via the `active` prop.
+ */
+declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface FlagProps extends React.SVGProps<SVGSVGElement> {
+    /**
+     * ISO 3166-1 alpha-2 country code, e.g. "US", "DE", "GB".
+     * Subdivision codes from Figma (e.g. "GB-ENG", "BQ-BO") are also accepted.
+     */
+    code: string;
+}
+declare const Flag: React.ForwardRefExoticComponent<Omit<FlagProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+
+type FeaturedIconColor = 'information' | 'highlight' | 'error' | 'success' | 'neutral' | 'warning' | 'teal';
+type FeaturedIconSize = 'medium' | 'large';
+interface FeaturedIconProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Any icon from @leta-io/icons. */
+    icon: IconName;
+    /**
+     * Semantic color variant — controls background tint and icon tint.
+     * Maps directly to Figma's "Property 1" variant property.
+     */
+    color: FeaturedIconColor;
+    /**
+     * Size variant.
+     * - medium: 32 × 32 px container, 16 px icon
+     * - large:  40 × 40 px container, 20 px icon
+     * @default 'medium'
+     */
+    size?: FeaturedIconSize;
+    /**
+     * Container shape.
+     * - `rounded`: rounded square (`--rounding-lg`) — the component default.
+     * - `circle`:  fully round (`--rounding-round`) — matches Figma instances that
+     *   override the corner radius (e.g. the Table Cell "API" type).
+     * @default 'rounded'
+     */
+    shape?: 'rounded' | 'circle';
+    /**
+     * Render the icon glyph outlined rather than filled. Defaults to filled so
+     * existing consumers are unchanged; pass `true` where the design uses the
+     * outlined glyph (e.g. Order Detail item cards use `Orders` outlined).
+     * @default false
+     */
+    outlined?: boolean;
+}
+/**
+ * Featured Icon — a rounded-square container with a centered icon, used as a
+ * visual anchor for card section titles. Non-interactive, purely presentational.
+ */
+declare const FeaturedIcon: React.ForwardRefExoticComponent<FeaturedIconProps & React.RefAttributes<HTMLSpanElement>>;
+
+interface ViewSwitcherTabProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** Tab label text. */
+    label: string;
+    /** Optional icon before the label. */
+    leadingIcon?: IconName;
+    /** When true the tab renders in the Active (selected) state. Caller-controlled. */
+    active?: boolean;
+}
+/**
+ * View Switcher Tab — compact tab for switching content layout (e.g. Grid vs
+ * List). Base component for the View Switcher molecule.
+ *
+ * 3 visual states: Default, Hover, Active (selected).
+ * Active state is caller-controlled via the `active` prop.
+ */
+declare const ViewSwitcherTab: React.ForwardRefExoticComponent<ViewSwitcherTabProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface SegmentSwitcherTabProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** Tab label text. */
+    label: string;
+    /** Optional icon before the label. */
+    leadingIcon?: IconName;
+    /** When true the tab renders in the Active (selected) state. Caller-controlled. */
+    active?: boolean;
+}
+/**
+ * Segment Switcher Tab — prominent tab for high-level navigation within a
+ * container. Base component for the Segment Switcher molecule.
+ *
+ * Larger than View Switcher Tab: 40px height, Label/L/SemiBold text, 20–24px icon.
+ * 3 visual states: Default, Hover, Active (selected).
+ */
+declare const SegmentSwitcherTab: React.ForwardRefExoticComponent<SegmentSwitcherTabProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface PageTabProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** Tab label text. */
+    label: string;
+    /** When true the tab renders in the Active (selected) state with underline indicator. */
+    active?: boolean;
+}
+/**
+ * Page Tab — standard page-level tab with bottom underline indicator.
+ *
+ * 4 visual states: Idle, Hover, Pressed, Active.
+ * Active state includes a 2px bottom indicator bar.
+ */
+declare const PageTab: React.ForwardRefExoticComponent<PageTabProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface WizardTabProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /**
+     * The step's name **without its number** — "Select Driver", not
+     * "1. Select Driver". The number is prepended from {@link step}, so it cannot
+     * drift from the tab's position.
+     */
+    label: string;
+    /** Step number, rendered as the `"{step}. "` prefix on the label. */
+    step: string | number;
+    /** When true the tab renders in the Active (selected) state with underline indicator. */
+    active?: boolean;
+    /**
+     * When true the tab renders at 60% opacity AND is fully non-interactive:
+     * no hover/pressed visual, not focusable (`tabIndex=-1`), not clickable,
+     * `aria-disabled`. Used for future/unreached steps in a wizard flow — the user
+     * hasn't completed the current step yet, so they can't jump ahead. Completed
+     * steps stay in the Idle state (hoverable + clickable to go back).
+     */
+    inactive?: boolean;
+}
+/**
+ * Wizard Tab — step tab for multi-step wizard flows.
+ *
+ * Mirrors the Library set **`Wizard Tabs` `9817:17894`** (`Property 2` =
+ * Active / Hover / Idle / Pressed / Inactive), re-enumerated 2026-09-08.
+ *
+ * ## The step circle is gone (2026-09-08)
+ *
+ * The designer restructured this component: there is **no numbered circle badge**
+ * any more. The step number is simply the head of the label — Figma's `Tab Name`
+ * property literally reads `"1. Default"` — and the tab is otherwise a plain
+ * underline tab.
+ *
+ * ## Which makes it a `PageTab` with two additions, so it composes one
+ *
+ * Every remaining state matches {@link PageTab} token for token — Active and
+ * Pressed `--text-secondary-label`, Hover `--text-default-label`, Idle
+ * `--text-default-label-idle`, and a 2px `--icons-secondary-default` indicator on
+ * Active only — over the same 40px-tall, `--padding-12px` shell. So this renders a
+ * `PageTab` rather than a second copy of that styling: the two components are now
+ * the same tab in the design, and duplicating it is how they would quietly drift
+ * apart on the next change to either.
+ *
+ * What it adds on top:
+ *
+ * 1. **The `"{step}. "` prefix**, composed here so the number always agrees with
+ *    the tab's own position (see {@link step}).
+ * 2. **The `Inactive` state**, which `PageTab` has no equivalent of: 60% opacity
+ *    *and* genuinely inert — a future step can't be hovered, focused, or clicked
+ *    into, because the user hasn't finished the step they're on. `pointerEvents:
+ *    none` is what suppresses the composed tab's own hover/press tracking; a
+ *    visual-only dim would still light up under the cursor.
+ */
+declare const WizardTab: React.ForwardRefExoticComponent<WizardTabProps & React.RefAttributes<HTMLButtonElement>>;
+
+type MapIconVariant = 'object-pin' | 'numeric-pin' | 'badge' | 'event-pin' | 'bike-delivery';
+interface MapIconProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Which shape to render. */
+    variant: MapIconVariant;
+    /**
+     * Fill colour for the inner Background shape (the coloured circle inside the
+     * pin / behind the badge content). Default: 'var(--surface-secondary-bg)'.
+     * The outer pin/badge body is always white with a light-gray stroke for
+     * visibility against white-background maps.
+     *
+     * For `event-pin`, this controls the pin-icon colour instead.
+     * Ignored for `bike-delivery` (fixed illustration).
+     */
+    color?: string;
+    /**
+     * Icon to display inside Object Pin or Badge.
+     * Takes precedence over `text` when both are supplied.
+     */
+    icon?: IconName;
+    /**
+     * Text to display (e.g. a count like "5") — required for `numeric-pin`,
+     * optional for `badge`. Ignored for `object-pin`, `event-pin`, `bike-delivery`.
+     */
+    text?: string;
+}
+/**
+ * Map Icon — base map marker component for LETA map interfaces.
+ *
+ * Five variants:
+ * - **object-pin** — teardrop with an inner coloured circle + an icon (default: User)
+ * - **numeric-pin** — teardrop with an inner coloured circle + a number (`text`)
+ * - **badge** — circle with an inner coloured fill + text or icon
+ * - **event-pin** — solid teardrop with built-in Location-Check icon
+ * - **bike-delivery** — fixed 19×32 raster illustration of a top-down bike courier
+ *
+ * Interactive — consumers attach onClick / onMouseEnter handlers for
+ * tooltips, drawers, modals, etc.
+ */
+declare const MapIcon: React.ForwardRefExoticComponent<MapIconProps & React.RefAttributes<HTMLDivElement>>;
+
+type TitleVariant = 'page-dialog' | 'card';
+interface TitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    /** Heading text. @default 'Heading 1' (matches Figma default). */
+    text?: string;
+    /**
+     * Visual variant — matches Figma `Property 1`.
+     * - `page-dialog` → Heading/M/SemiBold (24px / 28px line-height)
+     * - `card`        → Body/L/SemiBold (16px / 24px line-height)
+     * @default 'page-dialog'
+     */
+    variant?: TitleVariant;
+    /**
+     * Semantic heading level to render. The visual size is controlled by
+     * `variant` — `as` only affects the underlying HTML tag for accessibility
+     * and document outline purposes.
+     * @default 'h2'
+     */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+/**
+ * Title — non-interactive heading element from Figma `6767:26920` ("Titles").
+ *
+ * Two variants:
+ * - **Page & Dialog Title** — top-level page or modal heading
+ * - **Card Title** — section / card heading
+ *
+ * The semantic HTML element is decoupled from the visual variant — callers
+ * pick `as` to fit their document outline, and `variant` to control size.
+ */
+declare const Title: React.ForwardRefExoticComponent<TitleProps & React.RefAttributes<HTMLHeadingElement>>;
+
+type MobileBadgeColor = 'blue' | 'green' | 'red' | 'orange' | 'yellow' | 'purple' | 'grey' | 'coral-red';
+type MobileBadgeVariant = 'basic' | 'progress';
+interface MobileBadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** Badge label text. */
+    label: string;
+    /**
+     * Semantic colour. Each value maps to a `--surface/{semantic}/mobile-badge`,
+     * `--border/{semantic}/mobile-badge`, and `--text/{semantic}/label` token triple.
+     * Per Figma `3100:17588`.
+     *
+     * Ignored for `variant="progress"` (always uses the grey/neutral palette per Figma).
+     */
+    color: MobileBadgeColor;
+    /** Optional leading (left) icon, 14×14. Ignored when `variant="progress"`. */
+    leadingIcon?: IconName;
+    /** Optional trailing (right) icon, 14×14. Ignored when `variant="progress"`. */
+    trailingIcon?: IconName;
+    /**
+     * Badge layout variant.
+     * - `basic` (default): plain text badge with optional icons.
+     * - `progress`: leading-indicator badge with a `ProgressTracker` on the left and progress text.
+     *   Always renders in the grey/neutral palette per Figma.
+     */
+    variant?: MobileBadgeVariant;
+    /**
+     * Progress value 0–100, used only when `variant="progress"`.
+     * @default 0
+     */
+    progressValue?: number;
+}
+/**
+ * Mobile Badge — compact pill-shaped status indicator for mobile interfaces.
+ *
+ * 8 colour variants × 3 icon-position types (No Icon / Leading / Trailing) = 24
+ * Figma variants under node `3100:17588`. Purely presentational — non-interactive.
+ *
+ * Padding is asymmetric: the icon-side uses `--padding-6px` and the text-side
+ * uses `--padding-8px`. No Icon uses 8/8.
+ *
+ * Typography: Caption/L/SemiBold (10/16/-0.28). Icons render at 14×14 with
+ * `color` matching the text colour.
+ */
+declare const MobileBadge: React.ForwardRefExoticComponent<MobileBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+
+interface MobileChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** Chip label text. */
+    label: string;
+    /** Optional leading (left) icon, 16×16. */
+    leadingIcon?: IconName;
+    /** Optional trailing (right) icon, 16×16. */
+    trailingIcon?: IconName;
+    /**
+     * Caller-controlled active (selected) state. Maps to Figma `State=Active`.
+     */
+    active?: boolean;
+}
+/**
+ * Mobile Chip — a compact, pill-shaped element that represents a specific
+ * piece of information, an attribute, or a discrete action on touch interfaces.
+ * Chips help users filter content, make selections, or trigger context-specific
+ * tasks.
+ *
+ * **When to use:**
+ * - Above **stacked lists** to filter the items shown (mobile context).
+ * - As toggleable attribute tags (e.g. category, status, type).
+ * - As compact triggers for a context-specific action tied to a list item.
+ *
+ * **When NOT to use:**
+ * - To filter **table** data — use the table's built-in column filters instead.
+ * - As a navigation element — use Mobile Segments or Tabs for that.
+ * - To replace a full-width button or a form control.
+ *
+ * **Touch-first:** no hover state. Pressed is tracked via touch/mouse-down;
+ * Active is caller-controlled via the `active` prop.
+ *
+ * 4 types (No Icon / Leading / Trailing / Leading + Trailing) × 4 states
+ * (Idle / Pressed / Active / Focus) = 16 Figma variants (`8269:29237`).
+ * Typography: Body/S/SemiBold (12px). Icons render at 16×16.
+ */
+declare const MobileChip: React.ForwardRefExoticComponent<MobileChipProps & React.RefAttributes<HTMLButtonElement>>;
+
+type MobileFeaturedIconColor = 'information' | 'success' | 'warning' | 'error' | 'highlight' | 'neutral';
+type MobileFeaturedIconVariant = 'basic' | 'filled';
+type MobileFeaturedIconSize = 'small' | 'medium' | 'large';
+interface MobileFeaturedIconProps extends React.HTMLAttributes<HTMLSpanElement> {
+    icon: IconName;
+    /** Semantic colour — maps to the icon and (for `filled`) the background tint. */
+    color: MobileFeaturedIconColor;
+    /**
+     * `basic` renders just the icon (no background).
+     * `filled` renders the icon centred in a tinted circular background.
+     * @default 'filled'
+     */
+    variant?: MobileFeaturedIconVariant;
+    /** @default 'medium' */
+    size?: MobileFeaturedIconSize;
+}
+/**
+ * Mobile Featured Icon — visual anchor for mobile cards / list rows / empty states.
+ *
+ * 6 colours × 2 variants × 3 sizes = 36 Figma variants under node `4136:74148`.
+ *
+ * - **Basic** — icon only (no background)
+ * - **Filled** — icon centred in a tinted circular background (same pattern as desktop FeaturedIcon)
+ *
+ * Non-interactive, purely presentational.
+ */
+declare const MobileFeaturedIcon: React.ForwardRefExoticComponent<MobileFeaturedIconProps & React.RefAttributes<HTMLSpanElement>>;
+
+interface MobileSegmentProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** Segment label text. */
+    label: string;
+    /**
+     * Caller-controlled active (selected) state. Maps to Figma `State=Active`.
+     * When true: elevated white fill + 3-layer shadow + full-contrast text.
+     * When false: idle gray fill + muted text.
+     */
+    active?: boolean;
+}
+/**
+ * Mobile Segment — pill-shaped segmented-control tab for mobile interfaces.
+ *
+ * Figma `3038:38166` — 2 variants (Default / Active). Mobile-only, so no hover.
+ * `active` is caller-controlled — typically wired into a parent Segmented
+ * Control molecule's selection state.
+ *
+ * Default: idle gray fill (`--surface-neutral-segment-idle`) + muted text.
+ * Active: white fill (`--surface-neutral-segment-selected`) + 3-layer shadow
+ * + full-contrast text.
+ */
+declare const MobileSegment: React.ForwardRefExoticComponent<MobileSegmentProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface MobileNavTabProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    label: string;
+    /** 24×24 icon shown above the label. */
+    icon: IconName;
+    /**
+     * Caller-controlled active state. When true, the icon and label render in
+     * the primary (LETA red) colour; otherwise the muted idle gray.
+     */
+    active?: boolean;
+}
+/**
+ * Mobile Nav Tab — vertical icon-over-label cell for mobile bottom navigation.
+ *
+ * Figma `8417:23519` — 2 variants (Idle / Active). 80×58 with bottom-aligned
+ * content (icon over label, 4px gap). Mobile-only, no hover.
+ *
+ * - Idle: icon `--icons-neutral-idle`, text `--text-default-label-idle`
+ * - Active: icon `--icons-primary-default`, text `--text-primary-label`
+ */
+declare const MobileNavTab: React.ForwardRefExoticComponent<MobileNavTabProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface CarouselPaginationProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Total number of pages. @default 3 */
+    total?: number;
+    /** Current page, 1-indexed. Must be in `[1, total]`. */
+    current: number;
+}
+/**
+ * Carousel Pagination — page-position indicator for mobile carousels.
+ *
+ * Figma `8667:15335` defines exactly 3 page variants; this component
+ * generalises to any total. The active indicator is a 20×6 red pill;
+ * inactive indicators are 6×6 gray circles. 8px gap.
+ *
+ * Non-interactive — the parent carousel handles page navigation.
+ */
+declare const CarouselPagination: React.ForwardRefExoticComponent<CarouselPaginationProps & React.RefAttributes<HTMLDivElement>>;
+
+interface ProgressTrackerProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /** Progress value, 0-100. Clamped at the bounds. */
+    value: number;
+}
+/**
+ * Progress Tracker — 14×14 circular progress indicator (Figma `5608:216176`).
+ *
+ * A gray track ring with a green arc showing completion percentage. Figma
+ * defines 4 discrete variants (10 / 50 / 75 / 100 %); this React component
+ * generalises to any `value` in `[0, 100]`.
+ *
+ * Used as the leading indicator inside the Progress Badge variant of
+ * MobileBadge.
+ */
+declare const ProgressTracker: React.ForwardRefExoticComponent<ProgressTrackerProps & React.RefAttributes<HTMLSpanElement>>;
+
+interface MapZoomControlProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Called when the zoom-in (+) button is clicked. */
+    onZoomIn?: () => void;
+    /** Called when the zoom-out (−) button is clicked. */
+    onZoomOut?: () => void;
+    /** Disables the zoom-in button (e.g. when already at maximum zoom). */
+    disableZoomIn?: boolean;
+    /** Disables the zoom-out button (e.g. when already at minimum zoom). */
+    disableZoomOut?: boolean;
+}
+declare const MapZoomControl: React.ForwardRefExoticComponent<MapZoomControlProps & React.RefAttributes<HTMLDivElement>>;
+
+interface MapViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onLoad'> {
+    /** Map centre as `[latitude, longitude]`. Default Nairobi (`[-1.286, 36.817]`). */
+    center?: [number, number];
+    /** Initial zoom level. Default 14. */
+    zoom?: number;
+    /** Minimum zoom level. Default 3. */
+    minZoom?: number;
+    /** Maximum zoom level. Default 19 (OSM raster max). */
+    maxZoom?: number;
+    /**
+     * Raster tile URL template. **Omit to get the default** — OpenStreetMap standard
+     * tiles, darkened in CSS when the theme is dark (see `DARK_TILE_FILTER`). Passing
+     * this pins the basemap and opts out of the dark treatment entirely (pass
+     * `attribution` too, since the notice must match the tiles served).
+     */
+    tileUrl?: string;
+    /** Tile attribution HTML. Defaults to the notice for whichever themed basemap is in use. */
+    attribution?: string;
+    /** Show the overlaid `<MapZoomControl>` (bottom-right). Default true. */
+    showZoomControl?: boolean;
+    /** Fired (after) the Leaflet map instance is created. */
+    onReady?: (map: Map) => void;
+}
+/**
+ * Map View — the LETA standard interactive map primitive. A **Leaflet** map
+ * (OpenStreetMap raster tiles, no API key) with the design system's
+ * {@link MapZoomControl} overlaid bottom-right and wired to drive the map's zoom
+ * (Leaflet's own zoom control is disabled). Pan by drag, zoom by wheel / the
+ * control; the zoom buttons disable at the min/max zoom.
+ *
+ * **Standard:** this is the canonical map surface for every LETA map view (e.g.
+ * the Extra Large Modal picker) **until a more robust provider (e.g. Google Maps)
+ * is adopted** — swap the internals here and every consumer updates.
+ *
+ * Leaflet is loaded client-side (dynamic import) so it is SSR-safe; its CSS is
+ * injected at runtime (CDN-pinned). Requires network access for tiles.
+ *
+ * **When to use:** any embedded geographic map (route assignment, delivery
+ * tracking, location pickers).
+ * **When NOT to use:** a static location thumbnail (use an image) or the Map
+ * Icon markers in isolation.
+ */
+declare const MapView: React.ForwardRefExoticComponent<MapViewProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * The design-system route colours, as **token names** (pass through `var()`).
+ *
+ * These are theme-aware on purpose: the planned-route navy inverts to a light
+ * colour in dark mode, which is only legible because `MapView` also swaps to a
+ * dark basemap at the same time. Hardcoding a hex here (as one of the two former
+ * legend copies did) breaks in dark mode twice over — invisible on the dark pill
+ * *and* wrong against the dark tiles.
+ */
+declare const MAP_ROUTE_PLANNED = "--surface-secondary-bg";
+declare const MAP_ROUTE_DRIVEN = "--icons-primary-default";
+interface MapLegendEntry {
+    /** Row label, e.g. "Planned Route". */
+    label: string;
+    /**
+     * Swatch colour. A design-token NAME (`--surface-secondary-bg`) or any CSS
+     * colour. Token names are wrapped in `var()` automatically, so
+     * {@link MAP_ROUTE_PLANNED} / {@link MAP_ROUTE_DRIVEN} can be passed directly.
+     */
+    color: string;
+    /** Draw the swatch dashed (a planned/predicted route) rather than solid. */
+    dashed?: boolean;
+}
+interface MapLegendProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Rows, in order. Dividers are inserted between them. */
+    entries: MapLegendEntry[];
+}
+/**
+ * Map Legend — the route key that floats over a map surface (local Figma component
+ * set `1528:119929`; `1 Route` / `2 Routes` are just one vs two `entries`).
+ *
+ * A pill on `--surface-neutral-bg-default` with the map-overlay elevation, one row
+ * per route: a 32px line swatch (dashed = planned, solid = driven) plus its label.
+ *
+ * **This exists because it shipped twice and drifted.** The order-detail map and the
+ * dispatch/add-to-trip maps each had their own copy, and they diverged in three
+ * ways at once — a hardcoded `#192037` swatch instead of the theme-aware token
+ * (invisible on the dark pill), a `viewBox` that clipped the dash caps, and a stray
+ * `strokeLinecap="round"` that turned the dashes into dots. One component, one
+ * rendering.
+ *
+ * Positioning is the caller's job (the legend is `position: static` here) — the map
+ * surfaces place it bottom-centre, and the Add To Trip map lifts it clear of the
+ * driver popover.
+ */
+declare const MapLegend: React.ForwardRefExoticComponent<MapLegendProps & React.RefAttributes<HTMLDivElement>>;
+
+interface LoadingOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Show the overlay. Setting this back to `false` requests dismissal — the
+     * overlay stays visible until the animation completes its current cycle
+     * (one full cycle minimum), then unmounts.
+     */
+    open: boolean;
+    /**
+     * How long `open` must stay true before the loader actually appears, ms.
+     *
+     * A fetch that resolves quickly should show nothing at all: a spinner that
+     * flashes up and vanishes reads as a glitch and is harder to follow than a
+     * brief pause. Only once loading has gone on long enough to be noticed is a
+     * loader an explanation rather than a distraction (Doc 3 §2.2).
+     *
+     * The matching "once shown, keep it up long enough to read" half is already
+     * covered, and more strictly, by the cycle-aligned dismissal below. Set to `0`
+     * for a surface that must acknowledge instantly.
+     */
+    showDelayMs?: number;
+    /**
+     * Hold the loader until the mark finishes its current animation cycle before
+     * hiding. Default **true**.
+     *
+     * The cycle is ~3.7s, and aligning to it exists so the LETA mark is never cut
+     * off mid-sweep — right for a first load, where the viewer is waiting anyway
+     * and the mark is the only thing on screen.
+     *
+     * It is wrong for a short acknowledgement. Anything that resolves in
+     * well under a cycle inherits the whole of it: a hold of, say, 700ms becomes
+     * ~3.7s on screen, and the loader stops reporting work and starts being a
+     * delay. Pass `false` there and the loader leaves when its `open` does.
+     */
+    holdForCycle?: boolean;
+    /**
+     * Cover only the nearest positioned ancestor (`position: absolute`) instead
+     * of the whole viewport (`position: fixed`). Use for region-scoped loads —
+     * e.g. dimming just the table area (toolbars + table + pagination) while it
+     * reloads. The parent region must be `position: relative`.
+     */
+    contained?: boolean;
+    /**
+     * Solid scrim instead of the default translucent one. Use when the content
+     * behind must NOT show through — a full-screen / whole-view reload (e.g. the
+     * first data load, empty → populated). Light region refreshes keep the default
+     * translucent scrim so the surrounding chrome stays visible.
+     */
+    opaque?: boolean;
+    /** First text line (Heading/S/SemiBold, `--text-default-heading`). Default "Loading" (Doc 3 §2.1). */
+    title?: string;
+    /** Second text line (Body/M/Regular, `--text-default-sub-body`). Default "This will only take a moment" (Doc 3 §2.1). */
+    subtitle?: string;
+    /**
+     * Override the animation source URL (a Lottie JSON). Defaults to the LETA
+     * loader shipped with the package.
+     */
+    animationUrl?: string;
+}
+declare const LoadingOverlay: React.ForwardRefExoticComponent<LoadingOverlayProps & React.RefAttributes<HTMLDivElement>>;
+
+type PageVariant = 'data-table' | 'configuration';
+interface PageProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /**
+     * Which page layout to render (Figma `Type`):
+     * - `data-table` — a Table Container (toolbar + table) page.
+     * - `configuration` — a Sidetab nav beside a column of Configuration Cards.
+     * Default `data-table`.
+     */
+    variant?: PageVariant;
+    /** Page heading. Default "Heading 1". */
+    heading?: string;
+    /** Body override — replaces the variant's default page body (everything below the Top Bar). */
+    children?: React.ReactNode;
+    /**
+     * Number of active filter rules. Forwarded to the default `data-table` variant's
+     * `TableContainer`. Ignored when `children` is overridden or `variant` is
+     * `configuration`. Default 0.
+     */
+    filterCount?: number;
+}
+/**
+ * Page (`9626:14490`) — a full desktop application page: a collapsed
+ * {@link SideBar} rail beside a viewport of a {@link TopBar} and a scrolling body.
+ * The body opens with a page Title and a {@link PageTabsControl}, then an info
+ * {@link NotificationBanner}, then the variant's main content.
+ *
+ * Variants (Figma `Type`):
+ * - **data-table** — a {@link TableContainer} (search/filter toolbar + table + pagination).
+ * - **configuration** — a {@link Sidetab} nav beside a column of {@link ConfigurationCard}s.
+ *
+ * The Side Bar and Top Bar are fixed (sticky); only the page body scrolls.
+ * Composition only — every region is an already-built organism / molecule.
+ *
+ * **When to use:** the top-level shell for a product screen.
+ * **When NOT to use:** a modal/dialog flow (use the Templates) or a single
+ * component in isolation.
+ */
+declare const Page: React.ForwardRefExoticComponent<PageProps & React.RefAttributes<HTMLDivElement>>;
+
+type UserMenuState = 'idle' | 'hover' | 'pressed';
+interface UserMenuProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    /** The user's name — drives the avatar initials and the accessible name. */
+    name: string;
+    /** Avatar photo URL (falls back to initials). */
+    avatarSrc?: string;
+    /** Avatar tone. Default `teal`. */
+    tone?: AvatarTone;
+    /** Force a visual state (catalogs) — overrides hover/press. */
+    state?: UserMenuState;
+}
+/**
+ * User-Menu — the account trigger in the Top Bar: a pill holding the user's
+ * Avatar and a chevron, opening the user menu dropdown on click. Hover/pressed
+ * are runtime; `state` forces a visual state for catalogs.
+ *
+ * **When to use:** the account control in the application Top Bar.
+ * **When not to use:** the menu panel it opens (Desktop Dropdowns `user-menu`);
+ * a plain avatar (Avatar).
+ */
+declare const UserMenu: React.ForwardRefExoticComponent<UserMenuProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface TopFilterProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** Filter label. Typically the dimension being filtered (e.g. "Status"). */
+    label?: string;
+    /**
+     * When true, renders a trailing Chevron-Down affordance. Advanced filters open
+     * an options dropdown on click — the overlay is a separate (later) molecule, so
+     * this component only fires `onClick`; it does not own or render the dropdown.
+     */
+    advanced?: boolean;
+    /**
+     * When true, the filter is currently applied. Caller-controlled. Switches the
+     * border to the secondary (active) treatment and, at rest, fills with the
+     * active surface. Exposed to assistive tech via `aria-pressed`.
+     */
+    selected?: boolean;
+    /**
+     * Optional badge shown between the label and chevron when `advanced && selected`.
+     * Pass a Delivery Badge (`<Badge />`) to indicate which sub-status is active.
+     */
+    badge?: React.ReactNode;
+}
+/**
+ * Top Filter — a compact, pill-shaped filter control for table/list toolbars.
+ * Filters rows by a status (or similar categorical dimension).
+ *
+ * **When to use:**
+ * - Quick status/category filters in a table toolbar.
+ * - `advanced` for filters whose options live behind a dropdown; `basic`
+ *   (default) for a single on/off toggle.
+ *
+ * **When NOT to use:**
+ * - For navigation — use Page Tabs Control or Desktop Segment Control.
+ * - For free-text search — use a search input.
+ * - As a general-purpose chip/tag — use Chip or Tag.
+ *
+ * 2 types (Basic / Advanced) × 6 states (Idle / Hover / Pressed and their
+ * `-Selected` counterparts) = 12 Figma variants (`1572:12741`). Renders a
+ * `<button>`; hover/press are tracked internally, `selected` is caller-controlled.
+ */
+declare const TopFilter: React.ForwardRefExoticComponent<TopFilterProps & React.RefAttributes<HTMLButtonElement>>;
+
+/** A single filter entry within a Top Filter Section. */
+interface TopFilterSectionItem {
+    /** Filter label. Defaults to "Status" if omitted (matches TopFilter). */
+    label?: string;
+    /** When true, this filter renders the Advanced (Chevron-Down) affordance. */
+    advanced?: boolean;
+    /** When true, this filter is currently applied. Caller-controlled. */
+    selected?: boolean;
+    /** Optional badge (e.g. Delivery Badge) shown inside Advanced filters when selected. */
+    badge?: React.ReactNode;
+}
+interface TopFilterSectionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** The filters to render, left to right. */
+    filters: TopFilterSectionItem[];
+    /** Fired when any filter is clicked, with that filter's index. */
+    onFilterClick?: (index: number) => void;
+}
+/**
+ * Top Filter Section — the filter bar that holds a horizontal row of
+ * {@link TopFilter} controls in a table toolbar.
+ *
+ * **When to use:**
+ * - As the status-filter row above/within a data table.
+ *
+ * **When NOT to use:**
+ * - For a single filter — use {@link TopFilter} directly.
+ * - For navigation — use Page Tabs Control.
+ * - For view switching — use Desktop Segment Control.
+ *
+ * Data-driven: pass a `filters` array; each entry becomes a `TopFilter`.
+ * Filters are **independent** (several can be applied at once) — selection state
+ * lives in the caller's data, surfaced back through `onFilterClick(index)`.
+ *
+ * **Selection is instant.** The selected border appears on the filter that was
+ * picked; each pill paints its own. An `animatedSelection` option once lifted the
+ * border off the pills and slid a single floating ring between them — it was
+ * removed on 2026-08-18 in favour of this, matching how the Broadcast Event
+ * Accordion's chips switch. A ring travelling between pills draws the eye to the
+ * journey rather than to the choice that was made.
+ *
+ * Figma `9469:84304` (Basic / Advanced reflect which kind of filters the row
+ * holds; the layout is identical). Renders a non-interactive `<div>` flex row.
+ */
+declare const TopFilterSection: React.ForwardRefExoticComponent<TopFilterSectionProps & React.RefAttributes<HTMLDivElement>>;
+
+type DesktopSegmentControlVariant = 'view' | 'segment';
+/** A single segment within a Desktop Segment Control. */
+interface DesktopSegmentControlItem {
+    /** Segment label text. */
+    label: string;
+    /** Optional icon before the label. */
+    leadingIcon?: IconName;
+}
+interface DesktopSegmentControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+    /**
+     * `view` — compact (ViewSwitcherTab); switches the layout of the current
+     * content without changing data (e.g. Grid vs List). `segment` — prominent
+     * (SegmentSwitcherTab); high-level navigation within a drawer/panel.
+     */
+    variant: DesktopSegmentControlVariant;
+    /** The segments to render, left to right. */
+    segments: DesktopSegmentControlItem[];
+    /** Index of the active segment. Controlled. */
+    value: number;
+    /** Fired with the clicked segment's index. */
+    onChange: (index: number) => void;
+}
+/**
+ * Desktop Segment Control — a segmented control that groups 2+ mutually
+ * exclusive options into a single track, with exactly one active.
+ *
+ * Two sizes from one Figma set (`5778:230039`):
+ * - **`view`** — compact (wraps {@link ViewSwitcherTab}); toggles how the same
+ *   data is displayed (Grid / List / Map). Sits near the content it controls.
+ * - **`segment`** — prominent (wraps {@link SegmentSwitcherTab}); high-level
+ *   navigation within a drawer/panel, swapping the body content.
+ *
+ * **When NOT to use:** top-level page navigation (use Page Tabs Control),
+ * filtering (use Top Filter), binary on/off (use Toggle), or long/overflowing
+ * option sets.
+ *
+ * Data-driven: `value`/`onChange` enforce single-active. Renders a `<div>`
+ * track (`role="group"`); each tab exposes `aria-pressed`.
+ */
+declare const DesktopSegmentControl: React.ForwardRefExoticComponent<DesktopSegmentControlProps & React.RefAttributes<HTMLDivElement>>;
+
+type PageTabsControlVariant = 'basic' | 'wizard';
+/** A single tab within a Page Tabs Control. */
+interface PageTabsControlItem {
+    /** Tab label text. */
+    label: string;
+    /** Step number prefixed to the label (wizard only). Defaults to the 1-based index. */
+    step?: string | number;
+    /** Wizard only — marks a future/unreached step (renders at 60% opacity). */
+    inactive?: boolean;
+}
+interface PageTabsControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+    /** `basic` wraps PageTab; `wizard` wraps WizardTab (numbered `"N. Label"` steps). */
+    variant?: PageTabsControlVariant;
+    /** The tabs to render, left to right. */
+    tabs: PageTabsControlItem[];
+    /** Index of the active tab. Controlled. */
+    value: number;
+    /** Fired with the clicked tab's index. */
+    onChange: (index: number) => void;
+}
+/**
+ * Page Tabs Control — a full-width horizontal tab bar for top-level navigation
+ * between sections/pages, with a full-width demarcator line beneath the tabs.
+ *
+ * - **`basic`** (wraps {@link PageTab}) — navigate between page sections.
+ * - **`wizard`** (wraps {@link WizardTab}) — sequential multi-step flow; each tab
+ *   is numbered `"N. Label"` and carries an optional `inactive` (future-step) flag.
+ *
+ * **When NOT to use:** switching content layout (use Desktop Segment Control),
+ * filtering (use Top Filter), or very large tab counts needing overflow scroll.
+ *
+ * Figma `3907:71981`. Data-driven: `value`/`onChange`. The active tab's 2px
+ * indicator sits on the demarcator line (`--border-neutral-default`). Renders a
+ * `<div role="tablist">`; each tab is `role="tab"` + `aria-selected`.
+ */
+declare const PageTabsControl: React.ForwardRefExoticComponent<PageTabsControlProps & React.RefAttributes<HTMLDivElement>>;
+
+type SelectionControlVariant = 'checkbox' | 'radio' | 'switch';
+interface SelectionControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * Which control to render. `checkbox` — multi-select / independent on-off
+     * options (supports `indeterminate`). `radio` — single-select within a group.
+     * `switch` — immediate on/off setting (label sits *before* the toggle).
+     */
+    variant: SelectionControlVariant;
+    /** The visible label text shown beside the control. */
+    label: React.ReactNode;
+    /** Controlled checked state. */
+    checked?: boolean;
+    /** Uncontrolled initial checked state. */
+    defaultChecked?: boolean;
+    /** Checkbox only — partial / mixed-children state. Ignored for radio/switch. */
+    indeterminate?: boolean;
+    /** Dims the whole row and blocks interaction. */
+    disabled?: boolean;
+    /** Fired with the next checked value when the control toggles. */
+    onChange?: (checked: boolean) => void;
+    /**
+     * Optional help/info icon shown after the label (Figma "Show Label Trailing
+     * Icon"). Rendered outlined at 18px; the Figma default content is `Info`.
+     */
+    trailingIcon?: IconName;
+    /**
+     * Applied to the underlying control so the visible `<label>`'s `htmlFor`
+     * targets it. Auto-generated when omitted.
+     */
+    id?: string;
+    /** Forwarded to the underlying control. */
+    name?: string;
+    /** Forwarded to the underlying input for checkbox/radio (ignored for switch). */
+    value?: string;
+    /**
+     * Stretch to the full width of the container with the label filling and the
+     * control pushed flush to the trailing edge (Figma `szH: FILL` — e.g. a Switch
+     * settings row, or the Popover's Configuration Control). Default false (the
+     * row hugs its content).
+     */
+    fullWidth?: boolean;
+}
+/**
+ * Selection Control — a labelled selection-input wrapper that renders a
+ * Checkbox, Radio Button, or Switch with consistent label, spacing, and states.
+ * Composes the existing {@link Checkbox} / {@link RadioButton} / {@link Toggle}
+ * atoms.
+ *
+ * **When to use:** anywhere a labelled boolean/option control is needed in
+ * forms, lists, and settings.
+ *
+ * **When NOT to use:** as a bare glyph — use the underlying atoms directly only
+ * when you supply your own label.
+ *
+ * 3 variants × state (`37:362`): Checkbox (Idle / Active / Indeterminate /
+ * Disabled), Radio Button + Switch (Idle / Active / Disabled — no
+ * Indeterminate). Checkbox/Radio put the control first; **Switch puts the label
+ * first, toggle trailing**. The label is wired to the control via `htmlFor` +
+ * `aria-labelledby`, so clicking the text toggles it; Disabled dims the row.
+ */
+declare const SelectionControl: React.ForwardRefExoticComponent<SelectionControlProps & React.RefAttributes<HTMLDivElement>>;
+
+interface ShortcutProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** Keys in the combination, in order (e.g. `['Ctrl', 'K']`). Each renders as its own keycap. */
+    keys: string[];
+    /** Muted styling for when the parent option's key binding is unavailable. */
+    disabled?: boolean;
+}
+/**
+ * Shortcut — a compact, contextual inline element placed at the trailing edge
+ * of dropdown menu items, command-palette rows, or list items. It surfaces the
+ * keyboard combination that triggers that action, reinforcing power-user
+ * workflows and discoverability.
+ *
+ * **When to use:** beside an actionable menu/command/list item that has a
+ * keyboard binding.
+ *
+ * **When NOT to use:** for non-actionable text, or where no shortcut exists.
+ *
+ * 2 states (`7259:81045`): **Idle** — operational, full emphasis; **Disabled** —
+ * muted, communicates the shortcut can't be triggered right now. Each key renders
+ * as a semantic `<kbd>` keycap.
+ */
+declare const Shortcut: React.ForwardRefExoticComponent<ShortcutProps & React.RefAttributes<HTMLSpanElement>>;
+
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Block width — a number is treated as px, any other value is passed through as CSS (e.g. `'100%'`). Default `'100%'`. */
+    width?: number | string;
+    /** Block height — a number is treated as px, any other value is passed through as CSS. Default `16`. */
+    height?: number | string;
+    /** Corner radius — a number is treated as px, any other value is passed through as CSS. Default `--rounding-lg`. */
+    borderRadius?: number | string;
+}
+/**
+ * Skeleton — a shimmering placeholder rectangle for loading states, used
+ * anywhere real content isn't ready yet (starting with table rows). Purely
+ * presentational: compose several into whatever shape the loading content will
+ * take (a table-row arrangement, a card, a list) — see `TableContainer`'s
+ * `Loading` story for a worked example.
+ *
+ * The shimmer is a `background-position` sweep across a static gradient
+ * (`--surface-neutral-bg-muted` base, `--surface-disabled-input-field`
+ * highlight), 1.5s ease-in-out, looping — `prefers-reduced-motion: reduce`
+ * drops to a static muted block.
+ *
+ * `aria-hidden` by default (it's decorative filler, not content); the loading
+ * region it sits within should carry the real `role="status"`/`aria-live`.
+ *
+ * **When to use:** a region that will shortly hold real content of a known
+ * shape (a table row, a card). **When not to use:** an indeterminate,
+ * whole-page "please wait" — use `LoadingOverlay` for that (Loading pattern:
+ * first load with nothing to show yet → `LoadingOverlay`; a subsequent update
+ * to already-visible content — filter, sort, tab switch, refresh → `Skeleton`
+ * rows only, no scrim, the rest of the page stays usable).
+ */
+declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
+
+type DesktopProgressIndicatorVariant = 'upload' | 'task' | 'system-process';
+interface DesktopProgressIndicatorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * The kind of process — drives both layout and bar colour:
+     * - `upload` — **horizontal**: track + a trailing `%` (replaced by a check
+     *   icon at 100%). Green bar. No helper text.
+     * - `task` — **vertical**: track with a helper line beneath. Green bar.
+     * - `system-process` — **vertical**: track with a helper line beneath. Blue bar.
+     */
+    variant?: DesktopProgressIndicatorVariant;
+    /** Completion percentage, 0–100. */
+    value: number;
+    /** Helper line beneath the bar — `task` / `system-process` only (e.g. "3 of 10 steps completed"). */
+    helperText?: string;
+}
+/**
+ * Desktop Progress Indicator — a linear progress bar that communicates the
+ * completion of an ongoing or measured process. (Distinct from the 14×14
+ * Progress Tracker donut used in mobile badges.)
+ *
+ * **When to use:** for determinate progress with a known percentage.
+ *
+ * **When NOT to use:** for indeterminate spinners or tiny inline indicators.
+ *
+ * Three Types (`7353:37255`), each with its **own layout** — do not conflate:
+ * - **Upload** — horizontal; green bar + a trailing `%` that becomes a green
+ *   `Check-Circle` at 100%. No helper text.
+ * - **Task** — vertical; green bar with a helper line beneath (e.g. "3 of 10
+ *   steps completed").
+ * - **System Process** — vertical; **blue** bar with a helper line beneath
+ *   (e.g. "API usage: 60% of limit", "Storage used"). System-driven / background work.
+ *
+ * 8px pill track; `role="progressbar"` with aria value attributes.
+ */
+declare const DesktopProgressIndicator: React.ForwardRefExoticComponent<DesktopProgressIndicatorProps & React.RefAttributes<HTMLDivElement>>;
+
+type StepperVariant = 'discrete' | 'segmented';
+interface StepperProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /**
+     * `discrete` — a bordered field with the value; the up/down spinner
+     * (`Icon/Stepper`) reveals on hover. `segmented` — a `[−] [count] [+]` control
+     * whose −/+ are Icon-Only Buttons.
+     */
+    variant?: StepperVariant;
+    /** Controlled value. */
+    value?: number;
+    /** Uncontrolled initial value. */
+    defaultValue?: number;
+    /** Fired with the next clamped value. */
+    onChange?: (value: number) => void;
+    /** Lower bound (inclusive). Defaults to `0` — steppers model non-negative
+     * quantities/counts/durations, so the value cannot be decremented below 0
+     * unless a lower `min` is supplied. */
+    min?: number;
+    /** Upper bound (inclusive). */
+    max?: number;
+    /** Increment/decrement amount. Default 1. */
+    step?: number;
+    disabled?: boolean;
+    'aria-label'?: string;
+}
+/**
+ * Stepper — a numeric input with increment/decrement affordances for adjusting
+ * a value in discrete steps.
+ *
+ * **When to use:** bounded numeric entry where ± nudging is faster than typing
+ * (quantities, counts, durations).
+ *
+ * **When NOT to use:** unbounded numbers, ranges (use a slider), or step-through
+ * wizards.
+ *
+ * Two types (`4524:205932`): **Discrete** — a bordered field with the value; the
+ * up/down spinner (`Icon/Stepper`) appears on hover and the field lifts with a
+ * drop shadow. **Segmented** — a `[−] [count] [+]` control whose buttons reuse the
+ * Desktop {@link Button} atom (− disables at `min`, + at `max`). Controlled via
+ * `value`/`onChange` or uncontrolled via `defaultValue`; ArrowUp/ArrowDown nudge.
+ */
+declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
+
+type LeadingInputFieldElementVariant = 'single' | 'multiple';
+interface LeadingInputFieldElementProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onClick'> {
+    /**
+     * `single` — display-only, locked to one country (flag + dial code, no
+     * chevron). `multiple` — interactive selector (flag + chevron) that opens a
+     * country picker.
+     */
+    variant: LeadingInputFieldElementVariant;
+    /** ISO country code for the flag (e.g. `'KE'`, `'US'`). */
+    countryCode: string;
+    /** Dial code shown in the `single` variant (e.g. `'+254'`). */
+    dialCode?: string;
+    disabled?: boolean;
+    /** `multiple` only — fired when the selector is activated (opens the picker). */
+    onClick?: () => void;
+    'aria-label'?: string;
+}
+/**
+ * Leading Input Field Element — an interactive adornment that sits at the
+ * **leading** edge inside an input field. The current type is a Country Selector
+ * for phone/locale inputs.
+ *
+ * **When to use:** inside text/phone inputs that need a leading selector or
+ * context.
+ *
+ * **When NOT to use:** as a standalone control outside an input.
+ *
+ * Country Selector (`7111:43945`): **Single Country** — display-only flag + dial
+ * code, non-selectable; **Multiple Countries** — flag + chevron, opens a country
+ * picker (Idle / Hover / Pressed / Focus / Disabled). Styled with the
+ * secondary-button token family; reuses the {@link Flag} atom.
+ */
+declare const LeadingInputFieldElement: React.ForwardRefExoticComponent<LeadingInputFieldElementProps & React.RefAttributes<HTMLElement>>;
+
+type TrailingInputFieldElementVariant = 'basic' | 'dropdown';
+interface TrailingInputFieldElementProps {
+    /**
+     * `basic` — a simple presentational trailing affordance (unit text, status
+     * icon, clear "×"). `dropdown` — a Secondary Button with a trailing chevron
+     * that opens a selector overlay.
+     */
+    variant: TrailingInputFieldElementVariant;
+    /** Text label — `basic`: the unit/status text; `dropdown`: the button label. */
+    label?: string;
+    /** `basic` only — custom content (icon, "×", unit text) that overrides `label`. */
+    children?: React.ReactNode;
+    disabled?: boolean;
+    /** `dropdown` — fired when activated (opens the overlay). */
+    onClick?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+    'aria-label'?: string;
+}
+/**
+ * Trailing Input Field Element — an adornment that sits at the **trailing** edge
+ * inside an input field.
+ *
+ * **When to use:** inside inputs needing a trailing action or selector.
+ *
+ * **When NOT to use:** standalone, outside an input.
+ *
+ * `4478:344281`: **Basic** — a presentational content slot (unit text / status
+ * icon / clear "×"); **Dropdown** — a Secondary Button with a trailing
+ * `Chevron-Down` that opens a selector. Dropdown reuses the Desktop {@link Button} atom.
+ */
+declare const TrailingInputFieldElement: React.ForwardRefExoticComponent<TrailingInputFieldElementProps & React.RefAttributes<HTMLElement>>;
+
+type PaginationVariant = 'table' | 'combobox' | 'stacked-list';
+interface PaginationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * `table` — full data tables: count + page-number controls + rows-per-page
+     * selector (taller). `stacked-list` — same controls, condensed height.
+     * `combobox` — compact: count + prev/next only (no page numbers).
+     */
+    variant?: PaginationVariant;
+    /** Current page (1-based). */
+    page: number;
+    /** Total number of pages. */
+    pageCount: number;
+    /**
+     * Show the page-number navigation cluster (prev/next + numbered cells) on the
+     * `table` / `stacked-list` variants. Mirrors the Figma `Show Pages` property.
+     * Default true; set `false` for just the count + rows-per-page selector.
+     */
+    showPages?: boolean;
+    /** Fired with the next page when a control is activated. */
+    onPageChange: (page: number) => void;
+    /** Count summary text (e.g. "Showing 10 of 180" or "1 - 10 of 10"). Caller-provided. */
+    countLabel?: string;
+    /** `table` / `stacked-list` — current rows-per-page value shown in the selector. */
+    rowsPerPage?: number;
+    /** `table` / `stacked-list` — fired when the rows-per-page selector is activated. */
+    onRowsPerPageClick?: () => void;
+}
+/**
+ * Pagination — navigation for moving through paged data sets, in the layout that
+ * fits its host surface.
+ *
+ * **When to use:** below tables, lists, or comboboxes with more results than fit
+ * one view.
+ *
+ * **When NOT to use:** step-through wizards (use Page Tabs Control / Stepper) or
+ * carousels (use Carousel Pagination).
+ *
+ * `7292:86007`: **Table** — count + page-number controls + rows-per-page selector;
+ * **Stacked List** — same controls, condensed; **Combobox** — compact count +
+ * prev/next only. Prev/next reuse Ghost icon Buttons; the page cell is a 32×32
+ * numbered button (Active = `--surface-secondary-pagination-active`).
+ */
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLDivElement>>;
+
+type BreadcrumbsType = 'nested' | 'global-client' | 'global-admin';
+/** A single ancestor (link) crumb in the trail. */
+interface BreadcrumbCrumb {
+    /** Visible label. */
+    label: string;
+    /** Fired when the crumb is activated (navigate up the tree). */
+    onClick?: () => void;
+}
+interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement> {
+    /** Which trail style to render. Default `nested`. */
+    type?: BreadcrumbsType;
+    /** Ancestor link crumbs, root → leaf, excluding the current page. */
+    items?: BreadcrumbCrumb[];
+    /** The current page label — rendered non-interactive with `aria-current`. Ignored when `children` is provided. */
+    current?: string;
+    /**
+     * Trail-content slot (Figma `Nested Content` / `Global Client Content` /
+     * `Global Admin Content` SLOT — one per `type`). When provided, the injected
+     * nodes replace the auto-built trail, laid out in the component's owned
+     * horizontal `--spacing-8px` row. Omit to render the data-driven default
+     * (`items` + `current`, root chip for the global variants).
+     */
+    children?: React.ReactNode;
+    /** Company / client name shown at the root of the global variants. */
+    client?: string;
+    /**
+     * Root-chip activation. For `global-admin` this opens the client-switcher
+     * dropdown (the overlay itself is a separate component); for `global-client`
+     * it optionally navigates to the client home. When omitted, the
+     * `global-client` root renders as a non-interactive label (matching Figma).
+     */
+    onClientClick?: () => void;
+}
+/**
+ * Breadcrumbs — a horizontal trail showing the user's location in a hierarchy,
+ * with each ancestor a link back up the tree, ending in the current page.
+ *
+ * **When to use:** pages nested ≥2 levels deep, so users can orient and
+ * navigate up.
+ *
+ * **When NOT to use:** flat hierarchies, or as primary navigation.
+ *
+ * Three variants (Figma `9108:33624`):
+ * - **nested** — in-section hierarchy; Small link crumbs.
+ * - **global-client** — client-app wayfinding rooted at a company chip
+ *   (`Icon/Company` + name); Medium link crumbs.
+ * - **global-admin** — admin wayfinding whose root is a Plain split button
+ *   (`Icon/Company` + name + `Icon/Stepper`) that opens a client-switcher
+ *   dropdown via `onClientClick`; Medium link crumbs.
+ *
+ * Data-driven: pass `items` (ancestor links) + `current`. Crumbs are separated
+ * by a `/` slash; the current page is muted + semibold and non-interactive
+ * (`aria-current="page"`). Renders semantic `<nav aria-label><ol><li>`.
+ */
+declare const Breadcrumbs: React.ForwardRefExoticComponent<BreadcrumbsProps & React.RefAttributes<HTMLElement>>;
+
+type FooterFrameVariant = 'default' | 'tertiary-action' | 'data-summary' | 'preference' | 'validation' | 'card';
+interface FooterFrameProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Which footer treatment. Drives height / padding / background. Default `default`. */
+    variant?: FooterFrameVariant;
+    /**
+     * Leading-content slot (left edge) — e.g. a tertiary Button, a Selection
+     * Control, a Notification Banner, or a data-summary row. Omit (or `default`
+     * variant) to right-align the actions with nothing on the left.
+     */
+    leading?: React.ReactNode;
+    /** Trailing actions — pass the footer's Button(s); laid out in a right-aligned row, gap 8. */
+    children?: React.ReactNode;
+    /**
+     * Apply the subtle upward scroll-affordance drop shadow (Figma) — set this
+     * whenever the footer pins below a **scrollable** region so it reads as separated
+     * from the content scrolling under it.
+     *
+     * **Static (`true`)** — always shows the shadow; right for containers that are
+     * always scrollable (e.g. Desktop Dropdowns Basic Filter / Filter Group).
+     *
+     * **Dynamic** — for containers that may or may not overflow, use the companion
+     * `useScrollShadow(containerRef)` hook instead of hardcoding `true`. The hook
+     * returns `true` only while there is content below the fold, and `false` once
+     * scrolled to the bottom:
+     * ```tsx
+     * const bodyRef = useRef<HTMLDivElement>(null);
+     * const scrollShadow = useScrollShadow(bodyRef);
+     *
+     * <div ref={bodyRef} style={{ overflowY: 'auto', maxHeight: 300 }}>{items}</div>
+     * <FooterFrame scrollShadow={scrollShadow}>…</FooterFrame>
+     * ```
+     *
+     * **`ModalShell` is handled automatically** — passing `bodyHeight` or `fillHeight`
+     * activates the same logic internally; you do not pass `scrollShadow` to the
+     * `FooterFrame` inside a `ModalShell`.
+     *
+     * **Applies to every variant EXCEPT `card`** — Card footers are flush/transparent
+     * and never show this shadow (passing `scrollShadow` on a `card` is a no-op).
+     */
+    scrollShadow?: boolean;
+}
+/**
+ * Footer Frame — the bottom action region of modals, cards, and panels. A
+ * horizontal shell with optional leading content on the left and a right-aligned
+ * row of action buttons on the right.
+ *
+ * **When to use:** any surface (modal / card / panel) that needs committed
+ * actions or a contextual summary pinned at its base.
+ *
+ * **When NOT to use:** for inline actions within body content.
+ *
+ * Slot-based, mirroring Figma `6448:32008` (`Leading Content` SLOT + trailing
+ * actions). `variant` only sets dimensions/background; the caller slots the
+ * leading content and the action buttons:
+ * - **default** — actions only (right-aligned), 72px.
+ * - **tertiary-action** — a low-priority/destructive Button set apart on the left.
+ * - **data-summary** — a row of stat blocks on the left (Title/Subtext × N split by
+ *   vertical demarcators); 72px. Also used as the Desktop Dropdowns Basic Filter footer.
+ * - **preference** — a persistent preference control (e.g. a Selection Control).
+ * - **validation** — a validation/error Notification Banner.
+ * - **card** — compact (40px, no padding, transparent) for Card surfaces.
+ */
+declare const FooterFrame: React.ForwardRefExoticComponent<FooterFrameProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Tracks whether a scrollable container has content still below the visible
+ * viewport — the signal for a footer **edge shadow** (see the Scroll Edge notes in
+ * `@leta-io/design-tokens/scroll-utilities.css`).
+ *
+ * A convenience wrapper over {@link useScrollEdges}, which is the general
+ * primitive: it reports all four edges and both overflow axes. Reach for that one
+ * directly when you need a header shadow, a horizontal edge, or both axes; this
+ * one is just the common "footer below a vertical list" case.
+ *
+ * Returns `true` while content remains below the fold, `false` once the user
+ * reaches the bottom or when the container does not overflow at all.
+ *
+ * Re-evaluates on scroll, on container resize, **and on content change** — that
+ * last one matters: a body that starts out exactly fitting and then grows past the
+ * fold (accordion expands, tab swaps, async content lands) has no scroll and no
+ * resize to react to. See {@link useScrollEdges} for why that case needs its own
+ * observer.
+ *
+ * **Usage with `FooterFrame`:**
+ * ```tsx
+ * const bodyRef = useRef<HTMLDivElement>(null);
+ * const scrollShadow = useScrollShadow(bodyRef);
+ *
+ * <div ref={bodyRef} style={{ overflowY: 'auto', maxHeight: 300 }}>
+ *   {items}
+ * </div>
+ * <FooterFrame scrollShadow={scrollShadow}>
+ *   <Button variant="primary">Apply</Button>
+ * </FooterFrame>
+ * ```
+ *
+ * **Note:** `FooterFrame` also accepts `scrollShadow` as a plain `boolean` — pass
+ * `true` directly when the container is always scrollable (e.g. Desktop Dropdowns)
+ * and you don't need the dynamic on/off behaviour.
+ *
+ * **Not needed inside `ModalShell`:** the shell manages the header + footer edge
+ * shadows internally from a single `useScrollEdges` call; just set `bodyHeight` or
+ * `fillHeight` and the shell handles it automatically.
+ */
+declare function useScrollShadow(containerRef: React.RefObject<HTMLElement | null>): boolean;
+
+type ModalHeadersVariant = 'default' | 'with-tabs';
+interface ModalHeadersProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'children'> {
+    /** Which header treatment. `with-tabs` adds a tab row beneath the title. */
+    variant?: ModalHeadersVariant;
+    /** Modal title text. */
+    title?: string;
+    /** Close-button handler. The close button is always rendered. */
+    onClose?: () => void;
+    /** When true, renders a Breadcrumbs component above the title. */
+    showBreadcrumb?: boolean;
+    /** Content to render in the breadcrumb slot (typically a `<Breadcrumbs>` element). */
+    breadcrumb?: React.ReactNode;
+    /** When true, renders a back-navigation arrow (`Arrow-Left`) before the title. */
+    showNavArrow?: boolean;
+    /** Fired when the nav arrow is clicked. */
+    onNavBack?: () => void;
+    /** When true, renders a leading icon before the title text. */
+    showLeadingIcon?: boolean;
+    /** The icon to show before the title (when `showLeadingIcon` is true). */
+    leadingIcon?: IconName;
+    /** Color of the leading icon. Defaults to `--icons-neutral-default`. */
+    leadingIconColor?: string;
+    /**
+     * Controls the **Secondary Content** slot (Figma `9200:38903`). Defaults to
+     * `true` to mirror Figma, where the slot frame is visible. The slot reserves
+     * its row even when empty so prototypes can populate it later.
+     */
+    showSecondaryContent?: boolean;
+    /**
+     * Leading group of the Secondary Content slot — the left side of its
+     * SPACE_BETWEEN row (Figma "Status Badges"). Typically status `<Badge>`s.
+     */
+    secondaryLeading?: React.ReactNode;
+    /**
+     * Trailing group of the Secondary Content slot — the right side of its
+     * SPACE_BETWEEN row (Figma "Header CTAs"). Typically secondary `<Button>`s.
+     */
+    secondaryTrailing?: React.ReactNode;
+    /** Tab row (typically a `<PageTabsControl>` element). Only shown in `with-tabs` variant. */
+    tabs?: React.ReactNode;
+}
+declare const ModalHeaders: React.ForwardRefExoticComponent<ModalHeadersProps & React.RefAttributes<HTMLDivElement>>;
+
+interface ModalShellProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Fixed modal width in px (e.g. 480 / 512 / 768 / 1024). */
+    width: number;
+    /** Round the root corners (`--rounding-xl` = 12). Drawer modals pass false (square). Default true. */
+    rounded?: boolean;
+    /** The header region — typically a `<ModalHeaders>`. */
+    header: React.ReactNode;
+    /**
+     * The footer region — typically a `<FooterFrame>`.
+     *
+     * Optional: a shell can legitimately end at its body (the notifications panel,
+     * whose Figma frames ship the Footer Frame hidden). Omitted, the region is not
+     * rendered at all rather than rendered empty — an empty fixed row would still
+     * hold its own stacking context and cast the body's bottom scroll edge onto
+     * nothing.
+     */
+    footer?: React.ReactNode;
+    /** The body region content. */
+    children?: React.ReactNode;
+    /** Style overrides for the body wrapper (padding / gap / layout / sizing). */
+    bodyStyle?: React.CSSProperties;
+    /**
+     * Fixed body height in px. When set, the body region is locked to this height
+     * and scrolls vertically when its content overflows.
+     */
+    bodyHeight?: number;
+    /**
+     * Stretch the shell to the full viewport height (`100dvh`) — a drawer / side
+     * sheet. The header and footer stay fixed (sticky) and only the body scrolls.
+     * Overrides `bodyHeight`.
+     */
+    fillHeight?: boolean;
+    /**
+     * Called when Escape is pressed while this modal is the topmost overlay
+     * (Doc 3 §10) — typically the same handler as the header's close button
+     * (`onClose ?? onCancel`). While mounted, this shell also traps Tab focus
+     * within itself and returns focus to the trigger on unmount.
+     */
+    onEscape?: () => void;
+}
+/**
+ * Internal shell shared by the modal templates. Mirrors the Figma modal root
+ * frame: a vertical column (header + body + footer), `--surface-neutral-bg-default`
+ * fill, and a 1px `--border-neutral-default` stroke painted OUTSIDE via a
+ * `box-shadow` ring (so the border never shrinks the content area), clipped to
+ * the corner radius.
+ *
+ * With `fillHeight`, the shell becomes a full-viewport-height drawer: the header
+ * and footer are pinned (sticky) and the body is the only scroll region.
+ *
+ * **Scroll affordance:** the Footer Frame no longer has a top outline, so when the
+ * body overflows, the header gets a downward drop shadow once scrolled from the
+ * top, and the footer gets an upward drop shadow while more content sits below —
+ * both subtle (`--shadow-neutral-1`), both hidden at the respective scroll ends.
+ *
+ * Not part of the public surface — the four template components compose it.
+ */
+declare const ModalShell: React.ForwardRefExoticComponent<ModalShellProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Registers this overlay on the shared {@link pushOverlay} stack while
+ * `active`, so Escape closes only the topmost overlay (Doc 3 §10) no matter
+ * how dropdowns and modals/drawers are nested. `onEscape` is read fresh on
+ * every call — no need to memoize it.
+ */
+declare function useEscapeLayer(active: boolean, onEscape: () => void): void;
+
+type ContentPrimitivesType = 'page-heading' | 'section-heading' | 'group-header' | 'utility' | 'progress-indicator' | 'vertical-list-row' | 'horizontal-list-row' | 'metrics';
+interface ContentPrimitivesProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
+    type?: ContentPrimitivesType;
+    /** Title content. Accepts a node for mixed inline styling (e.g. a grey count: "Items (15)"). */
+    text?: React.ReactNode;
+    subtext?: React.ReactNode;
+    /** Show the subtitle/description line under the title. Default true. */
+    showSubtext?: boolean;
+    /**
+     * List-row label. Accepts a node so a row can carry an inline marker beside
+     * its label — e.g. the manual Dispatch Order popover's "On-time rate ⓘ", where
+     * the help affordance sits on the label line rather than the value line
+     * (`showDescriptionLeadingIcon` covers the value line).
+     */
+    titleName?: React.ReactNode;
+    listRowText?: string;
+    metric?: string;
+    eyebrowText?: string;
+    showVisualAnchor?: boolean;
+    showLeadingIcon?: boolean;
+    leadingIcon?: IconName;
+    leadingIconOutlined?: boolean;
+    showAvatar?: boolean;
+    avatarName?: string;
+    avatarSrc?: string;
+    showFeaturedIcon?: boolean;
+    featuredIconName?: IconName;
+    /** Render the featured icon glyph outlined rather than filled. @default false */
+    featuredIconOutlined?: boolean;
+    /**
+     * Featured-icon colour. `neutral` by default — the grey anchor most rows use.
+     *
+     * Set it where the anchor is carrying meaning rather than just anchoring the
+     * row: Admin's account-type card binds Featured Icon / **Teal** (`notice`), so
+     * the icon reads as a statement about the account and not as another list
+     * bullet. The colour was hardcoded `neutral` here until 2026-09-04, which made
+     * that instance unreproducible.
+     */
+    featuredIconColor?: FeaturedIconColor;
+    showMonogramIcon?: boolean;
+    monogramLabel?: string;
+    showTrailingContent?: boolean;
+    showPassiveElements?: boolean;
+    passiveElements?: React.ReactNode;
+    showInteractiveElements?: boolean;
+    interactiveElements?: React.ReactNode;
+    /**
+     * Vertical alignment of the heading row's content (leading + trailing).
+     * `center` (default) matches the standalone Utility/Group-Header primitives;
+     * `top` mirrors instances whose Content frame is `crossAxis: MIN` (e.g. the
+     * Option Card, where the trailing control aligns with the title). Only the
+     * heading-family layouts honor this.
+     */
+    contentAlign?: 'center' | 'top';
+    showDescriptionLeadingIcon?: boolean;
+    descriptionLeadingIcon?: IconName;
+    onCopy?: () => void;
+    showMetricVariance?: boolean;
+    metricVarianceLabel?: string;
+    /** Variance badge color (Figma "Variance": Neutral→neutral, Positive→success, Negative→error). */
+    metricVarianceColor?: BadgeColor;
+    /** Leading icon on the variance badge (e.g. Up-Arrow for positive, Down-Arrow for negative). */
+    metricVarianceIcon?: IconName;
+    showMetricSubtext?: boolean;
+    showEyebrowTrailingIcon?: boolean;
+    eyebrowTrailingIcon?: IconName;
+    progressValue?: number;
+    progressHelperText?: string;
+    showProgressHelperText?: boolean;
+    /**
+     * Which {@link DesktopProgressIndicator} variant the Progress Indicator layout
+     * renders. Defaults to `task` (green) — the historical behaviour. Pass
+     * `system-process` for the blue system bar, as the Broadcast Logs Broadcast Status
+     * Card does (its Figma instance binds `Type: System Process`).
+     */
+    progressVariant?: 'upload' | 'task' | 'system-process';
+}
+declare const ContentPrimitives: React.ForwardRefExoticComponent<ContentPrimitivesProps & React.RefAttributes<HTMLDivElement>>;
+
+type NotificationBannerType = 'info' | 'neutral' | 'highlight' | 'warning' | 'error';
+type NotificationBannerVariant = 'filled' | 'subtle';
+interface NotificationBannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'children'> {
+    type?: NotificationBannerType;
+    variant?: NotificationBannerVariant;
+    title?: string;
+    description: string;
+    /** Override the leading icon (defaults to the icon derived from `type`). */
+    icon?: IconName;
+    onDismiss?: () => void;
+    children?: React.ReactNode;
+    showContentButtons?: boolean;
+    /**
+     * Optional trailing call-to-action, pinned to the **bottom-right** of the
+     * trailing section (Figma `CTA` frame — a Primary/Small button, e.g. Dispatch).
+     * The dismiss × sits top-right; when both are present they are pushed to
+     * opposite ends of the full-height trailing column. Hidden by default
+     * (mirrors the Figma `CTA` frame's `visible: false`).
+     */
+    cta?: React.ReactNode;
+}
+declare const NotificationBanner: React.ForwardRefExoticComponent<NotificationBannerProps & React.RefAttributes<HTMLDivElement>>;
+
+type MetricVariance = 'none' | 'neutral' | 'positive' | 'negative';
+interface DesktopMetricCardProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** The large metric value, e.g. "10". */
+    metric?: string;
+    /** Eyebrow / period label above the metric, e.g. "This week". */
+    eyebrowText?: string;
+    /** Visual-anchor icon (top-left, 24px). Figma default is Check-Circle (outlined). */
+    leadingIcon?: IconName;
+    /** Whether the visual-anchor icon uses its outlined variant. Default true. */
+    leadingIconOutlined?: boolean;
+    /** Show the outlined Question help icon after the eyebrow text. Default true. */
+    showEyebrowTrailingIcon?: boolean;
+    /** Variance treatment for the trailing badge. Default "none" (no badge). */
+    variance?: MetricVariance;
+    /** Variance badge label, e.g. "20%". Shown when variance ≠ "none". */
+    varianceLabel?: string;
+    /** Optional subtext below the metric. Hidden by default (mirrors Figma). */
+    subtext?: string;
+    /** Show the metric subtext row. Default false. */
+    showMetricSubtext?: boolean;
+    /**
+     * Trailing content (top-right). Defaults to a Proceed (↗) arrow.
+     * Pass `null` to render nothing.
+     */
+    trailingContent?: React.ReactNode;
+    /**
+     * Force a visual state (Figma `State` axis). When set, overrides the
+     * interactive hover/pressed tracking — useful for catalogs/snapshots.
+     */
+    state?: MetricCardState;
+}
+type MetricCardState = 'default' | 'hover' | 'pressed' | 'focus';
+declare const DesktopMetricCard: React.ForwardRefExoticComponent<DesktopMetricCardProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface OptionCardProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, 'onChange'> {
+    /** Card title (Label/M/SemiBold). */
+    title: string;
+    /** Supporting description (Body/M/Regular). */
+    description?: string;
+    /**
+     * Trailing element rendered on the right of the card. The Option Card is
+     * built on the **Utility Content Primitive**, so its trailing slot is fully
+     * composable — pass any `ReactNode` (a `<Badge>`, a metadata `<span>`, a CTA
+     * `<Button>`, an icon, etc.).
+     *
+     * When omitted, defaults to a `<RadioButton>` driven by
+     * `selected` / `onChange` / `name` / `value` (the mutually-exclusive-choice
+     * case). Provide `trailing` to opt out of the radio entirely.
+     */
+    trailing?: React.ReactNode;
+    /**
+     * Whether to render the trailing content area at all. Defaults to `true`.
+     * Set `false` for a card with **no trailing element** (e.g. the Multi-choice
+     * modal's cards, where selection is shown by the Active border alone).
+     */
+    showTrailing?: boolean;
+    /** Whether this option is selected (Active state). Drives the default radio. */
+    selected?: boolean;
+    /** Fires when the option is chosen (default radio only). */
+    onChange?: (selected: boolean) => void;
+    /** Disables interaction. */
+    disabled?: boolean;
+    /** Radio group name (default radio only — for mutually-exclusive selection). */
+    name?: string;
+    /** Radio value (default radio only). */
+    value?: string;
+    /**
+     * Force a visual state (Figma `State` axis). When set, overrides the
+     * interactive hover/pressed/selected derivation — useful for catalogs/snapshots.
+     * `"focus"` renders the focus ring statically.
+     */
+    state?: OptionCardState;
+}
+type OptionCardState = 'idle' | 'hover' | 'pressed' | 'active' | 'focus';
+/**
+ * Option Card (`9894:18459`) — a full-width selectable card built on the
+ * **Utility Content Primitive**: a title + description on the left and a
+ * composable **trailing element** on the right.
+ *
+ * **What it is:** a card-shaped choice surface. The single `State` axis drives
+ * its appearance — Idle / Hover / Pressed / Active / Focus.
+ *
+ * **Trailing element is not fixed to a radio.** Because the card is composed
+ * from the Utility Content Primitive, its trailing slot is fully composable.
+ * It defaults to a `<RadioButton>` (the mutually-exclusive-choice case, driven
+ * by `selected` / `onChange` / `name` / `value`), but pass `trailing` to render
+ * **anything** — a metadata `<span>`, a `<Badge>`, a CTA `<Button>`, an icon,
+ * a `<Checkbox>`, etc. — or `showTrailing={false}` for **no trailing element**
+ * at all (selection shown by the Active border alone, e.g. the Multi-choice modal).
+ *
+ * **States:**
+ * - **Idle** — neutral fill + 1px neutral border.
+ * - **Hover** — same fill/border, distinguished only by a Neutral Drop Shadow 1.
+ * - **Pressed** — slightly darker fill/border.
+ * - **Active** — navy border (1.5px) + (default radio) filled.
+ * - **Focus** — standard 1.5px focus ring at 4px offset (drawn around the card
+ *   when the nested focusable trailing element is keyboard-focused).
+ *
+ * **When to use:** presenting a small set of selectable options, each with a
+ * label + supporting copy.
+ * **When NOT to use:** dense lists (use a list/menu row) or non-selectable
+ * informational cards (use Content Card).
+ */
+declare const OptionCard: React.ForwardRefExoticComponent<OptionCardProps & React.RefAttributes<HTMLLabelElement>>;
+
+interface ConfigurationCardRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Row title (Label/M/SemiBold). */
+    title: string;
+    /** Row description (Body/M/Regular). */
+    description?: string;
+    /** Trailing action — e.g. a `<Button>` ("Dispatch"). */
+    trailing?: React.ReactNode;
+}
+declare const ConfigurationCardRow: React.ForwardRefExoticComponent<ConfigurationCardRowProps & React.RefAttributes<HTMLDivElement>>;
+type ConfigurationCardVariant = 'toggle' | 'control';
+interface ConfigurationCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'onToggle'> {
+    /**
+     * Which card shape:
+     * - `toggle` (default) — the standard settings card: a Toggle in the header
+     *   switches the setting on/off and reveals the body.
+     * - `control` — the same card **minus the switch**, for a setting that isn't
+     *   on/off (durations, a derived read-only value, a link out to another
+     *   module). Its body is always visible, and the header's trailing slot takes
+     *   whatever {@link ConfigurationCardProps.control} supplies — or nothing.
+     */
+    variant?: ConfigurationCardVariant;
+    /**
+     * Header trailing content for the `control` variant — an inline input, a
+     * read-only value, or a link-out Button. Ignored by the `toggle` variant,
+     * whose trailing slot is the Toggle.
+     */
+    control?: React.ReactNode;
+    /** Section title (Label/M/SemiBold). */
+    title: string;
+    /** Section description (Body/M/Regular). */
+    description?: string;
+    /** Whether the section is enabled. Controls the header Toggle + body/footer visibility. */
+    enabled?: boolean;
+    /** Fires when the header Toggle is flipped. */
+    onToggle?: (enabled: boolean) => void;
+    /**
+     * Render the whole card as unavailable: the header Toggle goes to its disabled
+     * state and the card dims to 60% opacity.
+     *
+     * For a setting gated by a **master switch** elsewhere in the section — the
+     * dependency stays visible so the admin can see what they'd get, rather than
+     * the options appearing out of nowhere once the master is flipped on. Distinct
+     * from `enabled`, which is this card's own on/off; a disabled card keeps
+     * whatever `enabled` value it had, so turning the master back on restores it.
+     */
+    disabled?: boolean;
+    /**
+     * Body content — typically one or more `<ConfigurationCardRow>`. Revealed when
+     * enabled and hidden (but kept mounted, so entered values survive) when not.
+     */
+    children?: React.ReactNode;
+    /** Show the footer region when enabled. Default true. */
+    showFooter?: boolean;
+    /** Validation / helper message shown in the footer's subtle Notification Banner. */
+    footerMessage?: string;
+    /** Notification Banner type for the footer message. Default "info". */
+    footerMessageType?: NotificationBannerType;
+    /** Secondary action label. */
+    cancelLabel?: string;
+    /** Secondary action handler. */
+    onCancel?: () => void;
+    /** Primary action label. */
+    submitLabel?: string;
+    /** Primary action handler. */
+    onSubmit?: () => void;
+}
+declare const ConfigurationCard: React.ForwardRefExoticComponent<ConfigurationCardProps & React.RefAttributes<HTMLDivElement>>;
+
+interface ContentCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The card body — any content block, typically a `ContentPrimitives`. Maps to
+     * the Figma `Container` slot. Defaults to a Utility primitive (title + subtext +
+     * a trailing "Dispatch" Secondary button), mirroring Figma's default instance.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Content Card — a plain bordered surface that wraps a single content block. It's
+ * the generic "card chrome" you drop a Content Primitive into: a white card with a
+ * 1px neutral border, 12px corners, and 20px padding (no shadow).
+ *
+ * The Figma `Container` slot is the `children` prop, laid out in a vertical
+ * 16px-gap, full-width column. Pass any content (a `ContentPrimitives` of any type,
+ * or your own markup); the default is a Utility primitive with a "Dispatch" action.
+ *
+ * **When to use:** to present a content block (Utility / Metrics / List-Row /
+ * Progress primitive) on its own card surface.
+ * **When NOT:** for selectable choices (use Option Card), KPI tiles (use Metric
+ * Card), or toggleable sections (use Configuration Card).
+ *
+ * Figma `9896:25095` ("Content Primitive Containers" → Content Card).
+ */
+declare const ContentCard: React.ForwardRefExoticComponent<ContentCardProps & React.RefAttributes<HTMLDivElement>>;
+
+interface StackedCardsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The stacked cards — typically `<ContentCard>`s. Defaults to two Content Cards. */
+    children?: React.ReactNode;
+}
+/**
+ * Stacked Cards — vertically stacks multiple Content Cards with a 16px gap. It has
+ * no surface of its own (no fill/border); it just lays its children out in a column.
+ * Pass `<ContentCard>`s (or anything) as `children`; the default is two Content Cards.
+ *
+ * Figma `2794:28551` ("Content Primitive Containers" → Stacked Cards).
+ */
+declare const StackedCards: React.ForwardRefExoticComponent<StackedCardsProps & React.RefAttributes<HTMLDivElement>>;
+
+/** Convenience open/closed state hook. */
+declare function useAccordion(defaultOpen?: boolean): {
+    open: boolean;
+    toggle: () => void;
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+interface AccordionHeaderProps {
+    open: boolean;
+    onToggle: () => void;
+    /** The `ContentPrimitives type="section-heading"` (with an {@link AccordionChevron} in its interactiveElements slot). */
+    children: React.ReactNode;
+}
+/**
+ * The clickable + hoverable section-header row. The whole row toggles the section
+ * and drives the trailing chevron's hover state. The chevron itself remains the
+ * semantic focusable control (for keyboard/AT); this row is the large hit area.
+ */
+declare function AccordionHeader({ open, onToggle, children }: AccordionHeaderProps): React.ReactElement;
+/**
+ * The accordion's chevron toggle. Rotates 180° between closed (down) and open (up)
+ * with an ease-in-out transition. This is the semantic toggle control.
+ *
+ * Two visual treatments, mirroring the two Button variants the designs use:
+ * - `ghost` (default) — **Ghost / Prominent Icon-Only**, a 40×40 box that takes the
+ *   ghost-hover fill when the enclosing {@link AccordionHeader} is hovered/focused
+ *   (via CSS) or when hovered directly. Used by the section organisms (List / Table
+ *   / Input Section) and the Order Detail accordions.
+ * - `plain` — **Plain / Icon-Only / Small**, a bare glyph hugging the icon with no
+ *   hover fill. Used by the Activity-tab timeline entries (Figma `1487:173235`,
+ *   where the chevron instance is `Variant=Plain, Type=Icon Only, Size=Small`
+ *   at 16×16).
+ */
+declare function AccordionChevron({ open, onToggle, size, variant, label, }: {
+    open: boolean;
+    onToggle: () => void;
+    size?: number;
+    /** Visual treatment — see the doc comment. Defaults to `ghost`. */
+    variant?: 'ghost' | 'plain';
+    /**
+     * Accessible name. Defaults to "Expand/Collapse section" — override when the
+     * thing being revealed isn't a page section (e.g. "driver details"), so screen
+     * readers name what actually opens.
+     */
+    label?: {
+        expand: string;
+        collapse: string;
+    };
+}): React.ReactElement;
+/**
+ * Animated open/close reveal (Accordion Behaviour rule 4). Uses the
+ * `grid-template-rows: 0fr → 1fr` technique so arbitrary-height content animates
+ * smoothly (ease-in-out, interruptible CSS transition) without measuring height.
+ * Owns the header→body gap as inner `paddingTop` so it collapses with the content
+ * (no phantom gap above a closed section). `prefers-reduced-motion` → instant.
+ *
+ * @param gap    row gap between body children (default `--spacing-24px`)
+ * @param topGap header→body gap, applied as padding-top that animates away
+ *               (default `--spacing-12px`)
+ */
+declare function AccordionContent({ open, children, gap, topGap, }: {
+    open: boolean;
+    children: React.ReactNode;
+    gap?: string;
+    topGap?: string;
+}): React.ReactElement;
+
+type InputFieldVariant = 'basic' | 'leading' | 'trailing';
+interface InputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Field-row composition. Default `basic`. */
+    variant?: InputFieldVariant;
+    /** Label text. */
+    label?: string;
+    /** Show the label section. Default true. */
+    showLabel?: boolean;
+    /** Show an Info marker after the label. */
+    showLabelIcon?: boolean;
+    /** The label marker icon. Default `Info` (outlined). */
+    labelIcon?: IconName;
+    /** Optional/Required tag after the label. Default `none`. */
+    tag?: 'none' | 'optional' | 'required';
+    /** Icon inside the field, before the input. */
+    leadingFieldIcon?: IconName;
+    /** Currency/unit prefix shown before the input (e.g. "KES"). */
+    currency?: string;
+    /** Icon inside the field, after the input (e.g. a help marker). */
+    trailingFieldIcon?: IconName;
+    /** Helper text below the field. */
+    helperText?: string;
+    /** Show the helper/message line. Default true. */
+    showHelper?: boolean;
+    /** Error message — turns the border red + shows an error icon. */
+    error?: string;
+    /** Warning message — shows a warning icon (border unchanged). */
+    warning?: string;
+    /** Show a right-aligned character counter ("n/max"). */
+    showCounter?: boolean;
+    /** Right-aligned control on the label row (e.g. a `<SelectionControl variant="switch">`). */
+    labelToggle?: React.ReactNode;
+    /** `variant="leading"` → e.g. `<LeadingInputFieldElement>`. */
+    leadingElement?: React.ReactNode;
+    /** `variant="trailing"` → e.g. `<TrailingInputFieldElement>`. */
+    trailingElement?: React.ReactNode;
+}
+declare const InputField: React.ForwardRefExoticComponent<InputFieldProps & React.RefAttributes<HTMLInputElement>>;
+
+/** A dashed horizontal rule separating Input Groups (Figma "Demarcator"). */
+declare function FormDemarcator({ style, ...rest }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+interface InputGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Group sub-header title (Figma group-header). Default "Group Name". */
+    title?: string;
+    /** Group sub-header description. Default "Provide details for this group". */
+    description?: string;
+    /**
+     * Fields laid out in a wrapping 2-column grid (col gap 32, row gap 20). Each is an
+     * `<InputField>`; defaults to a basic field (label "Label Text", placeholder
+     * "Field Text", helper hidden), mirroring the Figma instance config. Default 8 fields.
+     */
+    fields?: InputFieldProps[];
+    /** Trailing content on the group header (the group-header's interactive/passive slot). */
+    headerTrailing?: React.ReactNode;
+    /** Replace the group header entirely. */
+    header?: React.ReactNode;
+    /** Replace the field grid entirely (overrides `fields`). */
+    children?: React.ReactNode;
+}
+/**
+ * Input Group — one titled cluster within an {@link InputSection}: a `group-header`
+ * Content Primitive over a responsive 2-column grid of `InputField`s. Each field
+ * fills its column and the grid wraps to one column when the container is narrow.
+ */
+declare const InputGroup: React.ForwardRefExoticComponent<InputGroupProps & React.RefAttributes<HTMLDivElement>>;
+interface InputSectionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Section header title. Default "Text". */
+    title?: string;
+    /** Section header description. Default "Enter description here". */
+    description?: string;
+    /** Render the trailing collapse chevron. Default true. */
+    showChevron?: boolean;
+    /**
+     * Start expanded (Figma `Open` variant). Default `true`. When collapsed
+     * (`Close` variant) only the section header renders; the chevron toggles it.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Controlled-toggle hook. When provided, the chevron calls this instead of
+     * managing collapse internally — the caller drives `defaultOpen`.
+     */
+    onToggle?: () => void;
+    /** Replace the section header entirely. */
+    header?: React.ReactNode;
+    /**
+     * The form body — the Figma "Forms" SLOT (a vertical, 24px-gap stack). Provide
+     * `<InputGroup>`s; a dashed demarcator is auto-inserted between adjacent children.
+     * Defaults to two Input Groups, mirroring Figma.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Input Section — a titled, collapsible, multi-group form organism (Figma
+ * component set `10557:36087`, variants **Open** / **Close**). A section header
+ * (title + description + collapse chevron) sits above the "Forms" slot: a vertical
+ * stack of {@link InputGroup}s, each a `group-header` over a 2-column grid of
+ * `InputField`s, separated by dashed demarcators.
+ *
+ * The chevron collapses the section like {@link ListSection} — **Open** shows the
+ * header + Forms with a `Chevron-Up`; **Close** shows the header only with a
+ * `Chevron-Down`.
+ *
+ * Composes `ContentPrimitives` (group-header) + `InputField`. The form body is the
+ * Figma "Forms" SLOT, exposed as `children`; the default mirrors Figma (two groups).
+ *
+ * **When to use:** a structured, grouped form within a page or dialog.
+ * **When not to use:** a single field (`InputField`), a few related fields
+ * (`GroupedInput`), or tabular data (`Table`).
+ */
+declare const InputSection: React.ForwardRefExoticComponent<InputSectionProps & React.RefAttributes<HTMLDivElement>>;
+
+type ToastType = 'success' | 'warning' | 'error';
+interface ToastProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'children'> {
+    /** Outcome the toast reports. Default `success`. */
+    type?: ToastType;
+    /** Bold title line. */
+    title?: string;
+    /** Show the title line. Default true. */
+    showTitle?: boolean;
+    /** Supporting subtitle line. */
+    subtitle?: string;
+    /** Show the subtitle line. Default true. */
+    showSubtitle?: boolean;
+    /** Renders a trailing dismiss (×) button and is the dismiss handler. */
+    onDismiss?: () => void;
+    /**
+     * Auto-dismiss delay in ms. When set together with `onDismiss`, the toast
+     * fires `onDismiss` after this delay. LETA toasts persist ~7000ms.
+     */
+    duration?: number;
+    /** Optional trailing CTA (a `<Button>`), shown when `showCTA`. */
+    children?: React.ReactNode;
+    /** Show the trailing CTA slot. Default false (mirrors Figma). */
+    showCTA?: boolean;
+}
+/**
+ * Desktop Toast — a transient, auto-dismissing notification confirming the
+ * outcome of an action. Per Doc 3 §4, the consumer's toast container places
+ * these top-right (stacking downward, newest on top) and persists them 6s by
+ * default / 8s when a CTA is present (set `duration`); positioning/stacking is
+ * owned by that container, this component is the visual surface. `type="error"`
+ * (a destructive outcome) renders `role="alert"`/`aria-live="assertive"`
+ * instead of `role="status"`/`polite`. Figma `68:36772`.
+ */
+declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLDivElement>>;
+
+type TooltipVariant = 'small' | 'standard' | 'coachmark' | 'flyout' | 'popover';
+type TooltipPlatform = 'desktop' | 'mobile';
+type CaretSide = 'top' | 'bottom' | 'left' | 'right';
+type CaretAlign = 'start' | 'center' | 'end';
+interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Tooltip shape/content. Default `standard`. */
+    variant?: TooltipVariant;
+    /** `mobile` supports only small / standard / coachmark. Default `desktop`. */
+    platform?: TooltipPlatform;
+    /**
+     * Body text (small label / paragraph / coachmark + flyout body). Accepts a node
+     * so a Small tooltip can carry more than one styled line — e.g. the dispatch
+     * map's driver pins, which show a bold name over a greyed qualifier.
+     */
+    text?: React.ReactNode;
+    /** Title (coachmark / flyout / popover). */
+    title?: string;
+    /** Edge the caret points from. Default `bottom`. */
+    caretSide?: CaretSide;
+    /** Caret position along the edge. Default `center`. */
+    caretAlign?: CaretAlign;
+    /** Show the caret. Default true. */
+    showCaret?: boolean;
+    /**
+     * Override the body width, px. The `standard` surface is **288** in the Library
+     * (`1178:15588`: a 256px text column + 16px padding either side), and instances
+     * are routinely resized from it — the Assign Driver dialog's is 236, the order
+     * table's SLA tips are 256.
+     *
+     * It exists so those are stated at the call site instead of the component being
+     * re-derived from whichever instance was last inspected. That is exactly how the
+     * default became 236 on 2026-08-12: the number was read off `1875:341533`, which
+     * is an *instance*, not the component.
+     */
+    width?: number;
+    step?: number;
+    totalSteps?: number;
+    skipLabel?: string;
+    onSkip?: () => void;
+    nextLabel?: string;
+    onNext?: () => void;
+    /** Optional badge rendered beside the coachmark title. */
+    badge?: React.ReactNode;
+    cancelLabel?: string;
+    onCancel?: () => void;
+    confirmLabel?: string;
+    onConfirm?: () => void;
+    confirmVariant?: 'destructive' | 'primary';
+    /**
+     * Popover — Details Section slot (the metadata grid + any configuration
+     * controls like a toggle row, with their dividers). Figma SLOT → ReactNode.
+     */
+    details?: React.ReactNode;
+    /** Popover — CTA Section slot (the action buttons). Figma SLOT → ReactNode. */
+    cta?: React.ReactNode;
+}
+declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Where the tooltip sits relative to its trigger.
+ *
+ * - `auto` (default) — above, flipping below when there's no room. The right
+ *   choice for tips on inline content, where a side tooltip would cover the text
+ *   beside the trigger.
+ * - `right` — to the trigger's right, caret pointing left. For triggers in a
+ *   narrow left-hand column (the collapsed Side Bar's icon-only nav), where
+ *   above/below would land on the neighbouring nav item.
+ */
+type HoverTipPlacement = 'auto' | 'right';
+interface HoverTipProps {
+    /**
+     * Tooltip copy. One line for `small`, a short paragraph for `standard`.
+     *
+     * Pass a **function** when the copy depends on something that moves — a running
+     * clock, a live count. It is then called each time the tip opens, the same
+     * evaluate-at-hover-time treatment {@link HoverTipProps.shouldShow} gets, so the
+     * tip can't state a number that has drifted from what is on screen beside it.
+     * (The alternative is re-rendering the whole host once a second just to refresh
+     * a string nobody is looking at.)
+     */
+    label: React.ReactNode | (() => React.ReactNode);
+    /**
+     * Accessible name, when `label` is not a plain string.
+     *
+     * The wrapper's `aria-label` normally reuses the label, which only works while the
+     * label IS text. A node label (the SLA tips stack a status Badge above a sentence)
+     * has to say in words what it shows.
+     */
+    ariaLabel?: string;
+    /** Body width override, px — see {@link TooltipProps.width}. */
+    width?: number;
+    /**
+     * Which `Tooltip` surface to render. Default `small` — the compact dark chip
+     * used for terse labels ("Copy ID", a truncated value).
+     *
+     * Use `standard` when the tip is a sentence explaining something rather than
+     * naming it, e.g. the driver popover's On-time-rate ⓘ: "Share of this driver's
+     * deliveries completed within the expected fulfilment time." The Small surface
+     * caps its text at 163px and centres it, so a sentence there wraps into a tall
+     * narrow column; Standard is the wider, left-aligned paragraph surface.
+     */
+    variant?: 'small' | 'standard';
+    /** The hover/focus trigger. Wrapped in an inline-flex span. */
+    children: React.ReactNode;
+    /** Delay before showing, ms. Default 120 (avoids flicker on pass-through). */
+    delay?: number;
+    /** See {@link HoverTipPlacement}. Default `auto`. */
+    placement?: HoverTipPlacement;
+    /**
+     * Gate evaluated **at hover time**, not at render. Return false to suppress
+     * the tip for this hover.
+     *
+     * For conditions that depend on layout — "only tip when this text is actually
+     * truncated" — this is the reliable form. Deciding at mount means measuring
+     * before the parent has finished sizing its columns, and then depending on a
+     * ResizeObserver to correct it; the moment the pointer arrives, layout is
+     * settled and the answer is simply true.
+     */
+    shouldShow?: () => boolean;
+    /** Wrapper span style overrides. */
+    style?: React.CSSProperties;
+}
+/**
+ * HoverTip — wires the presentational `Tooltip` (Small variant, dark surface)
+ * to a hover/focus trigger: the tooltip portals into `document.body` centered
+ * on the trigger with its caret pointing at it, per the wireframes' hover
+ * overlays (order-row provenance icons, Copy ID, SLA status icons,
+ * finished-duration icons — and the same icons in the order-detail header).
+ *
+ * **Placement mirrors the dropdown/Popover logic:** the default `auto` prefers
+ * **above** (caret down), but **flips below** (caret up) when there isn't room
+ * above the viewport; the horizontal centre is clamped to an 8px viewport
+ * margin. It measures the rendered tooltip first (hidden for one frame) so the
+ * flip/clamp uses the true size. `placement="right"` puts the tooltip beside the
+ * trigger instead (caret left) — the collapsed Side Bar's icon-only nav, where
+ * an above/below tip would cover the adjacent nav item.
+ *
+ * Shows after a short `delay` on mouseenter, or on **keyboard** focus only
+ * (`:focus-visible` — see `showFromFocus`); on mouseleave/blur it plays
+ * the exit animation, then unmounts. The tooltip is `pointer-events: none` (never
+ * traps the cursor) and `aria-hidden` — callers keep the trigger's own accessible
+ * name (e.g. the Copy button's `aria-label`); for plain decorative icons the
+ * label is also exposed via `aria-label` on the wrapper.
+ */
+declare function HoverTip({ label, ariaLabel, width, variant, children, delay, placement, shouldShow, style }: HoverTipProps): React.ReactElement;
+
+/** Which side of the trigger the panel ended up on. */
+type TooltipSide = 'above' | 'below' | 'right';
+/** Caret side to render for a given resolved {@link TooltipSide}. */
+declare const CARET_SIDE: Record<TooltipSide, 'top' | 'bottom' | 'left'>;
+interface TooltipRect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+interface TooltipPositionInput {
+    /** Trigger's viewport rect. */
+    trigger: TooltipRect;
+    /** Measured panel size (body only — the caret is overflow). */
+    panel: {
+        width: number;
+        height: number;
+    };
+    /**
+     * `auto` prefers above and flips below; `right` is an explicit opt-in that
+     * never flips (a caller picks it because the sides are the only viable axis,
+     * e.g. a narrow nav column) and only clamps vertically.
+     */
+    placement?: 'auto' | 'right';
+    /**
+     * The box the tooltip must stay inside. Defaults to the viewport.
+     *
+     * Pass a container rect when the tooltip belongs to a bounded surface — the
+     * map panel passes its own rect so a tooltip on a pin near the top flips
+     * below instead of escaping over the modal header. The tooltip should still
+     * be *rendered* outside that container (portalled to `document.body`) so the
+     * container's `overflow: hidden` cannot clip it; this only constrains where
+     * it is placed.
+     */
+    boundary?: TooltipRect;
+    /** Clearance from the boundary edges. Default {@link BOUNDARY_MARGIN}. */
+    margin?: number;
+}
+interface TooltipPosition {
+    /** Viewport coordinates for the panel's top-left corner. */
+    top: number;
+    left: number;
+    side: TooltipSide;
+    caretAlign: CaretAlign;
+}
+declare function computeTooltipPosition({ trigger, panel, placement, boundary, margin, }: TooltipPositionInput): TooltipPosition;
+
+type EmptyStateType = 'no-results' | 'no-reviews' | 'no-broadcast-logs' | 'image-upload' | 'file-upload' | 'no-suspensions' | 'no-items' | 'no-orders' | 'no-network' | 'new-update' | 'no-data' | 'no-trips' | 'no-drivers' | 'no-products' | 'error' | 'comments' | 'notifications';
+type EmptyStateSize = 'mobile' | 'desktop';
+interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Preset scenario — sets the illustration + default copy. Default `no-orders`. */
+    type?: EmptyStateType;
+    /** `desktop` (full-page, larger heading) or `mobile` (compact — cards/panels/results). Default `desktop`. */
+    size?: EmptyStateSize;
+    /** Override the heading. */
+    heading?: string;
+    /** Override the supporting copy. */
+    description?: string;
+    /** Show the illustration. Default true (false ⇒ Figma's "No Icon" treatment — text only). */
+    showIcon?: boolean;
+    /** Optional CTA (e.g. a `<Button>`), rendered below the copy (Container slot). */
+    children?: React.ReactNode;
+}
+/**
+ * Empty State (`7339:29150`) — a centred placeholder column shown when there's no
+ * data: a 150×150 LETA illustration (with its own ground shadow) over a heading
+ * and supporting copy, plus an optional CTA. Choose a scenario with `type` (14
+ * presets), the heading scale with `size`, or pass `showIcon={false}` for the
+ * text-only "No Icon" treatment. The `children` slot (Figma Container) holds the CTA.
+ *
+ * **When to use:** an empty table/list/panel, no search results, a connection
+ * error, or an upload prompt.
+ * **When not to use:** inline field errors (use the field's own message) or a
+ * transient toast (use Toast).
+ */
+declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Select — the field acts as a select trigger: a read-only field box with a
+ * trailing chevron that opens a menu/overlay (owned by the consumer). The
+ * `Select` type of Data Entry `38:42` (Variant=Basic). Visually identical to
+ * the field box of Input Field; clicking the box fires `onSelectClick`.
+ *
+ * The field box carries `data-field-box` — a stable hook for consumers that
+ * anchor a popover/overlay to this control. Anchoring to the outer (labelled)
+ * wrapper instead measures a rect that includes the label above the box, which
+ * throws off overlay flip-above positioning (the panel lands level with the
+ * label, not the visible field).
+ */
+interface SelectProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Label text. */
+    label?: string;
+    /** Show the label section. Default true. */
+    showLabel?: boolean;
+    /** Show an Info marker after the label. */
+    showLabelIcon?: boolean;
+    /** The label marker icon. Default `Info` (outlined). */
+    labelIcon?: IconName;
+    /** Optional/Required tag after the label. Default `none`. */
+    tag?: 'none' | 'optional' | 'required';
+    /** Icon inside the field, before the value. */
+    leadingFieldIcon?: IconName;
+    /** Currency/unit prefix shown before the value (e.g. "KES"). */
+    currency?: string;
+    /** Helper text below the field. */
+    helperText?: string;
+    /** Show the helper/message line. Default true. */
+    showHelper?: boolean;
+    /** Error message — turns the border red + shows an error icon. */
+    error?: string;
+    /** Warning message — shows a warning icon (border unchanged). */
+    warning?: string;
+    /** Right-aligned control on the label row. */
+    labelToggle?: React.ReactNode;
+    /** Fired when the field/chevron is clicked (open the menu/overlay). */
+    onSelectClick?: () => void;
+}
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLInputElement>>;
+
+/**
+ * Stepper Input — a labelled numeric stepper field. The `Stepper Input` type of
+ * Data Entry `38:42` (Variant=Basic): the label + helper chrome of a Data Entry
+ * field, with a `<Stepper>` (its building block) in place of the text field box.
+ * Renders an internal `<Stepper>` with the forwarded props, or accepts a
+ * `stepper` slot to inject a fully-configured one.
+ */
+interface StepperInputProps {
+    /** Label text. */
+    label?: string;
+    /** Show the label section. Default true. */
+    showLabel?: boolean;
+    /** Show an Info marker after the label. */
+    showLabelIcon?: boolean;
+    /** The label marker icon. Default `Info` (outlined). */
+    labelIcon?: IconName;
+    /** Optional/Required tag after the label. Default `none`. */
+    tag?: 'none' | 'optional' | 'required';
+    /** Helper text below the field. */
+    helperText?: string;
+    /** Show the helper/message line. Default true. */
+    showHelper?: boolean;
+    /** Error message — shows an error icon + red text. */
+    error?: string;
+    /** Warning message — shows a warning icon + warning text. */
+    warning?: string;
+    /** Right-aligned control on the label row. */
+    labelToggle?: React.ReactNode;
+    /** Stepper visual variant. Default `discrete`. */
+    stepperVariant?: StepperVariant;
+    /** Controlled stepper value. */
+    value?: number;
+    /** Uncontrolled initial stepper value. */
+    defaultValue?: number;
+    /** Fired with the next clamped value. */
+    onChange?: (value: number) => void;
+    /** Lower bound (inclusive). Default 0. */
+    min?: number;
+    /** Upper bound (inclusive). */
+    max?: number;
+    /** Increment/decrement amount. Default 1. */
+    step?: number;
+    disabled?: boolean;
+    /** Override the internal `<Stepper>` with a fully-configured one. */
+    stepper?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare function StepperInput({ label, showLabel, showLabelIcon, labelIcon, tag, helperText, showHelper, error, warning, labelToggle, stepperVariant, value, defaultValue, onChange, min, max, step, disabled, stepper, className, style, }: StepperInputProps): react_jsx_runtime.JSX.Element;
+
+type GroupedInputVariant = 'multi-field' | 'range-input' | 'time-input-stepper';
+interface GroupedInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Which Figma `Property 1` layout. Default `multi-field`. */
+    variant?: GroupedInputVariant;
+    /** Bottom helper text. */
+    showHelperText?: boolean;
+    helperText?: string;
+    /** The grouped fields (default: three `<InputField>`s). */
+    children?: React.ReactNode;
+    /** Show the trailing element after the fields (multi-field). Default true. */
+    showTailComponent?: boolean;
+    /** Trailing element (default: a Dropdown `<TrailingInputFieldElement>`). */
+    tail?: React.ReactNode;
+    /** Left field of the range (default `<InputField>`). */
+    from?: React.ReactNode;
+    /** Right field of the range (default `<InputField>`). */
+    to?: React.ReactNode;
+    /** Show the editable label above the steppers. Default true. */
+    showEditableLabel?: boolean;
+    /** Editable-label text (time-input-stepper). */
+    editableLabel?: string;
+}
+/**
+ * Grouped Input — lays out several data-entry fields together as one unit
+ * (Figma `5146:845211`). Three layouts:
+ *
+ * - **`multi-field`** — a row of input fields (the `children`) ending in an optional
+ *   trailing element (`tail`, e.g. a unit dropdown).
+ * - **`range-input`** — two fields joined by a "→" arrow, for a from→to range.
+ * - **`time-input-stepper`** — an editable label above a row of Hours / Minutes /
+ *   Seconds stepper inputs.
+ *
+ * Fields align at their input boxes (labels sit above), and an optional helper line
+ * sits beneath the whole group.
+ *
+ * **When to use:** when several fields form one logical value (a date range, a
+ * duration, an address row). **When NOT:** for a single field (use Input Field).
+ */
+declare const GroupedInput: React.ForwardRefExoticComponent<GroupedInputProps & React.RefAttributes<HTMLDivElement>>;
+
+type DateTimePickerType = 'simple' | 'date-range' | 'date-time';
+interface DateTimePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Which picker. Default `simple`. */
+    type?: DateTimePickerType;
+    platform?: 'desktop' | 'mobile';
+    /** Initial displayed month. Default: the current month. */
+    defaultMonth?: {
+        year: number;
+        month: number;
+    };
+    /**
+     * Disable every day before this one, and — on that same day — every time
+     * before its time-of-day (desktop `date-time`'s Time of Day list only; the
+     * mobile time wheel does not yet gate). For scheduling something that can't
+     * happen in the past (a delivery date, a reschedule). Omit for pickers that
+     * filter historical records (e.g. a "Created" date-range filter), which must
+     * still reach the past.
+     */
+    minDate?: Date;
+    /**
+     * Seed the picker with the value that is **already applied** — the selected
+     * day for `simple`, the day *and* time-of-day for `date-time`.
+     *
+     * **Read once, at mount.** These are uncontrolled seeds, not a controlled
+     * value, because this picker is mounted only while its popover is open: it is
+     * a fresh component on every open, so the only moment it can learn what the
+     * host already has is its first render. A host that re-renders with a new
+     * `defaultDate` while the picker is open is not trying to move the user's
+     * cursor mid-edit.
+     *
+     * Without it a picker reopens blank — showing the current month with nothing
+     * selected and Apply disabled — while the field beside it displays a real
+     * value. The user is then asked to re-enter what they can already read.
+     *
+     * On `date-time` the time-of-day is derived from the same Date and snapped to
+     * the nearest 30-minute row, since those are the only times the list offers.
+     */
+    defaultDate?: Date | null;
+    /**
+     * Seed a `date-range` picker with the applied range. Same read-once semantics
+     * as {@link DateTimePickerProps.defaultDate}. The calendars open on the
+     * range's start month, and the Start / End fields show it.
+     */
+    defaultRange?: {
+        start: Date | null;
+        end: Date | null;
+    } | null;
+    /**
+     * Seed which `date-range` preset row reads as active ("Today", "Last 7 Days",
+     * "Custom", …). Pass back whatever `onApply` reported, so reopening the picker
+     * shows the same row ticked that produced the range in the field.
+     */
+    defaultPreset?: string;
+    /** Mobile bottom-sheet header title / subtitle. */
+    title?: string;
+    subtitle?: string;
+    /**
+     * Fired when the user applies a single date / range / time. `preset` is set for
+     * date-range presets and Custom. `explicit` is true when the user pressed a
+     * footer button rather than a preset auto-applying.
+     *
+     * **A `date-range` Clear reports here too**, as `{ start: null, end: null,
+     * preset: undefined, explicit: true }` — so a host must treat null endpoints as
+     * "no date filter" rather than assuming every call carries a range.
+     */
+    onApply?: (value: {
+        date?: Date | null;
+        start?: Date | null;
+        end?: Date | null;
+        time?: string | null;
+        preset?: string;
+        explicit?: boolean;
+    }) => void;
+    onCancel?: () => void;
+}
+/**
+ * Date & Time Pickers (`1182:17579`) — `simple` (one calendar), `date-range`
+ * (preset list + dual calendars), and `date-time` (calendar + time column), on
+ * desktop or mobile. Desktop calendars show the abbreviated month ("Nov 2024");
+ * mobile shows the full month. Range selection paints a continuous grey band
+ * across the in-between days.
+ *
+ * **Footer (desktop)** — a Footer Frame (Card Footer) with a Notification Banner
+ * on the left + Clear / Apply on the right. The banner message is contextual:
+ * - **Date & Time**: while *not both* a date and a time are selected (none, only
+ *   the date, or only the time) it reads **"Select date & time"**; once **both**
+ *   are selected it shows the chosen value, e.g. **"Nov 5 2024, 12:30 AM"**.
+ * - **Date Range**: it reads **"{N} days selected"**.
+ */
+declare const DateTimePicker: React.ForwardRefExoticComponent<DateTimePickerProps & React.RefAttributes<HTMLDivElement>>;
+
+interface CalendarProps {
+    /** Displayed year. */
+    year: number;
+    /** Displayed month (0–11). */
+    month: number;
+    platform?: 'desktop' | 'mobile';
+    /** Single selected day (simple / date-time). */
+    selected?: Date | null;
+    /** Range endpoints (date-range). */
+    rangeStart?: Date | null;
+    rangeEnd?: Date | null;
+    /**
+     * Disable every day strictly before this one (compared by calendar day, not
+     * time-of-day) — a past day is greyed out and not selectable. Used when the
+     * picker is scheduling something that can't happen in the past (a delivery
+     * date, a reschedule), never for a picker that filters historical records
+     * (e.g. the Orders table's "Created" date filter, which must reach the past).
+     */
+    minDate?: Date;
+    onSelectDay?: (date: Date) => void;
+    onPrevMonth?: () => void;
+    onNextMonth?: () => void;
+    onPrevYear?: () => void;
+    onNextYear?: () => void;
+    style?: React.CSSProperties;
+}
+/**
+ * Calendar — the shared month grid used by every Date & Time Picker type. A
+ * Month & Year header (navigation + label), a Monday-first weekday row, and a
+ * weekday-aligned grid of day cells (reusing the Day Cell menu-option). Selected
+ * days / range endpoints render `active`; in-between range days get a light fill;
+ * leading/trailing days from adjacent months are muted and non-interactive.
+ */
+declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLDivElement>>;
+
+type TextAreaVariant = 'basic' | 'rich';
+interface TextAreaShared {
+    /** `basic` plain multi-line field, or `rich` with a formatting-toolbar footer. Default `basic`. */
+    variant?: TextAreaVariant;
+    /** Label text. */
+    label?: string;
+    /** Show the label section. Default true. */
+    showLabel?: boolean;
+    /** Show an Info marker after the label. */
+    showLabelIcon?: boolean;
+    /** The label marker icon. Default `Info` (outlined). */
+    labelIcon?: IconName;
+    /** Optional/Required tag after the label. Default `none`. */
+    tag?: 'none' | 'optional' | 'required';
+    /** Right-aligned control on the label row (e.g. a `<SelectionControl variant="switch">`). */
+    labelToggle?: React.ReactNode;
+    /** Helper text below the field. */
+    helperText?: string;
+    /** Show the helper/message line. Default true. */
+    showHelper?: boolean;
+    /** Error message — turns the border red + shows an error icon. */
+    error?: string;
+    /** Warning message — shows a warning icon (border unchanged). */
+    warning?: string;
+    /** Show the in-field character counter ("n/max"). Default true. */
+    showCounter?: boolean;
+    /** Visible text rows (drives min height, basic variant only). Default ~4 (≈120px box). */
+    rows?: number;
+    disabled?: boolean;
+    placeholder?: string;
+    maxLength?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+interface TextAreaBasicProps extends TextAreaShared, Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'rows' | 'value' | 'defaultValue' | 'onChange' | 'placeholder' | 'disabled' | 'maxLength' | 'className' | 'style'> {
+    variant?: 'basic';
+    value?: string;
+    defaultValue?: string;
+    onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+}
+interface TextAreaRichProps extends TextAreaShared {
+    variant: 'rich';
+    /**
+     * Sanitized HTML — the only markup that ever survives is `<strong>/<em>/<u>/<br>`
+     * (see `sanitizeRichText`). Controlled; omit for an uncontrolled field.
+     */
+    value?: string;
+    /** Uncontrolled initial HTML value. */
+    defaultValue?: string;
+    /** Fired with the new sanitized HTML after every edit (typing, formatting, paste). */
+    onChange?: (html: string) => void;
+    /**
+     * Fired when the user toggles Bold/Italic/Underline — `active` is the format's
+     * new state. Informational only: `TextArea` already applies the formatting to
+     * the selection/caret itself:
+     * - With text highlighted, the button bolds/italicizes/underlines the selection.
+     * - With just a caret, the format becomes "sticky" — it applies to whatever is
+     *   typed next, like Word/Docs — until toggled off or the caret moves away.
+     */
+    onBold?: (active: boolean) => void;
+    onItalic?: (active: boolean) => void;
+    onUnderline?: (active: boolean) => void;
+    /**
+     * Trailing footer slot (Figma `38:42` Text Area / Rich — `Trailing Buttons`
+     * SLOT). Whatever ReactNode you pass renders here, right of the formatting
+     * toggles. Omit for the DS default (a Secondary "Cancel" + Primary "Save",
+     * wired to `onCancel`/`onSave`); pass `null` for no trailing region at all
+     * (inline-edit variant, where Save/Cancel live in a separate card footer).
+     */
+    trailing?: React.ReactNode;
+    /** Wired to the default trailing Save button. Ignored when `trailing` is set. */
+    onSave?: () => void;
+    /** Wired to the default trailing Cancel button. Ignored when `trailing` is set. */
+    onCancel?: () => void;
+    /**
+     * Disable the default trailing Save button. Default `false` — the Save button
+     * ships as Idle per Figma and enables the enter/submit action even on an
+     * empty draft unless the caller opts in.
+     */
+    saveDisabled?: boolean;
+    /**
+     * Focus the field on mount and place the caret at the end of any seeded
+     * content. Use when the rich field appears in response to a user action (e.g.
+     * expanding a collapsed comment composer, or entering inline-edit) so the user
+     * can type immediately.
+     */
+    autoFocus?: boolean;
+    onFocus?: React.FocusEventHandler<HTMLDivElement>;
+    onBlur?: React.FocusEventHandler<HTMLDivElement>;
+}
+type TextAreaProps = TextAreaBasicProps | TextAreaRichProps;
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLDivElement | HTMLTextAreaElement>>;
+
+/**
+ * Reduce an HTML string down to only `<strong>/<b>/<em>/<i>/<u>/<br>`, no
+ * attributes, no other tags — the output is inert markup, safe to render as
+ * raw HTML anywhere downstream. No-ops (returns unchanged) outside a browser.
+ */
+declare function sanitizeRichText(html: string): string;
+/** Plain visible text of a (rich or plain) HTML string — for length/emptiness checks. */
+declare function htmlToPlainText(html: string): string;
+
+interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Placeholder. Default "Search here...". */
+    placeholder?: string;
+    /** Leading icon. Default `Search`. */
+    icon?: IconName;
+    /** Optional label above the field (hidden by default). */
+    label?: string;
+    /** Optional helper text below the field (hidden by default). */
+    helperText?: string;
+    /** Notified when the clear (×) is clicked. Optional — the field clears itself. */
+    onClear?: () => void;
+    /** Error state — error-colored field border + an error message row below. */
+    error?: boolean;
+    /** The error message text (shown when `error`). Default "Enter a valid character/value". */
+    errorMessage?: string;
+    disabled?: boolean;
+}
+/**
+ * Desktop search field — the `Search Input` type of Data Entry `38:42` (Desktop
+ * variant): `--rounding-lg` field on `--surface-neutral-search-field`. The mobile,
+ * web-map and mobile-map variants are the separate `MobileSearchInput`,
+ * `MapSearchInput` and `MobileMapSearchInput` components.
+ *
+ * A trailing clear (×) button appears automatically as soon as the field has text
+ * and clears it on click (also firing `onClear`); it's hidden while the field is empty.
+ *
+ * **Error state** (`error`) — mirrors Figma's Desktop/Error variant: the field
+ * border turns `--border-error-default` and an error message row (`Icon/Error` +
+ * `--text-error-label` text) renders below the field.
+ */
+declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface MobileSearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Placeholder. Default "Search here...". */
+    placeholder?: string;
+    /** Leading icon. Default `Search`. */
+    icon?: IconName;
+    /** Optional label above the field (hidden by default). */
+    label?: string;
+    /** Optional helper text below the field (hidden by default). */
+    helperText?: string;
+    /** Notified when the clear (×) is clicked. Optional — the field clears itself. */
+    onClear?: () => void;
+    disabled?: boolean;
+}
+/**
+ * Mobile search field — the `Search Input` type of Data Entry `38:42` (Mobile
+ * variant): a pill `--rounding-round` field on `--surface-neutral-input-field`.
+ * (Desktop is `SearchInput`; the map variants are `MapSearchInput` /
+ * `MobileMapSearchInput`.)
+ *
+ * A trailing clear (×) button appears automatically as soon as the field has text
+ * and clears it on click (also firing `onClear`); it's hidden while the field is empty.
+ */
+declare const MobileSearchInput: React.ForwardRefExoticComponent<MobileSearchInputProps & React.RefAttributes<HTMLInputElement>>;
+
+type MapSearchState = 'idle' | 'no-history' | 'active-history' | 'empty-results' | 'active-results';
+interface MapSearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Panel state. `idle` = field only; the rest attach a results panel. Default `active-results`. */
+    state?: MapSearchState;
+    /** Placeholder. Default "Search here...". */
+    placeholder?: string;
+    /** Leading icon. Default `Search`. */
+    icon?: IconName;
+    /** Notified when the clear (×) is clicked. Optional — the field clears itself. */
+    onClear?: () => void;
+    /** `active-history` header title. Default "Recent Searches". */
+    recentTitle?: string;
+    /** `active-history` "Clear All" handler. */
+    onClearHistory?: () => void;
+    /** Filter chip labels in the results Top Section. Default three "Filter"s. */
+    filters?: string[];
+    /** Index of the active filter chip. Default 0. */
+    activeFilter?: number;
+    /** Results count shown in the Top Section heading ("Results (N)"). Default 5. */
+    resultsCount?: number;
+    /** Empty-results copy below the no-results illustration. */
+    noResultsText?: string;
+    /** "No recent searches" copy. */
+    noHistoryText?: string;
+    /** Menu-options list — defaults to a `<Placeholder>` standing in for Desktop Menu Options `1531:5056`. */
+    children?: React.ReactNode;
+    disabled?: boolean;
+}
+/**
+ * Web-map search — the `Search Input` type of Data Entry `38:42` (Web Map variant):
+ * a 480px `--surface-neutral-alt-search-field` field with an attached results dropdown.
+ * The `state` prop drives the panel (Figma states):
+ * - `idle` — field only.
+ * - `no-history` — "No recent searches" helper.
+ * - `active-history` — "Recent Searches" header + Clear All + a recent-search list.
+ * - `empty-results` — filter chips + "Results (0)" + a no-results `<EmptyState>`.
+ * - `active-results` — filter chips + "Results (N)" + a results list.
+ * The list slots default to `DesktopMenuOptions` rows; pass your own via `children`.
+ *
+ * The field shows a trailing clear (×) — always while the panel is open, and as soon
+ * as the closed (idle) field has text. Clicking it clears the field and fires `onClear`.
+ */
+declare const MapSearchInput: React.ForwardRefExoticComponent<MapSearchInputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface MobileMapSearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Placeholder. Default "Search here...". */
+    placeholder?: string;
+    /** Leading icon. Default `Search`. */
+    icon?: IconName;
+    /** Show the attached results panel. Default true. */
+    open?: boolean;
+    /** Notified when the clear (×) is clicked. Optional — the field clears itself. */
+    onClear?: () => void;
+    /** Results-panel body — defaults to a `MobileDropdown` of `MobileMenuOptions` rows. */
+    children?: React.ReactNode;
+    disabled?: boolean;
+}
+/**
+ * Mobile-map search — the `Search Input` type of Data Entry `38:42` (Mobile Map
+ * variant): a pill `--surface-neutral-alt-search-field` field with an attached
+ * `MobileDropdown` results panel holding a list of `MobileMenuOptions` rows
+ * (pass your own via `children`).
+ *
+ * The field shows a trailing clear (×) — always while the panel is open, and as soon
+ * as the closed field has text. Clicking it clears the field and fires `onClear`.
+ */
+declare const MobileMapSearchInput: React.ForwardRefExoticComponent<MobileMapSearchInputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface FileUploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Label above the drop zone. Default "Attach an image". */
+    label?: string;
+    /** Show the label section. Default true. */
+    showLabel?: boolean;
+    /** Show an Info marker after the label. */
+    showLabelIcon?: boolean;
+    labelIcon?: IconName;
+    /** Optional/Required tag after the label. Default `optional`. */
+    tag?: 'none' | 'optional' | 'required';
+    /** Prompt text inside the drop zone. */
+    promptText?: string;
+    /** Browse button label. */
+    browseLabel?: string;
+    /** Max-size hint below the button. */
+    maxSizeText?: string;
+    /** `accept` attribute for the file input. */
+    accept?: string;
+    /** Allow multiple files. */
+    multiple?: boolean;
+    /** Fires with the selected/dropped files. */
+    onFiles?: (files: FileList) => void;
+    /** File-queue slot — render `<FileUploadCard>` groups (Uploading/Uploaded) here. */
+    children?: React.ReactNode;
+}
+/**
+ * Desktop drag-and-drop file upload zone — the `File Upload` type of Data Entry
+ * `38:42` (Desktop variant). Label + a dashed drop zone with a "Browse to upload"
+ * Secondary button + max-size hint; a hidden file input is triggered by Browse,
+ * and drag-drop is supported via `onFiles`. The Uploading / Uploaded states render
+ * a queue of `<FileUploadCard>`s in the `children` slot. (Figma has no disabled
+ * state.) The mobile image-tile grid is the separate `MobileFileUpload` component.
+ */
+declare const FileUpload: React.ForwardRefExoticComponent<FileUploadProps & React.RefAttributes<HTMLDivElement>>;
+
+type FileUploadCardStatus = 'uploading' | 'uploaded';
+interface FileUploadCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** `uploading` → Loading glyph + progress bar; `uploaded` → Check-Circle glyph, no bar. */
+    status?: FileUploadCardStatus;
+    /** File name (Label/M/SemiBold). */
+    filename: string;
+    /** File size, e.g. "32MB" (Label/S/Regular). */
+    size?: string;
+    /** Upload progress 0–100 (`uploading` only). */
+    progress?: number;
+    /** Fires when the trailing × is clicked. */
+    onRemove?: () => void;
+}
+/**
+ * A single row of the File Upload queue — the "File Upload Cards" sub-instance of
+ * Data Entry `38:42` (`Property 1 = Uploading | Uploaded`). A `--surface-neutral-
+ * bg-muted` card with a leading status glyph, filename + size, a trailing Ghost
+ * Icon-Only remove button, and (when uploading) a `DesktopProgressIndicator`.
+ */
+declare const FileUploadCard: React.ForwardRefExoticComponent<FileUploadCardProps & React.RefAttributes<HTMLDivElement>>;
+
+interface MobileFileUploadImage {
+    src: string;
+    alt?: string;
+}
+interface MobileFileUploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Label above the grid. Default "Attach an image". */
+    label?: string;
+    /** Show the label section. Default true. */
+    showLabel?: boolean;
+    /** Show an Info marker after the label. */
+    showLabelIcon?: boolean;
+    labelIcon?: IconName;
+    /** Optional/Required tag after the label. Default `optional`. */
+    tag?: 'none' | 'optional' | 'required';
+    /** Uploaded image thumbnails. */
+    images?: MobileFileUploadImage[];
+    /** Number of trailing "Add Photo" tiles. Defaults to filling a 3-up row when empty, else 0. */
+    addTiles?: number;
+    /** "Add Photo" tile label. */
+    addLabel?: string;
+    /** Fires when an Add Photo tile is activated. */
+    onAdd?: () => void;
+    /** Fires with the index of the image whose delete badge was clicked. */
+    onRemove?: (index: number) => void;
+}
+/**
+ * Mobile file upload — the `File Upload` type of Data Entry `38:42` (Mobile
+ * variant). A 3-up grid of 111×104 tiles: "Add Photo" placeholders (icon + label
+ * on `--surface-neutral-input-field` with a solid border) and uploaded image
+ * thumbnails with a red delete badge. (Desktop drag-zone is `FileUpload`.)
+ */
+declare const MobileFileUpload: React.ForwardRefExoticComponent<MobileFileUploadProps & React.RefAttributes<HTMLDivElement>>;
+
+interface PlaceholderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Centered label. Default "Placeholder". */
+    label?: string;
+    /** Min height of the box. Default 120. */
+    minHeight?: number;
+}
+/**
+ * A temporary visual stand-in for a not-yet-built component (a dashed neutral box
+ * with a centered muted label). Used e.g. inside the Map search results panel in
+ * place of the Desktop Menu Options list (`1531:5056`) until that component exists.
+ * Swap out once the real component ships.
+ */
+declare const Placeholder: React.ForwardRefExoticComponent<PlaceholderProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * The `Type` of menu row to render. Each value is one kind of item you'd find
+ * inside a desktop menu, dropdown, sidebar, calendar, or pager:
+ *
+ * - `combobox` — a selectable option in a single-select list. The chosen option
+ *   gets a light highlight and a trailing checkmark.
+ * - `dropdown-basic` — a standard menu command. Can show a trailing chevron (to
+ *   open a submenu), a keyboard shortcut, or a small badge.
+ * - `dropdown-advanced` — a richer two-line item (title + description) for results
+ *   or entities that need extra detail.
+ * - `dropdown-destructive` — a dangerous command such as Delete, shown in red.
+ * - `checkbox-selection` / `radio-selection` — a row with a built-in checkbox
+ *   (pick several) or radio button (pick one).
+ * - `day-cell` / `pagination` — small 32×32 square cells for calendar days and
+ *   page numbers; the current one is filled dark with white text.
+ * - `time-picker` — a compact time option such as "12:00 AM".
+ * - `filter-group` — a bordered filter heading. Once options are ticked it reveals
+ *   a single "{n} selected" chip whose × clears them all.
+ * - `sidebar-main` / `sidebar-main-icon` / `sidebar-sub` / `side-tab` — items for
+ *   the app's left sidebar and side tabs; the current section is highlighted and
+ *   set in semibold (icon-only is the collapsed-sidebar version).
+ */
+type DesktopMenuOptionType = 'combobox' | 'dropdown-basic' | 'dropdown-advanced' | 'dropdown-destructive' | 'checkbox-selection' | 'radio-selection' | 'day-cell' | 'time-picker' | 'filter-group' | 'sidebar-main' | 'sidebar-main-icon' | 'sidebar-sub' | 'side-tab' | 'pagination';
+interface DesktopMenuOptionsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'onSelect' | 'content'> {
+    /** Which of the 15 Figma Type variants to render. Default `combobox`. */
+    type?: DesktopMenuOptionType;
+    /** Primary text — label / day number / time / page number / nav or tab name / filter name. */
+    label?: string;
+    /** Caller-controlled active (current page / selected date / current nav). */
+    active?: boolean;
+    /** Caller-controlled selected (checkbox/radio selection rows; filter-group reveals tags). */
+    selected?: boolean;
+    disabled?: boolean;
+    /** Force a visual state for catalogs/stories — overrides interaction + active/selected/disabled. */
+    state?: DesktopMenuOptionState;
+    /**
+     * Leading icon — a help marker on rows, the module icon on
+     * sidebar-main / icon-only, and a 20px glyph on `dropdown-advanced`
+     * (where it renders whenever supplied, without `showLeadingIcon`).
+     */
+    leadingIcon?: IconName;
+    /** Show the leading icon. */
+    showLeadingIcon?: boolean;
+    /** dropdown-basic: trailing keyboard shortcut keys. */
+    shortcut?: string[];
+    /** Trailing badge (dropdown-basic / sidebar / side-tab). */
+    badge?: React.ReactNode;
+    /**
+     * Show the trailing chevron (dropdown-basic / dropdown-advanced → right;
+     * sidebar-main / side-tab → down). Default per type — `dropdown-advanced`
+     * defaults to `true`, so pass `false` for a row whose trailing content Figma
+     * switches off.
+     */
+    showChevron?: boolean;
+    /** dropdown-advanced: subtext beneath the title. */
+    subtext?: string;
+    /** dropdown-advanced: full content override (else a flat title + subtext + chevron is built from label/subtext). */
+    content?: React.ReactNode;
+    /**
+     * filter-group: how many options are currently selected in the List section.
+     * Drives the single "{n} selected" chip shown beneath the label; the chip is
+     * hidden when this is 0 (the row falls back to its plain Active/Idle look).
+     */
+    selectedCount?: number;
+    /** filter-group: fired when the "{n} selected" chip (its × icon) is clicked — clears the whole group. */
+    onDeselectAll?: () => void;
+    /** Fired on activation (click / Enter / Space). For selection rows, fired with the next checked value. */
+    onSelect?: (next: boolean) => void;
+}
+type DesktopMenuOptionState = 'idle' | 'hover' | 'pressed' | 'active' | 'disabled' | 'idle-selected' | 'hover-selected' | 'pressed-selected' | 'active-selected';
+/**
+ * Desktop Menu Options — a single row inside a desktop menu, dropdown, sidebar,
+ * calendar, or pager. It's the basic building block of the things people pick
+ * from: each row shows a label plus, depending on its `type`, an optional leading
+ * icon, a trailing checkmark / chevron / keyboard shortcut / badge, or an embedded
+ * checkbox or radio button.
+ *
+ * You rarely use a row on its own — you stack several inside a **Desktop Dropdowns**
+ * panel (or a sidebar / calendar) to build the full menu. Hover and pressed states
+ * are handled automatically; `active` (current/selected), `selected`
+ * (checkbox/radio rows), and `disabled` are caller-controlled. The `state` prop
+ * forces one visual state, which is only useful for catalog/showcase stories.
+ *
+ * **When to use:** for the individual items of any menu, dropdown, select, filter
+ * list, calendar, pager, sidebar, or side-tab.
+ * **When not to use:** as a standalone button (use Button) or as a top-level page
+ * tab (use Page Tabs Control).
+ */
+declare const DesktopMenuOptions: React.ForwardRefExoticComponent<DesktopMenuOptionsProps & React.RefAttributes<HTMLDivElement>>;
+
+type MobileMenuOptionType = 'combobox' | 'mobile-day-cell' | 'checkbox-selection' | 'radio-selection';
+/**
+ * Forced visual state, for catalogs that need to show every Figma variant at
+ * once. Mirrors `DesktopMenuOptionState`. Touch-first, so there is no `hover`.
+ */
+type MobileMenuOptionState = 'idle' | 'pressed' | 'active' | 'disabled';
+interface MobileMenuOptionsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'onSelect'> {
+    /** Which of the 4 Figma Types (`8338:35033`). Default `combobox`. */
+    type?: MobileMenuOptionType;
+    /** Row label / day number. */
+    label?: string;
+    /** Optional leading icon (combobox). */
+    leadingIcon?: IconName;
+    showLeadingIcon?: boolean;
+    /** Caller-controlled active (selected value / current date). */
+    active?: boolean;
+    /** Caller-controlled selected (checkbox/radio rows). */
+    selected?: boolean;
+    disabled?: boolean;
+    /**
+     * Force a visual state instead of deriving it from interaction. For Storybook
+     * catalogs — leave unset in product code so press stays a real touch state.
+     */
+    state?: MobileMenuOptionState;
+    onSelect?: (next: boolean) => void;
+}
+/**
+ * Mobile Menu Options — the touch version of a single menu / list row for phones.
+ * It's like Desktop Menu Options but simpler: bigger tap target and no hover state
+ * (just Idle, Pressed, Active, and Disabled). You stack several inside a
+ * **Mobile Dropdown** to build the full menu.
+ *
+ * Types: `combobox` (a selectable option; the chosen one shows a trailing checkmark),
+ * `mobile-day-cell` (a calendar day), and `checkbox-selection` / `radio-selection`
+ * (rows with a built-in checkbox or radio button).
+ *
+ * **When to use:** for the items of a mobile menu, select, filter list, or calendar.
+ * **When not to use:** on desktop (use Desktop Menu Options) or as a standalone button.
+ */
+declare const MobileMenuOptions: React.ForwardRefExoticComponent<MobileMenuOptionsProps & React.RefAttributes<HTMLDivElement>>;
+
+interface MobileDropdownOption {
+    label: string;
+    type?: MobileMenuOptionType;
+    leadingIcon?: IconName;
+    showLeadingIcon?: boolean;
+    active?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    onSelect?: (next: boolean) => void;
+}
+interface MobileDropdownProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Rows to render as `MobileMenuOptions`. */
+    options?: MobileDropdownOption[];
+    /** Override the rows entirely. */
+    children?: React.ReactNode;
+    /** Max panel height before the list scrolls. Default 248 (Figma). */
+    maxHeight?: number;
+}
+/**
+ * Mobile Dropdown — the phone version of the floating menu panel: a white, rounded,
+ * bordered card with a soft shadow that stacks **Mobile Menu Options** rows and
+ * scrolls when the list is long. It's the mobile counterpart of Desktop Dropdowns,
+ * used by mobile selects and the mobile map search. Pass the rows via `options`
+ * (or override them with `children`).
+ *
+ * **When to use:** for any mobile overlay that lets the user pick from a list.
+ * **When not to use:** for full-screen sheets or dialogs.
+ */
+declare const MobileDropdown: React.ForwardRefExoticComponent<MobileDropdownProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Which ready-made dropdown panel to render:
+ *
+ * - `combobox` — a scrollable single-select list (no pagination footer; Figma `8230:26475` — 350×248).
+ * - `combobox-empty` — the plain combobox with no options at all: the whole card body is a
+ *   centered text-only Empty State ("No Matching Results" / "Try adjusting your search."),
+ *   no search box and no pagination footer (Figma `8230:26475` — 350×248, same card height
+ *   as `combobox`).
+ * - `combobox-search` — the same list with a search box on top (no pagination footer; 350×304).
+ * - `combobox-search-empty` — the search state shown when nothing matches. Its results
+ *   region is the **same height as `combobox-search`** (Figma `8230:26475` — both variants
+ *   are 304px tall) so the panel does not resize between states; the "No Matching Results" /
+ *   "Try adjusting your search." message is centered in that region.
+ * - `combobox-create` — a list plus an 'Add "…"' action to create a new entry.
+ * - `combobox-create-empty` — the create state when nothing matches, with a hint.
+ * - `actions` — a context / "⋯" menu of commands, ending in a red destructive action.
+ * - `user-menu` — the account menu: avatar, name and email, then grouped links ending in Logout.
+ * - `sort` — pick a field to sort by (radio) and a direction (ascending / descending).
+ * - `basic-filter` — one checklist of filters; footer shows the result count + Close / Show Results.
+ * - `filter-group` — a two-pane filter: groups on the left, their searchable options on the
+ *   right. The active group shows how many options are ticked; the footer shows the live
+ *   result count with Reset / Show Results.
+ * - `filter-group-empty` — the same when the search finds no options.
+ * - `timepicker` — a scrollable list of times.
+ * - `stacked-list` — a list of richer two-line rows (title + description) for results / entities.
+ */
+type DesktopDropdownVariant = 'combobox' | 'combobox-empty' | 'combobox-search' | 'combobox-search-empty' | 'combobox-create' | 'combobox-create-empty' | 'actions' | 'user-menu' | 'sort' | 'basic-filter' | 'basic-filter-search' | 'basic-filter-search-empty' | 'filter-group' | 'filter-group-empty' | 'timepicker' | 'stacked-list';
+/** One rail dimension of a `filter-group` panel — its label plus the full option list shown when it's active. */
+interface FilterGroupDimension {
+    /** Rail label, e.g. "Recipient", "Depot", "Driver", "Created By". */
+    label: string;
+    /** Full option list for this dimension (checkbox rows on the right when it's the active rail selection). */
+    options: string[];
+}
+interface DesktopDropdownsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Which assembled dropdown panel to render (Figma `8230:26475`). Default `combobox`. */
+    variant?: DesktopDropdownVariant;
+    /** Row labels for the main list (combobox / timepicker / basic-filter / filter list / actions). */
+    options?: string[];
+    /** Initially-selected option index (combobox / timepicker). */
+    activeIndex?: number;
+    /**
+     * Dimension definitions for `filter-group`/`filter-group-empty` — rail label +
+     * its full option list. Falls back to a 3-dimension demo set when omitted.
+     */
+    groups?: FilterGroupDimension[];
+    /**
+     * Pre-checked option values per group, index-aligned with `groups` — restores
+     * a previously-applied filter when the panel is reopened (the panel itself
+     * remounts fresh each time it opens, so this is the host's hook to persist
+     * selections across opens).
+     */
+    initialGroupSelections?: string[][];
+    /**
+     * Fires with the full current per-group selection (index-aligned with
+     * `groups`) whenever any checkbox toggles. These are a live/draft preview —
+     * per Doc 3 §9, nothing is applied to the host's data until `onApply` fires;
+     * use this to recompute and pass back a live `resultsText` preview count.
+     */
+    onGroupSelectionChange?: (selected: string[][]) => void;
+    /** "Show Results" clicked (`filter-group`) — the host should commit the last selection reported via `onGroupSelectionChange` and typically close the panel. */
+    onApply?: () => void;
+    /** "Reset" clicked (`filter-group`) — clears every dimension's selection (both here and on the host's applied filter). */
+    onReset?: () => void;
+    /** Disable "Show Results" (`filter-group`) — e.g. the host's live preview count is 0. */
+    showResultsDisabled?: boolean;
+    /**
+     * Footer summary for the filter panels (basic-filter / filter-group). This is
+     * the host table's current matching-row count — a placeholder the consuming
+     * screen recomputes as filters narrow (Figma shows "30 results"). The leading
+     * number is emphasized automatically.
+     */
+    resultsText?: string;
+    /** Combobox-Create "Add" footer label. */
+    createLabel?: string;
+    /**
+     * Override the empty-state message for the `combobox-empty` / `combobox-search-empty`
+     * variants (e.g. "No depots found"). Defaults to the `no-results` preset copy
+     * ("Try adjusting your search.").
+     */
+    emptyDescription?: string;
+    /** User Menu display name. */
+    userName?: string;
+    /** User Menu email shown under the name. */
+    userEmail?: string;
+    /** User Menu avatar monogram tone (used when there is no uploaded photo). Default `teal`. */
+    userTone?: AvatarTone;
+    /** User Menu avatar photo URL. When set, shown in place of the monogram. */
+    userAvatarSrc?: string;
+    /**
+     * Sort fields + per-field direction labels (Figma `1050:209224`). The selected
+     * field's `ascLabel`/`descLabel` drive the two direction rows — e.g. a date field
+     * reads "Oldest to Newest / Newest to Oldest" while a numeric field reads
+     * "Low to High / High to Low". Defaults to Created / Duration / Last Updated.
+     */
+    sortOptions?: Array<{
+        label: string;
+        ascLabel?: string;
+        descLabel?: string;
+    }>;
+    /**
+     * Initially-selected sort field index (`sort` variant). Default 0.
+     *
+     * The panel owns its selection after mount, so this **seeds** it rather than
+     * controlling it. It matters because callers typically mount the panel only while
+     * it is open: without a seed, reopening shows the first field selected while the
+     * data is still sorted by whatever was picked last.
+     */
+    sortIndex?: number;
+    /** Initially-selected sort direction (`sort` variant). Default `desc`. Seeds, like {@link sortIndex}. */
+    sortDirection?: 'asc' | 'desc';
+    /** Fired when the sort field or direction changes (`sort` variant). */
+    onSortChange?: (sel: {
+        index: number;
+        label: string;
+        direction: 'asc' | 'desc';
+    }) => void;
+    /** Fired with the new selected-count whenever the filter selection changes (host updates `resultsText`). */
+    onSelectionChange?: (count: number) => void;
+    /** Override the panel body entirely. */
+    children?: React.ReactNode;
+}
+/**
+ * Desktop Dropdowns — a ready-made floating panel that appears when you open a
+ * menu, select, filter, or picker. It's the white rounded card with a soft shadow
+ * that holds a list of **Desktop Menu Options** rows plus whatever extra pieces the
+ * chosen `variant` needs: a search box, a pagination footer, an empty-state message,
+ * an account header, or footer buttons. Position it directly under the control that
+ * opens it.
+ *
+ * The selection-bearing variants manage their own state so the panel behaves like
+ * the real thing: ticking rows updates the Filter Group "{n} selected" chip,
+ * clicking a combobox / time / sort row moves the active checkmark, and long lists
+ * scroll. Pass `options` for the row labels and `onSelectionChange` to mirror the
+ * footer result count from your data.
+ *
+ * **Height & scroll model (Figma `8230:26475`).** The scrollable results region
+ * **hugs its content** by default, growing row-by-row until it reaches the variant's
+ * own **max height** — then the height locks and the list **scrolls** (the rest sits
+ * below the fold). Per-variant scroll-region maxes: Combobox / Combobox-Create /
+ * Combobox-Search = **240**; Basic Filter = **256**; Basic Filter-Search = **200**
+ * (the search row eats 56 of the 256). This same hug→max→scroll rule governs the
+ * bulk-toolbar "N selected" combobox. **Exception — the search-empty variants**
+ * (`combobox-search-empty`, `basic-filter-search-empty`) do **not** hug: they render
+ * at the **full max height** with the "No Matching Results / Try adjusting your
+ * search." message centered, so the panel does not shrink when a query returns
+ * nothing. **Create-empty** (`combobox-create-empty`) is NOT a search-empty state —
+ * it **hugs** its short content (hint banner + "Add …").
+ *
+ * **When to use:** for any overlay that lets the user pick or filter something.
+ * **When not to use:** for full pages or confirmation dialogs (use a Modal), or for
+ * content shown inline on the page.
+ */
+declare const DesktopDropdowns: React.ForwardRefExoticComponent<DesktopDropdownsProps & React.RefAttributes<HTMLDivElement>>;
+
+type DurationLabelVariant = 'finished' | 'active';
+type DurationLabelStatus = 'on-target' | 'delayed' | 'at-risk';
+interface DurationLabelProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /**
+     * `finished` — a completed/measured duration: greyed time, no icon. `active` — a
+     * live, running timer, the time itself coloured by status. Default `finished`.
+     */
+    variant?: DurationLabelVariant;
+    /**
+     * The timing status. Drives the **Active** time colour only (on-target = default,
+     * at-risk = warning/orange, delayed = error/red). Default `on-target`.
+     *
+     * Ignored by `finished`, which is greyed time regardless — Figma collapsed that
+     * variant's status axis to a single `All` when its icon was removed.
+     */
+    status?: DurationLabelStatus;
+    /** The duration text. Caller-supplied (e.g. "1h 24m 12s"). Default "0h 0m 0s". */
+    time?: string;
+    /**
+     * Makes the `active` variant **actually run**: an absolute epoch-ms timestamp
+     * for the moment the clock started. The label renders `now − runningFrom`,
+     * re-formatting itself once a second, and ignores `time`.
+     *
+     * An absolute instant rather than an elapsed count on purpose — it survives
+     * remounting (a table that reseeds its rows doesn't restart the timer), and any
+     * two surfaces given the same instant show the same number, which an
+     * each-anchors-at-its-own-mount design cannot guarantee.
+     *
+     * Ignored by the `finished` variant: a completed duration is measured, not
+     * running, so it must never tick.
+     */
+    runningFrom?: number;
+}
+/**
+ * Duration Labels — a compact inline label that communicates a duration and its
+ * status, used inside table Duration cells and timing summaries (Figma
+ * `4445:107943`).
+ *
+ * - **Finished** is greyed-out time, **no icon** (Figma `4445:107943`, re-enumerated
+ *   2026-08-18: the Finished variant's `Status` axis collapsed to a single `All` and
+ *   its leading icon was removed). The Within/Beyond-target outcome it used to carry
+ *   now reads from the **Status cell's** trailing SLA icon instead, beside the
+ *   Delivered / Cancelled badge — the same place every in-progress state shows it.
+ * - **Active** shows a live, running time coloured by status: default = on
+ *   target, orange = at risk, red = delayed.
+ *
+ * Presentational and non-interactive; the accessible name is the `time` text.
+ */
+declare const DurationLabel: React.ForwardRefExoticComponent<DurationLabelProps & React.RefAttributes<HTMLSpanElement>>;
+
+/**
+ * The kind of content a Cell renders. Header types are 40px tall and label the
+ * columns; the remaining body types are 72px tall and hold a row's data.
+ */
+type CellType = 'header' | 'header-checkbox' | 'sample' | 'date' | 'text-link' | 'status' | 'default-checkbox' | 'actions' | 'preview-chips' | 'duration' | 'select-field' | 'item-stepper' | 'time-stepper' | 'list-item' | 'address-cell' | 'manual-order' | 'automatic-order' | 'driver-cell' | 'user-cell' | 'api-cell';
+/**
+ * A cell's visual state. Mirrors the Figma `State` axis on Cell `4444:45000`,
+ * whose five values are mutually exclusive.
+ *
+ * `selected-pressed` exists because Selected and Selected-Pressed share a
+ * SURFACE — the press is carried entirely by the bottom border darkening one
+ * step. Letting the neutral `pressed` fill win on a selected row would read as
+ * the row being deselected for as long as the button is held, which is why the
+ * design system gives the combination its own state rather than a precedence
+ * rule between two.
+ */
+type CellState = 'idle' | 'hover' | 'pressed' | 'selected' | 'selected-pressed';
+interface CellProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {
+    /** Which of the 19 Figma Types to render. Default `sample`. */
+    type?: CellType;
+    /** Caller-controlled selected row (body types only; ignored by Header types). */
+    selected?: boolean;
+    /** Force a visual state for catalogs/stories — overrides interaction + `selected`. */
+    state?: CellState;
+    /**
+     * Draw the state-coloured bottom border (the row divider). Default true, per
+     * Figma, where every variant carries it. `Table` turns it off on its last row,
+     * whose divider would otherwise double up with the Pagination footer's own top
+     * border sitting immediately beneath it.
+     */
+    showDivider?: boolean;
+    /** `header`: the column title. Default "Label". */
+    columnName?: string;
+    /** `header`: render the leading info icon. Default false. */
+    showLeadingIcon?: boolean;
+    /** `header`: the leading icon (outlined). Default `Info`. */
+    leadingIcon?: IconName;
+    /** `header`: render the trailing info icon. Default false. */
+    showTrailingIcon?: boolean;
+    /** `header`: the trailing icon (outlined). Default `Info`. */
+    trailingIcon?: IconName;
+    /**
+     * `header-checkbox` / `default-checkbox`: checked state. Leave undefined for
+     * uncontrolled behaviour — the Checkbox self-toggles checked ↔ unchecked on
+     * click (and fires `onCheckedChange`). Pass a boolean to control it.
+     */
+    checked?: boolean;
+    /** `header-checkbox`: indeterminate (some-rows-selected) state — for the "some but not all rows selected" header checkbox. */
+    indeterminate?: boolean;
+    /** `header-checkbox` / `default-checkbox`: fired with the next checked value. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** `sample`: the plain text value. Right-align numerics for scanning. Default "Content". */
+    text?: string;
+    /** `sample`: right-align the value (numeric quantities/amounts). Default false. */
+    alignRight?: boolean;
+    /**
+     * Horizontal alignment of the cell's whole content, any `type`. `'right'` for
+     * numeric columns (Distance, Duration) per the annotations' "right-align
+     * numerics" rule. Normally set once on the `TableColumn` so the header label and
+     * its values align together, rather than per cell.
+     */
+    align?: 'left' | 'right';
+    /** `date`: the two-line date/time value. Default "Jan 23, 2023\n9:00 AM". */
+    date?: string;
+    /** `text-link`: the link text. Default "contact@gmail.com". */
+    link?: string;
+    /** `text-link`: fired when the link is clicked. */
+    onLinkClick?: () => void;
+    /** `list-item`: the title (truncates with ellipsis). Default "Text". */
+    title?: string;
+    /** `list-item`: the description (truncates with ellipsis). Default "Enter description here". */
+    subtext?: string;
+    /** `address-cell`: the pickup address (truncates with ellipsis). */
+    pickup?: string;
+    /** `address-cell`: the dropoff address (truncates with ellipsis). */
+    dropoff?: string;
+    /** `manual-order` / `automatic-order`: the order ID (truncates, max 250 chars). */
+    orderId?: string;
+    /** `preview-chips`: chip labels. Default three "Type" chips. */
+    chips?: string[];
+    /** `duration`: the embedded Duration Label variant. Default `finished`. */
+    durationVariant?: DurationLabelVariant;
+    /** `duration`: the Duration Label status. Default `on-target`. */
+    durationStatus?: DurationLabelStatus;
+    /** `duration`: the duration text. Default "0h 0m 0s". */
+    durationTime?: string;
+    /**
+     * `duration` type: absolute epoch-ms start for a **running** timer — the cell
+     * counts up from it once a second instead of showing the static
+     * `durationTime`. See {@link DurationLabelProps.runningFrom}; ignored when the
+     * variant is `finished`.
+     */
+    durationRunningFrom?: number;
+    /** `select-field`: fired when the inline select is clicked. */
+    onSelectClick?: () => void;
+    /** `item-stepper`: the stepper value. */
+    stepperValue?: number;
+    /** `item-stepper`: fired with the next stepper value. */
+    onStepperChange?: (value: number) => void;
+    /** `driver-cell` / `user-cell`: the person's name (also the source for the Avatar's initials). Default "Michael Kariuki". */
+    name?: string;
+    /** `driver-cell` / `user-cell`: the avatar photo URL (falls back to empty-teal initials). */
+    avatarSrc?: string;
+    /**
+     * `driver-cell`: show the trailing Swap + Call action buttons under the name.
+     * Default true. Set false for **finished** orders (delivered/cancelled) — a
+     * terminal order's driver can't be swapped or called, so the cell shows just
+     * the name, vertically centered against the avatar.
+     */
+    showDriverActions?: boolean;
+    /**
+     * `driver-cell`: show the **Swap** (change-driver) button specifically.
+     * Default true. Set false once the driver has left the depot with the package
+     * (In Transit / Arrived / Returning): there is no handover point any more, so
+     * a swap would need the order physically recovered first — the recourse there
+     * is Return, not Change Driver. Call stays available regardless.
+     *
+     * Independent of {@link showDriverActions}, which hides the whole action row
+     * for terminal orders.
+     */
+    showSwapDriver?: boolean;
+    /** `driver-cell`: fired when the Swap (change-driver) button is clicked. */
+    onSwapDriver?: () => void;
+    /** `driver-cell`: fired when the Call button is clicked. */
+    onCallDriver?: () => void;
+    /** `driver-cell`: hover tooltip on the Swap (change-driver) button. Default "Change Driver". */
+    swapTooltip?: string;
+    /** `driver-cell`: hover tooltip on the Call button. Default "Call". */
+    callTooltip?: string;
+    /** `user-cell`: the user's email, shown under the name in muted sub-body text. */
+    email?: string;
+    /** `api-cell`: the title (e.g. how the row was created). Default "Auto-created". */
+    apiTitle?: string;
+    /** `api-cell`: the sub-body describing the source. Default "From online store". */
+    apiSubtext?: string;
+    /** `api-cell`: the Featured Icon glyph. Default "Integration". */
+    apiIcon?: IconName;
+    /**
+     * SLA signal rendered **after** the status badge (Table Column spec §2.3). Four
+     * values, one per SLA outcome — the icon and its colour are fixed per value so a
+     * host can't pair a green tick with a delay:
+     *
+     * | Value | Glyph | Colour | Meaning |
+     * |---|---|---|---|
+     * | `warning` | `Warning` | warning | in progress, At Risk (§2.3.1) |
+     * | `error` | `Error` | error | in progress, Delayed (§2.3.1) |
+     * | `success` | `Check-Circle` | success | completed **within** the fulfilment target |
+     * | `failure` | `Cancel-Circle` | error | completed **beyond** the fulfilment target |
+     *
+     * `success` / `failure` were added 2026-08-18: the completed outcome used to live
+     * on the Duration cell's own leading icon, which Figma removed from
+     * `DurationLabel`. It now reads here, beside the Delivered / Cancelled badge —
+     * the same place every in-progress state already showed it.
+     */
+    statusIcon?: 'warning' | 'error' | 'success' | 'failure';
+    /**
+     * Hover tooltip on the SLA icon. Accepts a node, because the designed SLA tips head
+     * the copy with a status `Badge` rather than a text title
+     * (`2032:131435` … `2038:133959`) — the `standard` surface stacks its children at
+     * gap 16 for exactly that.
+     *
+     * Pass a **function** when the copy quotes something that moves; it is resolved at
+     * hover time (see `HoverTip`).
+     */
+    statusIconTooltip?: React.ReactNode | (() => React.ReactNode);
+    /** Accessible name for a node tooltip — what the badge says, in words. */
+    statusIconTooltipLabel?: string;
+    /** Tooltip body width, px. The designed SLA tips are 256. */
+    statusIconTooltipWidth?: number;
+    /** `header`: hover tooltip on the trailing icon (e.g. the Duration header's ⓘ). */
+    trailingIconTooltip?: string;
+    /** `status` SLOT — the status/delivery badge(s). Default a Scheduled badge. */
+    statusContent?: React.ReactNode;
+    /** `actions` SLOT — row-level action buttons. Default a Ghost "More" icon button. */
+    actions?: React.ReactNode;
+    /** `time-stepper` SLOT — the multi-row time editor. Default a Grouped Input + Add Row. */
+    timeStepperContent?: React.ReactNode;
+    /** `manual-order` SLOT — order ID + interactive elements. Default built from `orderId`. */
+    manualOrderContent?: React.ReactNode;
+    /** `automatic-order` SLOT — order ID + interactive elements. Default built from `orderId`. */
+    automaticOrderContent?: React.ReactNode;
+    /** `manual-order` / `automatic-order`: fired when the Copy icon button is clicked. */
+    onCopyOrderId?: () => void;
+    /** `manual-order` / `automatic-order`: hover tooltip on the Copy button. Default "Copy ID". */
+    copyTooltip?: string;
+    /** `manual-order` / `automatic-order`: hover tooltip on the provenance icon
+     *  (Manual-Touch / Integration). Defaults "Created manually" / "Created via integration". */
+    sourceTooltip?: string;
+    /** `manual-order` / `automatic-order`: show the Calendar scheduled-origin icon.
+     *  Default true (the Figma default renders it). */
+    showScheduledIcon?: boolean;
+    /** `manual-order` / `automatic-order`: hover tooltip on the Calendar icon —
+     *  the order's scheduled delivery date/time (e.g. "Scheduled: 09 Jun 2027, 12:30 PM").
+     *  No tooltip when omitted. */
+    scheduledTooltip?: string;
+    /** `manual-order` / `automatic-order`: show the Broadcast auto-broadcast icon.
+     *  Default false (data-driven — only auto-broadcasted orders carry it). */
+    showBroadcastIcon?: boolean;
+    /** `manual-order` / `automatic-order`: hover tooltip on the Broadcast icon. Default "Auto-broadcast". */
+    broadcastTooltip?: string;
+}
+declare const Cell: React.ForwardRefExoticComponent<CellProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Row density. `basic` is a 52px row of simple cells; `complex` is an 80px row
+ * that accommodates rich cells (manual-order, driver, address) — per the Figma
+ * annotation "Basic rows max-height 52px, Complex rows max-height 80px".
+ */
+type DataRowsVariant = 'basic' | 'complex';
+/**
+ * A row's interaction state. Mirrors the Figma `State` axis on Data Rows
+ * `4445:105200`, minus its legacy `Active State` value — which drives the exact
+ * same `Selected` Cell state as `Selected State` does, and is a leftover of the
+ * name this used to carry in code too. `selected` has only ever meant
+ * checkbox-selected; the old `active` name invited reaching for it wanting a
+ * neutral emphasis and silently painting the row as bulk-selected.
+ */
+type DataRowsState = 'idle' | 'hover' | 'pressed' | 'selected' | 'selected-pressed';
+/** One column's cell. Any `Cell` prop, plus an optional fixed column width. */
+interface DataRowCell extends CellProps {
+    /**
+     * Fixed column width (px or any CSS width). Omit → the column flexes to fill
+     * an equal share of the remaining row width (Figma "Fill Container" cells).
+     */
+    width?: number | string;
+    /**
+     * Proportional flex weight (flex-grow). When set (and no `width`), the cell
+     * takes a share of the remaining width proportional to its weight. Ignored if
+     * `width` is set.
+     */
+    flex?: number;
+    /**
+     * Minimum width (floor) for a flexible cell so its content truncates instead of
+     * collapsing (per the Table Column Layout spec's truncation rules). Ignored if
+     * `width` is set. Defaults to 0.
+     */
+    minWidth?: number | string;
+    /**
+     * Maximum width for a bounded-flexible cell (spec §3.3) — caps its growth so
+     * surplus width goes to the primary flexible cells. Ignored if `width` is set.
+     */
+    maxWidth?: number | string;
+    /**
+     * Pin (sticky) this cell to an edge during horizontal scroll (spec §4.3). Set by
+     * `Table` on the anchor columns (Order ID left, Actions right; checkbox pins
+     * left with Order ID) only when the table is in `scrollX` mode. `pinInset` is the
+     * px offset from that edge (the summed width of preceding same-side pinned cells).
+     */
+    pinned?: 'left' | 'right';
+    /** Px offset from the pinned edge — set alongside `pinned` by `Table`. */
+    pinInset?: number;
+}
+interface DataRowsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Row density — `basic` (52px) or `complex` (80px). Default `basic`. */
+    variant?: DataRowsVariant;
+    /** Force a visual state (catalog/showcase) — overrides interaction + `selected`. */
+    state?: DataRowsState;
+    /** Caller-controlled selected (checkbox-selected) row. */
+    selected?: boolean;
+    /**
+     * Draw each cell's state-coloured bottom border (the row divider). Default
+     * true. `Table` turns it off on its last row, where it would double up with
+     * the Pagination footer's own top border — and where the last row is
+     * emphasised, that footer border takes the row's colour instead, so the
+     * bracket still closes without a second line.
+     */
+    showDivider?: boolean;
+    /**
+     * Force the focus ring (Figma Data Rows `State=Focus State`) — for catalogs.
+     *
+     * Deliberately NOT a `DataRowsState` value. Figma models Focus as a State
+     * because a variant axis is the only place it can live there, but the ring is
+     * an OVERLAY: a focused row still shows whatever it actually is underneath —
+     * idle, hover, selected. Folding it into the enum would force it to displace
+     * that. (The Figma variant's cells read `Selected`, which is a leftover of the
+     * `Active State` -> `Focus State` rename; ruled 2026-09-02.)
+     *
+     * In a real table the ring comes from `:focus-visible` on the focusable row,
+     * which `Table` owns. Keyboard only, so a right-clicked row — focused
+     * programmatically — does not get it on top of its pressed fill.
+     */
+    focused?: boolean;
+    /**
+     * Data-driven cells. Each entry is a `Cell` (its `type` chooses the renderer)
+     * plus an optional fixed `width`. Defaults to a representative set for the
+     * `variant`. The row drives every cell's state, so per-cell `state` is ignored.
+     */
+    cells?: DataRowCell[];
+    /**
+     * Escape hatch — raw cell nodes laid out in the row instead of `cells`. When
+     * provided, the row does NOT force a shared state onto them (you own that).
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Data Rows — one row of a LETA data table: a horizontal run of `Cell`s laid
+ * flush (no gaps) so they read as a single, uniformly-coloured row. The row owns
+ * the interaction state (Idle / Hover / Pressed / Active) and pushes it to every
+ * cell, so hovering anywhere highlights the whole row. Columns either take a fixed
+ * `width` (checkbox, status, date, actions) or flex to fill an equal share.
+ *
+ * **When to use:** as the repeating body row inside `Table` (or any list of
+ * tabular records).
+ * **When not to use:** the column header row (that's a row of `Cell type="header"`,
+ * owned by `Table`); non-tabular content blocks → Content Card.
+ */
+declare const DataRows: React.ForwardRefExoticComponent<DataRowsProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Column category from the Table Column Layout spec. Drives the default sizing
+ * mode so the right choice is the default:
+ * - `primary` — the record's main content (Driver, Route, Recipient, Customer).
+ *   **Flexible**: absorbs the remaining width via a `flex` weight (defaults to 1
+ *   if no `flex` is given). Never give a `primary` column a fixed `width`.
+ * - `identifier` — uniquely identifies the record but doesn't benefit from extra
+ *   width (Order ID, Trip ID, Invoice #). **Fixed `width`**, truncates safely.
+ * - `secondary` — predictable supporting context (Depot, Service Type, Region).
+ *   **Fixed `width`**.
+ * - `utility` — small metadata/status (Status, Duration, Created, Priority).
+ *   **Fixed `width`**, only as wide as the content needs.
+ * - `control` — interactions, not information (Checkbox, Overflow, Actions). The
+ *   smallest columns; **fixed `width`**; an actions column carries no header label.
+ *
+ * The golden rule the role enforces: **never make all columns equal width** —
+ * only `primary` columns flex; everything else is fixed.
+ */
+type TableColumnRole = 'primary' | 'identifier' | 'secondary' | 'utility' | 'control';
+/** A column definition — drives one header cell and the matching body column width. */
+interface TableColumn {
+    /** Header label. Omit (or pass `''`) for an action/utility column that should have no header — the header bar stays full-width but the cell is blank. */
+    label?: string;
+    /**
+     * Column category (Table Column Layout spec). Sets the default sizing mode:
+     * `primary` → flexible (flex weight, defaults to 1); all other roles → fixed
+     * `width`. Optional, but recommended — it documents intent and makes "never all
+     * equal width" the default. Explicit `width`/`flex` always win over the role.
+     */
+    role?: TableColumnRole;
+    /**
+     * Horizontal alignment of this column's header label AND every body value in it.
+     * `'right'` for numeric columns (Distance, Duration) per the Cell annotations'
+     * "right-align numerics" rule — figures read down a right edge, so magnitudes
+     * are comparable at a glance. Defaults to left.
+     *
+     * Deliberately a **column** property: aligning only the cells would leave the
+     * header label sitting over the opposite edge of its own numbers.
+     */
+    align?: 'left' | 'right';
+    /** Fixed column width (px or CSS). Omit → the column flexes to fill an equal share. */
+    width?: number | string;
+    /**
+     * Proportional flex weight (flex-grow). When set (and no `width`), the column
+     * flexes to a share of the remaining width proportional to its weight — e.g.
+     * a `flex: 2` column gets twice the slack of a `flex: 1` column. Lets the whole
+     * table scale to any viewport with balanced, content-appropriate proportions
+     * instead of equal-width flex columns. Ignored if `width` is set.
+     *
+     * The percentage split is the source of truth; weights are that ratio expressed
+     * for `flex-grow`, with **Recipient as the 1.00 base** (spec §3.2): Route `1.48`
+     * (40%), Driver `1.22` (33%), Recipient `1.00` (27%). Weights are relative, so
+     * when a flexible column is added or removed the rest redistribute
+     * proportionally on their own (drop Driver → Route/Recipient settle at 60/40).
+     */
+    flex?: number;
+    /**
+     * Minimum width (px or CSS) — the column's **floor** (spec §3.4): the smallest
+     * width that avoids truncating its protected content. Applies to flexible and
+     * bounded-flexible columns (ignored when a plain fixed `width` is set); on shrink
+     * the column freezes here and the remaining shrink redistributes to columns still
+     * above their floors. Base a name floor on a representative (p90) length, not the
+     * longest possible. Defaults to 0.
+     */
+    minWidth?: number | string;
+    /**
+     * Maximum width (px or CSS) for a **bounded-flexible** column (spec §3.3) — a
+     * Primary Identifier (e.g. Order ID) promoted to flex within a `minWidth`–
+     * `maxWidth` band with a low `flex` weight: it sits at its min on constrained
+     * screens, grows slowly once every primary floor is satisfied, then stops at its
+     * max and cedes further width to the primary flexible columns. Never use this for
+     * unbounded growth. Ignored when a plain fixed `width` is set.
+     */
+    maxWidth?: number | string;
+    /**
+     * Screen-reader-only accessible name for a column whose visible `label` is empty
+     * (spec §8) — the Control/Actions and checkbox columns carry no *visible* header
+     * (icons already read as interactive), but the header cell still needs an
+     * accessible name (e.g. "Actions") so the column is never announced as empty.
+     */
+    accessibleName?: string;
+    /**
+     * Pin (sticky) this column to an edge while the table scrolls horizontally
+     * (spec §4.3) — the **anchor** columns stay visible so every row is identifiable
+     * as the middle scrolls. `'left'` for the leading identifier (Order ID; the
+     * checkbox pins with it), `'right'` for the trailing Actions column. Only takes
+     * effect when `scrollX` is on; a no-op otherwise (flex-fill). Pin offsets are
+     * computed from the widths of preceding same-side pinned columns.
+     */
+    pinned?: 'left' | 'right';
+    /** Render the header's leading info icon. */
+    showLeadingIcon?: boolean;
+    /** The header leading icon (outlined). Default `Info`. */
+    leadingIcon?: IconName;
+    /** Render the header's trailing (sort) icon. */
+    showTrailingIcon?: boolean;
+    /** The header trailing icon (outlined). Default `Info`. */
+    trailingIcon?: IconName;
+    /** Hover tooltip on the trailing icon (e.g. the Duration header's ⓘ). */
+    trailingIconTooltip?: string;
+}
+/** A body row — its cells line up with `columns` by index (excluding the checkbox column). */
+interface TableRow {
+    /** One cell per column. Each cell's `width` defaults to the matching column's width. */
+    cells: DataRowCell[];
+    /** Selected (Active) row — highlights the row and checks its checkbox. */
+    selected?: boolean;
+    /**
+     * Stable row identity (e.g. an order id). Rows are otherwise positional, so
+     * anything that has to name a *particular* row across re-renders and page
+     * changes needs this — currently {@link TableProps.highlightedIds}.
+     */
+    id?: string;
+}
+interface TableProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'rows'> {
+    /** Column definitions (drive the header + shared column widths). */
+    columns?: TableColumn[];
+    /** Body rows. */
+    rows?: TableRow[];
+    /** Row density for every body row. Default `basic` (52px); `complex` is 80px. */
+    rowVariant?: DataRowsVariant;
+    /** Prepend a 52px checkbox column (header-checkbox + per-row default-checkbox). Default true. */
+    selectable?: boolean;
+    /**
+     * Selection is managed internally: clicking a row's checkbox toggles it;
+     * clicking the header checkbox selects/clears all rows; the header shows the
+     * indeterminate glyph when only some rows are selected. Seed the initial
+     * selection via each row's `selected` flag. `onSelectionChange` reports the
+     * selected row indices.
+     */
+    onSelectionChange?: (selectedIndices: number[]) => void;
+    /**
+     * Fired when a body row is clicked (OM §3.1 — a dynamic table's row is a
+     * target, typically opening the record's detail view). Clicks that originate
+     * from interactive elements inside the row — the selection checkbox, inline
+     * cell buttons/links/inputs — are ignored so they keep acting independently
+     * (§3.1: "the checkbox column is the only selection target"; inline buttons
+     * stop propagation). Rows get `cursor: pointer` while this is set.
+     */
+    onRowClick?: (rowIndex: number) => void;
+    /**
+     * Fired when a body row is **right-clicked** (or two-finger-tapped on a
+     * trackpad) — the shortcut to that row's actions menu, opened at the pointer.
+     *
+     * Receives the viewport coordinates of the click so the host can anchor its
+     * menu there rather than at the row's ⋯ button. Return **true** to indicate a
+     * menu was opened; the browser's own context menu is then suppressed. Return
+     * **false** (or nothing) to let the native menu through — the right behaviour
+     * for a row with no available actions, where intercepting would leave the user
+     * with an empty popover and no way to copy text or inspect the page.
+     *
+     * Right-click deliberately **ignores the checkbox selection**: it always means
+     * "act on this row", the same as its ⋯ button, so the same gesture never does
+     * two different things depending on state the user can't see at the pointer.
+     */
+    onRowContextMenu?: (rowIndex: number, position: {
+        x: number;
+        y: number;
+    }) => boolean | void;
+    /**
+     * Whether the host's row context menu is currently open. The target row drops
+     * its highlight as soon as this goes false.
+     *
+     * The table cannot detect the dismissal itself: the menu is the host's, in the
+     * host's own portal. A row left highlighted after its menu closed would read as
+     * a selection the user has no way to clear.
+     *
+     * Deliberately a boolean rather than a "closed" counter — a counter changes on
+     * OPEN as well, which cleared the highlight in the same commit that set it.
+     */
+    contextMenuOpen?: boolean;
+    /** Render the Pagination footer. Default true. */
+    showPagination?: boolean;
+    /** Show the Pagination page-number cluster. Default true; `false` → count + rows-per-page only. */
+    showPages?: boolean;
+    /**
+     * Horizontal-scroll mode (spec §4.3). Keep columns at their natural widths and
+     * let the table scroll **horizontally** (and vertically) instead of shrinking
+     * cells below their floors. The header sticks to the top during vertical
+     * scroll and scrolls in sync with the body horizontally; pinned anchor columns
+     * (Order ID left / Actions right) engage.
+     *
+     * - `'auto'` (recommended) — measures: scroll activates **only while the
+     *   table's minimum width** (checkbox + fixed columns + flexible floors)
+     *   **exceeds the container** — the spec's rule. Both §4.3 triggers fall out
+     *   of the same check: narrowing the window, or switching on an optional
+     *   column that no longer fits. On a sparse table with surplus space, an
+     *   optional column simply joins the flex-fill — no scroll.
+     * - `true` — force scroll mode on unconditionally.
+     * - `false` (default) — never scroll; columns flex to fill the container.
+     */
+    scrollX?: boolean | 'auto';
+    /** Current page (1-based). */
+    page?: number;
+    /** Total pages. */
+    pageCount?: number;
+    /** Fired with the next page. */
+    onPageChange?: (page: number) => void;
+    /** Pagination count summary. Default "Showing 10 of 180". */
+    countLabel?: string;
+    /** Rows-per-page value shown in the selector. Default 10. */
+    rowsPerPage?: number;
+    /** Fired when the rows-per-page selector is activated. */
+    onRowsPerPageClick?: () => void;
+    /**
+     * Constrain the body height — the body scrolls under a sticky header/footer.
+     * Mirrors Figma's fixed Scroll Frame. Omit → the body sizes to its rows.
+     */
+    maxBodyHeight?: number | string;
+    /**
+     * Fill the available height of a flex-column parent (`flex: 1`) instead of
+     * sizing to the rows: the body scrolls internally while the header and the
+     * Pagination footer stay pinned. Use inside a Page / Table Container that owns
+     * a fixed viewport so the pagination is always visible without page scroll.
+     */
+    fillHeight?: boolean;
+    /**
+     * Rows to call attention to, by {@link TableRow.id} — "here are the rows you
+     * just acted on". Each is ringed in the design system's focus treatment for a
+     * couple of seconds and then released, and the first one is scrolled into view.
+     *
+     * **One ring per row, not one around the block.** Affected rows are routinely
+     * non-contiguous — a bulk action lands them scattered down the sorted page — so
+     * a single enclosing ring would claim the untouched rows sitting between them.
+     *
+     * Deliberately separate from {@link TableRow.selected}: selection means "rows I
+     * am about to act on" and owns the checkboxes, while this means "rows that just
+     * changed". Routing attention through `selected` would tick checkboxes the user
+     * never ticked and fight the internal index-keyed selection sync.
+     *
+     * Pass a **new array identity** to replay the highlight (e.g. after a second
+     * bulk action on the same rows); passing the same ids again is a no-op.
+     */
+    highlightedIds?: string[];
+    /** Escape hatch — raw body content (e.g. custom `DataRows`) instead of `rows`. */
+    children?: React.ReactNode;
+}
+/**
+ * Table — a full LETA data table: a bordered, rounded card stacking a column
+ * header (`Cell type="header"`), a body of `DataRows`, and a `Pagination` footer.
+ * Columns are defined once (`columns`) and shared by the header and every row so
+ * they always align; set `selectable` for the leading checkbox column. The body
+ * can scroll under a sticky header via `maxBodyHeight`. Hairline dividers separate
+ * the header and every row, matching the design.
+ *
+ * **Width:** the table fills its container (`width: 100%`) — it expands to the
+ * viewport/content frame it sits in; the Figma frame's fixed width is just the
+ * design canvas, not a constraint. **Selection is internal** — the header
+ * checkbox selects/clears all rows and shows the indeterminate glyph for a
+ * partial selection; per-row checkboxes toggle individually.
+ *
+ * **When to use:** displaying a paged set of tabular records.
+ * **When not to use:** a single record's fields → a form / Content Card; the
+ * surrounding toolbar + empty-state shell → Table Container.
+ */
+declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Instance A — Order Table (dispatched & finished: Assigned, At Depot, In Transit,
+ * Arrived, Delivered, Returned, Cancelled). The full-column shape — any state where
+ * a driver and a trip exist. Actions is 64 (overflow only). Duration carries the SLA.
+ */
+declare const ORDER_TABLE_COLUMNS: TableColumn[];
+/**
+ * Instance A — Order Table, **Delivered/Cancelled (Finished) view**. Same column
+ * *order* as {@link ORDER_TABLE_COLUMNS}, with two terminal-state differences:
+ * - Actions is a single labelled "View Logs" button, no ⋯ menu → 126px (§2.1).
+ * - **No Checkbox** (ruled 2026-07-09): terminal orders carry no bulk actions, so
+ *   like the All view they omit the selection target. **Consume with
+ *   `<Table selectable={false}>`** — passing `selectable` would re-add the 52px
+ *   checkbox column the finished shape must not have.
+ */
+declare const ORDER_TABLE_COLUMNS_FINISHED: TableColumn[];
+/**
+ * Instance B — Unassigned Orders, **Pending view**. No driver and no trip yet, so
+ * both columns are removed; Route/Recipient re-weight to 60/40 automatically.
+ * Actions is 182 (the Dispatch split button + overflow — §2.1). No Batch ID.
+ */
+declare const UNASSIGNED_ORDER_COLUMNS: TableColumn[];
+/**
+ * Instance B — Unassigned Orders, **Broadcasted view**. Pending set **plus Batch ID**
+ * (90px, Primary Identifier) after Order ID — broadcasted orders belong to a batch.
+ */
+declare const BROADCASTED_ORDER_COLUMNS: TableColumn[];
+/**
+ * Instance B — Unassigned Orders, **Scheduled view**. Pending set **minus Duration**
+ * (no SLA until an order enters the active queue) and no Batch ID.
+ */
+declare const SCHEDULED_ORDER_COLUMNS: TableColumn[];
+/**
+ * Instance C — All (search / triage) view. The dispatcher searches across mixed
+ * statuses; the primary interaction is search + the Status column. No Checkbox,
+ * Driver, Trip, Batch ID, or Actions (every row opens the drawer). Order ID is the
+ * only pinned anchor on scroll. Duration shows "—" for scheduled rows (caller-set).
+ * Use with `<Table selectable={false}>`.
+ */
+declare const ALL_ORDER_COLUMNS: TableColumn[];
+/**
+ * Optional `Last Updated` column (utility, 120px) — hidden by default; splice it in
+ * **after `Created`** (before `Status`) when the user enables it via the column
+ * control. Raises the table's minimum width, which is what triggers horizontal
+ * scroll (§4.3) on a constrained viewport.
+ */
+declare const LAST_UPDATED_COLUMN: TableColumn;
+/**
+ * Optional `Created By` column — hidden by default; splice it in **after
+ * `Last Updated`** (before `Status`) when the user enables it via the column
+ * control. Low-weight flexible Primary column (§3.3): flex 0.5, 200px floor, no
+ * cap — grows slowly on wide viewports without competing with Route/Driver/
+ * Recipient for surplus width. Renders the `user-cell` Cell type (avatar + name
+ * + email) — the caller supplies `name`/`email`/`avatarSrc` per row.
+ */
+declare const CREATED_BY_COLUMN: TableColumn;
+
+interface BulkActionsToolbarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Leading selection-count label. Default "10 selected". */
+    selectionLabel?: string;
+    /** Fired when the selection button is clicked (typically clears the selection). */
+    onSelectionClick?: () => void;
+    /**
+     * Structured weight/volume metadata shown between the selection and actions.
+     * Each item renders its `value` in SemiBold and `unit` in Regular, separated
+     * by a Regular " · ". Omit for the common case (no summary). Used only for
+     * weight/size metadata — never for displaying a selection count.
+     */
+    summaryItems?: Array<{
+        value: string;
+        unit: string;
+    }>;
+    /**
+     * The action buttons (Center group). Default = two Ghost "Action" + one
+     * Ghost-Error "Action" (all leading ↗). Pass your own row-level action Buttons.
+     *
+     * **Use outlined icons by default.** When composing actions, pass `iconOutlined`
+     * to each `Button` so its glyph renders as the outlined library variant (the
+     * filled variant is only a fallback when no outline exists, e.g. `Proceed`).
+     * This keeps the toolbar visually correct across every screen it is dropped into.
+     */
+    actions?: React.ReactNode;
+    /** Show the overflow "More" (⋯) button after the actions. Default true. */
+    showOverflow?: boolean;
+    /** Fired when the overflow (More) button is clicked. */
+    onOverflowClick?: () => void;
+    /** Fired when the close (✕) button is clicked. */
+    onClose?: () => void;
+    /**
+     * Apply the real placement — `position: fixed`, centered, 80px from the
+     * viewport bottom (per the Figma annotation). Default false (consumer owns
+     * placement, like Toast).
+     */
+    fixed?: boolean;
+}
+/**
+ * Bulk Actions Toolbar — the floating action bar that appears when rows are
+ * selected in a table. A centered white pill grouping the selection control (+
+ * optional summary), the available bulk actions (with a "More" overflow), and a
+ * close control, separated by vertical dividers. Per the design it is fixed to
+ * the viewport 80px from the bottom, centered, capped at 800px, in a single
+ * non-wrapping row — pass `fixed` to apply that placement, or place it yourself.
+ *
+ * The selection control is a Ghost button with a **trailing `Chevron-Down`**
+ * ("10 selected ⌄") — a dropdown affordance for selection-scope options — not a
+ * leading checkbox.
+ *
+ * **Icon convention — outlined by default.** Every icon-bearing Button in this
+ * toolbar (the default actions, and any `actions` you supply) should pass
+ * `iconOutlined` so glyphs render as the outlined library variant; the filled
+ * variant is only a fallback for glyphs with no outline (e.g. `Proceed`, `More`,
+ * `Cancel`). This guarantees the toolbar renders correctly on every screen.
+ *
+ * **When to use:** acting on a multi-row selection in a `Table`.
+ * **When not to use:** a single row's actions (the row's `actions` cell); page-level
+ * primary actions (Table Data Control CTAs); transient feedback (Toast).
+ */
+declare const BulkActionsToolbar: React.ForwardRefExoticComponent<BulkActionsToolbarProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * - `search-create` — search + filter buttons (Created / Filter / Sort By) on the
+ *   left, primary CTAs (Add Order / Import-Export) on the right.
+ * - `search-column` — the same search + filters, with a data count + an
+ *   Auto-refresh switch + Columns control on the right.
+ * - `filters-column` — a Top Filter Section on the left, data count +
+ *   Auto-refresh switch + Columns on the right.
+ */
+type TableDataControlVariant = 'search-create' | 'search-column' | 'filters-column';
+interface TableDataControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Which toolbar layout to render. Default `search-create`. */
+    variant?: TableDataControlVariant;
+    /** Data count shown in the column-control group (e.g. "10 Orders"). Default "10 Orders". */
+    dataCount?: string;
+    /** Show the data count (column-control variants). Default true. */
+    showDataCount?: boolean;
+    /**
+     * Show the right-hand column-control group (data count + Columns button) on the
+     * `search-column` / `filters-column` variants. Mirrors the Figma
+     * `Show Column Control & Count` property. Default true; set `false` for a
+     * search/filter-only toolbar (e.g. the Table Section's table).
+     */
+    showColumnControl?: boolean;
+    /**
+     * Number of active filter rules currently applied. When > 0, a Coral Red (Alt)
+     * count badge is overlaid at the top-right corner of the Filter icon button.
+     * Filter and Sort are always icon-only buttons in both base and active states.
+     * Mirrors the Figma `search-create` / `search-column` variants and their
+     * "Active Filter" counterparts (Figma nodes `10697:60514` / `10697:60683`).
+     * Default 0 (no active filters).
+     */
+    filterCount?: number;
+    /** Left section for the search variants — overrides the default search + filter buttons. */
+    searchSection?: React.ReactNode;
+    /** Left section for `filters-column` — overrides the default Top Filter Section. */
+    filters?: React.ReactNode;
+    /** Right section for `search-create` — overrides the default Add Order + Import/Export. */
+    ctas?: React.ReactNode;
+    /**
+     * Show the Primary "Add Order" button in the default `search-create` CTAs.
+     * Default true; set `false` for the Empty State toolbar, where the primary
+     * Add Order CTA lives beside the illustration instead (per Figma
+     * `4368:154614`). Ignored when `ctas` is overridden.
+     */
+    showAddOrder?: boolean;
+    /** Right column-control content (search-column / filters-column) — overrides the default Columns button. */
+    columnControl?: React.ReactNode;
+    /** Search field placeholder. Default "Search here...". */
+    searchPlaceholder?: string;
+    /** Controlled search field value. Omit for an uncontrolled field. */
+    searchValue?: string;
+    /** Fired as the user types in the search field. */
+    onSearchChange?: (value: string) => void;
+    /** Fired when the search field's clear (×) button is clicked. */
+    onSearchClear?: () => void;
+    /** Label for the Created date-filter button. Default "Created: Today". */
+    createdLabel?: string;
+    onCreatedClick?: () => void;
+    onFilterClick?: () => void;
+    onSortClick?: () => void;
+    onAddOrderClick?: () => void;
+    onImportExportClick?: () => void;
+    onColumnsClick?: () => void;
+    /**
+     * Controlled state of the **Auto-refresh** switch (column-control variants).
+     * When on, orders auto-refresh into the table — replaces the old manual
+     * Refresh button (Figma `7575:36637`). Omit for uncontrolled.
+     */
+    autoRefresh?: boolean;
+    /** Fired with the next value when the Auto-refresh switch is toggled. */
+    onAutoRefreshChange?: (checked: boolean) => void;
+}
+/**
+ * Table Data Control — the toolbar that sits above a data table to search,
+ * filter, sort, and act on its rows. Three layouts (`variant`) cover the common
+ * table headers: search + create, search + column control, and top-level filters
+ * + column control. The left/right sections are slot props with Figma-faithful
+ * defaults (reusing Search Input, Button, and Top Filter Section).
+ *
+ * **When to use:** as the controls row of a `Table Container`.
+ * **When not to use:** acting on a multi-row selection (Bulk Actions Toolbar);
+ * in-table pagination (the Table's Pagination footer).
+ */
+declare const TableDataControl: React.ForwardRefExoticComponent<TableDataControlProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * `default` shows the populated table; `empty` swaps the table for an Empty
+ * State (no data yet); `no-results` keeps both toolbars but swaps the table for
+ * the No Matching Results Empty State (an active search/filter matched nothing).
+ */
+type TableContainerVariant = 'default' | 'empty' | 'no-results';
+interface TableContainerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Which state to render. Default `default`. */
+    variant?: TableContainerVariant;
+    /**
+     * The control row(s) above the table. Default mirrors Figma: `default` →
+     * Search + Create then Top Filters + Column Control; `empty` → Search + Create only.
+     */
+    controls?: React.ReactNode;
+    /** The table region (`default` variant). Default a full `Table`. */
+    table?: React.ReactNode;
+    /**
+     * The empty region (`empty` variant). Default an Empty State (No Orders + Add
+     * Order CTA). **Centred automatically** — the container wraps this slot in a
+     * centred flex box, so pass the bare Empty State, not your own layout.
+     */
+    empty?: React.ReactNode;
+    /**
+     * The no-results region (`no-results` variant). Default the No Matching
+     * Results Empty State ("Try adjusting your filters and date.", per Doc 3
+     * §3/§9's copy standard; Figma `1524:40283` Property 1=No Results).
+     * **Centred automatically** (see `empty`) — pass the bare Empty State.
+     */
+    noResults?: React.ReactNode;
+    /** Fired by the default Empty State's Add Order CTA. */
+    onAddOrder?: () => void;
+    /**
+     * Fill the available height of a flex-column parent (`flex: 1`): the table
+     * region grows to the viewport and scrolls internally while its Pagination
+     * stays pinned. Used by the Page so the table pagination is always visible
+     * without page scroll. Forwarded to the default `Table`.
+     */
+    fillHeight?: boolean;
+    /**
+     * Number of active filter rules applied to the table. Forwarded to the default
+     * Search + Create `TableDataControl` — when > 0 the Filter button condenses to
+     * icon-only with a Coral Red (Alt) count badge. Ignored when `controls` is
+     * overridden. Default 0.
+     */
+    filterCount?: number;
+}
+/**
+ * Table Container — the full data-table section: a vertical stack of the control
+ * toolbar(s) and either the populated `Table`, a centered Empty State (no data
+ * yet), or the No Matching Results state (active search/filters matched
+ * nothing — both toolbars stay). Composes Table Data Control, Table, and Empty
+ * State; all regions are slot props with Figma-faithful defaults.
+ *
+ * **When to use:** the top-level shell for a table view (toolbar + table + empty state).
+ * **When not to use:** just the grid (Table) or just the toolbar (Table Data Control).
+ */
+declare const TableContainer: React.ForwardRefExoticComponent<TableContainerProps & React.RefAttributes<HTMLDivElement>>;
+
+/** One side-tab entry. */
+interface SidetabItem {
+    /** Tab label. Default "Tab Name". */
+    label?: string;
+    /** Optional leading icon. */
+    leadingIcon?: IconName;
+}
+interface SidetabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+    /** The tabs, top to bottom. Default five "Tab Name" items. */
+    tabs?: SidetabItem[];
+    /** Index of the active tab. Default 0. */
+    value?: number;
+    /** Fired with the index of the clicked tab. */
+    onChange?: (index: number) => void;
+    /** Escape hatch — raw Body content instead of the data-driven `tabs`. */
+    children?: React.ReactNode;
+}
+/**
+ * Sidetab — secondary, in-module navigation: a fixed-width column of side-tab
+ * menu options that switch the visible section without leaving the current
+ * workflow. Data-driven (`tabs` + `value`/`onChange`), composing the side-tab
+ * `DesktopMenuOptions`.
+ *
+ * **When to use:** navigating between sections of one module/page.
+ * **When not to use:** top-level product navigation (Side Bar); page-level tabs
+ * across a content area (Page Tabs Control).
+ */
+declare const Sidetab: React.ForwardRefExoticComponent<SidetabProps & React.RefAttributes<HTMLDivElement>>;
+
+/** `expanded` (240px, labelled nav) or `collapsed` (72px, icon-only nav). */
+type SideBarVariant = 'expanded' | 'collapsed';
+/** One navigation destination. */
+interface SideBarItem {
+    /** Item label (shown when expanded). Default "Module 1". */
+    label?: string;
+    /** Leading nav icon. Default the placeholder Question glyph (as in Figma). */
+    leadingIcon?: IconName;
+    /** The user's current location. */
+    active?: boolean;
+    /** Optional trailing content when expanded (e.g. an external-link icon or badge). */
+    trailing?: React.ReactNode;
+}
+/** A group of nav items, optionally headed by a section label. Groups are divider-separated. */
+interface SideBarGroup {
+    /** Section header label (e.g. "Management"). Omit for an unlabelled group. */
+    label?: string;
+    items: SideBarItem[];
+}
+interface SideBarProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
+    /** Expanded (240px) or collapsed (72px). Default `expanded`. */
+    variant?: SideBarVariant;
+    /** Main nav groups (divider-separated). */
+    groups?: SideBarGroup[];
+    /** Footer nav items (Help Center, etc.). */
+    footerItems?: SideBarItem[];
+    /** Footer version string. Default "Leta Technologies v.3.1.5". */
+    version?: string;
+    /** Show the Global Search field (expanded) / search icon (collapsed). Default true. */
+    showSearch?: boolean;
+    /** Search placeholder. Default "Global Search". */
+    searchPlaceholder?: string;
+    /** Fired by the header collapse toggle (expanded) / the Collapsed Sidebar Logo (collapsed). */
+    onToggleCollapse?: () => void;
+    /** Fired when a nav item is clicked: (groupIndex, itemIndex). Footer items use groupIndex -1. */
+    onItemClick?: (groupIndex: number, itemIndex: number) => void;
+}
+/**
+ * Side Bar — the product's primary navigation: persistent access to top-level
+ * destinations, in an expanded (labelled, 240px) or collapsed (icon-only, 72px)
+ * column. Header (logo + collapse toggle), Global Search, divider-separated nav
+ * groups, and a footer (utility links + version). Composes Leta Logo / Collapsed
+ * Sidebar Logo, Search Input, Button, and the sidebar Desktop Menu Options.
+ *
+ * **When to use:** top-level navigation across the application.
+ * **When not to use:** in-module section nav (Sidetab); page tabs (Page Tabs Control).
+ */
+declare const SideBar: React.ForwardRefExoticComponent<SideBarProps & React.RefAttributes<HTMLElement>>;
+
+/** `default` (no unread indicator) or `active` (notification dot on the bell). */
+type TopBarVariant = 'default' | 'active';
+interface TopBarProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
+    /** Default (no unread dot) or active (unread-notification dot). Default `default`. */
+    variant?: TopBarVariant;
+    /** Left wayfinding content. Default a global-admin Breadcrumbs. */
+    left?: React.ReactNode;
+    /** The signed-in user (drives the User-Menu). Default { name: "Alex Smith" }. */
+    user?: {
+        name: string;
+        avatarSrc?: string;
+        tone?: AvatarTone;
+    };
+    /** Fired when the notification bell is clicked. */
+    onNotificationsClick?: () => void;
+    /** Fired when the User-Menu is clicked. */
+    onUserMenuClick?: () => void;
+}
+/**
+ * Top Bar — the persistent application header: contextual wayfinding
+ * (breadcrumbs) on the left, and global controls — notifications and the
+ * User-Menu — on the right. The `active` variant shows an unread-notification dot
+ * on the bell. Composes Breadcrumbs, Button, and User-Menu.
+ *
+ * **Width:** the bar fills its container (`width: 100%`) — in a real app it
+ * expands to the viewport/content frame it sits in. The Figma frame's fixed
+ * 1200px is just the design canvas, not a constraint.
+ *
+ * **When to use:** the top-level app chrome above the page content.
+ * **When not to use:** in-page tabs (Page Tabs Control); the table toolbar
+ * (Table Data Control); the side navigation (Side Bar).
+ */
+declare const TopBar: React.ForwardRefExoticComponent<TopBarProps & React.RefAttributes<HTMLElement>>;
+
+interface ListItemData {
+    /** Primary label — maps to CP `text`. */
+    label: string;
+    /** Secondary value / description — maps to CP `subtext`. */
+    value?: string;
+    /** Show the leading visual-anchor (help icon). Default true, per Figma. */
+    showAnchor?: boolean;
+}
+interface ListGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Group sub-header title (Figma `group-header` CP). Default "Group Name". */
+    title?: string;
+    /** Group sub-header description. Default "Enter description here". */
+    description?: string;
+    /**
+     * List items rendered in a 2-column grid (gap 16 horizontal, gap 20 vertical).
+     * Each item is a `ContentPrimitives type="vertical-list-row"`. Default 6 items.
+     */
+    items?: ListItemData[];
+    /** Replace the item grid entirely. */
+    children?: React.ReactNode;
+}
+/**
+ * List Group — one titled cluster within a {@link ListSection}: a `group-header`
+ * Content Primitive over a 2-column grid of `vertical-list-row` Content Primitives.
+ */
+declare const ListGroup: React.ForwardRefExoticComponent<ListGroupProps & React.RefAttributes<HTMLDivElement>>;
+interface ListSectionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Section header title. Default "Title". */
+    title?: string;
+    /** Section header description. Default "Enter description here". */
+    subtext?: string;
+    /**
+     * The list body — the Figma "Content" SLOT (vertical 24px-gap stack). Provide
+     * `<ListGroup>`s; a dashed demarcator is auto-inserted between adjacent children.
+     * Defaults to two List Groups, mirroring Figma.
+     */
+    children?: React.ReactNode;
+    /** Start expanded. Default true. */
+    defaultOpen?: boolean;
+}
+/**
+ * List Section — a collapsible, titled read-only list organism (Figma `217:6694`).
+ * A white card (border, `--rounding-xl`, 20px padding) with a section header
+ * (title + description + collapse chevron) over the "Content" SLOT: a vertical
+ * stack of {@link ListGroup}s separated by dashed demarcators.
+ *
+ * Composes `ContentPrimitives` (section-heading, group-header, vertical-list-row).
+ *
+ * **When to use:** a grouped, read-only key-value information panel on a page.
+ * **When not to use:** editable fields (`InputSection`), tabular data (`TableSection`).
+ */
+declare const ListSection: React.ForwardRefExoticComponent<ListSectionProps & React.RefAttributes<HTMLDivElement>>;
+
+interface TableSectionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Section header title. Default "Title". */
+    title?: string;
+    /** Section header description. Default "Enter description here". */
+    subtext?: string;
+    /**
+     * The table body — the Figma "Container" SLOT, a `Table-Container` instance.
+     * Defaults to a `<TableContainer>` with a search/filter toolbar. Pass your own
+     * `<TableContainer>` with real data, or any other content.
+     */
+    children?: React.ReactNode;
+    /** Start expanded. Default true. */
+    defaultOpen?: boolean;
+    /**
+     * Number of active filter rules. Forwarded to the default `TableContainer`'s
+     * `TableDataControl`. Ignored when `children` is overridden. Default 0.
+     */
+    filterCount?: number;
+}
+/**
+ * Table Section — a collapsible, titled table organism (Figma `4818:152180`,
+ * variants **Open** / **Closed**). An edge-to-edge section (no card chrome) with a
+ * Section-Heading Content Primitive (title + description + collapse chevron) over
+ * the "Container" SLOT — a **`Table-Container` instance** (toolbar + table). No
+ * group sub-header (the Table Container owns its own structure).
+ *
+ * Composes `ContentPrimitives` (section-heading) + `TableContainer`.
+ *
+ * **When to use:** a titled, collapsible table on a forms/lists-&-sections page.
+ * **When not to use:** a standalone table without a section context (`TableContainer`).
+ */
+declare const TableSection: React.ForwardRefExoticComponent<TableSectionProps & React.RefAttributes<HTMLDivElement>>;
+
+type AlertDialogVariant = 'basic' | 'warning';
+interface AlertDialogProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** `basic` (no header icon) or `warning` (leading warning icon in the header). Default `basic`. */
+    variant?: AlertDialogVariant;
+    /** Modal title. Default "Title". */
+    title?: string;
+    /** Body copy (Body/L/Regular). Ignored when `children` is provided. */
+    message?: string;
+    /** Body override — replaces the default message text. */
+    children?: React.ReactNode;
+    /** Optional leading content revealed above the message (Figma's hidden in-slot Notification Banner). */
+    banner?: React.ReactNode;
+    /**
+     * Footer leading slot — content pinned far left, opposite the actions.
+     *
+     * Its one use so far is a **"Don't show this again" checkbox** (Figma
+     * `1892:370929`, Change Driver): an opt-out belongs beside the actions it
+     * silences, but it is not itself an action, so it sits apart rather than joining
+     * the Close / Confirm pair. Switches the footer to `tertiary-action`, which is
+     * the variant that has a leading region.
+     */
+    footerLeading?: React.ReactNode;
+    /** Cancel/dismiss action label. Default "Close". */
+    cancelLabel?: string;
+    /** Confirm action label. Default "Confirm". */
+    confirmLabel?: string;
+    /**
+     * Style the confirm button as destructive (`Button variant="destructive"`,
+     * red) instead of the default primary. Doc 3 §5: "primary styled to the
+     * action's nature — destructive red for Cancel." Default false.
+     */
+    destructive?: boolean;
+    /** Cancel button handler (also the default for the header close). */
+    onCancel?: () => void;
+    /** Confirm button handler. */
+    onConfirm?: () => void;
+    /** Header close-button handler. Falls back to `onCancel`. */
+    onClose?: () => void;
+}
+/**
+ * Alert Dialog (`1106:2868`) — the smallest modal template: a confirmation /
+ * destructive-action prompt. 480×256, composing `ModalHeaders` (default) + a
+ * body region (Body/L/Regular message) + `FooterFrame` (Close / Confirm).
+ *
+ * - **basic** — title + message.
+ * - **warning** — adds a leading warning icon in the header.
+ *
+ * **When to use:** confirm a discrete, often destructive action.
+ * **When NOT to use:** multi-field forms or content-heavy flows (use Modal
+ * Dialog / Large Modal).
+ */
+declare const AlertDialog: React.ForwardRefExoticComponent<AlertDialogProps & React.RefAttributes<HTMLDivElement>>;
+
+type ModalDialogVariant = 'comment' | 'form' | 'signature' | 'image' | 'multi-choice';
+interface ModalDialogProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Which single-purpose body. Default `comment`. */
+    variant?: ModalDialogVariant;
+    /** Modal title. Default "Title". */
+    title?: string;
+    /** Body override — replaces the variant's default body content. */
+    children?: React.ReactNode;
+    /** `image` variant — the image source. Defaults to the Figma sample delivery photo. */
+    imageSrc?: string;
+    /** `signature` variant — a captured-signature image source. Defaults to the Figma sample signature. */
+    signatureSrc?: string;
+    /** Cancel/dismiss label. Default "Close". */
+    cancelLabel?: string;
+    /**
+     * Render the confirm button. Default true. Only applies to the Close/Confirm
+     * footer (`comment` / `form` / `multi-choice`, or `image`/`signature` with
+     * `showDownload={false}`) — the default `image`/`signature` footer is the
+     * single "Download Image" action and ignores this prop.
+     */
+    showConfirm?: boolean;
+    /** Confirm label. Default "Confirm". */
+    confirmLabel?: string;
+    /**
+     * Style the confirm button as destructive red (`Button variant="destructive"`)
+     * instead of primary — Doc 3 §5: "primary styled to the action's nature".
+     * Default false.
+     */
+    destructive?: boolean;
+    /**
+     * Override the confirm button's variant. Defaults to `primary` (or
+     * `destructive` when {@link ModalDialogProps.destructive} is set).
+     *
+     * Pass `'secondary'` when the dialog's two actions are genuinely equal-weight
+     * side-exits rather than a path and its escape — e.g. Affected Depots, where
+     * "Close" and "Filter Orders" are two different ways to leave, and styling one
+     * as primary would recommend it.
+     */
+    confirmVariant?: 'primary' | 'secondary' | 'destructive';
+    /** Disable the confirm button (e.g. until a required selection is made). Default false. */
+    confirmDisabled?: boolean;
+    /** Optional leading icon on the confirm button (outlined), e.g. the Cancel Order trash. */
+    confirmIconLeft?: IconName;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    /** Header close handler. Falls back to `onCancel`. */
+    onClose?: () => void;
+    /**
+     * `image` / `signature` variants only — show the footer's "Download Image"
+     * action. Defaults to `true` for these two variants (matches Figma) and is
+     * ignored elsewhere. Set `false` to fall back to the standard Close (+
+     * Confirm) footer instead — e.g. a non-proof use of these variants that
+     * still needs a dismiss/confirm pair.
+     */
+    showDownload?: boolean;
+    /** Saved filename for the download. Defaults to `signature.png` / `proof-of-delivery.jpg`. */
+    downloadFileName?: string;
+    /**
+     * Override the download action entirely — e.g. to fetch the full-resolution
+     * file from a different endpoint than the thumbnail shown in the modal, or
+     * to log analytics. Without it, the default behavior downloads `imageSrc` /
+     * `signatureSrc` directly via `downloadFile`.
+     */
+    onDownload?: () => void;
+    /**
+     * Fixed body height override (px) — replaces the variant's default so a
+     * children-composed body can match its wireframe exactly (e.g. the Cancel
+     * Order modal's 454px multi-choice body).
+     */
+    bodyHeight?: number;
+}
+/**
+ * Modal Dialog (`1317:4855`) — a 512px-wide single-purpose dialog for one focused
+ * task: capturing a short input or a small form, previewing a signature or image,
+ * or picking from a set of choices. Shell = `ModalHeaders` (default) + body +
+ * `FooterFrame`. Five `variant`s set the body:
+ * - **comment** — a `TextArea` (counter, no label). Footer: Close / Confirm.
+ * - **form** — a two-column row of `InputField`s. Footer: Close / Confirm.
+ * - **signature** — a bordered **preview** of a captured signature (480×304;
+ *   override via `signatureSrc`). Footer: a single "Download Image" action
+ *   (dismiss is via the header ×) — see `showDownload`/`downloadFileName`/`onDownload`.
+ * - **image** — an image **preview** (480×304, e.g. proof of delivery;
+ *   override via `imageSrc`). Footer: same "Download Image" action as `signature`.
+ * - **multi-choice** — a vertical list of `OptionCard`s. Footer: Close / Confirm.
+ *
+ * Provide `children` to replace any variant's body.
+ */
+declare const ModalDialog: React.ForwardRefExoticComponent<ModalDialogProps & React.RefAttributes<HTMLDivElement>>;
+
+declare const DOORSTEP_DELIVERY_IMAGE: string;
+
+declare const SIGNATURE_IMAGE: string;
+
+/**
+ * Downloads a URL as a local file. Tries a fetch→blob round trip first (works
+ * for data-URI assets and same-origin/CORS-permissive remote files, and
+ * forces a real "Save" rather than a navigation); if that's blocked — a
+ * cross-origin image host without CORS headers, for example — falls back to
+ * opening the URL in a new tab so the action never dead-ends.
+ *
+ * Shared by any component that offers a "download this asset" action (e.g.
+ * `ModalDialog`'s image/signature proof viewers) so the CORS/blob handling is
+ * solved once, not per component.
+ */
+declare function downloadFile(url: string, filename: string): Promise<void>;
+
+/**
+ * Which edges of a scroll container currently have nothing more past them, and
+ * whether it overflows at all. See {@link useScrollEdges}.
+ */
+interface ScrollEdges {
+    /** Vertical scroll is at (or above) the top — nothing more above. */
+    atTop: boolean;
+    /** Vertical scroll has reached the bottom — nothing more below. */
+    atBottom: boolean;
+    /** Horizontal scroll is at the start (left in LTR) — nothing more before. */
+    atStart: boolean;
+    /** Horizontal scroll has reached the end — nothing more after. */
+    atEnd: boolean;
+    /** The container's content is taller than its box. */
+    overflowY: boolean;
+    /** The container's content is wider than its box. */
+    overflowX: boolean;
+}
+/**
+ * The single detection primitive behind every **Scroll Edge** affordance — the
+ * edge fades on the Table's pinned columns and the edge shadows on ModalShell /
+ * FooterFrame all read from this, so "is there more content past this edge?" is
+ * answered one way across the design system.
+ *
+ * Returns all four edges plus both overflow flags, so one call covers a vertical
+ * list, a horizontal table, or a container that scrolls on both axes.
+ *
+ * ## Why not just a scroll listener
+ *
+ * Three things change the answer, and a naive implementation catches only the first:
+ *
+ * 1. **The user scrolls** — a `scroll` listener on the container.
+ * 2. **The container's own box resizes** — a `ResizeObserver` on the container
+ *    (window resize, a sibling growing, a layout reflow).
+ * 3. **The container's CONTENT changes while its box stays fixed** — a
+ *    `MutationObserver` on its subtree.
+ *
+ * Case 3 is the one that bites. `ResizeObserver` reports the target's *own* box,
+ * not its `scrollHeight`, so appending rows inside a height-clamped container
+ * never fires it. A modal body that starts out exactly fitting and then grows
+ * past the fold (an accordion expands, a tab swaps in more rows, async content
+ * lands, a search widens its result set) genuinely overflows, but nothing the
+ * other two observers listen for has happened — so a scroll-and-resize-only
+ * implementation reports "no overflow" forever and the affordance never appears.
+ *
+ * That was a real divergence before this hook existed: `ModalShell` drove its
+ * header shadow from an effect keyed on `children` (so it *did* recompute on
+ * content change) while its footer shadow came from a scroll+resize-only hook —
+ * two shadows nine lines apart in the same file, disagreeing about whether the
+ * body overflowed. Both now read from here.
+ *
+ * ## Element swaps under a stable ref
+ *
+ * The effect deliberately has **no dependency array** and instead compares
+ * `ref.current` on every render. A `RefObject`'s identity never changes, so a
+ * `[ref]`-keyed effect never notices its `.current` being swapped for a different
+ * node (a two-pane modal switching which side owns the scroll, a conditionally
+ * mounted list). Without this the hook keeps observing a node that has already
+ * left the document and its answer freezes. The cheap identity check below makes
+ * re-running per render free in the common case where the target never changes.
+ *
+ * @example
+ * ```tsx
+ * const bodyRef = useRef<HTMLDivElement>(null);
+ * const { atBottom, overflowY } = useScrollEdges(bodyRef);
+ *
+ * <div ref={bodyRef} style={{ overflowY: 'auto', maxHeight: 300 }}>{items}</div>
+ * <FooterFrame scrollShadow={overflowY && !atBottom}>…</FooterFrame>
+ * ```
+ */
+declare function useScrollEdges(containerRef: React.RefObject<HTMLElement | null>): ScrollEdges;
+
+/**
+ * Arrow-key navigation for a menu, applied to the container that holds its rows.
+ *
+ * Menu rows already carry `tabIndex={0}` and activate on Enter/Space, so they were
+ * reachable by Tab — but only one at a time, and a long option list meant a Tab for
+ * every row. Doc 3 §10 asks for the standard menu behaviour instead: arrows move
+ * between options, Home/End jump to the ends, Enter selects. This supplies the half
+ * that was missing everywhere in the product, in one place rather than per menu.
+ *
+ * Deliberately DOM-driven rather than index-driven state: the menus here render
+ * wildly different bodies (flat lists, grouped lists with dividers, two-pane filter
+ * groups, a search box above a list), and several are composed by callers who own
+ * their own rows. Querying the container for what is focusable at the moment a key
+ * is pressed handles all of those without every menu having to declare its shape.
+ *
+ * `Escape` is not handled here: overlays own dismissal through the shared Escape
+ * stack, which is the only thing that knows which layer is on top.
+ */
+declare function useRovingFocus<T extends HTMLElement>(ref: React.RefObject<T | null>): void;
+
+/**
+ * Smoothly animate an element's `scrollTop`, and **guarantee it lands**.
+ *
+ * ## Why this is hand-rolled
+ *
+ * Deliberately not `element.scrollTo({ behavior: 'smooth' })`, `scrollIntoView({
+ * behavior: 'smooth' })` or CSS `scroll-behavior: smooth`. All three are **no-ops
+ * in some renderers** — verified in this project's own preview pane, where a
+ * scripted smooth scroll left `scrollTop` untouched while the instant form moved
+ * correctly. A scroll that silently does nothing is worse than an abrupt one: the
+ * control appears dead.
+ *
+ * ## Why the timeout exists
+ *
+ * The tween runs on `requestAnimationFrame`, which is **throttled to nothing in a
+ * background or occluded tab** (and absent altogether in some headless renderers).
+ * Without the fallback, a scroll started just before the user switches tabs stays
+ * half-finished — or never starts. Once the tween's window has passed the final
+ * position is forced: a no-op when the animation already completed, and the whole
+ * effect when rAF never ran. This is the same guaranteed-landing pattern the route
+ * tracer and the marker pan use, for the same reason.
+ *
+ * ## Reduced motion
+ *
+ * Collapses to an instant jump. The point of the animation is to show *where the
+ * list went*; when a user has asked for less motion, arriving is what matters.
+ *
+ * @returns A `cancel()` that stops the tween and clears the fallback. Call it from
+ *   an effect cleanup — otherwise a tween started by one render can keep writing
+ *   `scrollTop` after the element has been scrolled somewhere else (or unmounted).
+ */
+declare function animateScrollTop(el: HTMLElement, top: number, duration?: number): () => void;
+
+type LargeModalVariant = 'single-column-form' | 'dual-column-form' | 'drawer-read' | 'centered';
+interface LargeModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Which large-modal treatment. Default `centered`. */
+    variant?: LargeModalVariant;
+    /** Modal title. Default "Title". */
+    title?: string;
+    /**
+     * The header tab row (drawer variants use the `with-tabs` header). Defaults to
+     * a 3-tab `PageTabsControl`. Ignored for `centered` (default header, no tabs).
+     */
+    tabs?: React.ReactNode;
+    /** Body override — replaces the variant's default scrolling body. */
+    children?: React.ReactNode;
+    /** Footer leading content (the `preference` footer's persistent control). */
+    footerLeading?: React.ReactNode;
+    /** Cancel label. Default "Close" (centered) / "Cancel" (drawers). */
+    cancelLabel?: string;
+    /** Confirm label. Default "Confirm" (centered) / "Save" (drawers). */
+    confirmLabel?: string;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    /** Header close handler. Falls back to `onCancel`. */
+    onClose?: () => void;
+    /**
+     * Number of active filter rules. Forwarded to the default `centered` variant's
+     * `TableSection`. Ignored when `children` is overridden. Default 0.
+     */
+    filterCount?: number;
+}
+/**
+ * Large Modal (`228:11413`) — 768px-wide modal with a **scrolling** body.
+ * - **single-column-form** — square drawer; `with-tabs` header; one vertical column
+ *   of stacked `InputSection`s. For **short forms** where the user doesn't have to
+ *   work through 4+ accordions nesting text fields.
+ * - **dual-column-form** — square drawer; two columns of `InputSection`s split by a
+ *   full-height vertical **solid** demarcator (it runs to the footer even when the
+ *   columns are collapsed). For **long forms** where a single column means heavy
+ *   scrolling and the fields fall into 2+ independent groups.
+ * - **drawer-read** — square drawer; `with-tabs` header; body = stacked `ListSection`s.
+ * - **centered** — radius 12; default header; body = `InputSection` + demarcator + `TableSection`.
+ *
+ * Drawers are 768-wide, **full viewport height** (square side-sheets) with a
+ * sticky header/footer and a scrolling body; centered is 768×768 (rounded). All
+ * use the `preference` footer.
+ */
+declare const LargeModal: React.ForwardRefExoticComponent<LargeModalProps & React.RefAttributes<HTMLDivElement>>;
+
+interface ExtraLargeModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Modal title. Default "Title". */
+    title?: string;
+    /** Left panel content (below the group heading). Default a search/filter toolbar + `<Table>`. */
+    tableContent?: React.ReactNode;
+    /** Right map-panel content. Default a live `<MapView>` (Leaflet/OpenStreetMap). */
+    mapContent?: React.ReactNode;
+    /** Map centre `[lat, lng]` for the default `<MapView>`. Default Nairobi. */
+    mapCenter?: [number, number];
+    /** Cancel label. Default "Cancel". */
+    cancelLabel?: string;
+    /** Confirm label. Default "Confirm". */
+    confirmLabel?: string;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    /** Header close handler. Falls back to `onCancel`. */
+    onClose?: () => void;
+}
+/**
+ * Extra Large Modal (`7900:165088`) — a 1024×768 two-panel picker modal.
+ * Shell = `ModalHeaders` (default) + a **horizontal** body + `FooterFrame`.
+ * The body splits into a fixed 512px left **Panel** (a `section-heading`
+ * `ContentPrimitives` + a simplified search/filter toolbar + a selectable
+ * `Table`, with a right divider) and a filling right **Map Section** (a live
+ * `MapView` — Leaflet/OpenStreetMap — with its built-in `MapZoomControl`).
+ *
+ * The table mirrors the modal's *modified* table instance — a plain
+ * Search + Filter + Sort By toolbar over a selectable table of "Label"/"Content"
+ * columns with the standard "Showing 10 of 180" pagination footer (no Created
+ * filter, no top-filter chips, no status/actions columns).
+ *
+ * **When to use:** select rows while referencing a map (e.g. assigning orders
+ * to a route).
+ */
+declare const ExtraLargeModal: React.ForwardRefExoticComponent<ExtraLargeModalProps & React.RefAttributes<HTMLDivElement>>;
+
+export { ALL_ORDER_COLUMNS, AVATAR_PHOTOS, AccordionChevron, AccordionContent, AccordionHeader, type AccordionHeaderProps, AlertDialog, type AlertDialogProps, type AlertDialogVariant, Avatar, type AvatarProps, type AvatarSize, type AvatarTone, BROADCASTED_ORDER_COLUMNS, Badge, type BadgeColor, type BadgeProps, type BreadcrumbCrumb, Breadcrumbs, type BreadcrumbsProps, type BreadcrumbsType, BulkActionsToolbar, type BulkActionsToolbarProps, Button, type ButtonPlatform, type ButtonProps, type ButtonSize, type ButtonVariant, CARET_SIDE, CREATED_BY_COLUMN, Calendar, type CalendarProps, type CaretAlign, type CaretSide, CarouselPagination, type CarouselPaginationProps, Cell, type CellProps, type CellState, type CellType, Checkbox, type CheckboxProps, Chip, type ChipProps, CollapsedSidebarLogo, type CollapsedSidebarLogoProps, ConfigurationCard, type ConfigurationCardProps, ConfigurationCardRow, type ConfigurationCardRowProps, type ConfigurationCardVariant, ContentCard, type ContentCardProps, ContentPrimitives, type ContentPrimitivesProps, type ContentPrimitivesType, DOORSTEP_DELIVERY_IMAGE, type DataRowCell, DataRows, type DataRowsProps, type DataRowsState, type DataRowsVariant, DateTimePicker, type DateTimePickerProps, type DateTimePickerType, type DesktopDropdownVariant, DesktopDropdowns, type DesktopDropdownsProps, type DesktopMenuOptionState, type DesktopMenuOptionType, DesktopMenuOptions, type DesktopMenuOptionsProps, DesktopMetricCard, type DesktopMetricCardProps, DesktopProgressIndicator, type DesktopProgressIndicatorProps, type DesktopProgressIndicatorVariant, DesktopSegmentControl, type DesktopSegmentControlItem, type DesktopSegmentControlProps, type DesktopSegmentControlVariant, DurationLabel, type DurationLabelProps, type DurationLabelStatus, type DurationLabelVariant, EmptyState, type EmptyStateProps, type EmptyStateSize, type EmptyStateType, ExtraLargeModal, type ExtraLargeModalProps, FeaturedIcon, type FeaturedIconColor, type FeaturedIconProps, type FeaturedIconSize, FileUpload, FileUploadCard, type FileUploadCardProps, type FileUploadCardStatus, type FileUploadProps, type FilterGroupDimension, Flag, type FlagProps, FooterFrame, type FooterFrameProps, type FooterFrameVariant, FormDemarcator, GroupedInput, type GroupedInputProps, type GroupedInputVariant, HoverTip, type HoverTipProps, InputField, type InputFieldProps, type InputFieldVariant, InputGroup, type InputGroupProps, InputSection, type InputSectionProps, LAST_UPDATED_COLUMN, LargeModal, type LargeModalProps, type LargeModalVariant, LeadingInputFieldElement, type LeadingInputFieldElementProps, type LeadingInputFieldElementVariant, LetaLogo, type LetaLogoProps, ListGroup, type ListGroupProps, type ListItemData, ListSection, type ListSectionProps, LoadingOverlay, type LoadingOverlayProps, MAP_ROUTE_DRIVEN, MAP_ROUTE_PLANNED, MapIcon, type MapIconProps, type MapIconVariant, MapLegend, type MapLegendEntry, type MapLegendProps, MapSearchInput, type MapSearchInputProps, MapView, type MapViewProps, MapZoomControl, type MapZoomControlProps, type MetricCardState, type MetricVariance, MobileBadge, type MobileBadgeColor, type MobileBadgeProps, type MobileBadgeVariant, MobileChip, type MobileChipProps, MobileDropdown, type MobileDropdownOption, type MobileDropdownProps, MobileFeaturedIcon, type MobileFeaturedIconColor, type MobileFeaturedIconProps, type MobileFeaturedIconSize, type MobileFeaturedIconVariant, MobileFileUpload, type MobileFileUploadImage, type MobileFileUploadProps, MobileMapSearchInput, type MobileMapSearchInputProps, type MobileMenuOptionState, type MobileMenuOptionType, MobileMenuOptions, type MobileMenuOptionsProps, MobileNavTab, type MobileNavTabProps, MobileSearchInput, type MobileSearchInputProps, MobileSegment, type MobileSegmentProps, ModalDialog, type ModalDialogProps, type ModalDialogVariant, ModalHeaders, type ModalHeadersProps, type ModalHeadersVariant, ModalShell, type ModalShellProps, NotificationBanner, type NotificationBannerProps, type NotificationBannerType, type NotificationBannerVariant, ORDER_TABLE_COLUMNS, ORDER_TABLE_COLUMNS_FINISHED, OptionCard, type OptionCardProps, type OptionCardState, Page, type PageProps, PageTab, type PageTabProps, PageTabsControl, type PageTabsControlItem, type PageTabsControlProps, type PageTabsControlVariant, type PageVariant, Pagination, type PaginationProps, type PaginationVariant, Placeholder, type PlaceholderProps, ProgressTracker, type ProgressTrackerProps, RadioButton, type RadioButtonProps, SCHEDULED_ORDER_COLUMNS, SIGNATURE_IMAGE, type ScrollEdges, SearchInput, type SearchInputProps, SegmentSwitcherTab, type SegmentSwitcherTabProps, Select, type SelectProps, SelectionControl, type SelectionControlProps, type SelectionControlVariant, Shortcut, type ShortcutProps, SideBar, type SideBarGroup, type SideBarItem, type SideBarProps, type SideBarVariant, Sidetab, type SidetabItem, type SidetabProps, Skeleton, type SkeletonProps, StackedCards, type StackedCardsProps, Stepper, StepperInput, type StepperInputProps, type StepperProps, type StepperVariant, Table, type TableColumn, type TableColumnRole, TableContainer, type TableContainerProps, type TableContainerVariant, TableDataControl, type TableDataControlProps, type TableDataControlVariant, type TableProps, type TableRow, TableSection, type TableSectionProps, Tag, type TagProps, TextArea, type TextAreaBasicProps, type TextAreaProps, type TextAreaRichProps, type TextAreaVariant, Title, type TitleProps, type TitleVariant, Toast, type ToastProps, type ToastType, Toggle, ToggleButton, type ToggleButtonProps, type ToggleProps, Tooltip, type TooltipPlatform, type TooltipPosition, type TooltipPositionInput, type TooltipProps, type TooltipRect, type TooltipSide, type TooltipVariant, TopBar, type TopBarProps, type TopBarVariant, TopFilter, type TopFilterProps, TopFilterSection, type TopFilterSectionItem, type TopFilterSectionProps, TrailingInputFieldElement, type TrailingInputFieldElementProps, type TrailingInputFieldElementVariant, UNASSIGNED_ORDER_COLUMNS, UserMenu, type UserMenuProps, type UserMenuState, ViewSwitcherTab, type ViewSwitcherTabProps, WizardTab, type WizardTabProps, animateScrollTop, computeTooltipPosition, downloadFile, htmlToPlainText, sanitizeRichText, useAccordion, useEscapeLayer, useRovingFocus, useScrollEdges, useScrollShadow };