@baseline-ui/mcp 3.2.1 → 3.3.0

package/dist/{chunk-RKGE2VKK.js → chunk-TZ3HMVY7.js}

@@ -1,4 +1,4 @@
-import {McpServer}from'@modelcontextprotocol/sdk/server/mcp.js';import {z as z$1}from'zod';var t={BarChart:{id:"charts-barchart",breadcrumb:"Charts/BarChart",importStatement:`import { BarChart } from "@baseline-ui/charts";
+import {McpServer}from'@modelcontextprotocol/sdk/server/mcp.js';import {z as z$1}from'zod';var o={BarChart:{id:"charts-barchart",breadcrumb:"Charts/BarChart",importStatement:`import { BarChart } from "@baseline-ui/charts";
 import { Box } from "@baseline-ui/core";`,description:"The `BarChart` component renders a responsive bar chart for categorical data. It is built on top of [Recharts](https://recharts.org/) and styled with Baseline UI design tokens so it picks up the active theme automatically.",documentation:`The \`BarChart\` component renders a responsive bar chart for categorical data. It is built on top of [Recharts](https://recharts.org/) and styled with Baseline UI design tokens so it picks up the active theme automatically.
 
 * Renders one or more bar series from a single dataset, keyed by \`xAxisDataKey\` and the per-bar \`dataKey\`.
@@ -2419,7 +2419,8 @@ showCloseButton?: boolean
     defaultOpen={false} />;`},{id:"core-overlays-alertdialog--only-primary-action",name:"Only Primary Action",snippet:`const OnlyPrimaryAction = () => <AlertDialogExample
     title="Continue?"
     message="This action cannot be undone."
-    primaryActionLabel="Continue" />;`}],implementation:`import React from "react";
+    primaryActionLabel="Continue" />;`}],implementation:`import { WarningFilledIcon } from "@baseline-ui/icons/24";
+import React from "react";
 
 import { ActionButton } from "../../ActionButton";
 import { Modal, ModalContent, ModalTrigger } from "../../Modal";
@@ -2458,7 +2459,11 @@ export const AlertDialogExample: React.FC<
  </ModalContent>
  </Modal>
  );
-};`},similarTo:[],figmaUrl:null},AudioPlayer:{id:"core-media-audioplayer",breadcrumb:"Core/Media/AudioPlayer",importStatement:'import { AudioPlayer } from "@baseline-ui/core";',description:"`AudioPlayer` is an accessible audio playback control with play, pause, seek, and elapsed-time display for any browser-supported audio source. Use it to embed playback of recordings, voice notes, or other audio assets directly in your interface.",documentation:`\`AudioPlayer\` is an accessible audio playback control with play, pause, seek, and elapsed-time display for any browser-supported audio source. Use it to embed playback of recordings, voice notes, or other audio assets directly in your interface.
+};
+
+export const AlertDialogWithIconExample: React.FC<
+ Omit<AlertDialogProps, "icon">
+> = (props) => <AlertDialogExample icon={WarningFilledIcon} {...props} />;`},similarTo:[],figmaUrl:null},AudioPlayer:{id:"core-media-audioplayer",breadcrumb:"Core/Media/AudioPlayer",importStatement:'import { AudioPlayer } from "@baseline-ui/core";',description:"`AudioPlayer` is an accessible audio playback control with play, pause, seek, and elapsed-time display for any browser-supported audio source. Use it to embed playback of recordings, voice notes, or other audio assets directly in your interface.",documentation:`\`AudioPlayer\` is an accessible audio playback control with play, pause, seek, and elapsed-time display for any browser-supported audio source. Use it to embed playback of recordings, voice notes, or other audio assets directly in your interface.
 
 * Play and pause audio files
 * Seek through audio files
@@ -4291,7 +4296,7 @@ placement?: any
     presets={presets}
     label="Label"
     labelPosition="start"
-    defaultValue="#ff0000" />;`},{id:"core-forms-colorinput--without-color-presets",name:"Without Color Presets",snippet:'const WithoutColorPresets = () => <ColorInput presets={[]} label="Label" defaultOpen />;'},{id:"core-forms-colorinput--color-presets-only",name:"Color Presets Only",snippet:'const ColorPresetsOnly = () => <ColorInput presets={presets} label="Label" defaultOpen includePicker={false} />;'},{id:"core-forms-colorinput--with-custom-trigger",name:"With Custom Trigger",snippet:"const WithCustomTrigger = () => <CustomTriggerButton />;"},{id:"core-forms-colorinput--lazy-picker",name:"Lazy Picker",snippet:'const LazyPicker = () => <ColorInput presets={presets} pickerMode="lazy" defaultOpen />;'},{id:"core-forms-colorinput--lazy-picker-mobile",name:"Lazy Picker Mobile",snippet:'const LazyPickerMobile = () => <ColorInput presets={presets} pickerMode="lazy" defaultOpen />;'},{id:"core-forms-colorinput--indeterminate",name:"Indeterminate",snippet:'const Indeterminate = () => <IndeterminateExample presets={presets} defaultValue="#ff0000" />;'}],implementation:`import { EllipseIcon } from "@baseline-ui/icons/24";
+    defaultValue="#ff0000" />;`},{id:"core-forms-colorinput--without-color-presets",name:"Without Color Presets",snippet:'const WithoutColorPresets = () => <ColorInput presets={[]} label="Label" defaultOpen />;'},{id:"core-forms-colorinput--color-presets-only",name:"Color Presets Only",snippet:'const ColorPresetsOnly = () => <ColorInput presets={presets} label="Label" defaultOpen includePicker={false} />;'},{id:"core-forms-colorinput--with-custom-trigger",name:"With Custom Trigger",snippet:"const WithCustomTrigger = () => <CustomTriggerButton />;"},{id:"core-forms-colorinput--lazy-picker",name:"Lazy Picker",snippet:'const LazyPicker = () => <ColorInput presets={presets} pickerMode="lazy" defaultOpen />;'},{id:"core-forms-colorinput--lazy-picker-mobile",name:"Lazy Picker Mobile",snippet:'const LazyPickerMobile = () => <ColorInput presets={presets} pickerMode="lazy" defaultOpen />;'},{id:"core-forms-colorinput--indeterminate",name:"Indeterminate",snippet:'const Indeterminate = () => <IndeterminateExample presets={presets} defaultValue="#ff0000" />;'}],implementation:`import { BorderColorIcon, EllipseIcon } from "@baseline-ui/icons/24";
 import React, { useState } from "react";
 
 import { ActionButton } from "../../ActionButton";
@@ -4299,8 +4304,10 @@ import { ActionIconButton } from "../../ActionIconButton";
 import { Box } from "../../Box";
 import { Text } from "../../Text";
 import { ColorInput } from "../ColorInput";
+import { IconColorInput } from "../IconColorInput";
+import { presets } from "./data";
 
-import type { ColorInputProps } from "../ColorInput.types";
+import type { ColorInputProps, IconColorInputProps } from "../ColorInput.types";
 
 export const CustomTriggerButton = () => {
  return (
@@ -4403,7 +4410,21 @@ export const IndeterminateWithCustomColorLabel: React.FC<ColorInputProps> = (
  }
  />
  );
-};`},similarTo:[],figmaUrl:null},ColorSwatch:{id:"core-content-colorswatch",breadcrumb:"Core/Content/ColorSwatch",importStatement:'import { Box, ColorSwatch, VariantViewer } from "@baseline-ui/core";',description:'`ColorSwatch` is a small tile that visually represents a single color value, with built-in handling for transparency, "none", and indeterminate states. Use it to preview a color inside pickers, lists, or anywhere a color value needs to be shown next to its label.',documentation:`\`ColorSwatch\` is a small tile that visually represents a single color value, with built-in handling for transparency, "none", and indeterminate states. Use it to preview a color inside pickers, lists, or anywhere a color value needs to be shown next to its label.
+};
+
+export const StoredCustomColorsExample: React.FC<{ storageKey: string }> = ({
+ storageKey,
+}) => (
+ <ColorInput
+ presets={presets}
+ defaultValue="#000000"
+ storePickedColorKey={storageKey}
+ />
+);
+
+export const IconColorInputExample: React.FC<
+ Omit<IconColorInputProps, "icon">
+> = (props) => <IconColorInput icon={BorderColorIcon} {...props} />;`},similarTo:[],figmaUrl:null},ColorSwatch:{id:"core-content-colorswatch",breadcrumb:"Core/Content/ColorSwatch",importStatement:'import { Box, ColorSwatch, VariantViewer } from "@baseline-ui/core";',description:'`ColorSwatch` is a small tile that visually represents a single color value, with built-in handling for transparency, "none", and indeterminate states. Use it to preview a color inside pickers, lists, or anywhere a color value needs to be shown next to its label.',documentation:`\`ColorSwatch\` is a small tile that visually represents a single color value, with built-in handling for transparency, "none", and indeterminate states. Use it to preview a color inside pickers, lists, or anywhere a color value needs to be shown next to its label.
 
 * Accessible color representation with screen reader support via aria-label
 * Support for transparent colors with a checkered background pattern
@@ -7524,7 +7545,7 @@ export const DrawerWithActionExample: React.FC<{
  Drawer Content
  </Drawer>
  );
-};`},similarTo:[],figmaUrl:null},Editor:{id:"core-miscellaneous-editor-rich-text",breadcrumb:"Core/Miscellaneous/Editor",importStatement:'import { Box, Editor, EditorAutoFocusOnMount, Separator } from "@baseline-ui/core";',description:"`Editor` is a text input area that supports either plain text or rich text with formatting, links, and @-mentions. Use it for comments, notes, descriptions, or any free-form content where users need more than a single-line input.",documentation:'`Editor` is a text input area that supports either plain text or rich text with formatting, links, and @-mentions. Use it for comments, notes, descriptions, or any free-form content where users need more than a single-line input.\n\n* supports rich text editing, including bold, italic and underline formatting.\n* supports font color and background color formatting\n* supports link creation, editing and removal\n* supports plain text editing\n* supports mouse, keyboard and touch interactions.\n* Exposed to the screen-readers and other assistive technologies using ARIA.\n* Mention support with user search and keyboard navigation\n* Keyboard shortcuts for common actions (submit, toolbar focus, help)\n* Imperative handle API (`editorHandle`) for programmatic focus and caret positioning\n* Custom footer buttons (action and toggle types)\n* Clear on save/cancel behavior\n* Auto-focus with configurable caret position\n\nYou can import the Editor component like so:\n\n```jsx\nimport { Editor } from "@baseline-ui/core";\n\nexport default function App() {\n return (\n <Editor\n aria-label="Comment"\n placeholder="Write a comment..."\n onSave={(value) => {\n console.log(value);\n }}\n />\n );\n}\n```\n\nIf you only need a single-line plain text input, use the `TextInput` component instead.\n\nThe `Editor` component has multiple variants that can be used to customize the appearance and behavior of the component.\n\n* `default` - the default variant\n* `minimal` - a minimal variant that removes the toolbar and only allows plain text editing.\n\n```jsx\n<Editor\n aria-label="Editor"\n variant="minimal"\n avatarName="John Doe"\n spellCheck={false}\n placeholder="Type something..."\n defaultValue="This is a minimal editor"\n/>\n```\n\nIn the example above, the `variant` prop is used to set the variant to `minimal`. This removes the toolbar and only allows plain text editing.\nThe first editor passes `isInline={false}`; the second one keeps the default inline rendering, which shows the avatar (set via `avatarName`) next to the input.\n\nYou can enable rich text editing by setting the `enableRichText` prop to `true`. This will enable the rich text toolbar and allow users to format the text. The default value is `false`.\n\n```jsx\n<Editor\n aria-label="Editor"\n placeholder="Placeholder"\n enableRichText\n defaultValue="<p>This is a rich editor. It supports <b>bold</b>, <i>italic</i>, and <u>underline</u>. <a href=\'https://example.com\'>Links</a> are also supported.</p><br/><p>You can set both <span style=\'color: #ac0000; background-color: #ffffff;\'>font color</span> and <span style=\'background-color: #ffff00; color: #000000;\'>background color</span>.</p>"\n/>\n```\n\nYou can set a placeholder for the editor by using the `placeholder` prop. This will display a placeholder when the editor is empty.\n\nThe `Editor` component can be controlled by using the `value` and `onChange` props together. This allows you to control the value of the editor from the parent component, in both plain text and rich text mode.\n\nFor uncontrolled usage, set the initial content with `defaultValue` and read edits via `onChange` or `onSave` \u2014 the editor manages its own state afterwards.\n\nFor backwards compatibility, passing `value` without `onChange` in rich text mode sets the initial content only (it behaves like `defaultValue`), matching the behavior of earlier versions.\n\nThe same pattern works in rich text mode \u2014 controlled rich text requires both `value` and `onChange`:\n\n```jsx\nfunction ControlledRichTextEditor() {\n const [value, setValue] = React.useState(\n "<p>This is a <b>controlled</b> rich text editor</p>",\n );\n\n return (\n <Editor\n aria-label="Editor"\n enableRichText\n placeholder="Type something..."\n value={value}\n onChange={(newValue) => {\n setValue(newValue);\n }}\n />\n );\n}\n```\n\nThe `Editor` component can be disabled by using the `isDisabled` prop. This will disable the editor and prevent users from editing the content.\n\nThe `Editor` component supports mentions. You can enable mentions by passing the `mentionableUsers` prop, an array of `MentionableUser` objects with required `id`, `name`, and `displayName` properties, plus optional `avatar` and `description`. The `id` should be unique for each user, `name` is the username matched while typing, and `displayName` is the label rendered for the mention.\nThe mentions feature only works when `enableRichText` is set to `true`. Users can start a mention by typing `@` in the editor or by pressing the mention (@) button in the footer.\n\n```jsx\n<Editor\n aria-label="Editor"\n placeholder="Placeholder"\n enableRichText\n defaultValue="Mentioning <span data-user-id=\'john-doe\'>John Doe</span>."\n mentionableUsers={[\n {\n id: "1",\n name: "john.doe",\n displayName: "John Doe",\n description: "john@gmail.com",\n },\n {\n id: "2",\n name: "jane.doe",\n displayName: "Jane Doe",\n description: "jane@gmail.com",\n },\n ]}\n/>\n```\n\nYou can add custom buttons to the footer by using the `footerButtons` prop. This prop is an array of objects of the shape `{ type: "action" | "toggle", props: {...} }`, where `props` accepts the `ActionIconButton` props (for `type: "action"`) or the `ToggleIconButton` props (for `type: "toggle"`), except `size` and `variant`, which are set by the editor.\n\n```jsx\nimport { AnonymousIcon } from "@baseline-ui/icons/16";\n\n<Editor\n aria-label="Editor"\n enableRichText\n footerButtons={[\n {\n type: "toggle",\n props: {\n "aria-label": "Save",\n icon: AnonymousIcon,\n onPress: () => {\n alert("Save");\n },\n },\n },\n ]}\n/>;\n```\n\n| Key | Function |\n| ------------------------------ | -------------------------------------------------------- |\n| `Ctrl+B` / `Cmd+B` | Toggle bold (rich text mode) |\n| `Ctrl+I` / `Cmd+I` | Toggle italic (rich text mode) |\n| `Ctrl+U` / `Cmd+U` | Toggle underline (rich text mode) |\n| `Ctrl+Z` / `Cmd+Z` | Undo (rich text mode) |\n| `Ctrl+Shift+Z` / `Cmd+Shift+Z` | Redo (rich text mode) |\n| `Ctrl+Y` | Redo (rich text mode) |\n| `@` | Start a mention (rich text mode with `mentionableUsers`) |\n| `Alt+F10` | Focus toolbar (rich text mode) |\n| `Ctrl+Enter` / `Cmd+Enter` | Submit (always) |\n| `Enter` | Submit (when `saveOnEnter` is true) |\n| `Shift+Enter` | New line |\n| `Ctrl+Shift+H` / `Cmd+Shift+H` | Open help dialog (rich text mode) |\n| `Escape` | Close mention input / help dialog |\n| `Tab` | Focus next |\n| `Shift+Tab` | Focus previous |\n\nWhen `saveOnEnter` is set to `true`, pressing the `Enter` key will submit the editor instead of creating a new line. This is useful for single-line text inputs or quick note-taking scenarios.\n\nThe `clearOnSave` and `clearOnCancel` props clear the editor content after the respective action completes. These are useful for resetting the editor after submission or cancellation.\n\nThe `autoFocus` prop allows you to focus the editor on mount with optional caret positioning:\n\n* `true` - Focus on mount, caret at default position\n* `"start"` - Focus on mount, caret at position 0\n* `"end"` - Focus on mount, caret at end of text\n\nThe `editorHandle` ref provides imperative methods for programmatic control:\n\n* `focus()` - Focus the editor\n* `setCaretPosition(index)` - Position the caret at a specific index\n\nThe `isSaveDisabled` prop disables only the save button while keeping the editor content functional. This is different from `isDisabled`, which disables both the editor and buttons.\n\nThe `maxMentionableUsersSuggestions` prop controls how many mention suggestions are displayed when the user types `@`. This is useful for large user lists where you want to limit the visible suggestions.\n\nThe `spellCheck` prop enables or disables browser spell checking in the editor.\n\nIn rich text mode, the editor includes a built-in help dialog that lists all available keyboard shortcuts (formatting, clipboard, undo/redo, submit). It opens as a modal overlay when the user presses `Ctrl+Shift+H` / `Cmd+Shift+H` while the editor has focus, and closes with `Escape` or the close button.\n\nUse the headless editor APIs when you need the rich-text engine without the default `Editor` chrome. This is useful for custom toolbars, inline editors embedded in other components, or experiences that need to render their own controls while reusing Baseline UI\'s rich-text model, keyboard shortcuts, selection handling, undo/redo, and HTML serialization.\n\n```jsx\nimport {\n EditorProvider,\n useEditable,\n useEditor,\n useEditorContext,\n} from "@baseline-ui/core";\n\nfunction FormattingToolbar() {\n const editor = useEditorContext();\n\n return (\n <button\n aria-pressed={editor.isMarkActive("bold")}\n onClick={() => editor.toggleMark("bold")}\n type="button"\n >\n Bold\n </button>\n );\n}\n\nfunction CustomRichTextEditor() {\n const editor = useEditor({\n defaultValue: "<p>Hello <b>world</b></p>",\n onChange: (html) => {\n console.log(html);\n },\n });\n const { editableProps } = useEditable(editor);\n\n return (\n <EditorProvider editor={editor}>\n <FormattingToolbar />\n <div {...editableProps} style={{ whiteSpace: "pre-wrap" }} />\n </EditorProvider>\n );\n}\n```\n\nThe headless API is split into these parts:\n\n| API | Purpose |\n| ------------------ | ------------------------------------------------------------------------ |\n| `useEditor` | Creates one rich-text editor instance and returns the `EditorState` API. |\n| `useEditable` | Attaches an `EditorState` to a `contenteditable` element. |\n| `EditorProvider` | Provides an editor instance to nested toolbar controls. |\n| `useEditorContext` | Reads the nearest provided editor instance. |\n| `EditorCore` | Framework-free engine escape hatch for advanced integrations. |\n\n`EditorState` exposes reactive state (`value`, `isEmpty`, `selectionState`, `canUndo`, `canRedo`, `isDisabled`) and imperative methods (`focus`, `setValue`, `getValue`, `undo`, `redo`, `exec`, `toggleMark`, `setMark`). For custom keyboard behavior, pass `onKeyDown` to `useEditable`; return `true` when you handled the event to skip the built-in shortcuts.\n\nStyle the editable element with `white-space: pre-wrap` (the built-in `Editor` does this internally). This preserves significant whitespace \u2014 leading, trailing, and consecutive spaces \u2014 which would otherwise collapse when the editor re-renders from its model, making a trailing space appear not to be inserted.\n\n| Selector | Description |\n| ------------------------------------------- | ----------------------------------------- |\n| `.BaselineUI-Editor` | Root container element |\n| `.BaselineUI-Editor-Save` | Save/submit button |\n| `.BaselineUI-Editor-Cancel` | Cancel button |\n| `.BaselineUI-Editor-Footer` | Footer toolbar containing action buttons |\n| `.BaselineUI-Editor-Mention` | Mention (@) button in footer |\n| `.BaselineUI-Editor-RichEditorToolbar` | Rich text formatting toolbar |\n| `.BaselineUI-Editor-RichEditorEditingArea` | Rich text contenteditable area |\n| `.BaselineUI-Editor-RichEditorPlaceholder` | Rich text empty-state placeholder overlay |\n| `.BaselineUI-Editor-PlainEditorEditingArea` | Plain text textarea element |\n\n`@baseline-ui/test-utils` ships a Playwright tester for the Editor so component and E2E specs don\'t have to relearn its markup. Build one from a frame and use its locators instead of hand-rolled selectors or translated labels:\n\n```ts\nimport { testers } from "@baseline-ui/test-utils";\n\nconst editor = testers(frame).editor();\n\nawait editor.textbox.fill("Hello");\nawait editor.boldButton.click();\nawait editor.openLinkDialog();\nawait editor.linkInput.fill("https://example.com");\nawait editor.linkAddButton.click();\nawait editor.startMention();\nawait editor.mentionOption("John Doe").click();\n```\n\nThe tester works in both modes \u2014 `textbox` resolves to the rich text contenteditable or the plain-mode `<textarea>` (both expose `role="textbox"`), and the rich-text-only surface (toolbar, link dialog, mention dropdown, help dialog) simply won\'t match when `enableRichText` is off. Pass a `root` locator when more than one Editor is mounted in the same frame:\n\n```ts\nconst editor = testers(frame).editor({\n root: frame.locator(".BaselineUI-Editor").first(),\n});\n```\n\nLocators are backed by stable `data-testid`s on the component (e.g. `editor-bold-button`, `editor-link-input`, `editor-help-dialog-close-button`) rather than accessible names, so they stay reliable across translations. The disclosure helpers (`openFontColorPicker`, `openBackgroundColorPicker`, `openLinkDialog`, `openHelpDialog`, `startMention`) are idempotent and no-op when the target surface is already open.',props:`interface EditorProps {
+};`},similarTo:[],figmaUrl:null},Editor:{id:"core-miscellaneous-editor-rich-text",breadcrumb:"Core/Miscellaneous/Editor",importStatement:'import { Box, Editor, EditorAutoFocusOnMount, Separator } from "@baseline-ui/core";',description:"`Editor` is a text input area that supports either plain text or rich text with formatting, links, and @-mentions. Use it for comments, notes, descriptions, or any free-form content where users need more than a single-line input.",documentation:'`Editor` is a text input area that supports either plain text or rich text with formatting, links, and @-mentions. Use it for comments, notes, descriptions, or any free-form content where users need more than a single-line input.\n\n* supports rich text editing, including bold, italic and underline formatting.\n* supports font color and background color formatting\n* supports link creation, editing and removal\n* supports plain text editing\n* supports mouse, keyboard and touch interactions.\n* Exposed to the screen-readers and other assistive technologies using ARIA.\n* Mention support with user search and keyboard navigation\n* Keyboard shortcuts for common actions (submit, toolbar focus, help)\n* Imperative handle API (`editorHandle`) for programmatic focus and caret positioning\n* Custom footer buttons (action and toggle types)\n* Clear on save/cancel behavior\n* Auto-focus with configurable caret position\n\nYou can import the Editor component like so:\n\n```jsx\nimport { Editor } from "@baseline-ui/core";\n\nexport default function App() {\n return (\n <Editor\n aria-label="Comment"\n placeholder="Write a comment..."\n onSave={(value) => {\n console.log(value);\n }}\n />\n );\n}\n```\n\nIf you only need a single-line plain text input, use the `TextInput` component instead.\n\nThe `Editor` component has multiple variants that can be used to customize the appearance and behavior of the component.\n\n* `default` - the default variant\n* `minimal` - a minimal variant that removes the toolbar and only allows plain text editing.\n\n```jsx\n<Editor\n aria-label="Editor"\n variant="minimal"\n avatarName="John Doe"\n spellCheck={false}\n placeholder="Type something..."\n defaultValue="This is a minimal editor"\n/>\n```\n\nIn the example above, the `variant` prop is used to set the variant to `minimal`. This removes the toolbar and only allows plain text editing.\nThe first editor passes `isInline={false}`; the second one keeps the default inline rendering, which shows the avatar (set via `avatarName`) next to the input.\n\nYou can enable rich text editing by setting the `enableRichText` prop to `true`. This will enable the rich text toolbar and allow users to format the text. The default value is `false`.\n\n```jsx\n<Editor\n aria-label="Editor"\n placeholder="Placeholder"\n enableRichText\n defaultValue="<p>This is a rich editor. It supports <b>bold</b>, <i>italic</i>, and <u>underline</u>. <a href=\'https://example.com\'>Links</a> are also supported.</p><br/><p>You can set both <span style=\'color: #ac0000; background-color: #ffffff;\'>font color</span> and <span style=\'background-color: #ffff00; color: #000000;\'>background color</span>.</p>"\n/>\n```\n\nYou can set a placeholder for the editor by using the `placeholder` prop. This will display a placeholder when the editor is empty.\n\nThe `Editor` component can be controlled by using the `value` and `onChange` props together. This allows you to control the value of the editor from the parent component, in both plain text and rich text mode.\n\nFor uncontrolled usage, set the initial content with `defaultValue` and read edits via `onChange` or `onSave` \u2014 the editor manages its own state afterwards.\n\nFor backwards compatibility, passing `value` without `onChange` in rich text mode sets the initial content only (it behaves like `defaultValue`), matching the behavior of earlier versions.\n\nThe same pattern works in rich text mode \u2014 controlled rich text requires both `value` and `onChange`:\n\n```jsx\nfunction ControlledRichTextEditor() {\n const [value, setValue] = React.useState(\n "<p>This is a <b>controlled</b> rich text editor</p>",\n );\n\n return (\n <Editor\n aria-label="Editor"\n enableRichText\n placeholder="Type something..."\n value={value}\n onChange={(newValue) => {\n setValue(newValue);\n }}\n />\n );\n}\n```\n\nThe `Editor` component can be disabled by using the `isDisabled` prop. This will disable the editor and prevent users from editing the content.\n\nThe `Editor` component supports mentions. You can enable mentions by passing the `mentionableUsers` prop, an array of `MentionableUser` objects with required `id`, `name`, and `displayName` properties, plus optional `avatar` and `description`. The `id` should be unique for each user, `name` is the username matched while typing, and `displayName` is the label rendered for the mention.\nThe mentions feature only works when `enableRichText` is set to `true`. Users can start a mention by typing `@` in the editor or by pressing the mention (@) button in the footer.\nPasted or dropped mentions are checked against `mentionableUsers`: a mention of a listed user takes that user\'s label, and any other mention, including every mention while `mentionableUsers` is undefined, becomes plain `@Name` text. This also applies when users cut and paste or drag a mention within the editor.\n\n```jsx\n<Editor\n aria-label="Editor"\n placeholder="Placeholder"\n enableRichText\n defaultValue="Mentioning <span data-user-id=\'john-doe\'>John Doe</span>."\n mentionableUsers={[\n {\n id: "1",\n name: "john.doe",\n displayName: "John Doe",\n description: "john@gmail.com",\n },\n {\n id: "2",\n name: "jane.doe",\n displayName: "Jane Doe",\n description: "jane@gmail.com",\n },\n ]}\n/>\n```\n\nYou can add custom buttons to the footer by using the `footerButtons` prop. This prop is an array of objects of the shape `{ type: "action" | "toggle", props: {...} }`, where `props` accepts the `ActionIconButton` props (for `type: "action"`) or the `ToggleIconButton` props (for `type: "toggle"`), except `size` and `variant`, which are set by the editor.\n\n```jsx\nimport { AnonymousIcon } from "@baseline-ui/icons/16";\n\n<Editor\n aria-label="Editor"\n enableRichText\n footerButtons={[\n {\n type: "toggle",\n props: {\n "aria-label": "Save",\n icon: AnonymousIcon,\n onPress: () => {\n alert("Save");\n },\n },\n },\n ]}\n/>;\n```\n\n| Key | Function |\n| ------------------------------ | -------------------------------------------------------- |\n| `Ctrl+B` / `Cmd+B` | Toggle bold (rich text mode) |\n| `Ctrl+I` / `Cmd+I` | Toggle italic (rich text mode) |\n| `Ctrl+U` / `Cmd+U` | Toggle underline (rich text mode) |\n| `Ctrl+Z` / `Cmd+Z` | Undo (rich text mode) |\n| `Ctrl+Shift+Z` / `Cmd+Shift+Z` | Redo (rich text mode) |\n| `Ctrl+Y` | Redo (rich text mode) |\n| `@` | Start a mention (rich text mode with `mentionableUsers`) |\n| `Alt+F10` | Focus toolbar (rich text mode) |\n| `Ctrl+Enter` / `Cmd+Enter` | Submit (always) |\n| `Enter` | Submit (when `saveOnEnter` is true) |\n| `Shift+Enter` | New line |\n| `Ctrl+Shift+H` / `Cmd+Shift+H` | Open help dialog (rich text mode) |\n| `Escape` | Close mention input / help dialog |\n| `Tab` | Focus next |\n| `Shift+Tab` | Focus previous |\n\nWhen `saveOnEnter` is set to `true`, pressing the `Enter` key will submit the editor instead of creating a new line. This is useful for single-line text inputs or quick note-taking scenarios.\n\nThe `clearOnSave` and `clearOnCancel` props clear the editor content after the respective action completes. These are useful for resetting the editor after submission or cancellation.\n\nThe `autoFocus` prop allows you to focus the editor on mount with optional caret positioning:\n\n* `true` - Focus on mount, caret at default position\n* `"start"` - Focus on mount, caret at position 0\n* `"end"` - Focus on mount, caret at end of text\n\nThe `editorHandle` ref provides imperative methods for programmatic control:\n\n* `focus()` - Focus the editor\n* `setCaretPosition(index)` - Position the caret at a specific index\n\nThe `isSaveDisabled` prop disables only the save button while keeping the editor content functional. This is different from `isDisabled`, which disables both the editor and buttons.\n\nThe `maxMentionableUsersSuggestions` prop controls how many mention suggestions are displayed when the user types `@`. This is useful for large user lists where you want to limit the visible suggestions.\n\nThe `spellCheck` prop enables or disables browser spell checking in the editor.\n\nIn rich text mode, the editor includes a built-in help dialog that lists all available keyboard shortcuts (formatting, clipboard, undo/redo, submit). It opens as a modal overlay when the user presses `Ctrl+Shift+H` / `Cmd+Shift+H` while the editor has focus, and closes with `Escape` or the close button.\n\nUse the headless editor APIs when you need the rich-text engine without the default `Editor` chrome. This is useful for custom toolbars, inline editors embedded in other components, or experiences that need to render their own controls while reusing Baseline UI\'s rich-text model, keyboard shortcuts, selection handling, undo/redo, and HTML serialization.\n\n```jsx\nimport {\n EditorProvider,\n useEditable,\n useEditor,\n useEditorContext,\n} from "@baseline-ui/core";\n\nfunction FormattingToolbar() {\n const editor = useEditorContext();\n\n return (\n <button\n aria-pressed={editor.isMarkActive("bold")}\n onClick={() => editor.toggleMark("bold")}\n type="button"\n >\n Bold\n </button>\n );\n}\n\nfunction CustomRichTextEditor() {\n const editor = useEditor({\n defaultValue: "<p>Hello <b>world</b></p>",\n onChange: (html) => {\n console.log(html);\n },\n });\n const { editableProps } = useEditable(editor);\n\n return (\n <EditorProvider editor={editor}>\n <FormattingToolbar />\n <div {...editableProps} style={{ whiteSpace: "pre-wrap" }} />\n </EditorProvider>\n );\n}\n```\n\nThe headless API is split into these parts:\n\n| API | Purpose |\n| ------------------ | ------------------------------------------------------------------------ |\n| `useEditor` | Creates one rich-text editor instance and returns the `EditorState` API. |\n| `useEditable` | Attaches an `EditorState` to a `contenteditable` element. |\n| `EditorProvider` | Provides an editor instance to nested toolbar controls. |\n| `useEditorContext` | Reads the nearest provided editor instance. |\n| `EditorCore` | Framework-free engine escape hatch for advanced integrations. |\n\n`EditorState` exposes reactive state (`value`, `isEmpty`, `selectionState`, `canUndo`, `canRedo`, `isDisabled`) and imperative methods (`focus`, `setValue`, `getValue`, `undo`, `redo`, `exec`, `toggleMark`, `setMark`). For custom keyboard behavior, pass `onKeyDown` to `useEditable`; return `true` when you handled the event to skip the built-in shortcuts.\n\nStyle the editable element with `white-space: pre-wrap` (the built-in `Editor` does this internally). This preserves significant whitespace \u2014 leading, trailing, and consecutive spaces \u2014 which would otherwise collapse when the editor re-renders from its model, making a trailing space appear not to be inserted.\n\n| Selector | Description |\n| ------------------------------------------- | ----------------------------------------- |\n| `.BaselineUI-Editor` | Root container element |\n| `.BaselineUI-Editor-Save` | Save/submit button |\n| `.BaselineUI-Editor-Cancel` | Cancel button |\n| `.BaselineUI-Editor-Footer` | Footer toolbar containing action buttons |\n| `.BaselineUI-Editor-Mention` | Mention (@) button in footer |\n| `.BaselineUI-Editor-RichEditorToolbar` | Rich text formatting toolbar |\n| `.BaselineUI-Editor-RichEditorEditingArea` | Rich text contenteditable area |\n| `.BaselineUI-Editor-RichEditorPlaceholder` | Rich text empty-state placeholder overlay |\n| `.BaselineUI-Editor-PlainEditorEditingArea` | Plain text textarea element |\n\n`@baseline-ui/test-utils` ships a Playwright tester for the Editor so component and E2E specs don\'t have to relearn its markup. Build one from a frame and use its locators instead of hand-rolled selectors or translated labels:\n\n```ts\nimport { testers } from "@baseline-ui/test-utils";\n\nconst editor = testers(frame).editor();\n\nawait editor.textbox.fill("Hello");\nawait editor.boldButton.click();\nawait editor.openLinkDialog();\nawait editor.linkInput.fill("https://example.com");\nawait editor.linkAddButton.click();\nawait editor.startMention();\nawait editor.mentionOption("John Doe").click();\n```\n\nThe tester works in both modes \u2014 `textbox` resolves to the rich text contenteditable or the plain-mode `<textarea>` (both expose `role="textbox"`), and the rich-text-only surface (toolbar, link dialog, mention dropdown, help dialog) simply won\'t match when `enableRichText` is off. Pass a `root` locator when more than one Editor is mounted in the same frame:\n\n```ts\nconst editor = testers(frame).editor({\n root: frame.locator(".BaselineUI-Editor").first(),\n});\n```\n\nLocators are backed by stable `data-testid`s on the component (e.g. `editor-bold-button`, `editor-link-input`, `editor-help-dialog-close-button`) rather than accessible names, so they stay reliable across translations. The disclosure helpers (`openFontColorPicker`, `openBackgroundColorPicker`, `openLinkDialog`, `openHelpDialog`, `startMention`) are idempotent and no-op when the target surface is already open.',props:`interface EditorProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
  * identifier; new components should exclude it via
@@ -7657,7 +7678,9 @@ avatarName?: string
 editableContentAriaLabel?: string
 /**
  * An optional array of mentionable users. Mention feature is only available
- * when \`enableRichText\` is set to \`true\` and this prop is provided.
+ * when \`enableRichText\` is set to \`true\` and this prop is provided. Pasted or
+ * dropped mentions of users not in this array, or of any user while it is
+ * undefined, become plain text.
  * 
  * \`\`\`tsx
  * type MentionableUser = {
@@ -7693,7 +7716,7 @@ footerButtons?: (
 /**
  * The imperative handle for manipulating editor.
  */
-editorHandle?: React.RefObject<EditorHandle>
+editorHandle?: React.RefObject<EditorHandle | null>
 /**
  * Whether to clear the editor value when the editor is saved.
  * 
@@ -8009,7 +8032,12 @@ linkSaveLabel?: string
     placeholder="Placeholder"
     aria-label="Editor"
     isInline={false}
-    defaultValue="<p>Non-inline rich text editor</p>" />;`}],implementation:`import { BoldIcon, ItalicIcon, UnderlineIcon } from "@baseline-ui/icons/16";
+    defaultValue="<p>Non-inline rich text editor</p>" />;`}],implementation:`import {
+ BoldIcon,
+ InfoCircleFilledIcon,
+ ItalicIcon,
+ UnderlineIcon,
+} from "@baseline-ui/icons/16";
 import React from "react";
 
 import { ActionButton } from "../../ActionButton";
@@ -8025,7 +8053,9 @@ import {
  useEditorContext,
 } from "../headless";
 
+import type { ActionIconButtonProps } from "../../ActionIconButton";
 import type { ColorPreset } from "../../ColorInput";
+import type { ToggleIconButtonProps } from "../../ToggleIconButton";
 import type { MarkName } from "../core/commands";
 import type { EditorHandle, EditorProps } from "../Editor.types";
 
@@ -8438,7 +8468,38 @@ export const EditorControlledPlainValueBesideInput = () => {
  />
  </>
  );
-};`},similarTo:[],figmaUrl:null},FileInput:{id:"core-forms-fileinput",breadcrumb:"Core/Forms/FileInput",importStatement:'import { FileInput, VariantViewer } from "@baseline-ui/core";',description:"`FileInput` is a form control for selecting one or more files from the user's device. It pairs a primary button with a read-only display of the chosen file name and supports labels, helper text, validation states, and accessibility hooks consistent with `TextInput`.",documentation:'`FileInput` is a form control for selecting one or more files from the user\'s device. It pairs a primary button with a read-only display of the chosen file name and supports labels, helper text, validation states, and accessibility hooks consistent with `TextInput`.\n\n* Built on top of [React Aria\'s `FileTrigger`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html), so it works with mouse, touch, and keyboard.\n* Only the button is interactive \u2014 the label, file name, and helper text are visual and wired into the button via `aria-describedby` for assistive technology.\n* Accepts an array of MIME types or file extensions via `acceptedFileTypes`, and an `allowsMultiple` flag for selecting more than one file.\n* Supports directory selection ([`acceptDirectory`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html#directory-selection)) and mobile capture ([`defaultCamera`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html#media-capture)) via the underlying `FileTrigger`.\n* Renders helper, warning, and error messages with the same precedence rules as the rest of the form components: error > warning > description.\n\n```jsx\nimport { FileInput } from "@baseline-ui/core";\n\n<FileInput\n label="Attachment"\n description="Supports .mov and .mp4"\n acceptedFileTypes={[".mov", ".mp4"]}\n onValueChange={(files) => console.log(files)}\n/>;\n```\n\nIf you need a drag-and-drop drop zone instead of a button trigger, use [`ImageDropZone`](/story/core-forms-imagedropzone--basic) or [`FileUploader`](/story/core-forms-fileuploader--default).\n\nPass a visible `label` for sighted users; the label is wired into the button\'s accessible description so it is announced on focus.\n\n```jsx\n<FileInput label="Attachment" description="Supports .mov and .mp4" />\n```\n\nBy default the label sits above the field. Pass `labelPosition="start"` to align it inline.\n\n```jsx\n<FileInput label="Attachment" labelPosition="start" />\n```\n\nIf the field is described by surrounding context, omit `label`. The button\'s intrinsic name (`buttonLabel`, "Choose file" by default) is still announced.\n\n```jsx\n<FileInput aria-label="Upload a file" />\n```\n\nSet `allowsMultiple` to allow more than one file. The display switches to an aggregate `"N files"` count once more than one file is selected.\n\n```jsx\n<FileInput label="Attachments" allowsMultiple onValueChange={setFiles} />\n```\n\nPass an array of MIME types or file extensions to `acceptedFileTypes`.\n\n```jsx\n<FileInput\n label="Avatar"\n acceptedFileTypes={["image/png", "image/jpeg"]}\n onValueChange={setAvatar}\n/>\n```\n\nSet `acceptDirectory` to let users pick a folder. The browser forwards every file inside the chosen directory to `onValueChange`.\n\n```jsx\n<FileInput label="Upload folder" acceptDirectory onValueChange={setFiles} />\n```\n\nSet `defaultCamera="user"` (front-facing) or `"environment"` (rear-facing) to hint that the picker should open the device\'s camera on mobile.\n\n```jsx\n<FileInput\n label="Take a photo"\n acceptedFileTypes={["image/*"]}\n defaultCamera="environment"\n/>\n```\n\nSet `autoFocus` to focus the button on mount \u2014 useful in dialogs or multi-step flows.\n\n```jsx\n<FileInput label="Attachment" autoFocus />\n```\n\nOverride `buttonLabel` and `placeholder` for non-English copy or domain-specific wording.\n\n```jsx\n<FileInput\n label="Avatar"\n buttonLabel="Browse..."\n placeholder="Drop an image here"\n/>\n```\n\nPass `validationState="warning"` and a `warningMessage` to show a non-blocking advisory.\n\n```jsx\n<FileInput\n label="Attachment"\n validationState="warning"\n warningMessage="This file format is uncommon \u2014 make sure it is supported."\n/>\n```\n\nSetting `errorMessage` flips the field into the error state and replaces the helper text. The error message takes precedence over both `description` and `warningMessage`.\n\n```jsx\n<FileInput label="Attachment" errorMessage="Please choose a supported file." />\n```\n\nDisable the field with `isDisabled`. The button cannot be activated and the displayed file name uses the disabled text color.\n\n```jsx\n<FileInput label="Attachment" isDisabled />\n```\n\n`FileInput` exposes a single callback for handling the selection:\n\n| Prop | Signature | When to use |\n| --------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `onValueChange` | `(files: File[]) => void` | Receives the parsed file list directly. When `allowsMultiple` is not set, the array has at most one entry. An empty array means the user opened and dismissed the file picker. |\n\n`FileInput` sets the following data attributes on the field wrapper. Use them to scope your custom styles.\n\n| Selector | Description |\n| ----------------------------------- | ---------------------------------------------------- |\n| `[data-disabled]` | Present when `isDisabled` is true. |\n| `[data-validation-state="error"]` | Present when an error message or error state is set. |\n| `[data-validation-state="warning"]` | Present when `validationState="warning"`. |\n| `.BaselineUI-FileInput` | Root element of the component. |\n\nTo style the button itself, target `.BaselineUI-FileInput button` or pass a class via `buttonClassName` / inline styles via `buttonStyle`.\n\n* Only the button is interactive; the label, file name, and helper text are visual elements wired into the button via `aria-describedby`.\n* The button keeps its own accessible name (`"Choose file"` by default), so screen readers announce the action on focus.\n* The visible `label`, the selected file name, and any helper/warning/error message are all referenced from the button\'s `aria-describedby`, so they are announced after the action label.\n* An externally supplied `aria-describedby` is merged with the internal IDs rather than replacing them.\n\n| Key | Action |\n| ----------------- | ----------------------------- |\n| `Tab` | Moves focus to the button. |\n| `Shift + Tab` | Moves focus out of the field. |\n| `Space` / `Enter` | Opens the system file picker. |',props:`interface FileInputProps {
+};
+
+type FooterButtonWithoutIcon =
+ | {
+ type: "action";
+ props: Omit<ActionIconButtonProps, "icon" | "size" | "variant">;
+ }
+ | {
+ type: "toggle";
+ props: Omit<ToggleIconButtonProps, "icon" | "size" | "variant">;
+ };
+
+export const EditorWithFooterButtonsExample: React.FC<
+ Omit<EditorProps, "footerButtons"> & {
+ footerButtons: FooterButtonWithoutIcon[];
+ }
+> = ({ footerButtons, ...props }) => (
+ <Editor
+ {...props}
+ footerButtons={footerButtons.map((button) =>
+ button.type === "action"
+ ? {
+ type: "action",
+ props: { ...button.props, icon: InfoCircleFilledIcon },
+ }
+ : {
+ type: "toggle",
+ props: { ...button.props, icon: InfoCircleFilledIcon },
+ },
+ )}
+ />
+);`},similarTo:[],figmaUrl:null},FileInput:{id:"core-forms-fileinput",breadcrumb:"Core/Forms/FileInput",importStatement:'import { FileInput, VariantViewer } from "@baseline-ui/core";',description:"`FileInput` is a form control for selecting one or more files from the user's device. It pairs a primary button with a read-only display of the chosen file name and supports labels, helper text, validation states, and accessibility hooks consistent with `TextInput`.",documentation:'`FileInput` is a form control for selecting one or more files from the user\'s device. It pairs a primary button with a read-only display of the chosen file name and supports labels, helper text, validation states, and accessibility hooks consistent with `TextInput`.\n\n* Built on top of [React Aria\'s `FileTrigger`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html), so it works with mouse, touch, and keyboard.\n* Only the button is interactive \u2014 the label, file name, and helper text are visual and wired into the button via `aria-describedby` for assistive technology.\n* Accepts an array of MIME types or file extensions via `acceptedFileTypes`, and an `allowsMultiple` flag for selecting more than one file.\n* Supports directory selection ([`acceptDirectory`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html#directory-selection)) and mobile capture ([`defaultCamera`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html#media-capture)) via the underlying `FileTrigger`.\n* Renders helper, warning, and error messages with the same precedence rules as the rest of the form components: error > warning > description.\n\n```jsx\nimport { FileInput } from "@baseline-ui/core";\n\n<FileInput\n label="Attachment"\n description="Supports .mov and .mp4"\n acceptedFileTypes={[".mov", ".mp4"]}\n onValueChange={(files) => console.log(files)}\n/>;\n```\n\nIf you need a drag-and-drop drop zone instead of a button trigger, use [`ImageDropZone`](/story/core-forms-imagedropzone--basic) or [`FileUploader`](/story/core-forms-fileuploader--default).\n\nPass a visible `label` for sighted users; the label is wired into the button\'s accessible description so it is announced on focus.\n\n```jsx\n<FileInput label="Attachment" description="Supports .mov and .mp4" />\n```\n\nBy default the label sits above the field. Pass `labelPosition="start"` to align it inline.\n\n```jsx\n<FileInput label="Attachment" labelPosition="start" />\n```\n\nIf the field is described by surrounding context, omit `label`. The button\'s intrinsic name (`buttonLabel`, "Choose file" by default) is still announced.\n\n```jsx\n<FileInput aria-label="Upload a file" />\n```\n\nSet `allowsMultiple` to allow more than one file. The display switches to an aggregate `"N files"` count once more than one file is selected.\n\n```jsx\n<FileInput label="Attachments" allowsMultiple onValueChange={setFiles} />\n```\n\nPass an array of MIME types or file extensions to `acceptedFileTypes`.\n\n```jsx\n<FileInput\n label="Avatar"\n acceptedFileTypes={["image/png", "image/jpeg"]}\n onValueChange={setAvatar}\n/>\n```\n\nSet `acceptDirectory` to let users pick a folder. The browser forwards every file inside the chosen directory to `onValueChange`.\n\n```jsx\n<FileInput label="Upload folder" acceptDirectory onValueChange={setFiles} />\n```\n\nSet `defaultCamera="user"` (front-facing) or `"environment"` (rear-facing) to hint that the picker should open the device\'s camera on mobile.\n\n```jsx\n<FileInput\n label="Take a photo"\n acceptedFileTypes={["image/*"]}\n defaultCamera="environment"\n/>\n```\n\nSet `autoFocus` to focus the button on mount \u2014 useful in dialogs or multi-step flows.\n\n```jsx\n<FileInput label="Attachment" autoFocus />\n```\n\nOverride `buttonLabel` and `placeholder` for non-English copy or domain-specific wording.\n\n```jsx\n<FileInput\n label="Avatar"\n buttonLabel="Browse..."\n placeholder="Drop an image here"\n/>\n```\n\nPass `validationState="warning"` and a `warningMessage` to show a non-blocking advisory.\n\n```jsx\n<FileInput\n label="Attachment"\n validationState="warning"\n warningMessage="This file format is uncommon \u2014 make sure it is supported."\n/>\n```\n\nSetting `errorMessage` flips the field into the error state and replaces the helper text. The error message takes precedence over both `description` and `warningMessage`.\n\n```jsx\n<FileInput label="Attachment" errorMessage="Please choose a supported file." />\n```\n\nDisable the field with `isDisabled`. The button cannot be activated and the displayed file name uses the disabled text color.\n\n```jsx\n<FileInput label="Attachment" isDisabled />\n```\n\n`FileInput` exposes a single callback for handling the selection:\n\n| Prop | Signature | When to use |\n| --------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `onValueChange` | `(files: File[]) => void` | Receives the parsed file list directly. When `allowsMultiple` is not set, the array has at most one entry. An empty array means the user opened and dismissed the file picker. |\n\n`FileInput` sets the following data attributes on the field wrapper. Use them to scope your custom styles.\n\n| Selector | Description |\n| ----------------------------------- | ---------------------------------------------------- |\n| `[data-disabled]` | Present when `isDisabled` is true. |\n| `[data-validation-state="error"]` | Present when an error message or error state is set. |\n| `[data-validation-state="warning"]` | Present when `validationState="warning"`. |\n| `.BaselineUI-FileInput` | Root element of the component. |\n\nTo style the button itself, target `.BaselineUI-FileInput button` or pass a class via `buttonClassName` / inline styles via `buttonStyle`.\n\n* Only the button is interactive; the label, file name, and helper text are visual elements wired into the button via `aria-describedby`.\n* The button keeps its own accessible name (`"Choose file"` by default), so screen readers announce the action on focus.\n* The visible `label`, the selected file name, and any helper/warning/error message are all referenced from the button\'s `aria-describedby`, so they are announced after the action label.\n* An externally supplied `aria-describedby` is merged with the internal IDs rather than replacing them.\n\n| Key | Action |\n| ----------------- | ----------------------------- |\n| `Tab` | Moves focus to the button. |\n| `Shift + Tab` | Moves focus out of the field. |\n| `Space` / `Enter` | Opens the system file picker. |',props:`interface FileInputProps {
 /**
  * The description to display below the input.
  */
@@ -9861,7 +9922,7 @@ canvasStyle?: React.CSSProperties
 /**
  * The ref for the canvas.
  */
-canvasRef?: React.RefObject<HTMLDivElement>
+canvasRef?: React.RefObject<HTMLDivElement | null>
 /**
  * The className applicable to the footer.
  */
@@ -11544,11 +11605,13 @@ const SCALE_FACTOR = 1.5;
 
 export function ImageGalleryExample({
  onDelete,
+ ancestorKey,
  ...props
 }: Omit<React.ComponentProps<typeof ImageGallery>, "onDelete"> & {
  onDelete?: (keys: Key[]) => void;
+ ancestorKey?: string;
 }) {
- return (
+ const gallery = (
  <ImageGallery
  {...props}
  onDelete={
@@ -11560,6 +11623,8 @@ export function ImageGalleryExample({
  }
  />
  );
+
+ return ancestorKey ? <div data-key={ancestorKey}>{gallery}</div> : gallery;
 }
 
 export function CustomSizeImageGalleryExample({
@@ -11845,7 +11910,11 @@ export function MountEffectScrollIntoViewImageGalleryExample() {
 // Counts \`renderImage\` calls so a spec can prove that a re-render which changes nothing
 // the gallery reads does not throw away the list box's cached options. \`Report\` publishes
 // the tally taken *before* its own render, so two clicks bracket exactly one re-render.
-export function RenderCountingImageGalleryExample() {
+export function RenderCountingImageGalleryExample({
+ isControlled = false,
+}: {
+ isControlled?: boolean;
+}) {
  const calls = React.useRef(0);
  const [reported, setReported] = React.useState(0);
 
@@ -11866,7 +11935,11 @@ export function RenderCountingImageGalleryExample() {
  }}
  />
  <Text data-testid="render-count">{reported.toString()}</Text>
+ {isControlled ? (
+ <ImageGallery items={items} renderImage={renderImage} />
+ ) : (
  <ImageGallery defaultItems={items} renderImage={renderImage} />
+ )}
  </Box>
  );
 }
@@ -13277,7 +13350,7 @@ withSectionHeaderPadding?: boolean
 /**
  * Handle to access the listbox methods.
  */
-listBoxHandle?: React.RefObject<ListHandle>
+listBoxHandle?: React.RefObject<ListHandle | null>
 }`,stories:{usage:[{id:"core-collections-listbox--basic",name:"Basic",snippet:`const Basic = () => <ListBox
     items={items}
     aria-label="List box"
@@ -17301,7 +17374,29 @@ export const TrailingElementExample = () => {
  </PointPickerContent>
  </PointPicker>
  );
-};`},similarTo:[],figmaUrl:null},Popover:{id:"core-overlays-popover",breadcrumb:"Core/Overlays/Popover",importStatement:`import {
+};
+
+export const RenderCursorExample: React.FC<{
+ cursor: "custom" | "default" | "none";
+ onRenderCursor: (
+ options: Parameters<
+ NonNullable<PointPickerContentProps["renderCursor"]>
+ >[0],
+ ) => void;
+}> = ({ cursor, onRenderCursor }) => (
+ <PointPicker>
+ <PointPickerDisplay />
+ <PointPickerContent
+ renderCursor={(options) => {
+ onRenderCursor(options);
+ if (cursor === "custom") return <div>custom cursor</div>;
+ return cursor === "none" ? null : undefined;
+ }}
+ >
+ <div style={{ width: 200, height: 200 }}>Test content</div>
+ </PointPickerContent>
+ </PointPicker>
+);`},similarTo:[],figmaUrl:null},Popover:{id:"core-overlays-popover",breadcrumb:"Core/Overlays/Popover",importStatement:`import {
     ActionButton,
     Box,
     Popover,
@@ -18800,38 +18895,7 @@ className?: string
  * The style applied to the root element of the component.
  */
 style?: React.CSSProperties
-}`,stories:{usage:[{id:"core-utilities-portal--basic",name:"Basic",snippet:"const Basic = () => <Portal>I am in a portal</Portal>;"}],implementation:""},similarTo:[],figmaUrl:null},Preview:{id:"core-content-preview",breadcrumb:"Core/Content/Preview",importStatement:'import { InkSvg, Preview, VariantViewer } from "@baseline-ui/core";',description:"`Preview` renders a thumbnail of an image, SVG, or text snippet with optional action buttons overlaid on it. Use it to surface a visual sample of an asset that the user can inspect or act on without opening the full item.",documentation:`\`Preview\` renders a thumbnail of an image, SVG, or text snippet with optional action buttons overlaid on it. Use it to surface a visual sample of an asset that the user can inspect or act on without opening the full item.
-
-* Supports SVG, images and text
-* Supports custom action buttons to interact with the preview
-* Exposed to assistive technologies using ARIA attributes
-* Supports keyboard, mouse and touch interactions
-
-\`\`\`jsx
-import { Preview } from "@storybook/addon-docs/blocks";
-
-<Preview imageSrc="/portrait.png" />;
-\`\`\`
-
-The \`Preview\` component has two variants. The two variants only differ in styling. It can be controlled using the \`isInline\` prop.
-
-The \`Preview\` component can be disabled. When disabled, the preview is not interactive and the action buttons are not rendered.
-
-| Selector | Description |
-| -------------------- | ----------------------------------------------------------------- |
-| \\[data-disabled] | Whether the component is disabled. |
-| \\[data-focused] | Whether the component is focused, either via a mouse or keyboard. |
-| \\[data-hovered] | Whether the component is currently hovered with a mouse. |
-| \\[data-focus-visible] | Whether the component is keyboard focused. |
-
-| Key | Function |
-| ------------ | -------------------------------- |
-| \`Tab\` | Focus the preview |
-| \`ArrowLeft\` | Focus the previous action button |
-| \`ArrowRight\` | Focus the next action button |
-
-\`\`\`
-\`\`\``,props:`interface PreviewProps {
+}`,stories:{usage:[{id:"core-utilities-portal--basic",name:"Basic",snippet:"const Basic = () => <Portal>I am in a portal</Portal>;"}],implementation:""},similarTo:[],figmaUrl:null},Preview:{id:"core-content-preview",breadcrumb:"Core/Content/Preview",importStatement:'import { InkSvg, Preview, VariantViewer } from "@baseline-ui/core";',description:"`Preview` renders a thumbnail of an image, SVG, or text snippet with optional action buttons overlaid on it. Use it to surface a visual sample of an asset that the user can inspect or act on without opening the full item.",documentation:'`Preview` renders a thumbnail of an image, SVG, or text snippet with optional action buttons overlaid on it. Use it to surface a visual sample of an asset that the user can inspect or act on without opening the full item.\n\n* Supports SVG, images and text\n* Supports custom action buttons to interact with the preview\n* Exposed to assistive technologies using ARIA attributes\n* Supports keyboard, mouse and touch interactions\n\n```jsx\nimport { Preview } from "@storybook/addon-docs/blocks";\n\n<Preview imageSrc="/portrait.png" />;\n```\n\n`svgSrc` accepts a React element or an SVG string. A string is sanitized before it is rendered: scripts, event handlers and `javascript:` URLs are removed, along with elements such as `use`, `animate`, `set` and `foreignObject`. Sprite icons that reference a symbol with `<use href="#id">` therefore render blank; pass a React element to render them. A string SVG is rendered after the component mounts, so server-rendered HTML contains an empty preview that fills in on the client.\n\nThe `Preview` component has two variants. The two variants only differ in styling. It can be controlled using the `isInline` prop.\n\nThe `Preview` component can be disabled. When disabled, the preview is not interactive and the action buttons are not rendered.\n\n| Selector | Description |\n| -------------------- | ----------------------------------------------------------------- |\n| \\[data-disabled] | Whether the component is disabled. |\n| \\[data-focused] | Whether the component is focused, either via a mouse or keyboard. |\n| \\[data-hovered] | Whether the component is currently hovered with a mouse. |\n| \\[data-focus-visible] | Whether the component is keyboard focused. |\n\n| Key | Function |\n| ------------ | -------------------------------- |\n| `Tab` | Focus the preview |\n| `ArrowLeft` | Focus the previous action button |\n| `ArrowRight` | Focus the next action button |\n\n```\n```',props:`interface PreviewProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
  * identifier; new components should exclude it via
@@ -18883,6 +18947,10 @@ imageSrc?: string
 imageAlt?: string
 /**
  * The SVG to display in the preview. This can be a React element or a string.
+ * String SVGs are sanitized with DOMPurify's default profile, which removes
+ * scripts, event handlers and elements such as \`use\` (so \`<use href="#id">\`
+ * sprite icons render blank), \`animate\`, \`set\` and \`foreignObject\`. Pass a
+ * React element to render those. String SVGs render after mount.
  */
 svgSrc?: string | React.JSX.Element
 /**
@@ -19765,7 +19833,7 @@ style?: React.CSSProperties
  * 
  * @default document.body
  */
-scrollRef?: React.RefObject<HTMLElement>
+scrollRef?: React.RefObject<HTMLElement | null>
 /**
  * Indicates whether the button should be hidden when the keyboard is being
  * used.
@@ -21428,7 +21496,17 @@ numberInputStyle?: NumberInputProps["style"]
     label="Slider label"
     numberFormatOptions={{
       style: "percent",
-    }} />;`},{id:"core-forms-slider--with-label-and-number-input",name:"With Label And Number Input",snippet:"const WithLabelAndNumberInput = () => <Slider includeNumberInput />;"}],implementation:""},similarTo:[],figmaUrl:null},StatusCard:{id:"core-content-statuscard",breadcrumb:"Core/Content/StatusCard",importStatement:`import { Actionable, Box, StatusCard, Text, VariantViewer } from "@baseline-ui/core";
+    }} />;`},{id:"core-forms-slider--with-label-and-number-input",name:"With Label And Number Input",snippet:"const WithLabelAndNumberInput = () => <Slider includeNumberInput />;"}],implementation:`import React from "react";
+
+import { IconSlider } from "../IconSlider";
+
+import type { IconSliderProps } from "../Slider.types";
+
+const TestIcon = () => <div>Icon</div>;
+
+export const IconSliderWithIconExample: React.FC<
+ Omit<IconSliderProps, "icon">
+> = (props) => <IconSlider icon={TestIcon} {...props} />;`},similarTo:[],figmaUrl:null},StatusCard:{id:"core-content-statuscard",breadcrumb:"Core/Content/StatusCard",importStatement:`import { Actionable, Box, StatusCard, Text, VariantViewer } from "@baseline-ui/core";
 import { CaretUpIcon } from "@baseline-ui/icons/12";`,description:"`StatusCard` is a compact card that pairs a status icon with a title and description to communicate the state of a process or item. Use it to surface health, progress, or outcome signals such as active, success, warning, error, or denied conditions.",documentation:`\`StatusCard\` is a compact card that pairs a status icon with a title and description to communicate the state of a process or item. Use it to surface health, progress, or outcome signals such as active, success, warning, error, or denied conditions.
 
 * Supports multiple status variants: \`active\`, \`warning\`, \`error\`, \`denied\`, and \`success\`
@@ -24848,7 +24926,16 @@ isSelected?: boolean
  * is rendered.
  */
 onRemove?: () => void
-}`,stories:{usage:[{id:"core-content-tag--basic",name:"Basic",snippet:"const Basic = () => <Tag>Tag</Tag>;"},{id:"core-content-tag--with-icon",name:"With Icon",snippet:"const WithIcon = () => <Tag icon={EllipseIcon}>Tag</Tag>;"},{id:"core-content-tag--removable",name:"Removable",snippet:"const Removable = () => <Tag onRemove={fn()}>Tag</Tag>;"},{id:"core-content-tag--selected",name:"Selected",snippet:"const Selected = () => <Tag isSelected>Tag</Tag>;"},{id:"core-content-tag--selected-with-icon",name:"Selected With Icon",snippet:"const SelectedWithIcon = () => <Tag isSelected icon={EllipseIcon}>Tag</Tag>;"},{id:"core-content-tag--disabled",name:"Disabled",snippet:"const Disabled = () => <Tag isDisabled>Tag</Tag>;"},{id:"core-content-tag--disabled-removable",name:"Disabled Removable",snippet:"const DisabledRemovable = () => <Tag isDisabled onRemove={fn()}>Tag</Tag>;"},{id:"core-content-tag--small",name:"Small",snippet:'const Small = () => <Tag size="sm">Tag</Tag>;'},{id:"core-content-tag--small-with-icon",name:"Small With Icon",snippet:'const SmallWithIcon = () => <Tag size="sm" icon={EllipseIcon12}>Tag</Tag>;'},{id:"core-content-tag--long-text",name:"Long Text",snippet:"const LongText = () => <Tag>This is a very long tag label that might overflow or cause layout issues</Tag>;"}],implementation:""},similarTo:[],figmaUrl:null},TagGroup:{id:"core-collections-taggroup",breadcrumb:"Core/Collections/TagGroup",importStatement:'import { RemovableTagGroup, TagGroup, VariantViewer } from "@baseline-ui/core";',description:"`TagGroup` is a focusable collection of `Tag` items with keyboard navigation, selection, and removal. Use it to present a set of related labels, keywords, or filters that users can browse or toggle as a group.",documentation:`\`TagGroup\` is a focusable collection of \`Tag\` items with keyboard navigation, selection, and removal. Use it to present a set of related labels, keywords, or filters that users can browse or toggle as a group.
+}`,stories:{usage:[{id:"core-content-tag--basic",name:"Basic",snippet:"const Basic = () => <Tag>Tag</Tag>;"},{id:"core-content-tag--with-icon",name:"With Icon",snippet:"const WithIcon = () => <Tag icon={EllipseIcon}>Tag</Tag>;"},{id:"core-content-tag--removable",name:"Removable",snippet:"const Removable = () => <Tag onRemove={fn()}>Tag</Tag>;"},{id:"core-content-tag--selected",name:"Selected",snippet:"const Selected = () => <Tag isSelected>Tag</Tag>;"},{id:"core-content-tag--selected-with-icon",name:"Selected With Icon",snippet:"const SelectedWithIcon = () => <Tag isSelected icon={EllipseIcon}>Tag</Tag>;"},{id:"core-content-tag--disabled",name:"Disabled",snippet:"const Disabled = () => <Tag isDisabled>Tag</Tag>;"},{id:"core-content-tag--disabled-removable",name:"Disabled Removable",snippet:"const DisabledRemovable = () => <Tag isDisabled onRemove={fn()}>Tag</Tag>;"},{id:"core-content-tag--small",name:"Small",snippet:'const Small = () => <Tag size="sm">Tag</Tag>;'},{id:"core-content-tag--small-with-icon",name:"Small With Icon",snippet:'const SmallWithIcon = () => <Tag size="sm" icon={EllipseIcon12}>Tag</Tag>;'},{id:"core-content-tag--long-text",name:"Long Text",snippet:"const LongText = () => <Tag>This is a very long tag label that might overflow or cause layout issues</Tag>;"}],implementation:`import { EllipseIcon } from "@baseline-ui/icons/16";
+import React from "react";
+
+import { Tag } from "../Tag";
+
+import type { TagProps } from "../Tag.types";
+
+export const TagWithIconExample: React.FC<Omit<TagProps, "icon">> = (props) => (
+ <Tag icon={EllipseIcon} {...props} />
+);`},similarTo:[],figmaUrl:null},TagGroup:{id:"core-collections-taggroup",breadcrumb:"Core/Collections/TagGroup",importStatement:'import { RemovableTagGroup, TagGroup, VariantViewer } from "@baseline-ui/core";',description:"`TagGroup` is a focusable collection of `Tag` items with keyboard navigation, selection, and removal. Use it to present a set of related labels, keywords, or filters that users can browse or toggle as a group.",documentation:`\`TagGroup\` is a focusable collection of \`Tag\` items with keyboard navigation, selection, and removal. Use it to present a set of related labels, keywords, or filters that users can browse or toggle as a group.
 
 * The component is exposed to assistive technology as a grid using ARIA
 * Keyboard navigation supports arrow keys, home, end, page up, page down, space and enter
@@ -29261,7 +29348,7 @@ label?: React.ReactNode
 /**
  * Handle to access the listbox methods.
  */
-listBoxHandle?: React.RefObject<ListHandle>
+listBoxHandle?: React.RefObject<ListHandle | null>
 }`,stories:{usage:[{id:"core-collections-unsafe-listbox--basic",name:"Basic",snippet:'const Basic = () => <ListBox items={items} aria-label="List box" onAction={fn()} />;'},{id:"core-collections-unsafe-listbox--with-focus-loop",name:"With Focus Loop",snippet:'const WithFocusLoop = () => <ListBox items={items} aria-label="List box" shouldFocusWrap onAction={fn()} />;'},{id:"core-collections-unsafe-listbox--with-default-selected",name:"With Default Selected",snippet:`const WithDefaultSelected = () => <ListBox
     items={items}
     aria-label="List box"
@@ -30632,7 +30719,7 @@ variant?: "compact" | "standard"
                 indeterminateIcon={null} />
         </Box>
     );
-};`}],implementation:`import { EllipseIcon } from "@baseline-ui/icons/24";
+};`}],implementation:`import { BorderColorIcon, EllipseIcon } from "@baseline-ui/icons/24";
 import React, { useState } from "react";
 
 import { ActionButton } from "../../ActionButton";
@@ -30640,8 +30727,10 @@ import { ActionIconButton } from "../../ActionIconButton";
 import { Box } from "../../Box";
 import { Text } from "../../Text";
 import { ColorInput } from "../ColorInput";
+import { IconColorInput } from "../IconColorInput";
+import { presets } from "./data";
 
-import type { ColorInputProps } from "../ColorInput.types";
+import type { ColorInputProps, IconColorInputProps } from "../ColorInput.types";
 
 export const CustomTriggerButton = () => {
  return (
@@ -30744,7 +30833,21 @@ export const IndeterminateWithCustomColorLabel: React.FC<ColorInputProps> = (
  }
  />
  );
-};`},similarTo:[],figmaUrl:null},Icon:{id:"core-miscellaneous-icon",importStatement:'import { Icon } from "@baseline-ui/core";',description:"",documentation:null,props:`interface IconProps {
+};
+
+export const StoredCustomColorsExample: React.FC<{ storageKey: string }> = ({
+ storageKey,
+}) => (
+ <ColorInput
+ presets={presets}
+ defaultValue="#000000"
+ storePickedColorKey={storageKey}
+ />
+);
+
+export const IconColorInputExample: React.FC<
+ Omit<IconColorInputProps, "icon">
+> = (props) => <IconColorInput icon={BorderColorIcon} {...props} />;`},similarTo:[],figmaUrl:null},Icon:{id:"core-miscellaneous-icon",importStatement:'import { Icon } from "@baseline-ui/core";',description:"",documentation:null,props:`interface IconProps {
 /**
  * The \`className\` property assigned to the SVG element of the component.
  */
@@ -31457,7 +31560,7 @@ gridLines?: GridLines | ((options: Options) => GridLines)
  */
 elementHandle?: React.RefObject<{
   focus: () => void;
-}>
+} | null>
 /**
  * The callback function that is called when the cursor is moved.
  * 
@@ -32098,7 +32201,29 @@ export const TrailingElementExample = () => {
  </PointPickerContent>
  </PointPicker>
  );
-};`},similarTo:[],figmaUrl:null},PointPickerDisplay:{id:"core-content-pointpicker-pointpickerdisplay",importStatement:'import { Box, PointPickerDisplay, RichContentExample } from "@baseline-ui/core";',description:"",documentation:null,props:`interface PointPickerDisplayProps {
+};
+
+export const RenderCursorExample: React.FC<{
+ cursor: "custom" | "default" | "none";
+ onRenderCursor: (
+ options: Parameters<
+ NonNullable<PointPickerContentProps["renderCursor"]>
+ >[0],
+ ) => void;
+}> = ({ cursor, onRenderCursor }) => (
+ <PointPicker>
+ <PointPickerDisplay />
+ <PointPickerContent
+ renderCursor={(options) => {
+ onRenderCursor(options);
+ if (cursor === "custom") return <div>custom cursor</div>;
+ return cursor === "none" ? null : undefined;
+ }}
+ >
+ <div style={{ width: 200, height: 200 }}>Test content</div>
+ </PointPickerContent>
+ </PointPicker>
+);`},similarTo:[],figmaUrl:null},PointPickerDisplay:{id:"core-content-pointpicker-pointpickerdisplay",importStatement:'import { Box, PointPickerDisplay, RichContentExample } from "@baseline-ui/core";',description:"",documentation:null,props:`interface PointPickerDisplayProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
  * identifier; new components should exclude it via
@@ -32739,7 +32864,29 @@ export const TrailingElementExample = () => {
  </PointPickerContent>
  </PointPicker>
  );
-};`},similarTo:[],figmaUrl:null},PopoverContent:{id:"core-overlays-popover-popovercontent",importStatement:`import {
+};
+
+export const RenderCursorExample: React.FC<{
+ cursor: "custom" | "default" | "none";
+ onRenderCursor: (
+ options: Parameters<
+ NonNullable<PointPickerContentProps["renderCursor"]>
+ >[0],
+ ) => void;
+}> = ({ cursor, onRenderCursor }) => (
+ <PointPicker>
+ <PointPickerDisplay />
+ <PointPickerContent
+ renderCursor={(options) => {
+ onRenderCursor(options);
+ if (cursor === "custom") return <div>custom cursor</div>;
+ return cursor === "none" ? null : undefined;
+ }}
+ >
+ <div style={{ width: 200, height: 200 }}>Test content</div>
+ </PointPickerContent>
+ </PointPicker>
+);`},similarTo:[],figmaUrl:null},PopoverContent:{id:"core-overlays-popover-popovercontent",importStatement:`import {
     PopoverBoundaryAxisDemo,
     PopoverContainedFocusExample,
     PopoverContent,
@@ -32789,7 +32936,7 @@ style?: | React.CSSProperties
  * The reference element for the popover position. By default, the popover is
  * positioned relative to the trigger element.
  */
-triggerRef?: React.RefObject<HTMLElement>
+triggerRef?: React.RefObject<HTMLElement | null>
 /**
  * The class name for the underlay element.
  */
@@ -35808,7 +35955,17 @@ popoverContentProps?: Omit<PopoverContentProps, "children">
     formatValue={(value: number) => \`\${value} pt\`}
     aria-label="Icon slider"
     onTriggerPress={fn()}
-    isDisabled />;`}],implementation:""},similarTo:[],figmaUrl:null}};var o={gettingStarted:`# Getting started
+    isDisabled />;`}],implementation:`import React from "react";
+
+import { IconSlider } from "../IconSlider";
+
+import type { IconSliderProps } from "../Slider.types";
+
+const TestIcon = () => <div>Icon</div>;
+
+export const IconSliderWithIconExample: React.FC<
+ Omit<IconSliderProps, "icon">
+> = (props) => <IconSlider icon={TestIcon} {...props} />;`},similarTo:[],figmaUrl:null}};var i={gettingStarted:`# Getting started
 
 Install the packages required for using Baseline UI with the following command:
 
@@ -35816,6 +35973,8 @@ Install the packages required for using Baseline UI with the following command:
 npm install @baseline-ui/core @baseline-ui/tokens
 \`\`\`
 
+Baseline UI requires React 18 or 19 (\`react\` and \`react-dom\` are peer dependencies).
+
 ## Usage
 
 Use the components by importing them from \`@baseline-ui/core\`:
@@ -37537,7 +37696,7 @@ padding={[null, "lg", "xl"]}
 
 * [vanilla-extract sprinkles documentation](https://vanilla-extract.style/documentation/packages/sprinkles/) - Learn about the underlying sprinkles framework
 * [Box component documentation](/docs/core-utilities-box--docs) - Detailed information about the Box component
-* [Theme documentation](/docs/theming--docs) - Learn about Baseline UI's theming system`};var c={"8":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","ChevronRightFilledIcon","ChevronRightIcon","EllipseIcon","MinusIcon","PlusIcon","XIcon"],"12":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","EditIcon","EllipseIcon","EnterKeyIcon","LockFilledIcon","LockIcon","MinusIcon","MoreVIcon","MoreIcon","PlaceholderIcon","PlusIcon","SearchIcon","SizeIcon","TrashIcon","XIcon","ZoomIcon"],"16":["AlignBottomIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDiagonalTopLeftBottomRightIcon","ArrowDownCircleFilledIcon","ArrowDownIcon","ArrowIcon","ArrowLeftRightIcon","ArrowRightIcon","ArrowUpArrowDownIcon","ArrowUpIcon","AtIcon","AttachmentsIcon","AvatarIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BulletListIcon","CalendarIcon","CaretLeftIcon","CaretRightIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","CircleFilledIcon","ClockIcon","CopyIcon","CustomizeIcon","DocumentEditIcon","DownloadIcon","DuplicateIcon","EditIcon","ElipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FilterAltIcon","FolderIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FullScreenIcon","HelpCircleIcon","HelpIcon","HereIcon","HideIcon","HighlightTextAltIcon","HighlightTextIcon","HorizontalScrollIcon","ImageIcon","InfoCircleFilledIcon","InsertIcon","ItalicIcon","LightBulbIcon","LineIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MeasureIcon","MinusIcon","MoreIcon","MoreVerticalIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","NumberedListIcon","OpenIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageVerticalScrollIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PlaceholderIcon","PlayIcon","PlusIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","ReadOnlyIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedoIcon","RemoveFormattingIcon","ReorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RulerIcon","SearchIcon","SettingsIcon","ShowIcon","SlashCommandsIcon","SoundRecordIcon","StampIcon","StarFilledIcon","StarIcon","StrikeoutTextAltIcon","TableCellIcon","TableColumnIcon","TableHeaderIcon","TableIcon","TableRowIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextDecreaseIndentIcon","TextIcon","TextIncreaseIndentIcon","TextMarkIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UndoIcon","UnlockIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WindowedIcon","WorkflowIcon","XCircleFilledIcon","XIcon"],"20":["AddPageIcon","AnonymousIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpCircleFilledIcon","AtIcon","AvatarFilledIcon","BoldIcon","CalloutIcon","CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ClockIcon","CollapseIcon","CommentIcon","CopyIcon","CutIcon","DistanceIcon","DownloadIcon","DuplicateIcon","EditIcon","EllipseIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorAlternativeCircleIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FormDateIcon","FormSignatureIcon","FormTextFieldIcon","HelpCircleIcon","HighlightTextIcon","HomeIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","ItalicIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MinusIcon","MoreIcon","MoreVerticalIcon","MoveIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OpenIcon","PageMoveLeftIcon","PageMoveRightIcon","PagesInsertIcon","PasteIcon","PipetteIcon","PlusIcon","PrintIcon","RotateClockwiseIcon","SearchIcon","SettingsIcon","ShapeIcon","ShareIcon","SoundIcon","SoundRecordIcon","StarFilledIcon","StarIcon","StyleIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UploadIcon","WarningFilledIcon","WarningIcon","XCircleFilledIcon","XCircleIcon","XIcon"],"24":["AddNoteCloudIcon","AddNoteIcon","AddTextSerifIcon","AiIcon","AirplaneIcon","AlignBottomIcon","AlignHorizontalCenterIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDownIcon","ArrowIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpIcon","AtIcon","AttachmentIcon","AvatarFilledIcon","AvatarIcon","BlendModeIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BorderColorIcon","BottomBorderIcon","BulletListIcon","CalibrateIcon","CaptureAddIcon","CaretDownIcon","CaretIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ChevronListIcon","ClockIcon","CloudyBorderIcon","CollapseIcon","ColorPaletteIcon","ColorSwatchIcon","CommentIcon","CommentInSidebarIcon","CommentOnPageIcon","CompareDocumentsIcon","CopyIcon","CopyPageIcon","CropIcon","CustomizeIcon","CutIcon","DateModifiedIcon","DatePlusIcon","DebugIcon","DocumentArrowDownCircleIcon","DocumentArrowDownIcon","DocumentArrowRightIcon","DocumentFilledIcon","DocumentLockIcon","DocumentPdfIcon","DownloadIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","DuplicateIcon","EditAnnotationsIcon","EditContentIcon","EditDocumentIcon","EditIcon","EditThumbnailsIcon","EllipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","EndCapArrowFilledIcon","EndCapArrowIcon","EndCapChevronFilledIcon","EndCapChevronIcon","EndCapCircleIcon","EndCapDiamondIcon","EndCapNoneIcon","EndCapSlantedIcon","EndCapSquareIcon","EndCapStraightIcon","EraserIcon","ErrorAltCircleFilledIcon","ErrorAltIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","ExpandVerticalIcon","FillColorIcon","FilterIcon","FitToHeightIcon","FivePagesHorizontalFilledIcon","FivePagesVerticalFilledIcon","FolderAddIcon","FolderIcon","FontListIcon","FontSizeIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormPageIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FormTwoRadioButtonsIcon","FourPagesGridFilledIcon","FourPagesHorizontalFilledIcon","FourPagesStackedFilledIcon","FourPagesVerticalFilledIcon","GroupIcon","HamburgerMenuIcon","HandIcon","HeartIcon","HideIcon","HideRevealIcon","HighlightTextIcon","HomeIcon","HorizontalScollIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","InitialsIcon","InnerHorizontalBorderIcon","InnerVerticalBorderIcon","InsertIcon","ItalicIcon","LayerBottomIcon","LayerDownIcon","LayerTopIcon","LayerUpIcon","LayersIcon","LeftBindingIcon","LeftBorderIcon","LineCapsIcon","LineIcon","LineSpacingIcon","LineStyleCloudyIcon","LineStyleDashedDoubleDashIcon","LineStyleDashedDoubleGapIcon","LineStyleDashedQuadrupleDashIcon","LineStyleDashedSingleGapIcon","LineStyleIcon","LineStyleSolidIcon","LineWidthIcon","LinkIcon","LockFilledIcon","LockIcon","MagicIcon","MagicPenIcon","MailIcon","MarkupIcon","MarqueeZoomIcon","MeasureIcon","MergeIcon","MessageCloudIcon","MinusIcon","MoonIcon","MoreCircleIcon","MoreIcon","MoreVerticalIcon","MoveAllDirectionsIcon","MoveLeftIcon","MoveLeftRightIcon","MoveRightIcon","MultiplePagesIcon","NonEditableIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OcrIcon","OpacityIcon","PageAddIcon","PageCurlIcon","PageDuplicateIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLandscapeIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageMoveLeftIcon","PageMoveRightIcon","PageNumberCircleIcon","PageNumberIcon","PagePortraitIcon","PageRemoveIcon","PageVerticalScrollIcon","PagesInsertAltIcon","PagesInsertIcon","PagesNewFromSelectionAltIcon","PagesNewFromSelectionIcon","PagesSelectAllIcon","PagesSelectNoneIcon","PasteBoardIcon","PastePageIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PinDropFilledIcon","PinDropIcon","PipetteIcon","PlayIcon","PlusCircleFilledIcon","PlusCircleIcon","PlusIcon","PointerIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","PrecisionIcon","PrintIcon","PrivateModeIcon","PushPinIcon","QuestionmarkCircleIcon","ReaderViewIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedactIcon","RedactRectangleIcon","RedactTextHighlighterIcon","RedactionTextRepeatingIcon","RedactionTextSingleIcon","RedoAllIcon","RedoIcon","RegexIcon","ReplaceIcon","RightBindingIcon","RightBorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RotateObjectClockwiseIcon","RotateObjectCounterClockwiseIcon","RulerIcon","ScaleIcon","SearchCircleIcon","SearchIcon","SearchSelectionIcon","SelectAllIcon","SelectionToolIcon","SettingsIcon","ShapesIcon","ShareAltIcon","ShareIcon","ShieldAddIcon","ShieldCheckmarkIcon","ShieldWarningIcon","ShieldXIcon","ShowIcon","SidebarIcon","SignOutIcon","SignatureDigitalIcon","SignatureIcon","SinglePageFilledIcon","SoundIcon","SquigglyTextIcon","StampAddIcon","StampIcon","StarFilledIcon","StarIcon","StartCapArrowFilledIcon","StartCapArrowIcon","StartCapChevronFilledIcon","StartCapChevronIcon","StartCapCircleIcon","StartCapDiamondIcon","StartCapNoneIcon","StartCapSlantedIcon","StartCapSquareIcon","StartCapStraightIcon","StrikeoutTextIcon","StyleFilledIcon","StyleIcon","StylusFilledIcon","StylusIcon","SunIcon","TableCellIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextColorIcon","TextIcon","TextPropertiesHideIcon","TextPropertiesShowIcon","TextSerifIcon","TextSmallerIcon","ThreePagesHorizontalFilledIcon","ThreePagesStackedFilledIcon","ThreePagesVerticalFilledIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TopBorderIcon","TrashIcon","TwoPagesHorizontalFilledIcon","TwoPagesVerticalFilledIcon","TypeTextIcon","UnderlineIcon","UnderlineTextIcon","UndoAllIcon","UndoIcon","UndoRedoIcon","UngroupIcon","UnlockIcon","UploadIcon","UserIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WidgetIcon","WorkflowIcon","XCircleFilledIcon","XCircleIcon","XIcon","ZoomInIcon","ZoomOutIcon"],"36":["ArrowRight","Check","Circle","Cross","Help","Inset","Key","NewParagraphAlt","NewParagraph","Note","PointerRight","SpeechBubble","Star"]};var p={version:"3.2.1"};var u=`
+* [Theme documentation](/docs/theming--docs) - Learn about Baseline UI's theming system`};var c={"8":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","ChevronRightFilledIcon","ChevronRightIcon","EllipseIcon","MinusIcon","PlusIcon","XIcon"],"12":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","EditIcon","EllipseIcon","EnterKeyIcon","LockFilledIcon","LockIcon","MinusIcon","MoreVIcon","MoreIcon","PlaceholderIcon","PlusIcon","SearchIcon","SizeIcon","TrashIcon","XIcon","ZoomIcon"],"16":["AlignBottomIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDiagonalTopLeftBottomRightIcon","ArrowDownCircleFilledIcon","ArrowDownIcon","ArrowIcon","ArrowLeftRightIcon","ArrowRightIcon","ArrowUpArrowDownIcon","ArrowUpIcon","AtIcon","AttachmentsIcon","AvatarIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BulletListIcon","CalendarIcon","CaretLeftIcon","CaretRightIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","CircleFilledIcon","ClockIcon","CopyIcon","CustomizeIcon","DocumentEditIcon","DownloadIcon","DuplicateIcon","EditIcon","ElipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FilterAltIcon","FolderIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FullScreenIcon","HelpCircleIcon","HelpIcon","HereIcon","HideIcon","HighlightTextAltIcon","HighlightTextIcon","HorizontalScrollIcon","ImageIcon","InfoCircleFilledIcon","InsertIcon","ItalicIcon","LightBulbIcon","LineIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MeasureIcon","MinusIcon","MoreIcon","MoreVerticalIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","NumberedListIcon","OpenIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageVerticalScrollIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PlaceholderIcon","PlayIcon","PlusIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","ReadOnlyIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedoIcon","RemoveFormattingIcon","ReorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RulerIcon","SearchIcon","SettingsIcon","ShowIcon","SlashCommandsIcon","SoundRecordIcon","StampIcon","StarFilledIcon","StarIcon","StrikeoutTextAltIcon","TableCellIcon","TableColumnIcon","TableHeaderIcon","TableIcon","TableRowIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextDecreaseIndentIcon","TextIcon","TextIncreaseIndentIcon","TextMarkIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UndoIcon","UnlockIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WindowedIcon","WorkflowIcon","XCircleFilledIcon","XIcon"],"20":["AddPageIcon","AnonymousIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpCircleFilledIcon","AtIcon","AvatarFilledIcon","BoldIcon","CalloutIcon","CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ClockIcon","CollapseIcon","CommentIcon","CopyIcon","CutIcon","DistanceIcon","DownloadIcon","DuplicateIcon","EditIcon","EllipseIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorAlternativeCircleIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FormDateIcon","FormSignatureIcon","FormTextFieldIcon","HelpCircleIcon","HighlightTextIcon","HomeIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","ItalicIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MinusIcon","MoreIcon","MoreVerticalIcon","MoveIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OpenIcon","PageMoveLeftIcon","PageMoveRightIcon","PagesInsertIcon","PasteIcon","PipetteIcon","PlusIcon","PrintIcon","RotateClockwiseIcon","SearchIcon","SettingsIcon","ShapeIcon","ShareIcon","SoundIcon","SoundRecordIcon","StarFilledIcon","StarIcon","StyleIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UploadIcon","WarningFilledIcon","WarningIcon","XCircleFilledIcon","XCircleIcon","XIcon"],"24":["AddNoteCloudIcon","AddNoteIcon","AddTextSerifIcon","AiIcon","AirplaneIcon","AlignBottomIcon","AlignHorizontalCenterIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDownIcon","ArrowIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpIcon","AtIcon","AttachmentIcon","AvatarFilledIcon","AvatarIcon","BlendModeIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BorderColorIcon","BottomBorderIcon","BulletListIcon","CalibrateIcon","CaptureAddIcon","CaretDownIcon","CaretIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ChevronListIcon","ClockIcon","CloudyBorderIcon","CollapseIcon","ColorPaletteIcon","ColorSwatchIcon","CommentIcon","CommentInSidebarIcon","CommentOnPageIcon","CompareDocumentsIcon","CopyIcon","CopyPageIcon","CropIcon","CustomizeIcon","CutIcon","DateModifiedIcon","DatePlusIcon","DebugIcon","DocumentArrowDownCircleIcon","DocumentArrowDownIcon","DocumentArrowRightIcon","DocumentFilledIcon","DocumentLockIcon","DocumentPdfIcon","DownloadIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","DuplicateIcon","EditAnnotationsIcon","EditContentIcon","EditDocumentIcon","EditIcon","EditThumbnailsIcon","EllipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","EndCapArrowFilledIcon","EndCapArrowIcon","EndCapChevronFilledIcon","EndCapChevronIcon","EndCapCircleIcon","EndCapDiamondIcon","EndCapNoneIcon","EndCapSlantedIcon","EndCapSquareIcon","EndCapStraightIcon","EraserIcon","ErrorAltCircleFilledIcon","ErrorAltIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","ExpandVerticalIcon","FillColorIcon","FilterIcon","FitToHeightIcon","FivePagesHorizontalFilledIcon","FivePagesVerticalFilledIcon","FolderAddIcon","FolderIcon","FontListIcon","FontSizeIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormPageIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FormTwoRadioButtonsIcon","FourPagesGridFilledIcon","FourPagesHorizontalFilledIcon","FourPagesStackedFilledIcon","FourPagesVerticalFilledIcon","GroupIcon","HamburgerMenuIcon","HandIcon","HeartIcon","HideIcon","HideRevealIcon","HighlightTextIcon","HomeIcon","HorizontalScollIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","InitialsIcon","InnerHorizontalBorderIcon","InnerVerticalBorderIcon","InsertIcon","ItalicIcon","LayerBottomIcon","LayerDownIcon","LayerTopIcon","LayerUpIcon","LayersIcon","LeftBindingIcon","LeftBorderIcon","LineCapsIcon","LineIcon","LineSpacingIcon","LineStyleCloudyIcon","LineStyleDashedDoubleDashIcon","LineStyleDashedDoubleGapIcon","LineStyleDashedQuadrupleDashIcon","LineStyleDashedSingleGapIcon","LineStyleIcon","LineStyleSolidIcon","LineWidthIcon","LinkIcon","LockFilledIcon","LockIcon","MagicIcon","MagicPenIcon","MailIcon","MarkupIcon","MarqueeZoomIcon","MeasureIcon","MergeIcon","MessageCloudIcon","MinusIcon","MoonIcon","MoreCircleIcon","MoreIcon","MoreVerticalIcon","MoveAllDirectionsIcon","MoveLeftIcon","MoveLeftRightIcon","MoveRightIcon","MultiplePagesIcon","NonEditableIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OcrIcon","OpacityIcon","PageAddIcon","PageCurlIcon","PageDuplicateIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLandscapeIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageMoveLeftIcon","PageMoveRightIcon","PageNumberCircleIcon","PageNumberIcon","PagePortraitIcon","PageRemoveIcon","PageVerticalScrollIcon","PagesInsertAltIcon","PagesInsertIcon","PagesNewFromSelectionAltIcon","PagesNewFromSelectionIcon","PagesSelectAllIcon","PagesSelectNoneIcon","PasteBoardIcon","PastePageIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PinDropFilledIcon","PinDropIcon","PipetteIcon","PlayIcon","PlusCircleFilledIcon","PlusCircleIcon","PlusIcon","PointerIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","PrecisionIcon","PrintIcon","PrivateModeIcon","PushPinIcon","QuestionmarkCircleIcon","ReaderViewIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedactIcon","RedactRectangleIcon","RedactTextHighlighterIcon","RedactionTextRepeatingIcon","RedactionTextSingleIcon","RedoAllIcon","RedoIcon","RegexIcon","ReplaceIcon","RightBindingIcon","RightBorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RotateObjectClockwiseIcon","RotateObjectCounterClockwiseIcon","RulerIcon","ScaleIcon","SearchCircleIcon","SearchIcon","SearchSelectionIcon","SelectAllIcon","SelectionToolIcon","SettingsIcon","ShapesIcon","ShareAltIcon","ShareIcon","ShieldAddIcon","ShieldCheckmarkIcon","ShieldWarningIcon","ShieldXIcon","ShowIcon","SidebarIcon","SignOutIcon","SignatureDigitalIcon","SignatureIcon","SinglePageFilledIcon","SoundIcon","SquigglyTextIcon","StampAddIcon","StampIcon","StarFilledIcon","StarIcon","StartCapArrowFilledIcon","StartCapArrowIcon","StartCapChevronFilledIcon","StartCapChevronIcon","StartCapCircleIcon","StartCapDiamondIcon","StartCapNoneIcon","StartCapSlantedIcon","StartCapSquareIcon","StartCapStraightIcon","StrikeoutTextIcon","StyleFilledIcon","StyleIcon","StylusFilledIcon","StylusIcon","SunIcon","TableCellIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextColorIcon","TextIcon","TextPropertiesHideIcon","TextPropertiesShowIcon","TextSerifIcon","TextSmallerIcon","ThreePagesHorizontalFilledIcon","ThreePagesStackedFilledIcon","ThreePagesVerticalFilledIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TopBorderIcon","TrashIcon","TwoPagesHorizontalFilledIcon","TwoPagesVerticalFilledIcon","TypeTextIcon","UnderlineIcon","UnderlineTextIcon","UndoAllIcon","UndoIcon","UndoRedoIcon","UngroupIcon","UnlockIcon","UploadIcon","UserIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WidgetIcon","WorkflowIcon","XCircleFilledIcon","XCircleIcon","XIcon","ZoomInIcon","ZoomOutIcon"],"36":["ArrowRight","Check","Circle","Cross","Help","Inset","Key","NewParagraphAlt","NewParagraph","Note","PointerRight","SpeechBubble","Star"]};var p={version:"3.3.0"};var u=`
 # Baseline UI MCP Server Guidelines
 
 This MCP server provides AI assistants with structured access to Baseline UI's comprehensive component documentation, icon library, theming resources, and design guidelines.
@@ -37643,7 +37802,7 @@ import { ComponentName } from "@baseline-ui/core";
 `,h=`
 Generate a live demo URL for a Baseline UI story. Use story IDs from the component info tool to view interactive examples. The response will be a string containing the URL. You can use this URL to understand the structure of the component and how to customize it.
 `,b=`
-Get the Figma URL for a given component. The response will be a string containing the URL. You can use this URL to understand the structure of the component and how it looks. The actual component's HTML structure might be slightly different from the Figma design but the overall structure and design should be the same including the design tokens.
+Get the Figma URL for a given component. The response is the URL, or an error result when the component has no linked Figma design. You can use this URL to understand the structure of the component and how it looks. The actual component's HTML structure might be slightly different from the Figma design but the overall structure and design should be the same including the design tokens.
 `,s=`
 Best practices and guidelines for using Baseline UI components, styling, and design tokens. READ THIS BEFORE DOING ANYTHING.
 
@@ -37695,11 +37854,11 @@ Use this tool to:
 `;var C=`# List of available components in Baseline UI design system
 | Name | Description | Similar To |
 | --- | --- | --- |
-${Object.entries(t).toSorted(([n],[e])=>n.localeCompare(e)).map(([n,{description:e,similarTo:i}])=>`|${n}|${e}|${i?.join(", ")||""}|`).join(`
+${Object.entries(o).toSorted(([n],[e])=>n.localeCompare(e)).map(([n,{description:e,similarTo:t}])=>`|${n}|${e}|${t?.join(", ")||""}|`).join(`
 `)}
 `,T=Object.entries(c).map(([n,e])=>`${n}
 
