@mercury-fx/ui 2.4.0

package/dist/components/foundations/Icon/index.d.ts

@@ -0,0 +1 @@
+export * from "./Icon";

package/dist/components/foundations/Separator/Separator.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type SeparatorOrientation = "horizontal" | "vertical";
+export interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
+    orientation?: SeparatorOrientation;
+    /** Optional centered label (horizontal only) — e.g. "or". */
+    label?: ReactNode;
+    /** Length: width for horizontal, height for vertical. Defaults to filling the container. */
+    size?: number | string;
+    /** Purely visual (default). Set `false` when it genuinely separates groups for AT. */
+    decorative?: boolean;
+}
+/**
+ * Separator — a thin rule that divides content, horizontal or vertical, with an
+ * optional inline label. The Claude-Design sibling of `Divider`, with a richer
+ * `orientation` / `label` / `size` / `decorative` surface. The rule reads
+ * `--border-secondary` via `.mx-separator`; a custom `size` rides the
+ * `--mx-sep-size` custom property (no inline color).
+ */
+export declare function Separator({ orientation, label, size, decorative, className, style, ...rest }: SeparatorProps): import("react").JSX.Element;
+export default Separator;

package/dist/components/foundations/Separator/index.d.ts

@@ -0,0 +1 @@
+export * from "./Separator";

package/dist/components/foundations/Text/Text.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type TextVariant = "display" | "h1" | "h2" | "h3" | "h4" | "lead" | "body" | "small" | "muted" | "code" | "quote";
+export interface TextProps extends HTMLAttributes<HTMLElement> {
+    /** Typographic role — selects the element + the `.mx-text--<variant>` recipe. Default `body`. */
+    variant?: TextVariant;
+    children?: ReactNode;
+    /** Ink from an accent ramp (reads `--<ramp>-11`). Overrides the variant ink. */
+    accent?: "iris" | "indigo" | "green" | "orange" | "plum" | "red";
+    italic?: boolean;
+    align?: "left" | "center" | "right";
+}
+/**
+ * Text — one typography primitive across Mercury's three families. Big headings ride
+ * DM Mono (`--font-secondary`); `display` rides DM Serif Display (`--font-display`);
+ * body copy rides DM Sans (`--font-primary`). Every variant resolves its ink from the
+ * `--fg-*` token families via `.mx-text--<variant>` — no inline color.
+ */
+export declare function Text({ variant, children, accent, italic, align, className, ...rest }: TextProps): import("react").JSX.Element;
+export default Text;

package/dist/components/foundations/Text/index.d.ts

@@ -0,0 +1 @@
+export * from "./Text";

package/dist/components/inputs/AuthCode/AuthCode.d.ts

@@ -0,0 +1,10 @@
+export interface AuthCodeProps {
+    value: string;
+    onChange: (value: string) => void;
+    onComplete?: (value: string) => void;
+    length?: number;
+    allow?: "numeric" | "alphanumeric";
+    error?: string;
+    disabled?: boolean;
+}
+export declare function AuthCode({ value, onChange, onComplete, length, allow, error, disabled }: AuthCodeProps): import("react").JSX.Element;

package/dist/components/inputs/AuthCode/index.d.ts

@@ -0,0 +1 @@
+export * from "./AuthCode";

package/dist/components/inputs/Calendar/Calendar.d.ts

@@ -0,0 +1,24 @@
+import type { DateValue } from "@mercury-fx/core";
+export interface CalendarProps {
+    /** Controlled selected day (a DateValue from @mercury-fx/core). */
+    value?: DateValue;
+    /** Initial selected day when uncontrolled. */
+    defaultValue?: DateValue;
+    /** Fires when a day is chosen. */
+    onChange?: (value: DateValue) => void;
+    /** BCP-47 locale for labels + week order (default "en"). */
+    locale?: string;
+    /** First column of the week, 0=Sun..6=Sat (default 0). */
+    firstDayOfWeek?: number;
+    /** Selected-day fill + today ring from an accent ramp. */
+    accent?: "iris" | "indigo" | "green" | "orange" | "plum" | "red";
+    className?: string;
+}
+/**
+ * Calendar — a month-grid day picker. The grid, month paging, and value model
+ * come from @mercury-fx/core's useCalendar (over the owned internal/date-time
+ * machinery); this is the presentational @mercury-fx/ui home. INV-6: date types
+ * cross through @mercury-fx/core, never @internationalized/date directly. The nav
+ * chevrons are the live Icon (chevron-right; the prev control is flipped in CSS).
+ */
+export declare function Calendar({ value, defaultValue, onChange, locale, firstDayOfWeek, accent, className, }: CalendarProps): import("react").JSX.Element;

