@baseline-ui/mcp 3.4.0 → 3.5.0

package/dist/{chunk-KU5KEP2T.js → chunk-IMFQXPWD.js}

@@ -700,7 +700,7 @@ export function ArabicLocaleLtrOverridePieChart() {
 * It supports adding buttons to the header
 
 \`\`\`jsx
-import { Accordion, AccordionItem } from "../../utils";
+import { Accordion, AccordionItem } from "@baseline-ui/core";
 
 <Accordion>
  <AccordionItem title="Item 1" value="item-1">
@@ -779,16 +779,19 @@ You can disable items using the \`disabledKeys\` prop. This prop accepts a set o
 </Accordion>
 \`\`\`
 
-You can add buttons to the header of the \`AccordionItem\` component using the \`buttons\` prop. This prop accepts an array of props that are passed to the \`ActionIconButton\` component.
+You can add buttons to the header of the \`AccordionItem\` component using the \`actions\` prop. This prop accepts an array of props that are passed to the \`ActionIconButton\` component.
 
 \`\`\`jsx
+import { Accordion, AccordionItem } from "@baseline-ui/core";
+import { EllipseIcon } from "@baseline-ui/icons/16";
+
 const actions = [
  {
  icon: EllipseIcon,
  "aria-label": "Edit",
  onPress: () => alert("Edit"),
  },
- { icon: EllipseIcon, label: "Delete", onPress: () => alert("Delete") },
+ { icon: EllipseIcon, "aria-label": "Delete", onPress: () => alert("Delete") },
 ];
 
 <Accordion style={{ width: 240 }}>
@@ -837,15 +840,15 @@ Keeping content mounted has costs:
 * Can be navigated using the keyboard
 
 | Key | Function |
-| ------- | -------------------------------------------------------------------------------------------------------- |
+| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
 | \`Space\` | Expands or collapses the item. |
 | \`Enter\` | Expands or collapses the item. |
 | \`Up\` | Moves focus to the previous item. |
 | \`Down\` | Moves focus to the next item. |
 | \`Home\` | Moves focus to the first item. |
 | \`End\` | Moves focus to the last item. |
-| \`Right\` | If focus is on an item header and it contains action buttons, moves focus to the next action button. |
-| \`Left\` | If focus is on an item header and it contains action buttons, moves focus to the previous action button. |`,props:`interface AccordionProps {
+| \`Right\` | If focus is on an item header and it contains action buttons, moves focus to the next action button (the previous one in a right-to-left locale). |
+| \`Left\` | If focus is on an item header and it contains action buttons, moves focus to the previous action button (the next one in a right-to-left locale). |`,props:`interface AccordionProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
  * identifier; new components should exclude it via
@@ -914,6 +917,9 @@ disabledKeys?: Set<Key>
 import { themeVars } from "@baseline-ui/tokens";
 import React from "react";
 
+import { Dialog } from "../../Dialog";
+import { Modal, ModalContent } from "../../Modal";
+import { TextInput } from "../../TextInput";
 import { Accordion } from "../Accordion";
 import { AccordionItem } from "../AccordionItem";
 
@@ -961,16 +967,23 @@ export const AccordionItemExample: React.FC<
  includeDescription?: boolean;
  showActionsOnTriggerOnly?: boolean;
  children?: React.ReactNode;
+ itemNumbers?: number[];
+ includeFalseChild?: boolean;
  }
-> = ({ includeActions, includeDescription, children, ...props }) => {
- return (
- <Accordion {...props}>
- {Array.from({ length: 3 }).map((_, i) => (
+> = ({
+ includeActions,
+ includeDescription,
+ children,
+ itemNumbers = [1, 2, 3],
+ includeFalseChild,
+ ...props
+}) => {
+ const items = itemNumbers.map((n) => (
  <AccordionItem
- key={i}
- title={\`Accordion Item \${i + 1}\`}
+ key={n}
+ title={\`Accordion Item \${n}\`}
  subLabel={includeDescription ? "Value" : undefined}
- value={\`item-\${i + 1}\`}
+ value={\`item-\${n}\`}
  style={contentStyle}
  actions={
  includeActions
@@ -988,10 +1001,13 @@ export const AccordionItemExample: React.FC<
  }
  showActionsOnTriggerOnly={props.showActionsOnTriggerOnly}
  >
- {children ||
- \`lorem ipsum dolor sit amet consectetur adipisicing elit\`}
+ {children || \`lorem ipsum dolor sit amet consectetur adipisicing elit\`}
  </AccordionItem>
- ))}
+ ));
+
+ return (
+ <Accordion {...props}>
+ {includeFalseChild ? [items[0], false, ...items.slice(1), null] : items}
  </Accordion>
  );
 };
@@ -1068,7 +1084,32 @@ export const ControlledAccordionExample: React.FC<{
  }}
  />
  );
-};`},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 {
+};
+
+export const AccordionInModalExample: React.FC<{
+ onKeyDown?: React.KeyboardEventHandler;
+}> = ({ onKeyDown }) => (
+ <Modal defaultOpen={true}>
+ <ModalContent>
+ <Dialog aria-label="Accordion dialog">
+ <div onKeyDown={onKeyDown}>
+ <Accordion defaultExpandedKeys={new Set(["item-1"])}>
+ {Array.from({ length: 2 }).map((_, i) => (
+ <AccordionItem
+ key={i}
+ title={\`Accordion Item \${i + 1}\`}
+ value={\`item-\${i + 1}\`}
+ actions={[{ "aria-label": "Edit", icon: EllipseIcon }]}
+ >
+ {i === 0 ? <TextInput aria-label="Name" /> : "Second panel"}
+ </AccordionItem>
+ ))}
+ </Accordion>
+ </div>
+ </Dialog>
+ </ModalContent>
+ </Modal>
+);`},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.
  */
@@ -1428,6 +1469,7 @@ size?: "sm" | "md" | "lg"
 );`}],implementation:`import { TrashIcon } from "@baseline-ui/icons/24";
 import React from "react";
 
+import { NativeButton } from "../../shared/__tests__/elementTypes";
 import { ActionButton } from "../ActionButton";
 
 import type { ActionButtonProps } from "../ActionButton.types";
@@ -1469,7 +1511,11 @@ export function ButtonWithStyleFn(props: Omit<ActionButtonProps, "style">) {
  })}
  />
  );
-}`},similarTo:["Button"],figmaUrl:"https://www.figma.com/design/7Ft0mFZCq8fTVnTkXjTSZR/Baseline-UI?node-id=4135-79442&m=dev"},ActionGroup:{id:"core-buttons-actiongroup",breadcrumb:"Core/Buttons/ActionGroup",importStatement:'import { ActionGroup, ActionGroupCustomRendererExample } from "@baseline-ui/core";',description:"`ActionGroup` is a horizontally arranged cluster of related icon-button actions with shared spacing, tooltips, and optional single or multiple selection. Use it for sets of closely related controls, such as text alignment or formatting choices, that benefit from being presented as one unit.",documentation:`\`ActionGroup\` is a horizontally arranged cluster of related icon-button actions with shared spacing, tooltips, and optional single or multiple selection. Use it for sets of closely related controls, such as text alignment or formatting choices, that benefit from being presented as one unit.
+}
+
+export const NativeButtonActionButton: React.FC<ActionButtonProps> = (
+ props,
+) => <ActionButton elementType={NativeButton} {...props} />;`},similarTo:["Button"],figmaUrl:"https://www.figma.com/design/7Ft0mFZCq8fTVnTkXjTSZR/Baseline-UI?node-id=4135-79442&m=dev"},ActionGroup:{id:"core-buttons-actiongroup",breadcrumb:"Core/Buttons/ActionGroup",importStatement:'import { ActionGroup, ActionGroupCustomRendererExample } from "@baseline-ui/core";',description:"`ActionGroup` is a horizontally arranged cluster of related icon-button actions with shared spacing, tooltips, and optional single or multiple selection. Use it for sets of closely related controls, such as text alignment or formatting choices, that benefit from being presented as one unit.",documentation:`\`ActionGroup\` is a horizontally arranged cluster of related icon-button actions with shared spacing, tooltips, and optional single or multiple selection. Use it for sets of closely related controls, such as text alignment or formatting choices, that benefit from being presented as one unit.
 
 * Groups related action buttons with consistent spacing and layout.
 * Supports arrow key navigation between actions.
@@ -1776,14 +1822,14 @@ export const ActionGroupWithIconExample: React.FC<
 * Keyboard event support for Space and Enter keys
 
 \`\`\`jsx
-import { ActionIconButton } from "../../utils";
+import { ActionIconButton } from "@baseline-ui/core";
 import { EllipseIcon } from "@baseline-ui/icons/16";
 
 <ActionIconButton icon={EllipseIcon} />;
 \`\`\`
 
 \`\`\`jsx
-import { ActionIconButton } from "./ActionIconButton";
+import { ActionIconButton } from "@baseline-ui/core";
 import { EllipseIcon as EllipseIcon8 } from "@baseline-ui/icons/8";
 import { EllipseIcon as EllipseIcon12 } from "@baseline-ui/icons/12";
 import { EllipseIcon as EllipseIcon20 } from "@baseline-ui/icons/20";
@@ -2016,6 +2062,7 @@ isExcludedFromRovingFocus?: boolean
 );`}],implementation:`import { TrashIcon } from "@baseline-ui/icons/24";
 import React from "react";
 
+import { NativeButton } from "../../shared/__tests__/elementTypes";
 import { ActionIconButton } from "../ActionIconButton";
 
 import type { ActionIconButtonProps } from "../ActionIconButton.types";
@@ -2024,7 +2071,11 @@ export const IconButtonExample: React.FC<
  Omit<ActionIconButtonProps, "icon">
 > = (props) => {
  return <ActionIconButton icon={TrashIcon} {...props} />;
-};`},similarTo:[],figmaUrl:null},Actionable:{id:"core-utilities-actionable",breadcrumb:"Core/Utilities/Actionable",importStatement:`import {
+};
+
+export const NativeButtonIconButtonExample: React.FC<
+ Omit<ActionIconButtonProps, "icon">
+> = (props) => <IconButtonExample elementType={NativeButton} {...props} />;`},similarTo:[],figmaUrl:null},Actionable:{id:"core-utilities-actionable",breadcrumb:"Core/Utilities/Actionable",importStatement:`import {
     Actionable,
     ActionableWithComplexContent,
     ActionableWithDiv,
@@ -2065,6 +2116,7 @@ import React from "react";
 
 import { Box } from "../../Box";
 import { Code } from "../../Code";
+import { NativeButton } from "../../shared/__tests__/elementTypes";
 import { Text } from "../../Text";
 import { Actionable } from "../Actionable";
 
@@ -2241,6 +2293,16 @@ export const ActionableWithComplexContent: React.FC<
  </Box>
  </Actionable>
  );
+};
+
+export const ActionableWithNativeButton: React.FC<
+ Omit<ActionableProps, "children">
+> = (args) => {
+ return (
+ <Actionable elementType={NativeButton} {...args}>
+ <Code>{\`{ "name": "Baseline UI" }\`}</Code>
+ </Actionable>
+ );
 };`},similarTo:[],figmaUrl:null},AlertDialog:{id:"core-overlays-alertdialog",breadcrumb:"Core/Overlays/AlertDialog",importStatement:'import { AlertDialog, AlertDialogExample } from "@baseline-ui/core";',description:"`AlertDialog` is a modal dialog that interrupts the user's workflow with critical information and requires an explicit response via its action buttons. Use it to confirm destructive or irreversible actions, or to surface important messages that the user must acknowledge before continuing.",documentation:`\`AlertDialog\` is a modal dialog that interrupts the user's workflow with critical information and requires an explicit response via its action buttons. Use it to confirm destructive or irreversible actions, or to surface important messages that the user must acknowledge before continuing.
 
 <a href="?path=/story/core-overlays-alertdialog--basic">View story</a>
@@ -2559,7 +2621,7 @@ export const AlertDialogWithIconExample: React.FC<
 * Supports mouse, keyboard, and touch interactions
 
 \`\`\`jsx
-import { AudioPlayer } from "@storybook/addon-docs/blocks";
+import { AudioPlayer } from "@baseline-ui/core";
 
 function App() {
  return (
@@ -2567,16 +2629,13 @@ function App() {
  sources={[
  {
  url: "sound.mp3",
- type: "audio/mp3",
+ type: "audio/mpeg",
  },
  ]}
- aria-label="Auido Player"
+ aria-label="Audio Player"
  />
  );
 }
-\`\`\`
-
-\`\`\`
 \`\`\``,props:`interface AudioPlayerProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
@@ -2698,7 +2757,7 @@ export function SwitchableSourcePlayer() {
 }`},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";
+import { Avatar } from "@baseline-ui/core";
 
 <Avatar name="John Doe" />;
 \`\`\`
@@ -2868,7 +2927,27 @@ hasNotifications?: boolean
     }}
     defaultProps={args}
   />
-);`},{id:"core-content-avatar--with-image",name:"With Image",snippet:'const WithImage = () => <Avatar name="John Doe" imgSrc="/avatar.png" />;'},{id:"core-content-avatar--with-initials",name:"With Initials",snippet:'const WithInitials = () => <Avatar name="John Doe" showInitials />;'},{id:"core-content-avatar--disabled",name:"Disabled",snippet:'const Disabled = () => <Avatar name="John Doe" isDisabled />;'},{id:"core-content-avatar--with-notification",name:"With Notification",snippet:'const WithNotification = () => <Avatar name="John Doe" hasNotifications />;'}],implementation:""},similarTo:[],figmaUrl:null},Box:{id:"core-utilities-box",breadcrumb:"Core/Utilities/Box",importStatement:'import { Box } from "@baseline-ui/core";',description:"`Box` is a polymorphic container that exposes layout, spacing, and color design tokens as props, with responsive array values for breakpoints. Use it as the foundational building block for composing theme-aware layouts without writing custom CSS.",documentation:`\`Box\` is a polymorphic container that exposes layout, spacing, and color design tokens as props, with responsive array values for breakpoints. Use it as the foundational building block for composing theme-aware layouts without writing custom CSS.
+);`},{id:"core-content-avatar--with-image",name:"With Image",snippet:'const WithImage = () => <Avatar name="John Doe" imgSrc="/avatar.png" />;'},{id:"core-content-avatar--with-initials",name:"With Initials",snippet:'const WithInitials = () => <Avatar name="John Doe" showInitials />;'},{id:"core-content-avatar--disabled",name:"Disabled",snippet:'const Disabled = () => <Avatar name="John Doe" isDisabled />;'},{id:"core-content-avatar--with-notification",name:"With Notification",snippet:'const WithNotification = () => <Avatar name="John Doe" hasNotifications />;'}],implementation:`import React, { useState } from "react";
+
+import { ActionButton } from "../../ActionButton";
+import { Avatar } from "../Avatar";
+
+export const AvatarSourcesExample: React.FC<{ sources: string[] }> = ({
+ sources,
+}) => {
+ const [index, setIndex] = useState(0);
+ return (
+ <>
+ <Avatar name="John Doe" showInitials={true} imgSrc={sources[index]} />
+ <ActionButton
+ label="Next source"
+ onPress={() => {
+ setIndex((i) => (i + 1) % sources.length);
+ }}
+ />
+ </>
+ );
+};`},similarTo:[],figmaUrl:null},Box:{id:"core-utilities-box",breadcrumb:"Core/Utilities/Box",importStatement:'import { Box } from "@baseline-ui/core";',description:"`Box` is a polymorphic container that exposes layout, spacing, and color design tokens as props, with responsive array values for breakpoints. Use it as the foundational building block for composing theme-aware layouts without writing custom CSS.",documentation:`\`Box\` is a polymorphic container that exposes layout, spacing, and color design tokens as props, with responsive array values for breakpoints. Use it as the foundational building block for composing theme-aware layouts without writing custom CSS.
 
 * Consistent API for layout, spacing, and styling via sprinkle props
 * Theme-aware \u2014 automatically applies correct styling based on the active theme
@@ -4435,8 +4514,10 @@ import React, { useState } from "react";
 import { ActionButton } from "../../ActionButton";
 import { ActionIconButton } from "../../ActionIconButton";
 import { Box } from "../../Box";
+import { Div, NativeButton } from "../../shared/__tests__/elementTypes";
 import { Text } from "../../Text";
 import { ColorInput } from "../ColorInput";
+import { IconColorInputButton } from "../ColorInputButton";
 import { IconColorInput } from "../IconColorInput";
 import { presets } from "./data";
 
@@ -4557,7 +4638,25 @@ export const StoredCustomColorsExample: React.FC<{ storageKey: string }> = ({
 
 export const IconColorInputExample: React.FC<
  Omit<IconColorInputProps, "icon">
-> = (props) => <IconColorInput icon={BorderColorIcon} {...props} />;`},similarTo:[],figmaUrl:null},ColorSwatch:{id:"core-content-colorswatch",breadcrumb:"Core/Content/ColorSwatch",importStatement:'import { Box, ColorSwatch, VariantViewer } from "@baseline-ui/core";',description:'`ColorSwatch` is a small tile that visually represents a single color value, with built-in handling for transparency, "none", and indeterminate states. Use it to preview a color inside pickers, lists, or anywhere a color value needs to be shown next to its label.',documentation:`\`ColorSwatch\` is a small tile that visually represents a single color value, with built-in handling for transparency, "none", and indeterminate states. Use it to preview a color inside pickers, lists, or anywhere a color value needs to be shown next to its label.
+> = (props) => <IconColorInput icon={BorderColorIcon} {...props} />;
+
+type IconColorInputButtonProps = React.ComponentProps<
+ typeof IconColorInputButton
+>;
+
+export const IconColorInputButtonExample: React.FC<
+ Omit<IconColorInputButtonProps, "icon">
+> = (props) => <IconColorInputButton icon={BorderColorIcon} {...props} />;
+
+export const DivIconColorInputButtonExample: React.FC<
+ Omit<IconColorInputButtonProps, "icon">
+> = (props) => <IconColorInputButtonExample elementType={Div} {...props} />;
+
+export const NativeButtonIconColorInputButtonExample: React.FC<
+ Omit<IconColorInputButtonProps, "icon">
+> = (props) => (
+ <IconColorInputButtonExample elementType={NativeButton} {...props} />
+);`},similarTo:[],figmaUrl:null},ColorSwatch:{id:"core-content-colorswatch",breadcrumb:"Core/Content/ColorSwatch",importStatement:'import { Box, ColorSwatch, VariantViewer } from "@baseline-ui/core";',description:'`ColorSwatch` is a small tile that visually represents a single color value, with built-in handling for transparency, "none", and indeterminate states. Use it to preview a color inside pickers, lists, or anywhere a color value needs to be shown next to its label.',documentation:`\`ColorSwatch\` is a small tile that visually represents a single color value, with built-in handling for transparency, "none", and indeterminate states. Use it to preview a color inside pickers, lists, or anywhere a color value needs to be shown next to its label.
 
 * Accessible color representation with screen reader support via aria-label
 * Support for transparent colors with a checkered background pattern
@@ -4567,7 +4666,7 @@ export const IconColorInputExample: React.FC<
 * Support for indeterminate state with customizable icon
 
 \`\`\`jsx
-import { ColorSwatch } from "../../utils";
+import { ColorSwatch } from "@baseline-ui/core";
 
 <ColorSwatch color="#ff0000" />;
 \`\`\`
@@ -4771,10 +4870,10 @@ noneLabel?: string
 * Supports keyboard navigation.
 
 \`\`\`jsx
-import { ColorSwatchPicker } from "../../utils";
+import { ColorSwatchPicker } from "@baseline-ui/core";
 
 <ColorSwatchPicker
- colors={[
+ items={[
  { color: "#ff0000", label: "Red" },
  { color: "#00ff00", label: "Green" },
  { color: "#0000ff", label: "Blue" },
@@ -4787,10 +4886,7 @@ import { ColorSwatchPicker } from "../../utils";
 | Up Arrow | Move focus to the previous item in the list |
 | Down Arrow | Move focus to the next item in the list |
 | Left Arrow | Move focus to the previous item in the list |
-| Right Arrow | Move focus to the next item in the list |
-
-\`\`\`
-\`\`\``,props:`interface ColorSwatchPickerProps {
+| Right Arrow | Move focus to the next item in the list |`,props:`interface ColorSwatchPickerProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
  * identifier; new components should exclude it via
@@ -4844,7 +4940,8 @@ items: ColorPreset[]
 icon?: React.FC<IconProps>
 /**
  * The value of the selected item. This is useful if you want to control the
- * value of the picker.
+ * value of the picker. It selects the item with the same colour however
+ * either is written, so \`"#FF0000"\` or \`"red"\` selects a \`"#ff0000"\` item.
  */
 value?: string
 /**
@@ -4852,7 +4949,7 @@ value?: string
  */
 onChange?: (value?: string) => void
 /**
- * The default value of the picker.
+ * The default value of the picker. Matched to an item like \`value\`.
  */
 defaultValue?: string
 /**
@@ -4927,9 +5024,12 @@ const items = colorItems.map((item) => ({
 }));
 
 export const ColorSwatchPickerExample: React.FC<
- Omit<ColorSwatchPickerProps, "items">
+ Omit<ColorSwatchPickerProps, "items"> & {
+ /** Defaults to black, white and red, each written as hex. */
+ items?: ColorSwatchPickerProps["items"];
+ }
 > = (props) => (
- <ColorSwatchPicker aria-label="Colors" {...props} items={items} />
+ <ColorSwatchPicker aria-label="Colors" items={items} {...props} />
 );
 
 export const ControlledColorSwatchPickerExample: React.FC = () => {
@@ -6473,12 +6573,18 @@ openCalendarLabel?: string
     granularity="day"
     pickerType="calendar"
     validationState="error"
-    errorMessage="Invalid date" />;`}],implementation:`import { CalendarDate, parseDate } from "@internationalized/date";
+    errorMessage="Invalid date" />;`}],implementation:`import {
+ CalendarDate,
+ CalendarDateTime,
+ parseDate,
+ parseZonedDateTime,
+} from "@internationalized/date";
 import React from "react";
 
 import { DateField } from "../DateField";
 
 import type { DateFieldProps } from "../DateField.types";
+import type { DateValue } from "react-aria";
 
 export const DateFieldExample: React.FC<
  Omit<DateFieldProps, "defaultValue" | "value" | "createCalendar"> & {
@@ -6508,6 +6614,66 @@ export const MinMaxDateFieldExample: React.FC<
  maxValue={new CalendarDate(2022, 6, 30)}
  />
  );
+};
+
+const placeholders = {
+ dateTime: new CalendarDateTime(2022, 11, 7, 9, 30),
+ zonedDateTime: parseZonedDateTime("2022-11-07T09:30[America/Los_Angeles]"),
+};
+
+export const ControlledDateTimeFieldExample: React.FC<{
+ placeholder?: keyof typeof placeholders;
+ initialValue?: keyof typeof placeholders;
+}> = ({ placeholder, initialValue }) => {
+ const [value, setValue] = React.useState<DateValue | null>(
+ initialValue ? placeholders[initialValue] : null,
+ );
+ return (
+ <>
+ <button
+ onClick={() => {
+ setValue(null);
+ }}
+ >
+ Clear
+ </button>
+ <button
+ onClick={() => {
+ setValue(placeholders.zonedDateTime);
+ }}
+ >
+ Set zoned value
+ </button>
+ <DateField
+ label="Label"
+ granularity="minute"
+ pickerType="calendar"
+ placeholderValue={placeholder ? placeholders[placeholder] : undefined}
+ value={value}
+ onChange={setValue}
+ />
+ <output data-testid="value">{value?.toString() ?? ""}</output>
+ </>
+ );
+};
+
+export const UnavailableDateFieldExample: React.FC = () => {
+ const [value, setValue] = React.useState<DateValue | null>(
+ new CalendarDate(2022, 11, 7),
+ );
+ return (
+ <>
+ <DateField
+ label="Label"
+ granularity="day"
+ pickerType="calendar"
+ value={value}
+ onChange={setValue}
+ isDateUnavailable={(date) => date.day === 15}
+ />
+ <output data-testid="value">{value?.toString() ?? ""}</output>
+ </>
+ );
 };`},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
