@baseline-ui/mcp 3.2.1 → 3.4.0

package/dist/{chunk-RKGE2VKK.js → chunk-KU5KEP2T.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}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\`.
@@ -817,6 +817,22 @@ You can add sublabels to the header of the \`AccordionItem\` component using the
 </Accordion>
 \`\`\`
 
+By default, the content of a collapsed \`AccordionItem\` is unmounted. Set \`shouldForceMount\` on an item to keep its content mounted while collapsed, so its state (for example, typed input) is preserved. Once the collapse animation completes, the content is hidden from view and from assistive technology.
+
+Keeping content mounted has costs:
+
+* The content renders even if the item is never expanded.
+* The content of an initially collapsed item mounts hidden, so anything that measures its own layout on mount sees zero sizes until the item is first expanded.
+* Changing \`shouldForceMount\` at runtime remounts the content, so set it up front.
+
+\`\`\`jsx
+<Accordion>
+ <AccordionItem title="Notes" value="notes" shouldForceMount>
+ <TextInput label="Notes" />
+ </AccordionItem>
+</Accordion>
+\`\`\`
+
 * Fully accessible and exposed to assistive technology using ARIA attributes
 * Can be navigated using the keyboard
 
@@ -901,6 +917,8 @@ import React from "react";
 import { Accordion } from "../Accordion";
 import { AccordionItem } from "../AccordionItem";
 
+import type { Key } from "react";
+
 const contentStyle = {
  padding: 10,
  color: themeVars.color.text.primary,
@@ -982,6 +1000,74 @@ export const AccordionWithDisabledItemsExample: React.FC<
  Omit<React.ComponentProps<typeof AccordionExample>, "disabledKeys">
 > = (props) => {
  return <AccordionExample {...props} disabledKeys={new Set(["item-1"])} />;
+};
+
+export const AccordionWithLastItemDisabledExample: React.FC<
+ Omit<React.ComponentProps<typeof AccordionExample>, "disabledKeys">
+> = (props) => {
+ return <AccordionExample {...props} disabledKeys={new Set(["item-3"])} />;
+};
+
+export const AccordionWithNumericKeysExample: React.FC = () => {
+ return (
+ <Accordion disabledKeys={new Set([2])}>
+ {[1, 2, 3].map((n) => (
+ <AccordionItem
+ key={n}
+ title={\`Accordion Item \${n}\`}
+ value={n}
+ style={contentStyle}
+ >
+ lorem ipsum dolor sit amet consectetur adipisicing elit
+ </AccordionItem>
+ ))}
+ </Accordion>
+ );
+};
+
+export const AccordionForceMountExample: React.FC<
+ Omit<React.ComponentProps<typeof Accordion>, "children"> & {
+ shouldForceMount?: boolean;
+ /** Playwright CT cannot pass a \`Set\` prop, so specs pass a key instead. */
+ defaultExpandedKey?: string;
+ }
+> = ({ shouldForceMount, defaultExpandedKey, ...props }) => {
+ return (
+ <Accordion
+ {...props}
+ {...(defaultExpandedKey && {
+ defaultExpandedKeys: new Set([defaultExpandedKey]),
+ })}
+ >
+ {Array.from({ length: 2 }).map((_, i) => (
+ <AccordionItem
+ key={i}
+ title={\`Accordion Item \${i + 1}\`}
+ value={\`item-\${i + 1}\`}
+ style={contentStyle}
+ shouldForceMount={shouldForceMount}
+ >
+ <input aria-label={\`Item \${i + 1} input\`} />
+ </AccordionItem>
+ ))}
+ </Accordion>
+ );
+};
+
+export const ControlledAccordionExample: React.FC<{
+ onChange?: (keys: Set<Key>) => void;
+}> = ({ onChange }) => {
+ const [keys, setKeys] = React.useState<Set<Key>>(new Set());
+
+ return (
+ <AccordionExample
+ expandedKeys={keys}
+ onChange={(k) => {
+ setKeys(k);
+ onChange?.(k);
+ }}
+ />
+ );
 };`},similarTo:[],figmaUrl:null},ActionButton:{id:"core-buttons-actionbutton",breadcrumb:"Core/Buttons/ActionButton",importStatement:'import { ActionButton, Menu, VariantViewer } from "@baseline-ui/core";',description:"`ActionButton` is a labeled button that triggers an action when activated by mouse, touch, or keyboard. Use it for primary user actions such as submitting a form, confirming a choice, or invoking a command.",documentation:'`ActionButton` is a labeled button that triggers an action when activated by mouse, touch, or keyboard. Use it for primary user actions such as submitting a form, confirming a choice, or invoking a command.\n\n* Mouse and touch event handling, and press state management\n* Keyboard focus management and cross browser normalization\n* Keyboard event support for Space and Enter keys\n\nYou can import the ActionButton component like so:\n\n```jsx\nimport { ActionButton } from "@baseline-ui/core";\n\nexport default function App() {\n return <ActionButton label="Click Me" />;\n}\n```\n\nIf you want to use a button that can be toggled on and off, you can use the `ToggleButton` component.\n\nThe button has six neutral variants: `primary`, `secondary`, `tertiary`, `popover`, `toolbar` and `ghost`. The default variant is `primary`. You can change the variant by passing the `variant` prop.\n\n```jsx\n<ActionButton label="Primary" />\n<ActionButton label="Secondary" variant="secondary" />\n<ActionButton label="Tertiary" variant="tertiary" />\n<ActionButton label={"Toolbar"} variant={"toolbar"} />\n<ActionButton label="Ghost" variant="ghost" />\n<ActionButton label="Popover" variant="popover" />\n```\n\n`success`, `warning` and `error` carry a support colour for actions whose outcome matters \u2014 confirming, acknowledging a risk, or deleting. Each comes in the same three emphasis levels as the neutral variants, so a support-coloured button can sit at whatever weight the surrounding layout calls for:\n\n* `{name}` \u2014 filled, for the primary action in its context\n* `{name}-secondary` \u2014 tinted fill, for a lower-emphasis action\n* `{name}-tertiary` \u2014 outline that fills with the support colour on hover and on keyboard focus\n\nWhen disabled, all three levels drop the support colour and render in the neutral disabled treatment.\n\n```jsx\n<ActionButton label="Success" variant="success" />\n<ActionButton label="Success" variant="success-secondary" />\n<ActionButton label="Success" variant="success-tertiary" />\n<ActionButton label="Warning" variant="warning" />\n<ActionButton label="Warning" variant="warning-secondary" />\n<ActionButton label="Warning" variant="warning-tertiary" />\n<ActionButton label="Error" variant="error" />\n<ActionButton label="Error" variant="error-secondary" />\n<ActionButton label="Error" variant="error-tertiary" />\n```\n\nActionButton supports three sizes: `sm` (default), `md`, and `lg`. You can change the size by passing the `size` prop.\n\n```jsx\n<ActionButton label="Small (default)" size="sm" />\n<ActionButton label="Medium" size="md" />\n<ActionButton label="Large" size="lg" />\n```\n\nYou can disable a button by passing the `isDisabled` prop. This will disable all mouse, touch, and keyboard interactions. The `-secondary` and `-tertiary` support variants are omitted below because they render identically to disabled `secondary` and `tertiary`.\n\n```jsx\n<ActionButton label="Primary" isDisabled />\n<ActionButton label="Secondary" variant="secondary" isDisabled />\n<ActionButton label="Tertiary" variant="tertiary" isDisabled />\n<ActionButton label="Ghost" variant="ghost" isDisabled />\n<ActionButton label="Toolbar" variant="toolbar" isDisabled />\n<ActionButton label="Popover" variant="popover" isDisabled />\n<ActionButton label="Success" variant="success" isDisabled />\n<ActionButton label="Warning" variant="warning" isDisabled />\n<ActionButton label="Error" variant="error" isDisabled />\n```\n\nYou can place an icon before or after the label by passing the `iconStart` or `iconEnd` props. Choose the icon entrypoint that matches your button size: `@baseline-ui/icons/16` for `sm`, `@baseline-ui/icons/20` for `md`, and `@baseline-ui/icons/24` for `lg`.\n\n```jsx\nimport { EllipseIcon } from "@baseline-ui/icons/16";\n\n<ActionButton label="Label" iconStart={EllipseIcon} />\n<ActionButton label="Label" iconEnd={EllipseIcon} />\n```\n\nYou can listen for events by passing the `onPress` prop. The `onPress` prop will fire when the button is activated by mouse, touch, or keyboard interactions.\n\n```jsx\n<ActionButton label="Click Me" onPress={() => alert("Hello World")} />\n```\n\n| Selector | Description |\n| -------------------- | -------------------------------------------------------------- |\n| \\[data-disabled] | Whether the button is disabled. |\n| \\[data-focused] | Whether the button is focused, either via a mouse or keyboard. |\n| \\[data-hovered] | Whether the button is currently hovered with a mouse. |\n| \\[data-focus-visible] | Whether the button is keyboard focused. |\n| \\[data-pressed] | Whether the button is currently pressed. |\n\n| Key | Function |\n| ------- | --------------------- |\n| `Space` | Activates the button. |\n| `Enter` | Activates the button. |',props:`interface ActionButtonProps {
 /**
  * The button's class name.
@@ -2419,7 +2505,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 +2545,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
@@ -2577,7 +2668,34 @@ playingLabel?: string
  * Message id: \`bui.useMedia.paused\`. Defaults to \`"Paused"\`.
  */
 pausedLabel?: string
-}`,stories:{usage:[{id:"core-media-audioplayer--basic",name:"Basic",snippet:'const Basic = () => <AudioPlayer sources={[{ url: "/sound.mp3", type: "audio/mpeg" }]} />;'},{id:"core-media-audioplayer--small",name:"Small",snippet:'const Small = () => <AudioPlayer sources={[{ url: "/sound.mp3", type: "audio/mpeg" }]} size="sm" />;'}],implementation:""},similarTo:[],figmaUrl:null},Avatar:{id:"core-content-avatar",breadcrumb:"Core/Content/Avatar",importStatement:'import { Avatar, VariantViewer } from "@baseline-ui/core";',description:"`Avatar` is a small visual representation of a user, showing either a profile image or initials derived from the user's name. Use it to identify people in lists, comments, mentions, or anywhere a user needs to be visually attributed.",documentation:`\`Avatar\` is a small visual representation of a user, showing either a profile image or initials derived from the user's name. Use it to identify people in lists, comments, mentions, or anywhere a user needs to be visually attributed.
+}`,stories:{usage:[{id:"core-media-audioplayer--basic",name:"Basic",snippet:'const Basic = () => <AudioPlayer sources={[{ url: "/sound.mp3", type: "audio/mpeg" }]} />;'},{id:"core-media-audioplayer--small",name:"Small",snippet:'const Small = () => <AudioPlayer sources={[{ url: "/sound.mp3", type: "audio/mpeg" }]} size="sm" />;'}],implementation:`import React from "react";
+
+import { ActionButton } from "../../ActionButton/ActionButton";
+import { AudioPlayer } from "../AudioPlayer";
+
+export function SwitchableSourcePlayer() {
+ const [track, setTrack] = React.useState(1);
+
+ return (
+ <>
+ <ActionButton
+ label="Next track"
+ onPress={() => {
+ setTrack(2);
+ }}
+ />
+ <AudioPlayer
+ aria-label="Player"
+ sources={[
+ {
+ url: track === 1 ? "/sound.mp3" : "/sound.mp3?track=2",
+ type: "audio/mpeg",
+ },
+ ]}
+ />
+ </>
+ );
+}`},similarTo:[],figmaUrl:null},Avatar:{id:"core-content-avatar",breadcrumb:"Core/Content/Avatar",importStatement:'import { Avatar, VariantViewer } from "@baseline-ui/core";',description:"`Avatar` is a small visual representation of a user, showing either a profile image or initials derived from the user's name. Use it to identify people in lists, comments, mentions, or anywhere a user needs to be visually attributed.",documentation:`\`Avatar\` is a small visual representation of a user, showing either a profile image or initials derived from the user's name. Use it to identify people in lists, comments, mentions, or anywhere a user needs to be visually attributed.
 
 \`\`\`jsx
 import { Avatar } from "../../utils";
@@ -3308,14 +3426,19 @@ export const CalendarExample: React.FC<
  Omit<CalendarProps, "defaultValue" | "value"> & {
  defaultValue?: string;
  value?: string;
+ externalLabel?: string;
  }
-> = ({ defaultValue, value, ...rest }) => {
+> = ({ defaultValue, value, externalLabel, ...rest }) => {
  return (
+ <>
+ {externalLabel ? <span id="external-label">{externalLabel}</span> : null}
  <Calendar
+ aria-labelledby={externalLabel ? "external-label" : undefined}
  {...rest}
  defaultValue={defaultValue ? parseDate(defaultValue) : undefined}
  value={value ? parseDate(value) : undefined}
  />
+ </>
  );
 };
 
@@ -3434,10 +3557,14 @@ export const RangeCalendarExample: React.FC<
  Omit<RangeCalendarProps, "defaultValue" | "value"> & {
  defaultValue?: { start: string; end: string };
  value?: { start: string; end: string };
+ externalLabel?: string;
  }
-> = ({ defaultValue, value, ...rest }) => {
+> = ({ defaultValue, value, externalLabel, ...rest }) => {
  return (
+ <>
+ {externalLabel ? <span id="external-label">{externalLabel}</span> : null}
  <RangeCalendar
+ aria-labelledby={externalLabel ? "external-label" : undefined}
  {...rest}
  defaultValue={
  defaultValue
@@ -3453,6 +3580,7 @@ export const RangeCalendarExample: React.FC<
  : undefined
  }
  />
+ </>
  );
 };`},similarTo:[],figmaUrl:null},RangeCalendar:{id:"core-forms-rangecalendar",breadcrumb:"Core/Forms/RangeCalendar",importStatement:'import { Box, I18nProvider, RangeCalendar, Select } from "@baseline-ui/core";',description:"`RangeCalendar` presents a monthly grid of dates from which the user can pick a contiguous start and end day. Use it when capturing a span of time, such as a trip, booking, or reporting period.",documentation:`\`RangeCalendar\` presents a monthly grid of dates from which the user can pick a contiguous start and end day. Use it when capturing a span of time, such as a trip, booking, or reporting period.
 
@@ -3806,14 +3934,19 @@ export const CalendarExample: React.FC<
  Omit<CalendarProps, "defaultValue" | "value"> & {
  defaultValue?: string;
  value?: string;
+ externalLabel?: string;
  }
-> = ({ defaultValue, value, ...rest }) => {
+> = ({ defaultValue, value, externalLabel, ...rest }) => {
  return (
+ <>
+ {externalLabel ? <span id="external-label">{externalLabel}</span> : null}
  <Calendar
+ aria-labelledby={externalLabel ? "external-label" : undefined}
  {...rest}
  defaultValue={defaultValue ? parseDate(defaultValue) : undefined}
  value={value ? parseDate(value) : undefined}
  />
+ </>
  );
 };
 
@@ -3932,10 +4065,14 @@ export const RangeCalendarExample: React.FC<
  Omit<RangeCalendarProps, "defaultValue" | "value"> & {
  defaultValue?: { start: string; end: string };
  value?: { start: string; end: string };
+ externalLabel?: string;
  }
-> = ({ defaultValue, value, ...rest }) => {
+> = ({ defaultValue, value, externalLabel, ...rest }) => {
  return (
+ <>
+ {externalLabel ? <span id="external-label">{externalLabel}</span> : null}
  <RangeCalendar
+ aria-labelledby={externalLabel ? "external-label" : undefined}
  {...rest}
  defaultValue={
  defaultValue
@@ -3951,6 +4088,7 @@ export const RangeCalendarExample: React.FC<
  : undefined
  }
  />
+ </>
  );
 };`},similarTo:[],figmaUrl:null},Checkbox:{id:"core-forms-checkbox",breadcrumb:"Core/Forms/Checkbox",importStatement:'import { Checkbox } from "@baseline-ui/core";',description:"`Checkbox` is a binary control that lets a user turn an individual option on or off, with support for an indeterminate third state. Use it for independent boolean choices in forms, settings, or when selecting any number of items from a list.",documentation:'`Checkbox` is a binary control that lets a user turn an individual option on or off, with support for an indeterminate third state. Use it for independent boolean choices in forms, settings, or when selecting any number of items from a list.\n\n* Built on [React Aria Checkbox](https://react-spectrum.adobe.com/react-aria/Checkbox.html)\n* Full support for form autofill\n* Keyboard focus management and cross browser normalization\n* Labeling support for assistive technology via aria-\\* props\n* Indeterminate state support\n\n```jsx\nimport { Checkbox } from "@baseline-ui/core";\n\n<Checkbox label="Label" onChange={console.log} />;\n```\n\nThe `defaultSelected` prop allows the checkbox to be uncontrolled. This is useful when the checkbox is not part of a group and the checked state is managed by the checkbox itself.\n\n```jsx\n<Checkbox label="Label" defaultSelected onChange={console.log} />\n```\n\nThe `isSelected` prop allows the checkbox to be controlled. This is useful when the checkbox is part of a group and the checked state is managed by a parent component.\n\n```jsx\n<Checkbox label="Label" isSelected onChange={console.log} />\n```\n\nThe `isIndeterminate` prop allows the checkbox to be in an indeterminate state. This is useful when the checkbox is part of a group and some, but not all, of the checkboxes are checked.\n\n```jsx\n<Checkbox label="Label" isIndeterminate onChange={console.log} />\n```\n\nThe `isReadOnly` prop allows the checkbox to be readonly. This mode is useful when you want the checkbox to be focusable, but not editable.\n\n```jsx\n<Checkbox label="Label" isReadOnly isSelected onChange={console.log} />\n```\n\nThe `isDisabled` prop allows the checkbox to be disabled.\n\n```jsx\n<Checkbox label="Label" isDisabled onChange={console.log} />\n```\n\nThe `name` and `value` props allow the checkbox to be used in an HTML form.\n\n```jsx\n<Checkbox label="Label" name="name" value="value" onChange={console.log} />\n```\n\nThe `labelPosition` prop controls whether the label appears before or after the checkbox.\n\n```jsx\n<Checkbox label="Label" labelPosition="start" onChange={console.log} />\n```\n\nThe `isInvalid` prop marks the checkbox as having a validation error.\n\n```jsx\n<Checkbox label="Label" isInvalid onChange={console.log} />\n```\n\nThe `onChange` callback receives a `boolean` indicating the new checked state.\n\n```jsx\n<Checkbox\n label="Label"\n onChange={(isSelected) => {\n console.log("Checked:", isSelected);\n }}\n/>\n```\n\nWhen `isIndeterminate` is `true`, the checkbox displays a minus icon regardless of the `isSelected` state. Clicking an indeterminate checkbox will call `onChange` with `true`.\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| \\[data-selected] | Whether the component is selected. |\n| \\[data-readonly] | Whether the component is read-only. |\n| \\[data-pressed] | Whether the component is currently pressed. |\n| \\[data-indeterminate] | Whether the component is in an indeterminate state. |\n| \\[data-invalid] | Whether the component has a validation error. |\n\n| Key | Function |\n| ------- | ------------------- |\n| `Space` | Toggle the checkbox |',props:`interface CheckboxProps {
 /**
@@ -4291,7 +4429,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 +4437,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 +4543,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
@@ -4760,7 +4914,45 @@ labelPosition?: any
       label: item.label,
     }))}
     aria-label="Color Swatch Picker"
-    isDisabled />;`}],implementation:""},similarTo:[],figmaUrl:null},ComboBox:{id:"core-forms-combobox",breadcrumb:"Core/Forms/ComboBox",importStatement:'import { ActionButton, ComboBox, VariantViewer } from "@baseline-ui/core";',description:"`ComboBox` pairs a text input with a dropdown list so users can type to filter and then select a single value. Use it when users need to pick one item from a long or dynamic list and benefit from search-as-you-type.",documentation:`\`ComboBox\` pairs a text input with a dropdown list so users can type to filter and then select a single value. Use it when users need to pick one item from a long or dynamic list and benefit from search-as-you-type.
+    isDisabled />;`}],implementation:`import React from "react";
+
+import { colorItems } from "../../RadioGroup/__tests__/testComponents";
+import { ColorSwatchPicker } from "../ColorSwatchPicker";
+
+import type { ColorSwatchPickerProps } from "../ColorSwatchPicker.types";
+
+const items = colorItems.map((item) => ({
+ color: item.id,
+ label: item.label,
+}));
+
+export const ColorSwatchPickerExample: React.FC<
+ Omit<ColorSwatchPickerProps, "items">
+> = (props) => (
+ <ColorSwatchPicker aria-label="Colors" {...props} items={items} />
+);
+
+export const ControlledColorSwatchPickerExample: React.FC = () => {
+ const [value, setValue] = React.useState<string | undefined>();
+
+ return (
+ <>
+ <ColorSwatchPicker
+ aria-label="Colors"
+ items={items}
+ value={value}
+ onChange={setValue}
+ />
+ <button
+ onClick={() => {
+ setValue(undefined);
+ }}
+ >
+ Clear
+ </button>
+ </>
+ );
+};`},similarTo:[],figmaUrl:null},ComboBox:{id:"core-forms-combobox",breadcrumb:"Core/Forms/ComboBox",importStatement:'import { ActionButton, ComboBox, VariantViewer } from "@baseline-ui/core";',description:"`ComboBox` pairs a text input with a dropdown list so users can type to filter and then select a single value. Use it when users need to pick one item from a long or dynamic list and benefit from search-as-you-type.",documentation:`\`ComboBox\` pairs a text input with a dropdown list so users can type to filter and then select a single value. Use it when users need to pick one item from a long or dynamic list and benefit from search-as-you-type.
 
 \`\`\`jsx
 <ComboBox
@@ -5003,6 +5195,8 @@ variant?: "primary" | "ghost"
 labelPosition?: "top" | "start"
 /**
  * Whether the input is read only.
+ * 
+ * @deprecated Use \`isReadOnly\`, which takes precedence when both are set.
  */
 readOnly?: boolean
 /**
@@ -5020,6 +5214,12 @@ inputClassName?: string
  * overrides any \`aria-labelledby\` the toggle would otherwise inherit.
  */
 toggleLabel?: string
+/**
+ * Whether typing in the input filters the items shown in the list. When
+ * \`false\`, every item is shown and \`filter\` is ignored.
+ * 
+ * @default true
+ */
 filterItems?: boolean
 onInputChange?: (value: string) => void
 showIcon?: boolean
@@ -5052,7 +5252,8 @@ items: ListItem[]
  */
 menuTrigger?: "manual" | "input" | "focus"
 /**
- * Custom filter function to use when filtering items.
+ * Custom filter function to use when filtering items. Ignored when
+ * \`filterItems\` is \`false\`.
  */
 filter?: ComboBoxStateOptions<ListItem>["defaultFilter"]
 /**
@@ -6191,6 +6392,10 @@ openCalendarLabel?: string
     label="Label"
     errorMessage="Error message"
     validationState="error"
+    granularity="day" />;`},{id:"core-forms-datefield--with-error-message-only",name:"With Error Message Only",snippet:`const WithErrorMessageOnly = () => <DateField
+    onChange={fn()}
+    label="Label"
+    errorMessage="Error message"
     granularity="day" />;`},{id:"core-forms-datefield--with-warning-message",name:"With Warning Message",snippet:`const WithWarningMessage = () => <DateField
     onChange={fn()}
     label="Label"
@@ -6303,12 +6508,12 @@ export const MinMaxDateFieldExample: React.FC<
  maxValue={new CalendarDate(2022, 6, 30)}
  />
  );
-};`},similarTo:[],figmaUrl:null},DateFormat:{id:"core-utilities-dateformat",breadcrumb:"Core/Utilities/DateFormat",importStatement:'import { DateFormat } from "@baseline-ui/core";',description:"`DateFormat` is a component that formats a date string into a localized date. It is built on top of [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat).",documentation:`\`DateFormat\` is a component that formats a date string into a localized date. It is built on top of [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat).
+};`},similarTo:[],figmaUrl:null},DateFormat:{id:"core-utilities-dateformat",breadcrumb:"Core/Utilities/DateFormat",importStatement:'import { DateFormat } from "@baseline-ui/core";',description:"`DateFormat` is a component that formats a `Date` into a localized string. It is built on top of [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat).",documentation:`\`DateFormat\` is a component that formats a \`Date\` into a localized string. It is built on top of [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat).
 
 \`\`\`jsx
-import { DateFormat } from "../../utils";
+import { DateFormat } from "@baseline-ui/core";
 
-const date = "2020-01-01T00:00:00.000Z";
+const date = new Date("2020-01-01T00:00:00.000Z");
 
 export default () => <DateFormat date={date} />;
 \`\`\`
@@ -6318,9 +6523,9 @@ The above example will render the date in the default locale of the browser.
 You can override the default locale by using \`I18nProvider\`.
 
 \`\`\`jsx
-import { I18nProvider } from "../../utils";
+import { DateFormat, I18nProvider } from "@baseline-ui/core";
 
-const date = "2020-01-01T00:00:00.000Z";
+const date = new Date("2020-01-01T00:00:00.000Z");
 
 export default () => (
  <I18nProvider locale="es">
@@ -6334,9 +6539,9 @@ The above example will render the date in Espa\xF1ol.
 You can also format the time portion of the date.
 
 \`\`\`jsx
-import { DateFormat } from "../../utils";
+import { DateFormat } from "@baseline-ui/core";
 
-const date = "2020-01-01T00:00:00.000Z";
+const date = new Date("2020-01-01T00:00:00.000Z");
 
 export default () => <DateFormat date={date} timeStyle={"full"} />;
 \`\`\``,props:`interface DateFormatProps {
@@ -6654,12 +6859,6 @@ By default, the \`Dialog\` component traps focus within the dialog. This means t
 | -------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
 | <kbd>Esc</kbd> | Close the dialog |
 | <kbd>Tab</kbd> | Move focus to the next focusable element in the dialog. If focus is on the last element, move focus to the first focusable element. |`,props:`interface DialogProps {
-/**
- * The accessibility role for the dialog.
- * 
- * @default 'dialog'
- */
-role?: 'dialog' | 'alertdialog'
 /**
  * @deprecated Do not use in new components. This is a legacy block
  * identifier; new components should exclude it via
@@ -6700,7 +6899,7 @@ children: React.ReactNode
 /**
  * The size of the dialog. This defines the max width of the dialog.
  * 
- * @default "sm"
+ * @default "md"
  */
 size?: "sm" | "md" | "lg" | "content"
 /**
@@ -7460,12 +7659,6 @@ className?: string
  * The style applied to the root element of the component.
  */
 style?: React.CSSProperties
-/**
- * The accessibility role for the dialog.
- * 
- * @default 'dialog'
- */
-role?: 'dialog' | 'alertdialog'
 /**
  * The children to render.
  */
@@ -7524,7 +7717,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 +7850,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 +7888,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 +8204,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 +8225,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 +8640,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.
  */
@@ -8451,30 +8684,6 @@ errorMessage?: string
  * The warning message to display when the input is in a warning state.
  */
 warningMessage?: string
-/**
- * Specifies what mime type of files are allowed.
- */
-acceptedFileTypes?: ReadonlyArray<string>
-/**
- * Whether multiple files can be selected.
- */
-allowsMultiple?: boolean
-/**
- * Specifies the use of a media capture mechanism to capture the media on the spot.
- */
-defaultCamera?: 'user' | 'environment'
-/**
- * Handler when a user selects a file.
- */
-onSelect?: (files: FileList | null) => void
-/**
- * The children of the component.
- */
-children?: ReactNode
-/**
- * Enables the selection of directories instead of individual files.
- */
-acceptDirectory?: boolean
 /**
  * The id applied to the root element of the component.
  */
@@ -8852,7 +9061,9 @@ export const manyItems: FileListItem[] = Array.from({ length: 12 }, (_, i) => ({
 
 // Swaps in a new array whose items carry new content, which is the only way a caller can
 // legitimately invalidate the memoised options.
-export const UploadingFileList: React.FC = () => {
+export const UploadingFileList: React.FC<{ errorMessage?: string }> = ({
+ errorMessage,
+}) => {
  const [items, setItems] = React.useState<FileListItem[]>(loadingItems);
 
  return (
@@ -8861,7 +9072,7 @@ export const UploadingFileList: React.FC = () => {
  label="Finish upload"
  onPress={() => {
  setItems((prev) =>
- prev.map((item) => ({ ...item, isLoading: false })),
+ prev.map((item) => ({ ...item, isLoading: false, errorMessage })),
  );
  }}
  />
@@ -9861,7 +10072,7 @@ canvasStyle?: React.CSSProperties
 /**
  * The ref for the canvas.
  */
-canvasRef?: React.RefObject<HTMLDivElement>
+canvasRef?: React.RefObject<HTMLDivElement | null>
 /**
  * The className applicable to the footer.
  */
@@ -10599,7 +10810,7 @@ export const EditableGridListExample: React.FC<GridListExampleProps> = (
  </button>
  </>
  );
-};`},similarTo:[],figmaUrl:null},Group:{id:"core-utilities-group",breadcrumb:"Core/Utilities/Group",importStatement:'import { ActionButton, Group } from "@baseline-ui/core";',description:"`Group` is a container that exposes a set of related UI controls as a single labelled unit to assistive technology. Use it to associate adjacent controls like toolbars or button clusters under a shared accessible label.",documentation:'`Group` is a container that exposes a set of related UI controls as a single labelled unit to assistive technology. Use it to associate adjacent controls like toolbars or button clusters under a shared accessible label.\n\n```jsx\nimport { Group, ActionButton } from "../../utils";\n\n<Group>\n <ActionButton label="Label 1" />\n <ActionButton label="Label 2" />\n <ActionButton label="Label 3" />\n</Group>;\n```\n\nThe Group component in the given file path accepts the `aria-label` and `aria-labelledby` attributes to provide an accessible label to the group as a whole. These attributes are read by assistive technology when navigating into the group from outside. It is recommended to use an additional label for the group when the labels of each child element do not provide sufficient context on their own.\n\n```jsx\n<span id="label-id">Label</span>\n<Group aria-labelledby="label-id">\n {/* ... */}\n</Group>\n```\n\nBy default, `Group` uses the `group` ARIA role. If the contents of the group is important enough to be included in the page table of contents, use `role="region"` instead, and ensure that an aria-label or `aria-labelledby` prop is assigned.\n\n```jsx\n<Group role="region" aria-label="Object details">\n {/* ... */}\n</Group>\n```\n\n```\n```',props:`interface GroupProps {
+};`},similarTo:[],figmaUrl:null},Group:{id:"core-utilities-group",breadcrumb:"Core/Utilities/Group",importStatement:'import { ActionButton, Group } from "@baseline-ui/core";',description:"`Group` is a container that exposes a set of related UI controls as a single labelled unit to assistive technology. Use it to associate adjacent controls like toolbars or button clusters under a shared accessible label.",documentation:'`Group` is a container that exposes a set of related UI controls as a single labelled unit to assistive technology. Use it to associate adjacent controls like toolbars or button clusters under a shared accessible label.\n\n```jsx\nimport { Group, ActionButton } from "../../utils";\n\n<Group>\n <ActionButton label="Label 1" />\n <ActionButton label="Label 2" />\n <ActionButton label="Label 3" />\n</Group>;\n```\n\nThe Group component in the given file path accepts the `aria-label` and `aria-labelledby` attributes to provide an accessible label to the group as a whole. These attributes are read by assistive technology when navigating into the group from outside. It is recommended to use an additional label for the group when the labels of each child element do not provide sufficient context on their own.\n\n```jsx\n<span id="label-id">Label</span>\n<Group aria-labelledby="label-id">\n {/* ... */}\n</Group>\n```\n\nBy default, `Group` uses the `group` ARIA role. If the contents of the group is important enough to be included in the page table of contents, use `role="region"` instead, and ensure that an aria-label or `aria-labelledby` prop is assigned.\n\n```jsx\n<Group role="region" aria-label="Object details">\n {/* ... */}\n</Group>\n```\n\n| Selector | Description |\n| --------------- | ---------------------------------------------------- |\n| \\[data-disabled] | Whether the group is disabled. |\n| \\[data-hovered] | Whether the group is currently hovered with a mouse. |\n\n```\n```',props:`interface GroupProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
  * identifier; new components should exclude it via
@@ -11544,11 +11755,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 +11773,8 @@ export function ImageGalleryExample({
  }
  />
  );
+
+ return ancestorKey ? <div data-key={ancestorKey}>{gallery}</div> : gallery;
 }
 
 export function CustomSizeImageGalleryExample({
@@ -11845,7 +12060,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 +12085,11 @@ export function RenderCountingImageGalleryExample() {
  }}
  />
  <Text data-testid="render-count">{reported.toString()}</Text>
+ {isControlled ? (
+ <ImageGallery items={items} renderImage={renderImage} />
+ ) : (
  <ImageGallery defaultItems={items} renderImage={renderImage} />
+ )}
  </Box>
  );
 }
@@ -12916,10 +13139,13 @@ export const items = [
 
 export const InlineToolbarExample = ({
  children,
+ itemsAsFunction,
  ...args
-}: Partial<React.ComponentProps<typeof InlineToolbar>>) => {
+}: Partial<React.ComponentProps<typeof InlineToolbar>> & {
+ itemsAsFunction?: boolean;
+}) => {
  return (
- <InlineToolbar {...args} items={items}>
+ <InlineToolbar {...args} items={itemsAsFunction ? () => items : items}>
  {React.Children.count(children) > 0 ? (
  children!
  ) : (
@@ -13007,6 +13233,11 @@ shouldUseSymbol?: boolean
     </Box>
   </Box>
 );`}],implementation:""},similarTo:[],figmaUrl:null},Link:{id:"core-navigation-link",breadcrumb:"Core/Navigation/Link",importStatement:'import { Link, VariantViewer } from "@baseline-ui/core";',description:"`Link` is a styled anchor for navigating between pages, sections, or external destinations. Use it for inline or standalone navigation targets that should look and behave like hyperlinks.",documentation:'`Link` is a styled anchor for navigating between pages, sections, or external destinations. Use it for inline or standalone navigation targets that should look and behave like hyperlinks.\n\n```jsx\nimport { Link } from "../../utils";\n\n<Link href="https://www.nutrient.io/">Nutrient</Link>;\n```\n\nThe `Link` component comes in three sizes: `small`, `medium`, and `large`.\n\n```jsx\nimport { Link } from "../../utils";\n\n<Link href="https://www.nutrient.io/sdk/" size="small">\n Small link\n</Link>\n<Link href="https://www.nutrient.io/sdk/" size="medium">\n Medium link\n</Link>\n<Link href="https://www.nutrient.io/sdk/" size="large">\n Large link\n</Link>\n```\n\nThe `Link` component comes in two variants: `default` and `inline`.\n\n```jsx\nimport { Link } from "../../utils";\n\n<Link href="https://www.nutrient.io/sdk/">Default link</Link>\n<Link href="https://www.nutrient.io/sdk/" variant="inline">\n Inline link\n</Link>\n```\n\nThe `Link` component can be disabled by setting the `isDisabled` prop to `true`. This will disable the link and prevent it from being clicked but will still allow keyboard navigation.\n\n```jsx\nimport { Link } from "../../utils";\n\n<Link href="https://www.nutrient.io/sdk/" isDisabled>\n Disabled link\n</Link>;\n```\n\nYou can also use press handlers to handle client-side actions. For example, you can use the `onPress` handler to handle a click event. In the example below, we use the `onPress` handler to create an alert. We use the `span` element instead of the `a` element to prevent the page from navigating. Proper ARIA attributes are added to the `span` element to make it accessible.\n\n```jsx\nimport { Link } from "../../utils";\n\n<Link onPress={() => alert("Link clicked")} elementType="span">\n Click me to see an alert\n</Link>;\n```\n\nThe `Link` component is rendered as an `<a>` element, so it\u2019s accessible by default. However, you can also use the `onPress` handler to handle client-side actions.\n\nSome of the accessibility features of the `Link` component are that it supports:\n\n* Mouse, keyboard, and touch interactions\n* Navigation links using `<a>` elements or client-side actions using custom handlers\n* The disabled state\n\n| Key | Function |\n| ----- | ------------------- |\n| Enter | Activates the link. |\n\n```\n```',props:`interface LinkProps {
+/**
+ * Indicates whether this element represents the current item within a container or set of related
+ * elements.
+ */
+aria-current?: boolean | 'true' | 'false' | 'page' | 'step' | 'location' | 'date' | 'time'
 /**
  * Whether the link is disabled.
  */
@@ -13198,7 +13429,9 @@ renderOption?: (
   ref: React.Ref<HTMLLIElement>,
 ) => React.ReactNode
 /**
- * Renders the drop indicator component.
+ * Renders the drop indicator component. It is called before each item and
+ * after the last one, whether or not a drag is in progress, and must return
+ * \`null\` when \`isHidden\` is true.
  */
 renderDropIndicator?: (
   options: {
@@ -13277,7 +13510,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"
@@ -13540,8 +13773,10 @@ export const ListBoxWithSectionsExample: React.FC<
 };
 
 export const DragAndDropListBoxExample: React.FC<
- Omit<React.ComponentProps<typeof ListBox>, "items" | "onReorder">
-> = ({ orientation, layout, ...rest }) => {
+ Omit<React.ComponentProps<typeof ListBox>, "items" | "onReorder"> & {
+ customDropIndicator?: boolean;
+ }
+> = ({ orientation, layout, customDropIndicator, ...rest }) => {
  const list = useListData({
  initialItems: Array.from({ length: 20 }).map((_, i) => ({
  id: \`item-\${i}\`,
@@ -13622,6 +13857,15 @@ export const DragAndDropListBoxExample: React.FC<
  </li>
  );
  }}
+ {...(customDropIndicator && {
+ renderDropIndicator: (options, ref) => (
+ <li
+ ref={ref}
+ {...options.dropIndicatorProps}
+ data-testid="custom-drop-indicator"
+ />
+ ),
+ })}
  enableReorder={true}
  items={list.items}
  onReorder={onReorder}
@@ -14177,25 +14421,9 @@ Each menu item exposes the standard React Aria interaction-state attributes, and
 | \`A\`\u2013\`Z\` | Typeahead \u2014 focuses the next item starting with the typed letters. |
 | \`ArrowRight\` | Opens the focused submenu (\`ArrowLeft\` in RTL). |
 | \`ArrowLeft\` | Closes the current submenu and returns focus to its trigger (\`ArrowRight\` in RTL). |
-| \`Escape\` | Closes the menu (or the current submenu level). |`,props:`interface MenuProps {
-/**
- * Whether the overlay is open by default (controlled).
- */
-isOpen?: boolean
-/**
- * Whether the overlay is open by default (uncontrolled).
- */
-defaultOpen?: boolean
-/**
- * Handler that is called when the overlay's open state changes.
- */
-onOpenChange?: (isOpen: boolean) => void
-/**
- * How the menu is triggered.
- * 
- * @default 'press'
- */
-trigger?: 'press' | 'longPress'
+| \`Escape\` | Closes the menu (or the current submenu level). |
+
+With \`trigger="longPress"\`, \`Enter\`, \`Space\`, \`ArrowDown\` and \`ArrowUp\` do not open the menu from the trigger; hold \`Alt\` with any of them instead.`,props:`interface MenuProps {
 /**
  * The custom render function for the collection's options.
  * 
@@ -14229,6 +14457,13 @@ optionStyle?: | React.CSSProperties
     item: TOption,
     renderProps: TRenderProps,
   ) => React.CSSProperties | undefined)
+/**
+ * How the menu is opened from its trigger. With \`"longPress"\`, a long press
+ * or \`Alt\` + \`ArrowDown\` / \`ArrowUp\` / \`Enter\` / \`Space\` opens the menu.
+ * 
+ * @default "press"
+ */
+trigger?: "press" | "longPress"
 /**
  * The \`className\` property assigned to the root element of the component.
  */
@@ -17301,7 +17536,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 +19057,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 +19109,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
 /**
@@ -19162,7 +19392,22 @@ errorMessage?: string
     label="Label"
     value={50}
     formatOptions={{ style: "currency", currency: "USD" }}
-    showValue />;`},{id:"core-status-progressbar--with-custom-value-label",name:"With Custom Value Label",snippet:'const WithCustomValueLabel = () => <ProgressBar label="Label" value={50} valueLabel="50 out of 100" showValue />;'}],implementation:""},similarTo:[],figmaUrl:null},ProgressSpinner:{id:"core-status-progressspinner",breadcrumb:"Core/Status/ProgressSpinner",importStatement:'import { ProgressSpinner, VariantViewer } from "@baseline-ui/core";',description:"`ProgressSpinner` is an animated indicator that signals an ongoing operation of indeterminate duration. Use it when the user is waiting on a task and you can't report a meaningful percentage of completion.",documentation:'`ProgressSpinner` is an animated indicator that signals an ongoing operation of indeterminate duration. Use it when the user is waiting on a task and you can\'t report a meaningful percentage of completion.\n\n```jsx\nimport { ProgressSpinner } from "../../utils";\n\n<ProgressSpinner aria-label={"Label"} />;\n```\n\nThe `ProgressSpinner` component comes in four variants: `active`, `inactive`, `success` and `error`. The default variant is `active`.\n\n```jsx\nimport { ProgressSpinner } from "../../utils";\n\n<ProgressSpinner aria-label={"Label"} />\n<ProgressSpinner aria-label={"Label"} variant={"inactive"} />\n<ProgressSpinner aria-label={"Label"} variant={"success"} />\n<ProgressSpinner aria-label={"Label"} variant={"error"} />\n```\n\nThe `ProgressSpinner` component comes in two sizes: `sm` and `md`. The default size is `md`.\n\n```jsx\nimport { ProgressSpinner } from "../../utils";\n\n<ProgressSpinner aria-label={"Label"} size={"sm"} />\n<ProgressSpinner aria-label={"Label"} size={"md"} />\n```\n\nYou can provide a label to the `ProgressSpinner` component using the `label` prop.\n\n```jsx\nimport { ProgressSpinner } from "../../utils";\n\n<ProgressSpinner aria-label={"Label"} label={"Label"} />;\n<ProgressSpinner aria-label={"Label"} label={"Label"} size={"sm"} />;\n```',props:`interface ProgressSpinnerProps {
+    showValue />;`},{id:"core-status-progressbar--with-custom-value-label",name:"With Custom Value Label",snippet:'const WithCustomValueLabel = () => <ProgressBar label="Label" value={50} valueLabel="50 out of 100" showValue />;'}],implementation:`import React from "react";
+
+import { ProgressBar } from "../ProgressBar";
+
+import type { ProgressBarProps } from "../ProgressBar.types";
+
+export const ProgressBarWithExternalHint: React.FC<ProgressBarProps> = (
+ props,
+) => {
+ return (
+ <>
+ <span id="external-hint">External hint</span>
+ <ProgressBar aria-describedby="external-hint" {...props} />
+ </>
+ );
+};`},similarTo:[],figmaUrl:null},ProgressSpinner:{id:"core-status-progressspinner",breadcrumb:"Core/Status/ProgressSpinner",importStatement:'import { ProgressSpinner, VariantViewer } from "@baseline-ui/core";',description:"`ProgressSpinner` is an animated indicator that signals an ongoing operation of indeterminate duration. Use it when the user is waiting on a task and you can't report a meaningful percentage of completion.",documentation:'`ProgressSpinner` is an animated indicator that signals an ongoing operation of indeterminate duration. Use it when the user is waiting on a task and you can\'t report a meaningful percentage of completion.\n\n```jsx\nimport { ProgressSpinner } from "../../utils";\n\n<ProgressSpinner aria-label={"Label"} />;\n```\n\nThe `ProgressSpinner` component comes in four variants: `active`, `inactive`, `success` and `error`. The default variant is `active`.\n\n```jsx\nimport { ProgressSpinner } from "../../utils";\n\n<ProgressSpinner aria-label={"Label"} />\n<ProgressSpinner aria-label={"Label"} variant={"inactive"} />\n<ProgressSpinner aria-label={"Label"} variant={"success"} />\n<ProgressSpinner aria-label={"Label"} variant={"error"} />\n```\n\nThe `ProgressSpinner` component comes in two sizes: `sm` and `md`. The default size is `md`.\n\n```jsx\nimport { ProgressSpinner } from "../../utils";\n\n<ProgressSpinner aria-label={"Label"} size={"sm"} />\n<ProgressSpinner aria-label={"Label"} size={"md"} />\n```\n\nYou can provide a label to the `ProgressSpinner` component using the `label` prop.\n\n```jsx\nimport { ProgressSpinner } from "../../utils";\n\n<ProgressSpinner aria-label={"Label"} label={"Label"} />;\n<ProgressSpinner aria-label={"Label"} label={"Label"} size={"sm"} />;\n```',props:`interface ProgressSpinnerProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
  * identifier; new components should exclude it via
@@ -19483,6 +19728,7 @@ import React from "react";
 
 import { ColorSwatch } from "../../ColorSwatch";
 import { RadioGroup, type RadioGroupProps } from "../../RadioGroup";
+import { items } from "./data";
 
 import type { ListOption } from "../../ListBox";
 
@@ -19513,7 +19759,16 @@ export const CustomRenderItem: React.FC<Omit<RadioGroupProps, "items">> = (
  return (
  <RadioGroup items={colorItems} renderOption={colorRenderItem} {...props} />
  );
-};`},similarTo:[],figmaUrl:null},Reaction:{id:"core-buttons-reaction",breadcrumb:"Core/Buttons/Reaction",importStatement:'import { Reaction, VariantViewer } from "@baseline-ui/core";',description:"`Reaction` is a toggleable button paired with a count that lets users add or remove a reaction to a post or comment. Use it when surfacing lightweight social affordances such as likes, emoji responses, or upvotes.",documentation:`\`Reaction\` is a toggleable button paired with a count that lets users add or remove a reaction to a post or comment. Use it when surfacing lightweight social affordances such as likes, emoji responses, or upvotes.
+};
+
+export const RadioGroupWithNextFocusable: React.FC<
+ Omit<RadioGroupProps, "items">
+> = (props) => (
+ <>
+ <RadioGroup items={items} {...props} />
+ <button>After</button>
+ </>
+);`},similarTo:[],figmaUrl:null},Reaction:{id:"core-buttons-reaction",breadcrumb:"Core/Buttons/Reaction",importStatement:'import { Reaction, VariantViewer } from "@baseline-ui/core";',description:"`Reaction` is a toggleable button paired with a count that lets users add or remove a reaction to a post or comment. Use it when surfacing lightweight social affordances such as likes, emoji responses, or upvotes.",documentation:`\`Reaction\` is a toggleable button paired with a count that lets users add or remove a reaction to a post or comment. Use it when surfacing lightweight social affordances such as likes, emoji responses, or upvotes.
 
 * It is exposed as a input checkbox via ARIA
 * It has mouse, keyboard, and touch support
@@ -19763,9 +20018,9 @@ style?: React.CSSProperties
 /**
  * The ref to the scrollable element.
  * 
- * @default document.body
+ * @default the page scroller (the document, or the body when it scrolls)
  */
-scrollRef?: React.RefObject<HTMLElement>
+scrollRef?: React.RefObject<HTMLElement | null>
 /**
  * Indicates whether the button should be hidden when the keyboard is being
  * used.
@@ -21428,7 +21683,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\`
@@ -21847,7 +22112,7 @@ export const CustomTrailingElementTestComponent: React.FC = () => {
  )}
  />
  );
-};`},similarTo:[],figmaUrl:null},Stepper:{id:"core-navigation-stepper",breadcrumb:"Core/Navigation/Stepper",importStatement:'import { Box, CheckoutWizard, Stepper, Text } from "@baseline-ui/core";',description:"The `Stepper` visualizes user progress through a sequence of discrete, ordered\nsteps. Use it for multi-step flows like checkout, onboarding, or wizards where\nthe user must complete steps in order.",documentation:'The `Stepper` visualizes user progress through a sequence of discrete, ordered\nsteps. Use it for multi-step flows like checkout, onboarding, or wizards where\nthe user must complete steps in order.\n\n* Sequential progress model: only completed steps and the next-uncompleted step are selectable.\n* Active step is announced to assistive technology via `aria-current="step"`.\n* Completed steps include a visually hidden "Completed" label for screen readers.\n* Each selectable step is independently tabbable \u2014 no roving tabindex.\n* Controlled and uncontrolled APIs for both the selected step and the completion frontier.\n* Two layout variants (`condensed`, `expanded`) and two sizes (`sm`, `md`).\n* Supports indicator-only steps (omit `title`) and disabling individual steps or the whole stepper.\n\nYou can import the `Stepper` component like so:\n\n```jsx\nimport { Stepper } from "@baseline-ui/core";\n\nconst items = [\n { key: "cart", title: "Cart", description: "Review items" },\n { key: "shipping", title: "Shipping", description: "Enter address" },\n { key: "payment", title: "Payment", description: "Pay securely" },\n];\n\nexport default function Checkout() {\n return (\n <Stepper\n items={items}\n defaultSelectedStep="shipping"\n defaultLastCompletedStep="cart"\n aria-label="Checkout"\n />\n );\n}\n```\n\nIf you need parallel views without order or completion semantics, use\n[`Tabs`](?path=/docs/core-tabs--docs). For non-discrete or determinate progress,\nuse [`ProgressBar`](?path=/docs/core-progressbar--docs).\n\nThe `Stepper` supports two variants: `condensed` and `expanded`. The\n`expanded` variant is the default.\n\n* `condensed` \u2014 indicator-only layout with a short connector. Compact and ideal for narrow contexts.\n* `expanded` \u2014 indicator with title and description; the connector grows to fill the available width between steps.\n\n```jsx\n<Stepper items={items} variant="expanded" aria-label="Checkout" />\n<Stepper items={items} variant="condensed" aria-label="Checkout" />\n```\n\nThe `Stepper` supports two sizes: `sm` (20px indicator) and `md` (24px\nindicator). The `md` size is the default.\n\n```jsx\n<Stepper items={items} size="sm" aria-label="Checkout" />\n<Stepper items={items} size="md" aria-label="Checkout" />\n```\n\nEach step renders in one of three statuses, derived from the current selection\nand the completion frontier:\n\n* **complete** \u2014 step appears before `lastCompletedStep` (inclusive); shown with a checkmark.\n* **active** \u2014 step matches `selectedStep`; highlighted indicator with `aria-current="step"`.\n* **incomplete** \u2014 step appears after the active step; numbered indicator with muted styling.\n\nDisable individual steps by setting `isDisabled` on the item. Disabled steps\ncannot be selected and are removed from the tab sequence.\n\n```jsx\n<Stepper\n items={[\n { key: "a", title: "A" },\n { key: "b", title: "B", isDisabled: true },\n { key: "c", title: "C" },\n ]}\n aria-label="Checkout"\n/>\n```\n\nPass `isDisabled` on the `Stepper` itself to disable every step at once \u2014 useful\nwhile a flow is loading or otherwise temporarily inert.\n\n```jsx\n<Stepper items={items} isDisabled aria-label="Checkout" />\n```\n\nTwo independent ways to hide step text:\n\n* Set `variant="condensed"` on the stepper \u2014 hides title and description for every step regardless of whether they were provided.\n* Omit `title` on individual items in the default `expanded` variant \u2014 those specific steps render as indicator-only while others keep their text.\n\n```jsx\n<Stepper\n items={[{ key: "cart" }, { key: "shipping" }, { key: "payment" }]}\n variant="condensed"\n aria-label="Checkout"\n/>\n```\n\nThe `Stepper` can be used uncontrolled by providing `defaultSelectedStep` and\n`defaultLastCompletedStep`.\n\n```jsx\n<Stepper\n items={items}\n defaultSelectedStep="shipping"\n defaultLastCompletedStep="cart"\n aria-label="Checkout"\n/>\n```\n\nFor full control, supply `selectedStep` and `lastCompletedStep` together with\nthe `onSelectionChange` and `onLastCompletedStepChange` callbacks.\n`onLastCompletedStepChange` receives `null` when the frontier resets to "no\nsteps completed yet".\n\n```jsx\nconst [selected, setSelected] = useState("cart");\nconst [lastCompleted, setLastCompleted] = useState(null);\n\n<Stepper\n items={items}\n selectedStep={selected}\n lastCompletedStep={lastCompleted ?? undefined}\n onSelectionChange={setSelected}\n onLastCompletedStepChange={setLastCompleted}\n aria-label="Checkout"\n/>;\n```\n\n* Always supply an `aria-label` that names the flow (e.g. `"Checkout"`). A localized fallback ("Progress") is used if omitted, but a flow-specific label is strongly preferred.\n* The active step is marked with `aria-current="step"`.\n* Completed steps include a visually hidden "Completed" label so screen reader users hear the progress state.\n* Only completed steps and the next-uncompleted step are selectable; future steps are exposed with `aria-disabled="true"`.\n* Per-item `aria-label` has two roles. When set **without** `description`, the step renders in indicator-only mode and the label becomes the accessible name. When set **with** `description`, the step renders normally and the label overrides `title` for assistive technology \u2014 use it to expose a longer or more descriptive name to screen readers without changing the visible text.\n\n| Selector | Description |\n| --------------------------------- | ----------------------------------------------------------- |\n| `[data-variant]` | Layout variant: `condensed` or `expanded`. |\n| `[data-size]` | Size of the indicator: `sm` or `md`. |\n| `[data-status]` | Step status: `complete`, `active`, or `incomplete`. |\n| `[data-disabled]` | Whether the step is disabled. |\n| `[data-hovered]` | Whether the step is currently hovered. |\n| `[data-focused]` | Whether the step is focused (mouse or keyboard). |\n| `[data-focus-visible]` | Whether the step is keyboard focused. |\n| `[aria-current="step"]` | The currently active step. |\n| `[aria-disabled="true"]` | The step is not selectable (future or explicitly disabled). |\n| `.BaselineUI-Stepper` | Root `<ol>` element. |\n| `.BaselineUI-Stepper-Item` | Each step `<li>`. |\n| `.BaselineUI-Stepper-StepLink` | Interactive step `<a>` element. |\n| `.BaselineUI-Stepper-Indicator` | Indicator circle (number or checkmark). |\n| `.BaselineUI-Stepper-Text` | Wrapper around title and description. |\n| `.BaselineUI-Stepper-Title` | Step title text. |\n| `.BaselineUI-Stepper-Description` | Step description text. |\n| `.BaselineUI-Stepper-Connector` | Connector line between steps. |\n\nEach selectable step is a regular focusable link \u2014 the Stepper does not use a\nroving tabindex, so steps are reached individually via `Tab`.\n\n| Key | Function |\n| ------- | ------------------------------------------- |\n| `Tab` | Moves focus to the next selectable step. |\n| `Enter` | Activates the focused step (if selectable). |',props:`interface StepperProps {
+};`},similarTo:[],figmaUrl:null},Stepper:{id:"core-navigation-stepper",breadcrumb:"Core/Navigation/Stepper",importStatement:'import { Box, CheckoutWizard, Stepper, Text } from "@baseline-ui/core";',description:"The `Stepper` visualizes user progress through a sequence of discrete, ordered\nsteps. Use it for multi-step flows like checkout, onboarding, or wizards where\nthe user must complete steps in order.",documentation:'The `Stepper` visualizes user progress through a sequence of discrete, ordered\nsteps. Use it for multi-step flows like checkout, onboarding, or wizards where\nthe user must complete steps in order.\n\n* Sequential progress model: only completed steps and the next-uncompleted step are selectable.\n* Active step is announced to assistive technology via `aria-current="step"`.\n* Completed steps include a visually hidden "Completed" label for screen readers.\n* Each selectable step is independently tabbable \u2014 no roving tabindex.\n* Controlled and uncontrolled APIs for both the selected step and the completion frontier.\n* Two layout variants (`condensed`, `expanded`) and two sizes (`sm`, `md`).\n* Supports indicator-only steps (omit `title`) and disabling individual steps or the whole stepper.\n\nYou can import the `Stepper` component like so:\n\n```jsx\nimport { Stepper } from "@baseline-ui/core";\n\nconst items = [\n { key: "cart", title: "Cart", description: "Review items" },\n { key: "shipping", title: "Shipping", description: "Enter address" },\n { key: "payment", title: "Payment", description: "Pay securely" },\n];\n\nexport default function Checkout() {\n return (\n <Stepper\n items={items}\n defaultSelectedStep="shipping"\n defaultLastCompletedStep="cart"\n aria-label="Checkout"\n />\n );\n}\n```\n\nIf you need parallel views without order or completion semantics, use\n[`Tabs`](?path=/docs/core-tabs--docs). For non-discrete or determinate progress,\nuse [`ProgressBar`](?path=/docs/core-progressbar--docs).\n\nThe `Stepper` supports two variants: `condensed` and `expanded`. The\n`expanded` variant is the default.\n\n* `condensed` \u2014 indicator-only layout with a short connector. Compact and ideal for narrow contexts.\n* `expanded` \u2014 indicator with title and description; the connector grows to fill the available width between steps.\n\n```jsx\n<Stepper items={items} variant="expanded" aria-label="Checkout" />\n<Stepper items={items} variant="condensed" aria-label="Checkout" />\n```\n\nThe `Stepper` supports two sizes: `sm` (20px indicator) and `md` (24px\nindicator). The `md` size is the default.\n\n```jsx\n<Stepper items={items} size="sm" aria-label="Checkout" />\n<Stepper items={items} size="md" aria-label="Checkout" />\n```\n\nEach step renders in one of three statuses, derived from the current selection\nand the completion frontier:\n\n* **complete** \u2014 step appears before `lastCompletedStep` (inclusive); shown with a checkmark.\n* **active** \u2014 step matches `selectedStep`; highlighted indicator with `aria-current="step"`.\n* **incomplete** \u2014 step appears after the active step; numbered indicator with muted styling.\n\nDisable individual steps by setting `isDisabled` on the item. Disabled steps\ncannot be selected and are removed from the tab sequence.\n\n```jsx\n<Stepper\n items={[\n { key: "a", title: "A" },\n { key: "b", title: "B", isDisabled: true },\n { key: "c", title: "C" },\n ]}\n aria-label="Checkout"\n/>\n```\n\nPass `isDisabled` on the `Stepper` itself to disable every step at once \u2014 useful\nwhile a flow is loading or otherwise temporarily inert.\n\n```jsx\n<Stepper items={items} isDisabled aria-label="Checkout" />\n```\n\nTwo independent ways to hide step text:\n\n* Set `variant="condensed"` on the stepper \u2014 hides title and description for every step regardless of whether they were provided.\n* Omit `title` on individual items in the default `expanded` variant \u2014 those specific steps render as indicator-only while others keep their text.\n\n```jsx\n<Stepper\n items={[{ key: "cart" }, { key: "shipping" }, { key: "payment" }]}\n variant="condensed"\n aria-label="Checkout"\n/>\n```\n\nThe `Stepper` can be used uncontrolled by providing `defaultSelectedStep` and\n`defaultLastCompletedStep`.\n\n```jsx\n<Stepper\n items={items}\n defaultSelectedStep="shipping"\n defaultLastCompletedStep="cart"\n aria-label="Checkout"\n/>\n```\n\nFor full control, supply `selectedStep` and `lastCompletedStep` together with\nthe `onSelectionChange` and `onLastCompletedStepChange` callbacks.\n`onLastCompletedStepChange` receives `null` when the frontier resets to "no\nsteps completed yet".\n\n```jsx\nconst [selected, setSelected] = useState("cart");\nconst [lastCompleted, setLastCompleted] = useState(null);\n\n<Stepper\n items={items}\n selectedStep={selected}\n lastCompletedStep={lastCompleted ?? undefined}\n onSelectionChange={setSelected}\n onLastCompletedStepChange={setLastCompleted}\n aria-label="Checkout"\n/>;\n```\n\n* Always supply an `aria-label` that names the flow (e.g. `"Checkout"`). A localized fallback ("Progress") is used if omitted, but a flow-specific label is strongly preferred.\n* The active step is marked with `aria-current="step"`.\n* Completed steps include a visually hidden "Completed" label so screen reader users hear the progress state.\n* Only completed steps and the next-uncompleted step are selectable; future steps are exposed with `aria-disabled="true"`.\n* Per-item `aria-label` has two roles. When set **without** `description`, the step renders in indicator-only mode and the label becomes the accessible name. When set **with** `description`, the step renders normally and the label overrides `title` for assistive technology \u2014 use it to expose a longer or more descriptive name to screen readers without changing the visible text.\n\n| Selector | Description |\n| --------------------------------- | ----------------------------------------------------------- |\n| `[data-variant]` | Layout variant: `condensed` or `expanded`. |\n| `[data-size]` | Size of the indicator: `sm` or `md`. |\n| `[data-status]` | Step status: `complete`, `active`, or `incomplete`. |\n| `[data-disabled]` | Whether the step is disabled. |\n| `[data-hovered]` | Whether the step is currently hovered. |\n| `[data-focused]` | Whether the step is focused (mouse or keyboard). |\n| `[data-focus-visible]` | Whether the step is keyboard focused. |\n| `[aria-current="step"]` | The currently active step. |\n| `[aria-disabled="true"]` | The step is not selectable (future or explicitly disabled). |\n| `.BaselineUI-Stepper` | Root `<ol>` element. |\n| `.BaselineUI-Stepper-Item` | Each step `<li>`. |\n| `.BaselineUI-Stepper-StepLink` | Interactive step `<a>` element. |\n| `.BaselineUI-Stepper-Indicator` | Indicator circle (number or checkmark). |\n| `.BaselineUI-Stepper-Text` | Wrapper around title and description. |\n| `.BaselineUI-Stepper-Title` | Step title text. |\n| `.BaselineUI-Stepper-Description` | Step description text. |\n| `.BaselineUI-Stepper-Connector` | Connector line between steps. |\n\nEach selectable step is a regular focusable link \u2014 the Stepper does not use a\nroving tabindex, so steps are reached individually via `Tab`.\n\n| Key | Function |\n| ----------- | ------------------------------------------- |\n| `Tab` | Moves focus to the next selectable step. |\n| `ArrowDown` | Moves focus to the next step. |\n| `ArrowUp` | Moves focus to the previous step. |\n| `Enter` | Activates the focused step (if selectable). |',props:`interface StepperProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
  * identifier; new components should exclude it via
@@ -21945,7 +22210,7 @@ aria-label?: string
  */
 stepLabel?: string | ((values: { index: number }) => string)
 /**
- * Overrides the screen-reader-only suffix marking a step the reader has
+ * Overrides the screen-reader-only prefix marking a step the reader has
  * finished.
  * 
  * Message id: \`bui.stepper.completed\`. Defaults to \`"Completed"\`.
@@ -22981,68 +23246,7 @@ Use the \`renderEmptyState\` prop on \`TableBody\` to display a message when the
 * **Virtualizer** \u2014 for performance with large datasets
 * **Toolbar** \u2014 for contextual actions on selected rows
 * **Tag** \u2014 for displaying status badges in cells
-* **Menu** \u2014 for row-level action menus`,props:`interface TableProps {
-/**
- * Overrides the default DOM element with a custom render function.
- * This allows rendering existing components with built-in styles and behaviors
- * such as router links, animation libraries, and pre-styled components.
- * 
- * Requirements:
- * 
- * - You must render the expected element type (e.g. if \`<button>\` is expected, you cannot render an
- *   \`<a>\`).
- * - Only a single root DOM element can be rendered (no fragments).
- * - You must pass through props and ref to the underlying DOM element, merging with your own prop
- *   as appropriate.
- */
-render?: (
-  props: React.JSX.IntrinsicElements[E],
-  renderProps: T
-) => ReactElement
-/**
- * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the
- * element. A function may be provided to compute the class based on component state.
- */
-className?: | string
-| ((values: T & {defaultClassName: string | undefined}) => string)
-/**
- * The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the
- * element. A function may be provided to compute the style based on component state.
- */
-style?: | CSSProperties
-| ((values: T & {defaultStyle: CSSProperties}) => CSSProperties | undefined)
-/**
- * A slot name for the component. Slots allow the component to receive props from a parent
- * component. An explicit \`null\` value indicates that the local props completely override all
- * props received from a parent.
- */
-slot?: string | null
-/**
- * The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows.
- */
-children?: ReactNode
-/**
- * How multiple selection should behave in the collection.
- * 
- * @default 'toggle'
- */
-selectionBehavior?: SelectionBehavior
-/**
- * Whether \`disabledKeys\` applies to all interactions, or only selection.
- * 
- * @default 'all'
- */
-disabledBehavior?: DisabledBehavior
-/**
- * Handler that is called when a user performs an action on the row.
- */
-onRowAction?: (key: Key) => void
-/**
- * The drag and drop hooks returned by \`useDragAndDrop\` used to enable drag and drop behavior for
- * the Table.
- */
-dragAndDropHooks?: DragHooks<T> & DropHooks
-}`,stories:{usage:[{id:"core-collections-table--default",name:"Default",snippet:"const Default = () => <BasicTableExample />;",description:"Basic table with columns and rows, no interactivity"},{id:"core-collections-table--single-selection",name:"Single Selection",snippet:"const SingleSelection = () => <SingleSelectionTableExample />;",description:"Single selection mode with controlled state"},{id:"core-collections-table--multiple-selection",name:"Multiple Selection",snippet:"const MultipleSelection = () => <MultipleSelectionTableExample />;",description:"Multiple selection mode with checkbox column and select-all header"},{id:"core-collections-table--sorting",name:"Sorting",snippet:"const Sorting = () => <SortableTableExample />;",description:"Sortable columns with sort descriptor and client-side sorting"},{id:"core-collections-table--empty",name:"Empty",snippet:"const Empty = () => <EmptyTableExample />;",description:"Empty table with no rows"},{id:"core-collections-table--row-action",name:"Row Action",snippet:`const RowAction = () => (
+* **Menu** \u2014 for row-level action menus`,props:"",stories:{usage:[{id:"core-collections-table--default",name:"Default",snippet:"const Default = () => <BasicTableExample />;",description:"Basic table with columns and rows, no interactivity"},{id:"core-collections-table--single-selection",name:"Single Selection",snippet:"const SingleSelection = () => <SingleSelectionTableExample />;",description:"Single selection mode with controlled state"},{id:"core-collections-table--multiple-selection",name:"Multiple Selection",snippet:"const MultipleSelection = () => <MultipleSelectionTableExample />;",description:"Multiple selection mode with checkbox column and select-all header"},{id:"core-collections-table--sorting",name:"Sorting",snippet:"const Sorting = () => <SortableTableExample />;",description:"Sortable columns with sort descriptor and client-side sorting"},{id:"core-collections-table--empty",name:"Empty",snippet:"const Empty = () => <EmptyTableExample />;",description:"Empty table with no rows"},{id:"core-collections-table--row-action",name:"Row Action",snippet:`const RowAction = () => (
   <OnRowActionTableExample
     onRowAction={(key) => {
       alert(\`Row action: \${key}\`);
@@ -23838,12 +24042,14 @@ export const DisabledRowsTableExample: React.FC<
 
 interface DragAndDropTableExampleProps {
  onReorder?: (event: DroppableCollectionReorderEvent) => void;
+ /** Virtualizes the table without a fixed height, so the page scrolls it. */
+ isVirtualized?: boolean;
 }
 
 /** Drag-and-drop row reordering using useTableDragAndDrop hook. */
 export const DragAndDropTableExample: React.FC<
  DragAndDropTableExampleProps
-> = ({ onReorder }) => {
+> = ({ onReorder, isVirtualized }) => {
  const list = useListData({ initialItems: rows });
 
  const handleReorder = useCallback(
@@ -23862,7 +24068,7 @@ export const DragAndDropTableExample: React.FC<
  onReorder: handleReorder,
  });
 
- return (
+ const table = (
  <Table dragAndDropHooks={dragAndDropHooks} aria-label="Files">
  <TableHeader>
  <Column id="drag">
@@ -23906,6 +24112,17 @@ export const DragAndDropTableExample: React.FC<
  </TableBody>
  </Table>
  );
+
+ return isVirtualized ? (
+ <>
+ <Virtualizer {...VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.TABLE}>
+ {table}
+ </Virtualizer>
+ <Box style={{ height: 3000 }} />
+ </>
+ ) : (
+ table
+ );
 };
 
 /** Table with zero rows and an empty state message. */
@@ -24043,14 +24260,21 @@ export const OnRowActionTableExample: React.FC<
 );
 
 /** Virtualized table using actual Virtualizer component with 1000 rows. */
-export const VirtualizedTableExample: React.FC = () => {
+export const VirtualizedTableExample: React.FC<{
+ /** What bounds the table's height: itself, a scrolling ancestor, or the page. */
+ boundedBy?: "table" | "ancestor" | "window";
+}> = ({ boundedBy = "table" }) => {
  const largeDataset = generateLargeDataset(1000);
 
- return (
+ const virtualizer = (
  <Virtualizer {...VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.TABLE}>
  <Table
  aria-label="Files"
- style={{ height: 400, width: 700, overflow: "auto" }}
+ style={
+ boundedBy === "table"
+ ? { height: 400, width: 700, overflow: "auto" }
+ : { width: 700, overflow: "auto" }
+ }
  >
  <TableHeader>
  <Column id="name" isRowHeader={true}>
@@ -24092,6 +24316,17 @@ export const VirtualizedTableExample: React.FC = () => {
  </Table>
  </Virtualizer>
  );
+
+ return boundedBy === "ancestor" ? (
+ <Box
+ data-testid="virtualized-table-scroller"
+ style={{ height: 400, overflow: "auto" }}
+ >
+ {virtualizer}
+ </Box>
+ ) : (
+ virtualizer
+ );
 };
 
 interface AsyncLoadingTableExampleProps {
@@ -24848,7 +25083,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
@@ -25139,7 +25383,11 @@ export const RemovableTagGroup: React.FC<
  }}
  />
  );
-};`},similarTo:[],figmaUrl:null},TaggedPagination:{id:"core-forms-taggedpagination",breadcrumb:"Core/Forms/TaggedPagination",importStatement:'import { Box, TaggedPagination, TaggedPaginationExample, VariantViewer } from "@baseline-ui/core";',description:"`TaggedPagination` is a paginator that steps through items by their custom label rather than a sequential index. Use it when pages or records have meaningful identifiers, such as named document pages, that should appear in the input instead of raw numbers.",documentation:`\`TaggedPagination\` is a paginator that steps through items by their custom label rather than a sequential index. Use it when pages or records have meaningful identifiers, such as named document pages, that should appear in the input instead of raw numbers.
+};
+
+export const TagGroupExample: React.FC<
+ Omit<React.ComponentProps<typeof TagGroup>, "items" | "aria-label">
+> = (props) => <TagGroup {...props} items={items} aria-label="Tag group" />;`},similarTo:[],figmaUrl:null},TaggedPagination:{id:"core-forms-taggedpagination",breadcrumb:"Core/Forms/TaggedPagination",importStatement:'import { Box, TaggedPagination, TaggedPaginationExample, VariantViewer } from "@baseline-ui/core";',description:"`TaggedPagination` is a paginator that steps through items by their custom label rather than a sequential index. Use it when pages or records have meaningful identifiers, such as named document pages, that should appear in the input instead of raw numbers.",documentation:`\`TaggedPagination\` is a paginator that steps through items by their custom label rather than a sequential index. Use it when pages or records have meaningful identifiers, such as named document pages, that should appear in the input instead of raw numbers.
 
 * Supports both string and number tags.
 * Keyboard handling of next and previous buttons.
@@ -26660,7 +26908,7 @@ warningMessage?: string
     onChange={fn()}
     label="Label"
     errorMessage="Error message"
-    validationState="error" />;`},{id:"core-forms-timefield--with-warning-message",name:"With Warning Message",snippet:`const WithWarningMessage = () => <TimeField
+    validationState="error" />;`},{id:"core-forms-timefield--with-error-message-only",name:"With Error Message Only",snippet:'const WithErrorMessageOnly = () => <TimeField onChange={fn()} label="Label" errorMessage="Error message" />;'},{id:"core-forms-timefield--with-warning-message",name:"With Warning Message",snippet:`const WithWarningMessage = () => <TimeField
     onChange={fn()}
     label="Label"
     warningMessage="Warning message"
@@ -26812,7 +27060,15 @@ import { GlobalToastRegion } from "../Toast";
 
 import type { ToastContent } from "../Toast.types";
 
-export const ToastExample = ({ onAction }: { onAction?: () => void }) => {
+export const ToastExample = ({
+ onAction,
+ closeLabel,
+ canClose,
+}: {
+ onAction?: () => void;
+ closeLabel?: string;
+ canClose?: boolean;
+}) => {
  const [variant, setVariant] = useState<ToastContent["variant"]>("info");
  const [shouldIncludeAction, setShouldIncludeAction] = useState(false);
  const [arrangement, setArrangement] =
@@ -26904,6 +27160,8 @@ export const ToastExample = ({ onAction }: { onAction?: () => void }) => {
  : undefined,
  actionLabel: shouldIncludeAction ? "Action" : undefined,
  arrangement,
+ closeLabel,
+ canClose,
  },
  {
  timeout: timeoutValue,
@@ -27513,6 +27771,13 @@ export const StateSpecificIcon: React.FC<
  unselected: XIcon,
  }}
  />
+);
+
+export const LabelledByTooltip: React.FC = () => (
+ <>
+ <span id="toggle-label">Mute</span>
+ <ToggleIconButtonExample aria-labelledby="toggle-label" tooltip={true} />
+ </>
 );`},similarTo:[],figmaUrl:null},Toolbar:{id:"core-miscellaneous-toolbar",breadcrumb:"Core/Miscellaneous/Toolbar",importStatement:`import {
     ChildrenWithTooltip,
     CollapsibleChildren,
@@ -27770,6 +28035,7 @@ export const CollapsibleChildren: React.FC<{
  size="lg"
  variant="toolbar"
  tooltip={true}
+ data-testid="toolbar-overflow-button"
  />
  ),
  }
@@ -28054,14 +28320,14 @@ onOpenChange?: (isOpen: boolean) => void
 isDisabled?: boolean
 /**
  * The delay time for the tooltip to show up. [See
- * guidelines](https://spectrum.adobe.com/page/tooltip/#Immediate-or-delayed-appearance).
+ * guidelines](https://spectrum.adobe.com/web/rsp/components/tooltip#behaviors).
  * 
  * @default 1500
  */
 delay?: number
 /**
  * The delay time for the tooltip to close. [See
- * guidelines](https://spectrum.adobe.com/page/tooltip/#Warmup-and-cooldown).
+ * guidelines](https://spectrum.adobe.com/web/rsp/components/tooltip#behaviors).
  * 
  * @default 500
  */
@@ -28232,160 +28498,19 @@ export const TooltipGetTargetRectExample = () => {
  </>
  );
 };`},similarTo:[],figmaUrl:null},TreeView:{id:"core-collections-treeview",breadcrumb:"Core/Collections/TreeView",importStatement:`import {
+    ActionIconButton,
+    Box,
+    DragAndDropTreeViewExample,
+    InteractiveFieldsDragAndDropExample,
+    Tag,
+    Text,
     TreeView,
     VirtualizedTreeViewExample,
     VirtualizedTreeViewWithActionsExample,
     VirtualizedTreeViewWithDescriptionsExample,
     VirtualizedTreeViewWithExpandControlExample,
     VirtualizedTreeViewWithRenameExample,
-} from "@baseline-ui/core";`,description:"`TreeView` displays hierarchical data as expandable, selectable, and renameable rows with optional per-item actions. Use it for file browsers, folder structures, outlines, or any nested dataset users need to navigate.",documentation:`\`TreeView\` displays hierarchical data as expandable, selectable, and renameable rows with optional per-item actions. Use it for file browsers, folder structures, outlines, or any nested dataset users need to navigate.
-
-* Support for mouse, touch, and keyboard interaction
-* Accessible via React Aria with full keyboard navigation
-* Support for primary and secondary action buttons on items
-* Support for inline renaming of item labels (double-click or F2)
-* Icons and descriptions on individual items
-* Controlled and uncontrolled expansion state
-* Custom item title rendering via \`renderItemTitle\`
-* Virtualization support for large datasets (10,000+ items)
-
-\`\`\`tsx
-import { TreeView } from "@baseline-ui/core";
-const treeItems = {
- id: "root",
- label: "Root item",
- children: [
- {
- id: "documents",
- label: "Documents",
- children: [
- {
- id: "work",
- label: "Work",
- },
- ],
- },
- ],
-};
-
-<TreeView items={treeItems} aria-label="File browser" />;
-\`\`\`
-
-> **Note:** The top-level \`items\` object acts as a virtual root and is not rendered. Only its \`children\` appear in the tree.
-
-Each item can have an \`icon\` property that renders an icon next to the label.
-
-Items can include a \`description\` string, rendered below the label.
-
-A tree with no nested children \u2014 all chevrons are hidden.
-
-Trees with deep nesting (4+ levels) indent items based on depth.
-
-Demonstrates how the component handles lengthy item labels and descriptions.
-
-Control the expansion state with \`expandedKeys\` and \`onExpandedChange\`.
-
-Use \`defaultExpandedKeys\` for the initial expansion state. You can still expand and collapse items via interaction.
-
-Use \`selectedKeys\` to highlight specific items. The tree uses multi-selection mode.
-
-Add primary and secondary action buttons to each row using \`primaryActionIcon\`/\`secondaryActionIcon\` and \`onPrimaryAction\`/\`onSecondaryAction\`. You can set the \`actionsPosition\` prop to \`"start"\` (default) or \`"end"\` to control their placement.
-
-Pass a function to \`primaryActionIcon\` or \`secondaryActionIcon\` to render different icons per item: \`(key: Key) => IconComponent\`.
-
-Similarly, \`primaryActionAriaLabel\` and \`secondaryActionAriaLabel\` accept \`string | ((key: Key) => string)\` for per-item labels.
-
-Enable inline renaming by passing an \`onRename\` callback. Users can rename by double-clicking the label or pressing <kbd>F2</kbd>. Press <kbd>Enter</kbd> to confirm or <kbd>Escape</kbd> to cancel. Blurring the input (e.g., clicking outside) also confirms the rename.
-
-Use \`renderItemTitle\` to customize how item titles are rendered. The function receives the full \`TreeListItem\` and returns a \`ReactNode\`.
-
-Pass \`onAction\` to handle activation of tree items. The callback receives the item's \`key\` and fires when an item is activated (typically via Enter or double-click).
-
-| Selector | Description |
-| -------------------------------------- | ---------------------------------- |
-| \`.BaselineUI-TreeView\` | The root tree container |
-| \`.BaselineUI-TreeView-Row\` | An individual tree row |
-| \`.BaselineUI-TreeView-ExpansionToggle\` | The expand/collapse chevron button |
-| \`.BaselineUI-TreeView-Title\` | The item label text |
-| \`.BaselineUI-TreeView-Description\` | The item description text |
-| \`.BaselineUI-TreeView-RenameInput\` | The inline rename text input |
-
-| Key | Action |
-| ---------------------- | ----------------------------------------------------------------------------- |
-| <kbd>Arrow Down</kbd> | Focus the next item |
-| <kbd>Arrow Up</kbd> | Focus the previous item |
-| <kbd>Arrow Right</kbd> | Expand the focused item, or move focus to the first child if already expanded |
-| <kbd>Arrow Left</kbd> | Collapse the focused item, or move focus to the parent if already collapsed |
-| <kbd>Enter</kbd> | Activate the focused item |
-| <kbd>Space</kbd> | Toggle selection of the focused item |
-| <kbd>Home</kbd> | Focus the first item |
-| <kbd>End</kbd> | Focus the last item |
-| <kbd>F2</kbd> | Start renaming the focused item (requires \`onRename\` prop) |
-| <kbd>Escape</kbd> | Cancel renaming |
-
-* **ListBox** \u2014 for flat, non-hierarchical lists
-* **Menu** \u2014 for action menus and dropdowns
-
-For large trees with thousands of items, use virtualization to improve performance and reduce memory usage.
-
-Consider virtualization when:
-
-* Trees have 500+ total items (including nested children)
-* Trees are deeply nested (5+ levels) with many items per level
-* You need responsive scrolling on mobile devices
-* Memory usage is a concern
-
-Wrap TreeView with the Virtualizer component:
-
-\`\`\`tsx
-import {
- TreeView,
- Virtualizer,
- VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS,
-} from "@baseline-ui/core";
-
-<Virtualizer {...VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.TREE_VIEW}>
- <TreeView
- items={largeTree}
- aria-label="Large file system"
- style={{ height: 600, overflow: "auto" }}
- />
-</Virtualizer>;
-\`\`\`
-
-**Important:** You must specify an explicit height on the TreeView container.
-
-The \`VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.TREE_VIEW\` preset uses a \`rowHeight\` of 44px. To customize row heights (e.g., for items with descriptions), pass \`layout\` and \`layoutOptions\` directly:
-
-\`\`\`tsx
-import { ListLayout, TreeView, Virtualizer } from "@baseline-ui/core";
-
-// Items without descriptions (default)
-<Virtualizer layout={ListLayout} layoutOptions={{ rowHeight: 44 }}>
- <TreeView items={tree} style={{ height: 600, overflow: "auto" }} />
-</Virtualizer>
-
-// Items with descriptions (variable heights)
-<Virtualizer layout={ListLayout} layoutOptions={{ estimatedRowHeight: 60 }}>
- <TreeView
- items={treeWithDescriptions}
- style={{ height: 600, overflow: "auto" }}
- />
-</Virtualizer>
-\`\`\`
-
-With virtualization:
-
-* Only ~20-30 visible items rendered at once (regardless of total tree size)
-* Smooth scrolling up to 100,000+ items
-* Constant memory usage
-* Expand/collapse remains responsive
-
-Without virtualization:
-
-* All expanded items render to DOM
-* Performance degrades beyond ~500 items
-* Memory usage grows with tree size`,props:`interface TreeViewProps {
+} from "@baseline-ui/core";`,description:"`TreeView` displays hierarchical data as expandable, selectable, and renameable rows with optional per-item actions. Use it for file browsers, folder structures, outlines, or any nested dataset users need to navigate.",documentation:'`TreeView` displays hierarchical data as expandable, selectable, and renameable rows with optional per-item actions. Use it for file browsers, folder structures, outlines, or any nested dataset users need to navigate.\n\n* Support for mouse, touch, and keyboard interaction\n* Accessible via React Aria with full keyboard navigation\n* Support for primary and secondary action buttons on items\n* Support for inline renaming of item labels (double-click or F2)\n* Icons and descriptions on individual items\n* Controlled and uncontrolled expansion state\n* Custom item title rendering via `renderItemTitle`\n* Drag and drop to reorder items or move them into other items, with mouse and keyboard\n* Fully custom rows via `renderItem`\n* Virtualization support for large datasets (10,000+ items)\n\n```tsx\nimport { TreeView } from "@baseline-ui/core";\nconst treeItems = {\n id: "root",\n label: "Root item",\n children: [\n {\n id: "documents",\n label: "Documents",\n children: [\n {\n id: "work",\n label: "Work",\n },\n ],\n },\n ],\n};\n\n<TreeView items={treeItems} aria-label="File browser" />;\n```\n\n> **Note:** The top-level `items` object acts as a virtual root and is not rendered. Only its `children` appear in the tree.\n\nEach item can have an `icon` property that renders an icon next to the label.\n\nItems can include a `description` string, rendered below the label.\n\nA tree with no nested children \u2014 all chevrons are hidden.\n\nTrees with deep nesting (4+ levels) indent items based on depth.\n\nDemonstrates how the component handles lengthy item labels and descriptions.\n\nControl the expansion state with `expandedKeys` and `onExpandedChange`.\n\nUse `defaultExpandedKeys` for the initial expansion state. You can still expand and collapse items via interaction.\n\nUse `selectedKeys` to highlight specific items. The tree uses multi-selection mode.\n\nAdd primary and secondary action buttons to each row using `primaryActionIcon`/`secondaryActionIcon` and `onPrimaryAction`/`onSecondaryAction`. You can set the `actionsPosition` prop to `"start"` (default) or `"end"` to control their placement.\n\nPass a function to `primaryActionIcon` or `secondaryActionIcon` to render different icons per item: `(key: Key) => IconComponent`.\n\nSimilarly, `primaryActionAriaLabel` and `secondaryActionAriaLabel` accept `string | ((key: Key) => string)` for per-item labels.\n\nPass the `dragAndDropHooks` returned by `useDragAndDrop` to let users reorder items or move them into other items within the tree. Each row shows a drag handle. Drag the row from anywhere with the mouse, or focus a row, press <kbd>ArrowRight</kbd> to reach its handle (on a collapsed row with children, the first press expands it) and <kbd>Enter</kbd> to start a keyboard drag, then use the arrow keys to choose a position and press <kbd>Enter</kbd> to drop or <kbd>Escape</kbd> to cancel.\n\n`TreeView` does not change your data. Apply the move to your own `items` in the `onMove` callback, where `target.key` is the item dropped relative to and `target.dropPosition` is `"before"`, `"after"` or `"on"` (move into). `target.key` can be one of the dragged `keys` when an item is dropped back next to itself; treat that as no move rather than removing the item first. Any other option of the hook, such as `getAllowedDropOperations`, can be passed alongside `onMove`. Keep passing `dragAndDropHooks` for the tree\'s lifetime; to turn dragging off, pass `isDisabled` to `useDragAndDrop` instead of removing the prop. Items are offered as `"on"` targets even when they have no children, so a file dropped onto a file would become a folder; pass a `shouldAcceptItemDrop` that looks the target up in your own items, such as `(target) => !!findItem(items, target.key)?.children`, to accept drops only on items that already have children. To read tree fields such as `children` in your own `getItems`, pass the item type: `useDragAndDrop<TreeListItem>({ getItems })`.\n\n```tsx\nimport { TreeView, useDragAndDrop } from "@baseline-ui/core";\n\nconst { dragAndDropHooks } = useDragAndDrop({\n onMove({ keys, target }) {\n setItems((items) =>\n moveItems(items, keys, target.key, target.dropPosition),\n );\n },\n});\n\n<TreeView\n items={items}\n dragAndDropHooks={dragAndDropHooks}\n aria-label="File browser"\n/>;\n```\n\nTo start mouse and touch drags only from the handle, pass `pointerDragSource: "handle"` to `useDragAndDrop`. Users can then select text in the rename input or press other controls in the row without starting a drag. Keyboard dragging is unchanged.\n\nIt works the same in a virtualized tree.\n\nCustom rows from `renderItem` get the same drag handle, placed before your content. Style the row being dropped onto from `isDropTarget`, and the row being dragged from `isDragging`. The insertion line spans the full row; to indent it, style `.BaselineUI-DropIndicator` inside the tree.\n\nWhen rows contain text fields or other controls that handle keys themselves, pass `keyboardNavigationBehavior="tab"`. <kbd>Tab</kbd> then moves into a row\'s controls, and keys pressed in them, such as arrows and space in a text field, stay there instead of moving focus through the tree. <kbd>ArrowRight</kbd> and <kbd>ArrowLeft</kbd> on a focused row still expand and collapse it.\n\nEnable inline renaming by passing an `onRename` callback. Users can rename by double-clicking the label or pressing <kbd>F2</kbd>. Press <kbd>Enter</kbd> to confirm or <kbd>Escape</kbd> to cancel. Blurring the input (e.g., clicking outside) also confirms the rename.\n\nWith `dragAndDropHooks`, the whole row is draggable by default, so dragging the mouse across the rename input drags the row instead of selecting text. Pass `pointerDragSource: "handle"` to `useDragAndDrop` to keep text selection in the input.\n\nUse `renderItemTitle` to customize how item titles are rendered. The function receives the full `TreeListItem` and returns a `ReactNode`.\n\nUse `renderItem` to take over the whole row. It receives the `TreeListItem` and a state object (`level`, `isExpanded`, `hasChildItems`, `isSelected`, `isFocusVisible`, `isHovered`, and `toggleExpanded`) and returns the row\'s content. The tree keeps keyboard navigation, selection, focus, and expansion behavior.\n\n```tsx\nimport { ActionIconButton, TreeView } from "@baseline-ui/core";\nimport { ChevronRightIcon } from "@baseline-ui/icons/8";\n\nimport type { TreeItemRenderState, TreeListItem } from "@baseline-ui/core";\n\nconst renderItem = (\n item: TreeListItem,\n { level, isExpanded, hasChildItems, toggleExpanded }: TreeItemRenderState,\n) => (\n <div style={{ paddingInlineStart: (level - 1) * 16 }}>\n {hasChildItems ? (\n <ActionIconButton\n icon={ChevronRightIcon}\n size="xxs"\n aria-label={`${isExpanded ? "Collapse" : "Expand"} ${item.label}`}\n excludeFromTabOrder={true}\n onPress={toggleExpanded}\n />\n ) : null}\n {item.label}\n </div>\n);\n\n<TreeView items={items} renderItem={renderItem} />;\n```\n\nInstead of wiring `toggleExpanded` yourself, you can give a Baseline button `slot="chevron"`: it expands and collapses the row, stays out of the tab order, and gets a localized "Expand" or "Collapse" label. `expandLabel` and `collapseLabel` don\'t apply to it.\n\nThe custom content replaces the chevron, indentation, icon, title, description, and action buttons, as well as the row\'s padding, hover, selected, and focus styling, so draw those from the state you receive. Always draw a focus indicator from `isFocusVisible`; without one, keyboard users can\'t see which row has focus. To style the row with CSS instead, target `.BaselineUI-TreeView-Row` and its `data-focus-visible`, `data-selected`, `data-expanded`, and `data-level` attributes.\n\nThe item `label` is the row\'s only accessible name: other text you draw in the row, such as metadata or tags, isn\'t announced, so put anything screen reader users need into `label`. While `renderItem` is set, `onPrimaryAction`, `onSecondaryAction`, the action icon and label props, `actionsPosition`, `onRename`, `renameLabel`, `renderItemTitle`, `expandLabel`, and `collapseLabel` have no effect.\n\nDefine `renderItem` outside the render, or memoize it: every row re-renders whenever its identity changes. Use Baseline buttons, such as `ActionIconButton`, for controls inside the row. They handle the press without selecting the row. When virtualizing custom rows, set the layout\'s `rowHeight` to the height of your row.\n\nPass `onAction` to handle activation of tree items. The callback receives the item\'s `key` and fires when an item is activated (typically via Enter or double-click).\n\n| Selector | Description |\n| -------------------------------------- | ---------------------------------------------- |\n| `.BaselineUI-TreeView` | The root tree container |\n| `.BaselineUI-TreeView-Row` | An individual tree row |\n| `.BaselineUI-TreeView-ExpansionToggle` | The expand/collapse chevron button |\n| `.BaselineUI-TreeView-DragHandle` | The drag handle, shown with `dragAndDropHooks` |\n| `.BaselineUI-TreeView-Title` | The item label text |\n| `.BaselineUI-TreeView-Description` | The item description text |\n| `.BaselineUI-TreeView-RenameInput` | The inline rename text input |\n\n| Key | Action |\n| ---------------------- | ----------------------------------------------------------------------------- |\n| <kbd>Arrow Down</kbd> | Focus the next item |\n| <kbd>Arrow Up</kbd> | Focus the previous item |\n| <kbd>Arrow Right</kbd> | Expand the focused item, or move focus to the first child if already expanded |\n| <kbd>Arrow Left</kbd> | Collapse the focused item, or move focus to the parent if already collapsed |\n| <kbd>Enter</kbd> | Activate the focused item |\n| <kbd>Space</kbd> | Toggle selection of the focused item |\n| <kbd>Home</kbd> | Focus the first item |\n| <kbd>End</kbd> | Focus the last item |\n| <kbd>F2</kbd> | Start renaming the focused item (requires `onRename` prop) |\n| <kbd>Escape</kbd> | Cancel renaming |\n\n* **ListBox** \u2014 for flat, non-hierarchical lists\n* **Menu** \u2014 for action menus and dropdowns\n\nFor large trees with thousands of items, use virtualization to improve performance and reduce memory usage.\n\nConsider virtualization when:\n\n* Trees have 500+ total items (including nested children)\n* Trees are deeply nested (5+ levels) with many items per level\n* You need responsive scrolling on mobile devices\n* Memory usage is a concern\n\nWrap TreeView with the Virtualizer component:\n\n```tsx\nimport {\n TreeView,\n Virtualizer,\n VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS,\n} from "@baseline-ui/core";\n\n<Virtualizer {...VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.TREE_VIEW}>\n <TreeView\n items={largeTree}\n aria-label="Large file system"\n style={{ height: 600, overflow: "auto" }}\n />\n</Virtualizer>;\n```\n\n**Important:** You must specify an explicit height on the TreeView container.\n\nThe `VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.TREE_VIEW` preset uses a `rowHeight` of 44px. To customize row heights (e.g., for items with descriptions), pass `layout` and `layoutOptions` directly:\n\n```tsx\nimport { ListLayout, TreeView, Virtualizer } from "@baseline-ui/core";\n\n// Items without descriptions (default)\n<Virtualizer layout={ListLayout} layoutOptions={{ rowHeight: 44 }}>\n <TreeView items={tree} style={{ height: 600, overflow: "auto" }} />\n</Virtualizer>\n\n// Items with descriptions (variable heights)\n<Virtualizer layout={ListLayout} layoutOptions={{ estimatedRowHeight: 60 }}>\n <TreeView\n items={treeWithDescriptions}\n style={{ height: 600, overflow: "auto" }}\n />\n</Virtualizer>\n```\n\nWith virtualization:\n\n* Only ~20-30 visible items rendered at once (regardless of total tree size)\n* Smooth scrolling up to 100,000+ items\n* Constant memory usage\n* Expand/collapse remains responsive\n\nWithout virtualization:\n\n* All expanded items render to DOM\n* Performance degrades beyond ~500 items\n* Memory usage grows with tree size',props:`interface TreeViewProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
  * identifier; new components should exclude it via
@@ -28533,6 +28658,43 @@ onAction?: (key: Key) => void
  * @default item => item.label
  */
 renderItemTitle?: (item: TreeListItem) => ReactNode
+/**
+ * The drag and drop hooks that enable moving items within the tree. Get them
+ * from \`useDragAndDrop\`. Keep passing them for the tree's lifetime; to turn
+ * dragging off, pass \`isDisabled\` to \`useDragAndDrop\` instead of removing
+ * this prop.
+ */
+dragAndDropHooks?: DragHooks<T> & DropHooks
+/**
+ * How the keyboard moves focus into a row. With \`"arrow"\`, the arrow keys
+ * move between a row and its controls. With \`"tab"\`, <kbd>Tab</kbd> moves
+ * into a row's controls and keys pressed in them, such as arrows and space in
+ * a text field, stay there. Use \`"tab"\` when rows contain text fields or other
+ * controls that handle keys themselves.
+ * 
+ * @default "arrow"
+ */
+keyboardNavigationBehavior?: "arrow" | "tab"
+/**
+ * Renders the entire content of each row, replacing the chevron,
+ * indentation, icon, title, description and actions, as well as the row's
+ * padding, hover, selected and focus styling. The tree keeps its keyboard
+ * navigation, selection, focus and expansion behavior, and the item \`label\`
+ * remains the row's accessible name, so include a text label in the content
+ * and draw a focus indicator from \`isFocusVisible\`.
+ * 
+ * When set, \`onPrimaryAction\`, \`onSecondaryAction\`, \`primaryActionIcon\`,
+ * \`secondaryActionIcon\`, \`primaryActionAriaLabel\`,
+ * \`secondaryActionAriaLabel\`, \`actionsPosition\`, \`onRename\`, \`renameLabel\`,
+ * \`renderItemTitle\`, \`expandLabel\` and \`collapseLabel\` have no effect.
+ * 
+ * With \`dragAndDropHooks\`, the drag handle is still rendered before the
+ * content. Style the drop target from \`isDropTarget\`.
+ * 
+ * Every row re-renders whenever the function's identity changes, so pass a
+ * stable function rather than an inline one.
+ */
+renderItem?: (item: TreeListItem, state: TreeItemRenderState) => ReactNode
 }`,stories:{usage:[{id:"core-collections-treeview--basic",name:"Basic",snippet:`const Basic = () => <TreeView
     onAction={fn()}
     items={getTreeItems({ includeIcons: false, includeDescription: false })} />;`},{id:"core-collections-treeview--with-description",name:"With Description",snippet:`const WithDescription = () => <TreeView
@@ -28603,7 +28765,12 @@ renderItemTitle?: (item: TreeListItem) => ReactNode
       >
         <i style={{ color: "black" }}>{item.label}</i>
       </span>
-    )} />;`},{id:"core-collections-treeview--with-selected-items",name:"With Selected Items",snippet:`const WithSelectedItems = () => <TreeView
+    )} />;`},{id:"core-collections-treeview--custom-row",name:"Custom Row",snippet:`const CustomRow = () => <TreeView
+    onAction={fn()}
+    items={fileItems}
+    defaultExpandedKeys={["contracts"]}
+    selectedKeys={["msa"]}
+    renderItem={renderFileRow} />;`},{id:"core-collections-treeview--with-selected-items",name:"With Selected Items",snippet:`const WithSelectedItems = () => <TreeView
     onAction={fn()}
     items={getTreeItems({ includeIcons: true, includeDescription: false })}
     selectedKeys={["documents", "pictures"]} />;`},{id:"core-collections-treeview--empty-tree",name:"Empty Tree",snippet:'const EmptyTree = () => <TreeView onAction={fn()} items={{ id: "root", label: "Root" }} />;'},{id:"core-collections-treeview--single-item",name:"Single Item",snippet:`const SingleItem = () => <TreeView
@@ -28684,11 +28851,21 @@ renderItemTitle?: (item: TreeListItem) => ReactNode
     }} />;`},{id:"core-collections-treeview--with-virtualization",name:"With Virtualization",snippet:'const WithVirtualization = () => <VirtualizedTreeViewExample onAction={fn()} aria-label="Virtualized tree with 10,000+ items" />;'},{id:"core-collections-treeview--virtualized-with-descriptions",name:"Virtualized With Descriptions",snippet:'const VirtualizedWithDescriptions = () => <VirtualizedTreeViewWithDescriptionsExample onAction={fn()} aria-label="Virtualized tree with descriptions" />;'},{id:"core-collections-treeview--virtualized-with-expand-control",name:"Virtualized With Expand Control",snippet:'const VirtualizedWithExpandControl = () => <VirtualizedTreeViewWithExpandControlExample onAction={fn()} aria-label="Virtualized tree with expand control" />;'},{id:"core-collections-treeview--virtualized-with-actions",name:"Virtualized With Actions",snippet:'const VirtualizedWithActions = () => <VirtualizedTreeViewWithActionsExample onAction={fn()} aria-label="Virtualized tree with actions" />;'},{id:"core-collections-treeview--virtualized-with-rename",name:"Virtualized With Rename",snippet:`const VirtualizedWithRename = () => <VirtualizedTreeViewWithRenameExample
     onAction={fn()}
     aria-label="Virtualized tree with rename support"
-    onRename={fn()} />;`}],implementation:`import { EllipseIcon, PlusIcon, TrashIcon } from "@baseline-ui/icons/16";
+    onRename={fn()} />;`},{id:"core-collections-treeview--drag-and-drop",name:"Drag And Drop",snippet:"const DragAndDrop = () => <DragAndDropTreeViewExample />;"},{id:"core-collections-treeview--handle-only-drag-and-drop",name:"Handle Only Drag And Drop",snippet:`const HandleOnlyDragAndDrop = () => (
+  <DragAndDropTreeViewExample pointerDragSource="handle" onRename={fn()} />
+);`},{id:"core-collections-treeview--interactive-fields-drag-and-drop",name:"Interactive Fields Drag And Drop",snippet:"const InteractiveFieldsDragAndDrop = () => <InteractiveFieldsDragAndDropExample />;"},{id:"core-collections-treeview--virtualized-drag-and-drop",name:"Virtualized Drag And Drop",snippet:"const VirtualizedDragAndDrop = () => <DragAndDropTreeViewExample virtualized={true} />;"},{id:"core-collections-treeview--custom-row-drag-and-drop",name:"Custom Row Drag And Drop",snippet:`const CustomRowDragAndDrop = () => (
+  <DragAndDropTreeViewExample items={fileItems} renderItem={renderFileRow} />
+);`}],implementation:`import { ChevronRightIcon } from "@baseline-ui/icons/8";
+import { EllipseIcon, PlusIcon, TrashIcon } from "@baseline-ui/icons/16";
 import React, { useMemo, useState } from "react";
+import { useTreeData } from "react-stately/useTreeData";
 
 import { ActionButton } from "../../ActionButton";
+import { ActionIconButton } from "../../ActionIconButton";
 import { Box } from "../../Box";
+import { Checkbox } from "../../Checkbox";
+import { TextInput } from "../../TextInput";
+import { useDragAndDrop } from "../../UNSAFE_ListBox/hooks/useDragAndDrop";
 import {
  ListLayout,
  VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS,
@@ -28697,8 +28874,12 @@ import {
 import { TreeView } from "../TreeView";
 import { generateLargeTree, getTreeItems } from "./data";
 
-import type { TreeListItem, TreeViewProps } from "../TreeView.types";
-import type { Key } from "@react-types/shared";
+import type {
+ TreeItemRenderState,
+ TreeListItem,
+ TreeViewProps,
+} from "../TreeView.types";
+import type { DropPosition, Key } from "@react-types/shared";
 
 export function TreeViewWithPrimaryAction({
  onPrimaryAction,
@@ -28772,6 +28953,125 @@ export function TreeViewWithCustomTitle(): React.JSX.Element {
  );
 }
 
+function CustomRow({
+ item,
+ state,
+ useChevronSlot,
+}: {
+ item: TreeListItem;
+ state: TreeItemRenderState;
+ useChevronSlot?: boolean;
+}): React.JSX.Element {
+ return (
+ <div
+ style={{
+ display: "flex",
+ alignItems: "center",
+ gap: 8,
+ paddingInlineStart: (state.level - 1) * 16,
+ }}
+ >
+ {state.hasChildItems && useChevronSlot ? (
+ <ActionIconButton slot="chevron" icon={ChevronRightIcon} size="xxs" />
+ ) : null}
+ {state.hasChildItems && !useChevronSlot ? (
+ <ActionIconButton
+ icon={ChevronRightIcon}
+ size="xxs"
+ aria-label={\`Toggle \${item.label}\`}
+ excludeFromTabOrder={true}
+ onPress={state.toggleExpanded}
+ />
+ ) : null}
+ <span>{item.label}</span>
+ <span>{\`level \${state.level}\`}</span>
+ {state.isExpanded ? <span>expanded</span> : null}
+ {state.isSelected ? <span>selected</span> : null}
+ {state.isFocusVisible ? <span>focus visible</span> : null}
+ {state.isDropTarget ? <span>drop target</span> : null}
+ {state.isDragging ? <span>dragging</span> : null}
+ </div>
+ );
+}
+
+export function TreeViewWithCustomRow({
+ useChevronSlot,
+}: {
+ useChevronSlot?: boolean;
+}): React.JSX.Element {
+ return (
+ <TreeView
+ items={getTreeItems({})}
+ renderItem={(item, state) => (
+ <CustomRow item={item} state={state} useChevronSlot={useChevronSlot} />
+ )}
+ />
+ );
+}
+
+export function TreeViewWithChangingChildren(): React.JSX.Element {
+ const [changed, setChanged] = useState(false);
+ const items = useMemo(() => {
+ const tree = getTreeItems({});
+ if (!changed) return tree;
+ return {
+ ...tree,
+ children: tree.children?.map((child: TreeListItem) =>
+ child.id === "documents"
+ ? {
+ ...child,
+ children: [
+ { id: "archive", label: "Archive" },
+ ...(child.children ?? []),
+ ],
+ }
+ : child,
+ ),
+ };
+ }, [changed]);
+
+ return (
+ <Box display="flex" flexDirection="column" gap="md">
+ <ActionButton
+ label="Change children"
+ onPress={() => {
+ setChanged(true);
+ }}
+ />
+ <TreeView
+ items={items}
+ aria-label="Files"
+ defaultExpandedKeys={["documents"]}
+ />
+ </Box>
+ );
+}
+
+export function TreeViewWithSwappableRow(): React.JSX.Element {
+ const [swapped, setSwapped] = useState(false);
+ const items = useMemo(() => getTreeItems({}), []);
+
+ return (
+ <Box display="flex" flexDirection="column" gap="md">
+ <ActionButton
+ label="Swap row"
+ onPress={() => {
+ setSwapped(true);
+ }}
+ />
+ <TreeView
+ items={items}
+ defaultExpandedKeys={["documents"]}
+ renderItem={(item) => (
+ <span>
+ {swapped ? \`After: \${item.label}\` : \`Before: \${item.label}\`}
+ </span>
+ )}
+ />
+ </Box>
+ );
+}
+
 // Example 1: Basic virtualization
 export const VirtualizedTreeViewExample: React.FC<
  Omit<React.ComponentProps<typeof TreeView>, "items"> & {
@@ -28930,7 +29230,177 @@ export const VirtualizedTreeViewWithRenameExample: React.FC<
  />
  </Virtualizer>
  );
-};`},similarTo:[],figmaUrl:null},UNSAFE_ListBox:{id:"core-collections-unsafe-listbox",breadcrumb:"Core/Collections/UNSAFE_ListBox",importStatement:`import {
+};
+
+type TreeNode = ReturnType<typeof useTreeData<TreeListItem>>["items"][number];
+
+function toTreeListItem(node: TreeNode): TreeListItem {
+ // useTreeData gives leaves an empty array; keep them leaves.
+ const isLeaf = !node.value.children && !node.children?.length;
+ return {
+ ...node.value,
+ children: isLeaf
+ ? undefined
+ : node.children?.map((child) => toTreeListItem(child)),
+ };
+}
+
+const renderCustomRow: TreeViewProps["renderItem"] = (item, state) => (
+ <CustomRow item={item} state={state} />
+);
+
+export const DragAndDropTreeViewExample: React.FC<{
+ onMove?: (move: {
+ keys: Key[];
+ key: Key;
+ dropPosition: DropPosition;
+ }) => void;
+ virtualized?: boolean;
+ customRow?: boolean;
+ actionsPosition?: TreeViewProps["actionsPosition"];
+ withActions?: boolean;
+ items?: TreeListItem;
+ renderItem?: TreeViewProps["renderItem"];
+ onRename?: TreeViewProps["onRename"];
+ pointerDragSource?: "item" | "handle";
+ keyboardNavigationBehavior?: TreeViewProps["keyboardNavigationBehavior"];
+}> = ({
+ onMove,
+ virtualized = false,
+ customRow = false,
+ actionsPosition,
+ withActions = false,
+ items,
+ renderItem,
+ onRename,
+ pointerDragSource,
+ keyboardNavigationBehavior,
+}) => {
+ const initialItems = useMemo(
+ () =>
+ items ??
+ (virtualized
+ ? generateLargeTree({ itemsPerLevel: 100, maxDepth: 1 })
+ : getTreeItems({})),
+ [items, virtualized],
+ );
+ const tree = useTreeData({
+ initialItems: initialItems.children ?? [],
+ getKey: (item) => item.id,
+ getChildren: (item) => item.children ?? [],
+ });
+
+ const { dragAndDropHooks } = useDragAndDrop<TreeListItem>({
+ pointerDragSource,
+ onMove({ keys, target }) {
+ onMove?.({
+ keys: [...keys],
+ key: target.key,
+ dropPosition: target.dropPosition,
+ });
+ if (target.dropPosition === "before") {
+ tree.moveBefore(target.key, keys);
+ } else if (target.dropPosition === "after") {
+ tree.moveAfter(target.key, keys);
+ } else {
+ const index = tree.getItem(target.key)?.children?.length ?? 0;
+ for (const [i, key] of [...keys].entries()) {
+ tree.move(key, target.key, index + i);
+ }
+ }
+ },
+ });
+
+ const treeItems = useMemo(
+ () => ({
+ ...initialItems,
+ children: tree.items.map((node) => toTreeListItem(node)),
+ }),
+ [initialItems, tree.items],
+ );
+
+ const treeView = (
+ <TreeView
+ aria-label="Drag and drop tree"
+ items={treeItems}
+ dragAndDropHooks={dragAndDropHooks}
+ keyboardNavigationBehavior={keyboardNavigationBehavior}
+ actionsPosition={actionsPosition}
+ {...(withActions && {
+ primaryActionIcon: PlusIcon,
+ primaryActionAriaLabel: "Add",
+ secondaryActionIcon: TrashIcon,
+ secondaryActionAriaLabel: "Delete",
+ })}
+ onRename={onRename}
+ renderItem={renderItem ?? (customRow ? renderCustomRow : undefined)}
+ style={
+ virtualized ? { height: 600, width: 400, overflow: "auto" } : undefined
+ }
+ />
+ );
+
+ return virtualized ? (
+ <Virtualizer {...VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.TREE_VIEW}>
+ {treeView}
+ </Virtualizer>
+ ) : (
+ treeView
+ );
+};
+
+const renderFieldRow: TreeViewProps["renderItem"] = (item, state) => (
+ <Box
+ display="flex"
+ alignItems="center"
+ gap="md"
+ paddingX="md"
+ paddingY="sm"
+ backgroundColor={
+ state.isSelected
+ ? "background.primary.strong"
+ : "background.primary.subtle"
+ }
+ outlineColor={
+ state.isFocusVisible || state.isDropTarget
+ ? "focused.default"
+ : "transparent"
+ }
+ outlineWidth={2}
+ outlineStyle="solid"
+ outlineOffset={-2}
+ style={{ paddingInlineStart: (state.level - 1) * 24 }}
+ >
+ {state.hasChildItems ? (
+ <ActionIconButton
+ icon={ChevronRightIcon}
+ size="xxs"
+ variant="secondary"
+ aria-label={\`\${state.isExpanded ? "Collapse" : "Expand"} \${item.label}\`}
+ excludeFromTabOrder={true}
+ onPress={state.toggleExpanded}
+ style={{ rotate: state.isExpanded ? "90deg" : undefined }}
+ />
+ ) : null}
+ <TextInput
+ aria-label={\`Name of \${item.label}\`}
+ defaultValue={item.label}
+ style={{ flex: 1, minWidth: 0 }}
+ />
+ <Checkbox label="Visible" defaultSelected={true} />
+ </Box>
+);
+
+export const InteractiveFieldsDragAndDropExample: React.FC<{
+ onMove?: React.ComponentProps<typeof DragAndDropTreeViewExample>["onMove"];
+}> = ({ onMove }) => (
+ <DragAndDropTreeViewExample
+ pointerDragSource="handle"
+ keyboardNavigationBehavior="tab"
+ renderItem={renderFieldRow}
+ onMove={onMove}
+ />
+);`},similarTo:[],figmaUrl:null},UNSAFE_ListBox:{id:"core-collections-unsafe-listbox",breadcrumb:"Core/Collections/UNSAFE_ListBox",importStatement:`import {
     DragAndDropListBoxExample,
     DynamicListBoxExample,
     UNSAFE_ListBox as ListBox,
@@ -29261,7 +29731,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"
@@ -29866,7 +30336,9 @@ export const VirtualListBoxGridLayoutWithOutsideClickTargetExample: React.FC<
  );
 };
 
-export const ScrollIntoViewExample: React.FC = () => {
+export const ScrollIntoViewExample: React.FC<{ idPrefix?: string }> = ({
+ idPrefix = "item-",
+}) => {
  const listBoxHandle = React.useRef<ListHandle>(null);
 
  return (
@@ -29874,11 +30346,11 @@ export const ScrollIntoViewExample: React.FC = () => {
  <Box display="flex" gap="sm">
  <ActionButton
  label="Scroll to Item 0"
- onPress={() => listBoxHandle.current?.scrollIntoView("item-0")}
+ onPress={() => listBoxHandle.current?.scrollIntoView(\`\${idPrefix}0\`)}
  />
  <ActionButton
  label="Scroll to Item 15"
- onPress={() => listBoxHandle.current?.scrollIntoView("item-15")}
+ onPress={() => listBoxHandle.current?.scrollIntoView(\`\${idPrefix}15\`)}
  />
  </Box>
 
@@ -29891,7 +30363,7 @@ export const ScrollIntoViewExample: React.FC = () => {
  >
  <ListBox
  items={Array.from({ length: 20 }).map((_, i) => ({
- id: \`item-\${i}\`,
+ id: \`\${idPrefix}\${i}\`,
  label: \`Item \${i}\`,
  }))}
  listBoxHandle={listBoxHandle}
@@ -30340,6 +30812,10 @@ layout: LayoutClass<O> | ILayout<O>
  * Options for the layout.
  */
 layoutOptions?: O
+/**
+ * Whether to observe each item's size with a ResizeObserver and re-measure when it changes.
+ */
+shouldObserveItemSize?: boolean
 }`,stories:{usage:[{id:"core-collections-virtualizer--list-layout-example",name:"ListLayoutExample",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
   10 | export default meta;
   11 |
@@ -30365,7 +30841,13 @@ layoutOptions?: O
   14 | export { WithVirtualization as TreeViewPresetExample } from "../TreeView/TreeView.stories";
 > 15 | export { RTLWithVirtualization as RTLImageGalleryPresetExample } from "../ImageGallery/ImageGallery.stories";
      | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-  16 |`}}],implementation:""},similarTo:[],figmaUrl:null},AccordionItem:{id:"core-navigation-accordion-accordionitem",importStatement:'import { Accordion, AccordionItem, AccordionItemExample, Checkbox } from "@baseline-ui/core";',description:"",documentation:null,props:`interface AccordionItemProps {
+  16 |`}}],implementation:""},similarTo:[],figmaUrl:null},AccordionItem:{id:"core-navigation-accordion-accordionitem",importStatement:`import {
+    Accordion,
+    AccordionForceMountExample,
+    AccordionItem,
+    AccordionItemExample,
+    Checkbox,
+} from "@baseline-ui/core";`,description:"",documentation:null,props:`interface AccordionItemProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
  * identifier; new components should exclude it via
@@ -30445,6 +30927,18 @@ value: Key
  * the accordion header.
  */
 subLabel?: string
+/**
+ * Keeps the content mounted while the item is collapsed, so its state (for
+ * example, typed input) is preserved. Once the collapse animation completes,
+ * the content is hidden from view and from assistive technology.
+ * 
+ * The content renders even if the item is never expanded, and content of an
+ * initially collapsed item mounts hidden, so it measures zero sizes until the
+ * first expand. Set this up front: toggling it remounts the content.
+ * 
+ * @default false
+ */
+shouldForceMount?: boolean
 /**
  * @internal
  */
@@ -30465,13 +30959,15 @@ index?: number
         title="Accordion Item"
         value="item"
         showActionsOnTriggerOnly>{undefined}</AccordionItemExample>
-</Accordion>;`}],implementation:`import { EllipseIcon } from "@baseline-ui/icons/16";
+</Accordion>;`},{id:"core-navigation-accordion-accordionitem--force-mount",name:"Force Mount",snippet:'const ForceMount = () => <AccordionForceMountExample shouldForceMount defaultExpandedKeys={new Set(["item-1"])} />;'}],implementation:`import { EllipseIcon } from "@baseline-ui/icons/16";
 import { themeVars } from "@baseline-ui/tokens";
 import React from "react";
 
 import { Accordion } from "../Accordion";
 import { AccordionItem } from "../AccordionItem";
 
+import type { Key } from "react";
+
 const contentStyle = {
  padding: 10,
  color: themeVars.color.text.primary,
@@ -30553,6 +31049,74 @@ export const AccordionWithDisabledItemsExample: React.FC<
  Omit<React.ComponentProps<typeof AccordionExample>, "disabledKeys">
 > = (props) => {
  return <AccordionExample {...props} disabledKeys={new Set(["item-1"])} />;
+};
+
+export const AccordionWithLastItemDisabledExample: React.FC<
+ Omit<React.ComponentProps<typeof AccordionExample>, "disabledKeys">
+> = (props) => {
+ return <AccordionExample {...props} disabledKeys={new Set(["item-3"])} />;
+};
+
+export const AccordionWithNumericKeysExample: React.FC = () => {
+ return (
+ <Accordion disabledKeys={new Set([2])}>
+ {[1, 2, 3].map((n) => (
+ <AccordionItem
+ key={n}
+ title={\`Accordion Item \${n}\`}
+ value={n}
+ style={contentStyle}
+ >
+ lorem ipsum dolor sit amet consectetur adipisicing elit
+ </AccordionItem>
+ ))}
+ </Accordion>
+ );
+};
+
+export const AccordionForceMountExample: React.FC<
+ Omit<React.ComponentProps<typeof Accordion>, "children"> & {
+ shouldForceMount?: boolean;
+ /** Playwright CT cannot pass a \`Set\` prop, so specs pass a key instead. */
+ defaultExpandedKey?: string;
+ }
+> = ({ shouldForceMount, defaultExpandedKey, ...props }) => {
+ return (
+ <Accordion
+ {...props}
+ {...(defaultExpandedKey && {
+ defaultExpandedKeys: new Set([defaultExpandedKey]),
+ })}
+ >
+ {Array.from({ length: 2 }).map((_, i) => (
+ <AccordionItem
+ key={i}
+ title={\`Accordion Item \${i + 1}\`}
+ value={\`item-\${i + 1}\`}
+ style={contentStyle}
+ shouldForceMount={shouldForceMount}
+ >
+ <input aria-label={\`Item \${i + 1} input\`} />
+ </AccordionItem>
+ ))}
+ </Accordion>
+ );
+};
+
+export const ControlledAccordionExample: React.FC<{
+ onChange?: (keys: Set<Key>) => void;
+}> = ({ onChange }) => {
+ const [keys, setKeys] = React.useState<Set<Key>>(new Set());
+
+ return (
+ <AccordionExample
+ expandedKeys={keys}
+ onChange={(k) => {
+ setKeys(k);
+ onChange?.(k);
+ }}
+ />
+ );
 };`},similarTo:[],figmaUrl:null},IconColorInput:{id:"core-forms-colorinput-iconcolorinput",importStatement:'import { Box, IconColorInput } from "@baseline-ui/core";',description:"",documentation:null,props:`interface IconColorInputProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
@@ -30632,7 +31196,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 +31204,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 +31310,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 +32037,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 +32678,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 +33341,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 +33413,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 +36432,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 +36450,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 +38173,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 m={"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 r=["charts-barchart--basic","charts-barchart--custom-colors","charts-barchart--formatted","charts-barchart--hidden-axes","charts-barchart--many-series","charts-barchart--mixed-stacking","charts-barchart--single-series","charts-barchart--stacked","charts-barchart--stacked-with-three-series","charts-barchart--thicker-bars","charts-barchart--with-legend","charts-linechart--basic","charts-linechart--custom-colors","charts-linechart--formatted","charts-linechart--hidden-axes","charts-linechart--linear-curve","charts-linechart--many-lines","charts-linechart--single-line","charts-linechart--sparkline","charts-linechart--with-dots","charts-linechart--with-legend","charts-piechart--basic","charts-piechart--custom-colors","charts-piechart--donut","charts-piechart--long-legend-names","charts-piechart--many-slices","charts-piechart--no-labels","charts-piechart--no-legend","charts-piechart--no-tooltip","charts-piechart--small-slices-below-five-percent","core-buttons-actionbutton--as-div","core-buttons-actionbutton--basic","core-buttons-actionbutton--disabled","core-buttons-actionbutton--variants","core-buttons-actionbutton--with-both-icons","core-buttons-actionbutton--with-icon","core-buttons-actionbutton--with-popover","core-buttons-actiongroup--basic","core-buttons-actiongroup--default-selected","core-buttons-actiongroup--disabled","core-buttons-actiongroup--disabled-items","core-buttons-actiongroup--disabled-items-multi-select","core-buttons-actiongroup--disabled-with-selection","core-buttons-actiongroup--multi-select","core-buttons-actiongroup--multiple-default-selected","core-buttons-actiongroup--multiple-selected-items","core-buttons-actiongroup--single-item","core-buttons-actiongroup--single-select","core-buttons-actiongroup--with-custom-action-item","core-buttons-actiongroup--with-icon","core-buttons-actiongroup--with-icon-disabled","core-buttons-actiongroup--with-icon-multi-select","core-buttons-actiongroup--without-tooltip","core-buttons-actioniconbutton--basic","core-buttons-actioniconbutton--disabled","core-buttons-actioniconbutton--variants","core-buttons-actioniconbutton--with-popover","core-buttons-actioniconbutton--with-tooltip","core-buttons-reaction--basic","core-buttons-reaction--disabled","core-buttons-reaction--read-only","core-buttons-reaction--selected","core-buttons-reaction--variants","core-buttons-scrollcontrolbutton--basic","core-buttons-scrollcontrolbutton--hide-for-keyboard","core-buttons-scrollcontrolbutton--with-custom-delay","core-buttons-scrollcontrolbutton--with-reversed-items","core-buttons-scrollcontrolbutton--without-smooth-scroll","core-buttons-togglebutton--basic","core-buttons-togglebutton--controlled","core-buttons-togglebutton--default-selected","core-buttons-togglebutton--disabled","core-buttons-togglebutton--variants","core-buttons-togglebutton--with-icon","core-buttons-toggleiconbutton--basic","core-buttons-toggleiconbutton--primary-variants","core-buttons-toggleiconbutton--secondary-variants","core-buttons-toggleiconbutton--state-specific-icons","core-buttons-toggleiconbutton--teritary-variants","core-buttons-toggleiconbutton--toolbar-variants","core-buttons-toggleiconbutton--with-tooltip","core-collections-filelist--basic","core-collections-filelist--disabled","core-collections-filelist--disabled-items","core-collections-filelist--loading","core-collections-filelist--long-filename","core-collections-filelist--many-items","core-collections-filelist--mixed-states","core-collections-filelist--with-error","core-collections-gridlist--basic","core-collections-gridlist--default-selected-keys","core-collections-gridlist--disabled","core-collections-gridlist--disabled-rows","core-collections-gridlist--disallow-empty-selection","core-collections-gridlist--with-drag-and-drop","core-collections-gridlist--with-multiple-selection","core-collections-gridlist--with-single-selection","core-collections-imagegallery--basic","core-collections-imagegallery--more-items","core-collections-imagegallery--rtl-with-virtualization","core-collections-imagegallery--scrollable","core-collections-imagegallery--with-controlled-list","core-collections-imagegallery--with-custom-aspect-ratio","core-collections-imagegallery--with-custom-fit","core-collections-imagegallery--with-custom-image-dimensions","core-collections-imagegallery--with-custom-image-renderer","core-collections-imagegallery--with-custom-size","core-collections-imagegallery--with-deletion","core-collections-imagegallery--with-dynamic-list","core-collections-imagegallery--with-long-labels","core-collections-imagegallery--with-medium-size","core-collections-imagegallery--with-multiple-selection","core-collections-imagegallery--with-reordering","core-collections-imagegallery--with-single-selection","core-collections-imagegallery--with-single-selection-and-deletion","core-collections-imagegallery--with-virtualization","core-collections-listbox--basic","core-collections-listbox--controlled-auto-scroll","core-collections-listbox--drag-and-drop-custom-preview","core-collections-listbox--drag-and-drop-grid","core-collections-listbox--drag-and-drop-horizontal","core-collections-listbox--drag-and-drop-multiple","core-collections-listbox--drag-and-drop-single","core-collections-listbox--dynamic-items","core-collections-listbox--with-custom-option-style","core-collections-listbox--with-customized-section-titles","core-collections-listbox--with-default-selected","core-collections-listbox--with-disabled-items","core-collections-listbox--with-focus-loop","core-collections-listbox--with-padded-section-titles","core-collections-listbox--with-section-titles","core-collections-listbox--with-sections","core-collections-listbox--with-selected","core-collections-menu--basic","core-collections-menu--controlled-open","core-collections-menu--disabled","core-collections-menu--long-menu","core-collections-menu--multiple-selection","core-collections-menu--section-level-selection","core-collections-menu--single-selection","core-collections-menu--with-custom-options","core-collections-menu--with-custom-trigger","core-collections-menu--with-disabled-keys","core-collections-menu--with-disabled-submenu","core-collections-menu--with-icons","core-collections-menu--with-long-labels","core-collections-menu--with-sections","core-collections-menu--with-selected-keys-controlled","core-collections-menu--with-submenu","core-collections-table--async-loading","core-collections-table--default","core-collections-table--disabled-rows","core-collections-table--drag-and-drop","core-collections-table--empty","core-collections-table--long-text-content","core-collections-table--multiple-selection","core-collections-table--row-action","core-collections-table--selection-with-row-action","core-collections-table--single-selection","core-collections-table--sorting","core-collections-table--virtualized","core-collections-table--with-tag-and-menu","core-collections-table--with-toolbar","core-collections-taggroup--basic","core-collections-taggroup--disabled","core-collections-taggroup--disabled-items","core-collections-taggroup--group-variants","core-collections-taggroup--multi-select","core-collections-taggroup--removable","core-collections-taggroup--single-select","core-collections-taggroup--small-variants","core-collections-taggroup--variants","core-collections-treeview--basic","core-collections-treeview--custom-row","core-collections-treeview--custom-row-drag-and-drop","core-collections-treeview--deeply-nested","core-collections-treeview--drag-and-drop","core-collections-treeview--empty-tree","core-collections-treeview--flat-tree","core-collections-treeview--handle-only-drag-and-drop","core-collections-treeview--interactive-fields-drag-and-drop","core-collections-treeview--long-labels","core-collections-treeview--single-item","core-collections-treeview--virtualized-drag-and-drop","core-collections-treeview--virtualized-with-actions","core-collections-treeview--virtualized-with-descriptions","core-collections-treeview--virtualized-with-expand-control","core-collections-treeview--virtualized-with-rename","core-collections-treeview--with-actions-at-end","core-collections-treeview--with-controlled-expanded-keys","core-collections-treeview--with-custom-render-icons","core-collections-treeview--with-custom-render-item-title","core-collections-treeview--with-default-expanded-keys","core-collections-treeview--with-description","core-collections-treeview--with-icons","core-collections-treeview--with-primary-action","core-collections-treeview--with-primary-and-secondary-action","core-collections-treeview--with-primary-secondary-and-description-action","core-collections-treeview--with-rename","core-collections-treeview--with-selected-items","core-collections-treeview--with-virtualization","core-collections-unsafe-listbox--basic","core-collections-unsafe-listbox--controlled-auto-scroll","core-collections-unsafe-listbox--drag-and-drop-custom-preview","core-collections-unsafe-listbox--drag-and-drop-grid","core-collections-unsafe-listbox--drag-and-drop-horizontal","core-collections-unsafe-listbox--drag-and-drop-multiple","core-collections-unsafe-listbox--drag-and-drop-single","core-collections-unsafe-listbox--dynamic-items","core-collections-unsafe-listbox--virtualized-horizontal","core-collections-unsafe-listbox--virtualized-scroll-into-view","core-collections-unsafe-listbox--virtualized-vertical","core-collections-unsafe-listbox--virtualized-with-section-separators","core-collections-unsafe-listbox--virtualized-with-sections","core-collections-unsafe-listbox--with-custom-option-style","core-collections-unsafe-listbox--with-customized-section-titles","core-collections-unsafe-listbox--with-default-selected","core-collections-unsafe-listbox--with-disabled-items","core-collections-unsafe-listbox--with-focus-loop","core-collections-unsafe-listbox--with-padded-section-titles","core-collections-unsafe-listbox--with-section-titles","core-collections-unsafe-listbox--with-sections","core-collections-unsafe-listbox--with-selected","core-collections-virtualizer--grid-layout-example","core-collections-virtualizer--list-layout-example","core-collections-virtualizer--rtl-image-gallery-preset-example","core-collections-virtualizer--tree-view-preset-example","core-content-avatar--basic","core-content-avatar--disabled","core-content-avatar--variants","core-content-avatar--with-image","core-content-avatar--with-initials","core-content-avatar--with-notification","core-content-code--basic","core-content-code--with-scroll","core-content-colorswatch--basic","core-content-colorswatch--disabled","core-content-colorswatch--full-transparency","core-content-colorswatch--indeterminate","core-content-colorswatch--interactive","core-content-colorswatch--none","core-content-colorswatch--variants","core-content-colorswatch--with-custom-label","core-content-colorswatch--with-tooltip","core-content-colorswatch--with-transparency","core-content-kbd--common-shortcuts","core-content-kbd--complex-shortcut","core-content-kbd--key-combination","core-content-kbd--key-combination-with-symbols","core-content-kbd--modifier-key","core-content-kbd--single-key","core-content-kbd--symbols-showcase","core-content-markdown--basic","core-content-markdown--with-caret","core-content-pointpicker--basic","core-content-pointpicker--disabled","core-content-pointpicker-pointpickercontent--custom-cursor","core-content-pointpicker-pointpickercontent--custom-cursor-without-default","core-content-pointpicker-pointpickercontent--default","core-content-pointpicker-pointpickercontent--multiple-point-pickers","core-content-pointpicker-pointpickercontent--points-within-radius","core-content-pointpicker-pointpickercontent--programmatic-focus","core-content-pointpicker-pointpickercontent--snap-to-point","core-content-pointpicker-pointpickercontent--trailing-element","core-content-pointpicker-pointpickercontent--without-grid-lines","core-content-pointpicker-pointpickerdisplay--with-custom-scale","core-content-pointpicker-pointpickerdisplay--with-description","core-content-pointpicker-pointpickerdisplay--with-floating-display","core-content-preview--disabled","core-content-preview--image-preview","core-content-preview--svg-preview","core-content-preview--text-preview","core-content-preview--variants","core-content-preview--without-delete-button","core-content-separator--basic","core-content-separator--secondary","core-content-separator--secondary-vertical","core-content-separator--vertical","core-content-statuscard--basic","core-content-statuscard--interactive","core-content-statuscard--long-content","core-content-statuscard--truncated-title","core-content-statuscard--variants","core-content-statuscard--with-custom-icon","core-content-statuscard--with-trailing-element","core-content-statuscard--without-description","core-content-tag--basic","core-content-tag--disabled","core-content-tag--disabled-removable","core-content-tag--long-text","core-content-tag--removable","core-content-tag--selected","core-content-tag--selected-with-icon","core-content-tag--small","core-content-tag--small-with-icon","core-content-tag--with-icon","core-content-text--basic","core-content-text--slots","core-content-text--variants","core-feedback-skeleton--circle","core-feedback-skeleton--composed-example","core-feedback-skeleton--custom-shape","core-feedback-skeleton--document-view-area","core-feedback-skeleton--rectangle","core-feedback-skeleton--text-line","core-forms-buttonselect--basic","core-forms-buttonselect--controlled","core-forms-buttonselect--controlled-button-selection","core-forms-buttonselect--default-button-selected-value","core-forms-buttonselect--default-select-selected-value","core-forms-buttonselect--disabled","core-forms-buttonselect--exclude-from-tab-order","core-forms-buttonselect--items-without-icons","core-forms-buttonselect--long-text-labels","core-forms-buttonselect--many-items","core-forms-buttonselect--variants","core-forms-buttonselect--with-action-behaviour","core-forms-buttonselect--with-button-disabled-key","core-forms-buttonselect--with-callbacks","core-forms-buttonselect--with-default-open","core-forms-buttonselect--with-disabled-keys","core-forms-buttonselect--with-disabled-keys-and-default-selected","core-forms-buttonselect--with-hidden-label","core-forms-buttonselect--with-individual-button-behaviour","core-forms-buttonselect--with-multiple-disabled-keys","core-forms-buttonselect--with-validation-error","core-forms-buttonselect--without-tooltip","core-forms-calendar--default","core-forms-calendar--disabled","core-forms-calendar--extra-small","core-forms-calendar--extra-small-no-title","core-forms-calendar--fixed-weeks","core-forms-calendar--international-calendar","core-forms-calendar--read-only","core-forms-calendar--select-month","core-forms-calendar--select-month-and-year","core-forms-calendar--select-month-and-year-extra-small","core-forms-calendar--select-month-and-year-with-title","core-forms-calendar--select-month-extra-small","core-forms-calendar--select-month-with-title","core-forms-calendar--unavailable-dates","core-forms-calendar--with-default-value","core-forms-calendar--with-min-max","core-forms-calendar--with-title","core-forms-checkbox--checked","core-forms-checkbox--indeterminate","core-forms-checkbox--primary","core-forms-checkbox--with-error","core-forms-checkbox--with-label-at-end","core-forms-checkbox--with-label-at-start","core-forms-colorinput--basic","core-forms-colorinput--color-presets-only","core-forms-colorinput--controlled","core-forms-colorinput--disabled","core-forms-colorinput--indeterminate","core-forms-colorinput--lazy-picker","core-forms-colorinput--lazy-picker-mobile","core-forms-colorinput--with-alpha","core-forms-colorinput--with-controlled-open","core-forms-colorinput--with-custom-trigger","core-forms-colorinput--with-default-open","core-forms-colorinput--with-default-value","core-forms-colorinput--with-label","core-forms-colorinput--with-label-at-start","core-forms-colorinput--with-removal","core-forms-colorinput--without-alpha","core-forms-colorinput--without-color-label","core-forms-colorinput--without-color-presets","core-forms-colorinput-iconcolorinput--compact","core-forms-colorinput-iconcolorinput--compact-disabled","core-forms-colorinput-iconcolorinput--compact-indeterminate","core-forms-colorinput-iconcolorinput--disabled","core-forms-colorinput-iconcolorinput--indeterminate","core-forms-colorinput-iconcolorinput--standard","core-forms-colorinput-iconcolorinput--without-tooltip","core-forms-colorswatchpicker--basic","core-forms-colorswatchpicker--controlled","core-forms-colorswatchpicker--default-value","core-forms-colorswatchpicker--disabled","core-forms-colorswatchpicker--with-icon","core-forms-colorswatchpicker--with-label","core-forms-colorswatchpicker--with-label-at-start","core-forms-combobox--basic","core-forms-combobox--disabled","core-forms-combobox--dynamic-collections","core-forms-combobox--ghost-variant","core-forms-combobox--items-with-icon","core-forms-combobox--read-only","core-forms-combobox--variants","core-forms-combobox--with-custom-filter","core-forms-combobox--with-custom-number-value","core-forms-combobox--with-custom-value","core-forms-combobox--with-description","core-forms-combobox--with-error-message","core-forms-combobox--with-focus-menu-trigger","core-forms-combobox--with-label-at-start","core-forms-combobox--with-manual-menu-trigger","core-forms-combobox--with-min-max-value","core-forms-combobox--with-render-option","core-forms-combobox--with-tooltip","core-forms-combobox--with-warning-message","core-forms-datefield--basic","core-forms-datefield--controlled","core-forms-datefield--default-value","core-forms-datefield--different-granularity","core-forms-datefield--disabled","core-forms-datefield--ghost-variant","core-forms-datefield--html-forms","core-forms-datefield--placeholder-value","core-forms-datefield--read-only","core-forms-datefield--variants","core-forms-datefield--with-calendar-icon","core-forms-datefield--with-calendar-picker","core-forms-datefield--with-calendar-picker-and-default-value","core-forms-datefield--with-calendar-picker-and-min-max","core-forms-datefield--with-calendar-picker-disabled","core-forms-datefield--with-calendar-picker-error","core-forms-datefield--with-calendar-picker-ghost","core-forms-datefield--with-calendar-picker-read-only","core-forms-datefield--with-error-message","core-forms-datefield--with-error-message-only","core-forms-datefield--with-label","core-forms-datefield--with-label-at-start","core-forms-datefield--with-min-and-max-value","core-forms-datefield--with-warning-message","core-forms-fileinput--basic","core-forms-fileinput--custom-labels","core-forms-fileinput--directory","core-forms-fileinput--disabled","core-forms-fileinput--label-position-start","core-forms-fileinput--multiple","core-forms-fileinput--variants","core-forms-fileinput--with-error","core-forms-fileinput--with-warning","core-forms-fileinput--without-label","core-forms-fileuploader--button-variant","core-forms-fileuploader--default","core-forms-fileuploader--disabled","core-forms-fileuploader--error-dropzone","core-forms-fileuploader--inline","core-forms-fileuploader--no-label","core-forms-fileuploader--variants","core-forms-imagedropzone--basic","core-forms-imagedropzone--controlled","core-forms-imagedropzone--disabled","core-forms-imagedropzone--variants","core-forms-imagedropzone--with-default-image","core-forms-imagedropzone--with-file-size-limit","core-forms-imagedropzone--with-file-type-restriction","core-forms-numberinput--basic","core-forms-numberinput--controlled","core-forms-numberinput--disabled","core-forms-numberinput--ghost-variant","core-forms-numberinput--read-only","core-forms-numberinput--variants","core-forms-numberinput--with-custom-step","core-forms-numberinput--with-description","core-forms-numberinput--with-error","core-forms-numberinput--with-error-and-error-message","core-forms-numberinput--with-label","core-forms-numberinput--with-label-at-start","core-forms-numberinput--with-min-and-max","core-forms-numberinput--without-stepper","core-forms-pagination--controlled","core-forms-pagination--disabled","core-forms-pagination--primary","core-forms-pagination--read-only","core-forms-pagination--variants","core-forms-pagination--with-custom-messages","core-forms-pagination--with-default-value","core-forms-pagination--with-large-numbers","core-forms-pagination--with-step","core-forms-pagination--without-actions","core-forms-radiogroup--basic","core-forms-radiogroup--controlled","core-forms-radiogroup--custom-render-option","core-forms-radiogroup--default-value","core-forms-radiogroup--disabled","core-forms-radiogroup--disabled-values","core-forms-radiogroup--horizontal","core-forms-radiogroup--read-only","core-forms-radiogroup--with-group-label","core-forms-radiogroup--with-group-label-at-start","core-forms-radiogroup--with-option-description","core-forms-radiogroup--with-option-label-at-start","core-forms-rangecalendar--default","core-forms-rangecalendar--disabled","core-forms-rangecalendar--extra-small","core-forms-rangecalendar--extra-small-no-title","core-forms-rangecalendar--fixed-weeks","core-forms-rangecalendar--international-calendar","core-forms-rangecalendar--read-only","core-forms-rangecalendar--select-month","core-forms-rangecalendar--select-month-and-year","core-forms-rangecalendar--select-month-and-year-with-title","core-forms-rangecalendar--select-month-with-title","core-forms-rangecalendar--unavailable-dates","core-forms-rangecalendar--with-default-value","core-forms-rangecalendar--with-min-max","core-forms-rangecalendar--with-title","core-forms-searchinput--basic","core-forms-searchinput--clear-button-focusable","core-forms-searchinput--disabled","core-forms-searchinput--variants","core-forms-select--basic","core-forms-select--controlled","core-forms-select--empty-items","core-forms-select--ghost","core-forms-select--long-labels","core-forms-select--long-list","core-forms-select--read-only","core-forms-select--scrollable","core-forms-select--with-autocomplete","core-forms-select--with-controlled-open","core-forms-select--with-custom-trigger","core-forms-select--with-default-open","core-forms-select--with-default-selected-item","core-forms-select--with-description","core-forms-select--with-disabled","core-forms-select--with-disabled-items","core-forms-select--with-error","core-forms-select--with-error-and-error-message","core-forms-select--with-label","core-forms-select--with-label-at-start","core-forms-select--with-section-headers","core-forms-select--with-sections","core-forms-select--with-virtualized-section-headers","core-forms-select--with-warning","core-forms-select--with-warning-and-warning-message","core-forms-select-iconselect--basic","core-forms-select-iconselect--disabled","core-forms-select-iconselect--read-only","core-forms-select-iconselect--with-default-open","core-forms-select-iconselect--with-error","core-forms-select-iconselect--with-warning","core-forms-select-iconselect--without-icon","core-forms-select-iconselect--without-tooltip","core-forms-select-multiselect--basic","core-forms-select-multiselect--controlled","core-forms-select-multiselect--ghost","core-forms-select-multiselect--hide-clear","core-forms-select-multiselect--hide-select-all","core-forms-select-multiselect--hide-select-all-and-clear","core-forms-select-multiselect--long-labels-as-tags","core-forms-select-multiselect--long-list","core-forms-select-multiselect--max-count-1","core-forms-select-multiselect--max-count-3","core-forms-select-multiselect--read-only","core-forms-select-multiselect--read-only-with-tags-open","core-forms-select-multiselect--scrollable","core-forms-select-multiselect--with-autocomplete","core-forms-select-multiselect--with-controlled-open","core-forms-select-multiselect--with-custom-trigger","core-forms-select-multiselect--with-default-open","core-forms-select-multiselect--with-default-selected-item","core-forms-select-multiselect--with-description","core-forms-select-multiselect--with-disabled","core-forms-select-multiselect--with-disabled-items","core-forms-select-multiselect--with-error","core-forms-select-multiselect--with-error-and-error-message","core-forms-select-multiselect--with-error-and-tags","core-forms-select-multiselect--with-label","core-forms-select-multiselect--with-label-at-start","core-forms-select-multiselect--with-sections","core-forms-select-multiselect--with-warning","core-forms-select-multiselect--with-warning-and-warning-message","core-forms-slider--basic","core-forms-slider--controlled","core-forms-slider--disabled","core-forms-slider--read-only","core-forms-slider--read-only-with-number-input","core-forms-slider--with-label","core-forms-slider--with-label-and-number-input","core-forms-slider--with-min-and-max","core-forms-slider--with-number-input","core-forms-slider--with-step","core-forms-slider-iconslider--basic","core-forms-slider-iconslider--disabled","core-forms-slider-iconslider--with-number-input","core-forms-slider-iconslider--without-tooltip","core-forms-switch--basic","core-forms-switch--disabled","core-forms-switch--selected","core-forms-switch--selected-disabled","core-forms-switch--with-label","core-forms-switch--with-label-and-status","core-forms-switch--with-label-in-left-and-status","core-forms-taggedpagination--basic","core-forms-taggedpagination--disabled","core-forms-taggedpagination--read-only","core-forms-taggedpagination--variant","core-forms-taggedpagination--with-page-label","core-forms-textinput--basic","core-forms-textinput--controlled","core-forms-textinput--disabled","core-forms-textinput--ghost-variant","core-forms-textinput--html-forms","core-forms-textinput--multiline","core-forms-textinput--multiline-variants","core-forms-textinput--multiline-with-rows","core-forms-textinput--read-only","core-forms-textinput--variants","core-forms-textinput--with-description","core-forms-textinput--with-error-message","core-forms-textinput--with-label","core-forms-textinput--with-label-at-start","core-forms-textinput--with-warning-message","core-forms-timefield--basic","core-forms-timefield--controlled","core-forms-timefield--default-value","core-forms-timefield--disabled","core-forms-timefield--ghost-variant","core-forms-timefield--html-forms","core-forms-timefield--placeholder-value","core-forms-timefield--read-only","core-forms-timefield--variants","core-forms-timefield--with-error-message","core-forms-timefield--with-error-message-only","core-forms-timefield--with-label","core-forms-timefield--with-label-at-start","core-forms-timefield--with-min-and-max-value","core-forms-timefield--with-warning-message","core-media-audioplayer--basic","core-media-audioplayer--small","core-miscellaneous-editor--basic","core-miscellaneous-editor--headless-custom","core-miscellaneous-editor-plain--auto-focus","core-miscellaneous-editor-plain--auto-focus-at-end","core-miscellaneous-editor-plain--auto-focus-at-start","core-miscellaneous-editor-plain--clear-on-cancel","core-miscellaneous-editor-plain--clear-on-save","core-miscellaneous-editor-plain--controlled","core-miscellaneous-editor-plain--custom-submit-icon","core-miscellaneous-editor-plain--default-save-disabled","core-miscellaneous-editor-plain--disabled","core-miscellaneous-editor-plain--minimal","core-miscellaneous-editor-plain--minimal-disabled","core-miscellaneous-editor-plain--minimal-multiline","core-miscellaneous-editor-plain--minimal-save-disabled","core-miscellaneous-editor-plain--not-inline","core-miscellaneous-editor-plain--save-on-enter","core-miscellaneous-editor-plain--variants","core-miscellaneous-editor-plain--with-cancel","core-miscellaneous-editor-plain--with-dynamic-caret-position","core-miscellaneous-editor-rich-text--auto-focus","core-miscellaneous-editor-rich-text--auto-focus-at-end","core-miscellaneous-editor-rich-text--clear-on-cancel","core-miscellaneous-editor-rich-text--clear-on-save","core-miscellaneous-editor-rich-text--controlled","core-miscellaneous-editor-rich-text--default","core-miscellaneous-editor-rich-text--disabled","core-miscellaneous-editor-rich-text--long-content","core-miscellaneous-editor-rich-text--mentions","core-miscellaneous-editor-rich-text--mentions-max-suggestions","core-miscellaneous-editor-rich-text--not-inline","core-miscellaneous-editor-rich-text--save-disabled","core-miscellaneous-editor-rich-text--save-on-enter","core-miscellaneous-editor-rich-text--variants","core-miscellaneous-editor-rich-text--with-cancel","core-miscellaneous-editor-rich-text--with-custom-footer-buttons","core-miscellaneous-editor-rich-text--with-placeholder","core-miscellaneous-freehandcanvas--basic","core-miscellaneous-freehandcanvas--clear-button","core-miscellaneous-freehandcanvas--controlled","core-miscellaneous-freehandcanvas--default-value","core-miscellaneous-freehandcanvas--disabled","core-miscellaneous-freehandcanvas--history-enabled","core-miscellaneous-freehandcanvas--label","core-miscellaneous-freehandcanvas--streamlining","core-miscellaneous-icon--basic","core-miscellaneous-toolbar--basic","core-miscellaneous-toolbar--collapsible","core-miscellaneous-toolbar--vertical","core-miscellaneous-toolbar--with-inputs","core-miscellaneous-toolbar--with-over-flow","core-miscellaneous-toolbar--with-tabbing-within","core-miscellaneous-toolbar--with-tooltip","core-navigation-accordion--basic","core-navigation-accordion--controlled","core-navigation-accordion--default-expanded-keys","core-navigation-accordion--disabled","core-navigation-accordion--single-expansion","core-navigation-accordion-accordionitem--force-mount","core-navigation-accordion-accordionitem--show-actions-on-trigger-only","core-navigation-accordion-accordionitem--with-buttons","core-navigation-accordion-accordionitem--with-sub-labels","core-navigation-accordion-accordionitem--with-tabbable-content","core-navigation-disclosure--basic","core-navigation-disclosure--controlled","core-navigation-disclosure--truncated-title","core-navigation-disclosure--variants","core-navigation-disclosure--with-custom-icon","core-navigation-disclosure--with-interactive-content","core-navigation-disclosure--with-long-content","core-navigation-disclosure--without-description","core-navigation-link--basic","core-navigation-link--client-side-action","core-navigation-link--variants","core-navigation-stepper--all-complete","core-navigation-stepper--all-states","core-navigation-stepper--condensed","core-navigation-stepper--controlled","core-navigation-stepper--default","core-navigation-stepper--expanded-without-descriptions","core-navigation-stepper--frontier-ahead-of-selection","core-navigation-stepper--indicator-only","core-navigation-stepper--indicator-only-expanded","core-navigation-stepper--is-disabled","core-navigation-stepper--long-title-and-description","core-navigation-stepper--mixed-indicator-and-titled-items","core-navigation-stepper--per-item-aria-label-overrides-title","core-navigation-stepper--single-item","core-navigation-stepper--size-small-condensed","core-navigation-stepper--size-small-expanded","core-navigation-stepper--two-steps","core-navigation-stepper--with-disabled-step","core-navigation-tabs--basic","core-navigation-tabs--controlled","core-navigation-tabs--ghost","core-navigation-tabs--with-action-button","core-navigation-tabs--with-close-button","core-navigation-tabs--with-default-selected","core-navigation-tabs--with-disabled","core-navigation-tabs--with-focusable-content","core-navigation-tabs--with-specific-disabled","core-navigation-tabs-tabitem--with-icon","core-overlays-alertdialog--auto-focus-cancel-button","core-overlays-alertdialog--basic","core-overlays-alertdialog--custom-focused-button","core-overlays-alertdialog--default-open","core-overlays-alertdialog--long-content","core-overlays-alertdialog--only-cancel-button","core-overlays-alertdialog--only-primary-action","core-overlays-alertdialog--primary-action-disabled","core-overlays-alertdialog--separate-close-handler","core-overlays-alertdialog--with-text-input","core-overlays-alertdialog--with-title-only","core-overlays-alertdialog--without-close-button","core-overlays-alertdialog--without-icon","core-overlays-alertdialog--without-message-and-actions","core-overlays-dialog--basic","core-overlays-dialog--default-open","core-overlays-dialog--different-sizes","core-overlays-dialog--ghost","core-overlays-drawer--basic","core-overlays-drawer--with-action","core-overlays-inlinetoolbar--basic","core-overlays-inlinetoolbar--controlled","core-overlays-inlinetoolbar--disabled","core-overlays-inlinetoolbar--disabled-keys","core-overlays-inlinetoolbar--with-interactive-element","core-overlays-inlinetoolbar--with-scroll","core-overlays-modal--basic","core-overlays-modal--controlled","core-overlays-modal--default-open","core-overlays-modal-modalcontent--disabled-animation","core-overlays-modal-modalcontent--drawer-mobile","core-overlays-modal-modalcontent--drawer-mobile-with-nested-popover","core-overlays-modal-modalcontent--form-controls","core-overlays-modal-modalcontent--long-content","core-overlays-modal-modalcontent--not-dismissable","core-overlays-modal-modalcontent--uncontrolled-interaction-outside","core-overlays-modal-modalcontent--with-disabled-focus-management","core-overlays-modal-modalcontent--with-inert","core-overlays-popover--basic","core-overlays-popover--event-leak-fix","core-overlays-popover--with-arrow","core-overlays-popover--with-boundary-element","core-overlays-popover--with-custom-target","core-overlays-popover--with-dynamic-trigger-width","core-overlays-popover--with-no-boundary","core-overlays-popover--with-scrollable-content","core-overlays-popover--with-scrollable-content-non-modal","core-overlays-popover--with-scrollable-viewport","core-overlays-popover--with-tooltip","core-overlays-popover-popovercontent--basic","core-overlays-popover-popovercontent--contained-focus","core-overlays-popover-popovercontent--default-open-with-arrow","core-overlays-popover-popovercontent--disable-animation","core-overlays-popover-popovercontent--manual-repositioning","core-overlays-popover-popovercontent--nested-scrollable-containers","core-overlays-popover-popovercontent--scroll-repositioning","core-overlays-popover-popovercontent--with-boundary-axis","core-overlays-popover-popovercontent--with-horizontal-boundary-behavior","core-overlays-popover-popovertrigger--basic","core-overlays-popover-popovertrigger--function-children","core-overlays-popover-popovertrigger--with-updated-position","core-overlays-tooltip--basic","core-overlays-tooltip--controlled-open","core-overlays-tooltip--disabled","core-overlays-tooltip--focus-trigger","core-overlays-tooltip--no-text","core-overlays-tooltip--placement","core-overlays-tooltip--variants","core-overlays-tooltip--variants-size","core-overlays-tooltip--with-cross-offset","core-overlays-tooltip--with-focusable","core-overlays-tooltip--with-offset","core-overlays-tooltip--with-on-open-change","core-status-inlinealert--basic","core-status-inlinealert--compact","core-status-inlinealert--compact-with-action","core-status-inlinealert--compact-with-action-and-close","core-status-inlinealert--multi-line","core-status-inlinealert--multi-line-with-action","core-status-inlinealert--multi-line-with-action-and-close","core-status-inlinealert--sizes","core-status-inlinealert--variants","core-status-inlinealert--with-action","core-status-inlinealert--with-action-and-close","core-status-progressbar--basic","core-status-progressbar--variants","core-status-progressbar--with-custom-number-formatter","core-status-progressbar--with-custom-value-label","core-status-progressbar--with-error","core-status-progressbar--with-max-value","core-status-progressbar--with-min-and-max-value","core-status-progressbar--with-min-value","core-status-progressbar--with-no-description","core-status-progressbar--with-no-label","core-status-progressbar--with-show-value","core-status-progressspinner--error","core-status-progressspinner--primary","core-status-progressspinner--success","core-status-progressspinner--variants","core-status-progressspinner--without-label","core-status-toast--basic","core-status-toast--timeout","core-status-toast--variants-with-action","core-status-toast--variants-without-action","core-status-toast--with-action","core-utilities-actionable--basic","core-utilities-actionable--disabled","core-utilities-actionable--with-complex-content","core-utilities-actionable--with-div","core-utilities-actionable--with-dynamic-button-styling","core-utilities-actionable--with-dynamic-child-styling","core-utilities-box--basic","core-utilities-box--element-type","core-utilities-box--flex-layout","core-utilities-box--media-queries","core-utilities-box--nested-boxes","core-utilities-dateformat--basic","core-utilities-dateformat--time-only","core-utilities-dateformat--time-only-with-time-zone","core-utilities-dateformat--time-zone-24-hour","core-utilities-dateformat--with-date-and-time","core-utilities-deviceprovider--always-desktop","core-utilities-deviceprovider--always-mobile","core-utilities-deviceprovider--basic","core-utilities-deviceprovider--custom-breakpoints","core-utilities-frameprovider--always-contained","core-utilities-frameprovider--basic","core-utilities-frameprovider--custom-portal-container","core-utilities-frameprovider--inside-shadow-root","core-utilities-frameprovider--nested-containers","core-utilities-frameprovider--never-contained","core-utilities-frameprovider--popover-with-frame-boundary","core-utilities-frameprovider--portal-container-outside-container","core-utilities-frameprovider--with-interactive-elements-outside-of-container","core-utilities-group--basic","core-utilities-i18nprovider--string-format","core-utilities-messageformat--basic","core-utilities-numberformat--basic","core-utilities-numberformat--currency","core-utilities-numberformat--currency-with-fraction-digits","core-utilities-numberformat--currency-with-fraction-digits-and-currency-display","core-utilities-numberformat--percent","core-utilities-numberformat--percent-with-fraction-digits","core-utilities-panel--basic","core-utilities-panel--collapsible","core-utilities-panel--conditional","core-utilities-panel--controlled","core-utilities-panel--disabled-handle","core-utilities-panel--max-size","core-utilities-panel--multiple","core-utilities-panel--nested","core-utilities-panel--persistent","core-utilities-panel--vertical","core-utilities-portal--basic","core-utilities-themeprovider--basic","json-render-examples--dashboard","json-render-examples--data-table","json-render-examples--login-form","json-render-examples--settings-panel"];var h={version:"3.4.0"};var b=`
 # 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.
@@ -37580,7 +38216,7 @@ When recommending styling or customization approaches:
 4. **Theming Support**: Design systems with themes enabled; use the theming guides for color scheme customization
 5. **Browser Compatibility**: Ensure components are used in browser environments with required APIs
 6. **Box Component Usage**: Use the Box component to wrap all components that need to be styled with the design system. The Box component is a generic container component that can be used to wrap other components. It is used to provide a consistent API for layout and spacing. You can use any sprinkle as a prop to add styling to the box.
-`,a=`
+`,l=`
 A list of available components with descriptions and similar component suggestions. In case don't find the exact component you are looking for, you can look for similar components in the "Similar To" column. The "Similar To" column is a list of components that are similar to the one you are looking for.
 
 A component can be imported using: 
@@ -37588,7 +38224,7 @@ A component can be imported using:
 \`\`\`tsx
 import { ComponentName } from "@baseline-ui/core";
 \`\`\`
-`,r=`
+`,c=`
 A complete icon library organized by size with import instructions. The icons are organized by size and can be imported using the import statement provided.
 
 An icon can be imported using:
@@ -37604,7 +38240,7 @@ Example:
 \`\`\`tsx
 import { IconName } from "@baseline-ui/icons/12";
 \`\`\`
-`;var m=`
+`;var g=`
 Detailed documentation, props, and story IDs for any Baseline UI component. This resource provides comprehensive component specifications and usage examples.
 
 ## Response Structure
@@ -37640,11 +38276,11 @@ Components can be imported using:
 \`\`\`tsx
 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.
-`,s=`
+`,f=`
+Generate a live demo URL for a Baseline UI story. Use a story ID from the Storybook index; the component info tool lists them for each component. The response is the URL, or an error result with suggestions when the story id is unknown. You can use this URL to understand the structure of the component and how to customize it.
+`,y=`
+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.
+`,d=`
 Best practices and guidelines for using Baseline UI components, styling, and design tokens. READ THIS BEFORE DOING ANYTHING.
 
 ## Usage
@@ -37652,9 +38288,9 @@ Best practices and guidelines for using Baseline UI components, styling, and des
 Use this resource to:
 - Understand best practices for using Baseline UI components
 - Understand styling guidelines for using Baseline UI components
-`,l=`
+`,p=`
 A guide for implementing styling elements in Baseline UI components or applying styling to existing components. READ THIS BEFORE DOING ANYTHING.
-`,g=`
+`,v=`
 List all 8 available resources in the Baseline UI MCP server with their descriptions and URIs. Use this tool to discover what information and documentation is available.
 
 ## Available Resources
@@ -37692,14 +38328,15 @@ Use this tool to:
 - Consult **list_components** to find the right component for your needs
 - Reference **theming** for custom design systems
 - Check **styling** for CSS and design token guidance
-`;var C=`# List of available components in Baseline UI design system
+`;var I=`# 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}
+`,P=Object.entries(m).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}
-export{z as a};
+
+`),D=new Set(r);function B(n){let e=n.toLowerCase();if(!e)return [];let t=r.filter(s=>s.includes(e));if(t.length>0)return t.slice(0,5);let a=e.split("--")[0];return a?r.filter(s=>s.includes(a)).slice(0,5):[]}function K(){let n=new McpServer({name:"baseline-ui",version:h.version});return n.registerResource("list_components","resource://baseline-ui/list_components.md",{description:l,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:I}]})),n.registerResource("list_icons","resource://baseline-ui/list_icons.md",{description:c,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:P}]})),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:p,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.styling}]})),n.registerResource("guidelines","resource://baseline-ui/guidelines.md",{description:d,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:b}]})),n.registerTool("get_component_info",{title:"Get component info",description:g,inputSchema:{componentName:z.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:f,inputSchema:{storyId:z.string()}},({storyId:e})=>{let t=e.toLowerCase();if(!D.has(t)){let a=B(e);return {isError:true,content:[{type:"text",text:`Unknown story id "${e}".`+(a.length>0?` Did you mean: ${a.join(", ")}?`:"")+" Story ids come from the Storybook index; get_component_info lists them under `stories.usage[].id`."}]}}return {content:[{type:"text",text:`https://nutrient.io/baseline-ui/iframe.html?id=${t}`}]}}),n.registerTool("get_figma_url",{title:"Get Figma URL",description:y,inputSchema:{componentName:z.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:v,inputSchema:{}},()=>({content:[{type:"text",text:JSON.stringify([{name:"list_components",uri:"resource://baseline-ui/list_components.md",description:l,mimeType:"text/markdown"},{name:"list_icons",uri:"resource://baseline-ui/list_icons.md",description:c,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:p,mimeType:"text/markdown"},{name:"guidelines",uri:"resource://baseline-ui/guidelines.md",description:d,mimeType:"text/markdown"}],null,2)}]})),n}
+export{K as a};