package/dist/components/inputs/Calendar/index.d.ts

@@ -0,0 +1 @@
+export * from "./Calendar";

package/dist/components/inputs/DateField/DateField.d.ts

@@ -0,0 +1,25 @@
+import type { DateValue } from "@mercury-fx/core";
+import type { ReactNode } from "react";
+export interface DateFieldProps {
+    /** Controlled date value (a `DateValue` from `@mercury-fx/core`). Pass `undefined` for uncontrolled. */
+    value?: DateValue;
+    /** Initial value when uncontrolled. */
+    defaultValue?: DateValue;
+    /** Fires on each committed segment edit; `undefined` when the field is cleared. */
+    onChange?: (value: DateValue | undefined) => void;
+    /** Label above the segmented field. */
+    label?: ReactNode;
+    /** BCP-47 locale for segment ordering + literals (default `"en"`, via the hook). */
+    locale?: string;
+    /** Fades the field and blocks entry. */
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * DateField — a segmented mm/dd/yyyy date entry. The value model, segment list,
+ * and keyboard arithmetic come from `@mercury-fx/core`'s `useDateField` (over the
+ * owned `internal/date-time` machinery); this component is the presentational
+ * `@mercury-fx/ui` home that renders the segments. INV-6: date types cross through
+ * `@mercury-fx/core`, never `@internationalized/date` directly.
+ */
+export declare function DateField({ value, defaultValue, onChange, label, locale, disabled, className, }: DateFieldProps): import("react").JSX.Element;

package/dist/components/inputs/DateField/index.d.ts

@@ -0,0 +1 @@
+export * from "./DateField";

package/dist/components/inputs/Input/Input.d.ts

@@ -0,0 +1,9 @@
+import type { InputHTMLAttributes, ReactNode } from "react";
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    label?: string;
+    hint?: string;
+    error?: string;
+    leading?: ReactNode;
+    trailing?: ReactNode;
+}
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/inputs/Input/index.d.ts

@@ -0,0 +1 @@
+export * from "./Input";

package/dist/components/inputs/Label/Label.d.ts

@@ -0,0 +1,20 @@
+import type { LabelHTMLAttributes, ReactNode } from "react";
+export type LabelSize = "sm" | "md" | "lg";
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    children?: ReactNode;
+    required?: boolean;
+    optional?: boolean;
+    disabled?: boolean;
+    size?: LabelSize;
+    /** Accent ramp for the required asterisk (reads `--<ramp>-11`). Default `red`. */
+    accent?: "iris" | "indigo" | "green" | "orange" | "plum" | "red";
+    hint?: ReactNode;
+}
+/**
+ * Label — the form-caption primitive: semibold, tight tracking, with an accent-tinted
+ * required marker, a muted `(optional)` tag, and an optional hint line. Styled through
+ * `.mx-label` token classes; the required `*` reads `--<ramp>-11` (default `--red-11`)
+ * via the accent class — no inline color.
+ */
+export declare function Label({ children, required, optional, disabled, size, accent, hint, className, ...rest }: LabelProps): import("react").JSX.Element;
+export default Label;

package/dist/components/inputs/Label/index.d.ts

@@ -0,0 +1 @@
+export * from "./Label";

package/dist/components/inputs/MoneyInput/MoneyInput.d.ts

@@ -0,0 +1,12 @@
+import type { InputHTMLAttributes } from "react";
+export interface MoneyInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /** The currency prefix rendered as a leading affix (e.g. `$` or `USD`). */
+    currency?: string;
+    /** Field label (like Input). */
+    label?: string;
+    /** Helper text below the field (like Input). */
+    hint?: string;
+    /** Error text + `aria-invalid` (like Input). */
+    error?: string;
+}
+export declare const MoneyInput: import("react").ForwardRefExoticComponent<MoneyInputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/inputs/MoneyInput/index.d.ts

