@yuno-payments/dashboard-design-system 3.1.0-beta.7 → 3.1.0

package/dist/index.d.ts

@@ -7,8 +7,10 @@ import { ClassValue } from 'clsx';
 import { Column } from '@tanstack/react-table';
 import { ColumnDef } from '@tanstack/react-table';
 import { ColumnResizeMode } from '@tanstack/react-table';
+import { Command as Command_2 } from 'cmdk';
 import { ComponentProps } from 'react';
 import { DateRange } from 'react-day-picker';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { ElementType } from 'react';
 import { ForwardRefExoticComponent } from 'react';
@@ -254,7 +256,7 @@ declare const Alert_2: React_2.ForwardRefExoticComponent<AlertProps_2 & React_2.
  * else. What the `actions` prop below replaces is narrower: call sites that
  * were hand-rolling a row of buttons inside the description.
  */
-export declare interface AlertProps extends Omit<ComponentProps<typeof Alert_2>, 'children' | 'dismiss'> {
+export declare interface AlertProps extends Omit<ComponentProps<typeof Alert_2>, 'children' | 'dismiss' | 'action'> {
     /** Icon shown at the start of the alert. */
     icon?: IconName;
     /** Alert title/heading. */
@@ -414,8 +416,8 @@ export declare interface BadgeProps extends ComponentProps<typeof Badge_2> {
 
 declare type BadgeVariant = NonNullable<ComponentProps<typeof Badge>['variant']>;
 
-declare const badgeVariants: (props?: {
-    variant?: "default" | "info" | "warning" | "success" | "destructive" | "alert" | "secondary" | "outline" | "error";
+export declare const badgeVariants: (props?: {
+    variant?: "default" | "info" | "warning" | "success" | "destructive" | "alert" | "secondary" | "outline" | "error" | "verified";
 } & ClassProp) => string;
 
 /**
@@ -497,9 +499,10 @@ export declare const BulkActionBar: ForwardRefExoticComponent<BulkActionBarProps
 
 export declare interface BulkActionBarProps extends HTMLAttributes<HTMLDivElement> {
     /**
-     * Whether the bar is shown. While closed the bar stays mounted (invisible,
-     * pointer-events off) so the exit transition can play — freeze your label
-     * while closing if you don't want "0 selected" flashing during it.
+     * Whether the bar is shown. While closed the bar stays mounted so the exit
+     * transition can play, but it leaves the accessibility tree and stops taking
+     * focus — freeze your label while closing if you don't want "0 selected"
+     * flashing during it.
      */
     open: boolean;
     /**
@@ -594,7 +597,7 @@ declare type ButtonSize = 'default' | 'sm' | 'lg' | 'icon';
 
 declare type ButtonVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
 
-declare const buttonVariants: (props?: {
+export declare const buttonVariants: (props?: {
     variant?: "default" | "destructive" | "link" | "secondary" | "outline" | "ghost";
     size?: "default" | "sm" | "lg" | "icon";
 } & ClassProp) => string;
@@ -835,6 +838,59 @@ export declare interface CheckboxProps extends Omit<ComponentProps<typeof Checkb
     info?: string;
 }
 
+export declare const ChoiceChips: React_2.ForwardRefExoticComponent<ChoiceChipsProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface ChoiceChipsOption {
+    /**
+     * Value reported in `onValueChange`. Must be unique among the options.
+     */
+    value: string;
+    /**
+     * Visible text of the chip, also its accessible name.
+     */
+    label: string;
+}
+
+export declare interface ChoiceChipsProps {
+    /**
+     * Chips to render, in order.
+     */
+    options: ChoiceChipsOption[];
+    /**
+     * Selected values. They are reported back in the order of `options`.
+     */
+    value: string[];
+    /**
+     * Fired with the new selection when a chip is toggled.
+     */
+    onValueChange: (value: string[]) => void;
+    /**
+     * Id of the element holding the question, used as the group's
+     * `aria-labelledby`.
+     */
+    labelledBy: string;
+    /**
+     * Largest number of chips that can be selected. Once reached, the
+     * unselected chips are disabled until one is released.
+     */
+    max?: number;
+    /**
+     * Writing direction of the chips. When omitted, it is inherited from the
+     * nearest ancestor with a `dir` attribute other than `<html>` or `<body>`,
+     * then from the current language, and only then from the document root.
+     */
+    dir?: 'ltr' | 'rtl';
+    /**
+     * Disables every chip and blocks changes.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional classes for the outer container.
+     */
+    className?: string;
+}
+
 export declare function cn(...inputs: ClassValue[]): string;
 
 /**
@@ -1000,6 +1056,106 @@ export declare interface ComboboxProps {
     "aria-labelledby"?: string;
 }
 
+/**
+ * A searchable list of commands.
+ *
+ * Follows Pagination's shape, which is the model in this library for a
+ * component that is useful both ways: `Command` takes data, and the parts it is
+ * built from are exported beside it (`CommandRoot`, `CommandInput`, …) for a
+ * call site that needs to lay one out itself. The parts already existed in
+ * vendor/ and were used by SearchSelect and MultiSelect; they were simply never
+ * exported.
+ *
+ * The props are the family's — `options`, `groups`, `searchPlaceholder`,
+ * `emptyState`, `maxHeight`, `className`, `id` — so this reads like Select,
+ * SearchSelect and Combobox. The one deviation is `onSelect`, explained above.
+ *
+ * @example
+ * ```tsx
+ * <Command
+ *   searchPlaceholder="Search actions"
+ *   options={[
+ *     { value: 'refund', label: 'Refund payment', icon: 'ArrowUUpLeft' },
+ *     { value: 'export', label: 'Export CSV', shortcut: '⌘E' },
+ *   ]}
+ *   onSelect={run}
+ * />
+ * ```
+ */
+export declare const Command: ForwardRefExoticComponent<CommandProps & RefAttributes<HTMLDivElement>>;
+
+export declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: React_2.ComponentProps<typeof Dialog_2> & {
+    title?: string;
+    description?: string;
+    className?: string;
+    showCloseButton?: boolean;
+}): JSX_2.Element;
+
+export declare function CommandEmpty({ ...props }: React_2.ComponentProps<typeof Command_2.Empty>): JSX_2.Element;
+
+export declare function CommandGroup({ className, ...props }: React_2.ComponentProps<typeof Command_2.Group>): JSX_2.Element;
+
+export declare function CommandInput({ className, ...props }: React_2.ComponentProps<typeof Command_2.Input>): JSX_2.Element;
+
+export declare function CommandItem({ className, ...props }: React_2.ComponentProps<typeof Command_2.Item>): JSX_2.Element;
+
+export declare function CommandList({ className, ...props }: React_2.ComponentProps<typeof Command_2.List>): JSX_2.Element;
+
+/** A single command. `value` is what `onSelect` reports. */
+export declare interface CommandOption {
+    value: string;
+    label: string;
+    /** Second line under the label, for when the label alone is ambiguous. */
+    description?: string;
+    /** Leading icon. Sized by the component; do not pass a size. */
+    icon?: IconName;
+    /** Trailing hint, e.g. "⌘K". Right-aligned by CommandShortcut. */
+    shortcut?: string;
+    disabled?: boolean;
+    /**
+     * Extra text the search should match on. The label and description are
+     * already searched; this is for synonyms a merchant might type instead.
+     */
+    keywords?: string[];
+}
+
+/** A titled run of commands. An untitled group still separates visually. */
+export declare interface CommandOptionGroup {
+    label?: string;
+    options: CommandOption[];
+}
+
+export declare interface CommandProps {
+    /** Flat list of commands. Ignored when `groups` is passed. */
+    options?: CommandOption[];
+    /** Grouped commands. Takes precedence over `options`. */
+    groups?: CommandOptionGroup[];
+    /**
+     * Fired when a command is chosen, with its `value`.
+     *
+     * Not `onChange`, which every other component in this family uses: those
+     * report a new value that persists, and a command reports an action that
+     * fires and leaves no state behind. cmdk calls it onSelect too.
+     */
+    onSelect?: (value: string) => void;
+    /** Placeholder for the search box. */
+    searchPlaceholder?: string;
+    /** Hide the search box for a plain, short list. @default true */
+    withSearch?: boolean;
+    /** Shown when nothing matches the search. */
+    emptyState?: ReactNode;
+    /** Caps the scrolling list. Accepts a number of pixels or any CSS length. */
+    maxHeight?: number | string;
+    className?: string;
+    id?: string;
+}
+
+export declare function CommandRoot({ className, ...props }: React_2.ComponentProps<typeof Command_2>): JSX_2.Element;
+
+export declare function CommandSeparator({ className, ...props }: React_2.ComponentProps<typeof Command_2.Separator>): JSX_2.Element;
+
+export declare function CommandShortcut({ className, ...props }: React_2.ComponentProps<'span'>): JSX_2.Element;
+
 /**
  * Confirm/cancel modal for destructive or irreversible actions, built on
  * `Dialog`. Encapsulates the per-module `ConfirmationDialog` that recipients
@@ -1020,7 +1176,7 @@ export declare interface ComboboxProps {
  * ```
  */
 export declare const ConfirmationDialog: {
-    ({ open, onClose, onConfirm, title, description, confirmLabel, cancelLabel, variant, isLoading, confirmDisabled, children, }: ConfirmationDialogProps): JSX_2.Element;
+    ({ open, onClose, onConfirm, title, description, confirmLabel, cancelLabel, variant, isLoading, confirmDisabled, children, widthContainer, }: ConfirmationDialogProps): JSX_2.Element;
     displayName: string;
 };
 
@@ -1074,6 +1230,11 @@ export declare interface ConfirmationDialogProps {
      * Extra content rendered in the dialog body, below the description.
      */
     children?: ReactNode;
+    /**
+     * Desktop width of the dialog container (px or CSS length) — mobile stays
+     * fullscreen. Default: the Dialog's `max-w-md`.
+     */
+    widthContainer?: number | string;
 }
 
 /**
@@ -1256,7 +1417,7 @@ export declare interface DataItemProps extends Omit<HTMLAttributes<HTMLDivElemen
  * />
  * ```
  */
-export declare function DataTable<TData, TValue>({ columns, data, isLoading, empty, checkboxSelection, isRowSelectable, rowSelection: externalRowSelection, onRowSelectionChange, enableSorting, manualSorting, sorting: externalSorting, onSortingChange: externalOnSortingChange, enableColumnFilters, enableColumnResizing, columnResizeMode, enableColumnPinning, onRowClick, onRowMouseEnter, onRowMouseLeave, getRowClassName, getRowCanExpand, renderSubComponent, getRowExpandLabel, expanderPosition, expanderHeader, actions, height, rowHeight, className, persistKey, initialSettings, onUpdate, enableColumnDragDrop, lang, translations, }: Readonly<DataTableProps<TData, TValue>>): JSX_2.Element;
+export declare function DataTable<TData, TValue>({ columns, data, isLoading, empty, checkboxSelection, isRowSelectable, getRowSelectionDisabledReason, getRowSelectLabel, rowSelection: externalRowSelection, onRowSelectionChange, enableSorting, manualSorting, sorting: externalSorting, onSortingChange: externalOnSortingChange, enableColumnFilters, enableColumnResizing, columnResizeMode, enableColumnPinning, onRowClick, onRowMouseEnter, onRowMouseLeave, getRowClassName, getRowCanExpand, renderSubComponent, getRowExpandLabel, expanderPosition, expanderHeader, actions, height, rowHeight, className, persistKey, initialSettings, onUpdate, enableColumnDragDrop, lang, translations, }: Readonly<DataTableProps<TData, TValue>>): JSX_2.Element;
 
 export declare interface DataTableActionsConfig<TData> {
     /** Custom render function for complete control */
@@ -1500,20 +1661,26 @@ export declare interface DataTableCopyCellProps {
 }
 
 /**
- * A table cell for displaying country codes with flag emojis.
- * Supports showing just the code, or the full country name via
- * a custom resolver function.
+ * A table cell for a country: a circular flag and the code, or the name.
+ *
+ * The flag was an emoji until DAS-18254, built from regional indicator pairs.
+ * That looked fine on a Mac and failed everywhere else: Windows ships no flag
+ * glyphs, so 24 call sites rendered a bare "US" where a flag was meant to be,
+ * and codes with no glyph at all — XK — were broken on every platform.
+ *
+ * It now serves circular SVGs from dashboard-assets, which unifies three ways
+ * of drawing a flag into one.
+ *
+ * If the image fails — an offline browser, a code the set does not carry — the
+ * cell falls back to the code in a muted chip. A missing flag should not leave
+ * a broken-image icon in a table row.
  *
  * @example
  * ```tsx
- * // Code with flag
  * <DataTableCountryCell code="US" />
- *
- * // With country name
  * <DataTableCountryCell code="CO" showName getCountryName={countryNameFromCode} />
- *
- * // Without flag
  * <DataTableCountryCell code="BR" showFlag={false} />
+ * <DataTableCountryCell code="BR" flagBaseUrl="/flags" />
  * ```
  */
 export declare const DataTableCountryCell: ForwardRefExoticComponent<DataTableCountryCellProps & RefAttributes<HTMLDivElement>>;
@@ -1521,12 +1688,19 @@ export declare const DataTableCountryCell: ForwardRefExoticComponent<DataTableCo
 export declare interface DataTableCountryCellProps {
     /** ISO 3166-1 alpha-2 country code (e.g., "US", "CO", "BR") */
     code: string | null | undefined;
-    /** Whether to show the flag emoji @default true */
+    /** Whether to show the flag @default true */
     showFlag?: boolean;
     /** Whether to show the country name instead of just the code @default false */
     showName?: boolean;
     /** Custom function to resolve country name from code */
     getCountryName?: (code: string) => string;
+    /**
+     * Where the flags are served from, without a trailing slash. The file is
+     * `{baseUrl}/{code}.svg`, lowercased.
+     *
+     * Point it at a self-hosted copy to drop the external request.
+     */
+    flagBaseUrl?: string;
     /** Content to render when code is empty/invalid @default "-" */
     emptyState?: ReactNode;
     /** Additional CSS classes */
@@ -1766,6 +1940,18 @@ export declare interface DataTableProps<TData, TValue> {
      * checkbox and are skipped by "select all".
      */
     isRowSelectable?: (rowData: TData) => boolean;
+    /**
+     * Why a row excluded by `isRowSelectable` cannot be selected, shown as a
+     * tooltip over its disabled checkbox. A disabled control with no reason
+     * reads as broken; return `undefined` to show nothing for that row.
+     */
+    getRowSelectionDisabledReason?: (rowData: TData) => React_2.ReactNode;
+    /**
+     * Accessible name of a row's selection checkbox, from the row's own data
+     * ("Select payment 7f3a…"). Siblings must not share a name; the default
+     * `selectRow` translation gives every row the same one.
+     */
+    getRowSelectLabel?: (rowData: TData) => string;
     /**
      * Controlled row selection state (optional)
      * If provided, component operates in controlled mode
@@ -2454,6 +2640,8 @@ export declare interface DetailSectionProps extends Omit<HTMLAttributes<HTMLElem
  */
 export declare const Dialog: React_2.ForwardRefExoticComponent<DialogProps & React_2.RefAttributes<HTMLDivElement>>;
 
+declare function Dialog_2({ ...props }: Readonly<React_2.ComponentProps<typeof DialogPrimitive.Root>>): JSX_2.Element;
+
 /**
  * Scrollable content area for dialog body.
  *
@@ -2995,6 +3183,68 @@ declare interface ExtendedToasterProps extends Omit<ToasterProps, 'position'> {
     position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
 }
 
+export declare const FeedbackPrompt: React_2.ForwardRefExoticComponent<FeedbackPromptProps & React_2.RefAttributes<HTMLElement>>;
+
+export declare interface FeedbackPromptProps {
+    /**
+     * Whether the prompt is shown. When `false` nothing is rendered.
+     */
+    open: boolean;
+    /**
+     * The question or heading of the prompt.
+     */
+    title: React_2.ReactNode;
+    /**
+     * Id of the title element. Pass the same id to the controls that answer it
+     * (e.g. `RatingScale` `labelledBy`).
+     */
+    titleId: string;
+    /**
+     * Short text shown above the title, e.g. the product or survey name.
+     */
+    eyebrow?: React_2.ReactNode;
+    /**
+     * The body: the controls that answer the prompt.
+     */
+    children?: React_2.ReactNode;
+    /**
+     * Actions shown at the bottom, e.g. "Later" and "Don't ask again".
+     */
+    footer?: React_2.ReactNode;
+    /**
+     * Fired by the close button and by Escape while focus is inside the prompt.
+     */
+    onDismiss: () => void;
+    /**
+     * Accessible name of the close button.
+     */
+    dismissLabel: string;
+    /**
+     * Writing direction. The prompt sits at the inline end of the viewport, so
+     * it moves to the left in `rtl`. When omitted, it is inherited.
+     */
+    dir?: 'ltr' | 'rtl';
+    /**
+     * Where the prompt sits. `corner` is a card at the inline-end bottom of the
+     * viewport; `sheet` spans the bottom edge, for narrow screens. Both stay
+     * non-modal.
+     * @default 'corner'
+     */
+    variant?: FeedbackPromptVariant;
+    /**
+     * Masks the prompt's content in session replays (`data-dd-privacy="mask"`).
+     * Keep it on whenever the prompt collects answers.
+     * @default true
+     */
+    maskContent?: boolean;
+    /**
+     * Additional classes for the card.
+     */
+    className?: string;
+}
+
+export declare type FeedbackPromptVariant = 'corner' | 'sheet';
+
 /**
  * Form field component with label, description, error handling, and icon support.
  *
@@ -3038,7 +3288,7 @@ export declare const Field: ForwardRefExoticComponent<FieldProps & RefAttributes
  * ever passed `info` or `requiredIndicator` to a Label directly. All 14 call
  * sites pass them to a field.
  *
- * Not copied into Field / Select / DatePicker / FileUpload because all four
+ * Not copied into Field / Select / DatePicker / FileUploader because all four
  * rendered the identical block, and four copies of a layout is how they drift.
  */
 export declare const FieldLabelRow: {
@@ -3065,7 +3315,7 @@ export declare interface FieldLabelRowProps {
 /**
  * Props for the Field component
  */
-export declare interface FieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> {
+export declare interface FieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'prefix'> {
     /**
      * Label text displayed above the input
      */
@@ -3108,6 +3358,14 @@ export declare interface FieldProps extends Omit<InputHTMLAttributes<HTMLInputEl
      * Additional props to pass to the end icon
      */
     endIconProps?: Partial<ComponentProps<typeof Icon>>;
+    /**
+     * Text adornment to display at the start (left side) of the input
+     */
+    prefix?: ReactNode;
+    /**
+     * Text adornment to display at the end (right side) of the input
+     */
+    suffix?: ReactNode;
     /**
      * Layout orientation of the label and input
      * @default "vertical"
@@ -3123,12 +3381,21 @@ export declare interface FieldProps extends Omit<InputHTMLAttributes<HTMLInputEl
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
 }
 
+/** A file the uploader refused, and the rule it broke. */
+export declare interface FileRejection {
+    file: File;
+    reason: FileRejectionReason;
+}
+
+/** Why a dropped or picked file did not make it into the list. */
+export declare type FileRejectionReason = 'type' | 'size' | 'limit';
+
 /**
  * File upload component with drag & drop support and integrated file list.
  *
  * Includes a dropzone area for selecting/dropping files and an integrated list
  * showing upload progress or completion status for each file. The consumer only
- * needs to render `<FileUpload />` -- no separate file list component required.
+ * needs to render `<FileUploader />` -- no separate file list component required.
  *
  * Helper texts ("Supports: PDF, DOCX..." and "10 MB max file size.") are
  * auto-generated from the `accept` and `maxSize` props.
@@ -3137,7 +3404,7 @@ export declare interface FieldProps extends Omit<InputHTMLAttributes<HTMLInputEl
  * ```tsx
  * const [files, setFiles] = useState<UploadFile[]>([]);
  *
- * <FileUpload
+ * <FileUploader
  *   label="Knowledge base"
  *   accept=".pdf,.docx,.txt,.csv"
  *   maxSize={10 * 1024 * 1024}
@@ -3151,18 +3418,29 @@ export declare interface FieldProps extends Omit<InputHTMLAttributes<HTMLInputEl
  * />
  * ```
  */
-export declare const FileUpload: ForwardRefExoticComponent<FileUploadProps & RefAttributes<HTMLInputElement>>;
+export declare const FileUploader: ForwardRefExoticComponent<FileUploaderProps & RefAttributes<HTMLInputElement>>;
 
 /**
- * Props for the FileUpload component
+ * Props for the FileUploader component
  */
-export declare interface FileUploadProps {
+export declare interface FileUploaderProps {
     /** Array of upload file objects (controlled) */
     value?: UploadFile[];
     /** Callback when new files are added (via drop or click). Provides the newly added native File objects */
     onFilesAdded?: (files: File[]) => void;
     /** Callback to remove a file by id */
     onRemove?: (fileId: string) => void;
+    /** Callback to retry a failed upload. Renders the retry control on error rows. */
+    onRetry?: (fileId: string) => void;
+    /**
+     * Callback for files the uploader refused, with the rule each one broke.
+     *
+     * Without it the rejection is silent: `accept` and `maxSize` filter the drop
+     * and the user is left looking at an empty list with no idea why. The reason
+     * is a code rather than a message because the copy belongs to the consumer —
+     * it is the side that has the locales.
+     */
+    onFilesRejected?: (rejections: FileRejection[]) => void;
     /** Accepted file extensions (e.g., ".pdf,.docx,.txt,.csv"). Used for validation AND to auto-generate the "Supports: ..." text */
     accept?: string;
     /** Maximum file size in bytes (e.g., 10485760 for 10MB). Used for validation AND to auto-generate the "X MB max file size." text */
@@ -3191,6 +3469,12 @@ export declare interface FileUploadProps {
     image?: string;
 }
 
+/**
+ * Every language the filter chrome ships copy for, in a runtime-checkable form
+ * (the `FilterLanguage` union is types-only and erased at build time).
+ */
+export declare const FILTER_LANGUAGES: FilterLanguage[];
+
 export declare const FilterButton: ForwardRefExoticComponent<Omit<FilterButtonProps, "ref"> & RefAttributes<HTMLButtonElement>>;
 
 export declare interface FilterButtonProps extends Omit<ComponentProps<typeof Button_2>, 'children'> {
@@ -3250,6 +3534,12 @@ export declare interface FilterConfig {
      * Items for checkbox/radio type filters
      */
     items?: FilterSectionItem[];
+    /**
+     * Hierarchical radio filters: groups render as nested, non-selectable
+     * headings with their items underneath, and `items` follow as standalone
+     * rows. See `FilterSection`.
+     */
+    groups?: FilterSectionGroup[];
     /**
      * Selected values for checkbox type filters
      */
@@ -3450,6 +3740,7 @@ export declare interface FilterDateRangeProps extends ComponentProps<typeof Radi
     mode?: 'range' | 'single';
     singleDayLabel?: string;
     showAllTime?: boolean;
+    showTime?: boolean;
     className?: string;
     /**
      * Announcement text to display at the top of the filter (e.g., timezone info)
@@ -3594,12 +3885,20 @@ export declare interface FilterDropdownProps {
      * Custom translations (overrides lang-based translations)
      */
     translations?: FilterTranslations;
+    /**
+     * Which edge of the trigger row the panel hangs from. `auto` (default)
+     * hangs from the start and, when the panel would run past the viewport —
+     * a trigger placed on the right of a header — slides it back just enough
+     * to fit.
+     * @default 'auto'
+     */
+    align?: 'start' | 'end' | 'auto';
 }
 
 /**
  * Supported languages for filter translations
  */
-declare type FilterLanguage = 'en' | 'es' | 'ja' | 'ar' | 'fr' | 'pt' | 'tr' | 'ru' | 'de' | 'zh';
+export declare type FilterLanguage = 'en' | 'es' | 'ja' | 'ar' | 'fr' | 'pt' | 'tr' | 'ru' | 'de' | 'zh';
 
 /**
  * Sidebar menu displaying available filter options
@@ -3761,6 +4060,13 @@ export declare interface FilterRadioOptionProps {
     value: string;
     description?: string;
     className?: string;
+    /**
+     * Muted text at the end of the row (hierarchical layout). Switches the row
+     * to a single full-width line: label first, qualifier last.
+     */
+    qualifier?: string;
+    /** Nesting level in a hierarchical layout; each level indents the row. */
+    depth?: number;
 }
 
 export declare const FilterSection: ForwardRefExoticComponent<FilterSectionProps & RefAttributes<HTMLDivElement>>;
@@ -3771,7 +4077,21 @@ declare interface FilterSectionCheckboxProps extends FilterSectionPropsBase {
     onChange: (selectedValues: string[]) => void;
 }
 
-declare interface FilterSectionItem {
+/**
+ * A non-selectable heading in a hierarchical section. Groups nest through
+ * `groups`; their own `items` render under the heading, indented one level
+ * deeper. Only the items can be picked.
+ */
+export declare interface FilterSectionGroup {
+    id: string;
+    label: string;
+    /** Muted text at the end of the heading row, e.g. "13 accounts". */
+    qualifier?: string;
+    items?: FilterSectionItem[];
+    groups?: FilterSectionGroup[];
+}
+
+export declare interface FilterSectionItem {
     value: string;
     label: string;
     description?: string;
@@ -3784,6 +4104,13 @@ export declare type FilterSectionProps = FilterSectionCheckboxProps | FilterSect
 declare interface FilterSectionPropsBase {
     title: string;
     items: FilterSectionItem[];
+    /**
+     * Hierarchical layout: groups render as headings nested by depth, with
+     * their items underneath; `items` then follow as standalone rows, without a
+     * heading. Single-column, with each row's `description` at the end. Radio
+     * only.
+     */
+    groups?: FilterSectionGroup[];
     className?: string;
     searchable?: boolean;
     searchPlaceholder?: string;
@@ -3892,6 +4219,24 @@ export declare function getDataTableTranslations(lang?: DataTableLanguage): Requ
  */
 export declare function getDefaultLanguage(): SupportedLanguage;
 
+/**
+ * Maps an app language tag onto a supported filter language.
+ *
+ * Consumers hold i18n tags like `es-419` or `pt-BR`; the filter chrome ships
+ * copy per base language. Regional variants collapse to their base tag and
+ * anything unsupported falls back to English — so every module stops
+ * re-declaring its own copy of this mapping.
+ *
+ * @example getFilterLanguage('es-419') // 'es'
+ */
+export declare function getFilterLanguage(locale: string): FilterLanguage;
+
+/**
+ * Get translations for a specific language
+ * Falls back to localStorage language, then to English if not found
+ */
+export declare function getFilterTranslations(lang?: FilterLanguage): Required<FilterTranslations>;
+
 /**
  * Prominent banner component for highlighting important information or calls-to-action.
  * Features an icon in a circular container, title, description, and optional action button.
@@ -3982,7 +4327,7 @@ export declare const Icon: ForwardRefExoticComponent<IconProps & RefAttributes<H
  * To add an icon, just add its PascalCase name here (it must exist in the
  * Phosphor set: https://phosphoricons.com).
  */
-export declare const ICON_NAMES: readonly ["Activity", "AidaLogo", "Archive", "ArrowBendUpLeft", "ArrowBendUpRight", "ArrowCircleLeft", "ArrowCircleRight", "ArrowCircleUp", "ArrowCircleUpLeft", "ArrowClockwise", "ArrowCounterClockwise", "ArrowDown", "ArrowElbowDownRight", "ArrowLeft", "ArrowRight", "ArrowSquareIn", "ArrowSquareOut", "ArrowUp", "ArrowUpRight", "ArrowsClockwise", "ArrowsCounterClockwise", "ArrowsDownUp", "ArrowsInSimple", "ArrowsLeftRight", "ArrowsOutSimple", "Bank", "BellRinging", "BellSimple", "BellSimpleSlash", "Binoculars", "BoundingBox", "BracketsAngle", "BracketsCurly", "BracketsSquare", "BugBeetle", "Buildings", "Calendar", "CalendarDots", "CalendarBlank", "CalendarCheck", "CalendarPlus", "Camera", "Cards", "CaretCircleRight", "CaretDoubleLeft", "CaretDoubleRight", "CaretDown", "CaretLeft", "CaretRight", "CaretUp", "CaretUpDown", "Certificate", "ChartBar", "ChartLine", "ChartLineUp", "ChartPie", "Check", "CheckCircle", "CheckSquare", "CheckSquareOffset", "Circle", "CircleNotch", "Clock", "ClockClockwise", "ClockCountdown", "ClockCounterClockwise", "CloudSlash", "Code", "Columns", "Concierge", "Copy", "CopySimple", "CreditCard", "GoogleLogo", "AppleLogo", "PaypalLogo", "CurrencyCircleDollar", "CurrencyDollar", "Desktop", "Detective", "DeviceMobileCamera", "DeviceMobileSpeaker", "DotsNine", "DotsSixVertical", "DotsThree", "DotsThreeCircleVertical", "DotsThreeOutline", "DotsThreeVertical", "Download", "DownloadSimple", "Envelope", "Equals", "Eraser", "Export", "Eye", "EyeClosed", "EyeSlash", "File", "FileArchive", "FileArrowUp", "FileCsv", "FileDoc", "FileJpg", "FilePdf", "FilePlus", "FilePng", "FilePpt", "FileSearch", "FileMagnifyingGlass", "FileTxt", "FileXls", "FileZip", "Flag", "FlagBanner", "FunnelSimple", "Gear", "GearFine", "GearSix", "GitBranch", "GitFork", "GlobeHemisphereWest", "Hash", "Headset", "IdentificationCard", "Image", "ImageSquare", "Info", "Intersect", "Key", "Layout", "Lifebuoy", "Lightbulb", "Lightning", "LinkBreak", "LinkSimple", "LinkSimpleHorizontal", "List", "ListBullets", "ListChecks", "ListNumbers", "ListPlus", "Lock", "LockKey", "MagicWand", "MagnifyingGlass", "MapPin", "Microphone", "Minus", "MinusCircle", "Money", "Monitor", "Moon", "Network", "NetworkSlash", "NotePencil", "Notepad", "Notification", "NumberCircleOne", "Package", "Palette", "Password", "Pause", "PauseCircle", "Pencil", "PencilSimple", "PencilSimpleLine", "Percent", "Phone", "PhoneCall", "PhoneOutgoing", "PhonePlus", "PhoneSlash", "PhoneX", "Play", "PlayCircle", "Plug", "Plugs", "Plus", "PlusCircle", "Prohibit", "PushPin", "PushPinSimple", "PushPinSimpleSlash", "Question", "Queue", "RadioButton", "Repeat", "Rows", "SelectionInverse", "ShareNetwork", "ShieldCheck", "ShieldSlash", "ShieldWarning", "ShoppingCart", "ShoppingCartSimple", "Sidebar", "SignOut", "SortAscending", "SortDescending", "Sparkle", "Square", "SquareHalf", "SquareHalfBottom", "SquaresFour", "Stack", "Star", "Storefront", "Stop", "Sun", "Swap", "Swatches", "Table", "Tag", "TerminalWindow", "TestTube", "TextColumns", "TextT", "Textbox", "ThumbsDown", "ThumbsUp", "Timer", "ToggleLeft", "ToggleRight", "Translate", "Trash", "TreeStructure", "TrendDown", "TrendUp", "Upload", "UploadSimple", "User", "UserCircle", "UserPlus", "UserSwitch", "Vault", "Wallet", "Warning", "WarningCircle", "X", "XCircle"];
+export declare const ICON_NAMES: readonly ["Activity", "AidaLogo", "Archive", "ArrowBendUpLeft", "ArrowBendUpRight", "ArrowCircleLeft", "ArrowCircleRight", "ArrowCircleUp", "ArrowCircleUpLeft", "ArrowClockwise", "ArrowCounterClockwise", "ArrowDown", "ArrowElbowDownRight", "ArrowLeft", "ArrowRight", "ArrowSquareIn", "ArrowSquareOut", "ArrowUp", "ArrowUpRight", "ArrowUUpLeft", "ArrowsClockwise", "ArrowsCounterClockwise", "ArrowsDownUp", "ArrowsInSimple", "ArrowsLeftRight", "ArrowsOutSimple", "Bank", "BellRinging", "BellSimple", "BellSimpleSlash", "Binoculars", "BoundingBox", "BracketsAngle", "BracketsCurly", "BracketsSquare", "BugBeetle", "Buildings", "Calendar", "CalendarDots", "CalendarBlank", "CalendarCheck", "CalendarPlus", "Camera", "Cards", "CaretCircleRight", "CaretDoubleLeft", "CaretDoubleRight", "CaretDown", "CaretLeft", "CaretRight", "CaretUp", "CaretUpDown", "Certificate", "ChartBar", "ChartLine", "ChartLineUp", "ChartPie", "ChartPieSlice", "Check", "CheckCircle", "CheckSquare", "CheckSquareOffset", "Circle", "CircleNotch", "Clock", "ClockClockwise", "ClockCountdown", "ClockCounterClockwise", "CloudSlash", "Code", "Columns", "Concierge", "Copy", "CopySimple", "CreditCard", "FileText", "GoogleLogo", "AppleLogo", "PaypalLogo", "CurrencyCircleDollar", "CurrencyDollar", "Desktop", "Detective", "DeviceMobileCamera", "DeviceMobileSpeaker", "DotsNine", "DotsSixVertical", "DotsThree", "DotsThreeCircleVertical", "DotsThreeOutline", "DotsThreeVertical", "Download", "DownloadSimple", "Envelope", "Equals", "Eraser", "Export", "Eye", "EyeClosed", "EyeSlash", "FadersHorizontal", "File", "FileArchive", "FileArrowUp", "FileCsv", "FileDoc", "FileImage", "FileJpg", "FilePdf", "FilePlus", "FilePng", "FileSvg", "FilePpt", "FileSearch", "FileMagnifyingGlass", "FileTxt", "FileXls", "FileZip", "Flag", "FlagBanner", "FunnelSimple", "Gear", "GearFine", "GearSix", "GitBranch", "GitFork", "GlobeHemisphereWest", "Hash", "Headset", "Heartbeat", "IdentificationCard", "Image", "ImageSquare", "Info", "Intersect", "Key", "Layout", "Lifebuoy", "Lightbulb", "Lightning", "LinkBreak", "LinkSimple", "LinkSimpleHorizontal", "List", "ListBullets", "ListChecks", "ListNumbers", "ListPlus", "Lock", "LockKey", "MagicWand", "MagnifyingGlass", "MapPin", "Microphone", "Minus", "MinusCircle", "Money", "Monitor", "Moon", "Network", "NetworkSlash", "Note", "NotePencil", "Notepad", "Notification", "NumberCircleOne", "Package", "Palette", "Password", "Pause", "PauseCircle", "Pencil", "PencilSimple", "PencilSimpleLine", "Percent", "Phone", "PhoneCall", "PhoneOutgoing", "PhonePlus", "PhoneSlash", "PhoneX", "Play", "PlayCircle", "Plug", "Plugs", "PlugsConnected", "Plus", "PlusCircle", "Prohibit", "PushPin", "PushPinSimple", "PushPinSimpleSlash", "Question", "Queue", "RadioButton", "Receipt", "Repeat", "Rows", "SelectionInverse", "ShareNetwork", "ShieldCheck", "ShieldSlash", "ShieldWarning", "ShoppingCart", "ShoppingCartSimple", "Sidebar", "SignOut", "SortAscending", "SortDescending", "Sparkle", "Square", "SquareHalf", "SquareHalfBottom", "SquaresFour", "Stack", "Star", "Storefront", "Stop", "Sun", "Swap", "Swatches", "Table", "Tag", "TerminalWindow", "TestTube", "TextColumns", "TextT", "Textbox", "ThumbsDown", "ThumbsUp", "Timer", "ToggleLeft", "ToggleRight", "Translate", "Trash", "TreeStructure", "TrendDown", "TrendUp", "Upload", "UploadSimple", "User", "UserCircle", "UserPlus", "UserSwitch", "Users", "Vault", "Wallet", "Warning", "WarningCircle", "X", "XCircle"];
 
 /** A known icon name (autocompleted) — but any string is accepted so that
  *  CMS / API-driven icon names continue to work. */
@@ -3994,8 +4339,16 @@ export declare interface IconProps extends Omit<HTMLAttributes<HTMLElement>, 'co
      * or any runtime string for CMS/API-driven icons.
      */
     name?: IconName;
-    /** Icon weight/style. @default "light" */
-    weight?: IconWeight | string;
+    /**
+     * Icon weight/style. @default "light"
+     *
+     * Narrowed to the two weights the webfont actually loads. It used to be
+     * `IconWeight | string`, which collapsed the union back to `string` — so
+     * `weight="bold"` type-checked, silently fell back to light through
+     * WEIGHT_CLASS, and made fonts.ts's claim that the type refuses it untrue.
+     * The runtime fallback stays for values that arrive as data.
+     */
+    weight?: IconWeight;
     /** Size token (xs–xl) or an explicit pixel value. @default "md" */
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number | string;
     /** CSS color. Defaults to `currentColor` (inherits text color). */
@@ -4046,6 +4399,64 @@ export declare function InputOTPSlot({ index, className, ...props }: React_2.Com
     index: number;
 }): JSX_2.Element;
 
+/**
+ * A single keyboard key, as a semantic `<kbd>`.
+ *
+ * Ported from the prototype-kit in DAS-18254. Pass a token from the table above
+ * and it resolves per platform; pass anything else and it renders as given.
+ *
+ * @example
+ * ```tsx
+ * <Kbd>Mod</Kbd>   // ⌘ on a Mac, Ctrl elsewhere
+ * <Kbd>K</Kbd>
+ * ```
+ */
+export declare const Kbd: ForwardRefExoticComponent<KbdProps & RefAttributes<HTMLElement>>;
+
+export declare interface KbdProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * @default "sm" — 20px, for a hint sitting inline beside a label.
+     * `md` is 24px, for the rows of a shortcuts dialog.
+     */
+    size?: 'sm' | 'md';
+    /**
+     * @default "default" — a light chip for a light surface.
+     * `inverse` is translucent, for a dark one such as a tooltip.
+     */
+    tone?: 'default' | 'inverse';
+}
+
+/**
+ * A chord, or a sequence of them.
+ *
+ * Every key goes through `Kbd`, so the platform tokens work the same way.
+ *
+ * @example
+ * ```tsx
+ * <KbdSequence keys={['Mod', 'K']} />          // ⌘ K
+ * <KbdSequence keys={[['C'], ['L']]} />        // C then L
+ * ```
+ */
+export declare const KbdSequence: {
+    ({ keys, size, tone, separator, className, }: KbdSequenceProps): JSX_2.Element;
+    displayName: string;
+};
+
+export declare interface KbdSequenceProps {
+    /**
+     * One chord as `string[]`, or several as `string[][]`.
+     *
+     * A chord is keys pressed together (`['Mod', 'K']`); a sequence is chords
+     * pressed one after the other (`[['C'], ['L']]` — press C, then L).
+     */
+    keys: string[] | string[][];
+    size?: 'sm' | 'md';
+    tone?: 'default' | 'inverse';
+    /** Word between chords. @default "then" */
+    separator?: ReactNode;
+    className?: string;
+}
+
 /**
  * A label. Nothing else.
  *
@@ -4053,7 +4464,7 @@ export declare function InputOTPSlot({ index, className, ...props }: React_2.Com
  * render a `justify-between` row so the marker could sit at the right edge —
  * three of those four props described the FIELD, not the label, and the row
  * came along with them. Every one of those concerns now lives in
- * `FieldLabelRow`, which is what Field, Select, DatePicker and FileUpload
+ * `FieldLabelRow`, which is what Field, Select, DatePicker and FileUploader
  * render.
  *
  * No consumer notices: of the 30 <Label> usages across the product, not one
@@ -4456,16 +4867,32 @@ export declare interface MultiValuesFieldProps {
      * Validation function that returns true or an error message
      */
     validate?: (value: string) => boolean | string;
+    /**
+     * Called with every value that was NOT added and why — a typed value that
+     * failed, or the entries of a pasted list that were dropped (over the
+     * limit, duplicate, invalid). Nothing the user enters is discarded silently
+     * when this is given.
+     */
+    onRejected?: (rejected: RejectedValue[]) => void;
+    /**
+     * Localised messages for the built-in rejections; the English defaults are
+     * used when absent.
+     */
+    messages?: {
+        maxItems?: string;
+        duplicate?: string;
+        invalid?: string;
+    };
     /**
      * Visual variant for the value badges
      * @default "outline"
      */
-    badgeVariant?: "default" | "secondary" | "destructive" | "outline";
+    badgeVariant?: 'default' | 'secondary' | 'destructive' | 'outline';
     /**
      * Layout orientation
      * @default "vertical"
      */
-    orientation?: "vertical" | "horizontal";
+    orientation?: 'vertical' | 'horizontal';
     /**
      * Additional CSS classes
      */
@@ -4684,7 +5111,7 @@ export declare const OTPField: React_2.ForwardRefExoticComponent<Omit<OTPFieldPr
 /**
  * Props for the OTPField component
  */
-export declare interface OTPFieldProps extends Omit<ComponentProps<typeof InputOTP>, "maxLength" | "render"> {
+export declare interface OTPFieldProps extends Omit<ComponentProps<typeof InputOTP>, 'maxLength' | 'render'> {
     /**
      * Number of OTP input slots
      * @default 6
@@ -4710,6 +5137,22 @@ export declare interface OTPFieldProps extends Omit<ComponentProps<typeof InputO
 
 export declare const OVERLAY_EVENT = "yuno-overlay";
 
+/**
+ * A page heading, at text-3xl.
+ *
+ * @deprecated Use `<Title size="large" as="h1">` (DAS-18254). Title is the
+ * heading system this should have been part of: four sizes on the Tailwind
+ * scale, icon slots, truncation.
+ *
+ * Deliberately NOT re-implemented as a wrapper over Title, even though it would
+ * be a three-line change. Title puts its text inside a span so it can truncate,
+ * so delegating would move the text node one level down and change what
+ * `getByText(...)` returns at all 20 call sites — four tests in this package
+ * caught it immediately. It would also drop page titles from text-3xl (30px) to
+ * Title's `large` (24px). Both are fine changes to make; neither is something a
+ * deprecation should do quietly. They belong to the migration, where each page
+ * can be looked at.
+ */
 export declare const PageTitle: ForwardRefExoticComponent<PageTitleProps & RefAttributes<HTMLHeadingElement>>;
 
 export declare interface PageTitleProps extends HTMLAttributes<HTMLHeadingElement> {
@@ -4884,7 +5327,7 @@ export declare const PasswordField: ForwardRefExoticComponent<PasswordFieldProps
 /**
  * Props for the PasswordField component
  */
-export declare interface PasswordFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type">, Omit<FieldProps, "type" | "endIcon" | "endIconProps"> {
+export declare interface PasswordFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "prefix">, Omit<FieldProps, "type" | "endIcon" | "endIconProps"> {
     /**
      * Whether password is visible by default
      * @default false
@@ -5047,7 +5490,9 @@ export declare const RadioGroup: ForwardRefExoticComponent<Omit<RadioGroupProps,
 
 export declare function RadioGroupBase({ className, ...props }: React_2.ComponentProps<typeof RadioGroupPrimitive.Root>): JSX_2.Element;
 
-export declare function RadioGroupItem({ className, ...props }: React_2.ComponentProps<typeof RadioGroupPrimitive.Item>): JSX_2.Element;
+export declare function RadioGroupItem({ className, indicatorClassName, ...props }: React_2.ComponentProps<typeof RadioGroupPrimitive.Item> & {
+    indicatorClassName?: string;
+}): JSX_2.Element;
 
 export declare const RadioGroupOption: ({ option, radioId, isInlineLayout, }: RadioGroupOptionProps) => JSX_2.Element;
 
@@ -5104,12 +5549,85 @@ export declare interface RadioOption {
      * Optional description text
      */
     description?: string;
+    /**
+     * Extra content rendered under the label, e.g. a follow-up field that only
+     * makes sense once this option is chosen. Stacked layout only.
+     */
+    content?: ReactNode;
     /**
      * Whether this option is disabled
      */
     disabled?: boolean;
 }
 
+export declare const RatingScale: React_2.ForwardRefExoticComponent<RatingScaleProps & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare interface RatingScaleProps {
+    /**
+     * Lowest selectable value, rendered as the first item (e.g. `0` for NPS, `1`
+     * for CSAT or CES).
+     */
+    min: number;
+    /**
+     * Highest selectable value, rendered as the last item (e.g. `10`, `5` or `7`).
+     */
+    max: number;
+    /**
+     * Selected value. `null` means nothing is selected yet; no item is
+     * preselected.
+     */
+    value: number | null;
+    /**
+     * Fired with the chosen number when an item is clicked or selected with the
+     * keyboard. Clicking the selected item again does not deselect it.
+     */
+    onValueChange: (value: number) => void;
+    /**
+     * Text shown under the first item describing the low end of the scale. It
+     * is also announced as part of the group description.
+     */
+    lowLabel: string;
+    /**
+     * Text shown under the last item describing the high end of the scale. It
+     * is also announced as part of the group description.
+     */
+    highLabel: string;
+    /**
+     * Returns the accessible name of each item, e.g.
+     * `(n) => t('rating.item', { n })`. Each name must be unique.
+     */
+    getItemLabel: (value: number) => string;
+    /**
+     * Id of the element holding the question, used as the group's
+     * `aria-labelledby`.
+     */
+    labelledBy: string;
+    /**
+     * Writing direction. In `rtl` the scale starts on the right and the
+     * horizontal arrow keys are mirrored. When omitted, it is inherited from the
+     * nearest ancestor with a `dir` attribute other than `<html>` or `<body>`,
+     * then from the current language, and only then from the document root.
+     */
+    dir?: 'ltr' | 'rtl';
+    /**
+     * Disables every item and blocks changes.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional classes for the outer container.
+     */
+    className?: string;
+}
+
+export declare interface RejectedValue {
+    value: string;
+    reason: RejectionReason;
+}
+
+/** Why a value the user entered or pasted was not added. */
+export declare type RejectionReason = 'max' | 'duplicate' | 'invalid';
+
 /**
  * Clean a value for a search, lookup or filter. Ordinary spaces inside it
  * survive, so multi-word search keeps working.
@@ -5215,9 +5733,17 @@ export declare const SearchSelect: React_2.ForwardRefExoticComponent<SearchSelec
 
 export declare interface SearchSelectProps {
     label?: string;
+    /** Info content shown in a tooltip beside the label. */
+    info?: React_2.ReactNode;
+    /**
+     * Whether to annotate the field's required/optional state.
+     * - `true` shows "(required)" or "(optional)", chosen by `required`
+     * - a string shows that text instead
+     */
+    requiredIndicator?: boolean | string;
+    required?: boolean;
     description?: string;
     error?: string;
-    optional?: boolean;
     placeholder?: string;
     value?: string;
     defaultValue?: string;
@@ -5376,6 +5902,12 @@ export declare interface SelectOption {
      * Omit to render no badge.
      */
     badge?: string;
+    /**
+     * Optional muted hint shown right-aligned in the dropdown row (e.g. a date
+     * range or "Created by you"). Not mirrored into the trigger's value.
+     * Use instead of `badge` for plain-text hints.
+     */
+    meta?: string;
 }
 
 /**
@@ -5423,12 +5955,6 @@ export declare interface SelectProps {
      * @default false
      */
     required?: boolean;
-    /**
-     * Whether to show "(Optional)" next to the label
-     * @default false
-     * @deprecated Use requiredIndicator instead
-     */
-    optional?: boolean;
     /**
      * Placeholder text shown when no option is selected
      * @default "Select an option"
@@ -5455,6 +5981,11 @@ export declare interface SelectProps {
      * Array of options (use either options or groups, not both)
      */
     options?: SelectOption[];
+    /**
+     * Muted message rendered inside the dropdown when there are no options
+     * (and no groups) to show.
+     */
+    emptyMessage?: string;
     /**
      * Array of grouped options (use either options or groups, not both)
      */
@@ -5827,9 +6358,10 @@ export declare const Textarea: ForwardRefExoticComponent<TextareaProps & RefAttr
  */
 export declare interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "className">, VariantProps<typeof textareaWrapperVariants> {
     /**
-     * Label text displayed above or next to the textarea
+     * Label shown above or next to the textarea. A node, not just a string: the
+     * product marks optional fields with a styled "(optional)" span inside it.
      */
-    label?: string;
+    label?: ReactNode;
     /**
      * Helper text displayed below the textarea
      */
@@ -5953,6 +6485,58 @@ declare interface TimePickerProps_2 extends Omit<React_2.InputHTMLAttributes<HTM
     value?: string;
 }
 
+export declare const Title: ForwardRefExoticComponent<TitleProps & RefAttributes<HTMLHeadingElement>>;
+
+export declare interface TitleProps extends Omit<HTMLAttributes<HTMLHeadingElement>, 'title'> {
+    /** Type scale step. All four are font-semibold. */
+    size?: TitleSize;
+    /** Heading level rendered. Pick by document outline, not by size. */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div';
+    /** Left slot. Subject icon or a back control. Muted, 16px. */
+    icon?: ReactNode;
+    /** Right slot. Quiet help affordance (Info + Tooltip). Muted, 16px. */
+    iconRight?: ReactNode;
+}
+
+/**
+ * Title — the heading atom.
+ *
+ * Ported from the prototype-kit in DAS-18254, because the design system had no
+ * heading system at all: it shipped `PageTitle` alone, locked to one size, and
+ * the product answered by hand-rolling 103 weighted `<hN>` elements across
+ * eight different type scales. A heading is not a page-title-shaped problem.
+ *
+ * Four sizes, all font-semibold, all on the Tailwind scale (never px):
+ *
+ *   small   → text-sm    (14 / 20)  section label inside a card
+ *   default → text-base  (16 / 24)  card title
+ *   medium  → text-xl    (20 / 28)  section divider inside a page
+ *   large   → text-2xl   (24 / 32)  page title
+ *
+ * Only the type scale moves. The frame is constant: gap-3 between the text and
+ * either icon, 16px icons, and no padding of its own — the text sits flush
+ * against the leading edge so a Title lines up with the fields under it.
+ * Spacing between a Title and its siblings belongs to the container.
+ *
+ * The text carries the weight in `text-foreground`; both icon slots sit back in
+ * `text-muted-foreground`. Icons support the heading, they do not compete.
+ *
+ * ── One deviation from the kit, and one gap ────────────────────────────────
+ *
+ * `[&_svg]:size-4` is the kit's, and it only reaches callers who pass a real
+ * `<svg>`. Our `Icon` draws the Phosphor WEBFONT — an `<i>` sized by an inline
+ * `font-size` — so no parent rule can size it. Pass `size="sm"` (16px) to land
+ * an `<Icon>` on the same grid.
+ *
+ * The kit's scale has no `text-lg` step, but 27 of the product's hand-rolled
+ * headings use one, and both design systems' DialogTitle is `text-lg` — while
+ * the kit's own docs here claim `default`/text-base is the dialog title. The
+ * kit contradicts itself, so this port does not invent a fifth size to settle
+ * it: those call sites keep passing `className="text-lg"` until the migration
+ * decides, case by case, whether they are really `default` or `medium`.
+ */
+export declare type TitleSize = 'small' | 'default' | 'medium' | 'large';
+
 export { toast }
 
 /**
@@ -6082,6 +6666,8 @@ export declare const TooltipProvider: React_2.FC<TooltipPrimitive.TooltipProvide
 
 export declare type TooltipProviderProps = ComponentProps<typeof TooltipProvider>;
 
+export declare const tooltipSurfaceClassName = "rounded-lg px-3 py-1.5 text-xs bg-black text-white dark:bg-white dark:text-black dark:border dark:border-gray-200 dark:shadow-md";
+
 declare const TooltipTrigger: React_2.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React_2.RefAttributes<HTMLButtonElement>>;
 
 declare type TooltipTriggerProps = ComponentProps<typeof TooltipTrigger>;
@@ -6147,7 +6733,7 @@ export declare interface TransferListProps extends Omit<HTMLAttributes<HTMLDivEl
 /**
  * Keyboard keys that trigger adding a value
  */
-export declare type TriggerKey = "Enter" | "Tab" | "Comma" | "Space";
+export declare type TriggerKey = 'Enter' | 'Tab' | 'Comma' | 'Space';
 
 /**
  * Tutorial component that renders a customizable tooltip for guided tours.
@@ -6183,6 +6769,11 @@ export declare interface TutorialProps extends TooltipRenderProps {
     width?: number;
     /** Accessible label for the step close button. @default "Close" */
     closeLabel?: string;
+    /**
+     * Localized step counter (e.g. "Paso 2 de 3"). The design system has no
+     * i18n of its own, so the caller renders it. Falls back to English.
+     */
+    stepLabel?: string;
 }
 
 /**
@@ -6199,12 +6790,26 @@ export declare interface UploadFile {
     size: number;
     /** Upload progress from 0-100. When 100 or undefined, file is considered "Uploaded" */
     progress?: number;
-    /** Upload status. If omitted, derived from progress: 0-99 = "uploading", 100/undefined = "uploaded" */
-    status?: 'uploading' | 'uploaded' | 'error';
+    /**
+     * Upload status. If omitted, derived from progress: 0-99 = "uploading",
+     * 100/undefined = "uploaded".
+     *
+     * "success" is the moment the transfer lands — full bar plus a check. It is
+     * the transient state you flash before settling on "uploaded", the resting
+     * row where the bar goes away and only the file and its remove action remain.
+     */
+    status?: UploadFileStatus;
     /** Optional error message when status is "error" */
     errorMessage?: string;
+    /** Thumbnail URL. When set, the preview replaces the file-type icon (image uploads). */
+    previewUrl?: string;
+    /** Status line override. Each status ships default copy. */
+    statusLabel?: string;
 }
 
+/** The four states a row can be in. */
+export declare type UploadFileStatus = 'uploading' | 'success' | 'uploaded' | 'error';
+
 /**
  * Custom hook to lock/unlock body scroll when a modal or overlay is open
  * This prevents the background from scrolling while a modal is active
@@ -6272,6 +6877,10 @@ export declare function useDirection(lang?: SupportedLanguage): "rtl" | "ltr";
  * Custom hook to handle Escape key press
  * Commonly used for closing modals, dialogs, sheets, etc.
  *
+ * Layers stack in activation order: when several overlays are open at once,
+ * Escape reaches only the most recently activated one. Once it deactivates or
+ * unmounts, the layer beneath it takes over.
+ *
  * @param isActive - Whether the Escape key handler should be active
  * @param onEscape - Callback function to execute when Escape is pressed
  *
@@ -6283,6 +6892,22 @@ export declare function useDirection(lang?: SupportedLanguage): "rtl" | "ltr";
  */
 export declare function useEscapeKey(isActive: boolean, onEscape: () => void): void;
 
+/**
+ * Whether the user is on a Mac, so a keyboard hint can show the right glyph:
+ * ⌘ against Ctrl, ⌥ against Alt.
+ *
+ * Ported from the prototype-kit with Kbd in DAS-18254. It lives here rather
+ * than inside the component because a shortcut hint is not the only thing that
+ * needs to know — a `Mod+K` listener has to decide between metaKey and ctrlKey
+ * for exactly the same reason.
+ *
+ * useSyncExternalStore rather than useEffect: the platform cannot change during
+ * a session, so `subscribe` is a no-op and the value is read straight from a
+ * snapshot. That keeps the first paint correct instead of flashing the wrong
+ * glyph for a frame.
+ */
+export declare function useIsMac(): boolean;
+
 /**
  * Custom hook to track media query matches
  * Returns true if the media query matches, false otherwise