@tulipfarm/sprout 0.4.0 → 0.5.0

package/dist/components/chat-input.js

@@ -200,7 +200,7 @@ function ModelMark({ model }) {
 function OptionPicker({ label, search, options, value, onChange, disabled, icon, align, }) {
     const [open, setOpen] = useState(false);
     const selected = options.find(option => option.id === value);
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs(PopoverTrigger, { render: _jsx(InputGroupButton, { size: "sm", "aria-label": `${label}: ${selected?.label ?? 'None'}`, disabled: disabled, className: "sprout-chat-input-picker" }), children: [icon(selected), _jsx("span", { className: "sprout-chat-input-picker-label", children: selected?.label ?? label }), _jsx(ChevronDown, { size: 12, "aria-hidden": "true" })] }), _jsx(PopoverContent, { size: "picker", side: "top", align: align, sideOffset: 8, className: "sprout-chat-input-menu", children: _jsxs(Command, { children: [_jsx(CommandInput, { "aria-label": search, placeholder: `${search}…` }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No matches." }), _jsx(CommandGroup, { heading: label, children: options.map(option => (_jsxs(CommandItem, { value: `${option.label} ${option.description ?? ''}`, "data-checked": option.id === value, disabled: 'disabled' in option && !!option.disabled, onSelect: () => {
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs(PopoverTrigger, { render: _jsx(InputGroupButton, { "aria-label": `${label}: ${selected?.label ?? 'None'}`, disabled: disabled, className: "sprout-chat-input-picker" }), children: [icon(selected), _jsx("span", { className: "sprout-chat-input-picker-label", children: selected?.label ?? label }), _jsx(ChevronDown, { size: 12, "aria-hidden": "true" })] }), _jsx(PopoverContent, { size: "picker", side: "top", align: align, sideOffset: 8, className: "sprout-chat-input-menu", children: _jsxs(Command, { children: [_jsx(CommandInput, { "aria-label": search, placeholder: `${search}…` }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No matches." }), _jsx(CommandGroup, { heading: label, children: options.map(option => (_jsxs(CommandItem, { value: `${option.label} ${option.description ?? ''}`, "data-checked": option.id === value, disabled: 'disabled' in option && !!option.disabled, onSelect: () => {
                                             onChange(option.id);
                                             setOpen(false);
                                         }, children: [icon(option), _jsxs("span", { className: "sprout-chat-input-option-text", children: [_jsx("span", { children: option.label }), option.description && (_jsx("span", { className: "sprout-chat-input-option-description", children: option.description }))] })] }, option.id))) })] })] }) })] }));