@@ -6604,22 +6770,17 @@ automatically applies the correct breakpoints to sprinkles.`,documentation:`The
 automatically applies the correct breakpoints to sprinkles.
 
 \`\`\`jsx
-import { DeviceProvider } from "../../utils";
-import { YourApp } from "./YourApp";
+import { DeviceProvider } from "@baseline-ui/core";
 
 function App() {
- return (
- <DeviceProvider>
- <YourApp />
- </DeviceProvider>
- );
+ return <DeviceProvider>{/* Your app */}</DeviceProvider>;
 }
 \`\`\`
 
 You can access the device information in your components using the \`useDevice\` hook:
 
 \`\`\`jsx
-import { useDevice } from "../../utils";
+import { useDevice } from "@baseline-ui/core";
 
 function ResponsiveComponent() {
  const device = useDevice();
@@ -6638,7 +6799,7 @@ function ResponsiveComponent() {
 You can customize the breakpoints used to determine device types by passing a \`breakpoints\` prop to the \`DeviceProvider\`. These breakpoints represent the minimum width values for each device category.
 
 \`\`\`jsx
-import { DeviceProvider } from "../../utils";
+import { DeviceProvider } from "@baseline-ui/core";
 
 function App() {
  return (
@@ -6823,13 +6984,14 @@ export const TestComponent = ({
 
 \`\`\`jsx
 import {
+ ActionButton,
  Dialog,
  Modal,
  ModalTrigger,
  ModalContent,
  ModalClose,
  DialogTitle,
-} from "../../utils";
+} from "@baseline-ui/core";
 
 <Modal>
  <ModalTrigger>
@@ -6939,11 +7101,37 @@ import { DialogTitle } from "../DialogTitle";
 import type { ModalContentProps, ModalProps } from "../../Modal";
 import type { DialogProps } from "../Dialog.types";
 
+const TITLE_IMAGE =
+ "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==";
+
+const RefDroppingTitle = (props: React.ComponentProps<"h3">) => (
+ <h3 {...props} ref={null} />
+);
+
+const IdDroppingTitle = (props: React.ComponentProps<"h3">) => (
+ <h3 {...props} id={undefined} />
+);
+
 export const DialogExample: React.FC<{
  modalProps?: Omit<ModalProps, "children">;
  contentProps?: Omit<ModalContentProps, "children">;
  dialogProps?: Omit<React.ComponentProps<typeof Dialog>, "children">;
-}> = ({ modalProps, contentProps, dialogProps }) => {
+ renamedTitle?: string;
+ titleDrops?: "ref" | "id";
+ imageOnlyTitle?: boolean;
+ titleStyle?: React.CSSProperties;
+ remountTitleOnRename?: boolean;
+}> = ({
+ modalProps,
+ contentProps,
+ dialogProps,
+ renamedTitle,
+ titleDrops,
+ titleStyle,
+ remountTitleOnRename,
+ imageOnlyTitle,
+}) => {
+ const [title, setTitle] = useState("Dialog Title");
  return (
  <Modal {...modalProps}>
  <ModalTrigger>
@@ -6957,12 +7145,36 @@ export const DialogExample: React.FC<{
  "PSPDFKit-Dialog",
  )}
  >
- <DialogTitle style={{ marginBottom: 10 }}>
- <Text className="PSPDFKit-Title" type="title" elementType="h3">
- Dialog Title
+ <DialogTitle style={{ marginBottom: 10, ...titleStyle }}>
+ {imageOnlyTitle ? (
+ <h3>
+ <img alt="Settings" src={TITLE_IMAGE} />
+ </h3>
+ ) : titleDrops === "ref" ? (
+ <RefDroppingTitle>{title}</RefDroppingTitle>
+ ) : titleDrops === "id" ? (
+ <IdDroppingTitle>{title}</IdDroppingTitle>
+ ) : (
+ <Text
+ key={remountTitleOnRename ? title : undefined}
+ className="PSPDFKit-Title"
+ type="title"
+ elementType="h3"
+ >
+ {title}
  </Text>
+ )}
  </DialogTitle>
 
+ {renamedTitle ? (
+ <ActionButton
+ label="Rename title"
+ onPress={() => {
+ setTitle(renamedTitle);
+ }}
+ />
+ ) : null}
+
  <TextInput
  className="PSPDFKit-Input"
  label="Label"
@@ -7625,7 +7837,7 @@ export const TruncatedTitleDisclosure: React.FC = () => {
  </Disclosure>
  </div>
  );
-};`},similarTo:[],figmaUrl:null},Drawer:{id:"core-overlays-drawer",breadcrumb:"Core/Overlays/Drawer",importStatement:'import { Drawer } from "@baseline-ui/core";',description:"`Drawer` is a modal panel that slides in from the edge of the screen to host secondary content or actions. Use it for tasks like editing details, viewing settings, or filtering, where the user should stay anchored to the main view.",documentation:'`Drawer` is a modal panel that slides in from the edge of the screen to host secondary content or actions. Use it for tasks like editing details, viewing settings, or filtering, where the user should stay anchored to the main view.\n\n* Exposed to assistive technologies as a `dialog` using ARIA `role="dialog"`. The content outside the dialog is hidden from assistive technologies to prevent it from being read while the dialog is open.\n* Focus is moved into the dialog on mount, and restored to the trigger element on unmount. While open, focus is contained within the dialog, preventing the user from tabbing outside.\n\n```jsx\nimport { Drawer } from "../../utils";\n\n<Drawer title="Drawer Title" onCloseRequest={() => {}}>\n <div>Drawer Content</div>\n</Drawer>;\n```\n\nThis component has two background variants: `medium` and `subtle`. The `medium` variant is used for the default background, and the `subtle` variant is used for the background.\n\nThe `Drawer` component can have an additional action button that is displayed at the top of the drawer. This button is used to perform an action, such as saving or submitting the content in the drawer.\n\nThe `Drawer` component can have different types of dialogs, such as `dialog` and `alertdialog`. The `dialog` type is used for dialogs that require user input, and the `alertdialog` type is used for dialogs that require user attention. The default\ntype is `dialog`.\n\n```jsx\n<Drawer title="Drawer Title" type="alertdialog" onCloseRequest={() => {}}>\n <div>Dialog Content</div>\n</Drawer>\n```',props:`interface DrawerProps {
+};`},similarTo:[],figmaUrl:null},Drawer:{id:"core-overlays-drawer",breadcrumb:"Core/Overlays/Drawer",importStatement:'import { Drawer } from "@baseline-ui/core";',description:"`Drawer` is a modal panel that slides in from the edge of the screen to host secondary content or actions. Use it for tasks like editing details, viewing settings, or filtering, where the user should stay anchored to the main view.",documentation:'`Drawer` is a modal panel that slides in from the edge of the screen to host secondary content or actions. Use it for tasks like editing details, viewing settings, or filtering, where the user should stay anchored to the main view.\n\n* Exposed to assistive technologies as a `dialog` using ARIA `role="dialog"`. The content outside the dialog is hidden from assistive technologies to prevent it from being read while the dialog is open.\n* Focus is moved into the dialog on mount, and restored to the trigger element on unmount. While open, focus is contained within the dialog, preventing the user from tabbing outside.\n\n```jsx\nimport { Drawer } from "@baseline-ui/core";\n\n<Drawer title="Drawer Title" onCloseRequest={() => {}}>\n <div>Drawer Content</div>\n</Drawer>;\n```\n\nThis component has two background variants: `medium` and `subtle`. The `medium` variant is used for the default background, and the `subtle` variant is used for the background.\n\nThe `Drawer` component can have an additional action button that is displayed at the top of the drawer. This button is used to perform an action, such as saving or submitting the content in the drawer.\n\nThe `Drawer` component can have different types of dialogs, such as `dialog` and `alertdialog`. The `dialog` type is used for dialogs that require user input, and the `alertdialog` type is used for dialogs that require user attention. The default\ntype is `dialog`.\n\n```jsx\n<Drawer title="Drawer Title" type="alertdialog" onCloseRequest={() => {}}>\n <div>Dialog Content</div>\n</Drawer>\n```',props:`interface DrawerProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
  * identifier; new components should exclude it via
@@ -7717,7 +7929,7 @@ export const DrawerWithActionExample: React.FC<{
  Drawer Content
  </Drawer>
  );
-};`},similarTo:[],figmaUrl:null},Editor:{id:"core-miscellaneous-editor-rich-text",breadcrumb:"Core/Miscellaneous/Editor",importStatement:'import { Box, Editor, EditorAutoFocusOnMount, Separator } from "@baseline-ui/core";',description:"`Editor` is a text input area that supports either plain text or rich text with formatting, links, and @-mentions. Use it for comments, notes, descriptions, or any free-form content where users need more than a single-line input.",documentation:'`Editor` is a text input area that supports either plain text or rich text with formatting, links, and @-mentions. Use it for comments, notes, descriptions, or any free-form content where users need more than a single-line input.\n\n* supports rich text editing, including bold, italic and underline formatting.\n* supports font color and background color formatting\n* supports link creation, editing and removal\n* supports plain text editing\n* supports mouse, keyboard and touch interactions.\n* Exposed to the screen-readers and other assistive technologies using ARIA.\n* Mention support with user search and keyboard navigation\n* Keyboard shortcuts for common actions (submit, toolbar focus, help)\n* Imperative handle API (`editorHandle`) for programmatic focus and caret positioning\n* Custom footer buttons (action and toggle types)\n* Clear on save/cancel behavior\n* Auto-focus with configurable caret position\n\nYou can import the Editor component like so:\n\n```jsx\nimport { Editor } from "@baseline-ui/core";\n\nexport default function App() {\n return (\n <Editor\n aria-label="Comment"\n placeholder="Write a comment..."\n onSave={(value) => {\n console.log(value);\n }}\n />\n );\n}\n```\n\nIf you only need a single-line plain text input, use the `TextInput` component instead.\n\nThe `Editor` component has multiple variants that can be used to customize the appearance and behavior of the component.\n\n* `default` - the default variant\n* `minimal` - a minimal variant that removes the toolbar and only allows plain text editing.\n\n```jsx\n<Editor\n aria-label="Editor"\n variant="minimal"\n avatarName="John Doe"\n spellCheck={false}\n placeholder="Type something..."\n defaultValue="This is a minimal editor"\n/>\n```\n\nIn the example above, the `variant` prop is used to set the variant to `minimal`. This removes the toolbar and only allows plain text editing.\nThe first editor passes `isInline={false}`; the second one keeps the default inline rendering, which shows the avatar (set via `avatarName`) next to the input.\n\nYou can enable rich text editing by setting the `enableRichText` prop to `true`. This will enable the rich text toolbar and allow users to format the text. The default value is `false`.\n\n```jsx\n<Editor\n aria-label="Editor"\n placeholder="Placeholder"\n enableRichText\n defaultValue="<p>This is a rich editor. It supports <b>bold</b>, <i>italic</i>, and <u>underline</u>. <a href=\'https://example.com\'>Links</a> are also supported.</p><br/><p>You can set both <span style=\'color: #ac0000; background-color: #ffffff;\'>font color</span> and <span style=\'background-color: #ffff00; color: #000000;\'>background color</span>.</p>"\n/>\n```\n\nYou can set a placeholder for the editor by using the `placeholder` prop. This will display a placeholder when the editor is empty.\n\nThe `Editor` component can be controlled by using the `value` and `onChange` props together. This allows you to control the value of the editor from the parent component, in both plain text and rich text mode.\n\nFor uncontrolled usage, set the initial content with `defaultValue` and read edits via `onChange` or `onSave` \u2014 the editor manages its own state afterwards.\n\nFor backwards compatibility, passing `value` without `onChange` in rich text mode sets the initial content only (it behaves like `defaultValue`), matching the behavior of earlier versions.\n\nThe same pattern works in rich text mode \u2014 controlled rich text requires both `value` and `onChange`:\n\n```jsx\nfunction ControlledRichTextEditor() {\n const [value, setValue] = React.useState(\n "<p>This is a <b>controlled</b> rich text editor</p>",\n );\n\n return (\n <Editor\n aria-label="Editor"\n enableRichText\n placeholder="Type something..."\n value={value}\n onChange={(newValue) => {\n setValue(newValue);\n }}\n />\n );\n}\n```\n\nThe `Editor` component can be disabled by using the `isDisabled` prop. This will disable the editor and prevent users from editing the content.\n\nThe `Editor` component supports mentions. You can enable mentions by passing the `mentionableUsers` prop, an array of `MentionableUser` objects with required `id`, `name`, and `displayName` properties, plus optional `avatar` and `description`. The `id` should be unique for each user, `name` is the username matched while typing, and `displayName` is the label rendered for the mention.\nThe mentions feature only works when `enableRichText` is set to `true`. Users can start a mention by typing `@` in the editor or by pressing the mention (@) button in the footer.\nPasted or dropped mentions are checked against `mentionableUsers`: a mention of a listed user takes that user\'s label, and any other mention, including every mention while `mentionableUsers` is undefined, becomes plain `@Name` text. This also applies when users cut and paste or drag a mention within the editor.\n\n```jsx\n<Editor\n aria-label="Editor"\n placeholder="Placeholder"\n enableRichText\n defaultValue="Mentioning <span data-user-id=\'john-doe\'>John Doe</span>."\n mentionableUsers={[\n {\n id: "1",\n name: "john.doe",\n displayName: "John Doe",\n description: "john@gmail.com",\n },\n {\n id: "2",\n name: "jane.doe",\n displayName: "Jane Doe",\n description: "jane@gmail.com",\n },\n ]}\n/>\n```\n\nYou can add custom buttons to the footer by using the `footerButtons` prop. This prop is an array of objects of the shape `{ type: "action" | "toggle", props: {...} }`, where `props` accepts the `ActionIconButton` props (for `type: "action"`) or the `ToggleIconButton` props (for `type: "toggle"`), except `size` and `variant`, which are set by the editor.\n\n```jsx\nimport { AnonymousIcon } from "@baseline-ui/icons/16";\n\n<Editor\n aria-label="Editor"\n enableRichText\n footerButtons={[\n {\n type: "toggle",\n props: {\n "aria-label": "Save",\n icon: AnonymousIcon,\n onPress: () => {\n alert("Save");\n },\n },\n },\n ]}\n/>;\n```\n\n| Key | Function |\n| ------------------------------ | -------------------------------------------------------- |\n| `Ctrl+B` / `Cmd+B` | Toggle bold (rich text mode) |\n| `Ctrl+I` / `Cmd+I` | Toggle italic (rich text mode) |\n| `Ctrl+U` / `Cmd+U` | Toggle underline (rich text mode) |\n| `Ctrl+Z` / `Cmd+Z` | Undo (rich text mode) |\n| `Ctrl+Shift+Z` / `Cmd+Shift+Z` | Redo (rich text mode) |\n| `Ctrl+Y` | Redo (rich text mode) |\n| `@` | Start a mention (rich text mode with `mentionableUsers`) |\n| `Alt+F10` | Focus toolbar (rich text mode) |\n| `Ctrl+Enter` / `Cmd+Enter` | Submit (always) |\n| `Enter` | Submit (when `saveOnEnter` is true) |\n| `Shift+Enter` | New line |\n| `Ctrl+Shift+H` / `Cmd+Shift+H` | Open help dialog (rich text mode) |\n| `Escape` | Close mention input / help dialog |\n| `Tab` | Focus next |\n| `Shift+Tab` | Focus previous |\n\nWhen `saveOnEnter` is set to `true`, pressing the `Enter` key will submit the editor instead of creating a new line. This is useful for single-line text inputs or quick note-taking scenarios.\n\nThe `clearOnSave` and `clearOnCancel` props clear the editor content after the respective action completes. These are useful for resetting the editor after submission or cancellation.\n\nThe `autoFocus` prop allows you to focus the editor on mount with optional caret positioning:\n\n* `true` - Focus on mount, caret at default position\n* `"start"` - Focus on mount, caret at position 0\n* `"end"` - Focus on mount, caret at end of text\n\nThe `editorHandle` ref provides imperative methods for programmatic control:\n\n* `focus()` - Focus the editor\n* `setCaretPosition(index)` - Position the caret at a specific index\n\nThe `isSaveDisabled` prop disables only the save button while keeping the editor content functional. This is different from `isDisabled`, which disables both the editor and buttons.\n\nThe `maxMentionableUsersSuggestions` prop controls how many mention suggestions are displayed when the user types `@`. This is useful for large user lists where you want to limit the visible suggestions.\n\nThe `spellCheck` prop enables or disables browser spell checking in the editor.\n\nIn rich text mode, the editor includes a built-in help dialog that lists all available keyboard shortcuts (formatting, clipboard, undo/redo, submit). It opens as a modal overlay when the user presses `Ctrl+Shift+H` / `Cmd+Shift+H` while the editor has focus, and closes with `Escape` or the close button.\n\nUse the headless editor APIs when you need the rich-text engine without the default `Editor` chrome. This is useful for custom toolbars, inline editors embedded in other components, or experiences that need to render their own controls while reusing Baseline UI\'s rich-text model, keyboard shortcuts, selection handling, undo/redo, and HTML serialization.\n\n```jsx\nimport {\n EditorProvider,\n useEditable,\n useEditor,\n useEditorContext,\n} from "@baseline-ui/core";\n\nfunction FormattingToolbar() {\n const editor = useEditorContext();\n\n return (\n <button\n aria-pressed={editor.isMarkActive("bold")}\n onClick={() => editor.toggleMark("bold")}\n type="button"\n >\n Bold\n </button>\n );\n}\n\nfunction CustomRichTextEditor() {\n const editor = useEditor({\n defaultValue: "<p>Hello <b>world</b></p>",\n onChange: (html) => {\n console.log(html);\n },\n });\n const { editableProps } = useEditable(editor);\n\n return (\n <EditorProvider editor={editor}>\n <FormattingToolbar />\n <div {...editableProps} style={{ whiteSpace: "pre-wrap" }} />\n </EditorProvider>\n );\n}\n```\n\nThe headless API is split into these parts:\n\n| API | Purpose |\n| ------------------ | ------------------------------------------------------------------------ |\n| `useEditor` | Creates one rich-text editor instance and returns the `EditorState` API. |\n| `useEditable` | Attaches an `EditorState` to a `contenteditable` element. |\n| `EditorProvider` | Provides an editor instance to nested toolbar controls. |\n| `useEditorContext` | Reads the nearest provided editor instance. |\n| `EditorCore` | Framework-free engine escape hatch for advanced integrations. |\n\n`EditorState` exposes reactive state (`value`, `isEmpty`, `selectionState`, `canUndo`, `canRedo`, `isDisabled`) and imperative methods (`focus`, `setValue`, `getValue`, `undo`, `redo`, `exec`, `toggleMark`, `setMark`). For custom keyboard behavior, pass `onKeyDown` to `useEditable`; return `true` when you handled the event to skip the built-in shortcuts.\n\nStyle the editable element with `white-space: pre-wrap` (the built-in `Editor` does this internally). This preserves significant whitespace \u2014 leading, trailing, and consecutive spaces \u2014 which would otherwise collapse when the editor re-renders from its model, making a trailing space appear not to be inserted.\n\n| Selector | Description |\n| ------------------------------------------- | ----------------------------------------- |\n| `.BaselineUI-Editor` | Root container element |\n| `.BaselineUI-Editor-Save` | Save/submit button |\n| `.BaselineUI-Editor-Cancel` | Cancel button |\n| `.BaselineUI-Editor-Footer` | Footer toolbar containing action buttons |\n| `.BaselineUI-Editor-Mention` | Mention (@) button in footer |\n| `.BaselineUI-Editor-RichEditorToolbar` | Rich text formatting toolbar |\n| `.BaselineUI-Editor-RichEditorEditingArea` | Rich text contenteditable area |\n| `.BaselineUI-Editor-RichEditorPlaceholder` | Rich text empty-state placeholder overlay |\n| `.BaselineUI-Editor-PlainEditorEditingArea` | Plain text textarea element |\n\n`@baseline-ui/test-utils` ships a Playwright tester for the Editor so component and E2E specs don\'t have to relearn its markup. Build one from a frame and use its locators instead of hand-rolled selectors or translated labels:\n\n```ts\nimport { testers } from "@baseline-ui/test-utils";\n\nconst editor = testers(frame).editor();\n\nawait editor.textbox.fill("Hello");\nawait editor.boldButton.click();\nawait editor.openLinkDialog();\nawait editor.linkInput.fill("https://example.com");\nawait editor.linkAddButton.click();\nawait editor.startMention();\nawait editor.mentionOption("John Doe").click();\n```\n\nThe tester works in both modes \u2014 `textbox` resolves to the rich text contenteditable or the plain-mode `<textarea>` (both expose `role="textbox"`), and the rich-text-only surface (toolbar, link dialog, mention dropdown, help dialog) simply won\'t match when `enableRichText` is off. Pass a `root` locator when more than one Editor is mounted in the same frame:\n\n```ts\nconst editor = testers(frame).editor({\n root: frame.locator(".BaselineUI-Editor").first(),\n});\n```\n\nLocators are backed by stable `data-testid`s on the component (e.g. `editor-bold-button`, `editor-link-input`, `editor-help-dialog-close-button`) rather than accessible names, so they stay reliable across translations. The disclosure helpers (`openFontColorPicker`, `openBackgroundColorPicker`, `openLinkDialog`, `openHelpDialog`, `startMention`) are idempotent and no-op when the target surface is already open.',props:`interface EditorProps {
+};`},similarTo:[],figmaUrl:null},Editor:{id:"core-miscellaneous-editor",breadcrumb:"Core/Miscellaneous/Editor",importStatement:'import { Editor, HeadlessCustomEditor } from "@baseline-ui/core";',description:"`Editor` is a text input area that supports either plain text or rich text with formatting, links, and @-mentions. Use it for comments, notes, descriptions, or any free-form content where users need more than a single-line input.",documentation:'`Editor` is a text input area that supports either plain text or rich text with formatting, links, and @-mentions. Use it for comments, notes, descriptions, or any free-form content where users need more than a single-line input.\n\n* supports rich text editing, including bold, italic and underline formatting.\n* supports font color and background color formatting\n* supports link creation, editing and removal\n* supports plain text editing\n* supports mouse, keyboard and touch interactions.\n* Exposed to the screen-readers and other assistive technologies using ARIA.\n* Mention support with user search and keyboard navigation\n* Keyboard shortcuts for common actions (submit, toolbar focus, help)\n* Imperative handle API (`editorHandle`) for programmatic focus and caret positioning\n* Custom footer buttons (action and toggle types)\n* Clear on save/cancel behavior\n* Auto-focus with configurable caret position\n\nYou can import the Editor component like so:\n\n```jsx\nimport { Editor } from "@baseline-ui/core";\n\nexport default function App() {\n return (\n <Editor\n aria-label="Comment"\n placeholder="Write a comment..."\n onSave={(value) => {\n console.log(value);\n }}\n />\n );\n}\n```\n\nIf you only need a single-line plain text input, use the `TextInput` component instead.\n\nThe `Editor` component has multiple variants that can be used to customize the appearance and behavior of the component.\n\n* `default` - the default variant\n* `minimal` - a minimal variant that removes the toolbar and only allows plain text editing.\n\n```jsx\n<Editor\n aria-label="Editor"\n variant="minimal"\n avatarName="John Doe"\n spellCheck={false}\n placeholder="Type something..."\n defaultValue="This is a minimal editor"\n/>\n```\n\nIn the example above, the `variant` prop is used to set the variant to `minimal`. This removes the toolbar and only allows plain text editing.\nThe first editor passes `isInline={false}`; the second one keeps the default inline rendering, which shows the avatar (set via `avatarName`) next to the input.\n\nYou can enable rich text editing by setting the `enableRichText` prop to `true`. This will enable the rich text toolbar and allow users to format the text. The default value is `false`.\n\n```jsx\n<Editor\n aria-label="Editor"\n placeholder="Placeholder"\n enableRichText\n defaultValue="<p>This is a rich editor. It supports <b>bold</b>, <i>italic</i>, and <u>underline</u>. <a href=\'https://example.com\'>Links</a> are also supported.</p><br/><p>You can set both <span style=\'color: #ac0000; background-color: #ffffff;\'>font color</span> and <span style=\'background-color: #ffff00; color: #000000;\'>background color</span>.</p>"\n/>\n```\n\nYou can set a placeholder for the editor by using the `placeholder` prop. This will display a placeholder when the editor is empty.\n\nThe `Editor` component can be controlled by using the `value` and `onChange` props together. This allows you to control the value of the editor from the parent component, in both plain text and rich text mode.\n\nFor uncontrolled usage, set the initial content with `defaultValue` and read edits via `onChange` or `onSave` \u2014 the editor manages its own state afterwards.\n\nFor backwards compatibility, passing `value` without `onChange` in rich text mode sets the initial content only (it behaves like `defaultValue`), matching the behavior of earlier versions.\n\nThe same pattern works in rich text mode \u2014 controlled rich text requires both `value` and `onChange`:\n\n```jsx\nfunction ControlledRichTextEditor() {\n const [value, setValue] = React.useState(\n "<p>This is a <b>controlled</b> rich text editor</p>",\n );\n\n return (\n <Editor\n aria-label="Editor"\n enableRichText\n placeholder="Type something..."\n value={value}\n onChange={(newValue) => {\n setValue(newValue);\n }}\n />\n );\n}\n```\n\nThe `Editor` component can be disabled by using the `isDisabled` prop. This will disable the editor and prevent users from editing the content.\n\nThe `Editor` component supports mentions. You can enable mentions by passing the `mentionableUsers` prop, an array of `MentionableUser` objects with required `id`, `name`, and `displayName` properties, plus optional `avatar` and `description`. The `id` should be unique for each user, `name` is the username matched while typing, and `displayName` is the label rendered for the mention.\nThe mentions feature only works when `enableRichText` is set to `true`. Users can start a mention by typing `@` in the editor or by pressing the mention (@) button in the footer.\nPasted or dropped mentions are checked against `mentionableUsers`: a mention of a listed user takes that user\'s label, and any other mention, including every mention while `mentionableUsers` is undefined, becomes plain `@Name` text. This also applies when users cut and paste or drag a mention within the editor.\n\n```jsx\n<Editor\n aria-label="Editor"\n placeholder="Placeholder"\n enableRichText\n defaultValue="Mentioning <span data-user-id=\'john-doe\'>John Doe</span>."\n mentionableUsers={[\n {\n id: "1",\n name: "john.doe",\n displayName: "John Doe",\n description: "john@gmail.com",\n },\n {\n id: "2",\n name: "jane.doe",\n displayName: "Jane Doe",\n description: "jane@gmail.com",\n },\n ]}\n/>\n```\n\nYou can add custom buttons to the footer by using the `footerButtons` prop. This prop is an array of objects of the shape `{ type: "action" | "toggle", props: {...} }`, where `props` accepts the `ActionIconButton` props (for `type: "action"`) or the `ToggleIconButton` props (for `type: "toggle"`), except `size` and `variant`, which are set by the editor.\n\n```jsx\nimport { AnonymousIcon } from "@baseline-ui/icons/16";\n\n<Editor\n aria-label="Editor"\n enableRichText\n footerButtons={[\n {\n type: "toggle",\n props: {\n "aria-label": "Save",\n icon: AnonymousIcon,\n onPress: () => {\n alert("Save");\n },\n },\n },\n ]}\n/>;\n```\n\n| Key | Function |\n| ------------------------------ | -------------------------------------------------------- |\n| `Ctrl+B` / `Cmd+B` | Toggle bold (rich text mode) |\n| `Ctrl+I` / `Cmd+I` | Toggle italic (rich text mode) |\n| `Ctrl+U` / `Cmd+U` | Toggle underline (rich text mode) |\n| `Ctrl+Z` / `Cmd+Z` | Undo (rich text mode) |\n| `Ctrl+Shift+Z` / `Cmd+Shift+Z` | Redo (rich text mode) |\n| `Ctrl+Y` | Redo (rich text mode) |\n| `@` | Start a mention (rich text mode with `mentionableUsers`) |\n| `Alt+F10` | Focus toolbar (rich text mode) |\n| `Ctrl+Enter` / `Cmd+Enter` | Submit (always) |\n| `Enter` | Submit (when `saveOnEnter` is true) |\n| `Shift+Enter` | New line |\n| `Ctrl+Shift+H` / `Cmd+Shift+H` | Open help dialog (rich text mode) |\n| `Escape` | Close mention input / help dialog |\n| `Tab` | Focus next |\n| `Shift+Tab` | Focus previous |\n\nWhen `saveOnEnter` is set to `true`, pressing the `Enter` key will submit the editor instead of creating a new line. This is useful for single-line text inputs or quick note-taking scenarios.\n\nThe `clearOnSave` and `clearOnCancel` props clear the editor content after the respective action completes. These are useful for resetting the editor after submission or cancellation.\n\nThe `autoFocus` prop allows you to focus the editor on mount with optional caret positioning:\n\n* `true` - Focus on mount, caret at default position\n* `"start"` - Focus on mount, caret at position 0\n* `"end"` - Focus on mount, caret at end of text\n\nThe `editorHandle` ref provides imperative methods for programmatic control:\n\n* `focus()` - Focus the editor\n* `setCaretPosition(index)` - Position the caret at a specific index\n\nThe `isSaveDisabled` prop disables only the save button while keeping the editor content functional. This is different from `isDisabled`, which disables both the editor and buttons.\n\nThe `maxMentionableUsersSuggestions` prop controls how many mention suggestions are displayed when the user types `@`. This is useful for large user lists where you want to limit the visible suggestions.\n\nThe `spellCheck` prop enables or disables browser spell checking in the editor.\n\nIn rich text mode, the editor includes a built-in help dialog that lists all available keyboard shortcuts (formatting, clipboard, undo/redo, submit). It opens as a modal overlay when the user presses `Ctrl+Shift+H` / `Cmd+Shift+H` while the editor has focus, and closes with `Escape` or the close button.\n\nUse the headless editor APIs when you need the rich-text engine without the default `Editor` chrome. This is useful for custom toolbars, inline editors embedded in other components, or experiences that need to render their own controls while reusing Baseline UI\'s rich-text model, keyboard shortcuts, selection handling, undo/redo, and HTML serialization.\n\n```jsx\nimport {\n EditorProvider,\n useEditable,\n useEditor,\n useEditorContext,\n} from "@baseline-ui/core";\n\nfunction FormattingToolbar() {\n const editor = useEditorContext();\n\n return (\n <button\n aria-pressed={editor.isMarkActive("bold")}\n onClick={() => editor.toggleMark("bold")}\n type="button"\n >\n Bold\n </button>\n );\n}\n\nfunction CustomRichTextEditor() {\n const editor = useEditor({\n defaultValue: "<p>Hello <b>world</b></p>",\n onChange: (html) => {\n console.log(html);\n },\n });\n const { editableProps } = useEditable(editor);\n\n return (\n <EditorProvider editor={editor}>\n <FormattingToolbar />\n <div {...editableProps} style={{ whiteSpace: "pre-wrap" }} />\n </EditorProvider>\n );\n}\n```\n\nThe headless API is split into these parts:\n\n| API | Purpose |\n| ------------------ | ------------------------------------------------------------------------ |\n| `useEditor` | Creates one rich-text editor instance and returns the `EditorState` API. |\n| `useEditable` | Attaches an `EditorState` to a `contenteditable` element. |\n| `EditorProvider` | Provides an editor instance to nested toolbar controls. |\n| `useEditorContext` | Reads the nearest provided editor instance. |\n| `EditorCore` | Framework-free engine escape hatch for advanced integrations. |\n\n`EditorState` exposes reactive state (`value`, `isEmpty`, `selectionState`, `canUndo`, `canRedo`, `isDisabled`) and imperative methods (`focus`, `setValue`, `getValue`, `undo`, `redo`, `exec`, `toggleMark`, `setMark`). For custom keyboard behavior, pass `onKeyDown` to `useEditable`; return `true` when you handled the event to skip the built-in shortcuts.\n\nStyle the editable element with `white-space: pre-wrap` (the built-in `Editor` does this internally). This preserves significant whitespace \u2014 leading, trailing, and consecutive spaces \u2014 which would otherwise collapse when the editor re-renders from its model, making a trailing space appear not to be inserted.\n\n| Selector | Description |\n| ------------------------------------------- | ----------------------------------------- |\n| `.BaselineUI-Editor` | Root container element |\n| `.BaselineUI-Editor-Save` | Save/submit button |\n| `.BaselineUI-Editor-Cancel` | Cancel button |\n| `.BaselineUI-Editor-Footer` | Footer toolbar containing action buttons |\n| `.BaselineUI-Editor-Mention` | Mention (@) button in footer |\n| `.BaselineUI-Editor-RichEditorToolbar` | Rich text formatting toolbar |\n| `.BaselineUI-Editor-RichEditorEditingArea` | Rich text contenteditable area |\n| `.BaselineUI-Editor-RichEditorPlaceholder` | Rich text empty-state placeholder overlay |\n| `.BaselineUI-Editor-PlainEditorEditingArea` | Plain text textarea element |\n\n`@baseline-ui/test-utils` ships a Playwright tester for the Editor so component and E2E specs don\'t have to relearn its markup. Build one from a frame and use its locators instead of hand-rolled selectors or translated labels:\n\n```ts\nimport { testers } from "@baseline-ui/test-utils";\n\nconst editor = testers(frame).editor();\n\nawait editor.textbox.fill("Hello");\nawait editor.boldButton.click();\nawait editor.openLinkDialog();\nawait editor.linkInput.fill("https://example.com");\nawait editor.linkAddButton.click();\nawait editor.startMention();\nawait editor.mentionOption("John Doe").click();\n```\n\nThe tester works in both modes \u2014 `textbox` resolves to the rich text contenteditable or the plain-mode `<textarea>` (both expose `role="textbox"`), and the rich-text-only surface (toolbar, link dialog, mention dropdown, help dialog) simply won\'t match when `enableRichText` is off. Pass a `root` locator when more than one Editor is mounted in the same frame:\n\n```ts\nconst editor = testers(frame).editor({\n root: frame.locator(".BaselineUI-Editor").first(),\n});\n```\n\nLocators are backed by stable `data-testid`s on the component (e.g. `editor-bold-button`, `editor-link-input`, `editor-help-dialog-close-button`) rather than accessible names, so they stay reliable across translations. The disclosure helpers (`openFontColorPicker`, `openBackgroundColorPicker`, `openLinkDialog`, `openHelpDialog`, `startMention`) are idempotent and no-op when the target surface is already open.',props:`interface EditorProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
  * identifier; new components should exclude it via
@@ -8104,7 +8316,118 @@ linkCancelLabel?: string
  * Message id: \`bui.editor.save\`. Defaults to \`"Save"\`.
  */
 linkSaveLabel?: string
-}`,stories:{usage:[{id:"core-miscellaneous-editor-rich-text--default",name:"Default",snippet:`const Default = () => <Editor
+}`,stories:{usage:[{id:"core-miscellaneous-editor--basic",name:"Basic",snippet:'const Basic = () => <Editor placeholder="Placeholder" aria-label="Editor" />;'},{id:"core-miscellaneous-editor--headless-custom",name:"Headless Custom Editor",snippet:"const HeadlessCustom = () => <HeadlessCustomEditor />;"},{id:"core-miscellaneous-editor-plain--controlled",name:"Controlled",snippet:`const Controlled = () => {
+    const [value, setValue] = React.useState(args.value);
+
+    return (
+        <Editor
+            placeholder="Type something..."
+            aria-label="Editor"
+            enableRichText={false}
+            spellCheck={false}
+            value={value}
+            onChange={(newValue) => {
+              setValue(newValue);
+            }} />
+    );
+};`},{id:"core-miscellaneous-editor-plain--minimal",name:"Minimal",snippet:`const Minimal = () => <Box display="flex" gap="3xl" flexDirection="column">
+    <div style={{ width: 260 }}>
+        <Editor
+            placeholder="Type something..."
+            aria-label="Editor"
+            enableRichText={false}
+            variant="minimal"
+            avatarName="John Doe"
+            spellCheck={false}
+            defaultValue="This is a minimal editor"
+            isInline={false} />
+    </div>
+    <Separator />
+    <div style={{ width: 260 }}>
+        <Editor
+            placeholder="Type something..."
+            aria-label="Editor"
+            enableRichText={false}
+            variant="minimal"
+            avatarName="John Doe"
+            spellCheck={false}
+            defaultValue="This is a minimal editor" />
+    </div>
+</Box>;`},{id:"core-miscellaneous-editor-plain--minimal-multiline",name:"Minimal Multiline",snippet:`const MinimalMultiline = () => <Editor
+    placeholder="Placeholder"
+    aria-label="Editor"
+    defaultValue="This is a minimal editor\\nwith multiple lines of text \\n\\nSome more text." />;`},{id:"core-miscellaneous-editor-plain--minimal-disabled",name:"Minimal Disabled",snippet:'const MinimalDisabled = () => <Editor placeholder="Placeholder" aria-label="Editor" isDisabled />;'},{id:"core-miscellaneous-editor-plain--minimal-save-disabled",name:"Minimal Save Disabled",snippet:'const MinimalSaveDisabled = () => <Editor placeholder="Placeholder" aria-label="Editor" isSaveDisabled />;'},{id:"core-miscellaneous-editor-plain--variants",name:"Variants",snippet:'const Variants = () => <Editor placeholder="Placeholder" aria-label="Editor" variant={undefined} />;'},{id:"core-miscellaneous-editor-plain--disabled",name:"Disabled",snippet:'const Disabled = () => <Editor placeholder="Placeholder" aria-label="Editor" isDisabled />;'},{id:"core-miscellaneous-editor-plain--auto-focus",name:"Auto Focus",snippet:'const AutoFocus = () => <EditorAutoFocusOnMount placeholder="Placeholder" aria-label="Editor" autoFocus />;'},{id:"core-miscellaneous-editor-plain--auto-focus-at-start",name:"Auto Focus At Start",snippet:`const AutoFocusAtStart = () => <Editor
+    placeholder="Placeholder"
+    aria-label="Editor"
+    autoFocus="start"
+    defaultValue="Caret will be at the start"
+    enableRichText={false} />;`},{id:"core-miscellaneous-editor-plain--auto-focus-at-end",name:"Auto Focus At End",snippet:`const AutoFocusAtEnd = () => <Editor
+    placeholder="Placeholder"
+    aria-label="Editor"
+    autoFocus="end"
+    defaultValue="Caret will be at the end"
+    enableRichText={false} />;`},{id:"core-miscellaneous-editor-plain--with-dynamic-caret-position",name:"With Dynamic Caret Position",snippet:`const WithDynamicCaretPosition = () => {
+    const editorHandleRef = React.useRef<EditorHandle>(null);
+
+    const [value, setValue] = React.useState(2);
+
+    return (
+        <>
+            <Box display="flex" gap="md" paddingBlockEnd="md">
+                <NumberInput
+                    label="Caret position"
+                    minValue={0}
+                    maxValue={args.value?.length ?? 0}
+                    value={value}
+                    onChange={setValue} />
+                <Box display="flex" alignItems="flex-end">
+                    <ActionButton
+                        label="Set caret"
+                        onPress={() => {
+                          editorHandleRef.current?.setCaretPosition(value);
+                        }} />
+                </Box>
+            </Box>
+            <Editor
+                editorHandle={editorHandleRef}
+                placeholder="Type something..."
+                aria-label="Editor"
+                enableRichText={false}
+                spellCheck={false}
+                value="This is a some text" />
+        </>
+    );
+};`},{id:"core-miscellaneous-editor-plain--custom-submit-icon",name:"Custom Submit Icon",snippet:`const CustomSubmitIcon = () => <Editor
+    placeholder="Placeholder"
+    aria-label="Editor"
+    defaultValue="Editor with a custom submit icon"
+    submitButtonIcon={CheckCircleFilledIcon}
+    submitButtonAriaLabel="Send" />;`},{id:"core-miscellaneous-editor-plain--with-cancel",name:"With Cancel",snippet:`const WithCancel = () => <Editor
+    placeholder="Placeholder"
+    aria-label="Editor"
+    onCancel={() => {}}
+    defaultValue="Some text to cancel" />;`},{id:"core-miscellaneous-editor-plain--clear-on-save",name:"Clear On Save",snippet:`const ClearOnSave = () => <Editor
+    placeholder="Placeholder"
+    aria-label="Editor"
+    clearOnSave
+    defaultValue="Text that clears on save" />;`},{id:"core-miscellaneous-editor-plain--clear-on-cancel",name:"Clear On Cancel",snippet:`const ClearOnCancel = () => <Editor
+    placeholder="Placeholder"
+    aria-label="Editor"
+    clearOnCancel
+    onCancel={() => {}}
+    defaultValue="Text that clears on cancel" />;`},{id:"core-miscellaneous-editor-plain--save-on-enter",name:"Save On Enter",snippet:`const SaveOnEnter = () => <Editor
+    placeholder="Placeholder"
+    aria-label="Editor"
+    saveOnEnter
+    defaultValue="Press Enter to save" />;`},{id:"core-miscellaneous-editor-plain--not-inline",name:"Not Inline",snippet:`const NotInline = () => <Editor
+    placeholder="Placeholder"
+    aria-label="Editor"
+    isInline={false}
+    defaultValue="Non-inline plain text editor" />;`},{id:"core-miscellaneous-editor-plain--default-save-disabled",name:"Default Save Disabled",snippet:`const DefaultSaveDisabled = () => <Editor
+    placeholder="Placeholder"
+    aria-label="Editor"
+    isSaveDisabled
+    defaultValue="Save is disabled" />;`},{id:"core-miscellaneous-editor-rich-text--default",name:"Default",snippet:`const Default = () => <Editor
     placeholder="Placeholder"
     aria-label="Editor"
     enableRichText
@@ -8215,6 +8538,8 @@ import React from "react";
 import { ActionButton } from "../../ActionButton";
 import { Box } from "../../Box";
 import { ColorInput } from "../../ColorInput";
+import { Dialog } from "../../Dialog";
+import { Modal, ModalContent } from "../../Modal";
 import { Text } from "../../Text";
 import { ToggleIconButton } from "../../ToggleIconButton";
 import { Editor } from "../Editor";
@@ -8229,7 +8554,11 @@ import type { ActionIconButtonProps } from "../../ActionIconButton";
 import type { ColorPreset } from "../../ColorInput";
 import type { ToggleIconButtonProps } from "../../ToggleIconButton";
 import type { MarkName } from "../core/commands";
-import type { EditorHandle, EditorProps } from "../Editor.types";
+import type {
+ EditorHandle,
+ EditorProps,
+ MentionableUser,
+} from "../Editor.types";
 
 export const EditorWithSetCaretButton = ({
  caretIndex,
@@ -8586,6 +8915,19 @@ export const HeadlessEditorNoShortcuts: React.FC = () => {
  );
 };
 
+const mentionExampleUsers: MentionableUser[] = [
+ { id: "john_1", name: "john", displayName: "John Doe" },
+ { id: "sara_2", name: "sara", displayName: "\u05E9\u05E8\u05D4 \u05DB\u05D4\u05DF" },
+];
+
+export const EditorMentionExample = (props: Partial<EditorProps>) => (
+ <Editor
+ enableRichText={true}
+ mentionableUsers={mentionExampleUsers}
+ {...props}
+ />
+);
+
 export const EditorWithAutoFocusAndCaretAtEnd = ({
  initialText,
  onChange,
@@ -8671,6 +9013,29 @@ export const EditorWithFooterButtonsExample: React.FC<
  },
  )}
  />
+);
+
+const modalMentionableUsers: MentionableUser[] = [
+ { id: "john_1", name: "john", displayName: "John Doe" },
+ { id: "jane_2", name: "jane", displayName: "Jane Roe" },
+];
+
+export const EditorInModalExample = ({
+ withMentions,
+ ...props
+}: EditorProps & { withMentions?: boolean }) => (
+ <Modal defaultOpen={true}>
+ <ModalContent>
+ <Dialog aria-label="Editor dialog">
+ <Editor
+ enableRichText={true}
+ aria-label="Comment"
+ mentionableUsers={withMentions ? modalMentionableUsers : undefined}
+ {...props}
+ />
+ </Dialog>
+ </ModalContent>
+ </Modal>
 );`},similarTo:[],figmaUrl:null},FileInput:{id:"core-forms-fileinput",breadcrumb:"Core/Forms/FileInput",importStatement:'import { FileInput, VariantViewer } from "@baseline-ui/core";',description:"`FileInput` is a form control for selecting one or more files from the user's device. It pairs a primary button with a read-only display of the chosen file name and supports labels, helper text, validation states, and accessibility hooks consistent with `TextInput`.",documentation:'`FileInput` is a form control for selecting one or more files from the user\'s device. It pairs a primary button with a read-only display of the chosen file name and supports labels, helper text, validation states, and accessibility hooks consistent with `TextInput`.\n\n* Built on top of [React Aria\'s `FileTrigger`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html), so it works with mouse, touch, and keyboard.\n* Only the button is interactive \u2014 the label, file name, and helper text are visual and wired into the button via `aria-describedby` for assistive technology.\n* Accepts an array of MIME types or file extensions via `acceptedFileTypes`, and an `allowsMultiple` flag for selecting more than one file.\n* Supports directory selection ([`acceptDirectory`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html#directory-selection)) and mobile capture ([`defaultCamera`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html#media-capture)) via the underlying `FileTrigger`.\n* Renders helper, warning, and error messages with the same precedence rules as the rest of the form components: error > warning > description.\n\n```jsx\nimport { FileInput } from "@baseline-ui/core";\n\n<FileInput\n label="Attachment"\n description="Supports .mov and .mp4"\n acceptedFileTypes={[".mov", ".mp4"]}\n onValueChange={(files) => console.log(files)}\n/>;\n```\n\nIf you need a drag-and-drop drop zone instead of a button trigger, use [`ImageDropZone`](/story/core-forms-imagedropzone--basic) or [`FileUploader`](/story/core-forms-fileuploader--default).\n\nPass a visible `label` for sighted users; the label is wired into the button\'s accessible description so it is announced on focus.\n\n```jsx\n<FileInput label="Attachment" description="Supports .mov and .mp4" />\n```\n\nBy default the label sits above the field. Pass `labelPosition="start"` to align it inline.\n\n```jsx\n<FileInput label="Attachment" labelPosition="start" />\n```\n\nIf the field is described by surrounding context, omit `label`. The button\'s intrinsic name (`buttonLabel`, "Choose file" by default) is still announced.\n\n```jsx\n<FileInput aria-label="Upload a file" />\n```\n\nSet `allowsMultiple` to allow more than one file. The display switches to an aggregate `"N files"` count once more than one file is selected.\n\n```jsx\n<FileInput label="Attachments" allowsMultiple onValueChange={setFiles} />\n```\n\nPass an array of MIME types or file extensions to `acceptedFileTypes`.\n\n```jsx\n<FileInput\n label="Avatar"\n acceptedFileTypes={["image/png", "image/jpeg"]}\n onValueChange={setAvatar}\n/>\n```\n\nSet `acceptDirectory` to let users pick a folder. The browser forwards every file inside the chosen directory to `onValueChange`.\n\n```jsx\n<FileInput label="Upload folder" acceptDirectory onValueChange={setFiles} />\n```\n\nSet `defaultCamera="user"` (front-facing) or `"environment"` (rear-facing) to hint that the picker should open the device\'s camera on mobile.\n\n```jsx\n<FileInput\n label="Take a photo"\n acceptedFileTypes={["image/*"]}\n defaultCamera="environment"\n/>\n```\n\nSet `autoFocus` to focus the button on mount \u2014 useful in dialogs or multi-step flows.\n\n```jsx\n<FileInput label="Attachment" autoFocus />\n```\n\nOverride `buttonLabel` and `placeholder` for non-English copy or domain-specific wording.\n\n```jsx\n<FileInput\n label="Avatar"\n buttonLabel="Browse..."\n placeholder="Drop an image here"\n/>\n```\n\nPass `validationState="warning"` and a `warningMessage` to show a non-blocking advisory.\n\n```jsx\n<FileInput\n label="Attachment"\n validationState="warning"\n warningMessage="This file format is uncommon \u2014 make sure it is supported."\n/>\n```\n\nSetting `errorMessage` flips the field into the error state and replaces the helper text. The error message takes precedence over both `description` and `warningMessage`.\n\n```jsx\n<FileInput label="Attachment" errorMessage="Please choose a supported file." />\n```\n\nDisable the field with `isDisabled`. The button cannot be activated and the displayed file name uses the disabled text color.\n\n```jsx\n<FileInput label="Attachment" isDisabled />\n```\n\n`FileInput` exposes a single callback for handling the selection:\n\n| Prop | Signature | When to use |\n| --------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `onValueChange` | `(files: File[]) => void` | Receives the parsed file list directly. When `allowsMultiple` is not set, the array has at most one entry. An empty array means the user opened and dismissed the file picker. |\n\n`FileInput` sets the following data attributes on the field wrapper. Use them to scope your custom styles.\n\n| Selector | Description |\n| ----------------------------------- | ---------------------------------------------------- |\n| `[data-disabled]` | Present when `isDisabled` is true. |\n| `[data-validation-state="error"]` | Present when an error message or error state is set. |\n| `[data-validation-state="warning"]` | Present when `validationState="warning"`. |\n| `.BaselineUI-FileInput` | Root element of the component. |\n\nTo style the button itself, target `.BaselineUI-FileInput button` or pass a class via `buttonClassName` / inline styles via `buttonStyle`.\n\n* Only the button is interactive; the label, file name, and helper text are visual elements wired into the button via `aria-describedby`.\n* The button keeps its own accessible name (`"Choose file"` by default), so screen readers announce the action on focus.\n* The visible `label`, the selected file name, and any helper/warning/error message are all referenced from the button\'s `aria-describedby`, so they are announced after the action label.\n* An externally supplied `aria-describedby` is merged with the internal IDs rather than replacing them.\n\n| Key | Action |\n| ----------------- | ----------------------------- |\n| `Tab` | Moves focus to the button. |\n| `Shift + Tab` | Moves focus out of the field. |\n| `Space` / `Enter` | Opens the system file picker. |',props:`interface FileInputProps {
 /**
  * The description to display below the input.
@@ -9346,7 +9711,31 @@ dropzoneLabel?: string
         isDisabled />
 </Box>;`},{id:"core-forms-fileuploader--no-label",name:"No Label",snippet:`const NoLabel = () => <Box style={{ width: 240 }}>
     <UploaderWithFileList label={undefined} description={undefined} onAdd={fn()} />
-</Box>;`}],implementation:""},similarTo:[],figmaUrl:null},FrameProvider:{id:"core-utilities-frameprovider",breadcrumb:"Core/Utilities/FrameProvider",importStatement:`import {
+</Box>;`}],implementation:`import React from "react";
+
+import { FileUploader } from "../FileUploader";
+
+import type { FileUploaderProps } from "../FileUploader.types";
+
+export const ToggleDisabledFileUploaderExample: React.FC<FileUploaderProps> = (
+ props,
+) => {
+ const [isDisabled, setIsDisabled] = React.useState(false);
+
+ return (
+ <>
+ <button
+ type="button"
+ onClick={() => {
+ setIsDisabled((value) => !value);
+ }}
+ >
+ Toggle disabled
+ </button>
+ <FileUploader label="Upload" isDisabled={isDisabled} {...props} />
+ </>
+ );
+};`},similarTo:[],figmaUrl:null},FrameProvider:{id:"core-utilities-frameprovider",breadcrumb:"Core/Utilities/FrameProvider",importStatement:`import {
     Box,
     FrameProvider,
     NestedTestFrameProvider,
@@ -9367,7 +9756,7 @@ dropzoneLabel?: string
 * Exposes container dimensions via \`useFrameDimensions\` hook
 
 \`\`\`tsx
-import { FrameProvider } from "../../utils";
+import { FrameProvider } from "@baseline-ui/core";
 
 <FrameProvider>
  <YourContent />
@@ -10353,7 +10742,7 @@ export const TrackedControlledFreehandCanvas = ({
 * **Accessibility**: ARIA grid pattern and selection announcements via ARIA live region.
 
 \`\`\`jsx
-import { GridList, Checkbox, Text } from "../../utils";
+import { GridList, Checkbox, Text, useFocusRing } from "@baseline-ui/core";
 
 const GridListItem = (
  { textValue },
@@ -10469,8 +10858,15 @@ import type { DroppableCollectionReorderEvent } from "@react-types/shared";
 import type { AriaButtonProps, GridListItemAria } from "react-aria";
 
 export const GridListItemRenderer: GridListProps["renderGridItem"] = (
- { textValue },
- { checkBoxProps, rowProps, isDisabled, gridCellProps, ...rest },
+ { textValue, value },
+ {
+ checkBoxProps,
+ rowProps,
+ isDisabled,
+ gridCellProps,
+ descriptionProps,
+ ...rest
+ },
  ref,
 ) => {
  return (
@@ -10478,6 +10874,7 @@ export const GridListItemRenderer: GridListProps["renderGridItem"] = (
  ref={ref}
  rowProps={rowProps}
  gridCellProps={gridCellProps}
+ descriptionProps={descriptionProps}
  isDisabled={isDisabled}
  {...rest}
  >
@@ -10494,6 +10891,9 @@ export const GridListItemRenderer: GridListProps["renderGridItem"] = (
  <Text type="label" size="sm">
  {textValue}
  </Text>
+ {value?.description ? (
+ <span {...descriptionProps}>{value.description}</span>
+ ) : null}
  <ActionIconButton
  icon={EllipseIcon}
  variant="secondary"
@@ -10547,13 +10947,17 @@ GridListContainer.displayName = "GridListContainer";
 type GridListExampleProps = Omit<
  GridListProps,
  "renderGridItem" | "items" | "data-block-id"
->;
+> &
+ Partial<Pick<GridListProps, "items">>;
 
-export const GridListExample: React.FC<GridListExampleProps> = (props) => {
+export const GridListExample: React.FC<GridListExampleProps> = ({
+ items = gridItems,
+ ...props
+}) => {
  return (
  <GridList
  renderGridItem={GridListItemRenderer}
- items={gridItems}
+ items={items}
  data-block-id="grid-list"
  {...props}
  />
@@ -10576,9 +10980,10 @@ export const GridListFocusOnEntryExample: React.FC<GridListExampleProps> = (
  );
 };
 
-export const GridListControlledExample: React.FC<GridListExampleProps> = (
- props,
-) => {
+export const GridListControlledExample: React.FC<GridListExampleProps> = ({
+ items = gridItems,
+ ...props
+}) => {
  const handleRef = useRef<ListHandle>(null);
 
  return (
@@ -10586,7 +10991,7 @@ export const GridListControlledExample: React.FC<GridListExampleProps> = (
  <ActionButton
  label="Scroll to bottom"
  onPress={() => {
- handleRef.current?.scrollIntoView(gridItems.at(-1)?.id ?? "", {
+ handleRef.current?.scrollIntoView(items.at(-1)?.id ?? "", {
  behavior: "smooth",
  block: "end",
  });
@@ -10596,7 +11001,7 @@ export const GridListControlledExample: React.FC<GridListExampleProps> = (
  <ActionButton
  label="Focus Last Item"
  onPress={() => {
- handleRef.current?.setFocusedKey(gridItems.at(-1)?.id ?? "");
+ handleRef.current?.setFocusedKey(items.at(-1)?.id ?? "");
  }}
  preventFocusOnPress={true}
  />
@@ -10607,7 +11012,7 @@ export const GridListControlledExample: React.FC<GridListExampleProps> = (
  padding: 10,
  }}
  >
- <GridListExample {...props} gridListHandle={handleRef} />
+ <GridListExample {...props} items={items} gridListHandle={handleRef} />
  </div>
  </Box>
  );
@@ -10810,7 +11215,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| 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 {
+};`},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 "@baseline-ui/core";\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. |',props:`interface GroupProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
  * identifier; new components should exclude it via