@@ -0,0 +1 @@
+export * from "./MoneyInput";

package/dist/components/inputs/Search/Search.d.ts

@@ -0,0 +1,7 @@
+import type { InputHTMLAttributes } from "react";
+export interface SearchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
+    value: string;
+    onChange?: (value: string) => void;
+    onSearch?: (value: string) => void;
+}
+export declare function Search({ value, onChange, onSearch, placeholder, className, disabled, ...rest }: SearchProps): import("react").JSX.Element;

package/dist/components/inputs/Search/index.d.ts

@@ -0,0 +1 @@
+export * from "./Search";

package/dist/components/inputs/Select/Select.d.ts

@@ -0,0 +1,14 @@
+import type { SelectHTMLAttributes } from "react";
+export interface SelectOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+    label?: string;
+    hint?: string;
+    error?: string;
+    options: SelectOption[];
+    placeholder?: string;
+}
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLSelectElement>>;

package/dist/components/inputs/Select/index.d.ts

@@ -0,0 +1 @@
+export * from "./Select";

package/dist/components/inputs/Textarea/Textarea.d.ts

@@ -0,0 +1,9 @@
+import type { TextareaHTMLAttributes } from "react";
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    hint?: string;
+    error?: string;
+    resizable?: boolean;
+    size?: "sm" | "md" | "lg";
+}
+export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/inputs/Textarea/index.d.ts

@@ -0,0 +1 @@
+export * from "./Textarea";

package/dist/components/layout/AspectRatio/AspectRatio.d.ts

@@ -0,0 +1,14 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {
+    /** width / height — e.g. `16/9`, `1`, `4/3`. Default `16/9`. */
+    ratio?: number;
+    children?: ReactNode;
+}
+/**
+ * AspectRatio — constrains its content to a fixed width-to-height ratio (media
+ * embeds, image frames, video). The box fills its container's width and derives
+ * its height from `ratio`; the child fills it absolutely. Structure lives in
+ * `.mx-aspect`; the ratio itself is a non-color dynamic inline style.
+ */
+export declare function AspectRatio({ ratio, children, className, style, ...rest }: AspectRatioProps): import("react").JSX.Element;
+export default AspectRatio;

package/dist/components/layout/AspectRatio/index.d.ts

@@ -0,0 +1 @@
+export * from "./AspectRatio";

package/dist/components/layout/AuthLayout/AuthLayout.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+/**
+ * AuthLayout — the branded split-screen shell for authentication flows.
+ * Left: a brand panel (hidden on narrow widths). Right: a centred form column
+ * with an eyebrow / heading / subheading and a footer slot. Fills its parent
+ * (height: 100%), so it works framed in a demo or as a full page.
+ *
+ * The brand panel is prop-driven with Mercury defaults; pass `brand` to
+ * replace its body wholesale.
+ */
+export interface AuthLayoutProps {
+    eyebrow?: string;
+    heading?: ReactNode;
+    subheading?: ReactNode;
+    /** The form body. */
+    children?: ReactNode;
+    /** Footer row under the form (e.g. "New here? Create an account"). */
+    footer?: ReactNode;
+    /** Replace the brand-panel body entirely. */
+    brand?: ReactNode;
+    brandName?: string;
+    brandBadge?: string;
+    brandLogo?: ReactNode;
+    brandTagline?: ReactNode;
+    brandFeatures?: string[];
+    brandStatus?: string;
+    brandVersion?: string;
+    className?: string;
+}
+export declare function AuthLayout({ eyebrow, heading, subheading, children, footer, brand, brandName, brandBadge, brandLogo, brandTagline, brandFeatures, brandStatus, brandVersion, className, }: AuthLayoutProps): import("react").JSX.Element;

package/dist/components/layout/AuthLayout/index.d.ts

@@ -0,0 +1 @@
+export * from "./AuthLayout";

package/dist/components/layout/Box/Box.d.ts

