@baseline-ui/mcp 3.3.0 → 3.4.0

package/dist/server.cjs

@@ -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.
@@ -2582,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";
@@ -3313,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}
  />
+ </>
  );
 };
 
@@ -3439,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
@@ -3458,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.
 
@@ -3811,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}
  />
+ </>
  );
 };
 
@@ -3937,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
@@ -3956,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 {
 /**
@@ -4781,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
@@ -5024,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
 /**
@@ -5041,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
@@ -5073,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"]
 /**
@@ -6212,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"
@@ -6324,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} />;
 \`\`\`
@@ -6339,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">
@@ -6355,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 {
@@ -6675,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
@@ -6721,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"
 /**
@@ -7481,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.
  */
@@ -8512,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.
  */
@@ -8913,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 (
@@ -8922,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 })),
  );
  }}
  />
@@ -10660,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
@@ -12989,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!
  ) : (
@@ -13080,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.
  */
@@ -13271,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: {
@@ -13613,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}\`,
@@ -13695,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}
@@ -14250,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.
  * 
@@ -14302,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.
  */
@@ -19230,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
@@ -19551,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";
 
@@ -19581,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
@@ -19831,7 +20018,7 @@ 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 | null>
 /**
@@ -21925,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
@@ -22023,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"\`.
@@ -23059,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}\`);
@@ -23916,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(
@@ -23940,7 +24068,7 @@ export const DragAndDropTableExample: React.FC<
  onReorder: handleReorder,
  });
 
- return (
+ const table = (
  <Table dragAndDropHooks={dragAndDropHooks} aria-label="Files">
  <TableHeader>
  <Column id="drag">
@@ -23984,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. */
@@ -24121,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}>
@@ -24170,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 {
@@ -25226,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.
@@ -26747,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"
@@ -26899,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] =
@@ -26991,6 +27160,8 @@ export const ToastExample = ({ onAction }: { onAction?: () => void }) => {
  : undefined,
  actionLabel: shouldIncludeAction ? "Action" : undefined,
  arrangement,
+ closeLabel,
+ canClose,
  },
  {
  timeout: timeoutValue,
@@ -27600,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,
@@ -27857,6 +28035,7 @@ export const CollapsibleChildren: React.FC<{
  size="lg"
  variant="toolbar"
  tooltip={true}
+ data-testid="toolbar-overflow-button"
  />
  ),
  }
@@ -28141,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
  */
@@ -28319,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
@@ -28620,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
@@ -28690,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
@@ -28771,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,
@@ -28784,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,
@@ -28859,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"> & {
@@ -29017,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,
@@ -29953,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 (
@@ -29961,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>
 
@@ -29978,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}
@@ -30427,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 |
@@ -30452,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
@@ -30532,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
  */
@@ -30552,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,
@@ -30640,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
@@ -37696,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.3.0"};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.
@@ -37739,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: 
@@ -37747,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:
@@ -37763,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
@@ -37799,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=`
+`,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.
-`,s=`
+`,d=`
 Best practices and guidelines for using Baseline UI components, styling, and design tokens. READ THIS BEFORE DOING ANYTHING.
 
 ## Usage
@@ -37811,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
@@ -37851,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(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(t=>"- "+t).join(`
+${e.map(t=>"- "+t).join(`
 `)}`).join(`
-`);function z(){let n=new mcp_js.McpServer({name:"baseline-ui",version:p.version});return n.registerResource("list_components","resource://baseline-ui/list_components.md",{description:a,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:C}]})),n.registerResource("list_icons","resource://baseline-ui/list_icons.md",{description:r,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:T}]})),n.registerResource("getting_started","resource://baseline-ui/getting_started.md",{description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.gettingStarted}]})),n.registerResource("nutrient_web_viewer_theming","resource://baseline-ui/nutrient_web_viewer_theming.md",{description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.nutrientWebViewerTheming}]})),n.registerResource("theming","resource://baseline-ui/theming.md",{description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.theming}]})),n.registerResource("internationalization","resource://baseline-ui/internationalization.md",{description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.internationalization}]})),n.registerResource("styling","resource://baseline-ui/styling.md",{description:l,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.styling}]})),n.registerResource("guidelines","resource://baseline-ui/guidelines.md",{description:s,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:u}]})),n.registerTool("get_component_info",{title:"Get component info",description:m,inputSchema:{componentName:zod.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:h,inputSchema:{storyId:zod.z.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:zod.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: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}
-exports.createServer=z;
+
+`),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 mcp_js.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:zod.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:zod.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:zod.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}
+exports.createServer=K;