@@ -11035,10 +11440,10 @@ export const OverridePrecedenceExample: React.FC = () => (
 * Ability to paste a copied image into the drop zone
 
 \`\`\`jsx
-import { ImageDropZone } from "../../utils";
+import { ImageDropZone } from "@baseline-ui/core";
 
 <ImageDropZone
- buttonLabel="Upload"
+ pickerButtonLabel="Upload"
  onValueChange={(files) => {
  console.log(files);
  }}
@@ -11070,7 +11475,7 @@ If you pass this, the \`ImageDropZone\` component will render the image in the d
 />
 \`\`\`
 
-The \`ImageDropZone\` component can be disabled by setting the \`isDisabled\` prop to \`true\`. In this state, the component will not be able to receive focus or be interacted with.
+The \`ImageDropZone\` component can be disabled by setting the \`isDisabled\` prop to \`true\`. In this state, the component will not be able to receive focus or be interacted with. A disabled drop zone is also not a drop target: it ignores dragged files and is skipped during keyboard drags.
 
 \`\`\`jsx
 <ImageDropZone
@@ -11334,7 +11739,35 @@ onFileTypeError?: (file: File) => void
     accept="image/png"
     onFileTypeError={(file: File) => {
       alert(\`File "\${file.name}" (\${file.type}) is not an accepted PNG image.\`);
-    }} />;`}],implementation:""},similarTo:[],figmaUrl:null},ImageGallery:{id:"core-collections-imagegallery",breadcrumb:"Core/Collections/ImageGallery",importStatement:`import {
+    }} />;`}],implementation:`import React from "react";
+import { useDrag } from "react-aria/useDrag";
+
+import { ImageDropZone } from "../ImageDropZone";
+
+import type { ImageDropZoneProps } from "../ImageDropZone.types";
+import type { DragOptions } from "react-aria/useDrag";
+
+const Draggable = ({ onDragEnd }: Pick<DragOptions, "onDragEnd">) => {
+ const { dragProps } = useDrag({
+ getItems: () => [{ "text/plain": "hello" }],
+ onDragEnd,
+ });
+
+ return (
+ <div {...dragProps} role="button" tabIndex={0}>
+ Draggable
+ </div>
+ );
+};
+
+export const KeyboardDragImageDropZoneExample: React.FC<
+ ImageDropZoneProps & Pick<DragOptions, "onDragEnd">
+> = ({ onDragEnd, ...props }) => (
+ <>
+ <Draggable onDragEnd={onDragEnd} />
+ <ImageDropZone pickerButtonLabel="Upload" aria-label="Image" {...props} />
+ </>
+);`},similarTo:[],figmaUrl:null},ImageGallery:{id:"core-collections-imagegallery",breadcrumb:"Core/Collections/ImageGallery",importStatement:`import {
     Box,
     ControlledImageGalleryExample,
     CustomSizeImageGalleryExample,
@@ -11353,7 +11786,7 @@ onFileTypeError?: (file: File) => void
 * Single and multiple selection modes for images
 
 \`\`\`jsx
-import { ImageGallery } from "../../utils";
+import { ImageGallery } from "@baseline-ui/core";
 
 export const items = Array.from({ length: 10 }, (_, i) => {
  const index = i + 1;
@@ -11371,7 +11804,7 @@ export const items = Array.from({ length: 10 }, (_, i) => {
 
 The ImageGallery supports drag and drop operations for rearranging images. This is especially useful in scenarios where the order of images matters, like in a photo editing workflow or when creating a custom photo album. You can select an image by clicking on it, touch (on touch-enabled devices), or via keyboard (Enter key) and then move it to a new position as needed.
 
-You can enable reordering by setting the \`enableReorder\` prop to \`true\`.
+Reordering is enabled when you pass an \`onReorder\` handler.
 
 Depending on the context, you might want to allow your users to select multiple images at once (like when bulk deleting images or adding them to a cart). Alternatively, you might only want them to select one image at a time (like choosing a profile picture). ImageGallery supports both single and multiple selection modes, providing flexibility to suit varied use cases. The Space key can be used for selecting images.
 
@@ -12946,8 +13379,11 @@ elementProps?: {
 * Supports keyboard navigation
 * The toolbar is exposed to screen readers as a toolbar
 
+This example does not compile until \`InlineToolbar\` is exported from \`@baseline-ui/core\`.
+
 \`\`\`jsx
-import { InlineToolbar } from "../../utils";
+import { InlineToolbar, Text } from "@baseline-ui/core";
+import { TrashIcon } from "@baseline-ui/icons/24";
 
 const items = [
  {
@@ -12956,13 +13392,16 @@ const items = [
  },
  {
  id: "delete",
- icon: BinIcon,
+ icon: TrashIcon,
  "aria-label": "Delete",
  },
 ];
 
 <InlineToolbar items={items}>
- Select the text and scroll to see the inline toolbar in the correct position.
+ <Text>
+ Select the text and scroll to see the inline toolbar in the correct
+ position.
+ </Text>
 </InlineToolbar>;
 \`\`\``,props:`interface InlineToolbarProps {
 /**
@@ -13232,7 +13671,7 @@ shouldUseSymbol?: boolean
       <Kbd>Ctrl+Alt+Shift+Enter</Kbd>
     </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 {
+);`}],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 "@baseline-ui/core";\n\n<Link href="https://www.nutrient.io/">Nutrient</Link>;\n```\n\nThe `Link` component comes in three sizes: `sm`, `md`, and `lg`.\n\n```jsx\nimport { Link } from "@baseline-ui/core";\n\n<>\n <Link href="https://www.nutrient.io/sdk/" size="sm">\n Small link\n </Link>\n <Link href="https://www.nutrient.io/sdk/" size="md">\n Medium link\n </Link>\n <Link href="https://www.nutrient.io/sdk/" size="lg">\n Large link\n </Link>\n</>;\n```\n\nThe `Link` component comes in two variants: `default` and `inline`.\n\n```jsx\nimport { Link } from "@baseline-ui/core";\n\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```\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 "@baseline-ui/core";\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 "@baseline-ui/core";\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. |',props:`interface LinkProps {
 /**
  * Indicates whether this element represents the current item within a container or set of related
  * elements.
@@ -14032,10 +14471,29 @@ export const DynamicListBoxExample: React.FC<
  ) : null}
  </Box>
  );
+};
+
+export const ListBoxFocusLastItemExample: React.FC<{ items: ListItem[] }> = ({
+ items,
+}) => {
+ const handle = React.useRef<ListHandle>(null);
+
+ return (
+ <Box display="flex" flexDirection="column" gap="md">
+ <ActionButton
+ label="Focus Last Item"
+ preventFocusOnPress={true}
+ onPress={() => {
+ handle.current?.setFocusedKey(items.at(-1)?.id ?? "");
+ }}
+ />
+ <ListBox aria-label="List box" items={items} listBoxHandle={handle} />
+ </Box>
+ );
 };`},similarTo:[],figmaUrl:null},Markdown:{id:"core-content-markdown",breadcrumb:"Core/Content/Markdown",importStatement:'import { Markdown } from "@baseline-ui/core";',description:"`Markdown` renders a Markdown string as styled HTML with support for [GitHub Flavored Markdown](https://github.github.com/gfm/). Use it to display authored content such as release notes, help text, or user-supplied prose.",documentation:`\`Markdown\` renders a Markdown string as styled HTML with support for [GitHub Flavored Markdown](https://github.github.com/gfm/). Use it to display authored content such as release notes, help text, or user-supplied prose.
 
 \`\`\`jsx
-import { Markdown } from "@storybook/addon-docs/blocks";
+import { Markdown } from "@baseline-ui/core";
 
 export const MyComponent = () => {
  const markdown = \`
@@ -14662,9 +15120,24 @@ import type { Selection } from "react-stately";
 export const MenuExample: React.FC<
  MenuProps & {
  label: string;
+ wrapTrigger?: boolean;
+ }
+> = ({ label, wrapTrigger = false, ...props }) => {
+ return (
+ <Menu
+ renderTrigger={
+ wrapTrigger
+ ? ({ buttonProps, ref }) => (
+ <div data-testid="menu-trigger-wrapper">
+ <ActionButton {...buttonProps} ref={ref} />
+ </div>
+ )
+ : undefined
  }
-> = ({ label, ...props }) => {
- return <Menu {...props} triggerLabel={label} />;
+ {...props}
+ triggerLabel={label}
+ />
+ );
 };
 
 // Renders the (key, value) pair react-aria now passes to \`onAction\` so a spec
@@ -14977,13 +15450,14 @@ Combine this with \`UNSAFE_enableInert\` to ensure that background elements behi
 
 \`\`\`jsx
 import {
+ ActionButton,
  Dialog,
  Modal,
  ModalTrigger,
  ModalContent,
  ModalClose,
  DialogTitle,
-} from "../../utils";
+} from "@baseline-ui/core";
 
 <Modal>
  <ModalTrigger>
@@ -15499,10 +15973,10 @@ export const ModalLateBodyContainerExample: React.FC<
 It is a wrapper around the [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) API.
 
 \`\`\`jsx
-import { NumberFormat } from "../../utils";
+import { NumberFormat } from "@baseline-ui/core";
 
 const MyComponent = () => (
- <NumberFormat value={1000} style: "currency" currency: "USD" />
+ <NumberFormat value={1000} style="currency" currency="USD" />
 );
 \`\`\`
 
@@ -15511,7 +15985,7 @@ The above example will render the number in the US locale:
 You can also use \`I18nProvider\` to override the current locale:
 
 \`\`\`jsx
-import { I18nProvider } from "../../utils";
+import { I18nProvider, NumberFormat } from "@baseline-ui/core";
 
 const MyComponent = () => (
  <I18nProvider locale="fr">
@@ -15588,7 +16062,7 @@ value: number
             <strong>Formatted number</strong>: <NumberFormat value={0.35} style="percent" minimumFractionDigits={2} />
         </div>
     );
-};`}],implementation:""},similarTo:[],figmaUrl:null},NumberInput:{id:"core-forms-numberinput",breadcrumb:"Core/Forms/NumberInput",importStatement:'import { NumberInput, VariantViewer } from "@baseline-ui/core";',description:"`NumberInput` is a text field for entering numeric values, with stepper buttons, min/max clamping, and locale-aware formatting. Use it when collecting a single number such as a quantity, price, or measurement.",documentation:'`NumberInput` is a text field for entering numeric values, with stepper buttons, min/max clamping, and locale-aware formatting. Use it when collecting a single number such as a quantity, price, or measurement.\n\n* Formatting and parsing of internationalised numbers, such as decimals, percentages, currency values, and units\n* Automatically finds the numbering system being used and can parse numbers that are not in the default numbering system for the locale.\n* Checks the user\'s keystrokes as they type to make sure they are valid numbers according to the locale and numbering system.\n* Chooses an appropriate software keyboard for mobile based on the current platform and allowed values.\n* Supports rounding to a configurable number of fraction digits. Supports clamping the value between a configurable minimum and maximum and snapping to a step value.\n* Allows you to keep going up or down by pressing and holding the stepper buttons. - Allows you to go up or down by using the scroll wheel.\n* Exposed to assistive technology as a text field with a custom, locally-tailored role description using ARIA\n* Follows the [spinbutton](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/) ARIA pattern. Gets around bugs in VoiceOver with the spinbutton role.\n* Uses an ARIA live region to make sure that value changes are announced.\n* Supports description and error message help text linked to the input via ARIA.\n\n```jsx\nimport { NumberInput } from "../../utils";\n\n<NumberInput placeholder="Placeholder" />;\n```\n\nThe `NumberInput` component supports the following variants: `primary` and `ghost`.\n\n```jsx\n<NumberInput placeholder="Placeholder" variant="primary" />\n<NumberInput placeholder="Placeholder" variant="ghost" />\n```\n\nThe `NumberInput` component supports the `isReadOnly` prop to make the input read-only.\n\n```jsx\n<NumberInput placeholder="Placeholder" isReadOnly value={5} />\n```\n\nThe `NumberInput` component supports the `isDisabled` prop to disable the input.\n\n```jsx\n<NumberInput placeholder="Placeholder" isDisabled value={5} />\n```\n\nThe `NumberInput` component supports the `value` prop to control the value of the input. The `onChange` event is triggered when the value changes. This happens when the user types a value and blurs the input, or when incrementing or decrementing the value. It does not happen as the user types because partial input may not be parseable to a valid number.\n\n```jsx\n<NumberInput placeholder="Placeholder" value={5} onChange={console.log} />\n```\n\nTo clamp the value between a minimum and maximum value, the `minValue` and `maxValue` props are supported by the `NumberInput` component. If you provide either `maxValue` or `minValue` instead of both, you can make ranges open ended.\n\nIt is a good idea to give NumberField the valid range in advance so that it can optimise the experience. For example, on iOS, you can use a numeric keyboard instead of a full text keyboard (which requires you to enter a minus sign) when the minimum value is greater than or equal to zero.\n\n```jsx\n<NumberInput placeholder="Placeholder" minValue={0} maxValue={10} />\n```\n\nYou can use the `step` prop to snap the value to certain steps. If a `minValue` is set, the steps are worked out starting from the lowest value. For example, if `minValue` is set to 2 and step is set to 3, the valid step values are 2, 5, 8, 11, etc. If no `minValue` is set, the steps are calculated from zero in both directions if there is no `minValue`. To put it another way, so that the values are evenly divided by the step. If no step is set, any decimal value can be typed, but incrementing or decrementing the value changes it to a whole number.\n\nIf the user types a value that is between two steps and then blurs the input, the value will be snapped to the nearest step. When you increase or decrease a value, it jumps to the next step that is either higher or lower. When starting with an empty field and going up or down, the value starts at the `minValue` or `maxValue`, if they are set. If not, the number starts at 0.\n\n```jsx\n<NumberInput\n placeholder="Placeholder"\n step={3}\n defaultValue={2}\n minValue={2}\n formatOptions={{ style: "decimal", maximumFractionDigits: 1 }}\n/>\n```\n\nThe `NumberInput` component supports the `errorMessage` prop to display an error message below the input. The `isInvalid` prop can be used to indicate that the input is invalid. If the `isInvalid` prop is set to `true`, the input will be styled with an error state.\n\n```jsx\n<NumberInput placeholder="Placeholder" errorMessage="Error Message" isInvalid />\n```\n\n`NumberInput` automatically takes care of many parts of internationalisation, such as formatting and parsing numbers based on the current locale and numbering system. Also, the "increment" and "decrement" buttons have ARIA labels that are localised for each language.\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-invalid] | Whether the component is invalid. |\n\n| Key | Function |\n| --------------- | ------------------------------------- |\n| <kbd>Up</kbd> | Increment the value by the step value |\n| <kbd>Down</kbd> | Decrement the value by the step value |\n\n```\n```',props:`interface NumberInputProps {
+};`}],implementation:""},similarTo:[],figmaUrl:null},NumberInput:{id:"core-forms-numberinput",breadcrumb:"Core/Forms/NumberInput",importStatement:'import { NumberInput, VariantViewer } from "@baseline-ui/core";',description:"`NumberInput` is a text field for entering numeric values, with stepper buttons, min/max clamping, and locale-aware formatting. Use it when collecting a single number such as a quantity, price, or measurement.",documentation:'`NumberInput` is a text field for entering numeric values, with stepper buttons, min/max clamping, and locale-aware formatting. Use it when collecting a single number such as a quantity, price, or measurement.\n\n* Formatting and parsing of internationalised numbers, such as decimals, percentages, currency values, and units\n* Automatically finds the numbering system being used and can parse numbers that are not in the default numbering system for the locale.\n* Checks the user\'s keystrokes as they type to make sure they are valid numbers according to the locale and numbering system.\n* Chooses an appropriate software keyboard for mobile based on the current platform and allowed values.\n* Supports rounding to a configurable number of fraction digits. Supports clamping the value between a configurable minimum and maximum and snapping to a step value.\n* Allows you to keep going up or down by pressing and holding the stepper buttons. - Allows you to go up or down by using the scroll wheel.\n* Exposed to assistive technology as a text field with a custom, locally-tailored role description using ARIA\n* Follows the [spinbutton](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/) ARIA pattern. Gets around bugs in VoiceOver with the spinbutton role.\n* Uses an ARIA live region to make sure that value changes are announced.\n* Supports description and error message help text linked to the input via ARIA.\n\n```jsx\nimport { NumberInput } from "@baseline-ui/core";\n\n<NumberInput placeholder="Placeholder" />;\n```\n\nThe `NumberInput` component supports the following variants: `primary` and `ghost`.\n\n```jsx\n<NumberInput placeholder="Placeholder" variant="primary" />\n<NumberInput placeholder="Placeholder" variant="ghost" />\n```\n\nThe `NumberInput` component supports the `isReadOnly` prop to make the input read-only.\n\n```jsx\n<NumberInput placeholder="Placeholder" isReadOnly value={5} />\n```\n\nThe `NumberInput` component supports the `isDisabled` prop to disable the input.\n\n```jsx\n<NumberInput placeholder="Placeholder" isDisabled value={5} />\n```\n\nThe `NumberInput` component supports the `value` prop to control the value of the input. The `onChange` event is triggered when the value changes. This happens when the user types a value and blurs the input, or when incrementing or decrementing the value. It does not happen as the user types because partial input may not be parseable to a valid number.\n\n```jsx\n<NumberInput placeholder="Placeholder" value={5} onChange={console.log} />\n```\n\nTo clamp the value between a minimum and maximum value, the `minValue` and `maxValue` props are supported by the `NumberInput` component. If you provide either `maxValue` or `minValue` instead of both, you can make ranges open ended.\n\nIt is a good idea to give NumberField the valid range in advance so that it can optimise the experience. For example, on iOS, you can use a numeric keyboard instead of a full text keyboard (which requires you to enter a minus sign) when the minimum value is greater than or equal to zero.\n\n```jsx\n<NumberInput placeholder="Placeholder" minValue={0} maxValue={10} />\n```\n\nYou can use the `step` prop to snap the value to certain steps. If a `minValue` is set, the steps are worked out starting from the lowest value. For example, if `minValue` is set to 2 and step is set to 3, the valid step values are 2, 5, 8, 11, etc. If no `minValue` is set, the steps are calculated from zero in both directions if there is no `minValue`. To put it another way, so that the values are evenly divided by the step. If no step is set, any decimal value can be typed, but incrementing or decrementing the value changes it to a whole number.\n\nIf the user types a value that is between two steps and then blurs the input, the value will be snapped to the nearest step. When you increase or decrease a value, it jumps to the next step that is either higher or lower. When starting with an empty field and going up or down, the value starts at the `minValue` or `maxValue`, if they are set. If not, the number starts at 0.\n\n```jsx\n<NumberInput\n placeholder="Placeholder"\n step={3}\n defaultValue={2}\n minValue={2}\n formatOptions={{ style: "decimal", maximumFractionDigits: 1 }}\n/>\n```\n\nThe `NumberInput` component supports the `errorMessage` prop to display an error message below the input. The `isInvalid` prop can be used to indicate that the input is invalid. If the `isInvalid` prop is set to `true`, the input will be styled with an error state.\n\n```jsx\n<NumberInput placeholder="Placeholder" errorMessage="Error Message" isInvalid />\n```\n\n`NumberInput` automatically takes care of many parts of internationalisation, such as formatting and parsing numbers based on the current locale and numbering system. Also, the "increment" and "decrement" buttons have ARIA labels that are localised for each language.\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-invalid] | Whether the component is invalid. |\n\n| Key | Function |\n| --------------- | ------------------------------------- |\n| <kbd>Up</kbd> | Increment the value by the step value |\n| <kbd>Down</kbd> | Decrement the value by the step value |',props:`interface NumberInputProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
  * identifier; new components should exclude it via
@@ -15943,36 +16417,46 @@ errorMessage?: string
 * Support for description and error message help text linked to the input via ARIA
 
 \`\`\`jsx
-import { Pagination } from "../../utils";
+import { Pagination } from "@baseline-ui/core";
 
-<Pagination maxValue={10} />;
+<Pagination aria-label="Pagination" maxValue={10} />;
 \`\`\`
 
 The \`Pagination\` component can be used uncontrolled by omitting the \`value\` prop. You can
 provide an initial value with the \`defaultValue\` prop.
 
 \`\`\`jsx
-import { Pagination } from "../../utils";
+import { Pagination } from "@baseline-ui/core";
 
-<Pagination maxValue={10} defaultValue={5} />;
+<Pagination aria-label="Pagination" maxValue={10} defaultValue={5} />;
 \`\`\`
 
 The \`Pagination\` component can be used controlled by providing a \`value\` prop.
 
 \`\`\`jsx
-import { Pagination } from "../../utils";
+import { Pagination } from "@baseline-ui/core";
 
-<Pagination maxValue={10} value={5} />;
+<Pagination aria-label="Pagination" maxValue={10} value={5} />;
 \`\`\`
 
 The \`Pagination\` component supports two variants: \`floating\` and \`pinned\`. The
 \`floating\` variant is the default.
 
 \`\`\`jsx
-import { Pagination } from "../../utils";
+import { Pagination } from "@baseline-ui/core";
 
-<Pagination maxValue={10} defaultValue={5} variant="floating" />;
-<Pagination maxValue={10} defaultValue={5} variant="pinned" />;
+<Pagination
+ aria-label="Pagination"
+ maxValue={10}
+ defaultValue={5}
+ variant="floating"
+/>;
+<Pagination
+ aria-label="Pagination"
+ maxValue={10}
+ defaultValue={5}
+ variant="pinned"
+/>;
 \`\`\`
 
 The \`Pagination\` component can be set to read-only by setting the \`isReadOnly\` prop.
@@ -15983,12 +16467,12 @@ The \`Pagination\` component supports four sizes: \`xs\`, \`sm\`, \`md\`, and \`
 \`md\` size is the default.
 
 \`\`\`jsx
-import { Pagination } from "../../utils";
+import { Pagination } from "@baseline-ui/core";
 
-<Pagination maxValue={10} defaultValue={5} size="xs" />;
-<Pagination maxValue={10} defaultValue={5} size="sm" />;
-<Pagination maxValue={10} defaultValue={5} />;
-<Pagination maxValue={10} defaultValue={5} size="lg" />;
+<Pagination aria-label="Pagination" maxValue={10} defaultValue={5} size="xs" />;
+<Pagination aria-label="Pagination" maxValue={10} defaultValue={5} size="sm" />;
+<Pagination aria-label="Pagination" maxValue={10} defaultValue={5} />;
+<Pagination aria-label="Pagination" maxValue={10} defaultValue={5} size="lg" />;
 \`\`\`
 
 The \`Pagination\` component supports localization of the input value. Change the
@@ -16008,11 +16492,11 @@ locale in the toolbar to see the input value change.
 The following strings are used by the \`Pagination\` component and can be overridden via \`I18nProvider\`:
 
 | Key | Default (en) |
-| ------------------------- | --------------------- |
+| ------------------------- | ----------------------- |
 | \`bui.pagination.nextPage\` | Next Page |
 | \`bui.pagination.prevPage\` | Previous Page |
 | \`bui.pagination.goToPage\` | Go to Page |
-| \`bui.pagination.pageXofY\` | Page {arg0} of {arg1} |
+| \`bui.pagination.pageXofY\` | \`Page {arg0} of {arg1}\` |
 
 \`\`\`jsx
 import { I18nProvider, Pagination } from "@baseline-ui/core";
@@ -16908,11 +17392,11 @@ case is same as not having \`PointPicker\` component in the first place.
 
 The demo can be found [here](/story/core-content-pointpicker--disabled)
 
-The \`showGridLines\` prop in \`PointPickerContent\` can be used to hide the grid lines on the \`PointPickerContent\` component. The default value is \`true\`.
+The \`gridLines\` prop in \`PointPickerContent\` can be used to hide the grid lines on the \`PointPickerContent\` component. The default value is \`true\`.
 
 \`\`\`tsx
 <PointPicker>
- <PointPickerContent showGridLines={false}>
+ <PointPickerContent gridLines={false}>
  <YourContent />
  </PointPickerContent>
  <PointPickerDisplay />
@@ -16921,23 +17405,27 @@ The \`showGridLines\` prop in \`PointPickerContent\` can be used to hide the gri
 
 The demo can be found [here](/story/core-content-pointpicker-pointpickercontent--without-grid-lines)
 
-The \`PointPickerDisplay\` component is used to show the magnifier and the selected point. It can be configured to be \`floating\` or \`auto\` to the top right corner of the screen. The floating variant moves with the mouse cursor.
+The \`PointPickerDisplay\` component is used to show the magnifier and the selected point. By default the display renders where you place it. Set \`floating\` to render it in a popover that follows the cursor.
 
 \`\`\`tsx
 <PointPicker>
- <PointPickerContent />
- <PointPickerDisplay variant="floating" />
+ <PointPickerContent>
+ <YourContent />
+ </PointPickerContent>
+ <PointPickerDisplay floating />
 </PointPicker>
 \`\`\`
 
 The demo can be found [here](/story/core-content-pointpicker-pointpickerdisplay--with-floating-display)
 
-The \`scale\` prop in \`PointPickerDisplay\` can be used to customize the scale of the magnifier. The default value is \`1\`.
+Pass \`magnifier={{ scale }}\` to \`PointPickerDisplay\` to customize the magnifier scale. The default scale is \`2\`.
 
 \`\`\`tsx
 <PointPicker>
- <PointPickerContent />
- <PointPickerDisplay scale={2} />
+ <PointPickerContent>
+ <YourContent />
+ </PointPickerContent>
+ <PointPickerDisplay magnifier={{ scale: 4 }} />
 </PointPicker>
 \`\`\`
 
@@ -16998,8 +17486,10 @@ import { resolvePublicUrl } from "../../../utils/resolvePublicUrl";
 import { ActionButton } from "../../ActionButton";
 import { Box } from "../../Box";
 import { Checkbox } from "../../Checkbox";
+import { Dialog } from "../../Dialog";
 import { Link } from "../../Link";
 import { Markdown } from "../../Markdown";
+import { Modal, ModalContent } from "../../Modal";
 import { NumberInput } from "../../NumberInput";
 import { PointPicker, PointPickerContent } from "../../PointPicker";
 import { Select } from "../../Select";
@@ -17368,8 +17858,11 @@ export const DynamicDescriptionExample = ({ scale }: { scale?: number }) => (
 
 export const PointsProximityExample = ({
  type = "nearest",
+ points,
 }: {
  type?: "nearest" | "within";
+ /** Fixed snap points, in place of random ones. */
+ points?: { x: number; y: number }[];
 }) => {
  const [snapPoints, setSnapPoints] = useState<number>(10_000);
  const [snapRadius, setSnapRadius] = useState<number>(20);
@@ -17382,6 +17875,8 @@ export const PointsProximityExample = ({
  const ref = useRef<HTMLDivElement>(null);
 
  const _snapPoints = useMemo(() => {
+ if (points) return points;
+
  const contentBounds = content?.getBoundingClientRect();
 
  if (!contentBounds) return [];
@@ -17390,7 +17885,7 @@ export const PointsProximityExample = ({
  x: Math.random() * contentBounds.width,
  y: Math.random() * contentBounds.height,
  }));
- }, [snapPoints, content]);
+ }, [snapPoints, content, points]);
 
  return (
  <Box display="flex" flexDirection="column" gap="xl" ref={ref}>
@@ -17558,6 +18053,31 @@ export const RenderCursorExample: React.FC<{
  <div style={{ width: 200, height: 200 }}>Test content</div>
  </PointPickerContent>
  </PointPicker>
+);
+
+export const PointPickerInModalExample: React.FC<{
+ preventEscape?: boolean;
+}> = ({ preventEscape }) => (
+ <Modal defaultOpen={true}>
+ <ModalContent>
+ <Dialog aria-label="Point picker dialog">
+ <PointPicker>
+ <PointPickerDisplay />
+ <PointPickerContent
+ onKeyDown={
+ preventEscape
+ ? (e) => {
+ if (e.key === "Escape") e.preventDefault();
+ }
+ : undefined
+ }
+ >
+ <RichContentBlock />
+ </PointPickerContent>
+ </PointPicker>
+ </Dialog>
+ </ModalContent>
+ </Modal>
 );`},similarTo:[],figmaUrl:null},Popover:{id:"core-overlays-popover",breadcrumb:"Core/Overlays/Popover",importStatement:`import {
     ActionButton,
     Box,
@@ -17581,7 +18101,7 @@ export const RenderCursorExample: React.FC<{
 * It supports mouse, keyboard, and touch interactions.
 
 \`\`\`jsx
-import { Popover, PopoverTrigger, PopoverContent } from "../../utils";
+import { Popover, PopoverTrigger, PopoverContent } from "@baseline-ui/core";
 
 <Popover type="listbox">
  <PopoverTrigger>{/* Trigger component goes here */}</PopoverTrigger>
@@ -17591,7 +18111,9 @@ import { Popover, PopoverTrigger, PopoverContent } from "../../utils";
 </Popover>;
 \`\`\`
 
-The \`PopoverTrigger\` component is used to wrap the element that will trigger the popover to open. It can any one of the button components from \`../../utils\`.
+The \`PopoverTrigger\` component is used to wrap the element that will trigger the popover to open. It can be any one of the button components from \`@baseline-ui/core\`.
+
+A button placed directly inside \`PopoverTrigger\` keeps its own \`onPress\`, which runs each time the button is pressed, before the popover toggles. Its own \`aria-haspopup\` and \`aria-controls\` apply only where the popover sets none: \`aria-controls\` points at the popover content while it is open. The popover always sets \`aria-expanded\`.
 
 It can also be replaced with specific coordinates and dimensions using the \`anchorRect\` prop; those coordinates will be used as anchor reference for positioning the popover content.
 
@@ -17644,7 +18166,12 @@ For advanced use cases where the trigger element's position changes dynamically
 
 \`\`\`jsx
 import { useRef } from "react";
-import { Popover, PopoverTrigger, PopoverContent } from "../../utils";
+import {
+ ActionButton,
+ Popover,
+ PopoverTrigger,
+ PopoverContent,
+} from "@baseline-ui/core";
 
 function MyComponent() {
  const popoverHandleRef = useRef(null);
@@ -17657,7 +18184,7 @@ function MyComponent() {
  return (
  <Popover type="listbox">
  <PopoverTrigger>
- <ActionButton label="Open" onClick={moveTrigger} />
+ <ActionButton label="Open" onPress={moveTrigger} />
  </PopoverTrigger>
  <PopoverContent elementHandle={popoverHandleRef}>
  {/* Content */}
@@ -17779,7 +18306,8 @@ children: React.ReactNode
       placement: "bottom start",
     }}
   />
-);`},{id:"core-overlays-popover--with-boundary-element",name:"With Boundary Element",snippet:"const WithBoundaryElement = (args) => <PopoverBoundaryElementExample popoverProps={args} />;"},{id:"core-overlays-popover--with-no-boundary",name:"With No Boundary",snippet:"const WithNoBoundary = () => <PopoverNoBoundaryExample />;"},{id:"core-overlays-popover--with-dynamic-trigger-width",name:"With Dynamic Trigger Width",snippet:"const WithDynamicTriggerWidth = (args) => <PopoverTriggerWidthExample popoverProps={args} />;"}],implementation:`import { sprinkles, themeVars } from "@baseline-ui/tokens";
+);`},{id:"core-overlays-popover--with-boundary-element",name:"With Boundary Element",snippet:"const WithBoundaryElement = (args) => <PopoverBoundaryElementExample popoverProps={args} />;"},{id:"core-overlays-popover--with-no-boundary",name:"With No Boundary",snippet:"const WithNoBoundary = () => <PopoverNoBoundaryExample />;"},{id:"core-overlays-popover--with-dynamic-trigger-width",name:"With Dynamic Trigger Width",snippet:"const WithDynamicTriggerWidth = (args) => <PopoverTriggerWidthExample popoverProps={args} />;"}],implementation:`import { EllipseIcon } from "@baseline-ui/icons/20";
+import { sprinkles, themeVars } from "@baseline-ui/tokens";
 import { ScrollBox } from "@pw/utils/components";
 import { getOwnerDocument, mergeRefs } from "@react-aria/utils";
 import React, { useEffect, useRef, useState } from "react";
@@ -17787,6 +18315,7 @@ import { useButton, useInteractOutside } from "react-aria";
 import { flushSync } from "react-dom";
 
 import { ActionButton } from "../../ActionButton";
+import { ActionIconButton } from "../../ActionIconButton";
 import { Box } from "../../Box";
 import { Dialog } from "../../Dialog";
 import { ListBoxExample, items } from "../../ListBox/__tests__/testComponents";
@@ -17796,6 +18325,8 @@ import { popoverContentCn } from "../../Select/Select.css";
 import { Switch } from "../../Switch";
 import { Text } from "../../Text";
 import { TextInput } from "../../TextInput";
+import { ToggleButton } from "../../ToggleButton";
+import { ToggleIconButton } from "../../ToggleIconButton";
 import { Popover } from "../Popover";
 import { PopoverContent } from "../PopoverContent";
 import { PopoverTrigger } from "../PopoverTrigger";
@@ -18998,6 +19529,33 @@ export const PopoverLateBodyContainerExample: React.FC<{
  )}
  </Box>
  );
+};
+
+export const PopoverTriggerButtonExample: React.FC<{
+ button:
+ | "ActionButton"
+ | "ActionIconButton"
+ | "ToggleButton"
+ | "ToggleIconButton";
+ type?: PopoverProps["type"];
+ onPress?: () => void;
+ "aria-haspopup"?: "dialog";
+ "aria-controls"?: string;
+}> = ({ button, type = "listbox", ...props }) => {
+ const buttons = {
+ ActionButton: <ActionButton label="Open" {...props} />,
+ ActionIconButton: (
+ <ActionIconButton icon={EllipseIcon} aria-label="Open" {...props} />
+ ),
+ ToggleButton: <ToggleButton label="Open" {...props} />,
+ ToggleIconButton: (
+ <ToggleIconButton icon={EllipseIcon} aria-label="Open" {...props} />
+ ),
+ };
+
+ return (
+ <PopoverExample popoverProps={{ type }}>{buttons[button]}</PopoverExample>
+ );
 };`},similarTo:[],figmaUrl:null},Portal:{id:"core-utilities-portal",breadcrumb:"Core/Utilities/Portal",importStatement:'import { Portal } from "@baseline-ui/core";',description:"`Portal` renders its children into an overlay portal outside the normal React DOM hierarchy. It integrates with `ThemeProvider` so that the portal content inherits the current theme and virtual keyboard handling configuration.",documentation:'`Portal` renders its children into an overlay portal outside the normal React DOM hierarchy. It integrates with `ThemeProvider` so that the portal content inherits the current theme and virtual keyboard handling configuration.\n\n* Renders children into an overlay container managed by React Aria\n* Automatically wraps children in a `ThemeProvider` to propagate the active theme into the portal\n* Respects a custom `portalContainer` provided via prop or the nearest `PortalContainerProvider` in context\n* Supports all standard `StylingProps` (`className`, `style`, `data-block-id`, `data-block-class`)\n\n```jsx\nimport { Portal } from "@baseline-ui/core";\n\nexport default function App() {\n return (\n <Portal>\n <div>I am rendered in a portal</div>\n </Portal>\n );\n}\n```\n\nPass a `portalContainer` element to render the portal inside a specific DOM node instead of the default overlay container. This is useful when rendering inside Shadow DOM or other isolated subtrees.\n\n```jsx\nimport { Portal } from "@baseline-ui/core";\n\nconst shadowRoot = document.querySelector("#shadow-host").shadowRoot;\nconst container = shadowRoot.querySelector(".portal-root");\n\nexport default function App() {\n return (\n <Portal portalContainer={container}>\n <div>Rendered inside shadow DOM</div>\n </Portal>\n );\n}\n```',props:`interface PortalProps {
 /**
  * The container element in which the overlay portal will be placed.
@@ -19057,7 +19615,7 @@ className?: string
  * The style applied to the root element of the component.
  */
 style?: React.CSSProperties
-}`,stories:{usage:[{id:"core-utilities-portal--basic",name:"Basic",snippet:"const Basic = () => <Portal>I am in a portal</Portal>;"}],implementation:""},similarTo:[],figmaUrl:null},Preview:{id:"core-content-preview",breadcrumb:"Core/Content/Preview",importStatement:'import { InkSvg, Preview, VariantViewer } from "@baseline-ui/core";',description:"`Preview` renders a thumbnail of an image, SVG, or text snippet with optional action buttons overlaid on it. Use it to surface a visual sample of an asset that the user can inspect or act on without opening the full item.",documentation:'`Preview` renders a thumbnail of an image, SVG, or text snippet with optional action buttons overlaid on it. Use it to surface a visual sample of an asset that the user can inspect or act on without opening the full item.\n\n* Supports SVG, images and text\n* Supports custom action buttons to interact with the preview\n* Exposed to assistive technologies using ARIA attributes\n* Supports keyboard, mouse and touch interactions\n\n```jsx\nimport { Preview } from "@storybook/addon-docs/blocks";\n\n<Preview imageSrc="/portrait.png" />;\n```\n\n`svgSrc` accepts a React element or an SVG string. A string is sanitized before it is rendered: scripts, event handlers and `javascript:` URLs are removed, along with elements such as `use`, `animate`, `set` and `foreignObject`. Sprite icons that reference a symbol with `<use href="#id">` therefore render blank; pass a React element to render them. A string SVG is rendered after the component mounts, so server-rendered HTML contains an empty preview that fills in on the client.\n\nThe `Preview` component has two variants. The two variants only differ in styling. It can be controlled using the `isInline` prop.\n\nThe `Preview` component can be disabled. When disabled, the preview is not interactive and the action buttons are not rendered.\n\n| Selector | Description |\n| -------------------- | ----------------------------------------------------------------- |\n| \\[data-disabled] | Whether the component is disabled. |\n| \\[data-focused] | Whether the component is focused, either via a mouse or keyboard. |\n| \\[data-hovered] | Whether the component is currently hovered with a mouse. |\n| \\[data-focus-visible] | Whether the component is keyboard focused. |\n\n| Key | Function |\n| ------------ | -------------------------------- |\n| `Tab` | Focus the preview |\n| `ArrowLeft` | Focus the previous action button |\n| `ArrowRight` | Focus the next action button |\n\n```\n```',props:`interface PreviewProps {
+}`,stories:{usage:[{id:"core-utilities-portal--basic",name:"Basic",snippet:"const Basic = () => <Portal>I am in a portal</Portal>;"}],implementation:""},similarTo:[],figmaUrl:null},Preview:{id:"core-content-preview",breadcrumb:"Core/Content/Preview",importStatement:'import { InkSvg, Preview, VariantViewer } from "@baseline-ui/core";',description:"`Preview` renders a thumbnail of an image, SVG, or text snippet with optional action buttons overlaid on it. Use it to surface a visual sample of an asset that the user can inspect or act on without opening the full item.",documentation:'`Preview` renders a thumbnail of an image, SVG, or text snippet with optional action buttons overlaid on it. Use it to surface a visual sample of an asset that the user can inspect or act on without opening the full item.\n\n* Supports SVG, images and text\n* Supports custom action buttons to interact with the preview\n* Exposed to assistive technologies using ARIA attributes\n* Supports keyboard, mouse and touch interactions\n\n```jsx\nimport { Preview } from "@baseline-ui/core";\n\n<Preview imageSrc="/portrait.png" />;\n```\n\n`svgSrc` accepts a React element or an SVG string. A string is sanitized before it is rendered: scripts, event handlers and `javascript:` URLs are removed, along with elements such as `use`, `animate`, `set` and `foreignObject`. Sprite icons that reference a symbol with `<use href="#id">` therefore render blank; pass a React element to render them. A string SVG is rendered after the component mounts, so server-rendered HTML contains an empty preview that fills in on the client.\n\nThe `Preview` component has two variants. The two variants only differ in styling. It can be controlled using the `isInline` prop.\n\nThe `Preview` component can be disabled. When disabled, the preview is not interactive and the action buttons are not rendered.\n\n| Selector | Description |\n| -------------------- | ----------------------------------------------------------------- |\n| \\[data-disabled] | Whether the component is disabled. |\n| \\[data-focused] | Whether the component is focused, either via a mouse or keyboard. |\n| \\[data-hovered] | Whether the component is currently hovered with a mouse. |\n| \\[data-focus-visible] | Whether the component is keyboard focused. |\n\n| Key | Function |\n| ------------ | -------------------------------- |\n| `Tab` | Focus the preview |\n| `ArrowLeft` | Focus the previous action button |\n| `ArrowRight` | Focus the next action button |',props:`interface PreviewProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
  * identifier; new components should exclude it via
@@ -19260,7 +19818,7 @@ accent?: "theme" | "positive"
     deleteAriaLabel="Delete"
     addAriaLabel="Add"
     isDisabled
-    svgSrc={svgComponent} />;`}],implementation:""},similarTo:[],figmaUrl:null},ProgressBar:{id:"core-status-progressbar",breadcrumb:"Core/Status/ProgressBar",importStatement:'import { ProgressBar, VariantViewer } from "@baseline-ui/core";',description:"`ProgressBar` is a horizontal indicator that fills to reflect how much of a determinate task has completed. Use it for operations with measurable progress such as file uploads, downloads, or installations.",documentation:'`ProgressBar` is a horizontal indicator that fills to reflect how much of a determinate task has completed. Use it for operations with measurable progress such as file uploads, downloads, or installations.\n\n* The component is exposed to the assistive technology as a progress bar.\n* It includes labels that improve accessibility and provide a visual indication of the progress.\n* It supports international number formatting of numbers.\n\n```jsx\nimport { ProgressBar } from "../../utils";\n\n<ProgressBar aria-label="Progress" value={50} />;\n```\n\nThe progress bar component has three variants: `active`, `success`, and `error`. The `active` variant is the default.\n\n```jsx\n<ProgressBar label="Label" value={50} />\n<ProgressBar label="Label" value={50} variant="success" />\n<ProgressBar label="Label" value={50} variant="error" />\n```\n\nYou can customize the scale of the progress bar by passing the `minValue` and `maxValue` props.\n\nYou can customize the number formatter by passing the `formatOptions` prop. In the example below, we are formatting the number as currency (USD).\n\nYou can customize the value label by passing the `valueLabel` prop. In the example below, we are using a custom value label that displays the value as "50 out of 100".',props:`interface ProgressBarProps {
+    svgSrc={svgComponent} />;`}],implementation:""},similarTo:[],figmaUrl:null},ProgressBar:{id:"core-status-progressbar",breadcrumb:"Core/Status/ProgressBar",importStatement:'import { ProgressBar, VariantViewer } from "@baseline-ui/core";',description:"`ProgressBar` is a horizontal indicator that fills to reflect how much of a determinate task has completed. Use it for operations with measurable progress such as file uploads, downloads, or installations.",documentation:'`ProgressBar` is a horizontal indicator that fills to reflect how much of a determinate task has completed. Use it for operations with measurable progress such as file uploads, downloads, or installations.\n\n* The component is exposed to the assistive technology as a progress bar.\n* It includes labels that improve accessibility and provide a visual indication of the progress.\n* It supports international number formatting of numbers.\n\n```jsx\nimport { ProgressBar } from "@baseline-ui/core";\n\n<ProgressBar aria-label="Progress" value={50} />;\n```\n\nThe progress bar component has three variants: `active`, `success`, and `error`. The `active` variant is the default.\n\n```jsx\n<ProgressBar label="Label" value={50} />\n<ProgressBar label="Label" value={50} variant="success" />\n<ProgressBar label="Label" value={50} variant="error" />\n```\n\nYou can customize the scale of the progress bar by passing the `minValue` and `maxValue` props.\n\nYou can customize the number formatter by passing the `formatOptions` prop. In the example below, we are formatting the number as currency (USD).\n\nYou can customize the value label by passing the `valueLabel` prop. In the example below, we are using a custom value label that displays the value as "50 out of 100".',props:`interface ProgressBarProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
  * identifier; new components should exclude it via
@@ -19407,7 +19965,7 @@ export const ProgressBarWithExternalHint: React.FC<ProgressBarProps> = (
  <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 {
+};`},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 "@baseline-ui/core";\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 "@baseline-ui/core";\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 "@baseline-ui/core";\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 "@baseline-ui/core";\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
@@ -19777,7 +20335,7 @@ export const RadioGroupWithNextFocusable: React.FC<
 You can use the \`Reaction\` component like this:
 
 \`\`\`jsx
-import { Reaction } from "../../utils";
+import { Reaction } from "@baseline-ui/core";
 
 <Reaction count={10} aria-label="Label" />;
 \`\`\`
@@ -19785,7 +20343,7 @@ import { Reaction } from "../../utils";
 You can set the \`isSelected\` prop to \`true\` to indicate that the reaction is selected.
 
 \`\`\`jsx
-import { Reaction } from "../../utils";
+import { Reaction } from "@baseline-ui/core";
 
 <Reaction count={10} isSelected aria-label="Label" />;
 \`\`\`
@@ -19793,7 +20351,7 @@ import { Reaction } from "../../utils";
 You can set the \`isReadOnly\` prop to \`true\` to indicate that the reaction is read only.
 
 \`\`\`jsx
-import { Reaction } from "../../utils";
+import { Reaction } from "@baseline-ui/core";
 
 <Reaction count={10} isReadOnly aria-label="Label" />;
 <Reaction count={10} isReadOnly isSelected aria-label="Label" />;
@@ -19802,18 +20360,18 @@ import { Reaction } from "../../utils";
 You can set the \`isDisabled\` prop to \`true\` to indicate that the reaction is disabled.
 
 \`\`\`jsx
-import { Reaction } from "../../utils";
+import { Reaction } from "@baseline-ui/core";
 
 <Reaction count={10} isDisabled aria-label="Label" />;
 <Reaction count={10} isDisabled isSelected aria-label="Label" />;
 \`\`\`
 
-You have the option to set the size of the reaction. The default size is \`small\`.
+You have the option to set the size of the reaction. The default size is \`md\`.
 
 \`\`\`jsx
-import { Reaction } from "../../utils";
+import { Reaction } from "@baseline-ui/core";
 
-<Reaction count={10} size="small" aria-label="Label" />;
+<Reaction count={10} size="sm" aria-label="Label" />;
 <Reaction count={10} aria-label="Label" />;
 \`\`\`
 
@@ -19912,7 +20470,8 @@ icon?: React.FC<IconProps>
 * Can be hidden when the user is using a keyboard
 
 \`\`\`jsx
-import { ScrollControlButton } from "../../utils";
+import { useRef } from "react";
+import { ScrollControlButton } from "@baseline-ui/core";
 
 function MyComponent() {
  const ref = useRef(null);
@@ -19941,7 +20500,8 @@ function MyComponent() {
 In certain occasions, it might be useful to use \`flex-direction: column-reverse\` on a container to start with initially scrolled to the bottom. This is how that would look:
 
 \`\`\`jsx
-import { ScrollControlButton } from "../../utils";
+import { useRef } from "react";
+import { ScrollControlButton } from "@baseline-ui/core";
 
 function MyComponent() {
  const ref = useRef(null);
@@ -20201,7 +20761,7 @@ export const ScrollControlButtonReversedExample: React.FC<
  </div>
  </>
  );
-};`},similarTo:[],figmaUrl:null},SearchInput:{id:"core-forms-searchinput",breadcrumb:"Core/Forms/SearchInput",importStatement:'import { SearchInput, VariantViewer } from "@baseline-ui/core";',description:"`SearchInput` is a single-line text field with a search icon and clear button for entering and submitting queries. Use it when users need to filter a list or search for content within a page.",documentation:'`SearchInput` is a single-line text field with a search icon and clear button for entering and submitting queries. Use it when users need to filter a list or search for content within a page.\n\n* Built with a native `<input type="search">` element\n* Visual and ARIA labeling support\n* Custom clear button support with internationalized label for accessibility\n* Support for description and error message help text linked to the input via ARIA\n\n```jsx\nimport { SearchInput } from "../../utils";\n\n<SearchInput aria-label="Label" />;\n```\n\nThe `SearchInput` component has two variants: `primary` and `ghost`.\n\n```jsx\nimport { SearchInput } from "../../utils";\n\n<SearchInput aria-label="Label" placeholder="Search" variant="primary" />\n<SearchInput aria-label="Label" placeholder="Search" variant="ghost" />\n```\n\nThe `SearchInput` component has three sizes: `sm`, `md`, and `lg`. The default size is `md`.\n\n```jsx\nimport { SearchInput } from "../../utils";\n\n<SearchInput aria-label="Label" placeholder="Search" size="sm" />\n<SearchInput aria-label="Label" placeholder="Search" size="md" />\n<SearchInput aria-label="Label" placeholder="Search" size="lg" />\n```\n\nThe `SearchInput` component can be disabled by setting the `isDisabled` prop to `true`.\n\n```jsx\nimport { SearchInput } from "../../utils";\n\n<SearchInput aria-label="Label" placeholder="Search" isDisabled />;\n```\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-focus-visible] | Whether the component is keyboard focused. |\n\n| Key | Function |\n| ------- | ------------------------ |\n| `Enter` | Submits the search query |\n| `Esc` | Clears the search query |',props:`interface SearchInputProps {
+};`},similarTo:[],figmaUrl:null},SearchInput:{id:"core-forms-searchinput",breadcrumb:"Core/Forms/SearchInput",importStatement:'import { SearchInput, VariantViewer } from "@baseline-ui/core";',description:"`SearchInput` is a single-line text field with a search icon and clear button for entering and submitting queries. Use it when users need to filter a list or search for content within a page.",documentation:'`SearchInput` is a single-line text field with a search icon and clear button for entering and submitting queries. Use it when users need to filter a list or search for content within a page.\n\n* Built with a native `<input type="search">` element\n* Visual and ARIA labeling support\n* Custom clear button support with internationalized label for accessibility\n* Support for description and error message help text linked to the input via ARIA\n\n```jsx\nimport { SearchInput } from "@baseline-ui/core";\n\n<SearchInput aria-label="Label" />;\n```\n\nThe `SearchInput` component has two variants: `primary` and `ghost`.\n\n```jsx\nimport { SearchInput } from "@baseline-ui/core";\n\n<SearchInput aria-label="Label" placeholder="Search" variant="primary" />\n<SearchInput aria-label="Label" placeholder="Search" variant="ghost" />\n```\n\nThe `SearchInput` component has three sizes: `sm`, `md`, and `lg`. The default size is `md`.\n\n```jsx\nimport { SearchInput } from "@baseline-ui/core";\n\n<SearchInput aria-label="Label" placeholder="Search" size="sm" />\n<SearchInput aria-label="Label" placeholder="Search" size="md" />\n<SearchInput aria-label="Label" placeholder="Search" size="lg" />\n```\n\nThe `SearchInput` component can be disabled by setting the `isDisabled` prop to `true`.\n\n```jsx\nimport { SearchInput } from "@baseline-ui/core";\n\n<SearchInput aria-label="Label" placeholder="Search" isDisabled />;\n```\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-focus-visible] | Whether the component is keyboard focused. |\n\n| Key | Function |\n| ------- | ------------------------ |\n| `Enter` | Submits the search query |\n| `Esc` | Clears the search query |',props:`interface SearchInputProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
  * identifier; new components should exclude it via
@@ -20289,7 +20849,13 @@ isClearFocusable?: boolean
     placeholder="Search"
     aria-label="Search"
     isClearFocusable
-    defaultValue="Search text" />;`}],implementation:""},similarTo:[],figmaUrl:null},Select:{id:"core-forms-select-multiselect",breadcrumb:"Core/Forms/Select",importStatement:'import { Select } from "@baseline-ui/core";',description:"`Select` is a trigger button that opens a popover listbox for picking one or more values from a predefined set of options. Use it when users need to choose from a fixed list that is too long for radio buttons or checkboxes.",documentation:`\`Select\` is a trigger button that opens a popover listbox for picking one or more values from a predefined set of options. Use it when users need to choose from a fixed list that is too long for radio buttons or checkboxes.
+    defaultValue="Search text" />;`}],implementation:""},similarTo:[],figmaUrl:null},Select:{id:"core-forms-select",breadcrumb:"Core/Forms/Select",importStatement:`import {
+    Select,
+    SelectCustomTriggerExample,
+    SelectWithSectionHeadersExample,
+    SelectWithVirtualizeAutocompleteExample,
+    VirtualSelectWithSectionHeadersExample,
+} from "@baseline-ui/core";`,description:"`Select` is a trigger button that opens a popover listbox for picking one or more values from a predefined set of options. Use it when users need to choose from a fixed list that is too long for radio buttons or checkboxes.",documentation:`\`Select\` is a trigger button that opens a popover listbox for picking one or more values from a predefined set of options. Use it when users need to choose from a fixed list that is too long for radio buttons or checkboxes.
 
 * Exposed to assistive technology as a button with a listbox popup using ARIA (combined with useListBox)
 * Support for selecting a single option or multiple options
@@ -20470,13 +21036,13 @@ The autocomplete feature is particularly useful for large lists of options, and
 <a href="?path=/story/core-forms-select--with-autocomplete">View story</a>
 
 \`\`\`jsx
-import { useListData } from "react-stately";
-import { useFilter } from "react-aria";
 import {
  Autocomplete,
  Virtualizer,
  VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS,
  Select,
+ useFilter,
+ useListData,
 } from "@baseline-ui/core";
 
 function SelectWithAutocomplete() {
@@ -20539,13 +21105,13 @@ function VirtualizedSelect() {
 Virtualization works seamlessly with autocomplete. This combination is recommended for large, searchable lists:
 
 \`\`\`jsx
-import { useListData } from "react-stately";
-import { useFilter } from "react-aria";
 import {
  Virtualizer,
  Autocomplete,
  VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS,
  Select,
+ useFilter,
+ useListData,
 } from "@baseline-ui/core";
 
 function VirtualizedSelectWithAutocomplete() {
@@ -20828,7 +21394,149 @@ selectAllLabel?: string
  * receives \`{ count }\` and its return value is used verbatim.
  */
 moreLabel?: string | ((values: { count: number }) => string)
-}`,stories:{usage:[{id:"core-forms-select-multiselect--basic",name:"Basic",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
+}`,stories:{usage:[{id:"core-forms-select--basic",name:"Basic",snippet:`const Basic = () => <Select
+    aria-label="Choose Stroke Style"
+    items={items}
+    placeholder="Choose an item" />;`},{id:"core-forms-select--with-label",name:"With Label",snippet:`const WithLabel = () => <Select
+    aria-label="Choose Stroke Style"
+    items={items}
+    placeholder="Choose Stroke Style"
+    label="Label" />;`},{id:"core-forms-select--with-description",name:"With Description",snippet:`const WithDescription = () => <Select
+    aria-label="Choose Stroke Style"
+    items={items}
+    placeholder="Choose Stroke Style"
+    label="Label"
+    description="Description" />;`},{id:"core-forms-select--with-error",name:"With Error",snippet:`const WithError = () => <Select
+    aria-label="Choose Stroke Style"
+    items={items}
+    placeholder="Choose Stroke Style"
+    label="Label"
+    validationState="error" />;`},{id:"core-forms-select--with-error-and-error-message",name:"With Error And Error Message",snippet:`const WithErrorAndErrorMessage = () => <Select
+    aria-label="Choose Stroke Style"
+    items={items}
+    placeholder="Choose Stroke Style"
+    label="Label"
+    validationState="error"
+    errorMessage="Error message" />;`},{id:"core-forms-select--with-warning",name:"With Warning",snippet:`const WithWarning = () => <Select
+    aria-label="Choose Stroke Style"
+    items={items}
+    placeholder="Choose Stroke Style"
+    label="Label"
+    validationState="warning" />;`},{id:"core-forms-select--with-warning-and-warning-message",name:"With Warning And Warning Message",snippet:`const WithWarningAndWarningMessage = () => <Select
+    aria-label="Choose Stroke Style"
+    items={items}
+    placeholder="Choose Stroke Style"
+    label="Label"
+    validationState="warning"
+    warningMessage="Warning message" />;`},{id:"core-forms-select--ghost",name:"Ghost",snippet:`const Ghost = () => <Select
+    aria-label="Choose Stroke Style"
+    items={items}
+    placeholder="Choose Stroke Style"
+    label="Label"
+    variant="ghost" />;`},{id:"core-forms-select--read-only",name:"Read Only",snippet:`const ReadOnly = () => <Select
+    aria-label="Choose Stroke Style"
+    items={items}
+    placeholder="Choose Stroke Style"
+    label="Label"
+    isReadOnly
+    value="square" />;`},{id:"core-forms-select--with-disabled",name:"With Disabled",snippet:`const WithDisabled = () => <Select
+    aria-label="Choose Stroke Style"
+    items={items}
+    placeholder="Choose Stroke Style"
+    label="Label"
+    isDisabled
+    description="Description" />;`},{id:"core-forms-select--with-disabled-items",name:"With Disabled Items",snippet:`const WithDisabledItems = () => <Select
+    aria-label="Choose Stroke Style"
+    items={items}
+    placeholder="Choose Stroke Style"
+    label="Label"
+    disabledKeys={["square"]} />;`},{id:"core-forms-select--with-default-selected-item",name:"With Default Selected Item",snippet:`const WithDefaultSelectedItem = () => <Select
+    aria-label="Choose Stroke Style"
+    items={items}
+    placeholder="Choose Stroke Style"
+    label="Label"
+    defaultValue="square" />;`},{id:"core-forms-select--controlled",name:"Controlled",snippet:`const Controlled = () => <Select
+    aria-label="Choose Stroke Style"
+    items={items}
+    placeholder="Choose Stroke Style"
+    label="Label"
+    value="square" />;`},{id:"core-forms-select--with-sections",name:"With Sections",snippet:`const WithSections = () => <Select
+    aria-label="Choose Stroke Style"
+    items={itemsWithSections}
+    placeholder="Choose Stroke Style"
+    label="Label" />;`},{id:"core-forms-select--with-section-headers",name:"With Section Headers",snippet:"const WithSectionHeaders = () => <SelectWithSectionHeadersExample />;"},{id:"core-forms-select--with-virtualized-section-headers",name:"With Virtualized Section Headers",snippet:"const WithVirtualizedSectionHeaders = () => <VirtualSelectWithSectionHeadersExample />;"},{id:"core-forms-select--with-default-open",name:"With Default Open",snippet:`const WithDefaultOpen = () => <Select
+    aria-label="Choose Stroke Style"
+    items={items}
+    placeholder="Choose Stroke Style"
+    label="Label"
+    defaultOpen />;`},{id:"core-forms-select--with-controlled-open",name:"With Controlled Open",snippet:`const WithControlledOpen = () => <Select
+    aria-label="Choose Stroke Style"
+    items={items}
+    placeholder="Choose Stroke Style"
+    label="Label" />;`},{id:"core-forms-select--with-label-at-start",name:"With Label At Start",snippet:`const WithLabelAtStart = () => <Select
+    aria-label="Choose Stroke Style"
+    items={items}
+    placeholder="Choose Stroke Style"
+    label="Label"
+    labelPosition="start"
+    description="Description"
+    placement="bottom end" />;`},{id:"core-forms-select--scrollable",name:"Scrollable",snippet:`const Scrollable = () => {
+    const ref = React.useRef<HTMLDivElement>(null);
+
+    return (
+        <div
+            style={{
+              height: 400,
+              width: 400,
+              overflow: "auto",
+              border: \`1px solid gray\`,
+            }}
+            ref={ref}>
+            <div style={{ height: 800, padding: 100 }}>
+                <Select
+                    aria-label="Choose Stroke Style"
+                    items={items}
+                    placeholder="Choose Stroke Style"
+                    label="Label"
+                    placement="bottom start"
+                    scrollRef={ref} />
+            </div>
+        </div>
+    );
+};`},{id:"core-forms-select--long-list",name:"Long List",snippet:`const LongList = () => <Select
+    aria-label="Choose Stroke Style"
+    items={longListItems}
+    placeholder="Choose Stroke Style"
+    label="Label"
+    defaultOpen />;`},{id:"core-forms-select--with-custom-trigger",name:"With Custom Trigger",snippet:`const WithCustomTrigger = () => <SelectCustomTriggerExample
+    aria-label="Choose Stroke Style"
+    items={items}
+    placeholder="Choose Stroke Style"
+    label="Label" />;`},{id:"core-forms-select--with-autocomplete",name:"With Autocomplete",snippet:`const WithAutocomplete = () => <Select
+    aria-label="Choose Stroke Style"
+    items={items}
+    placeholder="Choose Stroke Style"
+    defaultOpen />;`},{id:"core-forms-select--empty-items",name:"Empty Items",snippet:`const EmptyItems = () => <Select
+    aria-label="Choose Stroke Style"
+    items={[]}
+    placeholder="No items available"
+    label="Label" />;`},{id:"core-forms-select--long-labels",name:"Long Labels",snippet:`const LongLabels = () => <Select
+    aria-label="Choose Stroke Style"
+    items={[
+      {
+        id: "long1",
+        label:
+          "This is a very long label that should demonstrate text overflow behavior in the select trigger",
+      },
+      {
+        id: "long2",
+        label:
+          "Another extremely long option label to test how the dropdown handles items with lots of text",
+      },
+      { id: "short", label: "Short" },
+    ]}
+    placeholder="Choose Stroke Style"
+    label="Label" />;`},{id:"core-forms-select-multiselect--basic",name:"Basic",error:{name:"SyntaxError",message:`Expected story to be a function or variable declaration
   32 | type Story = StoryObj<typeof meta>;
   33 |
 > 34 | export {
@@ -21315,7 +22023,7 @@ export const CountingSelectExample: React.FC = () => {
 };`},similarTo:[],figmaUrl:null},Separator:{id:"core-content-separator",breadcrumb:"Core/Content/Separator",importStatement:'import { Separator } from "@baseline-ui/core";',description:"`Separator` is a thin horizontal or vertical rule that divides adjacent content. Use it to create a visual break between sections, groups of controls, or items in a list.",documentation:`\`Separator\` is a thin horizontal or vertical rule that divides adjacent content. Use it to create a visual break between sections, groups of controls, or items in a list.
 
 \`\`\`jsx
-import { Separator } from "../../utils";
+import { Separator } from "@baseline-ui/core";
 
 <Separator />;
 \`\`\`
@@ -21323,7 +22031,7 @@ import { Separator } from "../../utils";
 By default, the separator is horizontal.
 
 \`\`\`jsx
-import { Separator } from "../../utils";
+import { Separator } from "@baseline-ui/core";
 
 <div>
  Section 1
@@ -21335,7 +22043,7 @@ import { Separator } from "../../utils";
 The \`orientation\` prop can be used to change the orientation of the separator.
 
 \`\`\`jsx
-import { Separator } from "../../utils";
+import { Separator } from "@baseline-ui/core";
 
 <div>
  Section 1
@@ -21603,7 +22311,7 @@ style?: React.CSSProperties
       </Box>
     </Box>
   </Box>
-);`}],implementation:""},similarTo:[],figmaUrl:null},Slider:{id:"core-forms-slider",breadcrumb:"Core/Forms/Slider",importStatement:'import { Slider } from "@baseline-ui/core";',description:"`Slider` is a draggable thumb on a track that lets users pick a numeric value between a minimum and maximum. Use it for continuous or stepped settings such as volume, opacity, or zoom level where approximate selection is acceptable.",documentation:'`Slider` is a draggable thumb on a track that lets users pick a numeric value between a minimum and maximum. Use it for continuous or stepped settings such as volume, opacity, or zoom level where approximate selection is acceptable.\n\n* Supports keyboard, mouse, and touch interactions.\n* Pressing on the track will move the thumb to that position.\n* Supports a number input that allows users to enter a value directly.\n* Supports a read only state.\n* Supports a disabled state.\n* Supports using the arrow keys, as well as page up/down, home, and end keys\n* Supports using the shift key to increment/decrement by ~10% of the range (page step).\n* Support for custom min, max, and step values with handling for rounding errors\n* Prevents text selection while dragging\n* Exposed to assistive technology as a group of slider elements via ARIA\n* Slider thumbs use hidden native input elements to support touch screen readers\n* Support for labeling the slider\n* Internationalized number formatting as a percentage or value\n\nYou can use the Slider component in your code like this:\n\n```jsx\nimport { Slider } from "@baseline-ui/core";\n\n<Slider\n aria-label="Opacity"\n value={50}\n minValue={0}\n maxValue={100}\n onChange={(value) => console.log(value)}\n/>;\n```\n\nYou can set the `step` prop to control the increment/decrement amount when using the keyboard to change the value. The default value is `1`. The below example shows how to set the `step` prop to `10`.\n\nYou can set the `minValue` and `maxValue` props to control the minimum and maximum allowed values. The default values are `0` and `100` respectively. The below example shows how to set `minValue` to `-100` and `maxValue` to `100`.\n\nYou can include a number input by setting the `includeNumberInput` prop to `true`. This will render a number input next to the slider that will allow users to enter a value directly.\n\nThe `Slider` component can be used in a read only state by setting the `isReadOnly` prop to `true`.\n\nIf you include a number input, the read-only state is applied to that input as well.\n\nThe `Slider` component can be used in a disabled state by setting the `isDisabled` prop to `true`.\n\nThe `value` prop can be used to control the value of the `Slider` component from outside of the component.\n\n```jsx\nimport React, { useState } from "react";\nimport { Slider } from "@baseline-ui/core";\n\nfunction App() {\n const [value, setValue] = useState(50);\n\n return (\n <Slider\n aria-label="Opacity"\n value={value}\n minValue={0}\n maxValue={100}\n onChange={(value) => setValue(value)}\n />\n );\n}\n```\n\nYou can also use `onChangeEnd` to only update state when the user finishes interacting (e.g., on mouse-up), which is useful for expensive state updates.\n\nThe Slider component is built with accessibility in mind. It supports keyboard interactions and is fully accessible to screen readers.\nIt follows the [WAI-ARIA Slider Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/).\n\n| Keyboard Shortcuts | Description |\n| --------------------- | ----------------------------------------------- |\n| `Left Arrow` | Decrease value by `step` amount |\n| `Right Arrow` | Increase value by `step` amount |\n| `Up Arrow` | Increase value by `step` amount |\n| `Down Arrow` | Decrease value by `step` amount |\n| `Shift + Left Arrow` | Decrease value by ~10% of the range (page step) |\n| `Shift + Right Arrow` | Increase value by ~10% of the range (page step) |\n| `Shift + Up Arrow` | Increase value by ~10% of the range (page step) |\n| `Shift + Down Arrow` | Decrease value by ~10% of the range (page step) |\n| `Home` | Set value to the minimum allowed value |\n| `End` | Set value to the maximum allowed value |\n\nThe following data attributes are available on the thumb handle element (`.BaselineUI-Slider-ThumbHandle`):\n\n| Selector | Description |\n| ---------------------- | ---------------------------------------- |\n| `[data-disabled]` | Whether the slider is disabled. |\n| `[data-readonly]` | Whether the slider is read-only. |\n| `[data-hovered]` | Whether the thumb is currently hovered. |\n| `[data-focused]` | Whether the thumb is focused. |\n| `[data-focus-visible]` | Whether the thumb has keyboard focus. |\n| `[data-dragging]` | Whether the thumb is currently dragging. |\n\nThe `IconSlider` component displays an icon and a value button. Clicking the button opens a popover containing a `Slider` for adjusting the value.\n\n```jsx\nimport { LineWidthIcon } from "@baseline-ui/icons/24";\nimport { IconSlider } from "@baseline-ui/core";\n\n<IconSlider\n aria-label="Line width"\n value={50}\n minValue={0}\n maxValue={100}\n onChange={(value) => console.log(value)}\n icon={LineWidthIcon}\n/>;\n```\n\nYou can disable the trigger tooltip and icon tooltip by setting `tooltip={false}` and `iconTooltip={false}`.\n\n`IconSlider` passes `includeNumberInput` through to the inner `Slider`, which lets users adjust the value with either the slider thumb or a numeric field inside the popover.',props:`interface SliderProps {
+);`}],implementation:""},similarTo:[],figmaUrl:null},Slider:{id:"core-forms-slider",breadcrumb:"Core/Forms/Slider",importStatement:'import { Slider } from "@baseline-ui/core";',description:"`Slider` is a draggable thumb on a track that lets users pick a numeric value between a minimum and maximum. Use it for continuous or stepped settings such as volume, opacity, or zoom level where approximate selection is acceptable.",documentation:'`Slider` is a draggable thumb on a track that lets users pick a numeric value between a minimum and maximum. Use it for continuous or stepped settings such as volume, opacity, or zoom level where approximate selection is acceptable.\n\n* Supports keyboard, mouse, and touch interactions.\n* Pressing on the track will move the thumb to that position.\n* Supports a number input that allows users to enter a value directly.\n* Supports a read only state.\n* Supports a disabled state.\n* Supports using the arrow keys, as well as page up/down, home, and end keys\n* Supports using the shift key to increment/decrement by ~10% of the range (page step).\n* Support for custom min, max, and step values with handling for rounding errors\n* Prevents text selection while dragging\n* Exposed to assistive technology as a group of slider elements via ARIA\n* Slider thumbs use hidden native input elements to support touch screen readers\n* Support for labeling the slider\n* Internationalized number formatting as a percentage or value\n\nYou can use the Slider component in your code like this:\n\n```jsx\nimport { Slider } from "@baseline-ui/core";\n\n<Slider\n aria-label="Opacity"\n value={50}\n minValue={0}\n maxValue={100}\n onChange={(value) => console.log(value)}\n/>;\n```\n\nYou can set the `step` prop to control the increment/decrement amount when using the keyboard to change the value. The default value is `1`. The below example shows how to set the `step` prop to `10`.\n\nYou can set the `minValue` and `maxValue` props to control the minimum and maximum allowed values. The default values are `0` and `100` respectively. The below example shows how to set `minValue` to `-100` and `maxValue` to `100`.\n\nYou can include a number input by setting the `includeNumberInput` prop to `true`. This will render a number input next to the slider that will allow users to enter a value directly.\n\nUse the `description` prop to show helper text below the slider. It is announced as the slider\'s accessible description.\n\nThe `Slider` component can be used in a read only state by setting the `isReadOnly` prop to `true`.\n\nIf you include a number input, the read-only state is applied to that input as well.\n\nThe `Slider` component can be used in a disabled state by setting the `isDisabled` prop to `true`.\n\nThe `value` prop can be used to control the value of the `Slider` component from outside of the component.\n\n```jsx\nimport React, { useState } from "react";\nimport { Slider } from "@baseline-ui/core";\n\nfunction App() {\n const [value, setValue] = useState(50);\n\n return (\n <Slider\n aria-label="Opacity"\n value={value}\n minValue={0}\n maxValue={100}\n onChange={(value) => setValue(value)}\n />\n );\n}\n```\n\nYou can also use `onChangeEnd` to only update state when the user finishes interacting (e.g., on mouse-up), which is useful for expensive state updates.\n\nThe Slider component is built with accessibility in mind. It supports keyboard interactions and is fully accessible to screen readers.\nIt follows the [WAI-ARIA Slider Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/).\n\n| Keyboard Shortcuts | Description |\n| --------------------- | ----------------------------------------------- |\n| `Left Arrow` | Decrease value by `step` amount |\n| `Right Arrow` | Increase value by `step` amount |\n| `Up Arrow` | Increase value by `step` amount |\n| `Down Arrow` | Decrease value by `step` amount |\n| `Shift + Left Arrow` | Decrease value by ~10% of the range (page step) |\n| `Shift + Right Arrow` | Increase value by ~10% of the range (page step) |\n| `Shift + Up Arrow` | Increase value by ~10% of the range (page step) |\n| `Shift + Down Arrow` | Decrease value by ~10% of the range (page step) |\n| `Home` | Set value to the minimum allowed value |\n| `End` | Set value to the maximum allowed value |\n\nThe following data attributes are available on the thumb handle element (`.BaselineUI-Slider-ThumbHandle`):\n\n| Selector | Description |\n| ---------------------- | ---------------------------------------- |\n| `[data-disabled]` | Whether the slider is disabled. |\n| `[data-readonly]` | Whether the slider is read-only. |\n| `[data-hovered]` | Whether the thumb is currently hovered. |\n| `[data-focused]` | Whether the thumb is focused. |\n| `[data-focus-visible]` | Whether the thumb has keyboard focus. |\n| `[data-dragging]` | Whether the thumb is currently dragging. |\n\nThe `IconSlider` component displays an icon and a value button. Clicking the button opens a popover containing a `Slider` for adjusting the value.\n\n```jsx\nimport { LineWidthIcon } from "@baseline-ui/icons/24";\nimport { IconSlider } from "@baseline-ui/core";\n\n<IconSlider\n aria-label="Line width"\n value={50}\n minValue={0}\n maxValue={100}\n onChange={(value) => console.log(value)}\n icon={LineWidthIcon}\n/>;\n```\n\nYou can disable the trigger tooltip and icon tooltip by setting `tooltip={false}` and `iconTooltip={false}`.\n\n`IconSlider` passes `includeNumberInput` through to the inner `Slider`, which lets users adjust the value with either the slider thumb or a numeric field inside the popover.',props:`interface SliderProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
  * identifier; new components should exclude it via
@@ -21651,6 +22359,10 @@ numberFormatOptions?: Intl.NumberFormatOptions & { numberingSystem?: string }
  * The label for the slider.
  */
 label?: React.ReactNode
+/**
+ * The description of the slider.
+ */
+description?: string
 /**
  * Whether to include a number input for the slider.
  * 
@@ -21683,17 +22395,35 @@ numberInputStyle?: NumberInputProps["style"]
     label="Slider label"
     numberFormatOptions={{
       style: "percent",
-    }} />;`},{id:"core-forms-slider--with-label-and-number-input",name:"With Label And Number Input",snippet:"const WithLabelAndNumberInput = () => <Slider includeNumberInput />;"}],implementation:`import React from "react";
+    }} />;`},{id:"core-forms-slider--with-label-and-number-input",name:"With Label And Number Input",snippet:"const WithLabelAndNumberInput = () => <Slider includeNumberInput />;"},{id:"core-forms-slider--with-description",name:"With Description",snippet:'const WithDescription = () => <Slider label="Opacity" description="Controls how transparent the layer is." />;'}],implementation:`import React from "react";
 
 import { IconSlider } from "../IconSlider";
+import { Slider } from "../Slider";
 
 import type { IconSliderProps } from "../Slider.types";
 
 const TestIcon = () => <div>Icon</div>;
 
 export const IconSliderWithIconExample: React.FC<
- Omit<IconSliderProps, "icon">
-> = (props) => <IconSlider icon={TestIcon} {...props} />;`},similarTo:[],figmaUrl:null},StatusCard:{id:"core-content-statuscard",breadcrumb:"Core/Content/StatusCard",importStatement:`import { Actionable, Box, StatusCard, Text, VariantViewer } from "@baseline-ui/core";
+ Omit<IconSliderProps, "icon"> & {
+ onAncestorKeyDown?: React.KeyboardEventHandler;
+ }
+> = ({ onAncestorKeyDown, ...props }) => (
+ <div onKeyDown={onAncestorKeyDown}>
+ <IconSlider icon={TestIcon} {...props} />
+ </div>
+);
+
+export const SliderWithExternalDescriptionExample: React.FC = () => (
+ <>
+ <p id="external-hint">Applies to the whole layer</p>
+ <Slider
+ label="Opacity"
+ description="Controls transparency"
+ aria-describedby="external-hint"
+ />
+ </>
+);`},similarTo:[],figmaUrl:null},StatusCard:{id:"core-content-statuscard",breadcrumb:"Core/Content/StatusCard",importStatement:`import { Actionable, Box, StatusCard, Text, VariantViewer } from "@baseline-ui/core";
 import { CaretUpIcon } from "@baseline-ui/icons/12";`,description:"`StatusCard` is a compact card that pairs a status icon with a title and description to communicate the state of a process or item. Use it to surface health, progress, or outcome signals such as active, success, warning, error, or denied conditions.",documentation:`\`StatusCard\` is a compact card that pairs a status icon with a title and description to communicate the state of a process or item. Use it to surface health, progress, or outcome signals such as active, success, warning, error, or denied conditions.
 
 * Supports multiple status variants: \`active\`, \`warning\`, \`error\`, \`denied\`, and \`success\`
@@ -22579,7 +23309,7 @@ export function CheckoutWizard({
 * Exposed as a switch to assistive technology via ARIA
 
 \`\`\`jsx
-import { Switch } from "../../utils";
+import { Switch } from "@baseline-ui/core";
 
 <Switch />;
 \`\`\`
@@ -22587,7 +23317,7 @@ import { Switch } from "../../utils";
 The Switch is enabled by default. To disable the Switch, pass the \`isDisabled\` prop.
 
 \`\`\`jsx
-import { Switch } from "../../utils";
+import { Switch } from "@baseline-ui/core";
 
 <Switch />;
 \`\`\`
@@ -22595,7 +23325,7 @@ import { Switch } from "../../utils";
 The Switch is unselected by default and is in uncontrolled mode. You can pass the \`defaultSelected\` prop to set the initial state of the Switch.
 
 \`\`\`jsx
-import { Switch } from "../../utils";
+import { Switch } from "@baseline-ui/core";
 
 <Switch defaultSelected />;
 \`\`\`
@@ -22603,7 +23333,7 @@ import { Switch } from "../../utils";
 If you want to control the state of the Switch, pass the \`isSelected\` prop and handle the \`onChange\` event.
 
 \`\`\`jsx
-import { Switch } from "../../utils";
+import { Switch } from "@baseline-ui/core";
 
 <Switch isSelected />;
 \`\`\`
@@ -22612,7 +23342,7 @@ You can pass the \`isReadOnly\` prop to prevent the user from changing the state
 This is useful when you want screen readers to be able to read the state of the Switch, but you don't want the user to be able to change it.
 
 \`\`\`jsx
-import { Switch } from "../../utils";
+import { Switch } from "@baseline-ui/core";
 
 <Switch isReadOnly />;
 \`\`\`
@@ -22620,7 +23350,7 @@ import { Switch } from "../../utils";
 You can pass the \`isDisabled\` prop to prevent the user from changing the state of the Switch. In this mode the Switch is not focusable, and the user cannot change the state.
 
 \`\`\`jsx
-import { Switch } from "../../utils";
+import { Switch } from "@baseline-ui/core";
 
 <Switch isDisabled />;
 \`\`\`
@@ -22628,7 +23358,7 @@ import { Switch } from "../../utils";
 The \`Switch\` supports \`name\`, \`value\`, and \`onChange\` props to support HTML forms.
 
 \`\`\`jsx
-import { Switch } from "../../utils";
+import { Switch } from "@baseline-ui/core";
 
 <Switch
  name="switch"
@@ -22640,7 +23370,7 @@ import { Switch } from "../../utils";
 You can pass the \`label\` prop to add a label to the Switch. In this case, you don't need to pass the \`aria-label\` or \`aria-labelledby\` props.
 
 \`\`\`jsx
-import { Switch } from "../../utils";
+import { Switch } from "@baseline-ui/core";
 
 <Switch label="Label" />;
 \`\`\`
@@ -22648,7 +23378,7 @@ import { Switch } from "../../utils";
 You can also position the label to the left of the Switch by passing the \`labelPosition\` prop.
 
 \`\`\`jsx
-import { Switch } from "../../utils";
+import { Switch } from "@baseline-ui/core";
 
 <div style={{ width: 200 }}>
  <Switch label="Label" labelPosition="left" />
@@ -22658,7 +23388,7 @@ import { Switch } from "../../utils";
 You can also pass an additional \`statusLabel\` prop to add the meaning of the different states of the Switch. This is useful when the label is not enough to convey the meaning of the Switch.
 
 \`\`\`jsx
-import { Switch, Separator } from "../../utils";
+import { Switch, Separator } from "@baseline-ui/core";
 
 <Switch label="Label" statusLabel={{ on: "On", off: "Off" }} />;
 <Separator style={{ margin: "10px 0" }} />
@@ -22685,10 +23415,7 @@ The status labels can improve the accessibility of the Switch. However, they are
 
 | Key | Function |
 | ------- | ------------------------------- |
-| \`Space\` | Toggle the state of the switch. |
-
-\`\`\`
-\`\`\``,props:`interface SwitchProps {
+| \`Space\` | Toggle the state of the switch. |`,props:`interface SwitchProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
  * identifier; new components should exclude it via
@@ -23653,6 +24380,7 @@ import { useTableDragAndDrop } from "../hooks/useTableDragAndDrop";
 import { Cell, Column, Row, Table, TableBody, TableHeader } from "../Table";
 
 import type { TagVariant } from "../../Tag";
+import type { TableProps } from "../Table.types";
 import type { DroppableCollectionReorderEvent } from "@react-types/shared";
 import type { Selection, SortDescriptor } from "react-aria-components";
 
@@ -23893,15 +24621,17 @@ export const MultipleSelectionTableExample: React.FC<
 
 interface SortableTableExampleProps {
  onSortChange?: (sortDescriptor: SortDescriptor) => void;
+ defaultSortDescriptor?: SortDescriptor;
 }
 
 /** Sortable columns with sort descriptor and client-side sorting. */
 export const SortableTableExample: React.FC<SortableTableExampleProps> = ({
  onSortChange,
+ defaultSortDescriptor,
 }) => {
  const [sortDescriptor, setSortDescriptor] = useState<
  SortDescriptor | undefined
- >();
+ >(defaultSortDescriptor);
  const [sortedRows, setSortedRows] = useState(rows);
 
  const handleSortChange = useCallback(
@@ -23909,7 +24639,7 @@ export const SortableTableExample: React.FC<SortableTableExampleProps> = ({
  setSortDescriptor(descriptor);
  onSortChange?.(descriptor);
 
- const sorted = rows.toSorted((a, b) => {
+ const sorted = [...rows].sort((a, b) => {
  const colKey = String(descriptor.column) as keyof RowItem;
  return descriptor.direction === "ascending"
  ? String(a[colKey]).localeCompare(String(b[colKey]))
@@ -24215,13 +24945,15 @@ export const EmptyTableExample: React.FC = () => {
 
 interface OnRowActionTableExampleProps {
  onRowAction?: (key: React.Key) => void;
+ selectionMode?: TableProps["selectionMode"];
+ selectionBehavior?: TableProps["selectionBehavior"];
 }
 
 /** Table with onRowAction callback. */
 export const OnRowActionTableExample: React.FC<
  OnRowActionTableExampleProps
-> = ({ onRowAction }) => (
- <Table aria-label="Files" onRowAction={onRowAction}>
+> = ({ onRowAction, ...props }) => (
+ <Table aria-label="Files" onRowAction={onRowAction} {...props}>
  <TableHeader>
  <Column id="name" isRowHeader={true}>
  Name
@@ -24708,7 +25440,7 @@ export const TagAndMenuTableExample: React.FC = () => (
 * Supports focus management for tab panels without any focusable children
 
 \`\`\`jsx
-import { Tabs, TabItem } from "../../utils";
+import { Tabs, TabItem } from "@baseline-ui/core";
 
 <Tabs aria-label="Example">
  <TabItem value="tab-1" title="Tab 1">
@@ -24724,7 +25456,7 @@ If you pass an \`onRemove\` prop to the \`Tabs\` component, a close icon will be
 pass an \`onRemove\` prop, the close icon won\u2019t be rendered.
 
 \`\`\`jsx
-import { Tabs, TabItem } from "../../utils";
+import { Tabs, TabItem } from "@baseline-ui/core";
 
 <Tabs aria-label="Danish Composers" onRemove={() => alert("Delete")}>
  <TabItem value="tab-1" title="Maria Ahlefeldt">
@@ -24739,7 +25471,7 @@ A default selected tab can be specified by passing the \`defaultSelectedValue\`
 the first \`TabItem\` will be selected by default.
 
 \`\`\`jsx
-import { Tabs, TabItem } from "../../utils";
+import { Tabs, TabItem } from "@baseline-ui/core";
 
 <Tabs aria-label="Danish Composers" defaultSelectedValue="tab-2">
  <TabItem value="tab-1" title="Maria Ahlefeldt">
@@ -24759,7 +25491,7 @@ import { Tabs, TabItem } from "../../utils";
 A tab can be disabled by passing the \`isDisabled\` prop to the \`Tabs\` component. Disabled tabs cannot be selected.
 
 \`\`\`jsx
-import { Tabs, TabItem } from "../../utils";
+import { Tabs, TabItem } from "@baseline-ui/core";
 
 <Tabs aria-label="Danish Composers" isDisabled>
  <TabItem value="tab-1" title="Maria Ahlefeldt">
@@ -24773,7 +25505,7 @@ import { Tabs, TabItem } from "../../utils";
 Individual tab items can be disabled by passing the \`disabledValues\` prop to the \`Tabs\` component. The value should be an array of \`value\`s of the \`TabItem\`s that should be disabled.
 
 \`\`\`jsx
-import { Tabs, TabItem } from "../../utils";
+import { Tabs, TabItem } from "@baseline-ui/core";
 
 <Tabs aria-label="Danish Composers" disabledValues={new Set(["tab-2"])}>
  <TabItem value="tab-1" title="Maria Ahlefeldt">
@@ -24787,7 +25519,7 @@ import { Tabs, TabItem } from "../../utils";
 The entire tab panel is given a \`tabIndex=0\` when the tab panel doesn\u2019t have any focusable content so that the content can be accessed with the keyboard. The \`tabIndex\` is omitted when the tab panel includes focusable content, like an input element, because the content can be focused independently.
 
 \`\`\`jsx
-import { Tabs, TabItem, Checkbox } from "../../utils";
+import { Tabs, TabItem, Checkbox } from "@baseline-ui/core";
 
 <Tabs aria-label="Danish Composers">
  <TabItem value="tab-1" title="Maria Ahlefeldt">
@@ -24798,11 +25530,11 @@ import { Tabs, TabItem, Checkbox } from "../../utils";
 </Tabs>;
 \`\`\`
 
-A tab can be rendered as an action icon button by using a \`TabActionIconButton\` component in a \`Tabs\` component. Clicking this button will trigger an \`onPress\` event.
+Pass an \`actions\` array to \`Tabs\` to render action icon buttons beside the tab items; each entry takes the \`ActionIconButton\` props except \`variant\` and \`size\`. Pressing a button calls its \`onPress\`.
 
 \`\`\`jsx
-import { Tabs } from "../../utils";
-import { PlusIcon } from "../Icon";
+import { Tabs, TabItem } from "@baseline-ui/core";
+import { PlusIcon } from "@baseline-ui/icons/16";
 
 <Tabs
  aria-label="Danish Composers"
@@ -24810,7 +25542,7 @@ import { PlusIcon } from "../Icon";
  actions={[
  {
  icon: PlusIcon,
- onPress: () => alert("Close"),
+ onPress: () => alert("Add"),
  "aria-label": "Add",
  },
  ]}
@@ -24834,10 +25566,10 @@ import { PlusIcon } from "../Icon";
  * 
  * \`\`\`jsx
  * <Tabs>
- *   <TabItem key="tab1" title="Tab 1">
+ *   <TabItem value="tab1" title="Tab 1">
  *     <div>Tab 1 content</div>
  *   </TabItem>
- *   <TabItem key="tab2" title="Tab 2">
+ *   <TabItem value="tab2" title="Tab 2">
  *     <div>Tab 2 content</div>
  *   </TabItem>
  * </Tabs>;
@@ -25083,6 +25815,13 @@ isSelected?: boolean
  * is rendered.
  */
 onRemove?: () => void
+/**
+ * Overrides the accessible label of the remove button. Ignored inside a
+ * \`TagGroup\`, which labels its own remove buttons.
+ * 
+ * Message id: \`bui.tag.remove\`. Defaults to \`"Remove"\`.
+ */
+removeLabel?: string
 }`,stories:{usage:[{id:"core-content-tag--basic",name:"Basic",snippet:"const Basic = () => <Tag>Tag</Tag>;"},{id:"core-content-tag--with-icon",name:"With Icon",snippet:"const WithIcon = () => <Tag icon={EllipseIcon}>Tag</Tag>;"},{id:"core-content-tag--removable",name:"Removable",snippet:"const Removable = () => <Tag onRemove={fn()}>Tag</Tag>;"},{id:"core-content-tag--selected",name:"Selected",snippet:"const Selected = () => <Tag isSelected>Tag</Tag>;"},{id:"core-content-tag--selected-with-icon",name:"Selected With Icon",snippet:"const SelectedWithIcon = () => <Tag isSelected icon={EllipseIcon}>Tag</Tag>;"},{id:"core-content-tag--disabled",name:"Disabled",snippet:"const Disabled = () => <Tag isDisabled>Tag</Tag>;"},{id:"core-content-tag--disabled-removable",name:"Disabled Removable",snippet:"const DisabledRemovable = () => <Tag isDisabled onRemove={fn()}>Tag</Tag>;"},{id:"core-content-tag--small",name:"Small",snippet:'const Small = () => <Tag size="sm">Tag</Tag>;'},{id:"core-content-tag--small-with-icon",name:"Small With Icon",snippet:'const SmallWithIcon = () => <Tag size="sm" icon={EllipseIcon12}>Tag</Tag>;'},{id:"core-content-tag--long-text",name:"Long Text",snippet:"const LongText = () => <Tag>This is a very long tag label that might overflow or cause layout issues</Tag>;"}],implementation:`import { EllipseIcon } from "@baseline-ui/icons/16";
 import React from "react";
 
@@ -25102,7 +25841,7 @@ export const TagWithIconExample: React.FC<Omit<TagProps, "icon">> = (props) => (
 * Supports keyboard, mouse and touch interactions
 
 \`\`\`jsx
-import { TagGroup } from "../../utils";
+import { TagGroup } from "@baseline-ui/core";
 
 <TagGroup items={[{ id: "tag", label: "Tag" }]} />;
 \`\`\`
@@ -25110,7 +25849,7 @@ import { TagGroup } from "../../utils";
 The \`TagGroup\` component has four variants: \`neutral\`, \`red\`, \`green\`, \`blue\` and \`high-constrast\`. You can set the variant of whole group or individual tags.
 
 \`\`\`jsx
-import { TagGroup } from "../../utils";
+import { TagGroup } from "@baseline-ui/core";
 
 const items = [{ id: "tag", label: "Tag" }];
 
@@ -25124,7 +25863,7 @@ const items = [{ id: "tag", label: "Tag" }];
 You can set the individual variant of each tag by passing the \`variant\` prop to the \`items\` array.
 
 \`\`\`jsx
-import { TagGroup } from "../../utils";
+import { TagGroup } from "@baseline-ui/core";
 
 const items = [
  { id: "tag", label: "Tag" },
@@ -25142,7 +25881,7 @@ The \`TagGroup\` component can be set to allow tags to be removed by passing the
 The \`TagGroup\` component can be set to allow tags to be selected by passing the \`selectionMode\` prop.
 
 \`\`\`jsx
-import { TagGroup } from "../../utils";
+import { TagGroup } from "@baseline-ui/core";
 
 const items = [
  { id: "tag", label: "Tag" },
@@ -25158,7 +25897,7 @@ const items = [
 The \`TagGroup\` component can be set to disabled by passing the \`disabledKeys\` prop. Disabled items are not focusable, selectable, or keyboard navigable.
 
 \`\`\`jsx
-import { TagGroup } from "../../utils";
+import { TagGroup } from "@baseline-ui/core";
 
 const items = [
  { id: "tag", label: "Tag" },
@@ -25396,7 +26135,13 @@ export const TagGroupExample: React.FC<
 import { TaggedPagination } from "@baseline-ui/core";
 
 <TaggedPagination
- valueToLabelMap={{ 1: "One", 2: "Two", 4: "Four" }}
+ valueToLabelMap={
+ new Map([
+ [1, "One"],
+ [2, "Two"],
+ [4, "Four"],
+ ])
+ }
  label="Page"
  decrementAriaLabel="Decrement"
  incrementAriaLabel="Increment"
@@ -25405,7 +26150,7 @@ import { TaggedPagination } from "@baseline-ui/core";
 />;
 \`\`\`
 
-This component is a controlled component and requires the \`value\` prop to be controlled. You can use the \`onChange\` prop to update the current page.
+Pass \`defaultValue\` to set the starting page, or control it with \`value\` and update it from \`onChangeSuccess\`, which receives each committed page number. Without either, the page starts at 1.
 
 | Key | Function |
 | ----------- | ---------------------------------------------------------------- |
@@ -25786,7 +26531,7 @@ export function TextOptOutOfSlotContext() {
  </Text>
  </TextContext.Provider>
  );
-}`},similarTo:[],figmaUrl:null},TextInput:{id:"core-forms-textinput",breadcrumb:"Core/Forms/TextInput",importStatement:'import { TextInput, VariantViewer } from "@baseline-ui/core";',description:"`TextInput` is a field for capturing free-form text \u2014 a single-line `<input>` by default, or a resizable multi-line `<textarea>` when `isMultiLine` is set. Use it for values such as names, emails, or longer notes.",documentation:'`TextInput` is a field for capturing free-form text \u2014 a single-line `<input>` by default, or a resizable multi-line `<textarea>` when `isMultiLine` is set. Use it for values such as names, emails, or longer notes.\n\n* This component is built on top of the `input` element (or `textarea` in multi-line mode).\n* It provides visual and ARIA labels to the input element to make it more accessible.\n* It supports events for change, clipboard, composition, focus, and keyboard.\n* It exposes invalid states to assistive technology via ARIA.\n* It supports description and other state messages which are linked to the input element via ARIA.\n\n```jsx\nimport { TextInput } from "@baseline-ui/core";\n\n<TextInput placeholder="Enter Text" />;\n```\n\nFor numeric entry use `NumberInput`, for search fields use `SearchInput`, and for color values use `ColorInput`.\n\n`TextInput` supports two variants: `primary` (default) and `ghost`. Set the variant with the `variant` prop.\n\n```jsx\n<TextInput placeholder="Placeholder" variant="primary" />\n<TextInput placeholder="Placeholder" variant="ghost" />\n```\n\nYou can add a label to the `TextInput` by passing a `label` prop.\n\n```jsx\n<TextInput label="Label" placeholder="Placeholder" />\n```\n\nBy default, the label is positioned above the `TextInput`. You can change the\nposition of the label by passing a `labelPosition` prop.\n\n```jsx\n<TextInput\n label="Label"\n labelPosition="start"\n description="Description"\n placeholder="Placeholder"\n/>\n```\n\nYou can add a description to the `TextInput` by passing a `description` prop. A\ndescription is used to provide additional information about the `TextInput`.\n\n```jsx\n<TextInput label="Label" description="Description" placeholder="Placeholder" />\n```\n\nYou can put the `TextInput` into an error state by setting `validationState` to\n`"error"`. You can also pass `errorMessage` to provide additional information\nabout the error; passing `errorMessage` on its own is enough to render the error\nstate. When `description` is also present, it takes precedence and the error\nmessage is not shown.\n\n```jsx\n<TextInput\n label="Label"\n validationState="error"\n errorMessage="Error message"\n placeholder="Placeholder"\n/>\n```\n\nYou can put the `TextInput` into a warning state by setting `validationState` to\n`"warning"`. You can also pass `warningMessage` to provide additional\ninformation about the warning.\n\n```jsx\n<TextInput\n label="Label"\n validationState="warning"\n warningMessage="Warning message"\n placeholder="Placeholder"\n/>\n```\n\nYou can make the `TextInput` read only by passing an `isReadOnly` prop.\n\n```jsx\n<TextInput label="Label" isReadOnly defaultValue="Read-only value" />\n```\n\nYou can disable the `TextInput` by passing an `isDisabled` prop.\n\n```jsx\n<TextInput\n label="Label"\n isDisabled\n defaultValue="Disabled value"\n description="Description"\n placeholder="Placeholder"\n/>\n```\n\nYou can control the `TextInput` by passing a `value` prop together with an\n`onChange` prop. `onChange` is called with the new string value (not a DOM\nevent).\n\n```jsx\nconst [value, setValue] = useState("Controlled value");\n\n<TextInput\n label="Label"\n value={value}\n onChange={(value) => setValue(value)}\n placeholder="Placeholder"\n/>;\n```\n\nSet `isMultiLine` to render the field as a resizable `<textarea>` instead of a\nsingle-line `<input>`. The field starts at a minimum height and can be dragged\nto resize in both directions, except when it is read only or disabled. All\nstates (error, warning, disabled, read only, ghost) are supported, just like the\nsingle-line input.\n\n```jsx\n<TextInput\n label="Label"\n isMultiLine\n defaultValue="Lorem ipsum"\n description="Helper text"\n/>\n```\n\nUse the `rows` prop to set the initial number of visible text rows.\n\n```jsx\n<TextInput label="Label" isMultiLine rows={5} placeholder="Placeholder" />\n```\n\nYou can use the `TextInput` in a HTML form by passing a `name` prop. In addition, attributes such as `type`, `pattern`, `inputMode`, and others are passed through to the underlying input element.\n\n```jsx\n<form>\n <TextInput\n name="text-input"\n type="text"\n placeholder="Placeholder"\n description="Description"\n />\n</form>\n```\n\nThese selectors are applied to the underlying `<input>` / `<textarea>` element. The root wrapper is also exposed via the `BaselineUI-TextInput` class and the field element via the `BaselineUI-TextInput-Input` class.\n\n| Selector | Description |\n| ------------------------- | ------------------------------------------------------------------- |\n| `[data-readonly]` | Whether the input is read only. |\n| `[data-disabled]` | Whether the input is disabled. |\n| `[data-validation-state]` | The validation state of the input (`error`, `warning`, or `valid`). |\n| `[data-focused]` | Whether the input is focused, either via a mouse or keyboard. |\n| `[data-focus-visible]` | Whether the input is keyboard focused. |\n\n| Key | Function |\n| ---------------- | ---------------------------------------------------------------------------- |\n| <kbd>Enter</kbd> | Submits the form in single-line mode; inserts a new line in multi-line mode. |',props:`interface TextInputProps {
+}`},similarTo:[],figmaUrl:null},TextInput:{id:"core-forms-textinput",breadcrumb:"Core/Forms/TextInput",importStatement:'import { TextInput, TextInputFocusExample, VariantViewer } from "@baseline-ui/core";',description:"`TextInput` is a field for capturing free-form text \u2014 a single-line `<input>` by default, or a resizable multi-line `<textarea>` when `isMultiLine` is set. Use it for values such as names, emails, or longer notes.",documentation:'`TextInput` is a field for capturing free-form text \u2014 a single-line `<input>` by default, or a resizable multi-line `<textarea>` when `isMultiLine` is set. Use it for values such as names, emails, or longer notes.\n\n* This component is built on top of the `input` element (or `textarea` in multi-line mode).\n* It provides visual and ARIA labels to the input element to make it more accessible.\n* It supports events for change, clipboard, composition, focus, and keyboard.\n* It exposes invalid states to assistive technology via ARIA.\n* It supports description and other state messages which are linked to the input element via ARIA.\n\n```jsx\nimport { TextInput } from "@baseline-ui/core";\n\n<TextInput placeholder="Enter Text" />;\n```\n\nFor numeric entry use `NumberInput`, for search fields use `SearchInput`, and for color values use `ColorInput`.\n\n`TextInput` supports two variants: `primary` (default) and `ghost`. Set the variant with the `variant` prop.\n\n```jsx\n<TextInput placeholder="Placeholder" variant="primary" />\n<TextInput placeholder="Placeholder" variant="ghost" />\n```\n\nYou can add a label to the `TextInput` by passing a `label` prop.\n\n```jsx\n<TextInput label="Label" placeholder="Placeholder" />\n```\n\nBy default, the label is positioned above the `TextInput`. You can change the\nposition of the label by passing a `labelPosition` prop.\n\n```jsx\n<TextInput\n label="Label"\n labelPosition="start"\n description="Description"\n placeholder="Placeholder"\n/>\n```\n\nYou can add a description to the `TextInput` by passing a `description` prop. A\ndescription is used to provide additional information about the `TextInput`.\n\n```jsx\n<TextInput label="Label" description="Description" placeholder="Placeholder" />\n```\n\nYou can put the `TextInput` into an error state by setting `validationState` to\n`"error"`. You can also pass `errorMessage` to provide additional information\nabout the error; passing `errorMessage` on its own is enough to render the error\nstate. When `description` is also present, it takes precedence and the error\nmessage is not shown.\n\n```jsx\n<TextInput\n label="Label"\n validationState="error"\n errorMessage="Error message"\n placeholder="Placeholder"\n/>\n```\n\nYou can put the `TextInput` into a warning state by setting `validationState` to\n`"warning"`. You can also pass `warningMessage` to provide additional\ninformation about the warning.\n\n```jsx\n<TextInput\n label="Label"\n validationState="warning"\n warningMessage="Warning message"\n placeholder="Placeholder"\n/>\n```\n\nYou can make the `TextInput` read only by passing an `isReadOnly` prop.\n\n```jsx\n<TextInput label="Label" isReadOnly defaultValue="Read-only value" />\n```\n\nYou can disable the `TextInput` by passing an `isDisabled` prop.\n\n```jsx\n<TextInput\n label="Label"\n isDisabled\n defaultValue="Disabled value"\n description="Description"\n placeholder="Placeholder"\n/>\n```\n\nYou can control the `TextInput` by passing a `value` prop together with an\n`onChange` prop. `onChange` is called with the new string value (not a DOM\nevent).\n\n```jsx\nconst [value, setValue] = useState("Controlled value");\n\n<TextInput\n label="Label"\n value={value}\n onChange={(value) => setValue(value)}\n placeholder="Placeholder"\n/>;\n```\n\nSet `isMultiLine` to render the field as a resizable `<textarea>` instead of a\nsingle-line `<input>`. The field starts at a minimum height and can be dragged\nto resize in both directions, except when it is read only or disabled. All\nstates (error, warning, disabled, read only, ghost) are supported, just like the\nsingle-line input.\n\n```jsx\n<TextInput\n label="Label"\n isMultiLine\n defaultValue="Lorem ipsum"\n description="Helper text"\n/>\n```\n\nUse the `rows` prop to set the initial number of visible text rows.\n\n```jsx\n<TextInput label="Label" isMultiLine rows={5} placeholder="Placeholder" />\n```\n\n`ref` points at the wrapping `<div>`, not the native field. To call `focus()`,\n`select()` or other methods on the `<input>` (or the `<textarea>` with\n`isMultiLine`), pass an object ref from `useRef` or `createRef` as `inputRef`.\n\n```jsx\nconst inputRef = useRef(null);\n\n<>\n <TextInput label="Name" inputRef={inputRef} />\n <ActionButton\n label="Focus the input"\n onPress={() => inputRef.current?.focus()}\n />\n</>;\n```\n\nYou can use the `TextInput` in a HTML form by passing a `name` prop. In addition, attributes such as `type`, `pattern`, `inputMode`, and others are passed through to the underlying input element.\n\n```jsx\n<form>\n <TextInput\n name="text-input"\n type="text"\n placeholder="Placeholder"\n description="Description"\n />\n</form>\n```\n\nThese selectors are applied to the underlying `<input>` / `<textarea>` element. The root wrapper is also exposed via the `BaselineUI-TextInput` class and the field element via the `BaselineUI-TextInput-Input` class.\n\n| Selector | Description |\n| ------------------------- | ------------------------------------------------------------------- |\n| `[data-readonly]` | Whether the input is read only. |\n| `[data-disabled]` | Whether the input is disabled. |\n| `[data-validation-state]` | The validation state of the input (`error`, `warning`, or `valid`). |\n| `[data-focused]` | Whether the input is focused, either via a mouse or keyboard. |\n| `[data-focus-visible]` | Whether the input is keyboard focused. |\n\n| Key | Function |\n| ---------------- | ---------------------------------------------------------------------------- |\n| <kbd>Enter</kbd> | Submits the form in single-line mode; inserts a new line in multi-line mode. |',props:`interface TextInputProps {
 variant?: any
 labelPosition?: any
 isMultiLine?: any
@@ -26051,7 +26796,7 @@ isMultiLine?: any
     label="Label"
     name="text-input"
     placeholder="Placeholder"
-    description="Description" />;`},{id:"core-forms-textinput--multiline",name:"Multiline",snippet:`const Multiline = () => <TextInput
+    description="Description" />;`},{id:"core-forms-textinput--focusing-the-input",name:"Focusing The Input",snippet:'const FocusingTheInput = () => <TextInputFocusExample placeholder="Placeholder" isMultiLine={false} />;'},{id:"core-forms-textinput--multiline",name:"Multiline",snippet:`const Multiline = () => <TextInput
     label="Label"
     isMultiLine
     defaultValue="Lorem ipsum"
@@ -26380,7 +27125,81 @@ isMultiLine?: any
     }}
     defaultProps={args}
   />
-);`}],implementation:""},similarTo:[],figmaUrl:null},ThemeProvider:{id:"core-utilities-themeprovider",breadcrumb:"Core/Utilities/ThemeProvider",importStatement:'import { ThemeProvider, ThemeProviderExample } from "@baseline-ui/core";',description:"`ThemeProvider` is a context provider that applies a Baseline UI theme \u2014 colors, typography, and spacing \u2014 to its descendants. Use it at the root of your application, or around a subtree, to switch between light, dark, or branded themes.",documentation:'`ThemeProvider` is a context provider that applies a Baseline UI theme \u2014 colors, typography, and spacing \u2014 to its descendants. Use it at the root of your application, or around a subtree, to switch between light, dark, or branded themes.\n\n```tsx\nimport { ThemeProvider, ActionButton } from "../../utils";\nimport { themes } from "@baseline-ui/tokens";\n\n<ThemeProvider theme={themes.base.light}>\n <ActionButton label="Click me" />\n</ThemeProvider>;\n```\n\nThe `theme` prop accepts a `Theme` object. The `Theme` type has the following structure:',props:`interface ThemeProviderProps {
+);`}],implementation:`import React from "react";
+
+import { ActionButton } from "../../ActionButton/ActionButton";
+import { Box } from "../../Box/Box";
+import { TextInput } from "../TextInput";
+
+import type { SingleLineTextInputProps } from "../TextInput.types";
+
+export function TextInputRefsExample({
+ isMultiLine,
+ ...props
+}: Pick<
+ SingleLineTextInputProps,
+ | "isDisabled"
+ | "isReadOnly"
+ | "value"
+ | "defaultValue"
+ | "placeholder"
+ | "description"
+> & {
+ isMultiLine?: boolean;
+}) {
+ const ref = React.useRef<HTMLInputElement>(null);
+ const inputRef = React.useRef<HTMLInputElement>(null);
+ const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+ const [result, setResult] = React.useState("");
+
+ return (
+ <>
+ {isMultiLine ? (
+ <TextInput
+ label="Name"
+ ref={ref}
+ isMultiLine={true}
+ inputRef={textareaRef}
+ {...props}
+ />
+ ) : (
+ <TextInput label="Name" ref={ref} inputRef={inputRef} {...props} />
+ )}
+ <button
+ type="button"
+ onClick={() => {
+ const target = isMultiLine ? textareaRef.current : inputRef.current;
+ target?.focus();
+ const isRoot = ref.current?.classList.contains(
+ "BaselineUI-TextInput",
+ );
+ setResult(
+ \`ref:\${ref.current?.tagName}:\${isRoot ? "root" : "other"} inputRef:\${target?.tagName}\`,
+ );
+ }}
+ >
+ Inspect refs
+ </button>
+ <output>{result}</output>
+ </>
+ );
+}
+
+export function TextInputFocusExample(
+ props: Omit<SingleLineTextInputProps, "inputRef">,
+) {
+ const inputRef = React.useRef<HTMLInputElement>(null);
+
+ return (
+ <Box display="flex" flexDirection="column" gap="md">
+ <TextInput label="Name" inputRef={inputRef} {...props} />
+ <ActionButton
+ label="Focus the input"
+ onPress={() => inputRef.current?.focus()}
+ />
+ </Box>
+ );
+}`},similarTo:[],figmaUrl:null},ThemeProvider:{id:"core-utilities-themeprovider",breadcrumb:"Core/Utilities/ThemeProvider",importStatement:'import { ThemeProvider, ThemeProviderExample } from "@baseline-ui/core";',description:"`ThemeProvider` is a context provider that applies a Baseline UI theme \u2014 colors, typography, and spacing \u2014 to its descendants. Use it at the root of your application, or around a subtree, to switch between light, dark, or branded themes.",documentation:'`ThemeProvider` is a context provider that applies a Baseline UI theme \u2014 colors, typography, and spacing \u2014 to its descendants. Use it at the root of your application, or around a subtree, to switch between light, dark, or branded themes.\n\n```tsx\nimport { ThemeProvider, ActionButton } from "@baseline-ui/core";\nimport { themes } from "@baseline-ui/tokens";\n\n<ThemeProvider theme={themes.base.light}>\n <ActionButton label="Click me" />\n</ThemeProvider>;\n```\n\nThe `theme` prop accepts a `Theme` object. The `Theme` type has the following structure:',props:`interface ThemeProviderProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
  * identifier; new components should exclude it via
@@ -26565,7 +27384,7 @@ export const ThemeChangeTestComponent: React.FC = () => {
 * Time segments are editable using an easy to use numeric keypad, and all interactions are accessible using touch-based screen readers.
 
 \`\`\`jsx
-import { TimeField } from "../../utils";
+import { TimeField } from "@baseline-ui/core";
 
 <TimeField label="Event Time" />;
 \`\`\`
@@ -26955,7 +27774,7 @@ export const TimeFieldExample: React.FC<
 
 \`\`\`tsx
 import { useMemo } from "react";
-import { GlobalToastRegion, ToastQueue, ActionButton } from "../../utils";
+import { GlobalToastRegion, ToastQueue, ActionButton } from "@baseline-ui/core";
 
 function ToastExample() {
  const toastQueue = useMemo(
@@ -27348,7 +28167,7 @@ export const VariantsExample = ({
 * Keyboard event support for \`Space\` and \`Enter\` keys
 
 \`\`\`jsx
-import { ToggleButton } from "../../utils";
+import { ToggleButton } from "@baseline-ui/core";
 
 <ToggleButton label={"Label"} />;
 \`\`\`
@@ -27438,7 +28257,59 @@ elementType?: any
 );`},{id:"core-buttons-togglebutton--default-selected",name:"Default Selected",snippet:'const DefaultSelected = () => <ToggleButton label="Toggle me" defaultSelected />;'},{id:"core-buttons-togglebutton--controlled",name:"Controlled",snippet:'const Controlled = () => <ToggleButton label="Toggle me" isSelected />;'},{id:"core-buttons-togglebutton--with-icon",name:"With Icon",snippet:'const WithIcon = () => <ToggleButton label="Toggle me" iconStart={EllipseIcon} />;'},{id:"core-buttons-togglebutton--disabled",name:"Disabled",snippet:`const Disabled = () => <Box display="flex" flexDirection="column" gap="xl">
     <ToggleButton label="Toggle me" isDisabled />
     <ToggleButton label="Toggle me" isDisabled defaultSelected={true} />
-</Box>;`}],implementation:""},similarTo:[],figmaUrl:null},ToggleIconButton:{id:"core-buttons-toggleiconbutton",breadcrumb:"Core/Buttons/ToggleIconButton",importStatement:'import { ToggleIconButton, VariantViewer } from "@baseline-ui/core";',description:"`ToggleIconButton` is an icon-only button that maintains a selected or unselected state, with optional state-specific icons. Use it for compact on/off controls in toolbars and dense UI where an icon communicates the action more efficiently than a text label.",documentation:'`ToggleIconButton` is an icon-only button that maintains a selected or unselected state, with optional state-specific icons. Use it for compact on/off controls in toolbars and dense UI where an icon communicates the action more efficiently than a text label.\n\n* Native HTML `<button>` support\n* Exposed as a toggle button via ARIA\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\n```jsx\nimport { ToggleIconButton } from "../../utils";\nimport { TrashIcon } from "@baseline-ui/icons/20";\n\n<ToggleIconButton size="md" variant="primary" icon={TrashIcon} />;\n```\n\nYou can control the state of the button by passing the `isSelected` prop.\n\n```jsx\n<ToggleButton label={"Label"} isSelected={true} />\n```\n\nYou can set the default selection state of the button by passing the `defaultSelected` prop.\n\n```jsx\n<ToggleButton label={"Label"} defaultSelected={true} />\n```\n\nYou can disable the button by passing the `isDisabled` prop.\n\n```jsx\n<ToggleButton label={"Label"} isDisabled={true} />\n```\n\nYou can set different icons for the selected and unselected states by passing an object to the `icon` prop with `selected` and `unselected` keys.\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| \\[data-selected] | Whether the button is currently selected. |\n\n| Key | Function |\n| ------- | ----------------- |\n| `Space` | Toggle the button |\n| `Enter` | Toggle the button |',props:`interface ToggleIconButtonProps {
+</Box>;`}],implementation:""},similarTo:[],figmaUrl:null},ToggleIconButton:{id:"core-buttons-toggleiconbutton",breadcrumb:"Core/Buttons/ToggleIconButton",importStatement:'import { ToggleIconButton, VariantViewer } from "@baseline-ui/core";',description:"`ToggleIconButton` is an icon-only button that maintains a selected or unselected state, with optional state-specific icons. Use it for compact on/off controls in toolbars and dense UI where an icon communicates the action more efficiently than a text label.",documentation:`\`ToggleIconButton\` is an icon-only button that maintains a selected or unselected state, with optional state-specific icons. Use it for compact on/off controls in toolbars and dense UI where an icon communicates the action more efficiently than a text label.
+
+* Native HTML \`<button>\` support
+* Exposed as a toggle button via ARIA
+* Mouse and touch event handling, and press state management
+* Keyboard focus management and cross browser normalization
+* Keyboard event support for \`Space\` and \`Enter\` keys
+
+\`\`\`jsx
+import { ToggleIconButton } from "@baseline-ui/core";
+import { TrashIcon } from "@baseline-ui/icons/20";
+
+<ToggleIconButton
+ size="md"
+ variant="primary"
+ icon={TrashIcon}
+ aria-label="Delete"
+/>;
+\`\`\`
+
+You can control the state of the button by passing the \`isSelected\` prop.
+
+\`\`\`jsx
+<ToggleIconButton icon={TrashIcon} aria-label="Delete" isSelected />
+\`\`\`
+
+You can set the default selection state of the button by passing the \`defaultSelected\` prop.
+
+\`\`\`jsx
+<ToggleIconButton icon={TrashIcon} aria-label="Delete" defaultSelected />
+\`\`\`
+
+You can disable the button by passing the \`isDisabled\` prop.
+
+\`\`\`jsx
+<ToggleIconButton icon={TrashIcon} aria-label="Delete" isDisabled />
+\`\`\`
+
+You can set different icons for the selected and unselected states by passing an object to the \`icon\` prop with \`selected\` and \`unselected\` keys.
+
+| Selector | Description |
+| -------------------- | -------------------------------------------------------------- |
+| \\[data-disabled] | Whether the button is disabled. |
+| \\[data-focused] | Whether the button is focused, either via a mouse or keyboard. |
+| \\[data-hovered] | Whether the button is currently hovered with a mouse. |
+| \\[data-focus-visible] | Whether the button is keyboard focused. |
+| \\[data-pressed] | Whether the button is currently pressed. |
+| \\[data-selected] | Whether the button is currently selected. |
+
+| Key | Function |
+| ------- | ----------------- |
+| \`Space\` | Toggle the button |
+| \`Enter\` | Toggle the button |`,props:`interface ToggleIconButtonProps {
 /**
  * The button's class name.
  */
@@ -27753,6 +28624,7 @@ preventFocusOnPress?: boolean
     }} />;`},{id:"core-buttons-toggleiconbutton--with-tooltip",name:"With Tooltip",snippet:'const WithTooltip = () => <ToggleIconButton aria-label="Label" icon={E20} tooltip />;'}],implementation:`import { CheckmarkIcon, EllipseIcon, XIcon } from "@baseline-ui/icons/20";
 import React from "react";
 
+import { Div, NativeButton } from "../../shared/__tests__/elementTypes";
 import { ToggleIconButton } from "../ToggleIconButton";
 
 import type { ToggleIconButtonProps } from "../ToggleIconButton.types";
@@ -27761,6 +28633,23 @@ export const ToggleIconButtonExample: React.FC<
  Omit<ToggleIconButtonProps, "icon">
 > = (props) => <ToggleIconButton icon={EllipseIcon} {...props} />;
 
+export const DivElementTypeExample: React.FC<
+ Omit<ToggleIconButtonProps, "icon">
+> = (props) => <ToggleIconButtonExample elementType={Div} {...props} />;
+
+export const NativeButtonElementTypeExample: React.FC<
+ Omit<ToggleIconButtonProps, "icon">
+> = (props) => (
+ <ToggleIconButtonExample elementType={NativeButton} {...props} />
+);
+
+export const PlainTagElementTypeExample: React.FC<
+ Omit<ToggleIconButtonProps, "icon" | "elementType">
+> = (props) => (
+ // @ts-expect-error -- the type admits only "button" or a component
+ <ToggleIconButtonExample elementType="div" {...props} />
+);
+
 export const StateSpecificIcon: React.FC<
  Omit<ToggleIconButtonProps, "icon">
 > = (props) => (
@@ -27795,7 +28684,8 @@ export const LabelledByTooltip: React.FC = () => (
 * Collapsible toolbar support
 
 \`\`\`jsx
-import { Toolbar, Link, ActionIconButton } from "../../utils";
+import { Toolbar, Link, ActionIconButton } from "@baseline-ui/core";
+import { EllipseIcon } from "@baseline-ui/icons/24";
 
 <Toolbar>
  <ActionIconButton icon={EllipseIcon} aria-label="Button" />
@@ -27819,7 +28709,33 @@ In case of Popover, when the popover trigger has moved to the menu:
 | Left | Focus the previous interactive child |
 | Right | Focus the next interactive child |
 | Tab | Focus the next interactive child outside the toolbar |
-| Tab without \`isSingleTabStop\` | Focus the next interactive child within the toolbar |`,props:`interface ToolbarProps {
+| Tab without \`isSingleTabStop\` | Focus the next interactive child within the toolbar |
+
+A text field in the toolbar keeps the keys it needs for editing:
+
+* Arrow keys move the caret. Left and Right, or Up and Down in a vertical toolbar, move focus to the neighbouring child only when the caret is already at that edge of the field, following the field's own text direction.
+* Arrow keys stay in the field while text is selected, while an input method is composing, and when Shift, Alt, Control or Meta is held.
+* In a vertical toolbar, a field with suggestions (a \`list\` attribute or \`role="combobox"\`) keeps Up and Down, and a number field uses them to step its value.
+* Tab leaves the toolbar from a field, and Shift+Tab back into the toolbar returns to that field. Calling \`preventDefault\` for Tab in the toolbar's \`onKeyDown\` keeps focus in the field.
+
+A \`TextInput\` given its own \`onKeyDown\` stops every key there by default. Tab from that field then moves to the next child inside the toolbar instead of leaving it, and in a vertical toolbar Up and Down stay in the field even at its edges. Call \`e.continuePropagation()\` for the keys the handler does not use:
+
+\`\`\`jsx
+import { TextInput, Toolbar } from "@baseline-ui/core";
+
+<Toolbar>
+ <TextInput
+ aria-label="Search"
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
+ search();
+ } else {
+ e.continuePropagation();
+ }
+ }}
+ />
+</Toolbar>;
+\`\`\``,props:`interface ToolbarProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
  * identifier; new components should exclude it via
@@ -27885,7 +28801,9 @@ collapsibleMenuProps?: Omit<
  */
 renderSpacer?: boolean
 /**
- * The callback to call when any key is pressed.
+ * The callback to call when any key is pressed. It runs before the toolbar
+ * moves focus, so calling \`preventDefault\` for Tab keeps focus in a text
+ * field.
  */
 onKeyDown?: KeyboardProps["onKeyDown"]
 /**
@@ -28131,8 +29049,13 @@ export const CollapsibleChildren: React.FC<{
  );
 };
 
-export const WithInput = () => {
- return (
+export const WithInput = ({
+ withOutsideButtons,
+ ...props
+}: Partial<React.ComponentProps<typeof Toolbar>> & {
+ withOutsideButtons?: boolean;
+}) => {
+ const toolbar = (
  <Toolbar
  className={sprinkles({
  display: "flex",
@@ -28140,6 +29063,7 @@ export const WithInput = () => {
  flexDirection: "row",
  padding: "xs",
  })}
+ {...props}
  >
  <ActionButton label="First" />
  <TextInput defaultValue="Hello" aria-label="TextInput" />
@@ -28158,7 +29082,109 @@ export const WithInput = () => {
  <ActionButton label="Last" />
  </Toolbar>
  );
-};`},similarTo:[],figmaUrl:null},Tooltip:{id:"core-overlays-tooltip",breadcrumb:"Core/Overlays/Tooltip",importStatement:'import { ActionButton, ActionIconButton, Focusable, Text, Tooltip, VariantViewer } from "@baseline-ui/core";',description:"`Tooltip` is a small pop-up that reveals a short, descriptive label for an element when the user hovers or focuses it. Use it to clarify the purpose of icon-only controls or to expose secondary context that doesn't warrant permanent space in the UI.",documentation:`\`Tooltip\` is a small pop-up that reveals a short, descriptive label for an element when the user hovers or focuses it. Use it to clarify the purpose of icon-only controls or to expose secondary context that doesn't warrant permanent space in the UI.
+
+ return withOutsideButtons ? (
+ <>
+ <button>Before</button>
+ {toolbar}
+ <button>After</button>
+ </>
+ ) : (
+ toolbar
+ );
+};
+
+export const WithTextFields = ({
+ textDir,
+ preventToolbarTab,
+ textKeyDown,
+ ...props
+}: Partial<React.ComponentProps<typeof Toolbar>> & {
+ textDir?: "ltr" | "rtl";
+ preventToolbarTab?: boolean;
+ /** Gives the "Text" field its own \`onKeyDown\` that stops or continues propagation. */
+ textKeyDown?: "stop" | "continue";
+}) => (
+ <>
+ <button>Before</button>
+ <Toolbar
+ onKeyDown={
+ preventToolbarTab
+ ? (e) => {
+ if (e.key === "Tab") {
+ e.preventDefault();
+ }
+ }
+ : undefined
+ }
+ {...props}
+ >
+ <ActionButton label="First" />
+ <div dir={textDir}>
+ <TextInput
+ defaultValue="Hello"
+ aria-label="Text"
+ onKeyDown={
+ textKeyDown
+ ? (e) => {
+ if (textKeyDown === "continue") {
+ e.continuePropagation();
+ }
+ }
+ : undefined
+ }
+ />
+ </div>
+ <TextInput isMultiLine={true} aria-label="Notes" />
+ <ActionButton label="Last" />
+ </Toolbar>
+ <button>After</button>
+ </>
+);
+
+export const WithSuggestionFields = (
+ props: Partial<React.ComponentProps<typeof Toolbar>>,
+) => (
+ <Toolbar orientation="vertical" {...props}>
+ <ActionButton label="First" />
+ <input aria-label="Fruit" list="toolbar-fruits" defaultValue="Apple" />
+ <datalist id="toolbar-fruits">
+ <option value="Apple" />
+ <option value="Banana" />
+ </datalist>
+ <input
+ role="combobox"
+ aria-label="Custom"
+ aria-expanded={false}
+ defaultValue="Hi"
+ />
+ <ActionButton label="Last" />
+ </Toolbar>
+);
+
+// A field inside its own shadow root, so key events reach the toolbar retargeted
+// to the host element.
+export const WithShadowField = (
+ props: Partial<React.ComponentProps<typeof Toolbar>>,
+) => (
+ <>
+ <Toolbar {...props}>
+ <ActionButton label="First" />
+ <span
+ ref={(host) => {
+ if (host && !host.shadowRoot) {
+ const input = host.ownerDocument.createElement("input");
+ input.setAttribute("aria-label", "Shadow");
+ input.value = "Hello";
+ host.attachShadow({ mode: "open" }).append(input);
+ }
+ }}
+ />
+ <ActionButton label="Last" />
+ </Toolbar>
+ <button>After</button>
+ </>
+);`},similarTo:[],figmaUrl:null},Tooltip:{id:"core-overlays-tooltip",breadcrumb:"Core/Overlays/Tooltip",importStatement:'import { ActionButton, ActionIconButton, Focusable, Text, Tooltip, VariantViewer } from "@baseline-ui/core";',description:"`Tooltip` is a small pop-up that reveals a short, descriptive label for an element when the user hovers or focuses it. Use it to clarify the purpose of icon-only controls or to expose secondary context that doesn't warrant permanent space in the UI.",documentation:`\`Tooltip\` is a small pop-up that reveals a short, descriptive label for an element when the user hovers or focuses it. Use it to clarify the purpose of icon-only controls or to expose secondary context that doesn't warrant permanent space in the UI.
 
 * Automatic handling of Keyboard focus management and cross browser normalization
 * Automatic Hover management and cross browser normalization
@@ -28248,10 +29274,12 @@ import { Tooltip, ActionButton } from "@baseline-ui/core";
 The \`Focusable\` component can be used to attach the tooltip to arbitrary elements.
 
 \`\`\`jsx
-import { Tooltip, Focusable } from "@baseline-ui/core";
+import { Tooltip, Focusable, Text } from "@baseline-ui/core";
 
 <Tooltip text="Tooltip content">
- <Focusable>Hover over me. This is just a div.</Focusable>
+ <Focusable>
+ <Text>Hover over me. This is just text.</Text>
+ </Focusable>
 </Tooltip>;
 \`\`\`
 
@@ -28461,9 +29489,17 @@ placement?: any
             <Text>Tooltip is: {isOpen ? "open" : "closed"}</Text>
         </div>
     );
-};`}],implementation:`import React, { useState } from "react";
+};`}],implementation:`import React, { useCallback, useRef, useState } from "react";
 
 import { ActionButton } from "../../ActionButton";
+import { Box } from "../../Box";
+import { Dialog } from "../../Dialog";
+import { Modal } from "../../Modal/Modal";
+import { ModalContent } from "../../Modal/ModalContent";
+import { ModalTrigger } from "../../Modal/ModalTrigger";
+import { Popover } from "../../Popover/Popover";
+import { PopoverContent } from "../../Popover/PopoverContent";
+import { PopoverTrigger } from "../../Popover/PopoverTrigger";
 import { Tooltip } from "../Tooltip";
 
 export const CustomElementTooltip = () => (
@@ -28497,6 +29533,113 @@ export const TooltipGetTargetRectExample = () => {
  {called ? <span data-testid="tooltip-target-rect-called" /> : null}
  </>
  );
+};
+
+const tooltipDialog = (
+ <Dialog aria-label="Dialog with tooltip">
+ <Tooltip text="Tooltip content" delay={0}>
+ <ActionButton label="Tooltip trigger" />
+ </Tooltip>
+ </Dialog>
+);
+
+export const TooltipInModalExample = ({
+ enableInert,
+}: {
+ enableInert?: boolean;
+}) => (
+ <Modal>
+ <ModalTrigger>
+ <ActionButton label="Open" />
+ </ModalTrigger>
+ <ModalContent UNSAFE_enableInert={enableInert}>
+ {tooltipDialog}
+ </ModalContent>
+ </Modal>
+);
+
+export const TooltipInModalPopoverExample = () => (
+ <Popover type="dialog">
+ <PopoverTrigger>
+ <ActionButton label="Open" />
+ </PopoverTrigger>
+ <PopoverContent>{tooltipDialog}</PopoverContent>
+ </Popover>
+);
+
+export const TooltipBehindModalExample = ({
+ enableInert,
+}: {
+ enableInert?: boolean;
+}) => {
+ const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+
+ return (
+ <>
+ <Tooltip text="Background tooltip" isOpen={isTooltipOpen}>
+ <ActionButton label="Background trigger" />
+ </Tooltip>
+ <Modal>
+ <ModalTrigger>
+ <ActionButton label="Open" />
+ </ModalTrigger>
+ <ModalContent UNSAFE_enableInert={enableInert}>
+ <Dialog aria-label="Dialog">
+ <ActionButton
+ label="Show background tooltip"
+ onPress={() => {
+ setIsTooltipOpen(true);
+ }}
+ />
+ </Dialog>
+ </ModalContent>
+ </Modal>
+ </>
+ );
+};
+
+/** Reports the inline transform the tooltip mounts with, on every open. */
+export const TooltipReopenExample = ({
+ placement,
+ onMountTransform,
+}: {
+ placement: "top" | "left";
+ onMountTransform?: (transform: string) => void;
+}) => {
+ const [isOpen, setIsOpen] = useState(true);
+ const onMountTransformRef = useRef(onMountTransform);
+ onMountTransformRef.current = onMountTransform;
+ const recordMount = useCallback((element: HTMLDivElement | null) => {
+ if (element) {
+ onMountTransformRef.current?.(element.style.transform);
+ }
+ }, []);
+
+ return (
+ <Box
+ padding="9xl"
+ display="flex"
+ flexDirection="column"
+ alignItems="flex-end"
+ gap="4xl"
+ >
+ <Tooltip
+ text="Tip"
+ placement={placement}
+ shouldFlip={false}
+ isOpen={isOpen}
+ ref={recordMount}
+ >
+ <ActionButton label="Trigger" />
+ </Tooltip>
+ <ActionButton
+ label="Toggle tooltip"
+ onPress={() => {
+ setIsOpen((open) => !open);
+ }}
+ />
+ </Box>
+ );
 };`},similarTo:[],figmaUrl:null},TreeView:{id:"core-collections-treeview",breadcrumb:"Core/Collections/TreeView",importStatement:`import {
     ActionIconButton,
     Box,
@@ -28510,7 +29653,7 @@ export const TooltipGetTargetRectExample = () => {
     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.\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 {
+} 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`, `isFocusVisibleWithin`, `isHovered`, `isPressed`, `isDropTarget`, `isDragging`, 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. `isFocusVisibleWithin` is also true while a control inside the row has keyboard focus, so use it to keep the row highlighted while the user works inside it. `isPressed` is true while the row is held down with a pointer, <kbd>Enter</kbd>, or <kbd>Space</kbd>, but not while a Baseline button inside the row is pressed. 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
@@ -28988,6 +30131,8 @@ function CustomRow({
  {state.isExpanded ? <span>expanded</span> : null}
  {state.isSelected ? <span>selected</span> : null}
  {state.isFocusVisible ? <span>focus visible</span> : null}
+ {state.isFocusVisibleWithin ? <span>focus within</span> : null}
+ {state.isPressed ? <span>pressed</span> : null}
  {state.isDropTarget ? <span>drop target</span> : null}
  {state.isDragging ? <span>dragging</span> : null}
  </div>
@@ -29541,14 +30686,13 @@ const optionStyle = useCallback(
 />
 \`\`\`
 
-Pass a \`dragAndDropHooks\` object (created with React Aria's \`useDragAndDrop\`) to enable drag-and-drop reordering.
+Pass a \`dragAndDropHooks\` object (created with \`useDragAndDrop\`) to enable drag-and-drop reordering.
 
 \`\`\`jsx
-import { useDragAndDrop } from "react-aria-components";
+import { UNSAFE_ListBox, useDragAndDrop } from "@baseline-ui/core";
 
 function DraggableList() {
  const { dragAndDropHooks } = useDragAndDrop({
- getItems: (keys) => [...keys].map((key) => ({ "text/plain": String(key) })),
  onReorder(e) {
  // handle reorder
  },
@@ -30895,10 +32039,11 @@ title: string
  * @example
  *   \`\`\`jsx
  *   <AccordionItem
+ *    value="item-1"
  *    title="Accordion Item"
  *    actions={[{
  *      icon: EditIcon,
- *      label: "Edit",
+ *      "aria-label": "Edit",
  *      onPress: () => alert("Edit"),
  *    }]}>Content</AccordionItem>
  *    \`\`\`;
@@ -30963,6 +32108,9 @@ index?: number
 import { themeVars } from "@baseline-ui/tokens";
 import React from "react";
 
+import { Dialog } from "../../Dialog";
+import { Modal, ModalContent } from "../../Modal";
+import { TextInput } from "../../TextInput";
 import { Accordion } from "../Accordion";
 import { AccordionItem } from "../AccordionItem";
 
@@ -31010,16 +32158,23 @@ export const AccordionItemExample: React.FC<
  includeDescription?: boolean;
  showActionsOnTriggerOnly?: boolean;
  children?: React.ReactNode;
+ itemNumbers?: number[];
+ includeFalseChild?: boolean;
  }
-> = ({ includeActions, includeDescription, children, ...props }) => {
- return (
- <Accordion {...props}>
- {Array.from({ length: 3 }).map((_, i) => (
+> = ({
+ includeActions,
+ includeDescription,
+ children,
+ itemNumbers = [1, 2, 3],
+ includeFalseChild,
+ ...props
+}) => {
+ const items = itemNumbers.map((n) => (
  <AccordionItem
- key={i}
- title={\`Accordion Item \${i + 1}\`}
+ key={n}
+ title={\`Accordion Item \${n}\`}
  subLabel={includeDescription ? "Value" : undefined}
- value={\`item-\${i + 1}\`}
+ value={\`item-\${n}\`}
  style={contentStyle}
  actions={
  includeActions
@@ -31037,10 +32192,13 @@ export const AccordionItemExample: React.FC<
  }
  showActionsOnTriggerOnly={props.showActionsOnTriggerOnly}
  >
- {children ||
- \`lorem ipsum dolor sit amet consectetur adipisicing elit\`}
+ {children || \`lorem ipsum dolor sit amet consectetur adipisicing elit\`}
  </AccordionItem>
- ))}
+ ));
+
+ return (
+ <Accordion {...props}>
+ {includeFalseChild ? [items[0], false, ...items.slice(1), null] : items}
  </Accordion>
  );
 };
@@ -31117,7 +32275,32 @@ export const ControlledAccordionExample: React.FC<{
  }}
  />
  );
-};`},similarTo:[],figmaUrl:null},IconColorInput:{id:"core-forms-colorinput-iconcolorinput",importStatement:'import { Box, IconColorInput } from "@baseline-ui/core";',description:"",documentation:null,props:`interface IconColorInputProps {
+};
+
+export const AccordionInModalExample: React.FC<{
+ onKeyDown?: React.KeyboardEventHandler;
+}> = ({ onKeyDown }) => (
+ <Modal defaultOpen={true}>
+ <ModalContent>
+ <Dialog aria-label="Accordion dialog">
+ <div onKeyDown={onKeyDown}>
+ <Accordion defaultExpandedKeys={new Set(["item-1"])}>
+ {Array.from({ length: 2 }).map((_, i) => (
+ <AccordionItem
+ key={i}
+ title={\`Accordion Item \${i + 1}\`}
+ value={\`item-\${i + 1}\`}
+ actions={[{ "aria-label": "Edit", icon: EllipseIcon }]}
+ >
+ {i === 0 ? <TextInput aria-label="Name" /> : "Second panel"}
+ </AccordionItem>
+ ))}
+ </Accordion>
+ </div>
+ </Dialog>
+ </ModalContent>
+ </Modal>
+);`},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
  * identifier; new components should exclude it via
@@ -31202,8 +32385,10 @@ import React, { useState } from "react";
 import { ActionButton } from "../../ActionButton";
 import { ActionIconButton } from "../../ActionIconButton";
 import { Box } from "../../Box";
+import { Div, NativeButton } from "../../shared/__tests__/elementTypes";
 import { Text } from "../../Text";
 import { ColorInput } from "../ColorInput";
+import { IconColorInputButton } from "../ColorInputButton";
 import { IconColorInput } from "../IconColorInput";
 import { presets } from "./data";
 
@@ -31324,7 +32509,25 @@ export const StoredCustomColorsExample: React.FC<{ storageKey: string }> = ({
 
 export const IconColorInputExample: React.FC<
  Omit<IconColorInputProps, "icon">
-> = (props) => <IconColorInput icon={BorderColorIcon} {...props} />;`},similarTo:[],figmaUrl:null},Icon:{id:"core-miscellaneous-icon",importStatement:'import { Icon } from "@baseline-ui/core";',description:"",documentation:null,props:`interface IconProps {
+> = (props) => <IconColorInput icon={BorderColorIcon} {...props} />;
+
+type IconColorInputButtonProps = React.ComponentProps<
+ typeof IconColorInputButton
+>;
+
+export const IconColorInputButtonExample: React.FC<
+ Omit<IconColorInputButtonProps, "icon">
+> = (props) => <IconColorInputButton icon={BorderColorIcon} {...props} />;
+
+export const DivIconColorInputButtonExample: React.FC<
+ Omit<IconColorInputButtonProps, "icon">
+> = (props) => <IconColorInputButtonExample elementType={Div} {...props} />;
+
+export const NativeButtonIconColorInputButtonExample: React.FC<
+ Omit<IconColorInputButtonProps, "icon">
+> = (props) => (
+ <IconColorInputButtonExample elementType={NativeButton} {...props} />
+);`},similarTo:[],figmaUrl:null},Icon:{id:"core-miscellaneous-icon",importStatement:'import { Icon } from "@baseline-ui/core";',description:"",documentation:null,props:`interface IconProps {
 /**
  * The \`className\` property assigned to the SVG element of the component.
  */
@@ -32044,10 +33247,6 @@ elementHandle?: React.RefObject<{
  * @param options - The options for the move event.
  * @param options.coordinates - The coordinates of the cursor.
  * @param options.boundingRect - The bounding rectangle of the element.
- * @param options.activePoint - The active point of the element. This point is
- *   the point which is snapped to the snap points if any or the coordinates
- *   of the cursor if no snap points are provided or the cursor is not near a
- *   snap point.
  */
 onMove?: (options: Options) => void
 /**
@@ -32140,8 +33339,10 @@ import { resolvePublicUrl } from "../../../utils/resolvePublicUrl";
 import { ActionButton } from "../../ActionButton";
 import { Box } from "../../Box";
 import { Checkbox } from "../../Checkbox";
+import { Dialog } from "../../Dialog";
 import { Link } from "../../Link";
 import { Markdown } from "../../Markdown";
+import { Modal, ModalContent } from "../../Modal";
 import { NumberInput } from "../../NumberInput";
 import { PointPicker, PointPickerContent } from "../../PointPicker";
 import { Select } from "../../Select";
@@ -32510,8 +33711,11 @@ export const DynamicDescriptionExample = ({ scale }: { scale?: number }) => (
 
 export const PointsProximityExample = ({
  type = "nearest",
+ points,
 }: {
  type?: "nearest" | "within";
+ /** Fixed snap points, in place of random ones. */
+ points?: { x: number; y: number }[];
 }) => {
  const [snapPoints, setSnapPoints] = useState<number>(10_000);
  const [snapRadius, setSnapRadius] = useState<number>(20);
@@ -32524,6 +33728,8 @@ export const PointsProximityExample = ({
  const ref = useRef<HTMLDivElement>(null);
 
  const _snapPoints = useMemo(() => {
+ if (points) return points;
+
  const contentBounds = content?.getBoundingClientRect();
 
  if (!contentBounds) return [];
@@ -32532,7 +33738,7 @@ export const PointsProximityExample = ({
  x: Math.random() * contentBounds.width,
  y: Math.random() * contentBounds.height,
  }));
- }, [snapPoints, content]);
+ }, [snapPoints, content, points]);
 
  return (
  <Box display="flex" flexDirection="column" gap="xl" ref={ref}>
@@ -32700,6 +33906,31 @@ export const RenderCursorExample: React.FC<{
  <div style={{ width: 200, height: 200 }}>Test content</div>
  </PointPickerContent>
  </PointPicker>
+);
+
+export const PointPickerInModalExample: React.FC<{
+ preventEscape?: boolean;
+}> = ({ preventEscape }) => (
+ <Modal defaultOpen={true}>
+ <ModalContent>
+ <Dialog aria-label="Point picker dialog">
+ <PointPicker>
+ <PointPickerDisplay />
+ <PointPickerContent
+ onKeyDown={
+ preventEscape
+ ? (e) => {
+ if (e.key === "Escape") e.preventDefault();
+ }
+ : undefined
+ }
+ >
+ <RichContentBlock />
+ </PointPickerContent>
+ </PointPicker>
+ </Dialog>
+ </ModalContent>
+ </Modal>
 );`},similarTo:[],figmaUrl:null},PointPickerDisplay:{id:"core-content-pointpicker-pointpickerdisplay",importStatement:'import { Box, PointPickerDisplay, RichContentExample } from "@baseline-ui/core";',description:"",documentation:null,props:`interface PointPickerDisplayProps {
 /**
  * @deprecated Do not use in new components. This is a legacy block
@@ -32740,10 +33971,6 @@ style?: React.CSSProperties
  * @param options - The options for the description.
  * @param options.coordinates - The coordinates of the cursor.
  * @param options.boundingRect - The bounding rectangle of the element.
- * @param options.activePoint - The active point of the element. This point is
- *   the point which is snapped to the snap points if any or the coordinates
- *   of the cursor if no snap points are provided or the cursor is not near a
- *   snap point.
  */
 description?: Description[] | ((options: Options) => Description[])
 /**
@@ -32803,8 +34030,10 @@ import { resolvePublicUrl } from "../../../utils/resolvePublicUrl";
 import { ActionButton } from "../../ActionButton";
 import { Box } from "../../Box";
 import { Checkbox } from "../../Checkbox";
+import { Dialog } from "../../Dialog";
 import { Link } from "../../Link";
 import { Markdown } from "../../Markdown";
+import { Modal, ModalContent } from "../../Modal";
 import { NumberInput } from "../../NumberInput";
 import { PointPicker, PointPickerContent } from "../../PointPicker";
 import { Select } from "../../Select";
@@ -33173,8 +34402,11 @@ export const DynamicDescriptionExample = ({ scale }: { scale?: number }) => (
 
 export const PointsProximityExample = ({
  type = "nearest",
+ points,
 }: {
  type?: "nearest" | "within";
+ /** Fixed snap points, in place of random ones. */
+ points?: { x: number; y: number }[];
 }) => {
  const [snapPoints, setSnapPoints] = useState<number>(10_000);
  const [snapRadius, setSnapRadius] = useState<number>(20);
@@ -33187,6 +34419,8 @@ export const PointsProximityExample = ({
  const ref = useRef<HTMLDivElement>(null);
 
  const _snapPoints = useMemo(() => {
+ if (points) return points;
+
  const contentBounds = content?.getBoundingClientRect();
 
  if (!contentBounds) return [];
@@ -33195,7 +34429,7 @@ export const PointsProximityExample = ({
  x: Math.random() * contentBounds.width,
  y: Math.random() * contentBounds.height,
  }));
- }, [snapPoints, content]);
+ }, [snapPoints, content, points]);
 
  return (
  <Box display="flex" flexDirection="column" gap="xl" ref={ref}>
@@ -33363,6 +34597,31 @@ export const RenderCursorExample: React.FC<{
  <div style={{ width: 200, height: 200 }}>Test content</div>
  </PointPickerContent>
  </PointPicker>
+);
+
+export const PointPickerInModalExample: React.FC<{
+ preventEscape?: boolean;
+}> = ({ preventEscape }) => (
+ <Modal defaultOpen={true}>
+ <ModalContent>
+ <Dialog aria-label="Point picker dialog">
+ <PointPicker>
+ <PointPickerDisplay />
+ <PointPickerContent
+ onKeyDown={
+ preventEscape
+ ? (e) => {
+ if (e.key === "Escape") e.preventDefault();
+ }
+ : undefined
+ }
+ >
+ <RichContentBlock />
+ </PointPickerContent>
+ </PointPicker>
+ </Dialog>
+ </ModalContent>
+ </Modal>
 );`},similarTo:[],figmaUrl:null},PopoverContent:{id:"core-overlays-popover-popovercontent",importStatement:`import {
     PopoverBoundaryAxisDemo,
     PopoverContainedFocusExample,
@@ -33542,7 +34801,8 @@ horizontalBoundaryBehavior?: "shift" | "anchor"
     defaultHorizontalBoundaryBehavior="anchor"
     placement="bottom left"
     boundaryWidth={360}
-    boundaryHeight={300} />;`}],implementation:`import { sprinkles, themeVars } from "@baseline-ui/tokens";
+    boundaryHeight={300} />;`}],implementation:`import { EllipseIcon } from "@baseline-ui/icons/20";
+import { sprinkles, themeVars } from "@baseline-ui/tokens";
 import { ScrollBox } from "@pw/utils/components";
 import { getOwnerDocument, mergeRefs } from "@react-aria/utils";
 import React, { useEffect, useRef, useState } from "react";
@@ -33550,6 +34810,7 @@ import { useButton, useInteractOutside } from "react-aria";
 import { flushSync } from "react-dom";
 
 import { ActionButton } from "../../ActionButton";
+import { ActionIconButton } from "../../ActionIconButton";
 import { Box } from "../../Box";
 import { Dialog } from "../../Dialog";
 import { ListBoxExample, items } from "../../ListBox/__tests__/testComponents";
@@ -33559,6 +34820,8 @@ import { popoverContentCn } from "../../Select/Select.css";
 import { Switch } from "../../Switch";
 import { Text } from "../../Text";
 import { TextInput } from "../../TextInput";
+import { ToggleButton } from "../../ToggleButton";
+import { ToggleIconButton } from "../../ToggleIconButton";
 import { Popover } from "../Popover";
 import { PopoverContent } from "../PopoverContent";
 import { PopoverTrigger } from "../PopoverTrigger";
@@ -34761,6 +36024,33 @@ export const PopoverLateBodyContainerExample: React.FC<{
  )}
  </Box>
  );
+};
+
+export const PopoverTriggerButtonExample: React.FC<{
+ button:
+ | "ActionButton"
+ | "ActionIconButton"
+ | "ToggleButton"
+ | "ToggleIconButton";
+ type?: PopoverProps["type"];
+ onPress?: () => void;
+ "aria-haspopup"?: "dialog";
+ "aria-controls"?: string;
+}> = ({ button, type = "listbox", ...props }) => {
+ const buttons = {
+ ActionButton: <ActionButton label="Open" {...props} />,
+ ActionIconButton: (
+ <ActionIconButton icon={EllipseIcon} aria-label="Open" {...props} />
+ ),
+ ToggleButton: <ToggleButton label="Open" {...props} />,
+ ToggleIconButton: (
+ <ToggleIconButton icon={EllipseIcon} aria-label="Open" {...props} />
+ ),
+ };
+
+ return (
+ <PopoverExample popoverProps={{ type }}>{buttons[button]}</PopoverExample>
+ );
 };`},similarTo:[],figmaUrl:null},PopoverTrigger:{id:"core-overlays-popover-popovertrigger",importStatement:`import {
     ActionButton,
     PopoverFunctionChildrenExample,
@@ -34790,7 +36080,8 @@ anchorRect?: Rect
   <PopoverTriggerExample>{children}</PopoverTriggerExample>
 );`},{id:"core-overlays-popover-popovertrigger--with-updated-position",name:"With Updated Position",snippet:`const WithUpdatedPosition = ({ anchorRect }) => (
   <PopoverWithCustomPositionExample anchorRect={anchorRect} />
-);`},{id:"core-overlays-popover-popovertrigger--function-children",name:"Function Children",snippet:"const FunctionChildren = () => <PopoverFunctionChildrenExample />;"}],implementation:`import { sprinkles, themeVars } from "@baseline-ui/tokens";
+);`},{id:"core-overlays-popover-popovertrigger--function-children",name:"Function Children",snippet:"const FunctionChildren = () => <PopoverFunctionChildrenExample />;"}],implementation:`import { EllipseIcon } from "@baseline-ui/icons/20";
+import { sprinkles, themeVars } from "@baseline-ui/tokens";
 import { ScrollBox } from "@pw/utils/components";
 import { getOwnerDocument, mergeRefs } from "@react-aria/utils";
 import React, { useEffect, useRef, useState } from "react";
@@ -34798,6 +36089,7 @@ import { useButton, useInteractOutside } from "react-aria";
 import { flushSync } from "react-dom";
 
 import { ActionButton } from "../../ActionButton";
+import { ActionIconButton } from "../../ActionIconButton";
 import { Box } from "../../Box";
 import { Dialog } from "../../Dialog";
 import { ListBoxExample, items } from "../../ListBox/__tests__/testComponents";
@@ -34807,6 +36099,8 @@ import { popoverContentCn } from "../../Select/Select.css";
 import { Switch } from "../../Switch";
 import { Text } from "../../Text";
 import { TextInput } from "../../TextInput";
+import { ToggleButton } from "../../ToggleButton";
+import { ToggleIconButton } from "../../ToggleIconButton";
 import { Popover } from "../Popover";
 import { PopoverContent } from "../PopoverContent";
 import { PopoverTrigger } from "../PopoverTrigger";
@@ -36009,6 +37303,33 @@ export const PopoverLateBodyContainerExample: React.FC<{
  )}
  </Box>
  );
+};
+
+export const PopoverTriggerButtonExample: React.FC<{
+ button:
+ | "ActionButton"
+ | "ActionIconButton"
+ | "ToggleButton"
+ | "ToggleIconButton";
+ type?: PopoverProps["type"];
+ onPress?: () => void;
+ "aria-haspopup"?: "dialog";
+ "aria-controls"?: string;
+}> = ({ button, type = "listbox", ...props }) => {
+ const buttons = {
+ ActionButton: <ActionButton label="Open" {...props} />,
+ ActionIconButton: (
+ <ActionIconButton icon={EllipseIcon} aria-label="Open" {...props} />
+ ),
+ ToggleButton: <ToggleButton label="Open" {...props} />,
+ ToggleIconButton: (
+ <ToggleIconButton icon={EllipseIcon} aria-label="Open" {...props} />
+ ),
+ };
+
+ return (
+ <PopoverExample popoverProps={{ type }}>{buttons[button]}</PopoverExample>
+ );
 };`},similarTo:[],figmaUrl:null},IconSelect:{id:"core-forms-select-iconselect",importStatement:'import { IconSelect } from "@baseline-ui/core";',description:"",documentation:null,props:`interface IconSelectProps {
 /**
  * The icon to show at the start of the color input.
@@ -36435,14 +37756,32 @@ popoverContentProps?: Omit<PopoverContentProps, "children">
     isDisabled />;`}],implementation:`import React from "react";
 
 import { IconSlider } from "../IconSlider";
+import { Slider } from "../Slider";
 
 import type { IconSliderProps } from "../Slider.types";
 
 const TestIcon = () => <div>Icon</div>;
 
 export const IconSliderWithIconExample: React.FC<
- Omit<IconSliderProps, "icon">
-> = (props) => <IconSlider icon={TestIcon} {...props} />;`},similarTo:[],figmaUrl:null}};var i={gettingStarted:`# Getting started
+ Omit<IconSliderProps, "icon"> & {
+ onAncestorKeyDown?: React.KeyboardEventHandler;
+ }
+> = ({ onAncestorKeyDown, ...props }) => (
+ <div onKeyDown={onAncestorKeyDown}>
+ <IconSlider icon={TestIcon} {...props} />
+ </div>
+);
+
+export const SliderWithExternalDescriptionExample: React.FC = () => (
+ <>
+ <p id="external-hint">Applies to the whole layer</p>
+ <Slider
+ label="Opacity"
+ description="Controls transparency"
+ aria-describedby="external-hint"
+ />
+ </>
+);`},similarTo:[],figmaUrl:null}};var i={gettingStarted:`# Getting started
 
 Install the packages required for using Baseline UI with the following command:
 
@@ -36612,7 +37951,7 @@ Baseline UI provides a comprehensive theming system based on CSS variables that
 The theme system is built around the \`ThemeProvider\` component, which applies theme tokens as CSS variables throughout your application:
 
 \`\`\`jsx live
-import { ThemeProvider } from "../../utils";
+import { ThemeProvider } from "@baseline-ui/core";
 import { themes } from "@baseline-ui/tokens";
 
 function App() {
@@ -37313,7 +38652,7 @@ You can combine sprinkles with other className utilities:
 
 \`\`\`tsx
 import { sprinkles } from "@baseline-ui/tokens";
-import { classNames } from "./utils";
+import { classNames } from "@baseline-ui/core";
 
 <div
  className={classNames(
@@ -37784,15 +39123,24 @@ ThemeVars can be used to pass color or sizing values to components, such as icon
 
 \`\`\`tsx
 import { themeVars } from "@baseline-ui/tokens";
-import { WarningIcon } from "@baseline-ui/icons";
+import {
+ CheckmarkCircleIcon,
+ ErrorCircleIcon,
+ WarningIcon,
+} from "@baseline-ui/icons/16";
 
 const statusIcons = {
  warning: (
  <WarningIcon color={themeVars.color.support.warning.strong} size={16} />
  ),
- error: <ErrorIcon color={themeVars.color.support.error.strong} size={16} />,
+ error: (
+ <ErrorCircleIcon color={themeVars.color.support.error.strong} size={16} />
+ ),
  success: (
- <CheckIcon color={themeVars.color.support.success.strong} size={16} />
+ <CheckmarkCircleIcon
+ color={themeVars.color.support.success.strong}
+ size={16}
+ />
  ),
 };
 \`\`\`
@@ -38173,7 +39521,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 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=`
+* [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-description","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--focusing-the-input","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.5.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.
@@ -38328,15 +39676,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 I=`# List of available components in Baseline UI design system
+`;var k=`# 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(`
+${Object.entries(o).sort(([n],[e])=>n.localeCompare(e)).map(([n,{description:e,similarTo:t}])=>`|${n}|${e}|${t?.join(", ")||""}|`).join(`
 `)}
 `,P=Object.entries(m).map(([n,e])=>`## ${n}
 
 ${e.map(t=>"- "+t).join(`
 `)}`).join(`
 
-`),D=new Set(r);function B(n){let e=n.toLowerCase();if(!e)return [];let t=r.filter(s=>s.includes(e));if(t.length>0)return t.slice(0,5);let a=e.split("--")[0];return a?r.filter(s=>s.includes(a)).slice(0,5):[]}function K(){let n=new McpServer({name:"baseline-ui",version:h.version});return n.registerResource("list_components","resource://baseline-ui/list_components.md",{description:l,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:I}]})),n.registerResource("list_icons","resource://baseline-ui/list_icons.md",{description:c,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:P}]})),n.registerResource("getting_started","resource://baseline-ui/getting_started.md",{description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.gettingStarted}]})),n.registerResource("nutrient_web_viewer_theming","resource://baseline-ui/nutrient_web_viewer_theming.md",{description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.nutrientWebViewerTheming}]})),n.registerResource("theming","resource://baseline-ui/theming.md",{description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.theming}]})),n.registerResource("internationalization","resource://baseline-ui/internationalization.md",{description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.internationalization}]})),n.registerResource("styling","resource://baseline-ui/styling.md",{description:p,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.styling}]})),n.registerResource("guidelines","resource://baseline-ui/guidelines.md",{description:d,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:b}]})),n.registerTool("get_component_info",{title:"Get component info",description:g,inputSchema:{componentName:z.enum(Object.keys(o))}},({componentName:e})=>({content:[{type:"text",text:JSON.stringify(Object.fromEntries(Object.entries(o[e]).filter(([t])=>!["description","similarTo","figmaUrl"].includes(t))),null,2)}]})),n.registerTool("get_story_url",{title:"Get story demo URL",description:f,inputSchema:{storyId:z.string()}},({storyId:e})=>{let t=e.toLowerCase();if(!D.has(t)){let a=B(e);return {isError:true,content:[{type:"text",text:`Unknown story id "${e}".`+(a.length>0?` Did you mean: ${a.join(", ")}?`:"")+" Story ids come from the Storybook index; get_component_info lists them under `stories.usage[].id`."}]}}return {content:[{type:"text",text:`https://nutrient.io/baseline-ui/iframe.html?id=${t}`}]}}),n.registerTool("get_figma_url",{title:"Get Figma URL",description:y,inputSchema:{componentName:z.enum(Object.keys(o))}},({componentName:e})=>{let{figmaUrl:t}=o[e];return t?{content:[{type:"text",text:t}]}:{isError:true,content:[{type:"text",text:`No Figma URL is available for ${e}.`}]}}),n.registerTool("list_available_resources",{title:"List Available Resources",description:v,inputSchema:{}},()=>({content:[{type:"text",text:JSON.stringify([{name:"list_components",uri:"resource://baseline-ui/list_components.md",description:l,mimeType:"text/markdown"},{name:"list_icons",uri:"resource://baseline-ui/list_icons.md",description:c,mimeType:"text/markdown"},{name:"getting_started",uri:"resource://baseline-ui/getting_started.md",description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},{name:"nutrient_web_viewer_theming",uri:"resource://baseline-ui/nutrient_web_viewer_theming.md",description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},{name:"theming",uri:"resource://baseline-ui/theming.md",description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},{name:"internationalization",uri:"resource://baseline-ui/internationalization.md",description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},{name:"styling",uri:"resource://baseline-ui/styling.md",description:p,mimeType:"text/markdown"},{name:"guidelines",uri:"resource://baseline-ui/guidelines.md",description:d,mimeType:"text/markdown"}],null,2)}]})),n}
+`),D=new Set(r);function B(n){let e=n.toLowerCase();if(!e)return [];let t=r.filter(s=>s.includes(e));if(t.length>0)return t.slice(0,5);let a=e.split("--")[0];return a?r.filter(s=>s.includes(a)).slice(0,5):[]}function K(){let n=new McpServer({name:"baseline-ui",version:h.version});return n.registerResource("list_components","resource://baseline-ui/list_components.md",{description:l,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:k}]})),n.registerResource("list_icons","resource://baseline-ui/list_icons.md",{description:c,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:P}]})),n.registerResource("getting_started","resource://baseline-ui/getting_started.md",{description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.gettingStarted}]})),n.registerResource("nutrient_web_viewer_theming","resource://baseline-ui/nutrient_web_viewer_theming.md",{description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.nutrientWebViewerTheming}]})),n.registerResource("theming","resource://baseline-ui/theming.md",{description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.theming}]})),n.registerResource("internationalization","resource://baseline-ui/internationalization.md",{description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.internationalization}]})),n.registerResource("styling","resource://baseline-ui/styling.md",{description:p,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.styling}]})),n.registerResource("guidelines","resource://baseline-ui/guidelines.md",{description:d,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:b}]})),n.registerTool("get_component_info",{title:"Get component info",description:g,inputSchema:{componentName:z.enum(Object.keys(o))}},({componentName:e})=>({content:[{type:"text",text:JSON.stringify(Object.fromEntries(Object.entries(o[e]).filter(([t])=>!["description","similarTo","figmaUrl"].includes(t))),null,2)}]})),n.registerTool("get_story_url",{title:"Get story demo URL",description:f,inputSchema:{storyId:z.string()}},({storyId:e})=>{let t=e.toLowerCase();if(!D.has(t)){let a=B(e);return {isError:true,content:[{type:"text",text:`Unknown story id "${e}".`+(a.length>0?` Did you mean: ${a.join(", ")}?`:"")+" Story ids come from the Storybook index; get_component_info lists them under `stories.usage[].id`."}]}}return {content:[{type:"text",text:`https://nutrient.io/baseline-ui/iframe.html?id=${t}`}]}}),n.registerTool("get_figma_url",{title:"Get Figma URL",description:y,inputSchema:{componentName:z.enum(Object.keys(o))}},({componentName:e})=>{let{figmaUrl:t}=o[e];return t?{content:[{type:"text",text:t}]}:{isError:true,content:[{type:"text",text:`No Figma URL is available for ${e}.`}]}}),n.registerTool("list_available_resources",{title:"List Available Resources",description:v,inputSchema:{}},()=>({content:[{type:"text",text:JSON.stringify([{name:"list_components",uri:"resource://baseline-ui/list_components.md",description:l,mimeType:"text/markdown"},{name:"list_icons",uri:"resource://baseline-ui/list_icons.md",description:c,mimeType:"text/markdown"},{name:"getting_started",uri:"resource://baseline-ui/getting_started.md",description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},{name:"nutrient_web_viewer_theming",uri:"resource://baseline-ui/nutrient_web_viewer_theming.md",description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},{name:"theming",uri:"resource://baseline-ui/theming.md",description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},{name:"internationalization",uri:"resource://baseline-ui/internationalization.md",description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},{name:"styling",uri:"resource://baseline-ui/styling.md",description:p,mimeType:"text/markdown"},{name:"guidelines",uri:"resource://baseline-ui/guidelines.md",description:d,mimeType:"text/markdown"}],null,2)}]})),n}
 export{K as a};