@@ -262,11 +262,11 @@ export function ChatInput({ value, onValueChange, onSend, onStop, status = 'idle
             : undefined, className: cn('sprout-chat-input', className), children: [_jsxs("form", { ref: form, "aria-label": label, className: "sprout-chat-input-form", onSubmit: event => {
                     event.preventDefault();
                     send();
-                }, children: [_jsxs(InputGroup, { variant: "composer", className: "sprout-chat-input-box", children: [attachments.length > 0 && (_jsx(InputGroupAddon, { align: "block-start", className: "sprout-chat-input-attachments", children: attachments.map(file => (_jsx(FileAttachment, { file: file, variant: "chip", viewable: true, preview: true, onRemove: onRemoveAttachment && !disabled ? () => onRemoveAttachment(file.id) : undefined }, file.id))) })), _jsx(RichTextEditor, { ref: editor, value: value, onChange: onValueChange, onSend: send, extensions: extensions, placeholder: streaming ? streamingPlaceholder : placeholder, disabled: disabled, ariaLabel: label, ariaExpanded: !!panel, ariaControls: panel ? listId : undefined, ariaActiveDescendant: panel?.items.length ? optionId(panel.active) : undefined, className: "sprout-chat-input-editor", toolbarAddon: _jsxs("div", { className: "sprout-chat-input-bar", children: [_jsxs("div", { className: "sprout-chat-input-bar-start", children: [attachActions && attachActions.length > 0 && (_jsxs(DropdownMenu, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(DropdownMenuTrigger, { render: _jsx(InputGroupButton, { size: "icon-sm", "aria-label": "Add files and more", disabled: disabled }) }), children: _jsx(Plus, { size: 16, "aria-hidden": "true" }) }), _jsx(TooltipContent, { children: "Add files and more" })] }), _jsx(DropdownMenuContent, { size: "menu", side: "top", align: "start", className: "sprout-chat-input-menu", children: _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Add" }), attachActions.map(action => (_jsxs(DropdownMenuItem, { onClick: action.onSelect, children: [action.icon, _jsxs("span", { className: "sprout-chat-input-option-text", children: [_jsx("span", { children: action.label }), action.description && (_jsx("span", { className: "sprout-chat-input-option-description", children: action.description }))] })] }, action.id)))] }) })] })), modes && modes.length > 0 && (_jsxs(DropdownMenu, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(DropdownMenuTrigger, { render: _jsx(InputGroupButton, { size: "icon-sm", "aria-label": `Mode: ${activeMode?.label ?? 'Default'}`, disabled: disabled }) }), children: _jsx(Sliders, { size: 16, "aria-hidden": "true" }) }), _jsx(TooltipContent, { children: "Modes" })] }), _jsx(DropdownMenuContent, { size: "menu", side: "top", align: "start", className: "sprout-chat-input-menu", children: _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Mode" }), _jsx(DropdownMenuRadioGroup, { value: mode ?? '', onValueChange: next => onModeChange?.(next === mode || !next ? null : String(next)), children: modes.map(option => (_jsxs(DropdownMenuRadioItem, { value: option.id, closeOnClick: true, style: option.color
+                }, children: [_jsxs(InputGroup, { variant: "composer", className: "sprout-chat-input-box", children: [attachments.length > 0 && (_jsx(InputGroupAddon, { align: "block-start", className: "sprout-chat-input-attachments", children: attachments.map(file => (_jsx(FileAttachment, { file: file, variant: "chip", viewable: true, preview: true, onRemove: onRemoveAttachment && !disabled ? () => onRemoveAttachment(file.id) : undefined }, file.id))) })), _jsx(RichTextEditor, { ref: editor, value: value, onChange: onValueChange, onSend: send, extensions: extensions, placeholder: streaming ? streamingPlaceholder : placeholder, disabled: disabled, ariaLabel: label, ariaExpanded: !!panel, ariaControls: panel ? listId : undefined, ariaActiveDescendant: panel?.items.length ? optionId(panel.active) : undefined, className: "sprout-chat-input-editor", toolbarAddon: _jsxs("div", { className: "sprout-chat-input-bar", children: [_jsxs("div", { className: "sprout-chat-input-bar-start", children: [attachActions && attachActions.length > 0 && (_jsxs(DropdownMenu, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(DropdownMenuTrigger, { render: _jsx(InputGroupButton, { size: "icon", "aria-label": "Add files and more", disabled: disabled }) }), children: _jsx(Plus, { size: 16, "aria-hidden": "true" }) }), _jsx(TooltipContent, { children: "Add files and more" })] }), _jsx(DropdownMenuContent, { size: "menu", side: "top", align: "start", className: "sprout-chat-input-menu", children: _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Add" }), attachActions.map(action => (_jsxs(DropdownMenuItem, { onClick: action.onSelect, children: [action.icon, _jsxs("span", { className: "sprout-chat-input-option-text", children: [_jsx("span", { children: action.label }), action.description && (_jsx("span", { className: "sprout-chat-input-option-description", children: action.description }))] })] }, action.id)))] }) })] })), modes && modes.length > 0 && (_jsxs(DropdownMenu, { children: [_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx(DropdownMenuTrigger, { render: _jsx(InputGroupButton, { size: "icon", "aria-label": `Mode: ${activeMode?.label ?? 'Default'}`, disabled: disabled }) }), children: _jsx(Sliders, { size: 16, "aria-hidden": "true" }) }), _jsx(TooltipContent, { children: "Modes" })] }), _jsx(DropdownMenuContent, { size: "menu", side: "top", align: "start", className: "sprout-chat-input-menu", children: _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { children: "Mode" }), _jsx(DropdownMenuRadioGroup, { value: mode ?? '', onValueChange: next => onModeChange?.(next === mode || !next ? null : String(next)), children: modes.map(option => (_jsxs(DropdownMenuRadioItem, { value: option.id, closeOnClick: true, style: option.color
                                                                                 ? {
                                                                                     '--sprout-chat-input-mode': option.color,
                                                                                 }
-                                                                                : undefined, className: option.color ? 'sprout-chat-input-mode-option' : undefined, children: [option.icon, _jsxs("span", { className: "sprout-chat-input-option-text", children: [_jsx("span", { children: option.label }), option.description && (_jsx("span", { className: "sprout-chat-input-option-description", children: option.description }))] })] }, option.id))) })] }) })] })), activeMode && (_jsxs(InputGroupButton, { size: "sm", variant: "secondary", className: "sprout-chat-input-mode", "aria-label": `Turn off ${activeMode.label}`, disabled: disabled, onClick: () => onModeChange?.(null), children: [activeMode.icon, _jsx("span", { className: "sprout-chat-input-picker-label", children: activeMode.label }), _jsx(X, { size: 12, "aria-hidden": "true" })] })), projects && projects.length > 0 && (_jsxs(_Fragment, { children: [_jsx("span", { className: "sprout-chat-input-divider", "aria-hidden": "true" }), _jsx(OptionPicker, { label: "Project", search: "Search projects", options: projects, value: project, onChange: id => onProjectChange?.(id), disabled: disabled, icon: option => option?.icon ?? _jsx(Folder, { size: 16, "aria-hidden": "true" }), align: "start" })] }))] }), _jsxs("div", { className: "sprout-chat-input-bar-end", children: [models && models.length > 0 && (_jsx(OptionPicker, { label: "Model", search: "Search models", options: models, value: model, onChange: id => onModelChange?.(id), disabled: disabled, icon: option => option && _jsx(ModelMark, { model: option }), align: "end" })), streaming ? (_jsx(InputGroupButton, { size: "icon-sm", variant: "default", className: "sprout-chat-input-send", "aria-label": "Stop", onClick: onStop, children: _jsx("span", { className: "sprout-chat-input-stop", "aria-hidden": "true" }) })) : (_jsx(InputGroupButton, { type: "submit", size: "icon-sm", variant: canSend ? 'default' : 'secondary', className: "sprout-chat-input-send", "aria-label": "Send message", disabled: !canSend, children: _jsx(ArrowUp, { size: 16, "aria-hidden": "true" }) }))] })] }) })] }), panel && (_jsx("div", { className: "sprout-chat-input-panel", "data-side": panelBelow ? 'bottom' : 'top', children: _jsx(MentionList, { id: listId, label: triggers[panel.kind].label, announcement: panel.items.length
+                                                                                : undefined, className: option.color ? 'sprout-chat-input-mode-option' : undefined, children: [option.icon, _jsxs("span", { className: "sprout-chat-input-option-text", children: [_jsx("span", { children: option.label }), option.description && (_jsx("span", { className: "sprout-chat-input-option-description", children: option.description }))] })] }, option.id))) })] }) })] })), activeMode && (_jsxs(InputGroupButton, { variant: "secondary", className: "sprout-chat-input-mode", "aria-label": `Turn off ${activeMode.label}`, disabled: disabled, onClick: () => onModeChange?.(null), children: [activeMode.icon, _jsx("span", { className: "sprout-chat-input-picker-label", children: activeMode.label }), _jsx(X, { size: 12, "aria-hidden": "true" })] })), projects && projects.length > 0 && (_jsxs(_Fragment, { children: [_jsx("span", { className: "sprout-chat-input-divider", "aria-hidden": "true" }), _jsx(OptionPicker, { label: "Project", search: "Search projects", options: projects, value: project, onChange: id => onProjectChange?.(id), disabled: disabled, icon: option => option?.icon ?? _jsx(Folder, { size: 16, "aria-hidden": "true" }), align: "start" })] }))] }), _jsxs("div", { className: "sprout-chat-input-bar-end", children: [models && models.length > 0 && (_jsx(OptionPicker, { label: "Model", search: "Search models", options: models, value: model, onChange: id => onModelChange?.(id), disabled: disabled, icon: option => option && _jsx(ModelMark, { model: option }), align: "end" })), streaming ? (_jsx(InputGroupButton, { size: "icon", variant: "default", className: "sprout-chat-input-send", "aria-label": "Stop", onClick: onStop, children: _jsx("span", { className: "sprout-chat-input-stop", "aria-hidden": "true" }) })) : (_jsx(InputGroupButton, { type: "submit", size: "icon", variant: canSend ? 'default' : 'secondary', className: "sprout-chat-input-send", "aria-label": "Send message", disabled: !canSend, children: _jsx(ArrowUp, { size: 16, "aria-hidden": "true" }) }))] })] }) })] }), panel && (_jsx("div", { className: "sprout-chat-input-panel", "data-side": panelBelow ? 'bottom' : 'top', children: _jsx(MentionList, { id: listId, label: triggers[panel.kind].label, announcement: panel.items.length
                                 ? `${panel.items.length} ${triggers[panel.kind].label.toLowerCase()}. Use Up and Down to choose, Enter to add, Escape to close.`
                                 : triggers[panel.kind].empty, status: panel.items.length ? undefined : (_jsx(MentionStatus, { tone: "empty", children: triggers[panel.kind].empty })), children: panel.items.map((item, index) => (_jsx(MentionOption, { id: optionId(index), active: index === panel.active, onSelect: () => panel.select(index), media: item.media, title: item.label, description: item.description }, item.id))) }) }))] }), prompts && prompts.length > 0 && !filled && !streaming && (_jsx("div", { role: "group", "aria-label": "Suggested prompts", className: "sprout-chat-input-prompts", children: prompts.map(prompt => (_jsxs(Button, { size: "sm", variant: "outline", disabled: disabled, className: "sprout-chat-input-prompt", onClick: () => fill(prompt), children: [prompt.icon, prompt.label] }, prompt.id))) }))] }));
 }

package/dist/components/chat-sources.js