@@ -0,0 +1,35 @@
+import type { ElementType, HTMLAttributes } from "react";
+import type { RadiusScale, SpaceScale } from "../scales";
+/** Semantic surface tokens → `rgb(var(--bg-<v>))`. */
+export type BoxSurface = "primary" | "secondary" | "tertiary" | "brand" | "brand-subtle" | "elevated";
+/** Elevation tokens → `var(--shadow-<v>)`. */
+export type BoxShadow = "100" | "200" | "300" | "400" | "500" | "600";
+export interface BoxProps extends HTMLAttributes<HTMLElement> {
+    /** Render as this element/component. Default `div`. */
+    as?: ElementType;
+    /** Padding, all sides → `var(--space-N)`. */
+    p?: SpaceScale;
+    /** Padding, inline (left+right). */
+    px?: SpaceScale;
+    /** Padding, block (top+bottom). */
+    py?: SpaceScale;
+    pt?: SpaceScale;
+    pr?: SpaceScale;
+    pb?: SpaceScale;
+    pl?: SpaceScale;
+    /** Background surface → `rgb(var(--bg-<v>))`. */
+    bg?: BoxSurface;
+    /** Corner radius → `var(--radius-N)`. */
+    radius?: RadiusScale;
+    /** A 1px secondary border. */
+    border?: boolean;
+    /** Elevation → `var(--shadow-N)`. */
+    shadow?: BoxShadow;
+}
+/**
+ * Box — the polymorphic styled block: padding, surface, radius, border, shadow,
+ * every value token-resolved. The base primitive the other Layout components
+ * compose over (a `Card`-like surface without `Card`'s semantics).
+ */
+export declare function Box({ as, p, px, py, pt, pr, pb, pl, bg, radius, border, shadow, className, style, ...rest }: BoxProps): import("react").JSX.Element;
+export default Box;

package/dist/components/layout/Box/index.d.ts

@@ -0,0 +1 @@
+export * from "./Box";

package/dist/components/layout/Center/Center.d.ts

@@ -0,0 +1,13 @@
+import type { ElementType, HTMLAttributes } from "react";
+export interface CenterProps extends HTMLAttributes<HTMLElement> {
+    /** Render as this element/component. Default `div`. */
+    as?: ElementType;
+    /** Centre inline (`inline-grid`) rather than as a block. */
+    inline?: boolean;
+}
+/**
+ * Center — places its child dead-centre on both axes (`place-items:center`).
+ * Presentational; the frame for empty-states, spinners, a centred CTA.
+ */
+export declare function Center({ as, inline, className, style, ...rest }: CenterProps): import("react").JSX.Element;
+export default Center;

package/dist/components/layout/Center/index.d.ts

@@ -0,0 +1 @@
+export * from "./Center";

package/dist/components/layout/Cluster/Cluster.d.ts

@@ -0,0 +1,18 @@
+import type { ElementType, HTMLAttributes } from "react";
+import type { Align, Justify, SpaceScale } from "../scales";
+export interface ClusterProps extends HTMLAttributes<HTMLElement> {
+    /** Render as this element/component. Default `div`. */
+    as?: ElementType;
+    /** Gap between items → `var(--space-N)`. */
+    gap?: SpaceScale;
+    /** Cross-axis alignment → `align-items`. */
+    align?: Align;
+    /** Main-axis distribution → `justify-content`. */
+    justify?: Justify;
+}
+/**
+ * Cluster — a horizontal group that wraps: items flow left-to-right and wrap to
+ * the next line with one shared gap. Presentational; a chip/tag/action toolbar.
+ */
+export declare function Cluster({ as, gap, align, justify, className, style, ...rest }: ClusterProps): import("react").JSX.Element;
+export default Cluster;

package/dist/components/layout/Cluster/index.d.ts

@@ -0,0 +1 @@
+export * from "./Cluster";

