@sckyzo/cosmos-react 0.4.1 → 0.6.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { HTMLAttributes, ReactNode, ElementType, ComponentPropsWithRef, Ref, ComponentType, AnchorHTMLAttributes, ButtonHTMLAttributes, ImgHTMLAttributes, MouseEvent, HTMLAttributeReferrerPolicy, ComponentPropsWithoutRef, ChangeEvent, MouseEventHandler, ComponentProps, CSSProperties } from 'react';
+import { HTMLAttributes, ReactNode, ElementType, ComponentPropsWithRef, Ref, ComponentType, MouseEventHandler, AnchorHTMLAttributes, ButtonHTMLAttributes, ImgHTMLAttributes, MouseEvent, HTMLAttributeReferrerPolicy, ComponentPropsWithoutRef, ChangeEvent, ComponentProps, CSSProperties } from 'react';
 import { I as Intent } from './intent-D0bANgYJ.js';
 export { a as CodeBlock, C as CodeBlockProps } from './CodeBlock-CY18_3tZ.js';
 import { LucideIcon } from 'lucide-react';
@@ -179,6 +179,11 @@ declare const SplitView: (({ children, collapseBelow, activePane: controlledPane
  * 1440px, centred).
  */
 type ShellContainer = 'fluid' | 'boxed';
+/**
+ * How the sidebar and the page meet: `attached` (the sidebar against the window's edge, the page
+ * beside it) or `floating` (both are cards, 10px from the window and from each other).
+ */
+type ShellVariant = 'attached' | 'floating';
 type ShellProps = {
     /**
      * `fluid` (default): the topbar, the sidebar and the content take the whole window.
@@ -187,6 +192,21 @@ type ShellProps = {
      * the two are the same. The sidebar's drawer, below `lg`, is not part of the column.
      */
     container?: ShellContainer;
+    /**
+     * `attached` (default): the sidebar against the window's edge, its end edge a line, the
+     * topbar and the page beside it on the base background.
+     * `floating`: the sidebar is a card 10px from the window's edges (border all round, rounded
+     * corners, a light shadow), and the topbar, the page and `secondary` sit together in a second
+     * card beside it, 10px away. The sidebar takes the tight gutter and the edge toggle (a strip
+     * along its edge that collapses it on click) unless it sets them. Below `lg`, where the sidebar
+     * is a drawer, the page fills the window as in `attached`.
+     */
+    variant?: ShellVariant;
+    /**
+     * The gutter of the Sidebar, when it sets none: `default` (20px) or `tight` (10px). Default
+     * `tight` in a floating Shell, `default` otherwise.
+     */
+    sidebarGutter?: 'default' | 'tight';
     /**
      * Top header bar: typically `<Topbar />`, or any header (a `<Navbar>`). Shell
      * passes it no props: a Topbar or a `SidebarToggle` reads the sidebar state
@@ -265,7 +285,7 @@ type ShellProps = {
  * value left on them can't freeze a toggle. Their `onCollapsedChange` still
  * fires when their own button is pressed.
  */
-declare const Shell: ({ topbar, sidebar, children, secondary, secondaryWidthClassName, defaultSidebarCollapsed, sidebarCollapsed: controlledCollapsed, onCollapsedChange, collapseControl, container, defaultSidebarOpen, sidebarOpen: controlledOpen, onSidebarOpenChange, className, }: ShellProps) => react.JSX.Element;
+declare const Shell: ({ topbar, sidebar, children, secondary, secondaryWidthClassName, defaultSidebarCollapsed, sidebarCollapsed: controlledCollapsed, onCollapsedChange, collapseControl, container, variant, sidebarGutter, defaultSidebarOpen, sidebarOpen: controlledOpen, onSidebarOpenChange, className, }: ShellProps) => react.JSX.Element;
 
 type TopbarProps = {
     /** Current page title (≠ site name — that lives in `Sidebar.Brand`). */
@@ -340,6 +360,11 @@ type SidebarExpandOnHover = false | 'overlay' | 'push';
  * fixed narrow rail with the label under each icon.
  */
 type SidebarVariant = 'default' | 'compact';
+/**
+ * How far the rows sit from the sidebar's edges: `default` (20 px) or `tight` (10 px, the floating
+ * Shell's).
+ */
+type SidebarGutter = 'default' | 'tight';
 /** Line drawn above the footer and the collapse row. */
 type SidebarFooterDivider = 'full' | 'inset' | 'none';
 type SidebarProps = {
@@ -407,6 +432,22 @@ type SidebarProps = {
     footerDivider?: SidebarFooterDivider;
     /** How the active row is drawn: `tint` (default) or `solid` (filled with the accent). */
     activeStyle?: SidebarActiveStyle;
+    /**
+     * How far the rows sit from the sidebar's edges, with the logo, the section titles and the
+     * footer following them: `default` (20 px) or `tight` (10 px). It sets
+     * `--cosmos-sidebar-gutter` on the sidebar; an app can set that variable itself for another
+     * distance. The collapsed rail and the compact one keep their own. Inside a Shell, the Shell's
+     * `sidebarGutter` is the default (`tight` in a floating Shell).
+     */
+    gutter?: SidebarGutter;
+    /**
+     * A strip along the sidebar's end edge that collapses or expands it on click, and shows a line
+     * under the pointer: a large target next to the toggles, for the mouse (the keyboard has the
+     * toggles). Default `false`, `true` in a floating Shell. Not on the compact rail nor in the
+     * Shell's drawer. Outside a Shell it moves the sidebar's own state and calls
+     * `onCollapsedChange`.
+     */
+    edgeToggle?: boolean;
     /**
      * Renders a collapse button (a `SidebarToggle`, `panel` variant) at the very
      * bottom, under `footer`, and fires with the next state when it is clicked;
@@ -439,7 +480,7 @@ type SidebarProps = {
  * shows the sidebar as a drawer: it then fills the panel, is always expanded, and `Sidebar.Brand`
  * gets a close button.
  */
-declare const SidebarRoot: ({ variant, collapsed: collapsedProp, defaultCollapsed, width, maxWidth, collapsedWidth, children, expandOnHover, footer, footerDivider, activeStyle, onCollapsedChange, className, }: SidebarProps) => react.JSX.Element;
+declare const SidebarRoot: ({ variant, collapsed: collapsedProp, defaultCollapsed, width, maxWidth, collapsedWidth, children, expandOnHover, footer, footerDivider, activeStyle, gutter: gutterProp, edgeToggle: edgeToggleProp, onCollapsedChange, className, }: SidebarProps) => react.JSX.Element;
 type SidebarBrandProps = {
     /** Logo node — typically a small icon, lucide component, or img. */
     logo?: ReactNode;
@@ -617,6 +658,101 @@ type SidebarToggleProps = {
  */
 declare const SidebarToggle: ({ variant, collapsed: collapsedProp, onCollapsedChange, controls, className, ref, }: SidebarToggleProps) => react.JSX.Element | null;
 
+type SiteFooterVariant = 'full' | 'compact';
+type SiteFooterTheme = 'light' | 'dark';
+type SiteFooterProps = ComponentPropsWithRef<'footer'> & {
+    /**
+     * `full` is the footer of a page: the brand, link columns, an end column and a bottom row.
+     * `compact` puts the same parts on one line, for the pages where the big footer would push
+     * the main action away (the cart, the checkout). Default `full`.
+     */
+    variant?: SiteFooterVariant;
+    /**
+     * `light` follows the page theme (white, gray-800 in the dark themes); `dark` stays dark in
+     * every theme. The parts take it from here. Default `light`.
+     */
+    theme?: SiteFooterTheme;
+    /** Constrain the content to a max-width column, as `Navbar` does. Default `7xl`. */
+    maxWidth?: 'none' | '7xl';
+    /**
+     * The parts, in the order they are read: `SiteFooter.Banner`, `Brand`, `Column`, `Aside` and
+     * `Bottom`. The banner goes above and the bottom row below whatever the order.
+     */
+    children: ReactNode;
+};
+declare function SiteFooterRoot({ variant, theme, maxWidth, className, children, ref, ...rest }: SiteFooterProps): react.JSX.Element;
+type SiteFooterLinkProps = ComponentPropsWithRef<'a'>;
+/**
+ * A link of the footer, drawn through `LinkProvider` like the links of the other components.
+ * `aria-current="page"` marks the current page, in bolder, stronger text.
+ */
+declare function SiteFooterLink({ className, ref, ...rest }: SiteFooterLinkProps): react.JSX.Element;
+type SiteFooterTitleProps = ComponentPropsWithRef<'h2'>;
+/**
+ * The heading of a column. Also for a group of your own in `Aside` or `Banner`, so it looks like
+ * the others and follows `theme`; name the group with `aria-labelledby`.
+ */
+declare function SiteFooterTitle({ className, ref, ...rest }: SiteFooterTitleProps): react.JSX.Element;
+type SiteFooterBrandProps = Omit<ComponentPropsWithRef<'div'>, 'children'> & {
+    /** Makes the logo and name a link, usually to the home page. */
+    href?: string;
+    /** A line under the name. Only the `full` variant shows it. */
+    description?: ReactNode;
+    /** The logo and the name: any node, as in `Navbar.Brand`. */
+    children: ReactNode;
+};
+declare function SiteFooterBrand({ href, description, className, children, ref, ...rest }: SiteFooterBrandProps): react.JSX.Element;
+type SiteFooterColumnProps = Omit<ComponentPropsWithRef<'nav'>, 'title'> & {
+    /** The heading of the column, and the name of its `nav`. The compact variant hides it. */
+    title: ReactNode;
+    /** `SiteFooter.Link`s: each one goes in a list item. */
+    children: ReactNode;
+};
+declare function SiteFooterColumn({ title, className, children, ref, ...rest }: SiteFooterColumnProps): react.JSX.Element;
+type SiteFooterAsideProps = ComponentPropsWithRef<'div'>;
+/**
+ * A free slot at the end: a newsletter form, social links, anything. In the compact variant it
+ * ends the line. To name it, give it `role="group"` and `aria-labelledby` the id of a
+ * `SiteFooter.Title`.
+ */
+declare function SiteFooterAside({ className, ref, ...rest }: SiteFooterAsideProps): react.JSX.Element;
+type SiteFooterBannerProps = ComponentPropsWithRef<'div'>;
+/**
+ * A full-width band above the columns, for a call to action such as the newsletter. It takes
+ * any content and goes first, wherever it is among the parts.
+ */
+declare function SiteFooterBanner({ className, ref, ...rest }: SiteFooterBannerProps): react.JSX.Element;
+type SiteFooterBottomLink = Omit<ComponentPropsWithRef<'a'>, 'children' | 'href'> & {
+    label: ReactNode;
+    href: string;
+};
+type SiteFooterBottomProps = ComponentPropsWithRef<'div'> & {
+    /** Legal links (terms, privacy, cookie settings), in a `nav` after the text. */
+    links?: SiteFooterBottomLink[];
+    /** Name of the legal links' `nav`. Default `Legal`. */
+    linksLabel?: string;
+};
+/**
+ * The last row: the copyright as children, the legal links as `links`. In the `full` variant it
+ * goes under everything, with a rule above it, whatever its place among the parts.
+ */
+declare function SiteFooterBottom({ links, linksLabel, className, children, ref, ...rest }: SiteFooterBottomProps): react.JSX.Element;
+/**
+ * The footer of a public page, the counterpart of `Navbar`: a `footer` landmark (`contentinfo`
+ * when it follows `main` rather than sits inside it), built from `Brand`, link `Column`s with
+ * their heading, a free `Aside`, an optional `Banner` and a `Bottom` row. `variant="compact"`
+ * puts them on one line.
+ */
+declare const SiteFooter: typeof SiteFooterRoot & {
+    Brand: typeof SiteFooterBrand;
+    Column: typeof SiteFooterColumn;
+    Link: typeof SiteFooterLink;
+    Title: typeof SiteFooterTitle;
+    Aside: typeof SiteFooterAside;
+    Banner: typeof SiteFooterBanner;
+    Bottom: typeof SiteFooterBottom;
+};
+
 type PageHeaderProps = {
     /** Main page title */
     title: string;
@@ -682,17 +818,50 @@ type SectionCardProps = {
     iconColor?: string;
     /** Tailwind bg-* class for the icon container. Overridden by `iconTone` when both are set. */
     iconBg?: string;
+    /**
+     * At the end of the header: a button, a menu, a link. Below `sm` it goes under the title. It
+     * stays in every state; remove it yourself where it makes no sense (`action={empty ? undefined : …}`).
+     */
+    action?: ReactNode;
+    /**
+     * The data is on its way: a skeleton replaces the body, the card is `aria-busy` and a status
+     * line says what loads. Wins over `error` and `empty`.
+     */
+    loading?: boolean;
+    /** The request failed: a compact `ErrorState` replaces the body. Wins over `empty`. */
+    error?: boolean;
+    /** What went wrong, as the title of the error. Default 'Something went wrong.' */
+    errorMessage?: string;
+    /** A line under `errorMessage`: the cause, or what to do next. */
+    errorDescription?: string;
+    /** With `error`, shows a "Try again" button that calls it. */
+    onRetry?: () => void;
+    /** There is nothing to show: a compact `EmptyState` replaces the body. */
+    empty?: boolean;
+    /** Title of the empty state. Default 'No data'. For a richer one, pass your own `EmptyState` as `children`. */
+    emptyMessage?: string;
+    /** Under the empty message: the way to fill the card (a button, a link). */
+    emptyAction?: ReactNode;
+    /**
+     * A Tailwind `min-h-*` class (`min-h-44`) the body keeps in every state, so a card alone in its
+     * row does not jump when it loads. In a grid the body already takes the height the row gives it.
+     */
+    minBodyHeight?: string;
     /** Card content */
     children?: ReactNode;
+    /** On the root `<section>`: the place for a grid span (`lg:col-span-2`) or a margin. */
     className?: string;
 };
 /**
- * SectionCard — a `Card` (24px padding) with title, optional icon and description, and children.
+ * SectionCard — a `Card` (24px padding) with title, optional icon and description, an optional
+ * `action` at the end of the header, and children. Its body can load, come back empty or fail on
+ * its own (`loading`, `empty`, `error`): the header stays, so the reader knows which card it is.
  *
  * The de-facto building block for grouped content in a page. Use multiple
- * SectionCards stacked vertically (with `space-y-6`) or in a grid.
+ * SectionCards stacked vertically (with `space-y-6`) or in a grid. The root is a `<section>` named
+ * by the title, so a screen reader lists the cards of a page as regions.
  */
-declare const SectionCard: ({ title, as: Heading, desc, icon: Icon, iconTone, iconColor, iconBg, children, className, }: SectionCardProps) => react.JSX.Element;
+declare const SectionCard: ({ title, as: Heading, desc, icon: Icon, iconTone, iconColor, iconBg, action, loading, error, errorMessage, errorDescription, onRetry, empty, emptyMessage, emptyAction, minBodyHeight, children, className, }: SectionCardProps) => react.JSX.Element;
 
 type ContentNarrowProps = {
     children: ReactNode;
@@ -1449,6 +1618,99 @@ declare const uptimeLevel: (uptime: number | null | undefined, thresholds?: Part
  */
 declare const formatUptime: (uptime: number) => string;
 
+type MenuProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Edge of the trigger the menu lines up with: where the text starts or ends, so the right under `dir="rtl"` for `start`. Default `start`. */
+    align?: 'start' | 'end';
+    children: ReactNode;
+};
+type MenuTriggerProps = ComponentPropsWithRef<'button'>;
+/** An unstyled button: give it a label or an icon with an `aria-label`, and your own classes. */
+declare function MenuTrigger({ onClick, onKeyDown, className, ref, ...rest }: MenuTriggerProps): react.JSX.Element;
+type MenuContentProps = {
+    /** Tailwind width class. Default `w-56` (224px). */
+    width?: string;
+    /** Name of the menu. Default: the trigger's. */
+    'aria-label'?: string;
+    className?: string;
+    children: ReactNode;
+};
+type MenuGroupProps = {
+    /** Heading of the group. The group is named by it. */
+    label?: string;
+    className?: string;
+    children: ReactNode;
+};
+type MenuItemIntent = Extract<Intent, 'neutral' | 'danger'>;
+type MenuItemProps = Omit<ComponentPropsWithRef<'button'>, 'children' | 'onSelect' | 'type'> & {
+    children: ReactNode;
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    /** `danger` colors a destructive item (delete, sign out) red. Default `neutral`. */
+    intent?: MenuItemIntent;
+    /** Keyboard shortcut hint, shown at the end (e.g. "⌘D"). It is a hint, not a binding. */
+    shortcut?: ReactNode;
+    /** Trailing badge, before the shortcut: a `<Badge size="sm">` with a count or a tag. */
+    badge?: ReactNode;
+    /**
+     * Makes the item a link (`<a role="menuitem">`) instead of a button: middle-click, "open in a
+     * new tab" and a router's link interception work. `onSelect` still runs and the menu still
+     * closes. A disabled link item has no `href` and `aria-disabled="true"`.
+     */
+    href?: string;
+    /** With `href`: where the link opens (`_blank`…). */
+    target?: string;
+    /** With `href`: the link's `rel`. */
+    rel?: string;
+    /** Runs when the item is chosen, by click, Enter or Space. */
+    onSelect?: () => void;
+    /** Closes the menu once the item is chosen. Default true. */
+    closeOnSelect?: boolean;
+};
+declare function MenuItem({ icon: Icon, intent, shortcut, badge, onSelect, closeOnSelect, href, disabled, onClick, className, children, ref, ...rest }: MenuItemProps): react.JSX.Element;
+type MenuCheckboxItemProps = Omit<ComponentPropsWithRef<'button'>, 'children' | 'onSelect' | 'type' | 'role' | 'defaultChecked'> & {
+    children: ReactNode;
+    /** Controlled state. Only `undefined` means uncontrolled. */
+    checked?: boolean;
+    defaultChecked?: boolean;
+    /** Called with the state to move to, on click, Enter or Space. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Closes the menu once the item is toggled. Default false: a list of options stays open. */
+    closeOnSelect?: boolean;
+};
+/**
+ * An item that is on or off (`role="menuitemcheckbox"`). It keeps the menu open, so several can
+ * be toggled in a row, and takes the same arrows, Home, End and typeahead as `Menu.Item`.
+ */
+declare function MenuCheckboxItem({ checked: checkedProp, defaultChecked, onCheckedChange, closeOnSelect, disabled, onClick, className, children, ref, ...rest }: MenuCheckboxItemProps): react.JSX.Element;
+type MenuRadioItemProps = Omit<ComponentPropsWithRef<'button'>, 'children' | 'onSelect' | 'type' | 'role'> & {
+    children: ReactNode;
+    /** Whether this is the picked item of its group. The host owns it: the item never flips itself. */
+    checked: boolean;
+    /** Runs when the item is chosen, by click, Enter or Space (also when it is already checked). */
+    onSelect?: () => void;
+    /** Closes the menu once the item is chosen. Default true: picking an option is a choice made. */
+    closeOnSelect?: boolean;
+};
+/**
+ * One option of a set where a single one is picked (`role="menuitemradio"`), as the views of a
+ * table. Put them in a `Menu.Group` with a `label`. It takes the same arrows, Home, End and
+ * typeahead as `Menu.Item`.
+ */
+declare function MenuRadioItem({ checked, onSelect, closeOnSelect, disabled, onClick, className, children, ref, ...rest }: MenuRadioItemProps): react.JSX.Element;
+declare const Menu: (({ open: openProp, defaultOpen, onOpenChange, align, children, }: MenuProps) => react.JSX.Element) & {
+    Trigger: typeof MenuTrigger;
+    Content: ({ width, "aria-label": ariaLabel, className, children, }: MenuContentProps) => react.JSX.Element;
+    Group: ({ label, className, children }: MenuGroupProps) => react.JSX.Element;
+    Item: typeof MenuItem;
+    CheckboxItem: typeof MenuCheckboxItem;
+    RadioItem: typeof MenuRadioItem;
+    Separator: () => react.JSX.Element;
+};
+
 type StackedListProps = Omit<ComponentPropsWithRef<'ul'>, 'children' | 'title'> & {
     children: ReactNode;
     /**
@@ -1471,21 +1733,57 @@ type StackedListProps = Omit<ComponentPropsWithRef<'ul'>, 'children' | 'title'>
  *
  * Items also take a `badge` and a line of `details` for content rows (issues,
  * projects), a `timestamp` and a `description` for narrow columns, and a `rank`
- * for "top N" lists. `StackedList.Header` adds group headings between items.
- * With `card` the list sits on a card surface, with an optional header.
+ * for "top N" lists. `StackedList.Header` adds group headings between items, or a
+ * selection bar. With `card` the list sits on a card surface, with an optional header.
+ *
+ * A triage list (a mail inbox, notifications) takes `unread`, `selected`, a checkbox
+ * (`checked`), a star (`starred`) and `actions` on its items, and a select-all on the
+ * header. The host keeps the state.
  */
 declare function StackedListRoot({ card, title, description, action, className, children, ref, ...rest }: StackedListProps): react.JSX.Element;
 type StackedListHeaderProps = Omit<ComponentPropsWithRef<'li'>, 'children'> & {
     /** Render with `position: sticky` so the header stays pinned while scrolling. */
     sticky?: boolean;
+    /** The heading, or in a selection bar the count ("3 selected"). */
     children: ReactNode;
+    /**
+     * Adds a select-all checkbox at the start, which makes the header a selection bar. The host
+     * owns it: pass `checked` (every row is picked) and `indeterminate` (some are), and answer
+     * `onCheckedChange` by picking or clearing them all.
+     */
+    checked?: boolean;
+    /** Shows the checkbox as mixed: some rows are picked, not all. */
+    indeterminate?: boolean;
+    /** Called with the state the checkbox moves to. */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Controls at the end of the bar, for the actions on the picked rows. Keep them short, and
+     * icon-only on a phone: the bar does not wrap.
+     */
+    actions?: ReactNode;
 };
 /**
  * Group heading, rendered as an `<li>` among the items of the same list. With
- * `sticky` it stays pinned to the top of the scrolling container.
- */
-declare function StackedListHeader({ sticky, className, children, ref, ...rest }: StackedListHeaderProps): react.JSX.Element;
-type StackedListItemProps = Omit<ComponentPropsWithRef<'li'>, 'title'> & {
+ * `sticky` it stays pinned to the top of the scrolling container. With `checked`
+ * or `onCheckedChange` it is a selection bar: a select-all checkbox, the count and
+ * the bulk `actions`.
+ */
+declare function StackedListHeader({ sticky, checked, indeterminate, onCheckedChange, actions, className, children, ref, ...rest }: StackedListHeaderProps): react.JSX.Element;
+/** One action of a row: an icon button on a wide screen, an item of a menu on a phone. */
+type StackedListAction = {
+    /** What the action does ("Archive"). The button's name, with the row's title, and the menu item's text. */
+    label: string;
+    /** Icon of the button, and of the menu item. */
+    icon: ComponentType<{
+        className?: string;
+    }>;
+    /** `danger` colors a destructive action (delete). Default `neutral`. */
+    intent?: MenuItemIntent;
+    disabled?: boolean;
+    /** Runs when the action is chosen. */
+    onSelect: () => void;
+};
+type StackedListItemProps = Omit<ComponentPropsWithRef<'li'>, 'title' | 'onClick'> & {
     /** Leading slot — typically an `<img>` (size-12, rounded-full) or `<Avatar>`. */
     avatar?: ReactNode;
     /** Primary text. */
@@ -1504,6 +1802,12 @@ type StackedListItemProps = Omit<ComponentPropsWithRef<'li'>, 'title'> & {
      * `position: relative`.
      */
     href?: string;
+    /**
+     * Makes the title a button, with the same full-row overlay as `href`, or runs on the link when
+     * `href` is set too. It is the title's handler, not the `<li>`'s: it no longer fires from a
+     * click on a control or on a part of the row that is not the title.
+     */
+    onClick?: MouseEventHandler<HTMLElement>;
     /** When `href` is set, also append a chevron-right icon to indicate navigation. */
     chevron?: boolean;
     /** Position in a "top N" list, shown before the avatar. */
@@ -1520,8 +1824,35 @@ type StackedListItemProps = Omit<ComponentPropsWithRef<'li'>, 'title'> & {
     timestamp?: ReactNode;
     /** Body text under the title, clamped to two lines. Replaces `subtitle`. */
     description?: ReactNode;
+    /**
+     * Whether the row is unread. `true` is a bold title with a dot in the start gutter and
+     * "Unread" for a screen reader; `false` the read look, a lighter title. Left out, the row
+     * keeps the look it always had. Set it on every row of an inbox, so the titles stay aligned.
+     */
+    unread?: boolean;
+    /**
+     * The row open in a master-detail layout: `aria-current` on the title, a tint and a bar at
+     * the start edge. Not the checkbox: that is `checked`.
+     */
+    selected?: boolean;
+    /** Controlled state of the row's checkbox. Setting it, `defaultChecked` or `onCheckedChange` adds the checkbox. */
+    checked?: boolean;
+    defaultChecked?: boolean;
+    /** Called with the state the checkbox moves to. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Controlled state of the star. Setting it, `defaultStarred` or `onStarredChange` adds the star toggle. */
+    starred?: boolean;
+    defaultStarred?: boolean;
+    /** Called with the state the star moves to. */
+    onStarredChange?: (starred: boolean) => void;
+    /**
+     * Actions on the row. Icon buttons that appear on hover and focus (they are only transparent
+     * until then, so a keyboard reaches them); on a phone, and on a screen with no hover, one
+     * "More actions" menu. Anything else goes in `trailing`.
+     */
+    actions?: StackedListAction[];
 };
-declare function StackedListItem({ avatar, title, subtitle, meta, trailing, href, chevron, rank, badge, details, timestamp, description, className, ref, ...rest }: StackedListItemProps): react.JSX.Element;
+declare function StackedListItem({ avatar, title, subtitle, meta, trailing, href, onClick, chevron, rank, badge, details, timestamp, description, unread, selected, checked: checkedProp, defaultChecked, onCheckedChange, starred: starredProp, defaultStarred, onStarredChange, actions, className, ref, ...rest }: StackedListItemProps): react.JSX.Element;
 declare const StackedList: typeof StackedListRoot & {
     Header: typeof StackedListHeader;
     Item: typeof StackedListItem;
@@ -1557,7 +1888,7 @@ type RowProps = {
  * insets the content from the hover background, so stack rows in a plain
  * container, with or without dividers.
  */
-declare const Row: ({ icon: Icon, title, subtitle, status, onClick, href, className, ref, }: RowProps) => react.JSX.Element;
+declare const Row$1: ({ icon: Icon, title, subtitle, status, onClick, href, className, ref, }: RowProps) => react.JSX.Element;
 
 type ActivityFeedIntent = Extract<Intent, 'neutral' | 'info' | 'success' | 'warning' | 'danger'>;
 type ActivityFeedItemProps = ComponentPropsWithRef<'li'> & {
@@ -2716,7 +3047,45 @@ type ConfirmationModalProps = {
  */
 declare const ConfirmationModal: ({ open, onClose, ...content }: ConfirmationModalProps) => react.JSX.Element;
 
-type NotificationsPanelIntent = Extract<Intent, 'danger' | 'warning' | 'info' | 'success'>;
+type NotificationRowIntent = Extract<Intent, 'danger' | 'warning' | 'info' | 'success'>;
+type NotificationRowProps = ComponentPropsWithRef<'button'> & {
+    /** Color of the chip and the badge, and the icon unless `icon` replaces it. */
+    intent: NotificationRowIntent;
+    /**
+     * Icon of the chip, in place of the one `intent` picks (a comment, an invoice, a deploy). The
+     * chip keeps the color of the intent.
+     */
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    title: string;
+    subtitle?: string;
+    /** Small mono caption shown below the subtitle (e.g. check id, error code). */
+    caption?: string;
+    /** When the notification happened, as a line under the text (e.g. "2 min ago"). */
+    time?: ReactNode;
+    /** Not read yet: a dot before the title and a tinted row. Default false. */
+    unread?: boolean;
+    /** Badge label at the end of the row. If omitted, derived from `intent` (CRIT/WARN/INFO/OK). */
+    badgeLabel?: string;
+    /**
+     * Controls at the end of the row (mark as read, delete…): icon buttons named for their row
+     * (`aria-label="Delete: {title}"`), or a menu. They come after the row's own button and are
+     * siblings of it, never inside it, so each is a stop of its own for the keyboard and a click
+     * on one is not a click on the row. With `actions` the row is a `<div>` around that button and
+     * them: `className` styles the `<div>`, and `ref` and the other props stay on the button.
+     */
+    actions?: ReactNode;
+};
+/**
+ * One notification, as a full-width button: a chip with its icon, the title, subtitle, caption
+ * and time, and a badge. `NotificationsPanel.Item` is this row plus closing the panel; on a
+ * notifications page, put it in your own list (`<ul>` and `<li>`) with the filters and paging
+ * that page has.
+ */
+declare function NotificationRow({ intent, icon, title, subtitle, caption, time, unread, badgeLabel, actions, className, ref, ...rest }: NotificationRowProps): react.JSX.Element;
+
+type NotificationsPanelIntent = NotificationRowIntent;
 type NotificationsPanelProps = {
     /** Controlled open state. If omitted, the panel manages its own state. */
     open?: boolean;
@@ -2770,23 +3139,15 @@ type NotificationsPanelListProps = {
     className?: string;
     children: ReactNode;
 };
-type NotificationsPanelItemProps = ComponentPropsWithRef<'button'> & {
-    /** Color and icon of the item. */
-    intent: NotificationsPanelIntent;
-    title: string;
-    subtitle?: string;
-    /** Small mono caption shown below the subtitle (e.g. check id, error code). */
-    caption?: string;
-    /** When the notification happened, as a line under the text (e.g. "2 min ago"). */
-    time?: ReactNode;
-    /** Not read yet: a dot before the title and a tinted row. Default false. */
-    unread?: boolean;
-    /** Badge label at the end of the item. If omitted, derived from `intent` (CRIT/WARN/INFO/OK). */
-    badgeLabel?: string;
+type NotificationsPanelItemProps = NotificationRowProps & {
     /** When true, the panel auto-closes after the item is clicked. Default true. */
     closeOnClick?: boolean;
 };
-declare function NotificationsPanelItem({ intent, title, subtitle, caption, time, unread, badgeLabel, closeOnClick, onClick, className, ref, ...rest }: NotificationsPanelItemProps): react.JSX.Element;
+/**
+ * A `NotificationRow` in the panel: it closes the panel when its button is clicked (`closeOnClick`),
+ * and nothing else. Its `actions` do not close it.
+ */
+declare function NotificationsPanelItem({ closeOnClick, onClick, ...rest }: NotificationsPanelItemProps): react.JSX.Element;
 type NotificationsPanelEmptyProps = {
     title?: string;
     subtitle?: string;
@@ -2841,99 +3202,6 @@ declare const NotificationCard: (({ title, description, intent, icon, onDismiss,
     Condensed: ({ title, actionLabel, onAction, onDismiss, className, }: NotificationCardCondensedProps) => react.JSX.Element;
 };
 
-type MenuProps = {
-    open?: boolean;
-    defaultOpen?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    /** Edge of the trigger the menu lines up with: where the text starts or ends, so the right under `dir="rtl"` for `start`. Default `start`. */
-    align?: 'start' | 'end';
-    children: ReactNode;
-};
-type MenuTriggerProps = ComponentPropsWithRef<'button'>;
-/** An unstyled button: give it a label or an icon with an `aria-label`, and your own classes. */
-declare function MenuTrigger({ onClick, onKeyDown, className, ref, ...rest }: MenuTriggerProps): react.JSX.Element;
-type MenuContentProps = {
-    /** Tailwind width class. Default `w-56` (224px). */
-    width?: string;
-    /** Name of the menu. Default: the trigger's. */
-    'aria-label'?: string;
-    className?: string;
-    children: ReactNode;
-};
-type MenuGroupProps = {
-    /** Heading of the group. The group is named by it. */
-    label?: string;
-    className?: string;
-    children: ReactNode;
-};
-type MenuItemIntent = Extract<Intent, 'neutral' | 'danger'>;
-type MenuItemProps = Omit<ComponentPropsWithRef<'button'>, 'children' | 'onSelect' | 'type'> & {
-    children: ReactNode;
-    icon?: ComponentType<{
-        className?: string;
-    }>;
-    /** `danger` colors a destructive item (delete, sign out) red. Default `neutral`. */
-    intent?: MenuItemIntent;
-    /** Keyboard shortcut hint, shown at the end (e.g. "⌘D"). It is a hint, not a binding. */
-    shortcut?: ReactNode;
-    /** Trailing badge, before the shortcut: a `<Badge size="sm">` with a count or a tag. */
-    badge?: ReactNode;
-    /**
-     * Makes the item a link (`<a role="menuitem">`) instead of a button: middle-click, "open in a
-     * new tab" and a router's link interception work. `onSelect` still runs and the menu still
-     * closes. A disabled link item has no `href` and `aria-disabled="true"`.
-     */
-    href?: string;
-    /** With `href`: where the link opens (`_blank`…). */
-    target?: string;
-    /** With `href`: the link's `rel`. */
-    rel?: string;
-    /** Runs when the item is chosen, by click, Enter or Space. */
-    onSelect?: () => void;
-    /** Closes the menu once the item is chosen. Default true. */
-    closeOnSelect?: boolean;
-};
-declare function MenuItem({ icon: Icon, intent, shortcut, badge, onSelect, closeOnSelect, href, disabled, onClick, className, children, ref, ...rest }: MenuItemProps): react.JSX.Element;
-type MenuCheckboxItemProps = Omit<ComponentPropsWithRef<'button'>, 'children' | 'onSelect' | 'type' | 'role' | 'defaultChecked'> & {
-    children: ReactNode;
-    /** Controlled state. Only `undefined` means uncontrolled. */
-    checked?: boolean;
-    defaultChecked?: boolean;
-    /** Called with the state to move to, on click, Enter or Space. */
-    onCheckedChange?: (checked: boolean) => void;
-    /** Closes the menu once the item is toggled. Default false: a list of options stays open. */
-    closeOnSelect?: boolean;
-};
-/**
- * An item that is on or off (`role="menuitemcheckbox"`). It keeps the menu open, so several can
- * be toggled in a row, and takes the same arrows, Home, End and typeahead as `Menu.Item`.
- */
-declare function MenuCheckboxItem({ checked: checkedProp, defaultChecked, onCheckedChange, closeOnSelect, disabled, onClick, className, children, ref, ...rest }: MenuCheckboxItemProps): react.JSX.Element;
-type MenuRadioItemProps = Omit<ComponentPropsWithRef<'button'>, 'children' | 'onSelect' | 'type' | 'role'> & {
-    children: ReactNode;
-    /** Whether this is the picked item of its group. The host owns it: the item never flips itself. */
-    checked: boolean;
-    /** Runs when the item is chosen, by click, Enter or Space (also when it is already checked). */
-    onSelect?: () => void;
-    /** Closes the menu once the item is chosen. Default true: picking an option is a choice made. */
-    closeOnSelect?: boolean;
-};
-/**
- * One option of a set where a single one is picked (`role="menuitemradio"`), as the views of a
- * table. Put them in a `Menu.Group` with a `label`. It takes the same arrows, Home, End and
- * typeahead as `Menu.Item`.
- */
-declare function MenuRadioItem({ checked, onSelect, closeOnSelect, disabled, onClick, className, children, ref, ...rest }: MenuRadioItemProps): react.JSX.Element;
-declare const Menu: (({ open: openProp, defaultOpen, onOpenChange, align, children, }: MenuProps) => react.JSX.Element) & {
-    Trigger: typeof MenuTrigger;
-    Content: ({ width, "aria-label": ariaLabel, className, children, }: MenuContentProps) => react.JSX.Element;
-    Group: ({ label, className, children }: MenuGroupProps) => react.JSX.Element;
-    Item: typeof MenuItem;
-    CheckboxItem: typeof MenuCheckboxItem;
-    RadioItem: typeof MenuRadioItem;
-    Separator: () => react.JSX.Element;
-};
-
 type UserMenuProps = {
     open?: boolean;
     defaultOpen?: boolean;
@@ -2961,6 +3229,11 @@ type UserMenuHeaderProps = {
     name: string;
     email?: string;
     avatarSrc?: string;
+    /**
+     * Shown after the name on the same line, for what the user is here: a `Badge` with their role
+     * or plan. The name gives way to it (it truncates), the badge never shrinks.
+     */
+    badge?: ReactNode;
     className?: string;
 };
 type UserMenuItemIntent = MenuItemIntent;
@@ -2978,7 +3251,7 @@ declare function UserMenuItem({ closeOnClick, ...rest }: UserMenuItemProps): rea
 declare const UserMenu: (({ align, ...rest }: UserMenuProps) => react.JSX.Element) & {
     Trigger: typeof UserMenuTrigger;
     Content: (props: UserMenuContentProps) => react.JSX.Element;
-    Header: ({ name, email, avatarSrc, className }: UserMenuHeaderProps) => react.JSX.Element;
+    Header: ({ name, email, avatarSrc, badge, className }: UserMenuHeaderProps) => react.JSX.Element;
     Items: ({ children }: {
         children: ReactNode;
     }) => react.JSX.Element;
@@ -3502,6 +3775,65 @@ declare const ImageGrid: typeof ImageGridRoot & {
     Item: typeof ImageGridItem;
 };
 
+type LightboxItem = {
+    /** The large picture. The page's own grid or carousel keeps its small one. */
+    src: string;
+    /** What the picture shows: its accessible name, and read out when the viewer reaches it. */
+    alt: string;
+    /** Under the picture, two lines at most (the whole text is still read out). */
+    caption?: ReactNode;
+    /** The picture of the strip when `thumbnails` is set. Default `src`: the large picture, downloaded for it too. */
+    thumbSrc?: string;
+};
+type LightboxProps = {
+    /** The pictures, in order. */
+    items: LightboxItem[];
+    /** Whether the viewer is open. The page owns it: it opens the viewer, and closes it on `onOpenChange(false)`. */
+    open: boolean;
+    /** Called with `false` from the close button, Escape and a click on the dark around the picture. */
+    onOpenChange: (open: boolean) => void;
+    /** The picture shown (controlled). */
+    index?: number;
+    /** The picture shown first, while uncontrolled. Default 0. */
+    defaultIndex?: number;
+    /** Called with the picture moved to, by the arrows, the keys, the thumbnails and a swipe. */
+    onIndexChange?: (index: number) => void;
+    /** Draws a strip of thumbnails under the picture, from `sm` up. Default `false`. */
+    thumbnails?: boolean;
+    /** Accessible name of the viewer. Default "Picture viewer". */
+    ariaLabel?: string;
+    /** Default "Previous picture". */
+    prevLabel?: string;
+    /** Default "Next picture". */
+    nextLabel?: string;
+    /** Default "Close". */
+    closeLabel?: string;
+    /** What is read out when the picture changes, from the 1-based `position`. Default "Picture 3 of 12". */
+    counterLabel?: (position: number, total: number) => string;
+    /** Accessible name of the thumbnail strip. Default "Picture thumbnails". */
+    thumbnailsLabel?: string;
+    /** Accessible name of the thumbnail of the 1-based `position`. Default "Go to picture 3". */
+    thumbnailLabel?: (position: number, total: number) => string;
+    /** Shown when a picture can't be loaded. Default "This picture could not be loaded." */
+    errorLabel?: string;
+    /** The button that loads the picture again. Default "Try again". */
+    retryLabel?: string;
+};
+/**
+ * Lightbox: a fullscreen picture viewer, dark in every theme. A counter and the close button
+ * on top, arrows on the sides (under the picture below `sm`), the caption at the bottom, and an
+ * optional strip of thumbnails. The page opens it, usually from an `ImageGrid.Item` or a
+ * `Carousel` slide (`onClick` sets `index` and `open`).
+ *
+ * It is a modal dialog: focus moves in and comes back to what opened it, Escape closes the top
+ * overlay only (a viewer opened from a modal leaves the modal open), and the page behind stops
+ * scrolling. The arrow keys, a swipe and the arrows move between pictures, never in a loop, and
+ * follow the reading direction in right to left. The picture shown and its neighbours are loaded.
+ *
+ * Every text is a prop with an English default.
+ */
+declare const Lightbox: ({ items, open, onOpenChange, index, defaultIndex, onIndexChange, thumbnails, ariaLabel, prevLabel, nextLabel, closeLabel, counterLabel, thumbnailsLabel, thumbnailLabel, errorLabel, retryLabel, }: LightboxProps) => react.JSX.Element | null;
+
 type VideoEmbedAspect = '16:9' | '4:3' | '1:1' | '21:9' | (string & {});
 type VideoEmbedProps = {
     src: string;
@@ -3853,7 +4185,7 @@ type InputProps = Omit<ComponentPropsWithRef<'input'>, 'size'> & {
     /** Attached suffix addon (e.g. `.com`, `kg`). Renders as a bordered group. */
     suffix?: ReactNode;
 };
-declare function Input({ label, description, error, success, size, required, icon: Icon, errorIcon, readOnly, endSlot, labelTrailing, prefix, suffix, className, id, ref, ...rest }: InputProps): react.JSX.Element;
+declare function Input({ label, description, error, success, size, required, icon: Icon, errorIcon, readOnly, endSlot, labelTrailing, prefix, suffix, className, id, ref, 'aria-describedby': describedBy, ...rest }: InputProps): react.JSX.Element;
 
 /** Naming props shared by the bare controls that can sit in a FormRow. */
 type FieldA11yProps = {
@@ -3954,7 +4286,7 @@ type SegmentOption<T extends string> = {
     icon?: ElementType;
     /**
      * A count or short text in a small pill after the label. It is part of the radio's accessible
-     * name ("Active 4").
+     * name ("Active 4"). Not shown on an option that shows its icon alone (`iconOnly` and an `icon`).
      */
     badge?: ReactNode;
 };
@@ -3973,6 +4305,12 @@ type SegmentedControlProps<T extends string> = FieldA11yProps & {
     appearance?: 'segments' | 'pills';
     /** Height and text size: `md` (default) or the more compact `sm`. */
     size?: 'sm' | 'md';
+    /**
+     * Draws each option as its `icon` alone, in a square segment: a grid / list switch. The `label`
+     * stays the radio's accessible name, and shows as a tooltip on hover and keyboard focus. An
+     * option with no `icon` keeps its text and its `badge`. Default `false`.
+     */
+    iconOnly?: boolean;
     /** Icon shown in a cell before the first option, for the whole group. */
     icon?: ElementType;
     /**
@@ -3987,7 +4325,7 @@ type SegmentedControlProps<T extends string> = FieldA11yProps & {
      */
     ref?: Ref<HTMLButtonElement>;
 };
-declare const SegmentedControl: <T extends string>({ options, value: valueProp, defaultValue, onChange, appearance, size, icon: GroupIcon, fullWidth, className, ref, ...a11y }: SegmentedControlProps<T>) => react.JSX.Element;
+declare const SegmentedControl: <T extends string>({ options, value: valueProp, defaultValue, onChange, appearance, size, iconOnly, icon: GroupIcon, fullWidth, className, ref, ...a11y }: SegmentedControlProps<T>) => react.JSX.Element;
 
 type NumberInputProps = FieldA11yProps & {
     name?: string;
@@ -3999,17 +4337,30 @@ type NumberInputProps = FieldA11yProps & {
     min?: number;
     max?: number;
     step?: number;
+    /** Text after the value, inside the border: `s`, `ms`, `kg`. */
     unit?: string;
+    /**
+     * Text before the value, inside the border, as `unit` follows it: a currency sign (`$`, `€`),
+     * a protocol. It sits on the start edge, so it moves to the right in right to left.
+     */
+    prefix?: ReactNode;
     /** Height and text size, aligned on Button's. Default `md`. */
     size?: FieldSize;
     /** Sets `aria-required` on the input. It has no label of its own to carry an asterisk. */
     required?: boolean;
+    /**
+     * Marks the field invalid: a red border and `aria-invalid`. It carries no message: write it
+     * under the field and point `aria-describedby` at it.
+     */
+    error?: boolean;
     /**
      * Where the step buttons sit. `sides` (default): `−` / `+` on the outer edges,
      * centered text. `stacked`: ↑ / ↓ arrows stacked in a column inside the end
-     * edge, start-aligned text: the compact form for settings panels.
+     * edge, start-aligned text: the compact form for settings panels. `none`: no
+     * button, start-aligned text, for a price or an amount where a step of one means
+     * nothing; the arrow keys of the field still step.
      */
-    controls?: 'sides' | 'stacked';
+    controls?: 'sides' | 'stacked' | 'none';
     /** Tailwind width class for the inner input — default `w-20`. */
     width?: string;
     /**
@@ -4032,7 +4383,7 @@ type NumberInputProps = FieldA11yProps & {
  * Typing can pass through an empty field or a value outside `min`…`max`;
  * only valid values reach `onChange`, and leaving the field clamps.
  */
-declare const NumberInput: ({ value: valueProp, defaultValue, onChange, min, max, step, unit, size, required, controls, width, fullWidth, disabled, className, name, ref, ...a11y }: NumberInputProps) => react.JSX.Element;
+declare const NumberInput: ({ value: valueProp, defaultValue, onChange, min, max, step, unit, prefix, size, required, error, controls, width, fullWidth, disabled, className, name, ref, ...a11y }: NumberInputProps) => react.JSX.Element;
 
 type ZoomBarProps = {
     zoom: number;
@@ -4074,6 +4425,40 @@ type FormRowProps = {
  */
 declare const FormRow: ({ label, description, tooltip, children, className }: FormRowProps) => react.JSX.Element;
 
+type ErrorSummaryItem = {
+    /**
+     * The `id` of the field, or of any box around it. The link focuses the field if that is the
+     * field, else the first enabled control inside it (input, select, textarea or button).
+     */
+    field: string;
+    /** What the link says: the name of the field ("Booking URL"). */
+    label: string;
+};
+type ErrorSummaryProps = {
+    /** One entry per field in error, in the order of the page. Nothing is drawn for an empty list. */
+    errors: ErrorSummaryItem[];
+    /** Bold first line of the banner. Default "There is a problem". */
+    title?: string;
+    /**
+     * The sentence under the title, for another language or another wording. It gets the number of
+     * fields and a link to each, in order, and returns what to draw around them:
+     * `(count, links) => <>Corrigez {count} champs : {links}.</>`. Default: "Fix 3 fields and try
+     * again: A, B and C need attention." ("Fix 1 field and try again: A needs attention.").
+     */
+    message?: (count: number, links: ReactNode[]) => ReactNode;
+    className?: string;
+};
+/**
+ * `ErrorSummary` — the banner a form shows when it could not be submitted: how many fields need
+ * attention, and a link to each that moves the focus to it. Put it above the form, where it is
+ * seen, and draw each field's own message under the field.
+ *
+ *     <ErrorSummary errors={[{ field: 'booking-url', label: 'Booking URL' }]} />
+ *
+ * It is an `AlertBanner` in `danger`, so a screen reader announces it as it appears.
+ */
+declare const ErrorSummary: ({ errors, title, message, className, }: ErrorSummaryProps) => react.JSX.Element | null;
+
 type AvatarUploaderSize = 'md' | 'lg';
 type AvatarUploaderProps = {
     /** Current avatar URL (data URL or http). null/undefined → initials fallback. */
@@ -4117,18 +4502,165 @@ type PasswordRule = {
     label: string;
     ok: boolean;
 };
+/** What a screen reader hears after each rule, since the tick and the cross are drawn. */
+type PasswordPolicyLabels = {
+    /** Default "met". */
+    met?: string;
+    /** Default "not met". */
+    notMet?: string;
+};
 type PasswordPolicyCheckerProps = {
     rules: PasswordRule[];
     /** Title shown above the rules list. Pass `null` to hide it. */
     title?: string | null;
+    /**
+     * The words said after each rule's label for a screen reader only ("At least 12 characters, not
+     * met"), to translate with the rest of the page.
+     */
+    labels?: PasswordPolicyLabels;
+    className?: string;
+};
+declare const PasswordPolicyChecker: ({ rules, title, labels, className, }: PasswordPolicyCheckerProps) => react.JSX.Element;
+/**
+ * Sensible default password policy. Override per-app if stricter/looser
+ * rules are needed (i18n, custom min length, blocklists, …).
+ */
+declare const defaultPasswordRules: (pwd: string) => PasswordRule[];
+
+/** The five levels a score of 0 to 4 stands for, from the weakest. */
+type PasswordStrengthLevels = readonly [string, string, string, string, string];
+type PasswordStrengthLabels = {
+    /** The words before the level, in the visible text and in the announcement. Default "Password strength". */
+    name?: string;
+    /** The level for each score, 0 to 4. Default "Very weak", "Weak", "Fair", "Good", "Strong". */
+    levels?: PasswordStrengthLevels;
+};
+type PasswordStrengthMeterProps = {
+    /**
+     * How strong the password is, from 0 to 4 (zxcvbn's scale). Cosmos bundles no estimator: the
+     * page works the score out. A value outside the range is held to it and rounded.
+     */
+    score: number;
+    /**
+     * Id of the visible text ("Password strength: Fair"). Point the field's `aria-describedby` at
+     * it so the level is read when the field gets focus. Generated when omitted.
+     */
+    id?: string;
+    /** The words, to translate with the rest of the page. */
+    labels?: PasswordStrengthLabels;
+    className?: string;
+};
+/**
+ * A strength gauge for a password field: the level in words, and a bar of four segments with as
+ * many lit as the score (the segments of `ProgressBar`). It draws what the page works out and bundles no estimator.
+ *
+ * The bar is decoration (`aria-hidden`); the text says the level. A polite status announces a new
+ * level once the score has held for 800 ms, so a screen reader is not read to on every key, and
+ * says nothing when the meter first shows.
+ */
+declare const PasswordStrengthMeter: ({ score, id, labels, className, }: PasswordStrengthMeterProps) => react.JSX.Element;
+
+/** A column: an action (view, edit…) or a role. */
+type PermissionGridColumn = {
+    id: string;
+    /** Names the column, and is read as part of the name of each of its cells. */
+    label: string;
+    /**
+     * A column nobody can edit, such as a built-in role. Its cells show what is granted as an icon
+     * and a text for the screen reader, and its box in the header is left out.
+     */
+    readOnly?: boolean;
+};
+/** A permission: one row of the grid. */
+type PermissionGridRow = {
+    id: string;
+    /** Names the row, and is read as part of the name of each of its cells. */
+    label: string;
+    /**
+     * The ids of the columns this permission applies to. A column that is not listed has an empty
+     * cell that no one can grant, and that no count includes. Omitted: every column.
+     */
+    columns?: string[];
+};
+/** An area of permissions: a header row over its permissions. */
+type PermissionGridGroup = {
+    id: string;
+    label: string;
+    rows: PermissionGridRow[];
+};
+/**
+ * The key of a cell in the grid's `value`: the id of the row, a colon and the id of the column.
+ * To build a `defaultValue`, or to read a granted cell back.
+ */
+declare const cellKey: (rowId: string, columnId: string) => string;
+/** Every text the grid writes itself, to translate or reword. */
+type PermissionGridLabels = {
+    /** The header over the first column. Default `Permission`. */
+    rowHeader: string;
+    /** Name of the box in the corner, which selects every cell. Default `Select all`. */
+    selectAll: string;
+    /** Name of the box of a row, a column or a group. Default `Select all for <label>`. */
+    selectAllFor: (label: string) => string;
+    /** Name of the box of one cell. Default `<row>, <column>`, e.g. `Edit invoices, Admin`. */
+    cell: (row: string, column: string) => string;
+    /** What a read-only cell says, in place of a box. Default `<cell>: granted, read-only`. */
+    readOnlyCell: (cell: string, granted: boolean) => string;
+    /** What an empty cell, a column the row does not apply to, says. Default `<cell>: not applicable`. */
+    notApplicable: (cell: string) => string;
+    /** Read after the name of a read-only column. Default `Read-only`. */
+    readOnlyColumn: string;
+    /** Announced after a box that selects several cells. Default `8 of 26 permissions granted`. */
+    summary: (granted: number, total: number) => string;
+};
+
+type PermissionGridProps = {
+    /** The permissions, grouped by area: a header row per group, then one row per permission. */
+    groups: PermissionGridGroup[];
+    /** What the permissions are granted for: actions (view, edit, delete) or roles. */
+    columns: PermissionGridColumn[];
+    /**
+     * The granted cells, as `cellKey(rowId, columnId)` keys: the row id, a colon and the column id.
+     * With `defaultValue` and `onChange(value)`, as for every control. Keys the grid does not own (a
+     * read-only column's grants, a cell that does not apply) are kept as they are.
+     */
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (value: string[]) => void;
+    /**
+     * Nobody can change anything: every cell shows what is granted as an icon, with a text for the
+     * screen reader, and no box is drawn. A single column is read-only with `column.readOnly`.
+     */
+    readOnly?: boolean;
+    /** What is wrong ("Grant at least one permission"), written under the grid and read with it. */
+    error?: string;
+    /** Replaces the texts the grid writes itself, e.g. for another language. */
+    labels?: Partial<PermissionGridLabels>;
+    /** Accessible name of the grid. */
+    ariaLabel: string;
+    /**
+     * Height past which the grid scrolls vertically, its header row staying in view. The grid
+     * always scrolls sideways in its own box when the columns do not fit, its first column staying
+     * in view.
+     */
+    maxHeight?: number | string;
     className?: string;
 };
-declare const PasswordPolicyChecker: ({ rules, title, className, }: PasswordPolicyCheckerProps) => react.JSX.Element;
 /**
- * Sensible default password policy. Override per-app if stricter/looser
- * rules are needed (i18n, custom min length, blocklists, …).
+ * PermissionGrid — permissions grouped by area down the side, actions or roles across the top, a
+ * checkbox in each cell: the editor of a role, or the matrix of roles against permissions.
+ *
+ * There is a box per row (first column), per column (header), per group (its header row) and one
+ * for the whole grid (the corner). Each shows `indeterminate` when it covers some granted cells
+ * and not all, and a click on a mixed box grants everything, then clears. Cells that do not apply
+ * to a row, and cells that are read-only, are left out of every box and of the counts.
+ *
+ * It is a `role="grid"`, not a table of checkboxes: one Tab stop, then arrows, Home and End,
+ * Ctrl+Home and Ctrl+End move between cells (and Space toggles the box in focus). After a box
+ * that selects several cells, a polite status says how many permissions are granted; a single
+ * cell says nothing. The header row and the first column stay in view while the grid scrolls,
+ * also at 375px, where it scrolls inside its own frame.
  */
-declare const defaultPasswordRules: (pwd: string) => PasswordRule[];
+declare const PermissionGrid: ({ groups, columns, value, defaultValue, onChange, readOnly, error, labels: labelOverrides, ariaLabel, maxHeight, className, }: PermissionGridProps) => react.JSX.Element;
 
 type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
 type TextareaProps = ComponentPropsWithRef<'textarea'> & {
@@ -4374,6 +4906,16 @@ type DateRange = {
     to: Date | undefined;
 };
 type DatePickerMode = 'single' | 'range';
+/** A button of the range picker that sets the range in one click. */
+type DateRangePreset = {
+    /** The text of the button: "Last 7 days". */
+    label: string;
+    /**
+     * The range it sets: fixed, or a function of today (see `today`) for one that moves with the
+     * date: `(today) => ({ from: subDays(today, 6), to: today })`.
+     */
+    range: DateRange | ((today: Date) => DateRange);
+};
 type SingleProps = {
     mode?: 'single';
     value?: Date;
@@ -4386,11 +4928,30 @@ type RangeProps = {
     mode: 'range';
     value?: DateRange;
     defaultValue?: DateRange;
+    /** Called with the range. After the first day picked in the calendar `to` is `undefined`. */
     onChange?: (range: DateRange) => void;
     /** Placeholder for the FROM trigger. */
     fromPlaceholder?: string;
     /** Placeholder for the TO trigger. */
     toPlaceholder?: string;
+    /**
+     * Buttons beside the calendar that set the range in one click ("Last 7 days", "This month").
+     * Picking one sets the range, as picking its two days would, and closes the calendar. The one
+     * whose days are the current range is marked `aria-current`, and one that falls outside `fromDate` or
+     * `toDate` is disabled. Below `sm` they sit under the calendar and wrap; from `sm` up they
+     * are a column at its end, after it in the tab order at every width.
+     */
+    presets?: DateRangePreset[];
+    /**
+     * The name of the group of `presets`, for assistive technology, to translate with the rest of
+     * the page. Default "Date range presets".
+     */
+    presetsLabel?: string;
+    /**
+     * The date `presets` count from, and the one the calendar marks as today. Default now. Pass a
+     * fixed date to test the dates a preset makes. A preset gets it at the start of its day.
+     */
+    today?: Date;
 };
 type CommonProps = {
     label?: string;
@@ -4536,15 +5097,44 @@ type ComboboxOption = {
 };
 type ComboboxProps = {
     label?: ReactNode;
-    /** Selected option value, when controlled. */
+    /**
+     * Names the input when there is no visible `label`, as for a field in a table row or a grid
+     * of lines. A `label` wins: the name is the one on screen.
+     */
+    'aria-label'?: string;
+    /**
+     * Selected option value, when controlled. With `allowCustomValue` it is also any text the
+     * host holds as the value.
+     */
     value?: string;
     /** Initial option value, when uncontrolled. None selected when omitted. */
     defaultValue?: string;
-    /** Called when the user picks an option. */
+    /**
+     * Called when the user picks an option, with its `value`. With `allowCustomValue` it is also
+     * called on every keystroke, with the text typed.
+     */
     onChange?: (value: string) => void;
+    /**
+     * Called with the option the user picks (a click, or Enter on the active option). Typed text
+     * never fires it, which is how `allowCustomValue` tells a pick from typing.
+     */
+    onSelect?: (option: ComboboxOption) => void;
+    /**
+     * Accepts the text typed as the value, when no option is picked: a field that suggests a
+     * catalogue and lets the user write their own entry. The text is the value (`onChange` fires on
+     * every keystroke) and stays in the field when focus leaves. Nothing is active until an arrow
+     * key moves there, so Enter keeps the text and lets an enclosing form submit; the list closes
+     * when no option matches, unless `emptyMessage` is set. Keep the `value` of the options out of
+     * what people type: a text equal to one names that option. Default `false`: the typed text is
+     * only a filter, and the field goes back to the selected option when focus leaves.
+     */
+    allowCustomValue?: boolean;
     options: ComboboxOption[];
     placeholder?: string;
-    /** Show this when no option matches the typed query. */
+    /**
+     * Show this when no option matches the typed query. Default "No matches found."; none with
+     * `allowCustomValue`, where the text is accepted and the empty list stays closed.
+     */
     emptyMessage?: string;
     /** Disable the input + dropdown. */
     disabled?: boolean;
@@ -4566,7 +5156,126 @@ type ComboboxProps = {
     /** Called with the open state to move to. */
     onOpenChange?: (open: boolean) => void;
 };
-declare const Combobox: ({ label, value: valueProp, defaultValue, onChange, options, placeholder, emptyMessage, disabled, helperText, error, size, required, className, ref, open: openProp, defaultOpen, onOpenChange, }: ComboboxProps) => react.JSX.Element;
+declare const Combobox: ({ label, "aria-label": ariaLabel, value: valueProp, defaultValue, onChange, onSelect, allowCustomValue, options, placeholder, emptyMessage, disabled, helperText, error, size, required, className, ref, open: openProp, defaultOpen, onOpenChange, }: ComboboxProps) => react.JSX.Element;
+
+/** One line of an invoice or an order. `quantity` and `rate` are numbers, `rate` in units. */
+type LineItem = {
+    /** Identifies the line across edits and removals: the key of its row and of its `errors`. */
+    id: string;
+    /** What is sold: free text, or the label of a catalogue entry. */
+    item: string;
+    quantity: number;
+    /** Price of one unit, in units of the currency (`24.5`, not 2450 cents). */
+    rate: number;
+};
+/** What the lines add up to: given to a page that draws the total itself. */
+type LineItemsSummary = {
+    /** The sum of the amounts shown, each rounded to the minor unit of the currency. */
+    subtotal: number;
+};
+/**
+ * The summary of `lines` as the editor reports it to `onChange`, for a page that holds lines it
+ * did not just receive (a draft loaded from a server) and shows the total outside the editor.
+ */
+declare const summarizeLineItems: (lines: readonly Pick<LineItem, "quantity" | "rate">[], { currency, locale }?: {
+    currency?: string;
+    locale?: string;
+}) => LineItemsSummary;
+
+/** Error messages of one line, by cell. A cell with a message is marked invalid and describes it. */
+type LineItemErrors = {
+    item?: string;
+    quantity?: string;
+    rate?: string;
+};
+/** An entry of the catalogue the item field suggests. */
+type LineItemsCatalogueEntry = {
+    /** What the line says once picked, and what the field suggests. Keep the labels unique. */
+    label: string;
+    /** Unit price, in units of the currency: shown in the list, and copied to the line when picked. */
+    rate?: number;
+};
+/** The words of the editor, for another language. Every one has an English default. */
+type LineItemsLabels = {
+    /** Column titles, and the names of the fields ("Quantity, line 2"). */
+    item: string;
+    quantity: string;
+    rate: string;
+    amount: string;
+    /** Placeholder of the item field. Default: "Select or type an item" with a catalogue, else "Describe the item". */
+    itemPlaceholder?: string;
+    add: string;
+    /** The row of the default totals block. */
+    subtotal: string;
+    emptyTitle: string;
+    emptyDescription: string;
+    /** The title of a line in the stacked layout. */
+    line: (n: number) => string;
+    /** The name of the field of `column` on line `n`. */
+    fieldName: (column: string, n: number) => string;
+    /** The name of the remove button of line `n`, whose item is `item` (possibly empty). */
+    remove: (n: number, item: string) => string;
+    /** Announced once line `n` is added, with the number of lines now. */
+    added: (n: number, count: number) => string;
+    /** Announced once line `n` is removed, with the number of lines left. */
+    removed: (n: number, count: number) => string;
+    /** Announced when a cell is committed and the subtotal changed. `amount` is written. */
+    subtotalAnnouncement: (amount: string) => string;
+};
+type LineItemsEditorProps = Omit<ComponentPropsWithRef<'div'>, 'children' | 'onChange' | 'defaultValue'> & {
+    /** The lines, when controlled. An empty list is `[]`: only `undefined` means uncontrolled. */
+    value?: LineItem[];
+    /** The lines to start from, when uncontrolled. Default none: the empty state. */
+    defaultValue?: LineItem[];
+    /**
+     * Called with the lines after every edit (a keystroke, a pick, a line added or removed) and
+     * what they add up to, for a page that shows the total itself (`footer={false}`).
+     */
+    onChange?: (lines: LineItem[], summary: LineItemsSummary) => void;
+    /** ISO 4217 code (`'EUR'`) of the rates and the amounts. Without it, they are plain numbers. */
+    currency?: string;
+    /** BCP 47 locale of the figures. Default: the user's. Pass it when the page is in one. */
+    locale?: string;
+    /**
+     * Entries the item field suggests: it becomes a `Combobox` that also takes what the user types,
+     * and picking an entry copies its `rate` to the line. Without a catalogue, a plain text field.
+     */
+    catalogue?: LineItemsCatalogueEntry[];
+    /** Bounds of the quantity: `min` (default 1) and `step` (default 1). `{ min: 0.5, step: 0.5 }` for hours. */
+    quantity?: {
+        min?: number;
+        step?: number;
+    };
+    /** Messages of the cells, by line `id`. */
+    errors?: Record<string, LineItemErrors>;
+    /** A message about the editor as a whole ("Add at least one line"), under the lines. */
+    error?: string;
+    /**
+     * Rows added to the totals block under the lines, after the subtotal: `Totals.Row` and
+     * `Totals.Total` for tax, a discount, the total due. They take the editor's currency and
+     * locale. `false` draws no block, for a page that shows the summary elsewhere and reads it from
+     * `onChange`. The block is hidden while there is no line.
+     */
+    footer?: false | ((summary: LineItemsSummary) => ReactNode);
+    /** Shows the lines as text, with no field, no "Add line" and no remove button. */
+    readOnly?: boolean;
+    labels?: Partial<LineItemsLabels>;
+};
+/**
+ * LineItemsEditor — the lines of an invoice or an order: an item (free text, or picked from a
+ * catalogue), a quantity, a rate, and the amount worked out from them, with lines added and
+ * removed, and the subtotal under them. From 42rem of its own width the lines are a grid with
+ * the amounts aligned in a column; below, each line is a stacked card.
+ *
+ * Each amount is rounded to the minor unit of the currency, then the amounts shown are added up,
+ * so the subtotal is always what the rows say. Enter in a field does not add a line (it submits
+ * the form around, or picks the option of the list): "Add line" is one Tab after the last field.
+ * A removed line hands the focus to the remove button of the line that took its place, the one
+ * of the new last line when it was the last, or "Add line" when none is left. A polite status
+ * announces a line added or removed, and the subtotal once a cell is committed (focus leaves it,
+ * or Enter), never on each keystroke.
+ */
+declare const LineItemsEditor: ({ value: valueProp, defaultValue, onChange, currency, locale, catalogue, quantity, errors, error, footer, readOnly, labels: labelsProp, className, ref, ...rest }: LineItemsEditorProps) => react.JSX.Element;
 
 /** An option of a `MultiSelect`: the shape of a `Combobox` option. */
 type MultiSelectOption = ComboboxOption;
@@ -4823,6 +5532,164 @@ type PhoneInputProps = FieldA11yProps & {
  */
 declare const PhoneInput: ({ label, description, error, size, required, value: valueProp, defaultValue, onChange, defaultCountry, countries, format, validate, placeholder, disabled, className, ref, ...a11y }: PhoneInputProps) => react.JSX.Element;
 
+type CardBrand = 'visa' | 'mastercard' | 'amex' | 'discover' | 'diners' | 'jcb' | 'unionpay';
+/**
+ * The brand a card number belongs to, from its leading digits, or `null` while they do not tell yet
+ * (a lone 5 is a Mastercard only from 51 to 55) or no brand has the prefix. Reads a number as it is
+ * shown, spaces and dashes included.
+ */
+declare const cardBrand: (number: string) => CardBrand | null;
+/** The numbers of digits the brand issues; 12 to 19 while the brand is `null`. */
+declare const cardNumberLengths: (brand: CardBrand | null) => readonly number[];
+/** Digits of the security code: 4 for Amex, 3 for every other brand and while there is none. */
+declare const cardCvcLength: (brand: CardBrand | null) => 3 | 4;
+/**
+ * The Luhn checksum of a card number (spaces and dashes are ignored; any other character, or a
+ * single digit, fails). It catches a mistyped digit, not a card that does not exist. Some UnionPay
+ * numbers are issued without the checksum.
+ */
+declare const luhnValid: (number: string) => boolean;
+/**
+ * Whether an expiry (`MMYY`, or as it is shown, `MM / YY`) is a real month that is not over: a
+ * card holds through the end of the month it names. The year is read in `today`'s century. A date
+ * far in the future passes: the page may add a horizon of its own. `today` is the date to compare
+ * with, for a test; it defaults to now.
+ */
+declare const expiryValid: (expiry: string, today?: Date) => boolean;
+
+type CardInputAttributes = Omit<ComponentPropsWithRef<'input'>, 'size' | 'type' | 'value' | 'defaultValue' | 'onChange' | 'inputMode' | 'autoComplete' | 'className' | 'children'>;
+type CardFieldProps = CardInputAttributes & {
+    label?: string;
+    /** Helper text under the field. */
+    description?: string;
+    /** Error message, replaces `description`. The page decides when and with which words. */
+    error?: string;
+    /** Height and text size, aligned on Button's. Default `md`. */
+    size?: FieldSize;
+    /** Marks the field required: an asterisk after the label, `required` and `aria-required` on the input. */
+    required?: boolean;
+    /** Slot rendered next to the label text (e.g. a TooltipHelp). */
+    labelTrailing?: ReactNode;
+    /** Merged on the wrapper. */
+    className?: string;
+};
+
+type CardNumberInputProps = CardFieldProps & {
+    /** The card number as digits only (`4111111111111111`), when controlled. `''` is none. */
+    value?: string;
+    /** Initial number, when uncontrolled. Empty when omitted. */
+    defaultValue?: string;
+    /**
+     * Called with the digits only, however the number is grouped on screen. It is not checked: the
+     * length for the brand and the Luhn checksum are `cardNumberLengths` and `luhnValid`, the page
+     * calls them when it chooses to.
+     */
+    onChange?: (digits: string) => void;
+    /**
+     * Called with the brand the leading digits point to (`'visa'`, `'amex'`…) and with `null` when
+     * they no longer do. Fires once on mount when the initial number has a brand.
+     */
+    onBrandChange?: (brand: CardBrand | null) => void;
+};
+/**
+ * CardNumberInput — the number of a payment card. Digits are grouped as they are typed (4-4-4-4,
+ * an Amex 4-6-5) with the caret kept where it was, a pasted number with spaces or dashes is
+ * accepted, and the brand the leading digits point to shows as text in a pill at the end of the
+ * field. No `name` is set, so a plain form post never carries the number: pass one if you mean it.
+ * Cosmos handles no real card data: a real checkout uses its payment provider's hosted fields.
+ */
+declare const CardNumberInput: ({ value: valueProp, defaultValue, onChange, onBrandChange, size, placeholder, ...rest }: CardNumberInputProps) => react.JSX.Element;
+
+type CardExpiryInputProps = CardFieldProps & {
+    /** The expiry as `MMYY` (`'1228'` for December 2028), when controlled. `''` is none. */
+    value?: string;
+    /** Initial expiry, when uncontrolled. Empty when omitted. */
+    defaultValue?: string;
+    /**
+     * Called with `MMYY`, a partial one while it is typed. It is not checked: a month that exists
+     * and is not over is `expiryValid`, the page calls it when it chooses to.
+     */
+    onChange?: (value: string) => void;
+};
+/**
+ * CardExpiryInput — the expiry date of a payment card, shown as `MM / YY` while the value is
+ * `MMYY`. A first digit from 2 to 9 becomes the month 02 to 09, Backspace takes the separator and
+ * the digit before it together, and a pasted `12/2028` or `12 / 28` is accepted. No `name` is set,
+ * so a plain form post never carries the date: pass one if you mean it.
+ */
+declare const CardExpiryInput: ({ value: valueProp, defaultValue, onChange, placeholder, ...rest }: CardExpiryInputProps) => react.JSX.Element;
+
+type CardCvcInputProps = CardFieldProps & {
+    /** The security code as digits, when controlled. `''` is none. */
+    value?: string;
+    /** Initial code, when uncontrolled. Empty when omitted. */
+    defaultValue?: string;
+    /**
+     * Called with the digits. It is not checked: the code is complete at `cardCvcLength(brand)`
+     * digits, the page compares them when it chooses to.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * The brand the code belongs to: 4 digits for `'amex'`, 3 for any other brand and for `null`.
+     * Inside a CardFields group it follows the group's number, and a `brand` set here wins.
+     */
+    brand?: CardBrand | null;
+};
+/**
+ * CardCvcInput — the security code of a payment card (CVC, CVV, CID): digits only, 3 of them, or 4
+ * for an Amex. A code longer than its brand allows is cut when the brand turns up, and `onChange`
+ * is called with the shorter one. No `name` is set, so a plain form post never carries the code:
+ * pass one if you mean it.
+ */
+declare const CardCvcInput: ({ value: valueProp, defaultValue, onChange, brand: brandProp, placeholder, ...rest }: CardCvcInputProps) => react.JSX.Element;
+
+/** What a card group holds: the number as digits, the expiry as `MMYY`, the code as digits. */
+type CardValue = {
+    number: string;
+    expiry: string;
+    cvc: string;
+};
+type CardFieldKey = keyof CardValue;
+type CardFieldsProps = {
+    /** The group's name, drawn as its `<legend>` and read by a screen reader before each field. */
+    legend: string;
+    /** The three values, when controlled. */
+    value?: CardValue;
+    /** Initial values, when uncontrolled. All empty when omitted. */
+    defaultValue?: CardValue;
+    /** Called with the three values whenever one of them changes. */
+    onChange?: (value: CardValue) => void;
+    /** Error message under each field. The page decides when and with which words. */
+    errors?: Partial<Record<CardFieldKey, string>>;
+    /**
+     * An error for the whole card ("Your card was declined."), under the three fields and read as
+     * the group's description. It is announced when it appears.
+     */
+    error?: string;
+    /** Labels of the three fields. Default `Card number`, `Expiry date` and `Security code`. */
+    labels?: Partial<Record<CardFieldKey, string>>;
+    /** Height and text size of the three fields, aligned on Button's. Default `md`. */
+    size?: FieldSize;
+    /** Marks the three fields required. */
+    required?: boolean;
+    /** Disables the group and its three fields. */
+    disabled?: boolean;
+    /** Called when the brand the number points to changes, as `CardNumberInput`'s. */
+    onBrandChange?: (brand: CardBrand | null) => void;
+    /** Refs to the three `<input>`s, where focus belongs on the field a validation error names. */
+    inputRefs?: Partial<Record<CardFieldKey, Ref<HTMLInputElement>>>;
+    /** Merged on the `<fieldset>`. */
+    className?: string;
+};
+/**
+ * CardFields — the three card fields as one group: a `<fieldset>` with a shared legend and error,
+ * the number on its own line and the expiry and the code in two equal columns (still two at 375px),
+ * and the brand handed from the number to the code through context, so an Amex asks four digits
+ * with nothing to wire. The fields keep their own `error`; the group adds the card's. Each field is
+ * also exported and works alone.
+ */
+declare const CardFields: ({ legend, value: valueProp, defaultValue, onChange, errors, error, labels, size, required, disabled, onBrandChange, inputRefs, className, }: CardFieldsProps) => react.JSX.Element;
+
 type BarListIntent = Extract<Intent, 'brand' | 'success' | 'warning' | 'danger' | 'info'>;
 type BarListItem = {
     /** Stable key of the row. */
@@ -4961,8 +5828,205 @@ declare const DescriptionList: typeof DescriptionListRoot & {
     Item: typeof Item;
 };
 
+/** When the sign of an amount is written: the values of `Intl.NumberFormat`'s `signDisplay`. */
+type MoneySignDisplay = 'auto' | 'always' | 'exceptZero' | 'negative' | 'never';
+/** When the zeros after the decimal point are written: `Intl.NumberFormat`'s `trailingZeroDisplay`. */
+type MoneyTrailingZeroDisplay = 'auto' | 'stripIfInteger';
+type FormatMoneyOptions = {
+    /** ISO 4217 code (`'EUR'`): writes the value as a price. Without it, as a plain number. */
+    currency?: string;
+    /** BCP 47 locale of the figure (`'fr-FR'`, `'ar-EG'`). Default: the user's. */
+    locale?: string;
+    /**
+     * Which amounts get a sign. Default `negative`: a minus in front of a loss, nothing in front of
+     * a gain or of zero, and no `-$0.00` for a loss too small to show. `exceptZero` adds a plus in
+     * front of a gain, `always` and `never` write a sign in front of every amount or none.
+     */
+    signDisplay?: MoneySignDisplay;
+    /**
+     * Default `auto`: every decimal of the currency (`$24.00`). `stripIfInteger` drops them from a
+     * whole amount and only from a whole one (`$24`, but `$24.50`), for a price tag.
+     */
+    trailingZeroDisplay?: MoneyTrailingZeroDisplay;
+};
+/**
+ * `value` written as an amount, in units (`24.5`, not 2450 cents), by `Intl.NumberFormat`: the
+ * separators, the digits, the number of decimals of the currency (none for JPY) and the place of
+ * its sign come from `locale`. For a string, a toast, an `aria-label` or an export; to draw the
+ * figure on a page, use `Amount`, which also isolates it from the text around it.
+ *
+ * An unknown locale or a malformed currency code throws a `RangeError`: a wrong amount on a page
+ * is worse than an error.
+ */
+declare const formatMoney: (value: number, { currency, locale, signDisplay, trailingZeroDisplay, }?: FormatMoneyOptions) => string;
+
+type AmountProps = Omit<ComponentPropsWithRef<'bdi'>, 'children'> & {
+    /** The amount, in units (`24.5`, not 2450 cents). */
+    value: number;
+    /** ISO 4217 code (`'EUR'`): writes the value as a price. Without it, as a plain number. */
+    currency?: string;
+    /** BCP 47 locale of the figure. Default: the user's. Pass it when the text around is in one. */
+    locale?: string;
+    /**
+     * Which amounts get a sign. Default `negative`: a minus in front of a loss, nothing in front of
+     * a gain or of zero (no `-$0.00`). See `formatMoney`.
+     */
+    signDisplay?: MoneySignDisplay;
+    /**
+     * `stripIfInteger` writes a whole amount with no decimals (`$24`) and keeps them on the others
+     * (`$24.50`). Default `auto`: every decimal of the currency. See `formatMoney`.
+     */
+    trailingZeroDisplay?: MoneyTrailingZeroDisplay;
+    /** Writes the value yourself, in place of `currency`, `locale`, `signDisplay` and the rest. */
+    format?: (value: number) => string;
+};
+/**
+ * Amount — a figure of money in running text, a cell or a row of totals. It is written by
+ * `formatMoney`, so it follows the locale and the currency, in tabular digits that line up in a
+ * column, on one line. It sits in a `<bdi>`, so the sign and the digits keep their order in a
+ * right-to-left page and a minus never jumps to the other side of the figure. It takes the colour
+ * and the weight of the text around it; tint it with `className`.
+ */
+declare const Amount: ({ value, currency, locale, signDisplay, trailingZeroDisplay, format, className, ...rest }: AmountProps) => react.JSX.Element;
+
+type TotalsRowProps = Omit<ComponentPropsWithRef<'li'>, 'children'> & {
+    /** What the figure is: "Subtotal", "Shipping", "VAT (20%)". Wraps when the row is narrow. */
+    label: ReactNode;
+    /** The amount, in units (`24.5`, not 2450 cents), written with the block's currency and locale. */
+    value?: number;
+    /**
+     * The value as text or a node ("Free", "Calculated at the next step"), in place of `value`. A
+     * text sits in a `<bdi>`, so it keeps its order in a right-to-left page. A row with neither
+     * shows no value.
+     */
+    children?: ReactNode;
+};
+/** Totals.Row — a label and its amount: a subtotal, a discount, shipping, tax. */
+declare function Row(props: TotalsRowProps): react.JSX.Element;
+/**
+ * Totals.Total — the row that closes the block: a rule above it and a larger, bolder label and
+ * amount. Takes the same props as `Totals.Row`.
+ */
+declare function Total(props: TotalsRowProps): react.JSX.Element;
+type TotalsNoteProps = ComponentPropsWithRef<'li'> & {
+    /** The text under the rows: "Tax included", "Shipping calculated at checkout". */
+    children: ReactNode;
+};
+/** Totals.Note — a line of small, muted text under the rows, at the end of the line with them. */
+declare function Note({ className, children, ref, ...rest }: TotalsNoteProps): react.JSX.Element;
+type TotalsProps = Omit<ComponentPropsWithRef<'ul'>, 'children'> & {
+    /** ISO 4217 code (`'EUR'`) of every amount. Without it, they are plain numbers. */
+    currency?: string;
+    /** BCP 47 locale of every amount. Default: the user's. Pass it when the page is in one. */
+    locale?: string;
+    /**
+     * Which amounts get a sign. Default `negative`: a minus in front of a discount, nothing in front
+     * of a subtotal or of zero. See `formatMoney`.
+     */
+    signDisplay?: MoneySignDisplay;
+    /** `Totals.Row`, `Totals.Total` and `Totals.Note`, in the order they show. */
+    children: ReactNode;
+};
+declare function TotalsRoot({ currency, locale, signDisplay, className, children, ref, ...rest }: TotalsProps): react.JSX.Element;
+/**
+ * Totals — the summary rows that end a cart, an order or an invoice: subtotal, discount,
+ * shipping, tax, then a total that stands out and an optional note. It adds nothing up: every
+ * amount is yours, and each is written by `formatMoney` with the block's `currency` and `locale`,
+ * in tabular digits at the end of the line, so the figures line up and mirror in right to left.
+ * A discount is a negative amount: it shows with a minus, in the colour of the text around it.
+ * The block takes the width of its container; give it a `max-w-*` and `ms-auto` to sit at the end.
+ */
+declare const Totals: typeof TotalsRoot & {
+    Row: typeof Row;
+    Total: typeof Total;
+    Note: typeof Note;
+};
+
+type PlanFeature = {
+    /** What the plan gives, or does not give. */
+    label: ReactNode;
+    /** `false` for a feature the plan lacks: a muted dash and muted text. Default `true`. */
+    included?: boolean;
+};
+/** The level of the plan's name: the page decides where the cards sit in its outline. */
+type PlanCardHeadingLevel = 2 | 3 | 4 | 5 | 6;
+type PlanCardProps = Omit<ComponentPropsWithRef<'article'>, 'children'> & {
+    /** The plan's name: "Starter", "Pro". It is the heading of the card. */
+    name: string;
+    /**
+     * One or two lines under the name. The card keeps room for two, so the actions of cards side by
+     * side line up; a third line pushes this card's action down.
+     */
+    description?: ReactNode;
+    /**
+     * A number is written as money by `formatMoney` (`24` gives `$24`, `24.5` gives `$24.50`), in
+     * units and in tabular digits. Anything else is shown as it is, for a price that is not a figure
+     * ("Free", "Custom").
+     */
+    price: ReactNode;
+    /** ISO 4217 code (`'USD'`) of a numeric `price`. Without it, a plain number. */
+    currency?: string;
+    /** BCP 47 locale of a numeric `price`. Default: the user's. Pass it when the page is in one. */
+    locale?: string;
+    /** What the price covers, after it: "/ month", "per seat per year". */
+    period?: ReactNode;
+    /**
+     * A line of small text under the price: "Billed $228 yearly", "Save 20%". The card keeps room
+     * for one line, so cards with and without a note keep their actions level.
+     */
+    priceNote?: ReactNode;
+    /**
+     * The plan to look at first: an accent outline and a shadow. Pair it with `highlightLabel`
+     * ("Most popular").
+     */
+    highlighted?: boolean;
+    /**
+     * The text of the label set in the corner of a `highlighted` card, a `Ribbon` pill. Keep it
+     * short: the name wraps under it, but a long label runs over the name.
+     */
+    highlightLabel?: ReactNode;
+    /**
+     * The plan the customer is on. The card draws its own disabled button, a `secondary` one, in
+     * place of `action`.
+     */
+    current?: boolean;
+    /** Text of that button, for translations. Default `Current plan`. */
+    currentLabel?: string;
+    /**
+     * The action: a `Button` of `size="lg"`, set right under the price and as wide as the card. The
+     * page decides what it does (a link to the sign-up, a button that opens a confirmation).
+     */
+    action?: ReactNode;
+    /** The list under the action, in order: each is a mark and a label. */
+    features?: PlanFeature[];
+    /** Under the feature list, or in its place when there is none: a link, a note. */
+    children?: ReactNode;
+    /** Level of the name's heading. Default `3`. */
+    headingLevel?: PlanCardHeadingLevel;
+    /** Read before an included feature by a screen reader, for translations. Default `Included:`. */
+    includedLabel?: string;
+    /** Read before a missing feature by a screen reader. Default `Not included:`. */
+    notIncludedLabel?: string;
+};
+/**
+ * PlanCard — one plan of a pricing page or a billing page: its name, a short description, the
+ * price and what it covers, the action under it and the list of what it includes. Cards in a row
+ * keep their actions level (the description and the price note keep their room) and stack in a
+ * column on a narrow screen: put them in a grid, `grid gap-6 md:grid-cols-3`, and place the
+ * monthly and yearly switch above it, a `SegmentedControl` of your own. The card computes
+ * nothing: a yearly price, "Save 20%" and the billed total are yours to pass.
+ *
+ * `highlighted` draws the plan to look at first, with a label from `highlightLabel`, and
+ * `current` the plan in use, whose button reads "Current plan" and is disabled. A feature the plan
+ * lacks is a muted dash with muted text, never struck through; a screen reader hears "Included:"
+ * or "Not included:" before each.
+ */
+declare const PlanCard: ({ name, description, price, currency, locale, period, priceNote, highlighted, highlightLabel, current, currentLabel, action, features, children, headingLevel, includedLabel, notIncludedLabel, className, ref, ...rest }: PlanCardProps) => react.JSX.Element;
+
 /** The meanings a card can carry: the plain one, or a metric that needs a look. */
 type KpiCardIntent = Extract<Intent, 'neutral' | 'warning' | 'danger'>;
+/** Where the `chart` goes: under the delta, or at the end of the line beside the value. */
+type KpiCardChartPosition = 'bottom' | 'end';
 type KpiCardProps = {
     label: string;
     value: ReactNode;
@@ -4985,10 +6049,24 @@ type KpiCardProps = {
     /** Under the value: normally a `<TrendDelta label="vs last month" />`. */
     delta?: ReactNode;
     /**
-     * Under the delta, the full width of the card: a `Sparkline`, mini bars, a ring. You size it.
-     * Cosmos does not couple `react` to `charts`, so the chart is yours to pass.
+     * A `Sparkline`, mini bars, a ring: by default under the delta, the full width of the card (see
+     * `chartPosition`). You size it. Cosmos does not couple `react` to `charts`, so the chart is yours
+     * to pass.
      */
     chart?: ReactNode;
+    /**
+     * Where the `chart` goes. `bottom` (default) is under the delta, the full width of the card.
+     * `end` sets it at the end of the line beside the value, delta and sub line, at its own size and
+     * centered on them: a `ProgressRing` next to a percentage. When the card is too narrow for both
+     * it drops under them, at the start of the line. Needs a `chart`.
+     */
+    chartPosition?: KpiCardChartPosition;
+    /**
+     * The one figure a dashboard leads with: the card takes the tinted surface of its meaning (the
+     * accent for `neutral`, else the intent's color), and its label, value and sub line stay readable
+     * on it in every theme. Default `false`: the plain card.
+     */
+    featured?: boolean;
     /**
      * Meaning of the metric. `warning` and `danger` take the border, the icon chip and the value
      * to the intent color; the background stays the card's. Default `neutral`.
@@ -5013,7 +6091,7 @@ type KpiCardProps = {
  * against a previous period and a chart. Use in dashboards as the top-row at-a-glance panel.
  * With `href` or `onClick` the whole card is one link or button.
  */
-declare const KpiCard: ({ label, value, exactValue, sub, icon: Icon, iconIntent, delta, chart, intent, loading, href, onClick, ref, className, }: KpiCardProps) => react.JSX.Element;
+declare const KpiCard: ({ label, value, exactValue, sub, icon: Icon, iconIntent, delta, chart, chartPosition, featured, intent, loading, href, onClick, ref, className, }: KpiCardProps) => react.JSX.Element;
 
 type TrendDeltaSize = 'sm' | 'md';
 type TrendDeltaProps = {
@@ -5123,6 +6201,9 @@ type MiniCalendarProps = {
  */
 declare const MiniCalendar: ({ today, selected: selectedProp, defaultSelected, onSelect, eventDays, locale, className, }: MiniCalendarProps) => react.JSX.Element;
 
+/** What the calendar shows: a month grid, a week of hours, or one day of hours. */
+type CalendarView = 'month' | 'week' | 'day';
+
 /**
  * An event's color: an `Intent`, or `violet`, a category color that carries no meaning of
  * its own.
@@ -5131,51 +6212,104 @@ type EventCalendarIntent = Extract<Intent, 'brand' | 'success' | 'warning' | 'da
 type CalendarEvent = {
     id: string;
     title: string;
-    /** First day of the event. Only the date is used, not the time. */
+    /**
+     * When the event starts. The month view uses its date and writes its time on the chip, unless
+     * the event is all-day; the week and day views put it at its time in the hour grid.
+     */
     start: Date;
-    /** Last day, inclusive. Omit for a one-day event. */
+    /**
+     * An all-day event: the last day, inclusive. A timed one: the moment it ends. Omit for an event
+     * that lasts no longer than its day (in the hour grid, one with no end is drawn at the
+     * minimum height).
+     */
     end?: Date;
+    /**
+     * An all-day event has a date and no time: it goes in the row above the hour grid and shows no
+     * time. Left unset, it is true when `start` is at 00:00 and `end` is missing or at 00:00, so an
+     * event made of dates alone stays all-day. Set it to force the answer either way (a timed event
+     * that starts at midnight is `allDay: false`).
+     */
+    allDay?: boolean;
     /** Dot and chip colour. Defaults to `brand`. */
     intent?: EventCalendarIntent;
 };
 type EventCalendarProps = {
     events: CalendarEvent[];
-    /** Month to show (any day in it). Set it with `onMonthChange` to control the calendar. */
-    month?: Date;
-    /** First month shown when `month` is not set. Defaults to the month of `today`. */
-    defaultMonth?: Date;
-    /** Fires with the first day of the month reached by previous / next / Today. */
-    onMonthChange?: (month: Date) => void;
-    /** Day highlighted as today, and where the Today button goes. Defaults to now. */
+    /** What is shown: `month` (default), `week` or `day`. Set it with `onViewChange` to control it. */
+    view?: CalendarView;
+    /** The view shown first when `view` is not set. Defaults to `month`. */
+    defaultView?: CalendarView;
+    /** Fires with the view picked in the toolbar. */
+    onViewChange?: (view: CalendarView) => void;
+    /** Day that sets the period shown (any day in it). Set it with `onDateChange` to control the calendar. */
+    date?: Date;
+    /** Day that sets the first period shown when `date` is not set. Defaults to `today`. */
+    defaultDate?: Date;
+    /**
+     * Fires with the first day of the period reached by previous / next / Today (the 1st of a month,
+     * the Monday of a week, the day itself), and by a change of view that lands on another period.
+     */
+    onDateChange?: (date: Date) => void;
+    /**
+     * The current moment. Its day is highlighted, Today goes to it, and the line of the week and day
+     * views sits at its time. Defaults to now, and the line moves every minute; set it to freeze it
+     * (stories, screenshots and tests).
+     */
     today?: Date;
     /** Makes each event chip a button. */
     onEventClick?: (event: CalendarEvent) => void;
     /** Makes each day number a button. */
     onDayClick?: (date: Date) => void;
     /**
-     * BCP 47 language tag (`'fr-FR'`) for the weekday names, the month title and the
+     * Makes the empty time slots of the week and day views interactive: a click on one, or Enter on
+     * the keyboard cursor, calls it with the start of the 30-minute slot. `info.allDay` is `true`
+     * for a click on the all-day row, whose start is 00:00. With it set, the hour grid is a single
+     * tab stop for a cursor on the slots: the arrow keys move it a day or 30 minutes, Page Up and
+     * Page Down a week (a day, in the day view), Home and End to the first and the last slot of
+     * the day.
+     */
+    onSlotClick?: (start: Date, info: {
+        allDay: boolean;
+    }) => void;
+    /**
+     * BCP 47 language tag (`'fr-FR'`) for the weekday names, the titles, the times and the
      * date in the accessible name of each day and of its "+N more" list. Defaults to
      * the browser's locale. The grid itself stays Gregorian, weeks starting on
      * Monday, whatever the locale. The button labels (Today, Previous month, Next
      * month, "+N more") stay English. An invalid tag throws a `RangeError`.
      */
     locale?: string;
-    /** Shown under the grid when no event falls in the shown month. Default `No events this month`. */
+    /**
+     * Shown under the grid when no event falls in the period shown. Default `No events this month`,
+     * `No events this week` or `No events this day`.
+     */
     emptyMessage?: ReactNode;
+    /**
+     * Classes of the card. The week and day views are as tall as the card is: give it a height
+     * (`h-[640px]`) and the hour grid scrolls inside it; without one the grid is 36rem tall.
+     */
     className?: string;
 };
 /**
- * EventCalendar — month view of events, with ISO weeks (Monday first).
+ * EventCalendar — events in a month grid, a week of hours or a day of hours, with ISO weeks
+ * (Monday first).
  *
- * Each day shows up to three event chips (a color dot and the title) and a
- * "+N more" button that lists the whole day. An event with an `end` shows its title on
- * its first day and a bare chip on each following day. Below `sm` the weekday names shrink
- * to a letter, the chips to their dots, and picking a day lists its events under the grid.
+ * The month shows up to three event chips a day (a color dot, the time and the title) and a
+ * "+N more" button that lists the whole day. An all-day event has no time; a timed one writes its
+ * start time before the title. An event with an `end` shows its title on its first day and a bare
+ * chip on each following day. Below `sm` the weekday names shrink to a letter, the chips to their
+ * dots, and picking a day lists its events under the grid.
  *
- * Uncontrolled by default; pass `month` with `onMonthChange` to drive it from
- * outside (a side MiniCalendar, or loading events per month).
+ * The week and day views draw a scrolling grid of 24 hours, 48px each, opened at 7 AM (or an hour
+ * before the first event). All-day events sit in a row above it; timed ones are placed at their
+ * time, side by side when they overlap, as many as the width allows (72px each, two at least),
+ * the rest behind a "+N" button. A line marks the current time. Below `sm` a week is a strip of
+ * its seven days and the grid of the picked day.
+ *
+ * Uncontrolled by default; pass `date` with `onDateChange`, and `view` with `onViewChange`, to
+ * drive it from outside (a side MiniCalendar, or loading events per period).
  */
-declare const EventCalendar: ({ events, month, defaultMonth, onMonthChange, today, onEventClick, onDayClick, locale, emptyMessage, className, }: EventCalendarProps) => react.JSX.Element;
+declare const EventCalendar: ({ events, view: viewProp, defaultView, onViewChange, date, defaultDate, onDateChange, today, onEventClick, onDayClick, onSlotClick, locale, emptyMessage, className, }: EventCalendarProps) => react.JSX.Element;
 
 type IntegrationStatus = 'connected' | 'available' | 'error' | 'pending';
 type IntegrationCardProps = {
@@ -6180,11 +7314,14 @@ type TableAmountCellProps = {
 /**
  * TableAmountCell — a signed amount tinted by its sign: green for a gain, red for a loss, plain
  * for zero. The sign is written too, so the colour is never the only cue. Put it in a numeric
- * column (`align="end"`, or `numeric` on `TableCell`).
+ * column (`align="end"`, or `numeric` on `TableCell`). It is an `Amount` with a plus in front of
+ * a gain (`signDisplay="exceptZero"`), so it writes the figure as the rest of the page does.
  */
 declare const TableAmountCell: ({ value, currency, locale, format }: TableAmountCellProps) => react.JSX.Element;
 
 type AuthLayoutVariant = 'card' | 'split' | 'cover';
+/** The width of the card (or of the form column in `split`): the `Modal` widths. */
+type AuthLayoutSize = 'md' | 'lg' | 'xl';
 type AuthLayoutProps = {
     /** Brand icon component (lucide). Renders inside a brand-colored square above the title. */
     logo?: ComponentType<{
@@ -6206,6 +7343,12 @@ type AuthLayoutProps = {
      * `h1`. A `brand` node of your own is rendered as written.
      */
     variant?: AuthLayoutVariant;
+    /**
+     * Width of the card, or of the form column in `split`: `md` (448px, default), `lg` (512px) or
+     * `xl` (672px), the widths of `Modal`'s sizes. `lg` and `xl` pad the card by 24px below `sm`
+     * and 32px from there, `md` keeps its 32px. A wide card suits a step of an onboarding wizard.
+     */
+    size?: AuthLayoutSize;
     /**
      * `split` only: the panel beside the form, from `lg` up (hidden below, where the brand block
      * shows above the form instead). Without it, a panel on the brand accent with the `logo`,
@@ -6240,7 +7383,7 @@ type AuthLayoutProps = {
  *
  * `variant="split"` and `variant="cover"` keep the same brand block and children; see the props.
  */
-declare const AuthLayout: ({ logo: Logo, title, subtitle, brand, variant, aside, asidePosition, cover, children, className, }: AuthLayoutProps) => react.JSX.Element;
+declare const AuthLayout: ({ logo: Logo, title, subtitle, brand, variant, size, aside, asidePosition, cover, children, className, }: AuthLayoutProps) => react.JSX.Element;
 
 type ErrorPageProps = {
     /**
@@ -6278,6 +7421,56 @@ type ErrorPageProps = {
  */
 declare const ErrorPage: ({ code, title, description, illustration, actions, className, }: ErrorPageProps) => react.JSX.Element;
 
+/** `form` asks for the password, `expired` is a link that no longer works, `done` is the end. */
+type NewPasswordFormView = 'form' | 'expired' | 'done';
+type NewPasswordFormProps = {
+    /** Called with the new password once it follows the `rules` and the confirmation matches. */
+    onSubmit: (password: string) => void | Promise<void>;
+    /** Which screen to show. Default `form`. */
+    view?: NewPasswordFormView;
+    /** `expired`: where to ask for another link. Without it, the view has no link to follow. */
+    requestHref?: string;
+    requestLabel?: string;
+    /** `form` and `expired`: where "Back to sign in" goes; `done`: where "Continue to sign in" goes. */
+    signInHref?: string;
+    signInLabel?: string;
+    /** `done`: the label of the link to the sign-in page. */
+    continueLabel?: string;
+    /**
+     * The password policy: what the rules say of a password, listed live under the field. Default
+     * `defaultPasswordRules`. The form stays closed until they all hold; a list that comes back
+     * empty shows none and asks for a non-empty password only.
+     */
+    rules?: (password: string) => PasswordRule[];
+    /**
+     * Scores a password from 0 to 4 (zxcvbn's scale). Given, a `PasswordStrengthMeter` shows under
+     * the field once something is typed. Cosmos bundles no estimator: see the docs.
+     */
+    strength?: (password: string) => number;
+    loading?: boolean;
+    error?: string;
+    title?: string;
+    description?: string;
+    submitLabel?: string;
+    className?: string;
+};
+/**
+ * The page the e-mail link of `ResetPasswordForm` opens: a new password and its confirmation, then
+ * a confirmation screen, or an offer to ask for another link when this one has expired. Each
+ * screen is its own `h1`.
+ */
+declare const NewPasswordForm: ({ onSubmit, view, requestHref, requestLabel, signInHref, signInLabel, continueLabel, rules: rulesOf, strength, loading, error, title, description, submitLabel, className, }: NewPasswordFormProps) => react.JSX.Element;
+
+/** The words of a resend button that waits between two presses. */
+type ResendLabels = {
+    /** Said when a press sends again, and shown until the wait ends. */
+    resent?: string;
+    /** Said once, when the wait ends and the button works again. */
+    ready?: string;
+    /** What the button is waiting for, as its description: "available in 0:30". */
+    availableIn?: (seconds: number) => string;
+};
+
 type ResetPasswordFormProps = {
     onSubmit: (email: string) => void | Promise<void>;
     signInHref?: string;
@@ -6294,9 +7487,19 @@ type ResetPasswordFormProps = {
     /** Resend handler in the `sent` view. Hidden if not provided. */
     onResend?: () => void;
     resendLabel?: string;
+    /**
+     * Seconds the resend button waits before it can be pressed again, from the moment the `sent`
+     * view shows (the e-mail was just sent) and from each press. Default `0`: no wait. While it
+     * waits the button is `aria-disabled` and keeps focus, the countdown is its description, and a
+     * polite status says when a new link went out and when the wait is over. The server stays the
+     * authority: show its refusal (a 429) through `error`.
+     */
+    resendCooldown?: number;
+    /** The words of the resend wait, to translate with the rest of the page. */
+    resendLabels?: ResendLabels;
     className?: string;
 };
-declare const ResetPasswordForm: ({ onSubmit, signInHref, signInLabel, sent, sentEmail, loading, error, title, description, submitLabel, onResend, resendLabel, className, }: ResetPasswordFormProps) => react.JSX.Element;
+declare const ResetPasswordForm: ({ onSubmit, signInHref, signInLabel, sent, sentEmail, loading, error, title, description, submitLabel, onResend, resendLabel, resendCooldown, resendLabels: resendWords, className, }: ResetPasswordFormProps) => react.JSX.Element;
 
 type SignInFormValues = {
     email: string;
@@ -6339,6 +7542,17 @@ type SignUpFormProps = {
     privacyHref?: string;
     /** Show PasswordPolicyChecker live below the password field. Default `true`. */
     showPolicy?: boolean;
+    /**
+     * The password policy: what the rules say of a password. Default `defaultPasswordRules`. They
+     * are listed once something is typed and keep the form closed until they all hold, unless
+     * `showPolicy` is `false`.
+     */
+    rules?: (password: string) => PasswordRule[];
+    /**
+     * Scores a password from 0 to 4 (zxcvbn's scale). Given, a `PasswordStrengthMeter` shows under
+     * the field once something is typed. Cosmos bundles no estimator: see the docs.
+     */
+    strength?: (password: string) => number;
     loading?: boolean;
     error?: string;
     title?: string;
@@ -6348,7 +7562,7 @@ type SignUpFormProps = {
     extraTop?: ReactNode;
     className?: string;
 };
-declare const SignUpForm: ({ onSubmit, signInHref, signInLabel, termsHref, privacyHref, showPolicy, loading, error, title, description, submitLabel, extraTop, className, }: SignUpFormProps) => react.JSX.Element;
+declare const SignUpForm: ({ onSubmit, signInHref, signInLabel, termsHref, privacyHref, showPolicy, rules: rulesOf, strength, loading, error, title, description, submitLabel, extraTop, className, }: SignUpFormProps) => react.JSX.Element;
 
 type SocialProvider = 'google' | 'github' | 'x' | 'facebook' | 'apple' | 'microsoft';
 type SocialAuthButtonsLayout = 'stacked' | 'grid';
@@ -6370,15 +7584,57 @@ type SocialAuthButtonsProps = {
 };
 declare const SocialAuthButtons: ({ providers, onProviderClick, loading, divider, dividerLabel, layout, labelFor, position, className, }: SocialAuthButtonsProps) => react.JSX.Element | null;
 
+/** How the person proves who they are: the verification `code`, or a `backup` code they saved. */
+type TwoStepMethod = 'code' | 'backup';
+/** The words of the backup entry and of the resend wait, to translate with the rest of the page. */
+type TwoStepVerificationLabels = ResendLabels & {
+    /** The link to the backup entry. Default "Use a backup code". */
+    useBackupCode?: string;
+    /** The link back to the verification code. Default "Use a verification code instead". */
+    useVerificationCode?: string;
+    /** Title of the backup entry. Default "Use a backup code". */
+    backupTitle?: string;
+    /** Description of the backup entry. */
+    backupDescription?: string;
+    /** Label of the backup field. Default "Backup code". */
+    backupField?: string;
+};
 type TwoStepVerificationFormProps = {
-    onSubmit: (code: string) => void | Promise<void>;
+    /**
+     * Called with the code and the method it was typed for. The `backup` code is passed as typed,
+     * trimmed: no length or format is checked, the host's server says if it is good.
+     */
+    onSubmit: (code: string, method: TwoStepMethod) => void | Promise<void>;
     onResend?: () => void;
+    /**
+     * Seconds the resend button waits before it can be pressed again, from the moment the form
+     * shows (a code was just sent) and from each press. Default `0`: no wait. While it waits the
+     * button is `aria-disabled` and keeps focus, the countdown is its description, and a polite
+     * status says when a new code went out and when the wait is over. The server stays the
+     * authority: show its refusal (a 429) through `error`.
+     */
+    resendCooldown?: number;
+    /** Offer the link that switches to the backup-code entry, and back. Default `false`. */
+    backupCode?: boolean;
+    /**
+     * The entry shown: the verification `code` (default) or a `backup` code. Set it, with
+     * `onMethodChange`, to own it; the link asks, the host answers.
+     */
+    method?: TwoStepMethod;
+    /** The entry shown first, while uncontrolled. Default `code`. */
+    defaultMethod?: TwoStepMethod;
+    onMethodChange?: (method: TwoStepMethod) => void;
+    labels?: TwoStepVerificationLabels;
     /** Email/phone where the code was sent — shown in the description. */
     sentTo?: string;
     length?: number;
     loading?: boolean;
+    /**
+     * What went wrong: a banner above the cells, or under the field on the backup entry, where it
+     * should not say if the code was already used.
+     */
     error?: string;
-    /** Trigger onSubmit automatically when the user fills the last cell. Default `true`. */
+    /** `code` only: trigger onSubmit automatically when the user fills the last cell. Default `true`. */
     autoSubmit?: boolean;
     cancelHref?: string;
     cancelLabel?: string;
@@ -6387,7 +7643,7 @@ type TwoStepVerificationFormProps = {
     resendLabel?: string;
     className?: string;
 };
-declare const TwoStepVerificationForm: ({ onSubmit, onResend, sentTo, length, loading, error, autoSubmit, cancelHref, cancelLabel, title, submitLabel, resendLabel, className, }: TwoStepVerificationFormProps) => react.JSX.Element;
+declare const TwoStepVerificationForm: ({ onSubmit, onResend, resendCooldown, backupCode, method: methodProp, defaultMethod, onMethodChange, labels, sentTo, length, loading, error, autoSubmit, cancelHref, cancelLabel, title, submitLabel, resendLabel, className, }: TwoStepVerificationFormProps) => react.JSX.Element;
 
 type ColorSwatchProps = {
     /** Color hex (e.g. `#465fff`). */
@@ -6893,6 +8149,27 @@ type BlockquoteProps = {
 };
 declare const Blockquote: ({ children, variant, size, align, author, role, authorAvatar, className, }: BlockquoteProps) => react.JSX.Element;
 
+type HighlightProps = {
+    /** The text. It is drawn as text: markup in it shows as written. */
+    text: string;
+    /**
+     * What was searched for. Each word (split on spaces) is marked wherever it occurs in `text`,
+     * whatever its case, and every character in it is plain text, never a pattern. Nothing is marked
+     * for an empty query.
+     */
+    query: string;
+};
+/**
+ * `Highlight` — `text` with the words of `query` wrapped in `<mark>`, for a search result or a
+ * filtered list. It renders inline and takes the style of where it sits, so it goes inside a
+ * heading, a link or a table cell:
+ *
+ *     <Highlight text="Disk alert on rack B4" query="alert" />
+ *
+ * Built from text nodes and `<mark>` elements only, never `dangerouslySetInnerHTML`.
+ */
+declare const Highlight: ({ text, query }: HighlightProps) => react.JSX.Element;
+
 type KbdSize = 'sm' | 'md';
 type KbdProps = {
     children: ReactNode;
@@ -7174,6 +8451,14 @@ type ChatConversation = {
     unread?: number;
     presence?: ChatPresence;
     avatarSrc?: string;
+    /**
+     * Drawn in place of the `Avatar` that `name` and `avatarSrc` make: an `AvatarGroup` or an
+     * `IconBox` for a group conversation. It sits in a 40px-high slot, centered, and a node
+     * wider than 40px pushes the text along. The `presence` dot still marks its end corner.
+     * Hidden from assistive technology, as the picture of the conversation: the row is named by
+     * `name`, so a stack of members does not turn into a long list of names to read.
+     */
+    avatar?: ReactNode;
 };
 type ChatConversationListProps = {
     conversations: ChatConversation[];
@@ -7186,7 +8471,9 @@ type ChatConversationListProps = {
 };
 /**
  * Conversation picker for the start pane of a two-pane chat: name, last
- * message, time, unread count and presence of each thread.
+ * message, time, unread count and presence of each thread. A conversation
+ * with an `avatar` node (a group, a channel) shows it in place of the avatar
+ * made from its name.
  */
 declare const ChatConversationList: ({ conversations, selectedId, onSelect, label, className, }: ChatConversationListProps) => react.JSX.Element;
 
@@ -7917,5 +9204,5 @@ declare const countLogLevels: (lines: readonly LogLine[]) => Record<LogLevelKey,
  */
 declare const filterLogLines: (lines: readonly LogLine[], levels?: readonly LogLevelKey[], sources?: readonly string[]) => readonly LogLine[];
 
-export { AccentPicker, Accordion, ActionPanel, ActiveFiltersBar, ActivityFeed, AlertBanner, AnnouncementBar, AppearanceMenu, AppearanceSettings, AuditDiff, AuthLayout, Avatar, AvatarGroup, AvatarUploader, BEAT_NAME, BEAT_STATUSES, BackToTopFab, Backdrop, Badge, BarList, Blockquote, Breadcrumb, Button, ButtonGroup, COSMOS_ACCENTS, COSMOS_DENSITIES, COSMOS_FONTS, COSMOS_RADII, COSMOS_SYSTEM_THEME, COSMOS_TEXT_SIZES, COSMOS_THEMES, CUSTOMIZER_DEFAULT_VALUE, CUSTOMIZER_SECTIONS, Calendar, Card, Carousel, CarouselRoot, ChatComposer, ChatConversationList, ChatDaySeparator, ChatMessage, ChatMessageActions, ChatSources, ChatSuggestions, ChatThread, ChatToolCall, ChatTypingIndicator, Chatbot, Checkbox, CheckboxGroup, Clipboard, Clock, ColBox, ColorInput, ColorSwatch, ColumnFilterDropdown, ColumnHeader, Combobox, CommandPalette, CommandPaletteTrigger, Comment, CommentComposer, CommentThread, ConfirmationModal, ContentNarrow, CookieBanner, Countdown, Customizer, DEFAULT_THRESHOLDS, DataTable, DatePicker, DateTime, DescriptionList, Divider, Drawer, Dropdown, Dropzone, EmptyState, ErrorPage, ErrorState, EventCalendar, FieldSize, Figure, FileInput, FileTile, FormFooter, FormRow, GridList, HealthBadge, HealthCheckList, HealthDot, HealthMatrix, HealthSummary, HeartbeatBar, HelpOverlay, IconBox, ImageGrid, Input, IntegrationCard, Intent, JobLog, KanbanBoard, Kbd, KpiCard, LOG_LEVELS, LOG_LEVEL_KEYS, LOG_LEVEL_LABEL, Link, LinkProvider, List, LoadingState, LogEntryDetail, LogLevelBadge, LogToolbar, LogViewer, MediaObject, Menu, MiniCalendar, Modal, MonitorRow, MultiSelect, Navbar, NotificationCard, NotificationsPanel, NumberInput, OptionCard, OptionPicker, OtpInput, PageActionButton, PageActionIconButton, PageContainer, PageHeader, Pagination, PaletteCard, PalettePicker, PasswordInput, PasswordPolicyChecker, PhoneInput, PipelineStages, Popover, ProfileHeader, ProgressBar, ProgressRing, REFRESH_OPTIONS, Radio, RadioGroup, Rating, RecordPager, RefreshButton, RelativeTime, ResetPasswordForm, Ribbon, Row, RowActionButton, RowActionsMenu, SEVERITY_ORDER, STATUS_DOT, STATUS_NAME, STATUS_PILL, SearchInput, SecretValue, SectionCard, SectionLabel, SegmentedControl, Select, Shell, Sidebar, SidebarToggle, SignInForm, SignUpForm, Sk, SkeletonAvatarText, SkeletonList, SkeletonTable, SkeletonText, Slider, SocialAuthButtons, Spinner, SplitView, StackedList, StatefulSaveButton, StatusBadge, Stepper, StepperRoot, StickyScrollNav, Table, TableAmountCell, TableBody, TableCaption, TableCell, TableDescriptionCell, TableFoot, TableHead, TableHeaderCell, TableIdCell, TableIdentityCell, TableRow, TableSkeletonRows, Tabs, Tag, TagInput, Textarea, ThemeToggle, ThemeToggleTri, TimePicker, Timeline, Toaster, Toggle, Tooltip, TooltipHelp, Topbar, TrendDelta, TwoStepVerificationForm, UnsavedIndicator, UploadQueue, UptimeBars, UptimeStat, UserMenu, VerticalNavigation, VideoEmbed, ZoomBar, applyAppearance, compareSeverity, countLogLevels, defaultPasswordRules, filterLogLines, flattenChecks, formatUptime, groupWorst, isDarkTheme, jobLogLineHref, parseJobLogHash, parseLogLevel, resolveTheme, resolveThresholds, systemPrefersDark, toCsv, uptimeLevel, useAutoRefresh, useSplitView, watchSystemTheme, worstStatus };
-export type { AccentColor, AccentPickerProps, AccordionContentProps, AccordionItemProps, AccordionProps, AccordionSize, AccordionTriggerProps, ActionPanelLayout, ActionPanelProps, ActiveFilter, ActiveFiltersBarProps, ActivityFeedIntent, ActivityFeedItemProps, ActivityFeedProps, AlertBannerAppearance, AlertBannerBodyTone, AlertBannerIntent, AlertBannerProps, AnnouncementBarIntent, AnnouncementBarProps, AppearanceMenuProps, AppearanceMenuSize, AppearanceSettingsProps, AuditChange, AuditDiffLabels, AuditDiffProps, AuditDiffVariant, AuthLayoutProps, AuthLayoutVariant, AvatarGroupProps, AvatarProps, AvatarRing, AvatarShape, AvatarSize, AvatarStatus, AvatarUploaderProps, AvatarUploaderSize, BackToTopFabIntent, BackToTopFabPosition, BackToTopFabProps, BackdropProps, BadgeAppearance, BadgeProps, BadgeShape, BadgeSize, BarListIntent, BarListItem, BarListProps, Beat, BeatStatus, BlockquoteAlign, BlockquoteProps, BlockquoteSize, BlockquoteVariant, BreadcrumbItem, BreadcrumbProps, BreadcrumbSeparator, ButtonGroupOrientation, ButtonGroupProps, ButtonIntent, ButtonProps, ButtonShape, ButtonSize, ButtonVariant, CalendarEvent, CalendarProps, CardImageProps, CardOrientation, CardProps, CarouselControlsProps, CarouselIndicatorsProps, CarouselOptions, CarouselProps, CarouselSlideProps, CarouselThumbnailsProps, CarouselViewportProps, CellEditor, ChatComposerProps, ChatConversation, ChatConversationListProps, ChatDaySeparatorProps, ChatFeedback, ChatMessageActionsProps, ChatMessageDirection, ChatMessageProps, ChatMessageStatus, ChatPresence, ChatSource, ChatSourcesProps, ChatSuggestionsProps, ChatThreadProps, ChatToolCallProps, ChatToolCallStatus, ChatTypingIndicatorProps, ChatbotMessage, ChatbotProps, CheckboxGroupOption, CheckboxGroupProps, CheckboxProps, CheckboxSize, ClipboardProps, ClipboardSize, ClipboardVariant, ClockProps, ClockVariant, ColBoxProps, ColorInputProps, ColorPreset, ColorSwatchProps, ColumnDef, ColumnEdit, ColumnFilterDropdownProps, ColumnHeaderProps, ColumnPin, ComboboxOption, ComboboxProps, CommandPaletteFooterProps, CommandPaletteGroupProps, CommandPaletteInputProps, CommandPaletteItemProps, CommandPaletteListProps, CommandPaletteProps, CommandPaletteTriggerProps, CommentComposerMode, CommentComposerProps, CommentLabels, CommentProps, CommentThreadProps, CommentVariant, ConfirmationModalProps, ContentNarrowProps, CookieBannerPosition, CookieBannerProps, CosmosAccent, CosmosAccentMeta, CosmosAppearance, CosmosDensity, CosmosDensityMeta, CosmosDirection, CosmosFont, CosmosFontMeta, CosmosRadius, CosmosRadiusMeta, CosmosSystemThemeMeta, CosmosSystemThemes, CosmosTextSize, CosmosTextSizeMeta, CosmosTheme, CosmosThemeChoice, CosmosThemeMeta, CosmosToasterProps, CountdownProps, CountdownUnit, CountdownVariant, CustomizerLayout, CustomizerPreset, CustomizerProps, CustomizerSection, CustomizerSidebar, CustomizerValue, DataTableBulkAction, DataTableDensity, DataTableExportQuery, DataTableFilterTabOption, DataTableFilterTabsConfig, DataTableProps, DataTableSort, DataTableView, DatePickerMode, DatePickerProps, DateRange, DateTimeFormat, DateTimeProps, DescriptionListItemProps, DescriptionListProps, DividerAlign, DividerIconProps, DividerProps, DividerRowProps, DrawerHeaderProps, DrawerProps, DrawerSide, DrawerSize, DropdownDivider, DropdownItem, DropdownOption, DropdownProps, DropzoneProps, DropzoneRejection, EmptyStateIntent, EmptyStateProps, ErrorPageProps, ErrorStateProps, EventCalendarIntent, EventCalendarProps, FigureAlign, FigureProps, FigureRadius, FigureSize, FileInputProps, FileKind, FileTileLayout, FileTileProps, FormFooterAlign, FormFooterProps, FormRowProps, GridListCardProps, GridListCols, GridListFooterActionProps, GridListFooterProps, GridListProps, HealthBadgeProps, HealthCheck, HealthCheckGroup, HealthCheckListProps, HealthDotProps, HealthMatrixCell, HealthMatrixColumn, HealthMatrixProps, HealthMatrixRow, HealthStatus, HealthSummaryProps, HeartbeatBarProps, HeartbeatBarSize, HeartbeatBarVariant, HelpOverlayProps, HelpOverlaySectionProps, HelpOverlayShortcutProps, IconBoxProps, IconBoxSize, ImageGridColumns, ImageGridGap, ImageGridItemProps, ImageGridLayout, ImageGridProps, InputProps, IntegrationCardProps, IntegrationStatus, JobLogControl, JobLogLine, JobLogLineRef, JobLogProps, JobLogStep, JobLogTimestampFormat, JobStatus, KanbanBoardProps, KanbanCard, KanbanColumn, KanbanMove, KbdProps, KbdSize, KpiCardIntent, KpiCardProps, LinkComponent, LinkComponentProps, LinkIntent, LinkProps, LinkProviderProps, LinkVariant, ListItemProps, ListMarker, ListOrientation, ListProps, ListSpacing, ListVariant, LoadingStateProps, LogColumn, LogDensity, LogEntryContext, LogEntryDetailProps, LogLevel, LogLevelBadgeProps, LogLevelKey, LogLine, LogLineId, LogOrder, LogTone, LogToolbarProps, LogViewerProps, MediaObjectAlign, MediaObjectBodyProps, MediaObjectImageProps, MediaObjectPosition, MediaObjectProps, MenuCheckboxItemProps, MenuContentProps, MenuGroupProps, MenuItemIntent, MenuItemProps, MenuProps, MenuRadioItemProps, MenuTriggerProps, MiniCalendarProps, ModalAlertIntent, ModalAlertLayout, ModalAlertProps, ModalHeaderProps, ModalProps, ModalSize, MonitorRowProps, MonitorState, MultiSelectOption, MultiSelectProps, NavbarItemProps, NavbarItemsProps, NavbarMenuProps, NavbarMobileMenuButtonProps, NavbarProps, NavbarTheme, NotificationCardCondensedProps, NotificationCardSimpleProps, NotificationIntent, NotificationsPanelContentProps, NotificationsPanelCountersProps, NotificationsPanelEmptyProps, NotificationsPanelFooterProps, NotificationsPanelHeaderActionProps, NotificationsPanelHeaderProps, NotificationsPanelIntent, NotificationsPanelItemProps, NotificationsPanelListProps, NotificationsPanelProps, NotificationsPanelTriggerProps, NumberInputProps, OptionCardProps, OptionItem, OptionPickerProps, OtpInputProps, PageActionButtonProps, PageActionIconButtonProps, PageActionIntent, PageActionVariant, PageContainerProps, PageContainerWidth, PageHeaderMetaItemProps, PageHeaderProps, PaginationPrevNextLabel, PaginationProps, PaginationSize, PaginationVariant, PaletteCardProps, PaletteMeta, PalettePickerProps, PalettePreview, PasswordInputProps, PasswordPolicyCheckerProps, PasswordRule, PhoneInputProps, PipelineStage, PipelineStageIntent, PipelineStagesProps, PopoverAlign, PopoverContentProps, PopoverPosition, PopoverProps, PopoverTriggerProps, ProfileHeaderProps, ProfileHeaderStat, ProgressBarIntent, ProgressBarLabel, ProgressBarProps, ProgressBarSegment, ProgressBarSize, ProgressRingIntent, ProgressRingProps, ProgressRingSize, RadioGroupOption, RadioGroupProps, RadioProps, RadioSize, RatingProps, RecordPagerHotkeys, RecordPagerLabels, RecordPagerProps, RecordPagerVariant, RefreshButtonProps, RefreshOption, RelativeTimeProps, ResetPasswordFormProps, RibbonIntent, RibbonPosition, RibbonProps, RibbonShape, RowActionButtonProps, RowActionsMenuProps, RowProps, SaveState, SearchInputProps, SecretValueProps, SectionCardProps, SectionLabelProps, SegmentOption, SegmentedControlProps, SegmentedProgressBarProps, SelectOption, SelectProps, ShellContainer, ShellProps, SidebarGroupProps, SidebarItemProps, SidebarProps, SidebarSectionProps, SidebarToggleProps, SidebarToggleVariant, SidebarVariant, SignInFormProps, SignInFormValues, SignUpFormProps, SignUpFormValues, SingleProgressBarProps, SkProps, SkeletonAvatarTextProps, SkeletonListProps, SkeletonTableProps, SkeletonTextProps, SliderIntent, SliderProps, SliderValue, SocialAuthButtonsLayout, SocialAuthButtonsProps, SocialProvider, SortDirection, SpinnerIntent, SpinnerProps, SpinnerSize, SplitViewBreakpoint, SplitViewPaneProps, SplitViewProps, StackedListHeaderProps, StackedListItemProps, StackedListProps, StatefulSaveButtonProps, StatusBadgeProps, StepStatus, StepperOrientation, StepperProps, StepperSize, StepperStepProps, StepperVariant, StickyScrollNavProps, StickyScrollNavSection, TabProps, TableAmountCellProps, TableBodyProps, TableCaptionProps, TableCellProps, TableDescriptionCellProps, TableFootProps, TableHeadProps, TableHeaderCellProps, TableIdCellProps, TableIdentityCellProps, TableProps, TableRowProps, TableSkeletonRowsProps, TabsOrientation, TabsProps, TabsVariant, TagInputProps, TagProps, TagSize, TextareaProps, TextareaResize, ThemeMode, ThemeModeChoice, ThemeToggleProps, ThemeToggleSize, ThemeToggleTriProps, ThemeToggleTriSize, TimePickerProps, TimelineIntent, TimelineItem, TimelineProps, TimelineVariant, ToggleProps, ToggleSize, TooltipIntent, TooltipPosition, TooltipProps, TooltipVariant, TopbarProps, TrendDeltaProps, TrendDeltaSize, TwoStepVerificationFormProps, UnsavedIndicatorProps, UploadQueueItem, UploadQueueProps, UploadStatus, UptimeBarsPeriod, UptimeBarsProps, UptimeCertificate, UptimeDay, UptimeLevel, UptimePeriod, UptimeStatProps, UptimeThresholds, UserMenuContentProps, UserMenuHeaderProps, UserMenuItemIntent, UserMenuItemProps, UserMenuProps, UserMenuTriggerProps, VerticalNavigationItemProps, VerticalNavigationProps, VerticalNavigationSectionProps, VideoEmbedAspect, VideoEmbedProps, ZoomBarProps };
+export { AccentPicker, Accordion, ActionPanel, ActiveFiltersBar, ActivityFeed, AlertBanner, Amount, AnnouncementBar, AppearanceMenu, AppearanceSettings, AuditDiff, AuthLayout, Avatar, AvatarGroup, AvatarUploader, BEAT_NAME, BEAT_STATUSES, BackToTopFab, Backdrop, Badge, BarList, Blockquote, Breadcrumb, Button, ButtonGroup, COSMOS_ACCENTS, COSMOS_DENSITIES, COSMOS_FONTS, COSMOS_RADII, COSMOS_SYSTEM_THEME, COSMOS_TEXT_SIZES, COSMOS_THEMES, CUSTOMIZER_DEFAULT_VALUE, CUSTOMIZER_SECTIONS, Calendar, Card, CardCvcInput, CardExpiryInput, CardFields, CardNumberInput, Carousel, CarouselRoot, ChatComposer, ChatConversationList, ChatDaySeparator, ChatMessage, ChatMessageActions, ChatSources, ChatSuggestions, ChatThread, ChatToolCall, ChatTypingIndicator, Chatbot, Checkbox, CheckboxGroup, Clipboard, Clock, ColBox, ColorInput, ColorSwatch, ColumnFilterDropdown, ColumnHeader, Combobox, CommandPalette, CommandPaletteTrigger, Comment, CommentComposer, CommentThread, ConfirmationModal, ContentNarrow, CookieBanner, Countdown, Customizer, DEFAULT_THRESHOLDS, DataTable, DatePicker, DateTime, DescriptionList, Divider, Drawer, Dropdown, Dropzone, EmptyState, ErrorPage, ErrorState, ErrorSummary, EventCalendar, FieldSize, Figure, FileInput, FileTile, FormFooter, FormRow, GridList, HealthBadge, HealthCheckList, HealthDot, HealthMatrix, HealthSummary, HeartbeatBar, HelpOverlay, Highlight, IconBox, ImageGrid, Input, IntegrationCard, Intent, JobLog, KanbanBoard, Kbd, KpiCard, LOG_LEVELS, LOG_LEVEL_KEYS, LOG_LEVEL_LABEL, Lightbox, LineItemsEditor, Link, LinkProvider, List, LoadingState, LogEntryDetail, LogLevelBadge, LogToolbar, LogViewer, MediaObject, Menu, MiniCalendar, Modal, MonitorRow, MultiSelect, Navbar, NewPasswordForm, NotificationCard, NotificationRow, NotificationsPanel, NumberInput, OptionCard, OptionPicker, OtpInput, PageActionButton, PageActionIconButton, PageContainer, PageHeader, Pagination, PaletteCard, PalettePicker, PasswordInput, PasswordPolicyChecker, PasswordStrengthMeter, PermissionGrid, PhoneInput, PipelineStages, PlanCard, Popover, ProfileHeader, ProgressBar, ProgressRing, REFRESH_OPTIONS, Radio, RadioGroup, Rating, RecordPager, RefreshButton, RelativeTime, ResetPasswordForm, Ribbon, Row$1 as Row, RowActionButton, RowActionsMenu, SEVERITY_ORDER, STATUS_DOT, STATUS_NAME, STATUS_PILL, SearchInput, SecretValue, SectionCard, SectionLabel, SegmentedControl, Select, Shell, Sidebar, SidebarToggle, SignInForm, SignUpForm, SiteFooter, Sk, SkeletonAvatarText, SkeletonList, SkeletonTable, SkeletonText, Slider, SocialAuthButtons, Spinner, SplitView, StackedList, StatefulSaveButton, StatusBadge, Stepper, StepperRoot, StickyScrollNav, Table, TableAmountCell, TableBody, TableCaption, TableCell, TableDescriptionCell, TableFoot, TableHead, TableHeaderCell, TableIdCell, TableIdentityCell, TableRow, TableSkeletonRows, Tabs, Tag, TagInput, Textarea, ThemeToggle, ThemeToggleTri, TimePicker, Timeline, Toaster, Toggle, Tooltip, TooltipHelp, Topbar, Totals, TrendDelta, TwoStepVerificationForm, UnsavedIndicator, UploadQueue, UptimeBars, UptimeStat, UserMenu, VerticalNavigation, VideoEmbed, ZoomBar, applyAppearance, cardBrand, cardCvcLength, cardNumberLengths, cellKey, compareSeverity, countLogLevels, defaultPasswordRules, expiryValid, filterLogLines, flattenChecks, formatMoney, formatUptime, groupWorst, isDarkTheme, jobLogLineHref, luhnValid, parseJobLogHash, parseLogLevel, resolveTheme, resolveThresholds, summarizeLineItems, systemPrefersDark, toCsv, uptimeLevel, useAutoRefresh, useSplitView, watchSystemTheme, worstStatus };
+export type { AccentColor, AccentPickerProps, AccordionContentProps, AccordionItemProps, AccordionProps, AccordionSize, AccordionTriggerProps, ActionPanelLayout, ActionPanelProps, ActiveFilter, ActiveFiltersBarProps, ActivityFeedIntent, ActivityFeedItemProps, ActivityFeedProps, AlertBannerAppearance, AlertBannerBodyTone, AlertBannerIntent, AlertBannerProps, AmountProps, AnnouncementBarIntent, AnnouncementBarProps, AppearanceMenuProps, AppearanceMenuSize, AppearanceSettingsProps, AuditChange, AuditDiffLabels, AuditDiffProps, AuditDiffVariant, AuthLayoutProps, AuthLayoutSize, AuthLayoutVariant, AvatarGroupProps, AvatarProps, AvatarRing, AvatarShape, AvatarSize, AvatarStatus, AvatarUploaderProps, AvatarUploaderSize, BackToTopFabIntent, BackToTopFabPosition, BackToTopFabProps, BackdropProps, BadgeAppearance, BadgeProps, BadgeShape, BadgeSize, BarListIntent, BarListItem, BarListProps, Beat, BeatStatus, BlockquoteAlign, BlockquoteProps, BlockquoteSize, BlockquoteVariant, BreadcrumbItem, BreadcrumbProps, BreadcrumbSeparator, ButtonGroupOrientation, ButtonGroupProps, ButtonIntent, ButtonProps, ButtonShape, ButtonSize, ButtonVariant, CalendarEvent, CalendarProps, CalendarView, CardBrand, CardCvcInputProps, CardExpiryInputProps, CardFieldsProps, CardImageProps, CardNumberInputProps, CardOrientation, CardProps, CardValue, CarouselControlsProps, CarouselIndicatorsProps, CarouselOptions, CarouselProps, CarouselSlideProps, CarouselThumbnailsProps, CarouselViewportProps, CellEditor, ChatComposerProps, ChatConversation, ChatConversationListProps, ChatDaySeparatorProps, ChatFeedback, ChatMessageActionsProps, ChatMessageDirection, ChatMessageProps, ChatMessageStatus, ChatPresence, ChatSource, ChatSourcesProps, ChatSuggestionsProps, ChatThreadProps, ChatToolCallProps, ChatToolCallStatus, ChatTypingIndicatorProps, ChatbotMessage, ChatbotProps, CheckboxGroupOption, CheckboxGroupProps, CheckboxProps, CheckboxSize, ClipboardProps, ClipboardSize, ClipboardVariant, ClockProps, ClockVariant, ColBoxProps, ColorInputProps, ColorPreset, ColorSwatchProps, ColumnDef, ColumnEdit, ColumnFilterDropdownProps, ColumnHeaderProps, ColumnPin, ComboboxOption, ComboboxProps, CommandPaletteFooterProps, CommandPaletteGroupProps, CommandPaletteInputProps, CommandPaletteItemProps, CommandPaletteListProps, CommandPaletteProps, CommandPaletteTriggerProps, CommentComposerMode, CommentComposerProps, CommentLabels, CommentProps, CommentThreadProps, CommentVariant, ConfirmationModalProps, ContentNarrowProps, CookieBannerPosition, CookieBannerProps, CosmosAccent, CosmosAccentMeta, CosmosAppearance, CosmosDensity, CosmosDensityMeta, CosmosDirection, CosmosFont, CosmosFontMeta, CosmosRadius, CosmosRadiusMeta, CosmosSystemThemeMeta, CosmosSystemThemes, CosmosTextSize, CosmosTextSizeMeta, CosmosTheme, CosmosThemeChoice, CosmosThemeMeta, CosmosToasterProps, CountdownProps, CountdownUnit, CountdownVariant, CustomizerLayout, CustomizerPreset, CustomizerProps, CustomizerSection, CustomizerSidebar, CustomizerValue, DataTableBulkAction, DataTableDensity, DataTableExportQuery, DataTableFilterTabOption, DataTableFilterTabsConfig, DataTableProps, DataTableSort, DataTableView, DatePickerMode, DatePickerProps, DateRange, DateRangePreset, DateTimeFormat, DateTimeProps, DescriptionListItemProps, DescriptionListProps, DividerAlign, DividerIconProps, DividerProps, DividerRowProps, DrawerHeaderProps, DrawerProps, DrawerSide, DrawerSize, DropdownDivider, DropdownItem, DropdownOption, DropdownProps, DropzoneProps, DropzoneRejection, EmptyStateIntent, EmptyStateProps, ErrorPageProps, ErrorStateProps, ErrorSummaryItem, ErrorSummaryProps, EventCalendarIntent, EventCalendarProps, FigureAlign, FigureProps, FigureRadius, FigureSize, FileInputProps, FileKind, FileTileLayout, FileTileProps, FormFooterAlign, FormFooterProps, FormRowProps, FormatMoneyOptions, GridListCardProps, GridListCols, GridListFooterActionProps, GridListFooterProps, GridListProps, HealthBadgeProps, HealthCheck, HealthCheckGroup, HealthCheckListProps, HealthDotProps, HealthMatrixCell, HealthMatrixColumn, HealthMatrixProps, HealthMatrixRow, HealthStatus, HealthSummaryProps, HeartbeatBarProps, HeartbeatBarSize, HeartbeatBarVariant, HelpOverlayProps, HelpOverlaySectionProps, HelpOverlayShortcutProps, HighlightProps, IconBoxProps, IconBoxSize, ImageGridColumns, ImageGridGap, ImageGridItemProps, ImageGridLayout, ImageGridProps, InputProps, IntegrationCardProps, IntegrationStatus, JobLogControl, JobLogLine, JobLogLineRef, JobLogProps, JobLogStep, JobLogTimestampFormat, JobStatus, KanbanBoardProps, KanbanCard, KanbanColumn, KanbanMove, KbdProps, KbdSize, KpiCardChartPosition, KpiCardIntent, KpiCardProps, LightboxItem, LightboxProps, LineItem, LineItemErrors, LineItemsCatalogueEntry, LineItemsEditorProps, LineItemsLabels, LineItemsSummary, LinkComponent, LinkComponentProps, LinkIntent, LinkProps, LinkProviderProps, LinkVariant, ListItemProps, ListMarker, ListOrientation, ListProps, ListSpacing, ListVariant, LoadingStateProps, LogColumn, LogDensity, LogEntryContext, LogEntryDetailProps, LogLevel, LogLevelBadgeProps, LogLevelKey, LogLine, LogLineId, LogOrder, LogTone, LogToolbarProps, LogViewerProps, MediaObjectAlign, MediaObjectBodyProps, MediaObjectImageProps, MediaObjectPosition, MediaObjectProps, MenuCheckboxItemProps, MenuContentProps, MenuGroupProps, MenuItemIntent, MenuItemProps, MenuProps, MenuRadioItemProps, MenuTriggerProps, MiniCalendarProps, ModalAlertIntent, ModalAlertLayout, ModalAlertProps, ModalHeaderProps, ModalProps, ModalSize, MoneySignDisplay, MoneyTrailingZeroDisplay, MonitorRowProps, MonitorState, MultiSelectOption, MultiSelectProps, NavbarItemProps, NavbarItemsProps, NavbarMenuProps, NavbarMobileMenuButtonProps, NavbarProps, NavbarTheme, NewPasswordFormProps, NewPasswordFormView, NotificationCardCondensedProps, NotificationCardSimpleProps, NotificationIntent, NotificationRowIntent, NotificationRowProps, NotificationsPanelContentProps, NotificationsPanelCountersProps, NotificationsPanelEmptyProps, NotificationsPanelFooterProps, NotificationsPanelHeaderActionProps, NotificationsPanelHeaderProps, NotificationsPanelIntent, NotificationsPanelItemProps, NotificationsPanelListProps, NotificationsPanelProps, NotificationsPanelTriggerProps, NumberInputProps, OptionCardProps, OptionItem, OptionPickerProps, OtpInputProps, PageActionButtonProps, PageActionIconButtonProps, PageActionIntent, PageActionVariant, PageContainerProps, PageContainerWidth, PageHeaderMetaItemProps, PageHeaderProps, PaginationPrevNextLabel, PaginationProps, PaginationSize, PaginationVariant, PaletteCardProps, PaletteMeta, PalettePickerProps, PalettePreview, PasswordInputProps, PasswordPolicyCheckerProps, PasswordPolicyLabels, PasswordRule, PasswordStrengthLabels, PasswordStrengthLevels, PasswordStrengthMeterProps, PermissionGridColumn, PermissionGridGroup, PermissionGridLabels, PermissionGridProps, PermissionGridRow, PhoneInputProps, PipelineStage, PipelineStageIntent, PipelineStagesProps, PlanCardHeadingLevel, PlanCardProps, PlanFeature, PopoverAlign, PopoverContentProps, PopoverPosition, PopoverProps, PopoverTriggerProps, ProfileHeaderProps, ProfileHeaderStat, ProgressBarIntent, ProgressBarLabel, ProgressBarProps, ProgressBarSegment, ProgressBarSize, ProgressRingIntent, ProgressRingProps, ProgressRingSize, RadioGroupOption, RadioGroupProps, RadioProps, RadioSize, RatingProps, RecordPagerHotkeys, RecordPagerLabels, RecordPagerProps, RecordPagerVariant, RefreshButtonProps, RefreshOption, RelativeTimeProps, ResendLabels, ResetPasswordFormProps, RibbonIntent, RibbonPosition, RibbonProps, RibbonShape, RowActionButtonProps, RowActionsMenuProps, RowProps, SaveState, SearchInputProps, SecretValueProps, SectionCardProps, SectionLabelProps, SegmentOption, SegmentedControlProps, SegmentedProgressBarProps, SelectOption, SelectProps, ShellContainer, ShellProps, ShellVariant, SidebarGroupProps, SidebarGutter, SidebarItemProps, SidebarProps, SidebarSectionProps, SidebarToggleProps, SidebarToggleVariant, SidebarVariant, SignInFormProps, SignInFormValues, SignUpFormProps, SignUpFormValues, SingleProgressBarProps, SiteFooterAsideProps, SiteFooterBannerProps, SiteFooterBottomLink, SiteFooterBottomProps, SiteFooterBrandProps, SiteFooterColumnProps, SiteFooterLinkProps, SiteFooterProps, SiteFooterTheme, SiteFooterTitleProps, SiteFooterVariant, SkProps, SkeletonAvatarTextProps, SkeletonListProps, SkeletonTableProps, SkeletonTextProps, SliderIntent, SliderProps, SliderValue, SocialAuthButtonsLayout, SocialAuthButtonsProps, SocialProvider, SortDirection, SpinnerIntent, SpinnerProps, SpinnerSize, SplitViewBreakpoint, SplitViewPaneProps, SplitViewProps, StackedListAction, StackedListHeaderProps, StackedListItemProps, StackedListProps, StatefulSaveButtonProps, StatusBadgeProps, StepStatus, StepperOrientation, StepperProps, StepperSize, StepperStepProps, StepperVariant, StickyScrollNavProps, StickyScrollNavSection, TabProps, TableAmountCellProps, TableBodyProps, TableCaptionProps, TableCellProps, TableDescriptionCellProps, TableFootProps, TableHeadProps, TableHeaderCellProps, TableIdCellProps, TableIdentityCellProps, TableProps, TableRowProps, TableSkeletonRowsProps, TabsOrientation, TabsProps, TabsVariant, TagInputProps, TagProps, TagSize, TextareaProps, TextareaResize, ThemeMode, ThemeModeChoice, ThemeToggleProps, ThemeToggleSize, ThemeToggleTriProps, ThemeToggleTriSize, TimePickerProps, TimelineIntent, TimelineItem, TimelineProps, TimelineVariant, ToggleProps, ToggleSize, TooltipIntent, TooltipPosition, TooltipProps, TooltipVariant, TopbarProps, TotalsNoteProps, TotalsProps, TotalsRowProps, TrendDeltaProps, TrendDeltaSize, TwoStepMethod, TwoStepVerificationFormProps, TwoStepVerificationLabels, UnsavedIndicatorProps, UploadQueueItem, UploadQueueProps, UploadStatus, UptimeBarsPeriod, UptimeBarsProps, UptimeCertificate, UptimeDay, UptimeLevel, UptimePeriod, UptimeStatProps, UptimeThresholds, UserMenuContentProps, UserMenuHeaderProps, UserMenuItemIntent, UserMenuItemProps, UserMenuProps, UserMenuTriggerProps, VerticalNavigationItemProps, VerticalNavigationProps, VerticalNavigationSectionProps, VideoEmbedAspect, VideoEmbedProps, ZoomBarProps };