@usefidel/design-system 0.25.1 → 0.27.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, HTMLAttributes, InputHTMLAttributes, SVGAttributes, ReactElement, ElementType, ComponentPropsWithoutRef } from 'react';
+import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, HTMLAttributes, InputHTMLAttributes, SVGAttributes, ReactElement, ElementType, ComponentPropsWithoutRef, CSSProperties } from 'react';
 
 type ButtonVariant = 'primary' | 'outlined' | 'text' | 'neutral' | 'link'
 /** High-contrast near-black, for a page's main create action ("New comparison"). */
@@ -480,6 +480,10 @@ interface TagProps extends HTMLAttributes<HTMLSpanElement> {
     dot?: Tone;
     /** Leading icon, drawn at 14px, e.g. a repository or branch mark. */
     icon?: ReactNode;
+    /** Shows a remove button at the end; its label is "Remove <removeLabel>". */
+    onRemove?: () => void;
+    /** Names the tag for the remove button. Defaults to the text when it is a string. */
+    removeLabel?: string;
     children: ReactNode;
 }
 /**
@@ -487,7 +491,7 @@ interface TagProps extends HTMLAttributes<HTMLSpanElement> {
  * optional coloured dot. Measured from Figma "✅Project" comparison-type chip
  * (node 231:59808).
  */