package/dist/components/layout/Collapsible/Collapsible.d.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface CollapsibleProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /** The always-visible header label. */
+    title: ReactNode;
+    children?: ReactNode;
+    /** Uncontrolled initial open state. Default `false`. */
+    defaultOpen?: boolean;
+    /** Controlled open state — pair with `onOpenChange`. */
+    open?: boolean;
+    /** Called with the next open state on toggle. */
+    onOpenChange?: (open: boolean) => void;
+    /** Wrap in a bordered card. Default `true`. */
+    bordered?: boolean;
+    /** Accent ramp tinting the toggle when open (bg `--<ramp>-3`, ink `--<ramp>-11`). Default `iris`. */
+    accent?: "iris" | "indigo" | "green" | "orange" | "plum" | "red";
+    /** Container width — number (px) or any length string. Default `360`. */
+    width?: number | string;
+}
+/**
+ * Collapsible — a single disclosure: a header with a round toggle that reveals its
+ * body on a grid-rows height animation. Controlled (`open` + `onOpenChange`) or
+ * uncontrolled (`defaultOpen`). Distinct from Accordion (a managed set of disclosures);
+ * compose Collapsibles freely for an unmanaged group. The chevron is the live `Icon`.
+ */
+export declare function Collapsible({ title, children, defaultOpen, open: openProp, onOpenChange, bordered, accent, width, className, style, ...rest }: CollapsibleProps): import("react").JSX.Element;
+export default Collapsible;

package/dist/components/layout/Collapsible/index.d.ts

@@ -0,0 +1 @@
+export * from "./Collapsible";

package/dist/components/layout/Container/Container.d.ts

@@ -0,0 +1,19 @@
+import type { ElementType, HTMLAttributes } from "react";
+import type { SpaceScale } from "../scales";
+export type ContainerSize = "sm" | "md" | "lg" | "xl";
+export interface ContainerProps extends HTMLAttributes<HTMLElement> {
+    /** Render as this element/component. Default `div`. */
+    as?: ElementType;
+    /** Max reading width. Default `lg` (1024px). */
+    size?: ContainerSize;
+    /** Horizontal padding → `var(--space-N)`. */
+    padding?: SpaceScale;
+    /** Centre horizontally (`margin-inline: auto`). Default `true`. */
+    center?: boolean;
+}
+/**
+ * Container — a max-width reading column, centred by default. Retires the
+ * `maxWidth + margin:0 auto` inline objects (e.g. `Confirm.stories.tsx:26` `sheet`).
+ */
+export declare function Container({ as, size, padding, center, className, style, ...rest }: ContainerProps): import("react").JSX.Element;
+export default Container;

package/dist/components/layout/Container/index.d.ts

@@ -0,0 +1 @@
+export * from "./Container";

package/dist/components/layout/Flex/Flex.d.ts

@@ -0,0 +1,24 @@
+import type { ElementType, HTMLAttributes } from "react";
+import type { Align, Justify, SpaceScale } from "../scales";
+export type FlexDirection = "row" | "column" | "row-reverse" | "column-reverse";
+export interface FlexProps extends HTMLAttributes<HTMLElement> {
+    /** Render as this element/component. Default `div`. */
+    as?: ElementType;
+    /** Flex main axis. Default `row` (the `.mx-flex` base). */
+    direction?: FlexDirection;
+    /** Gap between children → `var(--space-N)`. */
+    gap?: SpaceScale;
+    /** Cross-axis alignment → `align-items`. */
+    align?: Align;
+    /** Main-axis distribution → `justify-content`. */
+    justify?: Justify;
+    /** Allow items to wrap onto multiple lines. */
+    wrap?: boolean;
+}
+/**
+ * Flex — a one-dimensional flex row (or column via `direction`), with `gap`,
+ * `align`, `justify`, `wrap`. Presentational; retires the horizontal
+ * `display:flex` inline objects (e.g. `Confirm.stories.tsx:33` `headerRow`).
+ */
+export declare function Flex({ as, direction, gap, align, justify, wrap, className, style, ...rest }: FlexProps): import("react").JSX.Element;
+export default Flex;

package/dist/components/layout/Flex/index.d.ts

@@ -0,0 +1 @@
+export * from "./Flex";

package/dist/components/layout/Grid/Grid.d.ts