-      ${e.map(i=>"- "+i).join(`
+      ${e.map(t=>"- "+t).join(`
 `)}`).join(`
-`);function z(){let n=new McpServer({name:"baseline-ui",version:p.version});return n.registerResource("list_components","resource://baseline-ui/list_components.md",{description:a,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:C}]})),n.registerResource("list_icons","resource://baseline-ui/list_icons.md",{description:r,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:T}]})),n.registerResource("getting_started","resource://baseline-ui/getting_started.md",{description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:o.gettingStarted}]})),n.registerResource("nutrient_web_viewer_theming","resource://baseline-ui/nutrient_web_viewer_theming.md",{description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:o.nutrientWebViewerTheming}]})),n.registerResource("theming","resource://baseline-ui/theming.md",{description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:o.theming}]})),n.registerResource("internationalization","resource://baseline-ui/internationalization.md",{description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:o.internationalization}]})),n.registerResource("styling","resource://baseline-ui/styling.md",{description:l,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:o.styling}]})),n.registerResource("guidelines","resource://baseline-ui/guidelines.md",{description:s,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:u}]})),n.registerTool("get_component_info",{title:"Get component info",description:m,inputSchema:{componentName:z$1.enum(Object.keys(t))}},({componentName:e})=>({content:[{type:"text",text:JSON.stringify(Object.fromEntries(Object.entries(t[e]).filter(([i])=>!["description","similarTo","figmaUrl"].includes(i))),null,2)}]})),n.registerTool("get_story_url",{title:"Get story demo URL",description:h,inputSchema:{storyId:z$1.string()}},({storyId:e})=>({content:[{type:"text",text:`https://nutrient.io/baseline-ui/iframe.html?id=${e}`}]})),n.registerTool("get_figma_url",{title:"Get Figma URL",description:b,inputSchema:{componentName:z$1.enum(Object.keys(t))}},({componentName:e})=>({content:[{type:"text",text:t[e].figmaUrl}]})),n.registerTool("list_available_resources",{title:"List Available Resources",description:g,inputSchema:{}},()=>({content:[{type:"text",text:JSON.stringify([{name:"list_components",uri:"resource://baseline-ui/list_components.md",description:a,mimeType:"text/markdown"},{name:"list_icons",uri:"resource://baseline-ui/list_icons.md",description:r,mimeType:"text/markdown"},{name:"getting_started",uri:"resource://baseline-ui/getting_started.md",description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},{name:"nutrient_web_viewer_theming",uri:"resource://baseline-ui/nutrient_web_viewer_theming.md",description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},{name:"theming",uri:"resource://baseline-ui/theming.md",description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},{name:"internationalization",uri:"resource://baseline-ui/internationalization.md",description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},{name:"styling",uri:"resource://baseline-ui/styling.md",description:l,mimeType:"text/markdown"},{name:"guidelines",uri:"resource://baseline-ui/guidelines.md",description:s,mimeType:"text/markdown"}],null,2)}]})),n}
+`);function z(){let n=new McpServer({name:"baseline-ui",version:p.version});return n.registerResource("list_components","resource://baseline-ui/list_components.md",{description:a,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:C}]})),n.registerResource("list_icons","resource://baseline-ui/list_icons.md",{description:r,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:T}]})),n.registerResource("getting_started","resource://baseline-ui/getting_started.md",{description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.gettingStarted}]})),n.registerResource("nutrient_web_viewer_theming","resource://baseline-ui/nutrient_web_viewer_theming.md",{description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.nutrientWebViewerTheming}]})),n.registerResource("theming","resource://baseline-ui/theming.md",{description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.theming}]})),n.registerResource("internationalization","resource://baseline-ui/internationalization.md",{description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.internationalization}]})),n.registerResource("styling","resource://baseline-ui/styling.md",{description:l,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.styling}]})),n.registerResource("guidelines","resource://baseline-ui/guidelines.md",{description:s,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:u}]})),n.registerTool("get_component_info",{title:"Get component info",description:m,inputSchema:{componentName:z$1.enum(Object.keys(o))}},({componentName:e})=>({content:[{type:"text",text:JSON.stringify(Object.fromEntries(Object.entries(o[e]).filter(([t])=>!["description","similarTo","figmaUrl"].includes(t))),null,2)}]})),n.registerTool("get_story_url",{title:"Get story demo URL",description:h,inputSchema:{storyId:z$1.string()}},({storyId:e})=>({content:[{type:"text",text:`https://nutrient.io/baseline-ui/iframe.html?id=${e}`}]})),n.registerTool("get_figma_url",{title:"Get Figma URL",description:b,inputSchema:{componentName:z$1.enum(Object.keys(o))}},({componentName:e})=>{let{figmaUrl:t}=o[e];return t?{content:[{type:"text",text:t}]}:{isError:true,content:[{type:"text",text:`No Figma URL is available for ${e}.`}]}}),n.registerTool("list_available_resources",{title:"List Available Resources",description:g,inputSchema:{}},()=>({content:[{type:"text",text:JSON.stringify([{name:"list_components",uri:"resource://baseline-ui/list_components.md",description:a,mimeType:"text/markdown"},{name:"list_icons",uri:"resource://baseline-ui/list_icons.md",description:r,mimeType:"text/markdown"},{name:"getting_started",uri:"resource://baseline-ui/getting_started.md",description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},{name:"nutrient_web_viewer_theming",uri:"resource://baseline-ui/nutrient_web_viewer_theming.md",description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},{name:"theming",uri:"resource://baseline-ui/theming.md",description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},{name:"internationalization",uri:"resource://baseline-ui/internationalization.md",description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},{name:"styling",uri:"resource://baseline-ui/styling.md",description:l,mimeType:"text/markdown"},{name:"guidelines",uri:"resource://baseline-ui/guidelines.md",description:s,mimeType:"text/markdown"}],null,2)}]})),n}
 export{z as a};