@@ -58,7 +58,7 @@ export function CheckedCitation({ label, state, onOpen, onRetry }) {
             // opened by click or keyboard closes only by click, Escape, or outside press.
             if (details.reason === 'trigger-hover' && openReason.current === 'trigger-press')
                 details.cancel();
-        }, children: [_jsx(PopoverTrigger, { openOnHover: true, delay: hoverDelay, closeDelay: hoverCloseDelay, "data-slot": "checked-citation", className: "sprout-chat-sources-checked", render: _jsx(Button, { variant: "link", size: "task-link", "aria-label": `Source: ${label}` }), children: label }), _jsx(PopoverContent, { ref: popup, "data-citation-state": state.kind, className: "sprout-chat-sources-preview", children: state.kind === 'idle' || state.kind === 'loading' ? (_jsxs("p", { role: "status", className: "sprout-chat-sources-checking", children: [_jsx(Spinner, { "aria-hidden": "true" }), "Checking access to this source\u2026"] })) : state.kind === 'ready' ? (_jsxs("div", { "data-slot": "chat-source", className: "sprout-chat-sources-source", children: [_jsx("p", { className: "sprout-chat-sources-title", children: state.title }), _jsx("p", { className: "sprout-chat-sources-location", children: state.location }), _jsx("p", { className: "sprout-chat-sources-excerpt", "data-preserve-lines": "", children: state.excerpt })] })) : (_jsxs("div", { className: "sprout-chat-sources-source", children: [_jsx("p", { className: "sprout-chat-sources-title", children: state.kind === 'unavailable' ? 'Source unavailable' : 'Couldn’t load this source' }), _jsx("p", { role: "alert", className: "sprout-chat-sources-excerpt", children: state.message }), state.kind === 'error' && (_jsx(Button, { variant: "outline", size: "sm", className: "sprout-chat-sources-retry", onClick: () => {
+        }, children: [_jsx(PopoverTrigger, { openOnHover: true, delay: hoverDelay, closeDelay: hoverCloseDelay, "data-slot": "checked-citation", className: "sprout-chat-sources-checked", render: _jsx(Button, { variant: "link", "aria-label": `Source: ${label}` }), children: label }), _jsx(PopoverContent, { ref: popup, "data-citation-state": state.kind, className: "sprout-chat-sources-preview", children: state.kind === 'idle' || state.kind === 'loading' ? (_jsxs("p", { role: "status", className: "sprout-chat-sources-checking", children: [_jsx(Spinner, { "aria-hidden": "true" }), "Checking access to this source\u2026"] })) : state.kind === 'ready' ? (_jsxs("div", { "data-slot": "chat-source", className: "sprout-chat-sources-source", children: [_jsx("p", { className: "sprout-chat-sources-title", children: state.title }), _jsx("p", { className: "sprout-chat-sources-location", children: state.location }), _jsx("p", { className: "sprout-chat-sources-excerpt", "data-preserve-lines": "", children: state.excerpt })] })) : (_jsxs("div", { className: "sprout-chat-sources-source", children: [_jsx("p", { className: "sprout-chat-sources-title", children: state.kind === 'unavailable' ? 'Source unavailable' : 'Couldn’t load this source' }), _jsx("p", { role: "alert", className: "sprout-chat-sources-excerpt", children: state.message }), state.kind === 'error' && (_jsx(Button, { variant: "outline", size: "sm", className: "sprout-chat-sources-retry", onClick: () => {
                                 // The button leaves as loading starts; keep focus in the passage.
                                 popup.current?.focus();
                                 onRetry();

package/dist/components/combobox.d.ts

@@ -1,4 +1,5 @@
 import { Combobox as ComboboxPrimitive } from '@base-ui/react/combobox';
+import { type InputGroupSize } from './input-group.js';
 export type ComboboxProps<Value, Multiple extends boolean | undefined = false> = ComboboxPrimitive.Root.Props<Value, Multiple>;
 /**
  * Holds the value, the typed query, and the open state. It takes every Base
@@ -22,9 +23,11 @@ export type ComboboxTriggerProps = ComboboxPrimitive.Trigger.Props;
  * its search field inside the list.
  */
 export declare function ComboboxTrigger({ className, children, ...props }: ComboboxTriggerProps): import("react").JSX.Element;
-export interface ComboboxInputProps extends Omit<ComboboxPrimitive.Input.Props, 'className'> {
+export interface ComboboxInputProps extends Omit<ComboboxPrimitive.Input.Props, 'className' | 'size'> {
     /** Classes for the surrounding `InputGroup`. */
     className?: string;
+    /** `sm` is 28px, `md` is 32px (`--sprout-control-height`), and `lg` is 36px. */
+    size?: InputGroupSize | null;
     /** Shows the chevron button that opens the list. On by default. */
     showTrigger?: boolean;
     /**
@@ -39,7 +42,7 @@ export interface ComboboxInputProps extends Omit<ComboboxPrimitive.Input.Props,
  * goes on the group; children are added after the addon, for example an
  * inline-start `InputGroupAddon` with an icon.
  */
-export declare function ComboboxInput({ className, children, disabled, showTrigger, showClear, ...props }: ComboboxInputProps): import("react").JSX.Element;
+export declare function ComboboxInput({ className, children, disabled, showTrigger, showClear, size, ...props }: ComboboxInputProps): import("react").JSX.Element;
 type PositionerProps = Pick<ComboboxPrimitive.Positioner.Props, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'>;
 export interface ComboboxContentProps extends ComboboxPrimitive.Popup.Props, PositionerProps {
 }
@@ -74,13 +77,16 @@ export type ComboboxEmptyProps = ComboboxPrimitive.Empty.Props;
 export declare function ComboboxEmpty({ className, ...props }: ComboboxEmptyProps): import("react").JSX.Element;
 export type ComboboxSeparatorProps = ComboboxPrimitive.Separator.Props;
 export declare function ComboboxSeparator({ className, ...props }: ComboboxSeparatorProps): import("react").JSX.Element;
-export type ComboboxChipsProps = ComboboxPrimitive.Chips.Props;
+export interface ComboboxChipsProps extends ComboboxPrimitive.Chips.Props {
+    /** `sm` is 28px, `md` is 32px (`--sprout-control-height`), and `lg` is 36px. It is a minimum: chips wrap onto more rows. */
+    size?: InputGroupSize | null;
+}
 /**
  * The bordered field for `multiple` comboboxes. Put a `ComboboxValue` that
  * renders `ComboboxChip`s and a `ComboboxChipsInput` inside it. Arrow left
  * and right move between chips; Backspace removes one.
  */
-export declare function ComboboxChips({ className, ...props }: ComboboxChipsProps): import("react").JSX.Element;
+export declare function ComboboxChips({ className, size, ...props }: ComboboxChipsProps): import("react").JSX.Element;
 export interface ComboboxChipProps extends ComboboxPrimitive.Chip.Props {
     /** Shows the × button that removes the chip. On by default. */
     showRemove?: boolean;

package/dist/components/combobox.js

@@ -33,7 +33,7 @@ export function ComboboxTrigger({ className, children, ...props }) {
     return (_jsxs(ComboboxPrimitive.Trigger, { "data-slot": "combobox-trigger", "aria-label": children == null ? 'Show options' : undefined, ...props, className: stateClassName('sprout-combobox-trigger', className), children: [children, _jsx(ChevronDown, { "aria-hidden": "true", className: "sprout-combobox-trigger-icon" })] }));
 }
 function ComboboxClear({ className, ...props }) {
-    return (_jsx(ComboboxPrimitive.Clear, { "data-slot": "combobox-clear", "aria-label": "Clear selection", render: _jsx(InputGroupButton, { variant: "ghost", size: "icon-xs" }), ...props, className: stateClassName('sprout-combobox-clear', className), children: _jsx(X, { "aria-hidden": "true" }) }));
+    return (_jsx(ComboboxPrimitive.Clear, { "data-slot": "combobox-clear", "aria-label": "Clear selection", render: _jsx(InputGroupButton, { variant: "ghost", size: "icon" }), ...props, className: stateClassName('sprout-combobox-clear', className), children: _jsx(X, { "aria-hidden": "true" }) }));
 }
 /**
  * A search field in a Sprout `InputGroup`. Typing filters the list; the
@@ -41,8 +41,8 @@ function ComboboxClear({ className, ...props }) {
  * goes on the group; children are added after the addon, for example an
  * inline-start `InputGroupAddon` with an icon.
  */
-export function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, ...props }) {
-    return (_jsxs(InputGroup, { className: cn('sprout-combobox-input-group', className), children: [_jsx(ComboboxPrimitive.Input, { render: _jsx(InputGroupInput, {}), disabled: disabled, ...props }), _jsxs(InputGroupAddon, { align: "inline-end", children: [showTrigger && (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: _jsx(ComboboxTrigger, {}), "data-slot": "input-group-button", className: "sprout-combobox-input-trigger", disabled: disabled })), showClear && _jsx(ComboboxClear, { disabled: disabled })] }), children] }));
+export function ComboboxInput({ className, children, disabled = false, showTrigger = true, showClear = false, size, ...props }) {
+    return (_jsxs(InputGroup, { size: size, className: cn('sprout-combobox-input-group', className), children: [_jsx(ComboboxPrimitive.Input, { render: _jsx(InputGroupInput, {}), disabled: disabled, ...props }), _jsxs(InputGroupAddon, { align: "inline-end", children: [showTrigger && (_jsx(InputGroupButton, { size: "icon", variant: "ghost", render: _jsx(ComboboxTrigger, {}), "data-slot": "input-group-button", className: "sprout-combobox-input-trigger", disabled: disabled })), showClear && _jsx(ComboboxClear, { disabled: disabled })] }), children] }));
 }
 /**
  * The list surface. It renders its own portal and positioner, opens below
@@ -89,8 +89,9 @@ export function ComboboxSeparator({ className, ...props }) {
  * renders `ComboboxChip`s and a `ComboboxChipsInput` inside it. Arrow left
  * and right move between chips; Backspace removes one.
  */
-export function ComboboxChips({ className, ...props }) {
-    return (_jsx(ComboboxPrimitive.Chips, { "data-slot": "combobox-chips", ...props, className: stateClassName('sprout-combobox-chips', className) }));
+export function ComboboxChips({ className, size, ...props }) {
+    const scale = size ?? 'md';
+    return (_jsx(ComboboxPrimitive.Chips, { "data-slot": "combobox-chips", "data-size": scale, ...props, className: stateClassName(cn('sprout-combobox-chips', `sprout-combobox-chips-size-${scale}`), className) }));
 }
 /** One chosen value inside `ComboboxChips`. */
 export function ComboboxChip({ className, children, showRemove = true, ...props }) {

package/dist/components/form.js

@@ -41,7 +41,7 @@ export function FormFooter({ form, summary, submit, secondarySubmit, dirty, canc
     const action = useActionControl(submit.state);
     const stack = layout === 'stack';
     const compact = layout === 'compact';
-    const size = stack ? 'lg' : 'default';
+    const size = stack ? 'lg' : 'md';
     const wide = stack ? 'sprout-form-footer-wide' : undefined;
     const save = (_jsx(Button, { type: "submit", form: form, size: size, className: wide, ...action.button, children: submit.state.kind === 'busy' ? submit.pendingLabel : submit.label }));
     const secondary = secondarySubmit && (_jsx(Button, { type: "submit", form: form, size: size, variant: "outline", className: wide, disabled: secondarySubmit.disabled, onClick: secondarySubmit.onSelect, children: secondarySubmit.label }));

package/dist/components/gradient-banner.d.ts

@@ -1,6 +1,6 @@
 import { type ComponentProps } from 'react';
 export declare const gradientBannerVariantNames: readonly ["aurora", "citrus", "lagoon", "iris", "cobalt", "mint"];
-export declare const gradientBannerSizeNames: readonly ["sm", "md", "lg", "xl"];
+export declare const gradientBannerSizeNames: readonly ["sm", "md", "lg"];
 export declare const gradientBannerPanelToneNames: readonly ["light", "dark"];
 export type GradientBannerVariant = (typeof gradientBannerVariantNames)[number];
 export type GradientBannerSize = (typeof gradientBannerSizeNames)[number];
@@ -8,7 +8,7 @@ export type GradientBannerPanelTone = (typeof gradientBannerPanelToneNames)[numb
 export interface GradientBannerProps extends ComponentProps<'div'> {
     /** Color story of the art. Defaults to `"aurora"`. */
     variant?: GradientBannerVariant | undefined;
-    /** `sm` 96px, `md` 160px, `lg` 240px (default), `xl` 360px minimum height. */
+    /** `sm` 96px, `md` 160px, `lg` 240px (default) minimum height. */
     size?: GradientBannerSize | undefined;
     /** Film grain over the art. Defaults to `true`. */
     texture?: boolean | undefined;

package/dist/components/gradient-banner.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, useId } from 'react';
 import { cn } from '../internal/classes.js';
 export const gradientBannerVariantNames = ['aurora', 'citrus', 'lagoon', 'iris', 'cobalt', 'mint'];
-export const gradientBannerSizeNames = ['sm', 'md', 'lg', 'xl'];
+export const gradientBannerSizeNames = ['sm', 'md', 'lg'];
 export const gradientBannerPanelToneNames = ['light', 'dark'];
 /**
  * Decorative gradient art with centered content on top. The art is hidden from

package/dist/components/input-group.d.ts

@@ -2,16 +2,16 @@ import type { ComponentProps } from 'react';
 import { type ButtonProps } from './button.js';
 import { type InputProps } from './input.js';
 import { type TextareaProps } from './textarea.js';
-export declare const inputGroupSizeNames: readonly ["default", "lg"];
+export declare const inputGroupSizeNames: readonly ["md", "sm", "lg"];
 export declare const inputGroupVariantNames: readonly ["default", "composer", "question-composer"];
 export declare const inputGroupAddonAlignNames: readonly ["inline-start", "inline-end", "block-start", "block-end"];
-export declare const inputGroupButtonSizeNames: readonly ["xs", "sm", "icon-xs", "icon-sm"];
+export declare const inputGroupButtonSizeNames: readonly ["md", "icon"];
 export type InputGroupSize = (typeof inputGroupSizeNames)[number];
 export type InputGroupVariant = (typeof inputGroupVariantNames)[number];
 export type InputGroupAddonAlign = (typeof inputGroupAddonAlignNames)[number];
 export type InputGroupButtonSize = (typeof inputGroupButtonSizeNames)[number];
 export interface InputGroupProps extends ComponentProps<'div'> {
-    /** `default` is 32px tall with 14px text. `lg` is 44px with 16px text. */
+    /** `sm` is 28px, `md` is 32px (`--sprout-control-height`), and `lg` is 36px. */
     size?: InputGroupSize | null;
     /**
      * `default` is a single field row. `composer` stacks a message box with
@@ -39,14 +39,14 @@ export interface InputGroupAddonProps extends ComponentProps<'div'> {
  */
 export declare function InputGroupAddon({ align, className, onClick, ...props }: InputGroupAddonProps): import("react").JSX.Element;
 export interface InputGroupButtonProps extends Omit<ButtonProps, 'size' | 'type'> {
-    /** `xs` and `sm` fit a label; `icon-xs` (24px) and `icon-sm` (28px) are square. */
+    /** `md` fits a label; `icon` is square. Both follow the group height. */
     size?: InputGroupButtonSize | null;
     type?: 'button' | 'submit' | 'reset';
 }
 /**
- * A compact Sprout `Button` sized to sit inside an `InputGroup` addon. It is
- * `ghost` and `xs` by default, and a plain `type="button"` so it never
- * submits a form by accident. Use `render` to make it a menu, popover, or
+ * A compact Sprout `Button` sized to sit inside an `InputGroup` addon. Its
+ * height follows the group, 4px in from each edge. It is `ghost` and a plain
+ * `type="button"` by default, so it never submits a form by accident. Use `render` to make it a menu, popover, or
  * combobox trigger.
  */
 export declare function InputGroupButton({ size, variant, type, className, ...props }: InputGroupButtonProps): import("react").JSX.Element;

package/dist/components/input-group.js

@@ -4,10 +4,10 @@ import { cn } from '../internal/classes.js';
 import { Button } from './button.js';
 import { Input } from './input.js';
 import { Textarea } from './textarea.js';
-export const inputGroupSizeNames = ['default', 'lg'];
+export const inputGroupSizeNames = ['md', 'sm', 'lg'];
 export const inputGroupVariantNames = ['default', 'composer', 'question-composer'];
 export const inputGroupAddonAlignNames = ['inline-start', 'inline-end', 'block-start', 'block-end'];
-export const inputGroupButtonSizeNames = ['xs', 'sm', 'icon-xs', 'icon-sm'];
+export const inputGroupButtonSizeNames = ['md', 'icon'];
 /**
  * One bordered field made of a control and its additions: icons, text,
  * shortcuts, and buttons. The group draws the border, fill, focus ring, and
@@ -16,7 +16,7 @@ export const inputGroupButtonSizeNames = ['xs', 'sm', 'icon-xs', 'icon-sm'];
  * `InputGroupTextarea`, or a rich text editor, drives those states.
  */
 export function InputGroup({ size, variant, className, ...props }) {
-    const scale = size ?? 'default';
+    const scale = size ?? 'md';
     const kind = variant ?? 'default';
     return (_jsx("div", { "data-slot": "input-group", role: "group", "data-size": scale, "data-variant": kind, ...props, className: cn('sprout-input-group', `sprout-input-group-size-${scale}`, `sprout-input-group-variant-${kind}`, className) }));
 }
@@ -43,13 +43,13 @@ export function InputGroupAddon({ align, className, onClick, ...props }) {
     return (_jsx("div", { role: "group", "data-slot": "input-group-addon", "data-align": side, ...props, onClick: focusControl, className: cn('sprout-input-group-addon', `sprout-input-group-addon-align-${side}`, className) }));
 }
 /**
- * A compact Sprout `Button` sized to sit inside an `InputGroup` addon. It is
- * `ghost` and `xs` by default, and a plain `type="button"` so it never
- * submits a form by accident. Use `render` to make it a menu, popover, or
+ * A compact Sprout `Button` sized to sit inside an `InputGroup` addon. Its
+ * height follows the group, 4px in from each edge. It is `ghost` and a plain
+ * `type="button"` by default, so it never submits a form by accident. Use `render` to make it a menu, popover, or
  * combobox trigger.
  */
 export function InputGroupButton({ size, variant, type = 'button', className, ...props }) {
-    const scale = size ?? 'xs';
+    const scale = size ?? 'md';
     const kind = variant ?? 'ghost';
     return (_jsx(Button, { type: type, variant: kind, "data-size": scale, "data-variant": kind, ...props, className: state => cn('sprout-input-group-button', `sprout-input-group-button-size-${scale}`, typeof className === 'function' ? className(state) : className) }));
 }

package/dist/components/input-otp.d.ts

@@ -1,11 +1,15 @@
 import { type ComponentProps, type ReactNode } from 'react';
 import { OTPField } from '@base-ui/react/otp-field';
+export declare const inputOTPSizeNames: readonly ["md", "sm", "lg"];
+export type InputOTPSize = (typeof inputOTPSizeNames)[number];
 export type InputOTPState = OTPField.Root.State;
 export type InputOTPSlotState = OTPField.Input.State;
 type Invalid = boolean | 'true' | 'false' | 'grammar' | 'spelling';
-export interface InputOTPProps extends Omit<OTPField.Root.Props, 'length' | 'aria-invalid' | 'children'> {
+export interface InputOTPProps extends Omit<OTPField.Root.Props, 'length' | 'aria-invalid' | 'children' | 'size'> {
     /** Number of character slots. Matches the slot indexes you render. */
     maxLength: number;
+    /** Square slots: `sm` is 28px, `md` is 32px (`--sprout-control-height`), and `lg` is 36px. */
+    size?: InputOTPSize | null;
     /** Called with the new code on every edit, paste, or autofill. */
     onChange?: ((value: string) => void) | undefined;
     /** Marks every slot invalid and draws the danger ring on its group. */
@@ -18,7 +22,7 @@ export interface InputOTPProps extends Omit<OTPField.Root.Props, 'length' | 'ari
  * End, Backspace, and Delete all work. `aria-label` names the whole code and
  * its first slot; later slots are announced as "Character 2 of 6".
  */
-export declare function InputOTP({ maxLength, onChange, onValueChange, className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, validationType, ...props }: InputOTPProps): import("react").JSX.Element;
+export declare function InputOTP({ maxLength, size, onChange, onValueChange, className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, validationType, ...props }: InputOTPProps): import("react").JSX.Element;
 export type InputOTPGroupProps = ComponentProps<'div'>;
 /** Joins adjacent slots into one bordered segment. */
 export declare function InputOTPGroup({ className, ...props }: InputOTPGroupProps): import("react").JSX.Element;

package/dist/components/input-otp.js

@@ -4,6 +4,7 @@ import { createContext, useContext, useId } from 'react';
 import { OTPField } from '@base-ui/react/otp-field';
 import { Minus } from 'reicon-react/icons/Minus';
 import { cn, stateClassName } from '../internal/classes.js';
+export const inputOTPSizeNames = ['md', 'sm', 'lg'];
 const InputOTPContext = createContext(null);
 const isInvalid = (value) => value === true || value === 'true';
 /**
@@ -12,14 +13,15 @@ const isInvalid = (value) => value === true || value === 'true';
  * End, Backspace, and Delete all work. `aria-label` names the whole code and
  * its first slot; later slots are announced as "Character 2 of 6".
  */
-export function InputOTP({ maxLength, onChange, onValueChange, className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, validationType = 'numeric', ...props }) {
+export function InputOTP({ maxLength, size, onChange, onValueChange, className, children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-invalid': ariaInvalid, validationType = 'numeric', ...props }) {
     const generated = useId();
     const labelId = ariaLabelledBy ?? (ariaLabel ? `${generated}-label` : undefined);
     const invalid = isInvalid(ariaInvalid);
-    return (_jsx(InputOTPContext.Provider, { value: { length: maxLength, labelId, invalid }, children: _jsxs(OTPField.Root, { "data-slot": "input-otp", "data-invalid": invalid ? '' : undefined, length: maxLength, validationType: validationType, "aria-labelledby": labelId, onValueChange: (value, details) => {
+    const scale = size ?? 'md';
+    return (_jsx(InputOTPContext.Provider, { value: { length: maxLength, labelId, invalid }, children: _jsxs(OTPField.Root, { "data-slot": "input-otp", "data-size": scale, "data-invalid": invalid ? '' : undefined, length: maxLength, validationType: validationType, "aria-labelledby": labelId, onValueChange: (value, details) => {
                 onValueChange?.(value, details);
                 onChange?.(value);
-            }, ...props, className: stateClassName('sprout-input-otp', className), children: [ariaLabel && !ariaLabelledBy ? (_jsx("span", { id: labelId, className: "sprout-input-otp-sr-only", children: ariaLabel })) : null, children] }) }));
+            }, ...props, className: stateClassName(cn('sprout-input-otp', `sprout-input-otp-size-${scale}`), className), children: [ariaLabel && !ariaLabelledBy ? (_jsx("span", { id: labelId, className: "sprout-input-otp-sr-only", children: ariaLabel })) : null, children] }) }));
 }
 /** Joins adjacent slots into one bordered segment. */
 export function InputOTPGroup({ className, ...props }) {

package/dist/components/input.d.ts

@@ -1,9 +1,9 @@
 import { Input as BaseInput } from '@base-ui/react/input';
-export declare const inputScaleNames: readonly ["default", "lg"];
+export declare const inputScaleNames: readonly ["md", "sm", "lg"];
 export type InputScale = (typeof inputScaleNames)[number];
 export type InputState = BaseInput.State;
 export interface InputProps extends BaseInput.Props {
-    /** `default` is 32px tall with 14px text. `lg` is 44px with 16px text. */
+    /** `sm` is 28px, `md` is 32px (`--sprout-control-height`), and `lg` is 36px. */
     scale?: InputScale | null;
 }
 /**

package/dist/components/input.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Input as BaseInput } from '@base-ui/react/input';
 import { cn, stateClassName } from '../internal/classes.js';
 import { useFieldControl } from './field.js';
-export const inputScaleNames = ['default', 'lg'];
+export const inputScaleNames = ['md', 'sm', 'lg'];
 /**
  * A single-line text field on Base UI `Input`. It takes every native input
  * prop, such as `type`, `value`, `required`, and `ref`. Inside a Base UI
@@ -13,6 +13,6 @@ export const inputScaleNames = ['default', 'lg'];
  */
 export function Input({ scale, className, ...rest }) {
     const props = useFieldControl(rest);
-    const size = scale ?? 'default';
+    const size = scale ?? 'md';
     return (_jsx(BaseInput, { "data-slot": "input", "data-scale": size, ...props, className: stateClassName(cn('sprout-input', `sprout-input-scale-${size}`), className) }));
 }

package/dist/components/page-header.js

@@ -39,7 +39,7 @@ export function PageHeader({ title, description, actions, back, parent, titleId,
     const placement = inChrome ? 'chrome' : 'page';
     const heading = (_jsx("h1", { id: titleId, ref: titleRef, tabIndex: focusable ? -1 : undefined, "data-slot": "page-title", "data-placement": placement, className: "sprout-page-header-title", children: title }));
     const trail = parent && (_jsx("nav", { "aria-label": "Breadcrumb", "data-slot": "page-breadcrumb", "data-placement": placement, className: "sprout-page-header-breadcrumb", children: _jsxs("ol", { className: "sprout-page-header-breadcrumb-list", children: [_jsx("li", { className: "sprout-page-header-breadcrumb-item", children: _jsx(ParentLink, { ...parent }) }), _jsx("li", { role: "presentation", "aria-hidden": "true", className: "sprout-page-header-breadcrumb-separator", children: _jsx(ChevronRight, { size: 14 }) }), _jsx("li", { "aria-current": "page", className: "sprout-page-header-breadcrumb-item sprout-page-header-breadcrumb-current", children: heading })] }) }));
-    const backButton = back && (_jsxs(Button, { variant: "ghost", size: "back", nativeButton: false, render: back.link, "data-slot": "page-back", className: "sprout-page-header-back", children: [_jsx(ChevronLeft, { "data-icon": "inline-start", "aria-hidden": "true" }), _jsx("span", { className: "sprout-page-header-back-label", children: back.label })] }));
+    const backButton = back && (_jsxs(Button, { variant: "ghost", size: "sm", nativeButton: false, render: back.link, "data-slot": "page-back", className: "sprout-page-header-back", children: [_jsx(ChevronLeft, { "data-icon": "inline-start", "aria-hidden": "true" }), _jsx("span", { className: "sprout-page-header-back-label", children: back.label })] }));
     if (inChrome) {
         return (_jsxs(_Fragment, { children: [createPortal(_jsxs(_Fragment, { children: [backButton, trail ?? heading] }), chrome.title), actions &&
                     createPortal(_jsx("div", { "data-slot": "page-actions", "data-placement": "chrome", className: "sprout-page-header-actions", children: actions }), chrome.actions), description && (_jsx("p", { "data-slot": "page-description", className: cn('sprout-page-header-description', className), children: description }))] }));

package/dist/components/pagination.js

@@ -18,10 +18,10 @@ export function PaginationLink({ className, isActive, size = 'icon', render, ...
     return (_jsx(Button, { variant: isActive ? 'outline' : 'ghost', size: size, nativeButton: false, render: render, ...props, "aria-current": isActive ? 'page' : undefined, "data-slot": "pagination-link", "data-active": isActive ? 'true' : undefined, className: cn('sprout-pagination-link', className) }));
 }
 export function PaginationPrevious({ className, text = 'Previous', ...props }) {
-    return (_jsxs(PaginationLink, { "aria-label": "Go to previous page", size: "default", className: cn('sprout-pagination-previous', className), ...props, children: [_jsx(ChevronLeft, { "data-icon": "inline-start", "aria-hidden": "true" }), _jsx("span", { className: "sprout-pagination-label", children: text })] }));
+    return (_jsxs(PaginationLink, { "aria-label": "Go to previous page", size: "md", className: cn('sprout-pagination-previous', className), ...props, children: [_jsx(ChevronLeft, { "data-icon": "inline-start", "aria-hidden": "true" }), _jsx("span", { className: "sprout-pagination-label", children: text })] }));
 }
 export function PaginationNext({ className, text = 'Next', ...props }) {
-    return (_jsxs(PaginationLink, { "aria-label": "Go to next page", size: "default", className: cn('sprout-pagination-next', className), ...props, children: [_jsx("span", { className: "sprout-pagination-label", children: text }), _jsx(ChevronRight, { "data-icon": "inline-end", "aria-hidden": "true" })] }));
+    return (_jsxs(PaginationLink, { "aria-label": "Go to next page", size: "md", className: cn('sprout-pagination-next', className), ...props, children: [_jsx("span", { className: "sprout-pagination-label", children: text }), _jsx(ChevronRight, { "data-icon": "inline-end", "aria-hidden": "true" })] }));
 }
 /** Marks skipped pages. It is hidden from screen readers. */
 export function PaginationEllipsis({ className, ...props }) {

package/dist/components/questionnaire.js

@@ -868,7 +868,7 @@ export function QuestionnaireError({ children, className, id, render, ...props }
 export function QuestionnaireActions({ className, ...props }) {
     return _jsx("div", { "data-slot": "questionnaire-actions", className: cn('sprout-questionnaire-actions', className), ...props });
 }
-function useNavigationButton(slot, { children, className, disabled = false, onClick, render, size = 'default', tabIndex, type, variant, ...props }, { label, visible, status, shortcut, action, }) {
+function useNavigationButton(slot, { children, className, disabled = false, onClick, render, size = 'md', tabIndex, type, variant, ...props }, { label, visible, status, shortcut, action, }) {
     const resolvedVariant = variant ?? (slot === 'next' || slot === 'submit' ? 'default' : 'outline');
     const activeShortcut = visible && !disabled ? (shortcut ?? null) : null;
     function handleClick(event) {

package/dist/components/record-list.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode, type Ref } from 'react';
 export declare const recordListStatusNames: readonly ["ready", "loading", "error"];
-export declare const recordListDensityNames: readonly ["default", "compact"];
+export declare const recordListDensityNames: readonly ["md", "sm"];
 export type RecordListStatus = (typeof recordListStatusNames)[number];
 export type RecordListDensity = (typeof recordListDensityNames)[number];
 /** The most labelled values a row shows. Extra values are left out. */
@@ -50,7 +50,7 @@ export interface RecordListProps<T extends RecordListItem> {
     empty?: ReactNode;
     /** Shown under the rows, inside the panel. Put the app's `Pagination` here. */
     footer?: ReactNode;
-    /** `"compact"` uses less padding for dense pages. Defaults to `"default"`. */
+    /** `"sm"` uses less padding for dense pages. Defaults to `"md"`. */
     density?: RecordListDensity | undefined;
     /** Gets `focusFirst()` for moving focus after a page change. */
     ref?: Ref<RecordListHandle> | undefined;

package/dist/components/record-list.js

@@ -6,7 +6,7 @@ import { Button } from './button.js';
 import { Skeleton, SkeletonGroup } from './skeleton.js';
 import { StatePanel } from '../internal/state-panel.js';
 export const recordListStatusNames = ['ready', 'loading', 'error'];
-export const recordListDensityNames = ['default', 'compact'];
+export const recordListDensityNames = ['md', 'sm'];
 /** The most labelled values a row shows. Extra values are left out. */
 export const recordListMaxValues = 4;
 const SKELETON_ROWS = 5;
@@ -47,7 +47,7 @@ function SkeletonRows() {
  * rows, Enter opens a row, and Tab reaches the focused row's actions. The app
  * owns data, paging, and what the actions do.
  */
-export function RecordList({ items, label, renderTitle, values, badges, renderActions, onItemOpen, status = 'ready', error, onRetry, empty, footer, density = 'default', ref, className, }) {
+export function RecordList({ items, label, renderTitle, values, badges, renderActions, onItemOpen, status = 'ready', error, onRetry, empty, footer, density = 'md', ref, className, }) {
     const id = useId();
     const listRef = useRef(null);
     const stateRef = useRef(null);

package/dist/components/result-card.js

@@ -59,7 +59,7 @@ export function ResultCard({ title, kind, apps, status, state = 'default', actio
     const hidden = unique.slice(2);
     const busy = state === 'loading' || state === 'running';
     const disabled = state === 'disabled';
-    return (_jsxs("section", { "data-slot": "result-card", "data-state": state, "data-kind": kind, "aria-label": `${kind}: ${title}`, "aria-busy": busy, ...props, className: cn('sprout-result-card', className), children: [_jsxs("div", { className: "sprout-result-card-header", children: [visible.length > 0 ? (_jsxs("div", { role: "group", "aria-label": "Apps used", className: "sprout-result-card-apps", children: [visible.map(app => (_jsx("span", { "data-result-app": app.brand ?? 'connected-app', className: "sprout-result-card-app", children: _jsx(AppActionsPopover, { apps: [app], disabled: disabled }) }, app.brand ?? app.name))), hidden.length > 0 && (_jsx("span", { "data-result-overflow": hidden.length, className: "sprout-result-card-app", children: _jsx(AppActionsPopover, { apps: hidden, overflow: true, disabled: disabled }) }))] })) : (icon && (_jsx(BrandTile, { "aria-hidden": "true", className: "sprout-result-card-icon", children: icon }))), _jsxs("div", { className: "sprout-result-card-main", children: [_jsxs("div", { className: "sprout-result-card-text", children: [_jsx("h3", { className: "sprout-result-card-title", children: title }), _jsxs("div", { className: "sprout-result-card-meta", children: [_jsx("span", { children: kind }), _jsx("span", { "aria-hidden": "true", children: "\u00B7" }), _jsxs("span", { role: "status", "data-tone": state === 'success' || state === 'error' ? state : undefined, className: "sprout-result-card-status", children: [busy ? (_jsx(Spinner, { "aria-hidden": "true" })) : state === 'success' ? (_jsx(Check, { size: 14, "aria-hidden": "true" })) : state === 'error' ? (_jsx(Danger, { size: 14, "aria-hidden": "true" })) : null, status] })] })] }), action && (_jsx("div", { className: "sprout-result-card-action", children: _jsx(Button, { variant: "outline", size: "result-card", disabled: state === 'loading' || disabled || action.disabled === true, onClick: action.onClick, children: action.label }) }))] })] }), children && _jsx("div", { className: "sprout-result-card-body", children: children })] }));
+    return (_jsxs("section", { "data-slot": "result-card", "data-state": state, "data-kind": kind, "aria-label": `${kind}: ${title}`, "aria-busy": busy, ...props, className: cn('sprout-result-card', className), children: [_jsxs("div", { className: "sprout-result-card-header", children: [visible.length > 0 ? (_jsxs("div", { role: "group", "aria-label": "Apps used", className: "sprout-result-card-apps", children: [visible.map(app => (_jsx("span", { "data-result-app": app.brand ?? 'connected-app', className: "sprout-result-card-app", children: _jsx(AppActionsPopover, { apps: [app], disabled: disabled }) }, app.brand ?? app.name))), hidden.length > 0 && (_jsx("span", { "data-result-overflow": hidden.length, className: "sprout-result-card-app", children: _jsx(AppActionsPopover, { apps: hidden, overflow: true, disabled: disabled }) }))] })) : (icon && (_jsx(BrandTile, { "aria-hidden": "true", className: "sprout-result-card-icon", children: icon }))), _jsxs("div", { className: "sprout-result-card-main", children: [_jsxs("div", { className: "sprout-result-card-text", children: [_jsx("h3", { className: "sprout-result-card-title", children: title }), _jsxs("div", { className: "sprout-result-card-meta", children: [_jsx("span", { children: kind }), _jsx("span", { "aria-hidden": "true", children: "\u00B7" }), _jsxs("span", { role: "status", "data-tone": state === 'success' || state === 'error' ? state : undefined, className: "sprout-result-card-status", children: [busy ? (_jsx(Spinner, { "aria-hidden": "true" })) : state === 'success' ? (_jsx(Check, { size: 14, "aria-hidden": "true" })) : state === 'error' ? (_jsx(Danger, { size: 14, "aria-hidden": "true" })) : null, status] })] })] }), action && (_jsx("div", { className: "sprout-result-card-action", children: _jsx(Button, { variant: "outline", disabled: state === 'loading' || disabled || action.disabled === true, onClick: action.onClick, children: action.label }) }))] })] }), children && _jsx("div", { className: "sprout-result-card-body", children: children })] }));
 }
 function AppActionsPopover({ apps, overflow = false, disabled, }) {
     const first = apps[0];

package/dist/components/rich-text-editor.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode, type Ref } from 'react';
 import { type Editor, type Extensions, type JSONContent } from '@tiptap/core';
-export declare const richTextEditorSizeNames: readonly ["default", "compact"];
+export declare const richTextEditorSizeNames: readonly ["md", "sm"];
 export type RichTextEditorSize = (typeof richTextEditorSizeNames)[number];
 /** A Tiptap JSON document, such as `{ type: "doc", content: [{ type: "paragraph" }] }`. */
 export type RichTextValue = JSONContent;
@@ -15,8 +15,8 @@ export type RichTextEditorHandle = {
 export interface RichTextEditorProps {
     ref?: Ref<RichTextEditorHandle> | undefined;
     /**
-     * `default` is an 80px to 256px box with 16px text and a toolbar row below.
-     * `compact` is a 40px to 128px box with 14px text and the toolbar inline at
+     * `md` is an 80px to 256px box with 16px text and a toolbar row below.
+     * `sm` is a 40px to 128px box with 14px text and the toolbar inline at
      * the end.
      */
     size?: RichTextEditorSize | null | undefined;

package/dist/components/rich-text-editor.js

@@ -9,7 +9,7 @@ import { canSplit } from '@tiptap/pm/transform';
 import StarterKit from '@tiptap/starter-kit';
 import Placeholder from '@tiptap/extension-placeholder';
 import { cn } from '../internal/classes.js';
-export const richTextEditorSizeNames = ['default', 'compact'];
+export const richTextEditorSizeNames = ['md', 'sm'];
 const fenceLanguage = /^[\w+#.-]{1,32}$/;
 const typedFence = /```([\w+#.-]{1,32})?\s$/;
 const fenceOnly = /^```([\w+#.-]{1,32})?$/;
@@ -153,8 +153,8 @@ const baseExtensions = [
  * the border, focus, and invalid states.
  */
 export function RichTextEditor({ ref, size, condensed = false, value, onChange, onSend, extensions = [], placeholder = 'Ask anything…', disabled = false, ariaLabel = 'Message', ariaInvalid = false, ariaDescribedBy, ariaExpanded, ariaControls, ariaActiveDescendant, toolbarAddon, className, }) {
-    const scale = size ?? 'default';
-    const inline = condensed || scale === 'compact';
+    const scale = size ?? 'md';
+    const inline = condensed || scale === 'sm';
     const onSendRef = useRef(onSend);
     const onChangeRef = useRef(onChange);
     const placeholderRef = useRef(placeholder);

package/dist/components/scroll-area.d.ts

@@ -1,12 +1,12 @@
 import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';
-export declare const scrollAreaSizeNames: readonly ["auto", "sm", "md"];
+export declare const scrollAreaSizeNames: readonly ["sm", "md"];
 export declare const scrollAreaVariantNames: readonly ["plain", "table"];
 export declare const scrollAreaOrientationNames: readonly ["vertical", "horizontal", "both"];
 export type ScrollAreaSize = (typeof scrollAreaSizeNames)[number];
 export type ScrollAreaVariant = (typeof scrollAreaVariantNames)[number];
 export type ScrollAreaOrientation = (typeof scrollAreaOrientationNames)[number];
 export interface ScrollAreaProps extends BaseScrollArea.Root.Props {
-    /** `"sm"` is 10rem tall, `"md"` is 16rem tall. `"auto"` follows its content or your className. */
+    /** `"sm"` is 10rem tall, `"md"` is 16rem tall. Leave it out to follow the content or your className. */
     size?: ScrollAreaSize;
     /** `"table"` adds a bordered surface, caps the height at 60dvh, and makes the viewport a labeled region. */
     variant?: ScrollAreaVariant;

package/dist/components/scroll-area.js

@@ -2,11 +2,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';
 import { stateClassName } from '../internal/classes.js';
-export const scrollAreaSizeNames = ['auto', 'sm', 'md'];
+export const scrollAreaSizeNames = ['sm', 'md'];
 export const scrollAreaVariantNames = ['plain', 'table'];
 export const scrollAreaOrientationNames = ['vertical', 'horizontal', 'both'];
 /** A scrolling region with thin, theme-aware scrollbars that keeps native keyboard and wheel scrolling. */
-export function ScrollArea({ className, children, size = 'auto', variant = 'plain', orientation = 'vertical', viewportLabel, ...props }) {
+export function ScrollArea({ className, children, size, variant = 'plain', orientation = 'vertical', viewportLabel, ...props }) {
     return (_jsxs(BaseScrollArea.Root, { "data-slot": "scroll-area", "data-size": size, "data-variant": variant, className: stateClassName('sprout-scroll-area', className), ...props, children: [_jsx(BaseScrollArea.Viewport, { "data-slot": "scroll-area-viewport", role: variant === 'table' ? 'region' : undefined, "aria-label": viewportLabel, className: "sprout-scroll-area-viewport", children: children }), orientation !== 'horizontal' && _jsx(ScrollBar, {}), orientation !== 'vertical' && _jsx(ScrollBar, { orientation: "horizontal" }), _jsx(BaseScrollArea.Corner, { "data-slot": "scroll-area-corner", className: "sprout-scroll-area-corner" })] }));
 }
 /** One scrollbar track and thumb. `ScrollArea` draws these for you from `orientation`. */

package/dist/components/search-field.js

@@ -20,7 +20,7 @@ export function SearchField({ label, value, onChange, placeholder, maxLength, id
         event.stopPropagation();
         onChange('');
     };
-    return (_jsxs(InputGroup, { "data-slot": "search-field", className: cn('sprout-search-field', className), children: [_jsx(InputGroupAddon, { children: _jsx(Search, { size: 16, "aria-hidden": "true" }) }), _jsx(InputGroupInput, { ref: input, id: id, type: "search", "aria-label": label, maxLength: maxLength, value: value, placeholder: placeholder ?? label, autoComplete: "off", spellCheck: false, onChange: event => onChange(event.currentTarget.value), onKeyDown: onKeyDown }), value && (_jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { "data-slot": "search-field-clear", size: "icon-xs", "aria-label": "Clear search", className: "sprout-search-field-clear", onClick: () => {
+    return (_jsxs(InputGroup, { "data-slot": "search-field", className: cn('sprout-search-field', className), children: [_jsx(InputGroupAddon, { children: _jsx(Search, { size: 16, "aria-hidden": "true" }) }), _jsx(InputGroupInput, { ref: input, id: id, type: "search", "aria-label": label, maxLength: maxLength, value: value, placeholder: placeholder ?? label, autoComplete: "off", spellCheck: false, onChange: event => onChange(event.currentTarget.value), onKeyDown: onKeyDown }), value && (_jsx(InputGroupAddon, { align: "inline-end", children: _jsx(InputGroupButton, { "data-slot": "search-field-clear", size: "icon", "aria-label": "Clear search", className: "sprout-search-field-clear", onClick: () => {
                         onChange('');
                         input.current?.focus();
                     }, children: _jsx(X, { size: 14, "aria-hidden": "true" }) }) }))] }));

package/dist/components/select.d.ts

@@ -1,5 +1,5 @@
 import { Select as SelectPrimitive } from '@base-ui/react/select';
-export declare const selectTriggerSizeNames: readonly ["default", "sm", "calendar"];
+export declare const selectTriggerSizeNames: readonly ["md", "sm", "lg"];
 export declare const selectTriggerWidthNames: readonly ["fit", "full"];
 export type SelectTriggerSize = (typeof selectTriggerSizeNames)[number];
 export type SelectTriggerWidth = (typeof selectTriggerWidthNames)[number];
@@ -19,11 +19,7 @@ export type SelectValueProps = SelectPrimitive.Value.Props;
  */
 export declare function SelectValue({ className, ...props }: SelectValueProps): import("react").JSX.Element;
 export interface SelectTriggerProps extends SelectPrimitive.Trigger.Props {
-    /**
-     * `default` is 32px for forms. `sm` is 28px for toolbars, filters, table
-     * rows, and inline sentences. `calendar` is a 32px control with small text
-     * for calendar headers.
-     */
+    /** `sm` is 28px, `md` is 32px (`--sprout-control-height`), and `lg` is 36px. */
     size?: SelectTriggerSize;
     /** `fit` sizes to the value. `full` fills the parent, as in form fields. */
     width?: SelectTriggerWidth;

package/dist/components/select.js

@@ -6,7 +6,7 @@ import { ChevronDown } from 'reicon-react/icons/ChevronDown';
 import { ChevronUp } from 'reicon-react/icons/ChevronUp';
 import { cn, stateClassName } from '../internal/classes.js';
 import { useFieldControl } from './field.js';
-export const selectTriggerSizeNames = ['default', 'sm', 'calendar'];
+export const selectTriggerSizeNames = ['md', 'sm', 'lg'];
 export const selectTriggerWidthNames = ['fit', 'full'];
 /**
  * Holds the value and open state. It takes every Base UI select root prop,
@@ -24,7 +24,7 @@ export function SelectGroup({ className, ...props }) {
 export function SelectValue({ className, ...props }) {
     return (_jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props, className: stateClassName('sprout-select-value', className) }));
 }
-export function SelectTrigger({ className, size = 'default', width = 'fit', children, ...rest }) {
+export function SelectTrigger({ className, size = 'md', width = 'fit', children, ...rest }) {
     const props = useFieldControl(rest);
     return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, "data-width": width, ...props, className: stateClassName(cn('sprout-select-trigger', `sprout-select-trigger-${size}`, `sprout-select-trigger-${width}`), className), children: [children, _jsx(SelectPrimitive.Icon, { className: "sprout-select-icon", children: _jsx(ChevronDown, { "aria-hidden": "true" }) })] }));
 }