@@ -0,0 +1,26 @@
+import type { ElementType, HTMLAttributes } from "react";
+import type { Align, Justify, SpaceScale } from "../scales";
+export type GridFlow = "row" | "column" | "dense" | "row dense" | "column dense";
+export interface GridProps extends HTMLAttributes<HTMLElement> {
+    /** Render as this element/component. Default `div`. */
+    as?: ElementType;
+    /** Equal columns (→ `repeat(n, minmax(0, 1fr))`) or a raw template string. */
+    cols?: number | string;
+    /** Equal rows or a raw template string. */
+    rows?: number | string;
+    /** Gap between cells → `var(--space-N)`. */
+    gap?: SpaceScale;
+    /** Auto-placement flow → `grid-auto-flow`. */
+    flow?: GridFlow;
+    /** Cell block alignment → `align-items`. */
+    align?: Align;
+    /** Cell inline alignment → `justify-items`. */
+    justify?: Justify;
+}
+/**
+ * Grid — a two-dimensional CSS grid; `cols`/`rows` accept a count (equal tracks)
+ * or a raw template string. Presentational; retires the ad-hoc grid/column
+ * shells (e.g. a KPI row, a two-up `splitRow`).
+ */
+export declare function Grid({ as, cols, rows, gap, flow, align, justify, className, style, ...rest }: GridProps): import("react").JSX.Element;
+export default Grid;

package/dist/components/layout/Grid/index.d.ts

@@ -0,0 +1 @@
+export * from "./Grid";

package/dist/components/layout/GridItem/GridItem.d.ts

@@ -0,0 +1,19 @@
+import type { ElementType, HTMLAttributes } from "react";
+export interface GridItemProps extends HTMLAttributes<HTMLElement> {
+    /** Render as this element/component. Default `div`. */
+    as?: ElementType;
+    /** Column span → `grid-column-end: span n`. */
+    colSpan?: number;
+    /** Row span → `grid-row-end: span n`. */
+    rowSpan?: number;
+    /** Start column line → `grid-column-start`. */
+    colStart?: number;
+    /** Start row line → `grid-row-start`. */
+    rowStart?: number;
+}
+/**
+ * GridItem — a placement child for `Grid`: span columns/rows or pin to a start
+ * line. Presentational; the wide/tall cell of a KPI or table grid.
+ */
+export declare function GridItem({ as, colSpan, rowSpan, colStart, rowStart, className, style, ...rest }: GridItemProps): import("react").JSX.Element;
+export default GridItem;

package/dist/components/layout/GridItem/index.d.ts

@@ -0,0 +1 @@
+export * from "./GridItem";

package/dist/components/layout/ScrollArea/ScrollArea.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type ScrollAreaScrollbars = "vertical" | "horizontal" | "both";
+export type ScrollAreaSize = "sm" | "md" | "lg";
+export interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    /** Which axes scroll. Default `vertical`. */
+    scrollbars?: ScrollAreaScrollbars;
+    /** Scrollbar thickness. Default `md`. */
+    size?: ScrollAreaSize;
+    /** Cap height — needed for `vertical`/`both` to scroll. Number → px. */
+    maxHeight?: number | string;
+    /** Container width. Number → px. */
+    width?: number | string;
+}
+/**
+ * ScrollArea — a scroll container with Mercury's thin, rounded custom scrollbars.
+ * `scrollbars` picks the axes; `size` picks the bar thickness. The scrollbar
+ * styling lives in `.mx-scrollarea` (webkit pseudo-elements reading neutral border
+ * tokens); only the `maxHeight`/`width` caps are non-color dynamic inline styles.
+ */
+export declare function ScrollArea({ children, scrollbars, size, maxHeight, width, className, style, ...rest }: ScrollAreaProps): import("react").JSX.Element;
+export default ScrollArea;

package/dist/components/layout/ScrollArea/index.d.ts

@@ -0,0 +1 @@
+export * from "./ScrollArea";

package/dist/components/layout/Section/Section.d.ts

