@baseline-ui/mcp 0.62.0 → 0.63.0

package/dist/index.js

@@ -6696,7 +6696,7 @@ export const DrawerWithActionExample: React.FC<{
  Drawer Content
  </Drawer>
  );
-};`},similarTo:[],figmaUrl:null},Editor:{id:"core-miscellaneous-editor",breadcrumb:"Core/Miscellaneous/Editor",importStatement:'import { ActionButton, Box, Editor, EditorAutoFocusOnMount, NumberInput, 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\n```jsx\nimport { Editor } from "../../utils";\n\nfunction MyComponent() {\n return <Editor />;\n}\n```\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\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.\nIn the right example, the `isInline` prop is used to set the editor to be inline.\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\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. This allows you to control the value of the editor from the parent component.\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 `mentionableUsers` prop. This prop should be an array of objects with `id` and `name` properties. The `id` should be unique for each user and the `name` should be the name of the user.\nThe mentions feature only works when `enableRichText` is set to `true`.\n\nYou can add custom buttons to the footer by using the `footerButtons` prop. This prop should be an array of objects with `aria-label`, `icon` and `onPress` properties.\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| `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\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-PlainEditorEditingArea` | Plain text textarea element |',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.\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 {
 /**
  * The unique identifier for the block. This is used to identify the block in
  * the DOM and in the block map. It is added as a data attribute
@@ -6731,11 +6731,17 @@ onSave?: (value: string) => void
  */
 onCancel?: () => void
 /**
- * The default value of the editor.
+ * The initial value of the editor (uncontrolled). The editor manages its
+ * own state afterwards; later changes to this prop are ignored.
  */
 defaultValue?: string
 /**
- * The value of the editor.
+ * The value of the editor (controlled). Provide together with \`onChange\`;
+ * later changes to this prop update the editor content.
+ * 
+ * Backwards compatibility: in rich text mode, \`value\` without \`onChange\`
+ * behaves like \`defaultValue\` (initial content only), matching the
+ * behavior of earlier versions.
  */
 value?: string
 /**
@@ -6880,29 +6886,47 @@ autoFocus?: boolean | "start" | "end"
  * @default false
  */
 saveOnEnter?: boolean
-}`,stories:{usage:[{id:"core-miscellaneous-editor--basic",name:"Basic",snippet:'const Basic = () => <Editor placeholder="Placeholder" aria-label="Editor" />;'},{id:"core-miscellaneous-editor--plain-text-controlled",name:"Plain Text Controlled",snippet:`const PlainTextControlled = () => {
+}`,stories:{usage:[{id:"core-miscellaneous-editor-rich-text--default",name:"Default",snippet:`const Default = () => <Editor
+    placeholder="Placeholder"
+    aria-label="Editor"
+    enableRichText
+    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>" />;`},{id:"core-miscellaneous-editor-rich-text--controlled",name:"Controlled",snippet:`const Controlled = () => {
     const [value, setValue] = React.useState(args.value);
 
     return (
         <Editor
             placeholder="Type something..."
             aria-label="Editor"
-            enableRichText={false}
-            spellCheck={false}
+            enableRichText
             value={value}
             onChange={(newValue) => {
               setValue(newValue);
             }} />
     );
-};`},{id:"core-miscellaneous-editor--plain-text-minimal",name:"Plain Text Minimal",snippet:`const PlainTextMinimal = () => <Box display="flex" gap="3xl" flexDirection="column">
+};`},{id:"core-miscellaneous-editor-rich-text--long-content",name:"Long Content",snippet:`const LongContent = () => <Editor
+    placeholder="Placeholder"
+    aria-label="Editor"
+    enableRichText
+    defaultValue={[
+      "<p>This is a rich editor with a lot of content to exercise scrolling and overflow.</p>",
+      "<p>It supports <b>bold</b>, <i>italic</i>, and <u>underline</u> formatting, as well as <a href='https://example.com'>links</a>.</p>",
+      "<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>",
+      "<p>Supercalifragilisticexpialidociousantidisestablishmentarianismpneumonoultramicroscopicsilicovolcanoconiosis</p>",
+      "<p><b>Bold</b> <i>italic</i> <u>underline</u> <b><i>bold italic</i></b> <b><u>bold underline</u></b> <i><u>italic underline</u></i> <b><i><u>all three</u></i></b>.</p>",
+      "<p>Paragraph five with some more plain text content.</p>",
+      "<p>Paragraph six with some more plain text content.</p>",
+      "<p>Paragraph seven with some more plain text content.</p>",
+      "<p>Paragraph eight with some more plain text content.</p>",
+      "<p>Paragraph nine, the last paragraph of this long document.</p>",
+    ].join("")} />;`},{id:"core-miscellaneous-editor-rich-text--with-placeholder",name:"With Placeholder",snippet:'const WithPlaceholder = () => <Editor placeholder="Type something..." aria-label="Editor" enableRichText />;'},{id:"core-miscellaneous-editor-rich-text--variants",name:"Variants",snippet:`const Variants = () => <Box display="flex" gap="3xl" flexDirection="column">
     <div style={{ width: 260 }}>
         <Editor
             placeholder="Type something..."
             aria-label="Editor"
-            enableRichText={false}
             variant="minimal"
             spellCheck={false}
-            defaultValue="This is a minimal editor"
+            enableRichText
+            defaultValue="This is a rich editor"
             isInline={false} />
     </div>
     <Separator />
@@ -6910,37 +6934,19 @@ saveOnEnter?: boolean
         <Editor
             placeholder="Type something..."
             aria-label="Editor"
-            enableRichText={false}
             variant="minimal"
             spellCheck={false}
-            defaultValue="This is a minimal editor" />
+            enableRichText
+            defaultValue="This is a rich editor" />
     </div>
-</Box>;`},{id:"core-miscellaneous-editor--plain-text-minimal-multiline",name:"Plain Text Minimal Multiline",snippet:`const PlainTextMinimalMultiline = () => <Editor
-    placeholder="Placeholder"
-    aria-label="Editor"
-    defaultValue="This is a minimal editor\\nwith multiple lines of text \\n\\nSome more text." />;`},{id:"core-miscellaneous-editor--plain-text-minimal-disabled",name:"Plain Text Minimal Disabled",snippet:'const PlainTextMinimalDisabled = () => <Editor placeholder="Placeholder" aria-label="Editor" isDisabled />;'},{id:"core-miscellaneous-editor--plain-text-minimal-save-disabled",name:"Plain Text Minimal Save Disabled",snippet:'const PlainTextMinimalSaveDisabled = () => <Editor placeholder="Placeholder" aria-label="Editor" isSaveDisabled />;'},{id:"core-miscellaneous-editor--plain-text-variants",name:"Plain Text Variants",snippet:'const PlainTextVariants = () => <Editor placeholder="Placeholder" aria-label="Editor" variant={undefined} />;'},{id:"core-miscellaneous-editor--plain-text-disabled",name:"Plain Text Disabled",snippet:'const PlainTextDisabled = () => <Editor placeholder="Placeholder" aria-label="Editor" isDisabled />;'},{id:"core-miscellaneous-editor--plain-text-auto-focus",name:"Plain Text Auto Focus",snippet:'const PlainTextAutoFocus = () => <EditorAutoFocusOnMount placeholder="Placeholder" aria-label="Editor" autoFocus />;'},{id:"core-miscellaneous-editor--rich-text",name:"Rich Text",snippet:`const RichText = () => <Editor
-    placeholder="Placeholder"
-    aria-label="Editor"
-    enableRichText
-    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>" />;`},{id:"core-miscellaneous-editor--rich-text-with-placeholder",name:"Rich Text With Placeholder",snippet:'const RichTextWithPlaceholder = () => <Editor placeholder="Type something..." aria-label="Editor" enableRichText />;'},{id:"core-miscellaneous-editor--rich-text-variants",name:"Rich Text Variants",snippet:`const RichTextVariants = () => <Editor
-    placeholder="Placeholder"
-    aria-label="Editor"
-    enableRichText
-    defaultValue="This is a rich editor" />;`},{id:"core-miscellaneous-editor--rich-text-disabled",name:"Rich Text Disabled",snippet:'const RichTextDisabled = () => <Editor placeholder="Placeholder" aria-label="Editor" isDisabled />;'},{id:"core-miscellaneous-editor--rich-text-save-disabled",name:"Rich Text Save Disabled",snippet:'const RichTextSaveDisabled = () => <Editor placeholder="Placeholder" aria-label="Editor" isSaveDisabled />;'},{id:"core-miscellaneous-editor--rich-text-auto-focus",name:"Rich Text Auto Focus",error:{name:"SyntaxError",message:`Expected render to be an arrow function or function expression
-  172 |
-  173 | export const RichTextAutoFocus: Story = {
-> 174 |   render: PlainTextAutoFocus.render,
-      |           ^^^^^^^^^^^^^^^^^^^^^^^^^
-  175 |   args: {
-  176 |     ...RichText.args,
-  177 |     autoFocus: true,`}},{id:"core-miscellaneous-editor--rich-text-mentions",name:"Rich Text Mentions",snippet:`const RichTextMentions = () => <Editor
+</Box>;`},{id:"core-miscellaneous-editor-rich-text--disabled",name:"Disabled",snippet:'const Disabled = () => <Editor placeholder="Placeholder" aria-label="Editor" isDisabled />;'},{id:"core-miscellaneous-editor-rich-text--save-disabled",name:"Save Disabled",snippet:'const SaveDisabled = () => <Editor placeholder="Placeholder" aria-label="Editor" isSaveDisabled />;'},{id:"core-miscellaneous-editor-rich-text--auto-focus",name:"Auto Focus",snippet:'const AutoFocus = () => <EditorAutoFocusOnMount placeholder="Placeholder" aria-label="Editor" autoFocus />;'},{id:"core-miscellaneous-editor-rich-text--mentions",name:"Mentions",snippet:`const Mentions = () => <Editor
     placeholder="Placeholder"
     aria-label="Editor"
     defaultValue="Mentioning <span data-user-id='john-doe'>John Doe</span>."
-    mentionableUsers={mentionableUsers} />;`},{id:"core-miscellaneous-editor--rich-text-mentions-max-suggestions",name:"Rich Text Mentions Max Suggestions",snippet:`const RichTextMentionsMaxSuggestions = () => <Editor
+    mentionableUsers={mentionableUsers} />;`},{id:"core-miscellaneous-editor-rich-text--mentions-max-suggestions",name:"Mentions Max Suggestions",snippet:`const MentionsMaxSuggestions = () => <Editor
     placeholder="Placeholder"
     aria-label="Editor"
-    maxMentionableUsersSuggestions={2} />;`},{id:"core-miscellaneous-editor--with-custom-footer-buttons",name:"With Custom Footer Buttons",snippet:`const WithCustomFooterButtons = () => <Editor
+    maxMentionableUsersSuggestions={2} />;`},{id:"core-miscellaneous-editor-rich-text--with-custom-footer-buttons",name:"With Custom Footer Buttons",snippet:`const WithCustomFooterButtons = () => <Editor
     placeholder="Placeholder"
     aria-label="Editor"
     footerButtons={[
@@ -6954,104 +6960,50 @@ saveOnEnter?: boolean
           },
         },
       },
-    ]} />;`},{id:"core-miscellaneous-editor--with-dynamic-caret-position",name:"With Dynamic Caret Position",snippet:`const WithDynamicCaretPosition = () => {
-    const editorHandleRef = React.useRef<EditorHandle>(null);
-
-    const [value, setValue] = React.useState(2);
-
-    return (
-        <>
-            <Box display="flex" gap="md" paddingBlockEnd="md">
-                <NumberInput
-                    label="Caret position"
-                    minValue={0}
-                    maxValue={args.value?.length ?? 0}
-                    value={value}
-                    onChange={setValue} />
-                <Box display="flex" alignItems="flex-end">
-                    <ActionButton
-                        label="Set caret"
-                        onPress={() => {
-                          editorHandleRef.current?.setCaretPosition(value);
-                        }} />
-                </Box>
-            </Box>
-            <Editor
-                editorHandle={editorHandleRef}
-                placeholder="Type something..."
-                aria-label="Editor"
-                enableRichText={false}
-                spellCheck={false}
-                value="This is a some text" />
-        </>
-    );
-};`},{id:"core-miscellaneous-editor--auto-focus-at-start",name:"Auto Focus At Start",snippet:`const AutoFocusAtStart = () => <Editor
-    placeholder="Placeholder"
-    aria-label="Editor"
-    autoFocus="start"
-    defaultValue="Caret will be at the start"
-    enableRichText={false} />;`},{id:"core-miscellaneous-editor--auto-focus-at-end",name:"Auto Focus At End",snippet:`const AutoFocusAtEnd = () => <Editor
-    placeholder="Placeholder"
-    aria-label="Editor"
-    autoFocus="end"
-    defaultValue="Caret will be at the end"
-    enableRichText={false} />;`},{id:"core-miscellaneous-editor--rich-text-auto-focus-at-end",name:"Rich Text Auto Focus At End",snippet:`const RichTextAutoFocusAtEnd = () => <Editor
+    ]} />;`},{id:"core-miscellaneous-editor-rich-text--auto-focus-at-end",name:"Auto Focus At End",snippet:`const AutoFocusAtEnd = () => <Editor
     placeholder="Placeholder"
     aria-label="Editor"
     autoFocus="end"
     defaultValue="Caret will be at the end"
-    enableRichText />;`},{id:"core-miscellaneous-editor--plain-text-with-cancel",name:"Plain Text With Cancel",snippet:`const PlainTextWithCancel = () => <Editor
+    enableRichText />;`},{id:"core-miscellaneous-editor-rich-text--with-cancel",name:"With Cancel",snippet:`const WithCancel = () => <Editor
     placeholder="Placeholder"
     aria-label="Editor"
     onCancel={() => {}}
-    defaultValue="Some text to cancel" />;`},{id:"core-miscellaneous-editor--rich-text-with-cancel",name:"Rich Text With Cancel",snippet:`const RichTextWithCancel = () => <Editor
-    placeholder="Placeholder"
-    aria-label="Editor"
-    onCancel={() => {}}
-    defaultValue="<p>Some text to cancel</p>" />;`},{id:"core-miscellaneous-editor--plain-text-clear-on-save",name:"Plain Text Clear On Save",snippet:`const PlainTextClearOnSave = () => <Editor
+    defaultValue="<p>Some text to cancel</p>" />;`},{id:"core-miscellaneous-editor-rich-text--clear-on-save",name:"Clear On Save",snippet:`const ClearOnSave = () => <Editor
     placeholder="Placeholder"
     aria-label="Editor"
     clearOnSave
-    defaultValue="Text that clears on save" />;`},{id:"core-miscellaneous-editor--plain-text-clear-on-cancel",name:"Plain Text Clear On Cancel",snippet:`const PlainTextClearOnCancel = () => <Editor
+    defaultValue="<p>Text that clears on save</p>" />;`},{id:"core-miscellaneous-editor-rich-text--clear-on-cancel",name:"Clear On Cancel",snippet:`const ClearOnCancel = () => <Editor
     placeholder="Placeholder"
     aria-label="Editor"
     clearOnCancel
     onCancel={() => {}}
-    defaultValue="Text that clears on cancel" />;`},{id:"core-miscellaneous-editor--rich-text-clear-on-save",name:"Rich Text Clear On Save",snippet:`const RichTextClearOnSave = () => <Editor
-    placeholder="Placeholder"
-    aria-label="Editor"
-    clearOnSave
-    defaultValue="<p>Text that clears on save</p>" />;`},{id:"core-miscellaneous-editor--rich-text-clear-on-cancel",name:"Rich Text Clear On Cancel",snippet:`const RichTextClearOnCancel = () => <Editor
-    placeholder="Placeholder"
-    aria-label="Editor"
-    clearOnCancel
-    onCancel={() => {}}
-    defaultValue="<p>Text that clears on cancel</p>" />;`},{id:"core-miscellaneous-editor--plain-text-save-on-enter",name:"Plain Text Save On Enter",snippet:`const PlainTextSaveOnEnter = () => <Editor
-    placeholder="Placeholder"
-    aria-label="Editor"
-    saveOnEnter
-    defaultValue="Press Enter to save" />;`},{id:"core-miscellaneous-editor--rich-text-save-on-enter",name:"Rich Text Save On Enter",snippet:`const RichTextSaveOnEnter = () => <Editor
+    defaultValue="<p>Text that clears on cancel</p>" />;`},{id:"core-miscellaneous-editor-rich-text--save-on-enter",name:"Save On Enter",snippet:`const SaveOnEnter = () => <Editor
     placeholder="Placeholder"
     aria-label="Editor"
     saveOnEnter
-    defaultValue="<p>Press Enter to save</p>" />;`},{id:"core-miscellaneous-editor--plain-text-not-inline",name:"Plain Text Not Inline",snippet:`const PlainTextNotInline = () => <Editor
+    defaultValue="<p>Press Enter to save</p>" />;`},{id:"core-miscellaneous-editor-rich-text--not-inline",name:"Not Inline",snippet:`const NotInline = () => <Editor
     placeholder="Placeholder"
     aria-label="Editor"
     isInline={false}
-    defaultValue="Non-inline plain text editor" />;`},{id:"core-miscellaneous-editor--rich-text-not-inline",name:"Rich Text Not Inline",snippet:`const RichTextNotInline = () => <Editor
-    placeholder="Placeholder"
-    aria-label="Editor"
-    isInline={false}
-    defaultValue="<p>Non-inline rich text editor</p>" />;`},{id:"core-miscellaneous-editor--plain-text-default-save-disabled",name:"Plain Text Default Save Disabled",snippet:`const PlainTextDefaultSaveDisabled = () => <Editor
-    placeholder="Placeholder"
-    aria-label="Editor"
-    isSaveDisabled
-    defaultValue="Save is disabled" />;`}],implementation:`import React from "react";
+    defaultValue="<p>Non-inline rich text editor</p>" />;`}],implementation:`import { BoldIcon, ItalicIcon, UnderlineIcon } from "@baseline-ui/icons/16";
+import React from "react";
 
 import { ActionButton } from "../../ActionButton";
 import { Box } from "../../Box";
+import { ColorInput } from "../../ColorInput";
+import { Text } from "../../Text";
+import { ToggleIconButton } from "../../ToggleIconButton";
 import { Editor } from "../Editor";
-
+import {
+ EditorProvider,
+ useEditable,
+ useEditor,
+ useEditorContext,
+} from "../headless";
+
+import type { ColorPreset } from "../../ColorInput";
+import type { MarkName } from "../core/commands";
 import type { EditorHandle, EditorProps } from "../Editor.types";
 
 export const EditorWithSetCaretButton = ({
@@ -7106,6 +7058,309 @@ export const EditorAutoFocusOnMount: React.FC<EditorProps> = (args) => {
  );
 };
 
+export const EditorControlledRichText = ({
+ onChange,
+}: Pick<EditorProps, "onChange">) => {
+ const [value, setValue] = React.useState("<p>First</p>");
+
+ return (
+ <>
+ <button
+ onClick={() => {
+ setValue("<p>Updated <b>externally</b></p>");
+ }}
+ data-testid="set-value"
+ >
+ Set value
+ </button>
+ <Editor
+ enableRichText={true}
+ value={value}
+ onChange={(v) => {
+ setValue(v);
+ onChange?.(v);
+ }}
+ />
+ </>
+ );
+};
+
+export const EditorControlledRichTextRejectsEdits = ({
+ onChange,
+}: Pick<EditorProps, "onChange">) => (
+ <Editor enableRichText={true} value="<p>Locked</p>" onChange={onChange} />
+);
+
+/**
+ * Legacy usage: \`value\` WITHOUT \`onChange\` in rich text mode. Must behave
+ * like \`defaultValue\` \u2014 later \`value\` updates are ignored (backwards
+ * compatibility).
+ */
+export const EditorLegacyRichTextValue = () => {
+ const [value, setValue] = React.useState("<p>First</p>");
+
+ return (
+ <>
+ <button
+ onClick={() => {
+ setValue("<p>Replaced</p>");
+ }}
+ data-testid="set-value"
+ >
+ Set value
+ </button>
+ <Editor enableRichText={true} value={value} />
+ </>
+ );
+};
+
+/**
+ * Demonstrates the headless API: a fully custom editor built from \`useEditor\`
+ * + \`useEditable\` on a plain \`<div>\`, with a \`Box\`-laid-out toolbar of
+ * \`ActionButton\`s reading the shared handle via \`useEditorContext\`. Rendered as
+ * two independent instances to prove per-editor isolation (each
+ * \`EditorProvider\` scopes its own handle).
+ */
+const HeadlessMarkButton: React.FC<{
+ markName: MarkName;
+ label: string;
+ testId: string;
+}> = ({ markName, label, testId }) => {
+ const editor = useEditorContext();
+ const isActive = editor.isMarkActive(markName);
+
+ return (
+ <ActionButton
+ size="sm"
+ variant={isActive ? "primary" : "secondary"}
+ label={label}
+ data-testid={testId}
+ aria-pressed={isActive}
+ // Keep the selection in the editable so the toggle applies to it.
+ preventFocusOnPress={true}
+ onPress={() => {
+ editor.toggleMark(markName);
+ editor.focus();
+ }}
+ />
+ );
+};
+
+const HEADLESS_MARK_ITEMS = [
+ { id: "bold", label: "Bold", icon: BoldIcon },
+ { id: "italic", label: "Italic", icon: ItalicIcon },
+ { id: "underline", label: "Underline", icon: UnderlineIcon },
+] as const;
+
+const HEADLESS_TEXT_COLOR = "#ac0000";
+const HEADLESS_BACKGROUND_COLOR = "#ffff00";
+
+const HeadlessMarkButtons: React.FC<{ idPrefix: string }> = ({ idPrefix }) => {
+ const editor = useEditorContext();
+
+ return (
+ <Box display="flex" gap="xs">
+ {HEADLESS_MARK_ITEMS.map(({ id, label, icon }) => (
+ <ToggleIconButton
+ key={id}
+ size="sm"
+ variant="toolbar"
+ icon={icon}
+ aria-label={label}
+ data-testid={\`\${idPrefix}-\${id}\`}
+ isSelected={editor.isMarkActive(id)}
+ preventFocusOnPress={true}
+ onChange={() => {
+ editor.toggleMark(id);
+ editor.focus();
+ }}
+ />
+ ))}
+ </Box>
+ );
+};
+
+const HEADLESS_TEXT_COLOR_PRESETS: ColorPreset[] = [
+ { label: "Crimson", color: HEADLESS_TEXT_COLOR },
+ { label: "Ink", color: "#1a1a2e" },
+ { label: "Ocean", color: "#0050c8" },
+];
+
+const HEADLESS_BACKGROUND_COLOR_PRESETS: ColorPreset[] = [
+ { label: "Sunshine", color: HEADLESS_BACKGROUND_COLOR },
+ { label: "Mint", color: "#c8f5d2" },
+];
+
+/**
+ * A presets-only \`ColorInput\` wired into the headless editor. Mirrors the
+ * built-in EditorToolbar's color handling: capture the selection before the
+ * popover steals focus, then restore it (Firefox collapses the contenteditable
+ * selection on refocus) before applying the mark. Reading the value back from
+ * \`selectionState.marks\` keeps the trigger swatch in sync with the caret.
+ */
+const HeadlessColorInput: React.FC<{
+ idPrefix: string;
+ colorKey: "color" | "backgroundColor";
+ label: string;
+ presets: ColorPreset[];
+}> = ({ idPrefix, colorKey, label, presets }) => {
+ const editor = useEditorContext();
+ const color =
+ colorKey === "color"
+ ? editor.selectionState.marks.color
+ : editor.selectionState.marks.backgroundColor;
+ const savedRangeRef = React.useRef<typeof editor.selectionState.range>(null);
+
+ return (
+ <Box data-testid={\`\${idPrefix}-\${colorKey}\`}>
+ <ColorInput
+ aria-label={label}
+ presets={presets}
+ includePicker={false}
+ allowRemoval={true}
+ placement="bottom start"
+ value={color ?? null}
+ onTriggerPress={() => {
+ savedRangeRef.current = editor.selectionState.range;
+ }}
+ onChange={(next) => {
+ // Defer so the popover finishes closing, then restore the captured
+ // selection before applying \u2014 focus alone is not enough on Firefox.
+ setTimeout(() => {
+ if (savedRangeRef.current) {
+ editor.core.select(savedRangeRef.current);
+ }
+ editor.setMark(colorKey, next ? next.toString("rgba") : undefined);
+ }, 0);
+ }}
+ />
+ </Box>
+ );
+};
+
+const HeadlessCustomEditorInstance: React.FC<{
+ idPrefix: string;
+ label: string;
+ defaultValue?: string;
+}> = ({ idPrefix, label, defaultValue }) => {
+ const editor = useEditor({ defaultValue });
+ const { editableProps } = useEditable(editor);
+
+ return (
+ <EditorProvider editor={editor}>
+ <Box
+ display="flex"
+ flexDirection="column"
+ gap="md"
+ padding="lg"
+ borderRadius="lg"
+ backgroundColor="background.primary.subtle"
+ style={{ width: 320 }}
+ >
+ <Text type="helper" size="sm" color="text.secondary">
+ {label}
+ </Text>
+ <Box display="flex" gap="xs" alignItems="center">
+ <HeadlessMarkButtons idPrefix={idPrefix} />
+ <HeadlessColorInput
+ idPrefix={idPrefix}
+ colorKey="color"
+ label="Text color"
+ presets={HEADLESS_TEXT_COLOR_PRESETS}
+ />
+ <HeadlessColorInput
+ idPrefix={idPrefix}
+ colorKey="backgroundColor"
+ label="Background color"
+ presets={HEADLESS_BACKGROUND_COLOR_PRESETS}
+ />
+ </Box>
+ <Box
+ {...editableProps}
+ data-testid={\`\${idPrefix}-editable\`}
+ aria-label={\`\${idPrefix} editor\`}
+ padding="lg"
+ borderRadius="lg"
+ backgroundColor="background.secondary.subtle"
+ color="text.primary"
+ typography="body.md.regular"
+ // \`white-space: pre-wrap\` keeps significant whitespace (leading,
+ // trailing, and runs of spaces) visible in the contenteditable \u2014 the
+ // built-in <Editor> sets the same on its editing surface. Without it,
+ // a trailing space collapses whenever the model re-renders (e.g. while
+ // a color mark is active), so the space appears not to be inserted.
+ style={{ minHeight: 100, whiteSpace: "pre-wrap" }}
+ />
+ </Box>
+ </EditorProvider>
+ );
+};
+
+export const HeadlessCustomEditor: React.FC = () => {
+ return (
+ <Box display="flex" gap="2xl" flexDirection="column">
+ <HeadlessCustomEditorInstance
+ idPrefix="headless-a"
+ label="Unformatted rich text"
+ defaultValue="<p>Unformatted rich text preview with no active marks.</p>"
+ />
+ <HeadlessCustomEditorInstance
+ idPrefix="headless-b"
+ label="Formatted rich text"
+ defaultValue={\`<p><b>Bold text</b>, <i>italic text</i>, <u>underlined text</u>, and <span style="color:\${HEADLESS_TEXT_COLOR};background-color:\${HEADLESS_BACKGROUND_COLOR}">colored text</span> are visible here.</p>\`}
+ />
+ </Box>
+ );
+};
+
+/**
+ * Headless editor with the built-in formatting/history shortcuts disabled
+ * (\`keyboardShortcuts: false\`). Ctrl/Cmd+B should NOT toggle bold, but the
+ * custom toolbar button still works.
+ */
+export const HeadlessEditorNoShortcuts: React.FC = () => {
+ const editor = useEditor({
+ defaultValue: "<p>No shortcuts</p>",
+ keyboardShortcuts: false,
+ });
+ const { editableProps } = useEditable(editor);
+
+ return (
+ <EditorProvider editor={editor}>
+ <Box
+ display="flex"
+ flexDirection="column"
+ gap="md"
+ padding="lg"
+ borderRadius="lg"
+ backgroundColor="background.primary.subtle"
+ borderWidth={1}
+ borderStyle="solid"
+ borderColor="border.medium"
+ style={{ width: 320 }}
+ >
+ <HeadlessMarkButton
+ markName="bold"
+ label="Bold"
+ testId="noshortcut-bold"
+ />
+ <Box
+ {...editableProps}
+ data-testid="noshortcut-editable"
+ aria-label="no shortcut editor"
+ padding="md"
+ borderRadius="md"
+ backgroundColor="background.secondary.subtle"
+ borderWidth={1}
+ borderStyle="solid"
+ borderColor="border.medium"
+ style={{ minHeight: 72 }}
+ />
+ </Box>
+ </EditorProvider>
+ );
+};
+
 export const EditorWithAutoFocusAndCaretAtEnd = ({
  initialText,
  onChange,
@@ -14869,7 +15124,7 @@ children: React.ReactNode
         { placement: "right top" },
       ],
     }}
-    defaultProps={args as PopoverArrowVariantProps}
+    defaultProps={args}
   />
 );`},{id:"core-overlays-popover--with-custom-target",name:"With Custom Target",snippet:`const WithCustomTarget = (args) => (
   <PopoverCustomTargetExample
@@ -32282,7 +32537,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:"0.62.0"};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:"0.63.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.