-declare function Tag({ dot, icon, className, children, ...rest }: TagProps): react.JSX.Element;
+declare function Tag({ dot, icon, onRemove, removeLabel, className, children, ...rest }: TagProps): react.JSX.Element;
 
 interface MultiSelectOption {
     value: string;
@@ -1117,6 +1121,10 @@ declare const AppLayout: typeof AppLayoutRoot & {
 interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     title: ReactNode;
     description?: ReactNode;
+    /** Beside the title block, e.g. a 40px logo mark. */
+    leading?: ReactNode;
+    /** A row of facts under the title, e.g. repo, branch and Tags. Wraps. */
+    meta?: ReactNode;
     /** Above the title, e.g. "Projects / Flow web app". */
     breadcrumb?: ReactNode;
     /** The page's one primary action, and any secondary ones. */
@@ -1125,7 +1133,7 @@ interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     children?: ReactNode;
 }
 /** Fidel design-system PageHeader: breadcrumb, title, description and actions at the top of a page. */
-declare function PageHeader({ title, description, breadcrumb, actions, className, children, ...rest }: PageHeaderProps): react.JSX.Element;
+declare function PageHeader({ title, description, leading, meta, breadcrumb, actions, className, children, ...rest }: PageHeaderProps): react.JSX.Element;
 
 interface ToastAction {
     label: string;
@@ -1147,4 +1155,371 @@ declare function ToastRegion({ className, children, ...rest }: ToastRegionProps)
 /** Fidel design-system Toast: a short status message with an optional action. Place it in a ToastRegion. */
 declare function Toast({ children, action, onDismiss, duration, className, ...rest }: ToastProps): react.JSX.Element;
 
-export { Accordion, type AccordionProps, AppLayout, type AppLayoutProps, AppNav, type AppNavProps, Avatar, AvatarLabelGroup, type AvatarLabelGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, BrandButton, type BrandButtonProps, type Breakpoint, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutTone, Card, type CardPadding, type CardProps, type CardTone, Checkbox, type CheckboxProps, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, Divider, type DividerProps, EmptyState, type EmptyStateProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Input, type InputProps, ListLabel, type ListLabelProps, Menu, type MenuDivider, type MenuEntry, type MenuItem, type MenuLabel, type MenuPlacement, type MenuProps, type MenuSearch, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, PageHeader, type PageHeaderProps, Pagination, type PaginationProps, PricingCard, type PricingCardProps, Radio, RadioCard, type RadioCardProps, type RadioProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Sidebar, type SidebarBrandProps, SidebarItem, type SidebarItemProps, type SidebarProps, type SidebarSectionProps, type SidebarState, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Spinner, type SpinnerProps, Split, type SplitProps, StackedCardsIllustration, Stat, type StatProps, StatusDot, type StatusDotProps, type StatusDotStatus, type Step, StepList, type StepListProps, type StepStatus, Swatch, type SwatchProps, TabNav, type TabNavProps, Table, type TableColumn, type TableProps, Tag, type TagProps, Toast, type ToastAction, type ToastProps, ToastRegion, type ToastRegionProps, Toggle, type ToggleProps, type ToggleSize, type Tone, Tooltip, type TooltipProps, type TooltipSide, WorkspaceAvatar, WorkspaceSwitcher, type WorkspaceSwitcherProps, breakpoints, useSidebar };
+type StepperStepStatus = 'done' | 'current' | 'upcoming';
+interface StepperStepProps {
+    status: StepperStepStatus;
+    children: ReactNode;
+}
+declare function StepperStep(_: StepperStepProps): null;
+interface StepperProps extends HTMLAttributes<HTMLOListElement> {
+    /** Stepper.Step elements, in order. */
+    children: ReactNode;
+}
+/** Fidel design-system Stepper: a numbered row of steps joined by lines, for a multi-step form. */
+declare function StepperRoot({ className, children, ...rest }: StepperProps): react.JSX.Element;
+declare const Stepper: typeof StepperRoot & {
+    Step: typeof StepperStep;
+};
+
+interface NumberedStepsProps extends HTMLAttributes<HTMLOListElement> {
+    /** NumberedSteps.Item elements, in order. */
+    children: ReactNode;
+}
+declare function NumberedStepsRoot({ className, children, ...rest }: NumberedStepsProps): react.JSX.Element;
+declare function NumberedStepsItem({ className, children, ...rest }: HTMLAttributes<HTMLLIElement>): react.JSX.Element;
+/** Fidel design-system NumberedSteps: a form laid out as numbered steps joined by a line. */
+declare const NumberedSteps: typeof NumberedStepsRoot & {
+    Item: typeof NumberedStepsItem;
+};
+
+interface OptionListProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+declare function OptionListRoot({ className, children, ...rest }: OptionListProps): react.JSX.Element;
+declare function OptionListLabel({ className, children, ...rest }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+interface OptionRowProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'title'> {
+    /** @default 'radio' */
+    control?: 'radio' | 'checkbox';
+    title: ReactNode;
+    description?: ReactNode;
+    /** Quiet text or a Badge at the end of the row, e.g. "Recommended" or "main, 3d ago". */
+    meta?: ReactNode;
+}
+/** One choice in an OptionList: a radio or checkbox with a title, a second line and optional end content. */
+declare function OptionRow({ control, title, description, meta, className, checked, disabled, ...rest }: OptionRowProps): react.JSX.Element;
+/** Fidel design-system OptionList: radio or checkbox rows in one bordered group, with optional group labels. */
+declare const OptionList: typeof OptionListRoot & {
+    Label: typeof OptionListLabel;
+    Row: typeof OptionRow;
+};
+
+interface ChecklistProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    title?: ReactNode;
+    children: ReactNode;
+}
+declare function ChecklistRoot({ title, className, children, ...rest }: ChecklistProps): react.JSX.Element;
+interface ChecklistItemProps {
+    done: boolean;
+    label: ReactNode;
+    /** The chosen value under the label, or a placeholder such as "Not set yet". */
+    value: ReactNode;
+}
+declare function ChecklistItem({ done, label, value }: ChecklistItemProps): react.JSX.Element;
+/** Fidel design-system Checklist: a summary of choices so far, each ticked once set. */
+declare const Checklist: typeof ChecklistRoot & {
+    Item: typeof ChecklistItem;
+};
+
+interface DrawerProps {
+    open: boolean;
+    /** Called on Escape, the close button, or a click on the page behind. */
+    onClose: () => void;
+    title: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    /** Pinned to the bottom: a summary on the left and the buttons, primary last. */
+    footer?: ReactNode;
+    /** False blocks every way of closing, e.g. while saving. @default true */
+    dismissible?: boolean;
+}
+/**
+ * Fidel design-system Drawer: a floating panel that slides in from the right over the
+ * page, for picking or editing without leaving it. Traps focus, locks page
+ * scroll and returns focus on close, like Modal.
+ */
+declare function Drawer({ open, onClose, title, description, children, footer, dismissible }: DrawerProps): react.ReactPortal | null;
+
+interface ResourceCardStat {
+    label: ReactNode;
+    value: ReactNode;
+}
+interface ResourceCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** 16px icon before the title, e.g. a repository mark. */
+    icon?: ReactNode;
+    title: ReactNode;
+    /** Beside the title, e.g. a Tag. */
+    badge?: ReactNode;
+    /** Small lines under the title. */
+    meta?: ReactNode[];
+    stats?: ResourceCardStat[];
+    /** At the end of the card, e.g. a "Manage" button. */
+    action?: ReactNode;
+    /** `add` is the dashed card that invites adding another resource. @default 'default' */
+    variant?: 'default' | 'add';
+}
+/** Fidel design-system ResourceCard: one linked thing (a repository, an account) with its numbers and an action. */
+declare function ResourceCard({ icon, title, badge, meta, stats, action, variant, className, ...rest }: ResourceCardProps): react.JSX.Element;
+
+interface PageSkeletonProps {
+    /** What's loading, for screen readers. @default 'Loading' */
+    label?: string;
+    children: ReactNode;
+}
+/** Fidel design-system PageSkeleton: a page's loading layout, composed from its parts so it matches the page. */
+declare function PageSkeletonRoot({ label, children }: PageSkeletonProps): react.JSX.Element;
+interface PageSkeletonHeaderProps {
+    /** Real text when the title is known before data loads, e.g. "Projects". */
+    title?: ReactNode;
+    description?: ReactNode | boolean;
+    breadcrumb?: boolean;
+    action?: boolean;
+    /** Number of tabs under the title. */
+    tabs?: number;
+}
+/** The PageHeader with bars where data-driven text will go. */
+declare function PageSkeletonHeader({ title, description, breadcrumb, action, tabs }: PageSkeletonHeaderProps): react.JSX.Element;
+/** A search field and filter buttons. */
+declare function PageSkeletonToolbar({ filters }: {
+    filters?: number;
+}): react.JSX.Element;
+/** A bordered table with a header row and `rows` rows of `columns` cells. */
+declare function PageSkeletonTable({ rows, columns }: {
+    rows?: number;
+    columns?: number;
+}): react.JSX.Element;
+/** A grid of cards. */
+declare function PageSkeletonCards({ count, height, columns }: {
+    count?: number;
+    height?: number;
+    columns?: number;
+}): react.JSX.Element;
+/** Labelled fields, one under the other. */
+declare function PageSkeletonForm({ fields }: {
+    fields?: number;
+}): react.JSX.Element;
+/** Main content beside a fixed-width aside, like a form with its summary. */
+declare function PageSkeletonSplit({ children, aside }: {
+    children: ReactNode;
+    aside: ReactNode;
+}): react.JSX.Element;
+declare const PageSkeleton: typeof PageSkeletonRoot & {
+    Header: typeof PageSkeletonHeader;
+    Toolbar: typeof PageSkeletonToolbar;
+    Table: typeof PageSkeletonTable;
+    Cards: typeof PageSkeletonCards;
+    Form: typeof PageSkeletonForm;
+    Split: typeof PageSkeletonSplit;
+};
+
+type PreviewCardProps<T extends ElementType = 'div'> = {
+    /** Render as a link, e.g. react-router's `Link`. @default 'div' */
+    as?: T;
+    /** `add` is the dashed card that invites adding another one. @default 'default' */
+    variant?: 'default' | 'add';
+} & Omit<ComponentPropsWithoutRef<T>, 'as'>;
+declare function PreviewCardRoot<T extends ElementType = 'div'>({ as, variant, className, ...rest }: PreviewCardProps<T>): react.JSX.Element;
+interface PreviewCardPreviewProps extends HTMLAttributes<HTMLDivElement> {
+    /** A small chip in the top corner naming where the preview comes from. */
+    label?: ReactNode;
+}
+declare function PreviewCardPreview({ label, className, children, ...rest }: PreviewCardPreviewProps): react.JSX.Element;
+interface PreviewCardTitleProps extends HTMLAttributes<HTMLDivElement> {
+    /** At the end of the title row, e.g. a Tag or "4 variants". */
+    aside?: ReactNode;
+}
+declare function PreviewCardTitle({ aside, className, children, ...rest }: PreviewCardTitleProps): react.JSX.Element;
+/**
+ * Fidel design-system PreviewCard: a picture of a thing over its name, facts
+ * and a footer. Compose `Preview`, `Body` (holding `Title` and `Meta`) and `Footer`.
+ */
+declare const PreviewCard: typeof PreviewCardRoot & {
+    Preview: typeof PreviewCardPreview;
+    Body: ({ className, ...rest }: HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
+    Title: typeof PreviewCardTitle;
+    Meta: ({ className, ...rest }: HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
+    Footer: ({ className, ...rest }: HTMLAttributes<HTMLDivElement>) => react.JSX.Element;
+};
+
+interface TileProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Small heading in the top corner; pass a link to make it one. */
+    label: ReactNode;
+    /** Beside the label, e.g. a "Reading 3 of 5" Tag. */
+    aside?: ReactNode;
+}
+/** Fidel design-system Tile: a quiet labelled panel holding a sample, for a grid of overview tiles. */
+declare function Tile({ label, aside, className, children, ...rest }: TileProps): react.JSX.Element;
+
+interface ListCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    title?: ReactNode;
+    /** A number after the title. */
+    count?: number;
+    /** At the end of the header, e.g. "Step 2 of 4". */
+    aside?: ReactNode;
+    /** A quiet line under the rows. */
+    footer?: ReactNode;
+}
+declare function ListCardRoot({ title, count, aside, footer, className, children, ...rest }: ListCardProps): react.JSX.Element;
+interface ListCardRowProps extends Omit<HTMLAttributes<HTMLLIElement>, 'title'> {
+    /** 16px icon before the text. */
+    icon?: ReactNode;
+    /** Colours the icon. @default 'neutral' */
+    tone?: Tone;
+    title: ReactNode;
+    description?: ReactNode;
+    /** At the end of the row, e.g. a Button, a count or a Tag. */
+    trailing?: ReactNode;
+    /** Dims the row, e.g. a step not reached yet. */
+    muted?: boolean;
+}
+declare function ListCardRow({ icon, tone, title, description, trailing, muted, className, ...rest }: ListCardRowProps): react.JSX.Element;
+/** Fidel design-system ListCard: a bordered card of rows, each with an icon, text and something at the end. */
+declare const ListCard: typeof ListCardRoot & {
+    Row: typeof ListCardRow;
+};
+
+interface DescriptionListItem {
+    label: ReactNode;
+    value: ReactNode;
+}
+interface DescriptionListProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    title?: ReactNode;
+    /** At the end of the title row, e.g. a "Setup ›" link. */
+    action?: ReactNode;
+    items?: DescriptionListItem[];
+    /** A quiet note under the items. */
+    note?: ReactNode;
+}
+/** Fidel design-system DescriptionList: a titled group of label and value rows, for a side panel. */
+declare function DescriptionList({ title, action, items, note, className, children, ...rest }: DescriptionListProps): react.JSX.Element;
+
+interface ColorRampProps extends HTMLAttributes<HTMLDivElement> {
+    /** CSS colours, light to dark or in token order. Pass values you have already validated. */
+    colors: string[];
+    /** Height of the strip: 16, 32 or 64px. @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+}
+/** Fidel design-system ColorRamp: a strip of colour blocks side by side, for a palette at a glance. */
+declare function ColorRamp({ colors, size, className, ...rest }: ColorRampProps): react.JSX.Element;
+
+interface SwatchListItem {
+    /** A CSS colour you have already validated, or null when it can't be shown. */
+    color: string | null;
+    name: ReactNode;
+    value: ReactNode;
+}
+interface SwatchListProps extends HTMLAttributes<HTMLUListElement> {
+    items: SwatchListItem[];
+}
+/** Fidel design-system SwatchList: compact rows of a colour dot, a token name and its value. */
+declare function SwatchList({ items, className, ...rest }: SwatchListProps): react.JSX.Element;
+
+interface TypeSpecimenWeight {
+    label: string;
+    weight: number;
+}
+interface TypeSpecimenProps extends HTMLAttributes<HTMLElement> {
+    /** Family name to show, e.g. "Rethink Sans". */
+    family: string;
+    /** The CSS font-family to draw the samples in. Pass a value you have already validated. */
+    fontFamily: string;
+    /** The variables that use this family, e.g. Tags for `--font-body`. */
+    tokens?: ReactNode;
+    /** A line set in the family. */
+    sample?: ReactNode;
+    weights?: TypeSpecimenWeight[];
+    /** A quiet note at the bottom, e.g. the fallback stack. */
+    footer?: ReactNode;
+}
+/** Fidel design-system TypeSpecimen: one typeface drawn large, with its alphabet and weights. */
+declare function TypeSpecimen({ family, fontFamily, tokens, sample, weights, footer, className, ...rest }: TypeSpecimenProps): react.JSX.Element;
+interface TypeSampleProps extends HTMLAttributes<HTMLDivElement> {
+    fontFamily: string;
+    /** Under the glyphs, e.g. "Body and display". */
+    caption?: ReactNode;
+}
+/** Fidel design-system TypeSample: a large "Aa" in one typeface with a caption, for overview tiles. */
+declare function TypeSample({ fontFamily, caption, className, ...rest }: TypeSampleProps): react.JSX.Element;
+
+declare function TypeScaleRoot({ className, ...rest }: HTMLAttributes<HTMLUListElement>): react.JSX.Element;
+interface TypeScaleRowProps extends HTMLAttributes<HTMLLIElement> {
+    /** The token, e.g. "text-4xl". Set in mono. */
+    name: ReactNode;
+    /** Under the name, e.g. "36px / 40px". */
+    detail?: ReactNode;
+    /** Size, line height, weight or family to draw the sample with. Pass values you have already validated. */
+    sampleStyle: CSSProperties;
+    /** @default 'Check every pull request' */
+    sample?: ReactNode;
+}
+declare function TypeScaleRow({ name, detail, sampleStyle, sample, className, ...rest }: TypeScaleRowProps): react.JSX.Element;
+/** Fidel design-system TypeScale: one row per text size, each drawn at its real size. */
+declare const TypeScale: typeof TypeScaleRoot & {
+    Row: typeof TypeScaleRow;
+};
+
+interface MeasureListItem {
+    name: ReactNode;
+    value: ReactNode;
+    /** The number the bar is drawn from, in any unit shared by every item. */
+    amount: number;
+}
+interface MeasureListProps extends HTMLAttributes<HTMLUListElement> {
+    items: MeasureListItem[];
+    /** The amount a full bar stands for. @default the largest amount */
+    max?: number;
+    /** @default 'accent' */
+    tone?: 'accent' | 'neutral';
+}
+/** Fidel design-system MeasureList: rows of a token name, its value and a bar to scale, e.g. spacing or durations. */
+declare function MeasureList({ items, max, tone, className, ...rest }: MeasureListProps): react.JSX.Element;
+
+interface TokenSampleProps extends HTMLAttributes<HTMLDivElement> {
+    /** What the sample draws: a corner radius or a box shadow. */
+    kind: 'radius' | 'shadow';
+    /** The CSS value to draw. Pass a value you have already validated. */
+    value: string;
+    name: ReactNode;
+    /** Under the name, e.g. "8px" or the shadow as written. */
+    detail?: ReactNode;
+}
+/** Fidel design-system TokenSample: a square drawn with one radius or shadow token, over its name and value. */
+declare function TokenSample({ kind, value, name, detail, className, ...rest }: TokenSampleProps): react.JSX.Element;
+
+interface EasingCurveProps extends HTMLAttributes<HTMLDivElement> {
+    /** `cubic-bezier(x1, y1, x2, y2)`. Anything else draws a straight line. */
+    value: string;
+    name: ReactNode;
+}
+/** Fidel design-system EasingCurve: an easing token drawn as its curve, over its name and value. */
+declare function EasingCurve({ value, name, className, ...rest }: EasingCurveProps): react.JSX.Element;
+
+interface FilterChipOption<T extends string> {
+    value: T;
+    label: ReactNode;
+    /** Shown after the label, e.g. how many items match. */
+    count?: number;
+}
+interface FilterChipsProps<T extends string> {
+    options: FilterChipOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    /** Names the group for screen readers. */
+    'aria-label': string;
+    className?: string;
+}
+/**
+ * Fidel design-system FilterChips: a row of pill filters, one selected, each
+ * with a count. A radio group: Arrow keys move and select; Tab leaves it.
+ */
+declare function FilterChips<T extends string>({ options, value, onChange, 'aria-label': ariaLabel, className }: FilterChipsProps<T>): react.JSX.Element;
+
+interface MeterProps extends HTMLAttributes<HTMLDivElement> {
+    value: number;
+    max: number;
+    /** Beside the bar, e.g. "1 of 3 brands on Pro". Also names the meter for screen readers when it is a string. */
+    label: ReactNode;
+}
+/** Fidel design-system Meter: a thin bar showing how much of an allowance is used. */
+declare function Meter({ value, max, label, className, ...rest }: MeterProps): react.JSX.Element;
+
+export { Accordion, type AccordionProps, AppLayout, type AppLayoutProps, AppNav, type AppNavProps, Avatar, AvatarLabelGroup, type AvatarLabelGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeProps, BrandButton, type BrandButtonProps, type Breakpoint, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant, Callout, type CalloutProps, type CalloutTone, Card, type CardPadding, type CardProps, type CardTone, Checkbox, type CheckboxProps, Checklist, type ChecklistItemProps, type ChecklistProps, ColorRamp, type ColorRampProps, DescriptionList, type DescriptionListItem, type DescriptionListProps, type DiffElement, type DiffPropertyLine, DiffPropertyList, type DiffPropertyListProps, DiffSection, type DiffSectionProps, Divider, type DividerProps, Drawer, type DrawerProps, EasingCurve, type EasingCurveProps, EmptyState, type EmptyStateProps, type FilterChipOption, FilterChips, type FilterChipsProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Input, type InputProps, ListCard, type ListCardProps, type ListCardRowProps, ListLabel, type ListLabelProps, MeasureList, type MeasureListItem, type MeasureListProps, Menu, type MenuDivider, type MenuEntry, type MenuItem, type MenuLabel, type MenuPlacement, type MenuProps, type MenuSearch, Meter, type MeterProps, MismatchCard, type MismatchCardProps, type MismatchProperty, Modal, type ModalProps, type ModalSize, type ModalTone, MultiSelect, type MultiSelectOption, type MultiSelectProps, NumberedSteps, type NumberedStepsProps, OptionList, type OptionListProps, OptionRow, type OptionRowProps, PageHeader, type PageHeaderProps, PageSkeleton, type PageSkeletonHeaderProps, type PageSkeletonProps, Pagination, type PaginationProps, PreviewCard, type PreviewCardPreviewProps, type PreviewCardProps, type PreviewCardTitleProps, PricingCard, type PricingCardProps, Radio, RadioCard, type RadioCardProps, type RadioProps, ResourceCard, type ResourceCardProps, type ResourceCardStat, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Select, type SelectOption, type SelectProps, SettingsSection, type SettingsSectionProps, Sidebar, type SidebarBrandProps, SidebarItem, type SidebarItemProps, type SidebarProps, type SidebarSectionProps, type SidebarState, Skeleton, SkeletonGroup, type SkeletonGroupProps, type SkeletonProps, type SkeletonShape, Spinner, type SpinnerProps, Split, type SplitProps, StackedCardsIllustration, Stat, type StatProps, StatusDot, type StatusDotProps, type StatusDotStatus, type Step, StepList, type StepListProps, type StepStatus, Stepper, type StepperProps, type StepperStepProps, type StepperStepStatus, Swatch, SwatchList, type SwatchListItem, type SwatchListProps, type SwatchProps, TabNav, type TabNavProps, Table, type TableColumn, type TableProps, Tag, type TagProps, Tile, type TileProps, Toast, type ToastAction, type ToastProps, ToastRegion, type ToastRegionProps, Toggle, type ToggleProps, type ToggleSize, TokenSample, type TokenSampleProps, type Tone, Tooltip, type TooltipProps, type TooltipSide, TypeSample, type TypeSampleProps, TypeScale, type TypeScaleRowProps, TypeSpecimen, type TypeSpecimenProps, type TypeSpecimenWeight, WorkspaceAvatar, WorkspaceSwitcher, type WorkspaceSwitcherProps, breakpoints, useSidebar };