@@ -0,0 +1,18 @@
+import type { ElementType, HTMLAttributes } from "react";
+import type { SpaceScale } from "../scales";
+export interface SectionProps extends HTMLAttributes<HTMLElement> {
+    /** Render as this element/component. Default `section`. */
+    as?: ElementType;
+    /** Vertical gap between blocks → `var(--space-N)`. */
+    gap?: SpaceScale;
+    /** Block padding (top+bottom) → `var(--space-N)`. */
+    py?: SpaceScale;
+    /** Inline padding (left+right) → `var(--space-N)`. */
+    px?: SpaceScale;
+}
+/**
+ * Section — a semantic, padded page block: a vertical `Stack` that renders as a
+ * real `<section>` by default. Presentational; the page's structural rhythm.
+ */
+export declare function Section({ as, gap, py, px, className, style, ...rest }: SectionProps): import("react").JSX.Element;
+export default Section;

package/dist/components/layout/Section/index.d.ts

@@ -0,0 +1 @@
+export * from "./Section";

package/dist/components/layout/Sidebar/Sidebar.d.ts

@@ -0,0 +1,21 @@
+import type { ElementType, HTMLAttributes, ReactNode } from "react";
+import type { SpaceScale } from "../scales";
+export type SidebarSide = "left" | "right";
+export interface SidebarProps extends HTMLAttributes<HTMLElement> {
+    /** Render as this element/component. Default `div`. */
+    as?: ElementType;
+    /** The fixed-width rail content. */
+    aside?: ReactNode;
+    /** Which side the rail sits on. Default `left`. */
+    side?: SidebarSide;
+    /** The rail's fixed width — a layout dimension (px number or a CSS length). Default 272. */
+    sideWidth?: number | string;
+    /** Gap between rail and main → `var(--space-N)`. */
+    gap?: SpaceScale;
+}
+/**
+ * Sidebar — a fixed-width rail beside a growing main column. Presentational;
+ * the two-column app shell (retires the `economy` `.ecn-body` rail+main).
+ */
+export declare function Sidebar({ as, aside, side, sideWidth, gap, children, className, style, ...rest }: SidebarProps): import("react").JSX.Element;
+export default Sidebar;

package/dist/components/layout/Sidebar/index.d.ts

@@ -0,0 +1 @@
+export * from "./Sidebar";

package/dist/components/layout/Spacer/Spacer.d.ts

@@ -0,0 +1,15 @@
+import type { ElementType, HTMLAttributes } from "react";
+import type { SpaceScale } from "../scales";
+export interface SpacerProps extends HTMLAttributes<HTMLElement> {
+    /** Render as this element/component. Default `div`. */
+    as?: ElementType;
+    /** A fixed spacer of `var(--space-N)`; omit to grow and fill the free space. */
+    size?: SpaceScale;
+}
+/**
+ * Spacer — flexible empty space inside a flex row/column. Grows to fill by
+ * default (`.mx-spacer` = `flex:1 1 0%`); `size` makes it a fixed gap. Pushes
+ * siblings apart in an action bar / toolbar.
+ */
+export declare function Spacer({ as, size, className, style, ...rest }: SpacerProps): import("react").JSX.Element;
+export default Spacer;

package/dist/components/layout/Spacer/index.d.ts

@@ -0,0 +1 @@
+export * from "./Spacer";

package/dist/components/layout/Stack/Stack.d.ts

@@ -0,0 +1,20 @@
+import type { ElementType, HTMLAttributes } from "react";
+import type { Align, Justify, SpaceScale } from "../scales";
+export interface StackProps extends HTMLAttributes<HTMLElement> {
+    /** Render as this element/component. Default `div`. */
+    as?: ElementType;
+    /** Vertical gap between children → `var(--space-N)`. */
+    gap?: SpaceScale;
+    /** Cross-axis (horizontal) alignment → `align-items`. */
+    align?: Align;
+    /** Main-axis (vertical) distribution → `justify-content`. */
+    justify?: Justify;
+}
+/**
+ * Stack — a vertical flow: children stack top-to-bottom, separated by `gap`.
+ * Presentational; the flex direction lives in `.mx-stack`, spacing/alignment are
+ * inline token-resolved values. Retires the `flex-direction:column` inline objects
+ * (e.g. `apps/storybook/stories/scenes/Confirm.stories.tsx:25` `sheet`).
+ */
+export declare function Stack({ as, gap, align, justify, className, style, ...rest }: StackProps): import("react").JSX.Element;
+export default Stack;

package/dist/components/layout/Stack/index.d.ts

@@ -0,0 +1 @@
+export * from "./Stack";