@baseline-ui/mcp 0.47.0 → 0.48.0

package/dist/data/component-docs.json

@@ -1,69 +0,0 @@
-{
-  "Accordion": "import {\n  Meta,\n  Controls,\n  Primary,\n  ArgTypes,\n  Canvas,\n} from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./Accordion.stories\";\nimport * as accordionItemStories from \"./AccordionItem.stories\";\n\n<Meta of={stories} />\n\n# Accordion\n\n`Accordion` is a component that allows users to toggle the visibility of content. It’s composed of an `Accordion` component and an `AccordionItem` component. The `Accordion` component is a container for the `AccordionItem` components.\n\n<Canvas of={stories.Basic} withToolbar={false} />\n\n## Features\n\n- Full keyboard navigation\n- It can expand one or multiple items\n- It can be controlled or uncontrolled\n- It supports adding buttons to the header\n\n## Usage\n\n```jsx\nimport { Accordion, AccordionItem } from \"../../utils\";\n\n<Accordion>\n  <AccordionItem title=\"Item 1\" value=\"item-1\">\n    Content 1\n  </AccordionItem>\n  <AccordionItem title=\"Item 2\" value=\"item-2\">\n    Content 2\n  </AccordionItem>\n  <AccordionItem title=\"Item 3\" value=\"item-3\">\n    Content 3\n  </AccordionItem>\n</Accordion>;\n```\n\n### Expansion modes\n\nThe `Accordion` component supports two expansion modes: `single` and `multiple`. The default mode is `multiple`.\n\n<Canvas of={stories.SingleExpansion} />\n\n```jsx\n<Accordion style={{ width: 240 }} expansionMode={\"single\"}>\n  <AccordionItem title=\"Single Expansion 1\" value=\"item-1\">\n    Content 1\n  </AccordionItem>\n  <AccordionItem title=\"Single Expansion 2\" value=\"item-2\">\n    Content 2\n  </AccordionItem>\n  <AccordionItem title=\"Single Expansion 3\" value=\"item-3\">\n    Content 3\n  </AccordionItem>\n</Accordion>\n```\n\n### Default expanded items\n\nYou can set the default expanded items using the `defaultExpandedKeys` prop. This prop accepts a set of keys that match the `value` prop of the `AccordionItem` component.\n\n<Canvas of={stories.DefaultExpandedKeys} />\n\n```jsx\n<Accordion defaultExpandedKeys={new Set([\"item-1\"])}>\n  <AccordionItem title=\"Annotation Item 1\" value=\"item-1\">\n    lorem ipsum dolor sit amet consectetur adipisicing elit\n  </AccordionItem>\n  <AccordionItem title=\"Annotation Item 2\" value=\"item-2\">\n    lorem ipsum dolor sit amet consectetur adipisicing elit\n  </AccordionItem>\n  <AccordionItem title=\"Annotation Item 3\" value=\"item-3\">\n    lorem ipsum dolor sit amet consectetur adipisicing elit\n  </AccordionItem>\n</Accordion>\n```\n\n### Controlled mode\n\nYou can control the expansion of the items using the `expandedKeys` prop. This prop accepts a set of keys that match the `value` prop of the `AccordionItem` component. This prop is useful when you want to control the expansion of the items from outside the `Accordion` component.\n\n<Canvas of={stories.Controlled} />\n\n```jsx\n<Accordion expandedKeys={new Set([\"item-1\"])}>\n  <AccordionItem title=\"Annotation Item 1\" value=\"item-1\">\n    lorem ipsum dolor sit amet consectetur adipisicing elit\n  </AccordionItem>\n  <AccordionItem title=\"Annotation Item 2\" value=\"item-2\">\n    lorem ipsum dolor sit amet consectetur adipisicing elit\n  </AccordionItem>\n  <AccordionItem title=\"Annotation Item 3\" value=\"item-3\">\n    lorem ipsum dolor sit amet consectetur adipisicing elit\n  </AccordionItem>\n</Accordion>\n```\n\n### Disabled items\n\nYou can disable items using the `disabledKeys` prop. This prop accepts a set of keys that match the `value` prop of the `AccordionItem` component.\n\n<Canvas of={stories.Disabled} />\n\n```jsx\n<Accordion disabledKeys={new Set([\"item-1\"])}>\n  <AccordionItem title=\"Annotation Item 1\" value=\"item-1\">\n    lorem ipsum dolor sit amet consectetur adipisicing elit\n  </AccordionItem>\n  <AccordionItem title=\"Annotation Item 2\" value=\"item-2\">\n    lorem ipsum dolor sit amet consectetur adipisicing elit\n  </AccordionItem>\n  <AccordionItem title=\"Annotation Item 3\" value=\"item-3\">\n    lorem ipsum dolor sit amet consectetur adipisicing elit\n  </AccordionItem>\n</Accordion>\n```\n\n### With buttons\n\nYou 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.\n\n<Canvas of={accordionItemStories.WithButtons} />\n\n```jsx\nconst actions = [\n  {\n    icon: EllipseIcon,\n    \"aria-label\": \"Edit\",\n    onPress: () => alert(\"Edit\"),\n  },\n  { icon: EllipseIcon, label: \"Delete\", onPress: () => alert(\"Delete\") },\n];\n\n<Accordion style={{ width: 240 }}>\n  <AccordionItem title=\"Annotation Item 1\" value=\"item-1\" actions={actions}>\n    lorem ipsum dolor sit amet consectetur adipisicing elit\n  </AccordionItem>\n  <AccordionItem title=\"Annotation Item 2\" value=\"item-2\" actions={actions}>\n    lorem ipsum dolor sit amet consectetur adipisicing elit\n  </AccordionItem>\n  <AccordionItem title=\"Annotation Item 3\" value=\"item-3\" actions={actions}>\n    lorem ipsum dolor sit amet consectetur adipisicing elit\n  </AccordionItem>\n</Accordion>;\n```\n\n### With sublabels\n\nYou can add sublabels to the header of the `AccordionItem` component using the `subLabel` prop.\n\n<Canvas of={accordionItemStories.WithSubLabels} />\n\n```jsx\n<Accordion style={{ width: 240 }}>\n  <AccordionItem title=\"Annotation Item 1\" value=\"item-1\" subLabel=\"Sublabel\">\n    lorem ipsum dolor sit amet consectetur adipisicing elit\n  </AccordionItem>\n  <AccordionItem title=\"Annotation Item 2\" value=\"item-2\">\n    lorem ipsum dolor sit amet consectetur adipisicing elit\n  </AccordionItem>\n</Accordion>\n```\n\n## Accessibility\n\n- Fully accessible and exposed to assistive technology using ARIA attributes\n- Can be navigated using the keyboard\n\n#### Keyboard interaction\n\n| Key     | Function                                                                                                 |\n| ------- | -------------------------------------------------------------------------------------------------------- |\n| `Space` | Expands or collapses the item.                                                                           |\n| `Enter` | Expands or collapses the item.                                                                           |\n| `Up`    | Moves focus to the previous item.                                                                        |\n| `Down`  | Moves focus to the next item.                                                                            |\n| `Home`  | Moves focus to the first item.                                                                           |\n| `End`   | Moves focus to the last item.                                                                            |\n| `Right` | If focus is on an item header and it contains action buttons, moves focus to the next action button.     |\n| `Left`  | If focus is on an item header and it contains action buttons, moves focus to the previous action button. |\n\n## Playground\n\n<Primary />\n\n### `Accordion` Props\n\n<Controls />\n\n### `AccordionItem` Props\n\n<ArgTypes of={accordionItemStories.WithButtons} />\n",
-  "ActionButton": "import { Meta, Controls, Primary, Canvas } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./ActionButton.stories\";\nimport { ActionButton } from \"./ActionButton\";\nimport { EllipseIcon } from \"@baseline-ui/icons/16\";\nimport { DocPreview } from \"~storybook/DocPreview\";\n\n<Meta of={stories} />\n\n# ActionButton\n\nActionButton is a clickable interactive element that triggers a response. You can place text and icons inside of a button. You can trigger an action with mouse, touch, and keyboard interactions.\n\n<Canvas of={stories.Basic} withToolbar={false} />\n\n## Features\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\n## Usage\n\nYou can import the ActionButton component like so:\n\n```jsx\nimport { ActionButton } from \"../../utils\";\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\n## Variants\n\nThere are nine variants of the button: `primary`, `secondary`, `tertiary`, `popover`, `toolbar`, `ghost`, `success`, `warning` and `error`. The default variant is `primary`. You can change the variant by passing the `variant` prop.\n\n<DocPreview>\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  <ActionButton label={\"Success\"} variant={\"success\"} />\n  <ActionButton label={\"Warning\"} variant={\"warning\"} />\n  <ActionButton label={\"Error\"} variant={\"error\"} />\n</DocPreview>\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<ActionButton label=\"Success\" variant=\"success\" />\n<ActionButton label=\"Warning\" variant=\"warning\" />\n<ActionButton label=\"Error\" variant=\"error\" />\n```\n\n## Disabled\n\nYou can disable a button by passing the `isDisabled` prop. This will disable all mouse, touch, and keyboard interactions.\n\n<DocPreview>\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={\"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</DocPreview>\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=\"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\n## Icon\n\nYou can place an icon before or after the label by passing the `iconBefore` or `iconAfter` props. You can pass any icon component that is exported from `@baseline-ui/icons`.\n\n<DocPreview>\n  <ActionButton label={\"Label\"} iconStart={EllipseIcon} />\n  <ActionButton label={\"Label\"} iconEnd={EllipseIcon} />\n</DocPreview>\n\n```jsx\nimport { EllipseIcon } from \"@baseline-ui/icons/16\";\n\n<ActionButton label=\"Label\" iconBefore={EllipseIcon} />\n<ActionButton\n  label={\"Label\"}\n  iconAfter={EllipseIcon}\n/>\n```\n\n## Events\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<DocPreview>\n  <ActionButton label={\"Click Me\"} onPress={() => alert(\"Hello World\")} />\n</DocPreview>\n\n```jsx\n<ActionButton label=\"Click Me\" onPress={() => alert(\"Hello World\")} />\n```\n\n## CSS Selectors\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#### Keyboard Interaction\n\n| Key     | Function                          |\n| ------- | --------------------------------- |\n| `Space` | Activates/deactivates the toggle. |\n| `Enter` | Activates/deactivates the toggle. |\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "ActionGroup": "import { Meta, Controls, Primary, Canvas } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./ActionGroup.stories\";\n\n<Meta of={stories} />\n\n# ActionGroup\n\nThe `ActionGroup` component is used to group a set of related actions together.\n\n<Canvas of={stories.Basic} />\n\n## Features\n\n- Groups a set of related actions together.\n- Support arrow key navigation between actions.\n- Supports showing tooltips on hover and focus.\n- Supports single and multiple selection modes.\n\n## Usage\n\n```jsx\nimport { ActionGroup } from \"../../utils\";\nimport { BoldIcon, ItalicIcon, UnderlineIcon } from \"@baseline-ui/icons/16\";\n\nconst items = [\n  { id: \"bold\", label: \"Bold\", icon: BoldIcon },\n  { id: \"italic\", label: \"Italic\", icon: ItalicIcon },\n  { id: \"underline\", label: \"Underline\", icon: UnderlineIcon },\n];\n\n<ActionGroup items={items} />;\n```\n\n### Selection Modes\n\nThe `ActionGroup` component supports two selection modes: `single` and `multiple`. By default there is no selection mode. You\ncan change the selection mode by setting the `mode` prop.\n\n<Canvas of={stories.MultiSelect} />\n\n### Tooltips\n\nThe `ActionGroup` component supports showing tooltips on hover and focus. You can enable tooltips by setting the `includeTooltip` prop to `true`.\n\n<Canvas of={stories.WithoutTooltip} />\n\n### Custom Action Items\n\nYou can customize the appearance of the action items by providing a custom `renderActionItem` function. The `renderActionItem` function receives the action item and other relevant props as arguments.\n\n<Canvas of={stories.WithCustomActionItem} />\n\n#### Keyboard Interaction\n\n| Key                   | Description                        |\n| --------------------- | ---------------------------------- |\n| <kbd>ArrowLeft</kbd>  | Move focus to the previous action. |\n| <kbd>ArrowRight</kbd> | Move focus to the next action.     |\n| <kbd>ArrowUp</kbd>    | Move focus to the previous action. |\n| <kbd>ArrowDown</kbd>  | Move focus to the next action.     |\n| <kbd>Enter</kbd>      | Select the focused action.         |\n| <kbd>Space</kbd>      | Select the focused action.         |\n\n## Props\n\n<Primary />\n<Controls />\n```\n",
-  "ActionIconButton": "import { Canvas, Controls, Meta, Primary } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./ActionIconButton.stories\";\nimport { DocPreview } from \"~storybook/DocPreview\";\nimport { ActionIconButton } from \"./ActionIconButton\";\nimport { EllipseIcon as EllipseIcon8 } from \"@baseline-ui/icons/8\";\nimport { EllipseIcon as EllipseIcon12 } from \"@baseline-ui/icons/12\";\nimport { EllipseIcon as EllipseIcon20 } from \"@baseline-ui/icons/20\";\nimport { EllipseIcon as EllipseIcon16 } from \"@baseline-ui/icons/16\";\nimport { EllipseIcon as EllipseIcon24 } from \"@baseline-ui/icons/24\";\n\n<Meta of={stories} />\n\n# ActionIconButton\n\nActionIconButton is a clickable interactive element that triggers a response. You can place icon inside of this button. You can trigger an action with mouse, touch, and keyboard interactions.\n\n<Canvas of={stories.Basic} />\n\n## Features\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\n## Usage\n\n```jsx\nimport { ActionIconButton } from \"../../utils\";\nimport { EllipseIcon } from \"@baseline-ui/icons/16\";\n\n<ActionIconButton icon={EllipseIcon} />;\n```\n\n## Sizes\n\n<DocPreview\n  style={{\n    alignItems: \"flex-end\",\n  }}\n>\n  <ActionIconButton icon={EllipseIcon8} size=\"xxs\" />\n  <ActionIconButton icon={EllipseIcon12} size=\"xs\" />\n  <ActionIconButton icon={EllipseIcon16} size=\"sm\" />\n  <ActionIconButton icon={EllipseIcon20} size=\"md\" />\n  <ActionIconButton icon={EllipseIcon24} size=\"lg\" />\n</DocPreview>\n\n```jsx\nimport { ActionIconButton } from \"./ActionIconButton\";\nimport { EllipseIcon as EllipseIcon8 } from \"@baseline-ui/icons/8\";\nimport { EllipseIcon as EllipseIcon12 } from \"@baseline-ui/icons/12\";\nimport { EllipseIcon as EllipseIcon20 } from \"@baseline-ui/icons/20\";\nimport { EllipseIcon as EllipseIcon16 } from \"@baseline-ui/icons/16\";\nimport { EllipseIcon as EllipseIcon24 } from \"@baseline-ui/icons/24\";\n\n<ActionIconButton icon={EllipseIcon8} size=\"xxs\" />\n<ActionIconButton icon={EllipseIcon12} size=\"xs\" />\n<ActionIconButton icon={EllipseIcon16} size=\"sm\" />\n<ActionIconButton icon={EllipseIcon20} size=\"md\" />\n<ActionIconButton icon={EllipseIcon24} size=\"lg\" />\n```\n\n## Disabled\n\n<DocPreview\n  style={{\n    alignItems: \"flex-end\",\n  }}\n>\n  <ActionIconButton icon={EllipseIcon8} isDisabled size=\"xxs\" />\n  <ActionIconButton icon={EllipseIcon12} isDisabled size=\"xs\" />\n  <ActionIconButton icon={EllipseIcon16} isDisabled size=\"sm\" />\n  <ActionIconButton icon={EllipseIcon20} isDisabled size=\"md\" />\n  <ActionIconButton icon={EllipseIcon24} isDisabled size=\"lg\" />\n</DocPreview>\n\n```jsx\n<ActionIconButton icon={EllipseIcon8} isDisabled size=\"xxs\" />\n<ActionIconButton icon={EllipseIcon12} isDisabled size=\"xs\" />\n<ActionIconButton icon={EllipseIcon16} isDisabled size=\"sm\" />\n<ActionIconButton icon={EllipseIcon20} isDisabled size=\"md\" />\n<ActionIconButton icon={EllipseIcon24} isDisabled size=\"lg\" />\n```\n\n## Events\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<DocPreview>\n  <ActionIconButton\n    icon={EllipseIcon20}\n    onPress={() => {\n      alert(\"Button pressed!\");\n    }}\n  />\n</DocPreview>\n\n```jsx\n<ActionIconButton\n  icon={EllipseIcon20}\n  onPress={() => alert(\"Button pressed!\")}\n/>\n```\n\n## CSS Selectors\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#### Keyboard Interaction\n\n| Key     | Function                          |\n| ------- | --------------------------------- |\n| `Space` | Activates/deactivates the toggle. |\n| `Enter` | Activates/deactivates the toggle. |\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "AlertDialog": "import { Meta, Controls, Primary, Canvas } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./AlertDialog.stories\";\n\n<Meta of={stories} />\n\n# AlertDialog\n\nAn `AlertDialog` is a modal dialog that interrupts the user's workflow to get a response. It is used to confirm or reject a particular action. It is a type of modal window that appears in front of app content to provide critical information or ask for a decision. It is used in\ncombination with the `Modal` component. Alert dialogs should always have a `title` prop that should be localized.\n\n<Canvas of={stories.Basic} />\n\n## Features\n\n- Exposed to assistive technologies as a `alert-dialog` using ARIA `role=\"alertdialog\"`. 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## Usage\n\n```jsx\nimport {\n  Modal,\n  ModalContent,\n  ModalTrigger,\n  ActionButton,\n  AlertDialog,\n} from \"../../utils\";\n\nfunction MyComponent() {\n  return (\n    <Modal>\n      <ModalTrigger>\n        <ActionButton label=\"Open\" />\n      </ModalTrigger>\n      <ModalContent>\n        <AlertDialog\n          title=\"Delete Item\"\n          message=\"Are you sure you want to delete this item?\"\n        />\n      </ModalContent>\n    </Modal>\n  );\n}\n```\n\n### Auto Focusing\n\nBy default, the first focusable element within the dialog will receive focus when the dialog opens. If any of the buttons in the Alert dialog's footer should be focused when it opens, specify which one via the `autoFocusButton` prop.\n\n## Props\n\n<Primary />\n<Controls />\n```\n",
-  "AudioPlayer": "import {\n  Meta,\n  Controls,\n  Primary,\n  Canvas,\n  Unstyled,\n} from \"@storybook/addon-docs/blocks\";\nimport { InlineAlert } from \"../InlineAlert\";\nimport * as stories from \"./AudioPlayer.stories\";\n\n<Meta of={stories} />\n\n# AudioPlayer\n\nThe `AudioPlayer` component is used to play audio files. It provides a simple interface for playing, pausing, and seeking through audio files.\n\n<Unstyled>\n  <InlineAlert\n    variant=\"warning\"\n    arrangement=\"multi\"\n    title=\"This component depends on `Intl.DurationFormat`\"\n    description={\n      \"You might need to polyfill `Intl.DurationFormat` for older browsers. You can use the `@formatjs/intl-durationformat` package to polyfill this feature.\"\n    }\n  />\n</Unstyled>\n\n<Canvas of={stories.Basic} />\n\n## Features\n\n- Play and pause audio files\n- Seek through audio files\n- Display the current time and duration of the audio file\n- Built on top of native `<audio>` element so all the file formats supported by the browser are supported\n- Exposed to screen readers via ARIA attributes\n- Supports mouse, keyboard, and touch interactions\n\n## Usage\n\n```jsx\nimport { AudioPlayer } from \"@storybook/addon-docs/blocks\";\n\nfunction App() {\n  return (\n    <AudioPlayer\n      sources={[\n        {\n          url: \"sound.mp3\",\n          type: \"audio/mp3\",\n        },\n      ]}\n      aria-label=\"Auido Player\"\n    />\n  );\n}\n```\n\n## Props\n\n<Primary />\n<Controls />\n```\n",
-  "Avatar": "import { Meta, Controls, Primary, Canvas } from \"@storybook/addon-docs/blocks\";\nimport { DocPreview } from \"~storybook/DocPreview\";\nimport { Separator } from \"../Separator\";\nimport { Avatar } from \"./Avatar\";\nimport * as stories from \"./Avatar.stories\";\n\n<Meta of={stories} />\n\n# Avatar\n\n`Avatar` is a component that displays a user's name or avatar.\n\n<Canvas of={stories.Basic} withToolbar={false} />\n\n## Usage\n\n```jsx\nimport { Avatar } from \"../../utils\";\n\n<Avatar name=\"John Doe\" />;\n```\n\n### Sizes\n\nThe `size` prop can be used to change the size of the user.\n\n<DocPreview>\n  <Avatar name=\"John Doe\" size=\"sm\" />\n  <Avatar name=\"John Doe\" size=\"md\" />\n</DocPreview>\n\n```jsx\n<Avatar name=\"John Doe\" size=\"sm\" />\n<Avatar name=\"John Doe\" size=\"md\" />\n```\n\n### Disabled\n\nThe `isDisabled` prop can be used to disable the user.\n\n<DocPreview>\n  <Avatar name=\"John Doe\" isDisabled />\n  <Avatar name=\"John Doe\" isDisabled showInitials />\n  <Avatar name=\"John Doe\" imgSrc=\"https://i.pravatar.cc/24?img=37\" isDisabled />\n</DocPreview>\n\n```jsx\n  <Avatar name=\"John Doe\" isDisabled />\n  <Avatar name=\"John Doe\" isDisabled showInitials />\n  <Avatar name=\"John Doe\" imgSrc=\"/img.png\" isDisabled />\n```\n\n### Show Initials\n\nThe `showInitials` prop can be used to show the user's initials.\n\n<DocPreview>\n  <Avatar name=\"John Doe\" size=\"sm\" showInitials />\n  <Avatar name=\"John Doe\" showInitials />\n</DocPreview>\n\n```jsx\n<Avatar name=\"John Doe\" size=\"sm\" showInitials />\n<Avatar name=\"John Doe\" showInitials />\n```\n\n### Notifications\n\nThe `hasNotifications` prop can be used to show a notification indicator.\n\n<DocPreview\n  style={{\n    display: \"flex\",\n    alignItems: \"center\",\n    gap: 10,\n  }}\n>\n  <Avatar name=\"John Doe\" hasNotifications />\n  <Avatar name=\"John Doe\" hasNotifications showInitials />\n  <Avatar\n    name=\"John Doe\"\n    imgSrc=\"https://i.pravatar.cc/24?img=37\"\n    hasNotifications\n  />\n  <Separator style={{ height: 30 }} orientation=\"vertical\" />\n  <Avatar name=\"John Doe\" size=\"sm\" hasNotifications />\n  <Avatar name=\"John Doe\" size=\"sm\" hasNotifications showInitials />\n  <Avatar\n    name=\"John Doe\"\n    size=\"sm\"\n    imgSrc=\"https://i.pravatar.cc/24?img=37\"\n    hasNotifications\n  />\n</DocPreview>\n\n```jsx\n<Avatar name=\"John Doe\" hasNotifications />\n<Avatar name=\"John Doe\" hasNotifications showInitials />\n<Avatar name=\"John Doe\" imgSrc=\"/img.png\" hasNotifications />\n\n<Avatar name=\"John Doe\" size=\"sm\" hasNotifications />\n<Avatar name=\"John Doe\" size=\"sm\" hasNotifications showInitials />\n<Avatar\n  name=\"John Doe\"\n  size=\"sm\"\n  imgSrc=\"/img.png\"\n  hasNotifications\n/>\n```\n\n## CSS Selectors\n\n| Selector        | Description                        |\n| --------------- | ---------------------------------- |\n| [data-disabled] | Whether the component is disabled. |\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "Box": "import { Meta, Controls, Primary, Canvas } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./Box.stories\";\n\n<Meta of={stories} />\n\n# Box\n\nThe `Box` component is a generic container component that can be used to wrap other components. It is used to provide a consistent API for layout and spacing.\nYou can use any sprinkle as a prop to add styling to the box.\n\n## Features\n\n- Consistent API for layout and spacing\n- The component is theme aware so it automatically applies the correct styling based on the theme\n- Can use any HTML element as the root element\n\n## Usage\n\n```jsx\nimport { Box } from \"../../utils\";\n\n<Box\n  padding=\"md\"\n  backgroundColor=\"background.primary.medium\"\n  color=\"text.primary\"\n  typography=\"label.md.medium\"\n>\n  Hello World\n</Box>;\n```\n\n### Media Queries\n\nCertain props related to spacing and layout can be passed an array of values to apply different values at different breakpoints. The breakpoints are defined in the theme and are mobile, tablet and desktop. The array should be in the order of mobile, tablet and desktop.\n\n```jsx\nimport { Box } from \"../../utils\";\n\n<Box\n  padding={[\"2xl\", \"3xl\", \"4xl\"]}\n  backgroundColor=\"support.error.subtle\"\n  color=\"support.error.medium\"\n  typography={[\"label.md.medium\", \"label.lg.medium\"]}\n>\n  Hello World\n</Box>;\n```\n\n<Canvas of={stories.MediaQueries} />\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "ButtonSelect": "import {\n  Meta,\n  Controls,\n  Primary,\n  Canvas,\n  ArgTypes,\n} from \"@storybook/addon-docs/blocks\";\nimport React from \"react\";\nimport * as stories from \"./ButtonSelect.stories\";\n\n<Meta of={stories} />\n\n# ButtonSelect\n\nThe `ButtonSelect` component combines a button with a select dropdown. It allows users to both toggle the current selection on/off and choose from a dropdown list of options.\n\n<Canvas of={stories.Basic} withToolbar={false} />\n\n## Features\n\n- Combines a button (toggle/action) with a select dropdown menu\n- Button can toggle current selection or trigger an action\n- Supports icons, optional labels, and tooltips for better UX\n- Configurable with different sizes, states (disabled/enabled), and behaviors\n- Full keyboard navigation and screen reader support\n- Customizable styling through className and style props\n\n## Usage\n\n```jsx\nimport { ButtonSelect } from \"../../utils\";\nimport { EllipseIcon, SquareIcon, PolygonIcon } from \"@baseline-ui/icons/24\";\n\nconst items = [\n  { id: \"ellipse\", icon: EllipseIcon, label: \"Ellipse\" },\n  { id: \"square\", icon: SquareIcon, label: \"Square\" },\n  { id: \"polygon\", icon: PolygonIcon, label: \"Polygon\" },\n];\n\n<ButtonSelect items={items} aria-label=\"Shape Options\" />;\n```\n\n### With Hidden Label\n\nYou can hide the label in the button and just show the icon by setting the `hideLabel` prop to true.\n\n<Canvas of={stories.WithHiddenLabel} />\n\n```jsx\n<ButtonSelect items={items} aria-label=\"Shape Options\" hideLabel />\n```\n\n### Without Tooltip\n\nBy default, ButtonSelect displays a tooltip. You can disable the tooltip by setting `tooltipProps` with `isDisabled: true`.\n\n<Canvas of={stories.WithoutTooltip} />\n\n```jsx\n<ButtonSelect\n  items={items}\n  aria-label=\"Shape Options\"\n  tooltipProps={{ isDisabled: true }}\n/>\n```\n\n### Default Selected Item\n\nYou can set the default selected item in the dropdown by using the `defaultSelectedKey` prop.\n\n<Canvas of={stories.DefaultSelectSelectedValue} />\n\n```jsx\n<ButtonSelect\n  items={items}\n  aria-label=\"Shape Options\"\n  defaultSelectedKey=\"polygon\"\n/>\n```\n\n### Default Button Selection State\n\nYou can set the default button selection state using the `defaultSelected` prop.\n\n<Canvas of={stories.DefaultButtonSelectedValue} />\n\n```jsx\n<ButtonSelect items={items} aria-label=\"Shape Options\" defaultSelected={true} />\n```\n\n### Controlled\n\nYou can control the selected item by using the `selectedKey` prop.\n\n<Canvas of={stories.Controlled} />\n\n```jsx\n<ButtonSelect items={items} aria-label=\"Shape Options\" selectedKey=\"polygon\" />\n```\n\n### Disabled\n\nYou can disable the entire component using the `isDisabled` prop.\n\n<Canvas of={stories.Disabled} />\n\n```jsx\n<ButtonSelect items={items} aria-label=\"Shape Options\" isDisabled />\n```\n\n### Button Behavior\n\nBy default, the button uses a \"toggle\" behavior, which means it can be toggled on/off. You can change it to \"action\" behavior, which means it will trigger an action when pressed but won't toggle a state.\n\n<Canvas of={stories.WithActionBehaviour} />\n\n```jsx\n<ButtonSelect\n  items={items}\n  aria-label=\"Shape Options\"\n  buttonBehaviour=\"action\"\n  onPress={(e) => console.log(\"Button pressed\", e)}\n/>\n```\n\n### Sizes\n\nButtonSelect comes in two sizes: `md` (default) and `lg`.\n\n```jsx\n<ButtonSelect items={items} aria-label=\"Shape Options\" size=\"lg\" />\n```\n\n### Keyboard Interaction\n\n| Key         | Function                                                                  |\n| ----------- | ------------------------------------------------------------------------- |\n| `Space`     | Toggles the button if using toggle behavior, or opens the select dropdown |\n| `Enter`     | Toggles the button if using toggle behavior, or opens the select dropdown |\n| `Tab`       | Moves focus to the next focusable element                                 |\n| `Shift+Tab` | Moves focus to the previous focusable element                             |\n| `ArrowDown` | Opens the dropdown if trigger button is focused                           |\n| `Escape`    | Closes the dropdown if open                                               |\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "Checkbox": "import { Meta, Primary, Controls, Canvas } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./Checkbox.stories\";\nimport { DocPreview } from \"~storybook/DocPreview\";\nimport { Checkbox } from \"./Checkbox\";\n\n<Meta of={stories} />\n\n# Checkbox\n\n`Checkbox` is a component that allows users to select one or more items from a set. It is a wrapper around the native `input[type=\"checkbox\"]` element that provides additional styling and behavior.\n\nIn most cases, checkboxes should have a visual label. If the checkbox does not have a visible label, an aria-label or aria-labelledby prop must be passed instead to identify the element to assistive technology.\n\n<Canvas of={stories.Primary} withToolbar={false} />\n\n## Features\n\n- It is built on top of the native `input[type=\"checkbox\"]` element\n- Full support for form autofill\n- Keyboard focus management and cross browser normalization\n- Labeling support for assistive technology via aria-\\* props\n- Indeterminate state support\n\n## Usage\n\n```jsx\nimport { Checkbox } from \"../../utils\";\n\n<Checkbox label=\"Label\" onChange={console.log} />;\n```\n\n### Default Value\n\nThe `defaultSelected` prop allows the checkbox to be uncontrolled. This is useful when the checkbox is not part of a group and the checked state is managed by the checkbox itself.\n\n<DocPreview>\n  <Checkbox label=\"Label\" defaultSelected onChange={console.log} />\n</DocPreview>\n\n```jsx\n<Checkbox label=\"Label\" defaultSelected onChange={console.log} />\n```\n\n### Controlled\n\nThe `isSelected` prop allows the checkbox to be controlled. This is useful when the checkbox is part of a group and the checked state is managed by a parent component.\n\n<DocPreview>\n  <Checkbox label=\"Label\" isSelected onChange={console.log} />\n</DocPreview>\n\n```jsx\n<Checkbox label=\"Label\" isSelected onChange={console.log} />\n```\n\n### Indeterminate\n\nThe `isIndeterminate` prop allows the checkbox to be in an indeterminate state. This is useful when the checkbox is part of a group and some, but not all, of the checkboxes are checked.\n\n<DocPreview>\n  <Checkbox label=\"Label\" isIndeterminate onChange={console.log} />\n</DocPreview>\n\n```jsx\n<Checkbox label=\"Label\" isIndeterminate onChange={console.log} />\n```\n\n### Readonly\n\nThe `isReadOnly` prop allows the checkbox to be readonly. This mode is useful when you want the checkbox to be focusable, but not editable.\n\n<DocPreview>\n  <Checkbox label=\"Label\" isReadOnly isSelected onChange={console.log} />\n</DocPreview>\n\n```jsx\n<Checkbox label=\"Label\" isReadOnly isSelected onChange={console.log} />\n```\n\n### Disabled\n\nThe `isDisabled` prop allows the checkbox to be disabled.\n\n<DocPreview>\n  <Checkbox label=\"Label\" isDisabled onChange={console.log} />\n</DocPreview>\n\n```jsx\n<Checkbox label=\"Label\" isDisabled onChange={console.log} />\n```\n\n### HTML Forms\n\nThe `name` and `value` props allow the checkbox to be used in an HTML form.\n\n<DocPreview>\n  <Checkbox label=\"Label\" name=\"name\" value=\"value\" onChange={console.log} />\n</DocPreview>\n\n```jsx\n<Checkbox label=\"Label\" name=\"name\" value=\"value\" onChange={console.log} />\n```\n\n## CSS Selectors\n\n| Selector             | Description                                                       |\n| -------------------- | ----------------------------------------------------------------- |\n| [data-disabled]      | Whether the component is disabled.                                |\n| [data-focused]       | Whether the component is focused, either via a mouse or keyboard. |\n| [data-hovered]       | Whether the component is currently hovered with a mouse.          |\n| [data-focus-visible] | Whether the component is keyboard focused.                        |\n| [data-selected]      | Whether the component is selected.                                |\n\n### Keyboard Interactions\n\n| Key     | Function            |\n| ------- | ------------------- |\n| `Space` | Toggle the checkbox |\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "ColorInput": "import {\n  Meta,\n  Controls,\n  Primary,\n  Canvas,\n  ArgTypes,\n} from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./ColorInput.stories\";\nimport * as iconStories from \"./IconColorInput.stories\";\nimport * as swatchStories from \"../ColorSwatch/ColorSwatch.stories\";\n\n<Meta of={stories} />\n\n# ColorInput\n\nThe `ColorInput` component is used to select a color. You can use the `ColorInput` component to select a color from a predefined set of colors, or to select a custom color.\n\n<Canvas of={stories.WithLabel} withToolbar={false} />\n\n## Features\n\n- Includes custom color picker\n- Supports alpha channel\n- Exposed to screen readers using ARIA attributes\n- Supports keyboard, touch and mouse interaction\n- Supports disabled state.\n\n## Usage\n\n```jsx\nimport { ColorInput } from \"@baseline-ui/components\";\n\nconst presets = [\n  { label: \"Red\", color: \"#ff0000\" },\n  { label: \"Green\", color: \"#00ff00\" },\n  { label: \"Blue\", color: \"#0000ff\" },\n  { label: \"Yellow\", color: \"#ffff00\" },\n  { label: \"Cyan\", color: \"#00ffff\" },\n  { label: \"Magenta\", color: \"#ff00ff\" },\n  { label: \"Black\", color: \"#000000\" },\n  { label: \"White\", color: \"#ffffff\" },\n  { label: \"Gray\", color: \"#808080\" },\n  { label: \"Orange\", color: \"#ffa500\" },\n  { label: \"Brown\", color: \"#a52a2a\" },\n  { label: \"Purple\", color: \"#800080\" },\n];\n\n<ColorInput />;\n```\n\n### Alpha Channel\n\nYou can enable the alpha channel in the color picker by setting the `allowAlpha` prop to `true`.\n\n<Canvas of={stories.WithAlpha} />\n\n```jsx\n<ColorInput presets={presets} allowAlpha />\n```\n\n### Custom Colors\n\nBy default, you can add colors picked from the picker to the list of presets. You can disable this by setting the `storePickedColor` prop to `false`. This\nwill prevent the user from adding custom colors to the list of presets.\n\n### Removing Color\n\nBy default, you cannot unset the color. You can enable the ability to unset the color by setting the `allowRemoval` prop to `true`.\n\n<Canvas of={stories.WithRemoval} />\n\n```jsx\n<ColorInput presets={presets} allowRemoval />\n```\n\n### Default Selection\n\nYou can set the default color by setting the `defaultValue` prop to a color value.\n\n<Canvas of={stories.WithDefaultValue} />\n\n```jsx\n<ColorInput presets={presets} defaultValue=\"#ff0000\" />\n```\n\n### Controlled\n\nYou can make the `ColorInput` component controlled by setting the `value` prop to a color value. You can use the `onChange` prop to update the value.\n\n<Canvas of={stories.Controlled} />\n\n```jsx\n<ColorInput presets={presets} value=\"#ff0000\" onChange={console.log} />\n```\n\n## Custom Trigger\n\nYou can use the `renderTriggerButton` prop to render a custom trigger.\n\n<Canvas of={stories.WithCustomTrigger} />\n\n```jsx\n<ColorInput\n  label=\"label\"\n  renderTriggerButton={({ colorName, ref, triggerProps }) => (\n    <ActionIconButton\n      {...triggerProps}\n      aria-label={typeof colorName === \"string\" ? colorName : \"Color\"}\n      icon={EllipseIcon}\n      ref={ref}\n      aria-haspopup=\"true\"\n    />\n  )}\n/>\n```\n\n## Indeterminate\n\nThe `ColorInput` component supports an indeterminate state. This is useful when you want to show a loading state or an unknown state. This property is always controlled and only makes a visual difference. If set to true, the color input trigger button will show \"Indeterminate\" as the color name. Apart from this, all the other functionality will work as expected.\n\n<Canvas of={stories.Indeterminate} />\n\n```jsx\n<ColorInput isIndeterminate />\n```\n\n## Lazy Picker Mode\n\nYou can use the `lazy` prop to render the color picker only to add a custom color to the list of custom color presets. This is useful when you want to\nprevent the `onChange` event from firing while the user is picking a color from the picker. In case of mobile the picker opens in a modal.\n\n#### Keyboard Interaction\n\n| Key    | Description                                                         |\n| ------ | ------------------------------------------------------------------- |\n| Enter  | Opens the dropdown or selects the current color if dropdown is open |\n| Escape | Closes the dropdown if open                                         |\n| Space  | Opens the dropdown or selects the current color if dropdown is open |\n\n## Props\n\n<Primary />\n<Controls />\n\n# IconColorInput\n\nThe `IconColorInput` component is a wrapper around the `ColorInput` component that allows you to render an icon next to the color input. This basically overrides the `renderTriggerButton` prop of the `ColorInput` component to\nprovide a predefined trigger button with an icon.\n\n<Canvas of={iconStories.Standard} withToolbar={false} />\n\n## Usage\n\n```jsx\nimport { IconColorInput } from \"../../utils\";\nimport { EllipseIcon } from \"@baseline-ui/icons/24\";\n\n<IconColorInput icon={EllipseIcon} aria-label=\"Color Picker\" />;\n```\n\n### Variants\n\nYou can use the `variant` prop to change the appearance of the `IconColorInput` component. The `variant` prop accepts the following values: `standard` and `compact`.\n\n<Canvas of={iconStories.Compact} />\n\n### Disable Tooltip\n\nThe `IconColorInput` component supports adding tooltip to the trigger button which is enabled by default. The tooltip will be the same as the `aria-label` of the trigger button. If you want to disable the tooltip, you can set the `tooltipProps` prop to `{ isDisabled: true }`.\n\n<Canvas of={iconStories.WithoutTooltip} />\n\n## `IconColorInput` Props\n\n<ArgTypes of={iconStories} />\n\n# ColorSwatch\n\nThe `ColorSwatch` component is used to display a color swatch. The `ColorSwatch` component is used in the `ColorInput` component to display the selected color.\n\n<Canvas of={swatchStories.Basic} />\n\n## Usage\n\n```jsx\nimport { ColorSwatch } from \"../../utils\";\n\n<ColorSwatch color=\"#ff0000\" />;\n```\n\n## Props\n\n<ArgTypes of={swatchStories} />\n",
-  "ColorSwatch": "import { Meta, Controls, Primary, Canvas } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"../ColorSwatch/ColorSwatch.stories\";\n\n<Meta of={stories} />\n\n# ColorSwatch\n\nThe `ColorSwatch` component is used to display a color swatch. It provides a visual representation of a color with support for various states including interactive, selected, and disabled.\n\n<Canvas of={stories.Basic} withToolbar={false} />\n\n## Features\n\n- Accessible color representation with screen reader support via aria-label\n- Support for transparent colors with a checkered background pattern\n- Visual indicators for selected, focused, and disabled states\n- Support for \"None\" color state\n- Tooltip integration for enhanced usability\n- Support for indeterminate state with customizable icon\n\n## Usage\n\n```jsx\nimport { ColorSwatch } from \"../../utils\";\n\n<ColorSwatch color=\"#ff0000\" />;\n```\n\n### With Transparency\n\nThe ColorSwatch component supports partially transparent colors by showing a checkered background.\n\n<Canvas of={stories.WithTransparency} />\n\n```jsx\n<ColorSwatch color=\"#80080070\" />\n```\n\n### Interactive\n\nYou can make the swatch interactive by setting the `isInteractive` prop, which enables hover effects.\n\n<Canvas of={stories.Interactive} />\n\n```jsx\n<ColorSwatch color=\"#800800\" isInteractive={true} />\n```\n\n### Custom Label\n\nYou can provide a custom aria-label to override the automatically generated color description.\n\n<Canvas of={stories.WithCustomLabel} />\n\n```jsx\n<ColorSwatch color=\"#80080070\" aria-label=\"Light Brown\" />\n```\n\n### Full Transparency\n\nColorSwatch supports fully transparent colors.\n\n<Canvas of={stories.FullTransparency} />\n\n```jsx\n<ColorSwatch color=\"#00000000\" />\n```\n\n### Disabled\n\nYou can disable the color swatch by setting the `isDisabled` prop.\n\n<Canvas of={stories.Disabled} />\n\n```jsx\n<ColorSwatch color=\"#800800\" isDisabled={true} />\n```\n\n### None\n\nWhen no color is provided, the component displays a \"None\" state with a diagonal line.\n\n<Canvas of={stories.None} />\n\n```jsx\n<ColorSwatch />\n```\n\n### With Tooltip\n\nAdding a tooltip provides additional context when hovering over the swatch.\n\n<Canvas of={stories.WithTooltip} />\n\n```jsx\n<ColorSwatch color=\"#800800\" tooltip={true} />\n```\n\n### Indeterminate\n\nThe indeterminate state is useful for representing a mixed color value, such as when multiple items with different colors are selected.\n\n<Canvas of={stories.Indeterminate} />\n\n```jsx\n<ColorSwatch\n  color=\"#800800\"\n  isIndeterminate={true}\n  aria-label=\"Indeterminate\"\n  tooltip={true}\n/>\n\n// Without the default help icon\n<ColorSwatch\n  color=\"#800800\"\n  isIndeterminate={true}\n  indeterminateIcon={null}\n  aria-label=\"Indeterminate\"\n  tooltip={true}\n/>\n```\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "ColorSwatchPicker": "import { Meta, Controls, Primary, Canvas } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./ColorSwatchPicker.stories\";\n\n<Meta of={stories} />\n\n# ColorSwatchPicker\n\n`ColorSwatchPicker` is a component that allows users to select a color from a predefined set of colors. It is built on top of\nthe `ListBox` component.\n\n<Canvas of={stories.Basic} />\n\n## Features\n\n- Exposed to assistive technologies via ARIA attributes.\n- Supports keyboard navigation.\n\n## Usage\n\n```jsx\nimport { ColorSwatchPicker } from \"../../utils\";\n\n<ColorSwatchPicker\n  colors={[\n    { color: \"#ff0000\", label: \"Red\" },\n    { color: \"#00ff00\", label: \"Green\" },\n    { color: \"#0000ff\", label: \"Blue\" },\n  ]}\n/>;\n```\n\n#### Keyboard Interaction\n\n| Key         | Function                                    |\n| ----------- | ------------------------------------------- |\n| Up Arrow    | Move focus to the previous item in the list |\n| Down Arrow  | Move focus to the next item in the list     |\n| Left Arrow  | Move focus to the previous item in the list |\n| Right Arrow | Move focus to the next item in the list     |\n\n## Props\n\n<Primary />\n<Controls />\n```\n",
-  "ComboBox": "import { Canvas, Controls, Meta, Primary } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./ComboBox.stories\";\n\n<Meta of={stories} />\n\n# ComboBox\n\n`ComboBox` is a component that allows users to select an item from a dropdown list. The selected item value is shown in\nan editable input box that can also be used to search and filter specific items from the dropdown list.\n\n<Canvas of={stories.Basic} withToolbar={false} />\n\n```jsx\n<ComboBox\n  placeholder=\"Select a fruit\"\n  items={[\n    { id: \"pear\", label: \"Pear\" },\n    { id: \"apple\", label: \"Apple\" },\n    { id: \"orange\", label: \"Orange\" },\n  ]}\n/>\n```\n\n## Features\n\n- This component is built on top of a combination of the `input`, `label`, and `ul` elements. Under the hood it uses `ListBox`, `PopoverContent` and `ActionButton` Baseline UI elements, as well as `input`.\n- It provides visual and ARIA labels to these elements to make them more accessible.\n- It supports events for change, clipboard, composition, focus, and keyboard.\n- It exposes invalid states to the assistive technology via ARIA.\n- It supports description and other state messages which are linked to the `input` element via ARIA.\n\n## Usage\n\nThe following examples show how to use the ComboBox component.\n\n### Menu Trigger behavior\n\nBy default, the dropdown list is opened when the user types in the input field.\n\nToggle the dropdown when the ComboBox is focused.\n\n<Canvas of={stories.WithFocusMenuTrigger} />\n\n```jsx\n<ComboBox\n  label=\"Dropdown opens when the ComboBox is focused\"\n  placeholder=\"Placeholder\"\n  menuTrigger=\"focus\"\n  items={[\n    { id: \"pear\", label: \"Pear\" },\n    { id: \"apple\", label: \"Apple\" },\n    { id: \"orange\", label: \"Orange\" },\n  ]}\n/>\n```\n\nToggle the dropdown when the toggle button is pressed.\n\n<Canvas of={stories.WithManualMenuTrigger} />\n\n```jsx\n<ComboBox\n  label=\"Dropdown opens when pressing the toggle button\"\n  placeholder=\"Placeholder\"\n  menuTrigger=\"manual\"\n  items={[\n    { id: \"pear\", label: \"Pear\" },\n    { id: \"apple\", label: \"Apple\" },\n    { id: \"orange\", label: \"Orange\" },\n  ]}\n/>\n```\n\nRegardless of the value of the `menuTrigger` prop, the dropdown will also be toggled when the user presses the `Up` or `Down` keys, or when pressing the toggle button.\n\n### Dynamic collections\n\nComboBox supports dynamic collections, useful when the list of items is not known in advance, like can be the case when items are retrieved from an asynchronous data source, or if they are bound to updates in real time.\n\nThe current items list is passed using the `items` prop.\n\n<Canvas of={stories.DynamicCollections} />\n\n```jsx\nconst availableItems = [\n  { id: \"pear\", name=\"Pear\" },\n  { id: \"apple\", name=\"Apple\" },\n  { id: \"orange\", name=\"Orange\" },\n  { id: \"banana\", name=\"Banana\" },\n  { id: \"grape\", name=\"Grape\" },\n  { id: \"kiwi\", name=\"Kiwi\" },\n  { id: \"mango\", name=\"Mango\" },\n  { id: \"strawberry\", name=\"Strawberry\" },\n  { id: \"blueberry\", name=\"Blueberry\" },\n  { id: \"raspberry\", name=\"Raspberry\" },\n]\n\nfunction Example() {\n  // We only pass a single item in the initial list\n  const [items, setItems] = React.useState([availableItems[0]]);\n\n  return (\n    <>\n      <ComboBox\n        label=\"Select a fruit\"\n        placeholder=\"Placeholder\"\n        items={items} />\n      <ActionButton\n        label=\"Add another fruit to the list\"\n        onPress={() => {\n          setItems((items) => [...items, availableItems[items.length]]);\n        }}\n        isDisabled={items.length >= availableItems.length}\n      >\n        Add another fruit to the list\n      </ActionButton>\n    </>\n  );\n}\n```\n\n### Allowing custom values\n\nBy default the ComboBox current value cannot be set to values not included in items list, and if an invalid value is typed it will be reverted to the current selected value on blur. By setting `allowsCustomValue`, any value typed will be respected and kept on blur.\n\n<Canvas of={stories.WithCustomValue} />\n\n```jsx\n<ComboBox\n  label=\"Type any text and blur the input\"\n  placeholder=\"Placeholder\"\n  items={[\n    { id: \"pear\", label: \"Pear\" },\n    { id: \"apple\", label: \"Apple\" },\n    { id: \"orange\", label: \"Orange\" },\n  ]}\n  defaultInputValue=\"Custom value\"\n  allowsCustomValue\n/>\n```\n\n### Custom filtering\n\nThe `ComboBox` input field filters visible items in the list to show only the ones that match the typed text. By default, only items that contain that text are shown. A custom filter function can be provided to modify this behavior.\n\nThis example provides a filter that will only show items that match exactly the typed text, case sensitive.\n\n<Canvas of={stories.WithCustomFilter} />\n\n```jsx\n<ComboBox\n  label=\"Type 'Pear' to show the unfiltered item\"\n  placeholder=\"Placeholder\"\n  items={[\n    { id: \"pear\", label: \"Pear\" },\n    { id: \"apple\", label: \"Apple\" },\n    { id: \"orange\", label: \"Orange\" },\n  ]}\n  filter={(value, text) => value === text}\n/>\n```\n\n## Accessibility\n\n- Fully accessible and exposed to assistive technology using ARIA attributes.\n- Can be navigated using the keyboard.\n\n#### Keyboard Interaction\n\nWhen the component is navigated with the keyboard, the keyboard input is assigned to the text form field. The following keyboard interactions are supported:\n\n| Key    | Function                                                             |\n| ------ | -------------------------------------------------------------------- |\n| `Down` | Toggles the dropdown open if closed, and sets the first item active. |\n| `Up`   | Toggles the dropdown open if closed, and sets the last item active.  |\n\nUsing the keys above will toggle the dropdown regardless of the value set for the `menuTrigger` prop.\n\n##### Dropdown list\n\nWhen the dropdown list is open, the following keyboard interactions are supported:\n\n| Key     | Function                                                             |\n| ------- | -------------------------------------------------------------------- |\n| `Up`    | Moves focus to the previous item.                                    |\n| `Down`  | Moves focus to the next item.                                        |\n| `Enter` | Sets the input field to the item value and closes the dropdown list. |\n| `Home`  | Moves focus to the first item.                                       |\n| `End`   | Moves focus to the last item.                                        |\n| `Esc`   | Closes the dropdown.                                                 |\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "DateField": "import { Meta, Controls, Primary, Canvas } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./DateField.stories\";\n\n<Meta of={stories} />\n\n# DateField\n\nThe `DateField` component is used to input date and time values using a keyboard. Each part of a date/time value is displayed in an individually editable segment, allowing for precise and accessible input control.\n\n<Primary />\n\n## Features\n\n- **Dates and times** – Support for dates and times with configurable granularity\n- **International** – Support for 13 calendar systems used around the world, including Gregorian, Buddhist, Islamic, Persian, and more\n- **Time zone aware** – Dates and times can optionally include a time zone. All modifications follow time zone rules such as daylight saving time\n- **Accessible** – Each date and time unit is displayed as an individually focusable and editable segment\n- **Touch friendly** – Date segments are editable using an easy to use numeric keypad, and all interactions are accessible using touch-based screen readers\n- **Variants** – Supports different visual styles including 'primary' and 'ghost' variants\n\n## Usage\n\n```jsx\nimport { DateField } from \"../../utils\";\n\n<DateField label=\"Event Date\" />;\n```\n\n### Basic Usage\n\nThe most basic usage of DateField requires only an aria-label or a visible label.\n\n<Canvas of={stories.Basic} />\n\n```jsx\n<DateField aria-label=\"Event Date\" />\n```\n\n### With Label\n\nYou can add a visible label to the DateField.\n\n<Canvas of={stories.WithLabel} />\n\n```jsx\n<DateField label=\"Event Date\" />\n```\n\n### Default Value\n\nYou can set a default date value using the `defaultValue` prop. The component supports various date formats through the `@internationalized/date` package.\n\n<Canvas of={stories.DefaultValue} />\n\n```jsx\nimport { parseDate } from \"@internationalized/date\";\n\nconst date = parseDate(\"2022-11-07\");\n\n<DateField label=\"Event Date\" defaultValue={date} />;\n```\n\n### Controlled Component\n\nFor controlled usage, use the `value` and `onChange` props.\n\n<Canvas of={stories.Controlled} />\n\n```jsx\n<DateField\n  label=\"Event Date\"\n  value={date}\n  onChange={(value) => console.log(value)}\n/>\n```\n\n### Min and Max Values\n\nYou can restrict the date range using `minValue` and `maxValue` props.\n\n<Canvas of={stories.WithMinAndMaxValue} />\n\n```jsx\nimport { CalendarDate } from \"@internationalized/date\";\n\n<DateField\n  aria-label=\"Event Date\"\n  minValue={new CalendarDate(2022, 1, 1)}\n  maxValue={new CalendarDate(2022, 12, 31)}\n  defaultValue={new CalendarDate(2022, 6, 15)}\n/>;\n```\n\n### Granularity\n\nYou can customize which date and time segments to display using the `granularity` prop.\n\n<Canvas of={stories.DifferentGranularity} />\n\n```jsx\nimport { parseAbsoluteToLocal } from \"@internationalized/date\";\n\n// Show only date segments (year, month, day)\n<DateField label=\"Date\" granularity=\"day\" />\n\n// Show date and time with seconds\n<DateField\n  label=\"Date with Time\"\n  defaultValue={parseAbsoluteToLocal(\"2021-04-07T18:45:22Z\")}\n  granularity=\"second\"\n/>\n```\n\n### Placeholder Value\n\nYou can set a placeholder value that appears when no value is set.\n\n<Canvas of={stories.PlaceholderValue} />\n\n```jsx\nimport { CalendarDate } from \"@internationalized/date\";\n\n<DateField\n  label=\"Event Date\"\n  placeholderValue={new CalendarDate(2022, 1, 1)}\n/>;\n```\n\n### Visual Variants\n\nThe DateField supports different visual styles.\n\n<Canvas of={stories.GhostVariant} />\n\n```jsx\n<DateField label=\"Event Date\" variant=\"ghost\" />\n```\n\n### Label Position\n\nThe label can be positioned at the top (default) or start of the field.\n\n<Canvas of={stories.WithLabelAtStart} />\n\n```jsx\n<DateField label=\"Event Date\" description=\"Description\" labelPosition=\"start\" />\n```\n\n### States\n\n#### Disabled State\n\n<Canvas of={stories.Disabled} />\n\n```jsx\n<DateField\n  label=\"Event Date\"\n  isDisabled\n  defaultValue={date}\n  description=\"Description\"\n/>\n```\n\n#### Read Only\n\n<Canvas of={stories.ReadOnly} />\n\n```jsx\n<DateField label=\"Event Date\" isReadOnly defaultValue={date} />\n```\n\n#### Validation States\n\nThe DateField supports error and warning states with associated messages.\n\n<Canvas of={stories.WithErrorMessage} />\n<Canvas of={stories.WithWarningMessage} />\n\n```jsx\n<DateField\n  label=\"Event Date\"\n  validationState=\"error\"\n  errorMessage=\"Error message\"\n/>\n\n<DateField\n  label=\"Event Date\"\n  validationState=\"warning\"\n  warningMessage=\"Warning message\"\n/>\n```\n\n### International Calendars\n\nDateField supports various calendar systems used around the world. The calendar system is automatically determined based on the user's locale.\n\n```jsx\n<I18nProvider locale=\"th-TH\">\n  <DateField label=\"Date\" defaultValue={date} />\n</I18nProvider>\n\n<I18nProvider locale=\"ar-SA\">\n  <DateField label=\"Date\" defaultValue={date} />\n</I18nProvider>\n```\n\n### Keyboard Interaction\n\n| Key               | Function                                 |\n| ----------------- | ---------------------------------------- |\n| `ArrowLeft/Right` | Navigate between date segments           |\n| `ArrowUp/Down`    | Increment/decrement the selected segment |\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "DateFormat": "import { Meta, Controls, Primary } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./DateFormat.stories\";\nimport { DateFormat } from \"./DateFormat\";\nimport { I18nProvider } from \"react-aria\";\nimport { DocPreview } from \"~storybook/DocPreview\";\n\n<Meta of={stories} />\n\n# DateFormat\n\n`DateFormat` is a component that formats a date string into a localized date. It is built on top of [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat).\n\n## Usage\n\n```jsx\nimport { DateFormat } from \"../../utils\";\n\nconst date = \"2020-01-01T00:00:00.000Z\";\n\nexport default () => <DateFormat date={date} />;\n```\n\nThe above example will render the date in the default locale of the browser.\n\n<DocPreview>\n  <DateFormat date={new Date(\"2020-01-01T00:00:00.000Z\")} />\n</DocPreview>\n\nYou can override the default locale by using `I18nProvider`.\n\n```jsx\nimport { I18nProvider } from \"../../utils\";\n\nconst date = \"2020-01-01T00:00:00.000Z\";\n\nexport default () => (\n  <I18nProvider locale=\"es\">\n    <DateFormat date={date} />\n  </I18nProvider>\n);\n```\n\nThe above example will render the date in Español.\n\n<DocPreview>\n  <I18nProvider locale=\"es\">\n    <DateFormat date={new Date(\"2020-01-01T00:00:00.000Z\")} />\n  </I18nProvider>\n</DocPreview>\n\n## Time Format\n\nYou can also format the time portion of the date.\n\n```jsx\nimport { DateFormat } from \"../../utils\";\n\nconst date = \"2020-01-01T00:00:00.000Z\";\n\nexport default () => <DateFormat date={date} timeStyle={\"full\"} />;\n```\n\n<DocPreview>\n  <DateFormat date={new Date(\"2020-01-01T00:00:00.000Z\")} timeStyle={\"full\"} />\n</DocPreview>\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "DeviceProvider": "import { Meta, Controls, Primary } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./DeviceProvider.stories\";\n\n<Meta of={stories} />\n\n# DeviceProvider\n\nThe DeviceProvider component provides device information and responsive design capabilities to your application. It detects and exposes the current device type (mobile, tablet, desktop), allowing components to adapt their behavior and appearance based on the user's device. It\nautomatically applies the correct breakpoints to sprinkles.\n\n## Usage\n\n```jsx\nimport { DeviceProvider } from \"../../utils\";\nimport { YourApp } from \"./YourApp\";\n\nfunction App() {\n  return (\n    <DeviceProvider>\n      <YourApp />\n    </DeviceProvider>\n  );\n}\n```\n\n### Accessing Device Context\n\nYou can access the device information in your components using the `useDevice` hook:\n\n```jsx\nimport { useDevice } from \"../../utils\";\n\nfunction ResponsiveComponent() {\n  const device = useDevice();\n\n  return (\n    <div>\n      <p>Current device: {device}</p>\n      {device === \"mobile\" && <MobileView />}\n      {device === \"tablet\" && <TabletView />}\n      {device === \"desktop\" && <DesktopView />}\n    </div>\n  );\n}\n```\n\n### Custom Breakpoints\n\nYou 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.\n\n```jsx\nimport { DeviceProvider } from \"../../utils\";\n\nfunction App() {\n  return (\n    <DeviceProvider\n      breakpoints={{\n        mobile: 0, // Base value for mobile devices\n        tablet: 768, // Minimum width for tablet devices\n        desktop: 1280, // Minimum width for desktop devices\n      }}\n    >\n      {/* Your app */}\n    </DeviceProvider>\n  );\n}\n```\n\nThe device type is determined as follows:\n\n- **Mobile**: Width is less than the tablet breakpoint\n- **Tablet**: Width is greater than or equal to the tablet breakpoint but less than the desktop breakpoint\n- **Desktop**: Width is greater than or equal to the desktop breakpoint\n\n#### Default Breakpoints\n\nIf no custom breakpoints are provided, the following default values are used from `@baseline-ui/tokens`:\n\n| Breakpoint | Default Value (px) | Description                       |\n| ---------- | ------------------ | --------------------------------- |\n| `mobile`   | 0                  | Base value for mobile devices     |\n| `tablet`   | 768                | Minimum width for tablet devices  |\n| `desktop`  | 1280               | Minimum width for desktop devices |\n\n## Return Value\n\nThe `useDevice` hook returns a string indicating the current device type:\n\n| Value       | Description                                                                                         |\n| ----------- | --------------------------------------------------------------------------------------------------- |\n| `\"mobile\"`  | Screen width is less than the tablet breakpoint                                                     |\n| `\"tablet\"`  | Screen width is greater than or equal to the tablet breakpoint but less than the desktop breakpoint |\n| `\"desktop\"` | Screen width is greater than or equal to the desktop breakpoint                                     |\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "Dialog": "import { Meta, Controls, Primary } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./Dialog.stories\";\n\n<Meta of={stories} />\n\n# Dialog\n\nThe `Dialog` component is used to display content in a modal dialog.\n\n<Primary />\n\n## Features\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## Usage\n\n```jsx\nimport {\n  Dialog,\n  Modal,\n  ModalTrigger,\n  ModalContent,\n  ModalClose,\n  DialogTitle,\n} from \"../../utils\";\n\n<Modal>\n  <ModalTrigger>\n    <ActionButton label=\"Open Dialog\" />\n  </ModalTrigger>\n  <ModalContent>\n    <Dialog>\n      <DialogTitle>\n        <h3>Title</h3>\n      </DialogTitle>\n      <ModalClose>\n        <ActionButton label=\"Close Modal\" />\n      </ModalClose>\n    </Dialog>\n  </ModalContent>\n</Modal>;\n```\n\n### Variants\n\nThe `Dialog` component has two variants: `primary` and `ghost`\n\n- [Primary](/story/core-overlays-dialog--basic)\n- [Ghost](/story/core-overlays-dialog--ghost)\n\n### Focus Trap\n\nBy default, the `Dialog` component traps focus within the dialog. This means that when the dialog is open, focus is contained within the dialog. This prevents the user from tabbing outside the dialog.\n\n#### Keyboard Interaction\n\n| Key            | Function                                                                                                                            |\n| -------------- | ----------------------------------------------------------------------------------------------------------------------------------- |\n| <kbd>Esc</kbd> | Close the dialog                                                                                                                    |\n| <kbd>Tab</kbd> | Move focus to the next focusable element in the dialog. If focus is on the last element, move focus to the first focusable element. |\n\n## Playground\n\n<Primary />\n\n## `Dialog` Props\n\n<Controls />\n",
-  "Drawer": "import { Meta, Controls, Primary, Canvas } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./Drawer.stories\";\n\n<Meta of={stories} />\n\n# Drawer\n\nThe `Drawer` component is a panel that slides in from the edge of the screen. It is used to display additional content or actions that are not part of the main view.\nIt is a dialog that is used in combination with `Modal` to display additional content or actions that are not part of the main view.\n\n## Features\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## Usage\n\n```jsx\nimport { Drawer } from \"../../utils\";\n\n<Drawer title=\"Drawer Title\" onCloseRequest={() => {}}>\n  <div>Drawer Content</div>\n</Drawer>;\n```\n\n### Background\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\n<Canvas of={stories.Basic} />\n\n### Action Buttons\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\n<Canvas of={stories.WithAction} />\n\n### Dialog Types\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```\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "Editor": "import {\n  Meta,\n  Controls,\n  Primary,\n  Canvas,\n  Unstyled,\n} from \"@storybook/addon-docs/blocks\";\nimport { InlineAlert } from \"../InlineAlert\";\nimport * as stories from \"./Editor.stories\";\n\n<Meta of={stories} />\n\n# Editor\n\nThe `Editor` component is a rich/plain text editor that allows users to create and edit content.\n\n<Canvas of={stories.Basic} />\n\n## Features\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\n## Usage\n\n```jsx\nimport { Editor } from \"../../utils\";\n\nfunction MyComponent() {\n  return <Editor />;\n}\n```\n\n### Variants\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<Canvas of={stories.PlainTextMinimal} />\n\nIn the example above, the `variant` prop is used to set the variant to `minimal`. This removes the toolbar and only allows plain text editing.\nIn the right example, the `isInline` prop is used to set the editor to be inline.\n\n### Rich Text Editing\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<Canvas of={stories.RichText} />\n\n### Placeholder\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\n### Controlled\n\nThe `Editor` component can be controlled by using the `value` and `onChange` props. This allows you to control the value of the editor from the parent component.\n\n<Canvas of={stories.PlainTextControlled} />\n\n<Unstyled>\n  <InlineAlert\n    title=\"Rich Text\"\n    description=\"Controlled state only works when `enableRichText` is set to `false`. In case rich text is enabled, `value` acts just like `defaultValue`\"\n    arrangement=\"multi\"\n  />\n</Unstyled>\n\n### Disabled\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\n#### Disabled Plain Text Minimal\n\n<Canvas of={stories.PlainTextMinimalDisabled} />\n\n#### Disabled Plain Text\n\n<Canvas of={stories.PlainTextDisabled} />\n\n#### Disabled Rich Text\n\n<Canvas of={stories.RichTextDisabled} />\n\n#### Mentions\n\nThe `Editor` component supports mentions. You can enable mentions by passing `mentionableUsers` prop. This prop should be an array of objects with `id` and `name` properties. The `id` should be unique for each user and the `name` should be the name of the user.\nThe mentions feature only works when `enableRichText` is set to `true`.\n\n<Canvas of={stories.RichTextMentions} />\n\n#### Custom Footer Buttons\n\nYou can add custom buttons to the footer by using the `footerButtons` prop. This prop should be an array of objects with `aria-label`, `icon` and `onPress` properties.\n\n<Canvas of={stories.WithCustomFooterButtons} />\n\n#### Keyboard Interaction\n\n| Key Combination | Description    |\n| --------------- | -------------- |\n| `Ctrl + B`      | Bold           |\n| `Ctrl + I`      | Italic         |\n| `Ctrl + U`      | Underline      |\n| `F10`           | Focus Toolbar  |\n| `Tab`           | Focus Next     |\n| `Shift + Tab`   | Focus Previous |\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "FrameProvider": "import { Meta, ArgTypes } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./FrameProvider.stories\";\n\n<Meta of={stories} />\n\n# FrameProvider\n\nThe `FrameProvider` component is used to contain and position overlays (like modals and dialogs) within a specific container element. This is particularly useful when you need to constrain overlays within a specific area of your application.\n\n## Features\n\n- Controls where overlays are rendered in the DOM\n- Supports containing overlays within a specific container element\n- Automatically handles container resizing\n- Provides configurable overlay containment behavior\n- Supports nested containers\n- Handles portal container configuration\n- Automatically adjusts for mobile devices\n\n## Usage\n\n```tsx\nimport { FrameProvider } from \"../../utils\";\n\n<FrameProvider>\n  <YourContent />\n</FrameProvider>;\n```\n\n### Container Configuration\n\nYou can specify a container element to constrain overlays within:\n\n```tsx\nfunction App() {\n  const [container, setContainer] = useState(null);\n  return (\n    <FrameProvider container={container} shouldContainOverlays=\"always\">\n      <div ref={setContainer}>\n        <YourContent />\n      </div>\n    </FrameProvider>\n  );\n}\n```\n\nYou can find the demo for this [here](/story/core-utilities-frameprovider--basic).\n\n### Overlay Containment Behavior\n\nThe `shouldContainOverlays` prop controls how overlays are contained:\n\n- `\"auto\"` (default) - Contains overlays on desktop, but not on mobile\n- `\"always\"` - Always contains overlays within the container\n- `\"never\"` - Never contains overlays within the container\n\nYou can find the demo for this [here](/story/core-utilities-frameprovider--never-contained).\n\n### Nested Containers\n\nFrameProvider supports nesting, allowing you to create hierarchical overlay containment:\n\n```tsx\n<FrameProvider shouldContainOverlays=\"always\">\n  <div>\n    <OuterContent />\n    <FrameProvider shouldContainOverlays=\"always\">\n      <div>\n        <InnerContent />\n      </div>\n    </FrameProvider>\n  </div>\n</FrameProvider>\n```\n\nYou can find the demo for this [here](/story/core-utilities-frameprovider--nested-containers).\n\n### Custom Portal Container\n\nYou can specify where overlays should be rendered in the DOM using the `portalContainer` prop:\n\n```tsx\n<FrameProvider portalContainer={document.querySelector(\"#custom-portal\")}>\n  <YourContent />\n</FrameProvider>\n```\n\nYou can find the demo for this [here](/story/core-utilities-frameprovider--custom-portal-container).\n\n## Important Notes\n\n1. The container element must have a non-static position (e.g., `relative`, `absolute`, or `fixed`) when `shouldContainOverlays` is enabled.\n2. The container must have non-zero dimensions for proper overlay positioning.\n3. On mobile devices, overlays are typically rendered at the document body level for better user experience.\n\n## Props\n\n<ArgTypes />\n",
-  "FreehandCanvas": "import { Meta, Controls, Primary, Canvas } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./FreehandCanvas.stories\";\n\n<Meta of={stories} />\n\n# FreehandCanvas\n\nThe `FreehandCanvas` component is a canvas that allows the user to draw on it with their mouse or pointer.\n\n<Canvas of={stories.Basic} story=\"inline\" />\n\n## Features\n\n- Draw on the canvas with your mouse or pointer\n- Undo and redo your drawings via keyboard shortcuts\n- Clear the canvas via keyboard shortcut (or button)\n\n## Usage\n\n```jsx\nimport { FreehandCanvas } from \"@baseline-ui/core\";\n\n<FreehandCanvas />;\n```\n\n### Events\n\nYou can listen for events on the canvas by passing an `onChange` prop. The `onChange` prop is a function that receives the points that have been drawn on the canvas.\nYou can also use `onChaneEnd` to listen for the end of a drawing. This is useful if you want to save the drawing to a database or something similar.\n\n```jsx\nimport { FreehandCanvas } from \"@baseline-ui/core\";\n\nconst handleChange = (points) => {\n  console.log(points);\n};\n\nconst handleChangeEnd = (points) => {\n  console.log(points);\n};\n\n<FreehandCanvas onChange={handleChange} onChangeEnd={handleChangeEnd} />;\n```\n\n### Default Value\n\nYou can render the canvas with a default value by passing a `defaultValue` prop.\n\n<Canvas of={stories.DefaultValue} />\n\n### History\n\nBy default, the component supports undo and redo via keyboard shortcuts. You can disable this behavior by passing a `enableHistory` prop with a value of `false`.\n\n### Keyboard Interaction\n\n| Key                    | Action |\n| ---------------------- | ------ |\n| `Ctrl` + `Z`           | Undo   |\n| `Ctrl` + `Shift` + `Z` | Redo   |\n| `Delete`               | Clear  |\n\n## Props\n\n<Primary />\n<Controls />\n```\n",
-  "GridList": "import { Meta, Controls, Primary, Canvas } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./GridList.stories\";\n\n<Meta of={stories} />\n\n# GridList\n\nA `GridList` is an implementation of list component with interactive children. It displays data in a single column or row, and allows users to navigate through the list with arrow keys.\n\n<Canvas of={stories.Basic} />\n\n## Features\n\n- **Item Selection**: Single or multiple selections with optional checkboxes.\n- **Interactive Children**: Supports buttons, checkboxes, and menus within list items.\n- **Actions**: Item actions like navigation via click or key press.\n- **Keyboard Navigation**: Arrow keys, page up/down, home/end support. Navigate to interactive child elements with directional keys.\n- **Touch Friendly**: Adapted for touch devices.\n- **Accessibility**: ARIA grid pattern and selection announcements via ARIA live region.\n\n## Usage\n\n```jsx\nimport { GridList, Checkbox, Text } from \"../../utils\";\n\nconst GridListItem = (\n  { textValue },\n  { rowProps, isDisabled, gridCellProps, checkBoxProps },\n  ref,\n) => {\n  const { focusProps, isFocusVisible } = useFocusRing();\n\n  return (\n    <li {...rowProps} ref={ref}>\n      <div {...gridCellProps}>\n        {checkBoxProps ? (\n          <Checkbox {...checkBoxProps} onChange={console.log} />\n        ) : null}\n\n        <Text type=\"label\" size=\"sm\">\n          {textValue}\n        </Text>\n      </div>\n    </li>\n  );\n};\n\n<GridList\n  items={[\n    { id: \"1\", label: \"Item 1\" },\n    { id: \"2\", label: \"Item 2\" },\n    { id: \"3\", label: \"Item 3\" },\n  ]}\n  renderGridItem={GridListItem}\n/>;\n```\n\n### Single Selection\n\nTypically, `GridList` doesn't support row selection unless enabled with the `selectionMode` prop. You can set initial selected rows using `defaultSelectedKeys`, ensuring they match the row's key prop.\n\n<Canvas of={stories.WithSingleSelection} />\n\n### Multiple Selection\n\nTo enable multiple selection, set the `selectionMode` prop to `multiple`.\n\n<Canvas of={stories.WithMultipleSelection} />\n\n### Disabled Rows\n\nYou can disable rows by setting the `disabledKeys` prop with an array of keys.\n\n<Canvas of={stories.DisabledRows} />\n\n### Selection Behavior\n\nBy default, `GridList` employs the \"toggle\" selection behavior, akin to a checkbox group: clicking, tapping, or pressing Space/Enter toggles selection for the focused row, while arrow keys move focus without altering selection. This mode is often used with checkboxes in rows.\n\nSetting `selectionBehavior` to \"replace\" changes this: clicking a row selects only that row, and arrow keys move both focus and selection. Modifier keys (Ctrl, Cmd, Shift) enable multiple selections. On touch devices, selection remains as \"toggle\" due to the absence of modifier keys.\n\n#### Keyboard Interaction\n\n| Key         | Description                                                                |\n| ----------- | -------------------------------------------------------------------------- |\n| Arrow Up    | Move focus up one row.                                                     |\n| Arrow Down  | Move focus down one row.                                                   |\n| Arrow Left  | Move focus to the next focusable child element within the current row.     |\n| Arrow Right | Move focus to the previous focusable child element within the current row. |\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "Group": "import { Meta, Controls, Primary } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./Group.stories\";\n\n<Meta of={stories} />\n\n# Group\n\nA `Group` component is used to group related elements together. It represents a set of related UI\ncontrols in a single visual group.\n\n## Usage\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\n## Accessibility\n\n### Labelling\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\n### Role\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#### Keyboard Interaction\n\n## Props\n\n<Primary />\n<Controls />\n```\n",
-  "I18nProvider": "import { Meta, Controls, Primary } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./I18nProvider.stories\";\n\n<Meta of={stories} />\n\n# I18nProvider\n\n`I18nProvider` allows you to override the browser/system setting's default locale with a locale defined by your application (e.g. application setting). Wrapping your entire application in the provider will cause all child elements to receive the new locale information through `useLocale`.\n\n## Usage\n\nThis example shows how to use `I18nProvider` to override the default locale.\n\n```jsx\nimport { I18nProvider } from \"@storybook/core\";\n\nexport const App = () => (\n  <I18nProvider locale=\"en\">\n    <App />\n  </I18nProvider>\n);\n```\n\nThe `App` component will receive the new locale through `useLocale`.\n\n```jsx\n// App.js\nimport { useLocale } from \"@storybook/core\";\n\nconst App = () => {\n  const locale = useLocale();\n\n  return <div>Current locale: {locale}</div>;\n};\n```\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "ImageDropZone": "import { Meta, Controls, Primary, Canvas } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./ImageDropZone.stories\";\n\n<Meta of={stories} />\n\n# ImageDropZone\n\n`ImageDropZone` is a component that allows users to drag and drop images into a drop zone and upload images from a user's device.\n\n<Canvas of={stories.Basic} withToolbar={false} />\n\n## Features\n\n- Automatic handling of Keyboard focus management and cross browser normalization\n- Labeling support for screen readers (aria-describedby)\n- Provides drag and drop image functionality into the drop zone.\n- Ability to upload images from a user's device using the file picker.\n- Ability to preview images before uploading them.\n- Support to remove images from the drop zone\n- Ability to paste a copied image into the drop zone\n\n## Usage\n\n```jsx\nimport { ImageDropZone } from \"../../utils\";\n\n<ImageDropZone\n  buttonLabel=\"Upload\"\n  onValueChange={(files) => {\n    console.log(files);\n  }}\n/>;\n```\n\n### Default Image\n\nThe `ImageDropZone` component can be initialized with a default image by passing in the `defaultImageSrc` prop. This prop accepts a string value that represents the image source.\n\n<Canvas of={stories.WithDefaultImage} />\n\n```jsx\n<ImageDropZone\n  aria-label=\"Image Uploader\"\n  defaultImageSrc=\"/img.png\"\n  onValueChange={(files) => {\n    console.log(files);\n  }}\n/>\n```\n\n### Controlled\n\nYou can control the `ImageDropZone` component by passing in the `imageSrc` prop. This prop accepts a string value that represents the image source.\nIf you pass this, the `ImageDropZone` component will render the image in the drop zone and will not allow the user to upload any other images.\n\n<Canvas of={stories.Controlled} />\n\n```jsx\n<ImageDropZone\n  aria-label=\"Image Uploader\"\n  imageSrc=\"/img.png\"\n  onValueChange={(files) => {\n    console.log(files);\n  }}\n/>\n```\n\n### Disabled\n\nThe `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.\n\n<Canvas of={stories.Disabled} />\n\n```jsx\n<ImageDropZone\n  aria-label=\"Image Uploader\"\n  isDisabled={true}\n  onValueChange={(files) => {\n    console.log(files);\n  }}\n/>\n```\n\n### CSS Selectors\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-loaded]        | Whether the file has been loaded                                  |\n| [data-drop-target]   | Whether the component is currently a drop target.                 |\n\n#### Keyboard Interaction\n\n| Key           | Function                                      |\n| ------------- | --------------------------------------------- |\n| `Tab`         | Moves focus to the next focusable element     |\n| `Shift + Tab` | Moves focus to the previous focusable element |\n| `Enter`       | Opens the file picker to select an image      |\n| `Space`       | Opens the file picker to select an image      |\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "ImageGallery": "import { Meta, Controls, Primary, Canvas } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./ImageGallery.stories\";\n\n<Meta of={stories} />\n\n# ImageGallery\n\nThe `ImageGallery` component is used to display a collection of images in a gallery format. This user-friendly feature offers a smooth interaction experience through mouse, touch, and keyboard abilities. While images are loading, the ImageGallery component also includes a fade-in effect which adds fluidity to the user's visual experience.\n\n<Primary />\n\n## Features\n\n- An interactive, feature-rich display platform for image content\n- Mouse, touch, and keyboard interaction support\n- Smooth image fade-in effect during load\n- Built-in support for rearranging the order of images\n- Single and multiple selection modes for images\n\n## Usage\n\n```jsx\nimport { ImageGallery } from \"../../utils\";\n\nexport const items = Array.from({ length: 10 }, (_, i) => {\n  const index = i + 1;\n\n  return {\n    id: index.toString(),\n    src: `/gallery/${index}.jpg`,\n    alt: `Image ${index}`,\n    label: index.toString(),\n  };\n});\n\n<ImageGallery defaultItems={items} />;\n```\n\n### Reordering\n\nThe 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.\n\nYou can enable reordering by setting the `enableReorder` prop to `true`.\n\n<Canvas of={stories.WithReordering} />\n\n### Selection Modes\n\nDepending 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.\n\n#### Single Selection\n\nYou can enable single selection mode by setting the `selectionMode` prop to `single`. In this mode, only one image can be selected at a time.\n\n<Canvas of={stories.WithSingleSelection} />\n\n#### Multiple Selection\n\nYou can enable multiple selection mode by setting the `selectionMode` prop to `multiple`. In this mode, multiple images can be selected at once.\n\n<Canvas of={stories.WithMultipleSelection} />\n\n### Deletion\n\nYou can enable deletion by passing a function to the `onDelete` prop. This function will be called when the user deletes an image. The function receives the ids of the images to be deleted as an argument.\n\n<Canvas of={stories.WithDeletion} />\n\n### ImageWidth\n\nYou can provide a custom size for the images by passing a number to the `imageWidth` prop.\n\n<Canvas of={stories.WithCustomSize} />\n\n## Controlled\n\nYou can use the `items` prop to control the gallery. This is useful when you need to manage the state of the gallery externally.\n\n<Canvas of={stories.WithControlledList} />\n\n## Long Labels\n\nThe `ImageGallery` component optimizes long labels for touch and non-touch devices.\n\n- On touch devices, the labels are not truncated and the tooltip is not shown.\n- On non-touch devices, the labels are truncated and the tooltip is shown when the user hovers over the image. If the user is using a keyboard, the tooltip will be shown when the user focuses on the image.\n\n<Canvas of={stories.WithLongLabels} />\n\n#### Keyboard Interaction\n\n| Key             | Description                                   |\n| --------------- | --------------------------------------------- |\n| `ArrowLeft`     | Navigate to previous                          |\n| `ArrowRight`    | Navigate to next                              |\n| `ArrowUp`       | Navigate to the image above the current image |\n| `ArrowDown`     | Navigate to the image below the current image |\n| `Space`         | Select the current image                      |\n| `Shift + Space` | Add current image to Selected Images          |\n| `Enter`         | Select the current image for reorder          |\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "InlineAlert": "import { Meta, Controls, Primary, Canvas } from \"@storybook/addon-docs/blocks\";\nimport { DocPreview } from \"~storybook/DocPreview\";\nimport { InlineAlert } from \"./InlineAlert\";\nimport * as stories from \"./InlineAlert.stories\";\n\n<Meta of={stories} />\n\n# InlineAlert\n\nThe `InlineAlert` component is used to display a short message to the user in a non-obtrusive way. It displays non-modal messages and can be used to provide feedback messages, warnings, or errors.\n\n<Primary />\n\n## Features\n\n- Exposed to assistive technology as an alert using `role=\"alert\"`.\n- Supports mouse, keyboard, and touch interactions.\n\n## Usage\n\n```jsx\nimport { InlineAlert } from \"../../utils\";\n\n<InlineAlert variant=\"success\" title=\"Title\" description=\"Description\" />;\n```\n\n### Variants\n\nThe `InlineAlert` component supports the following variants: `success`, `warning`, `error`, `info`.\n\n<DocPreview style={{ flexDirection: \"column\" }}>\n  <InlineAlert\n    variant=\"success\"\n    title=\"Success\"\n    description=\"This is a success alert\"\n  />\n  <InlineAlert\n    variant=\"warning\"\n    title=\"Warning\"\n    description=\"This is a warning alert\"\n  />\n  <InlineAlert\n    variant=\"error\"\n    title=\"Error\"\n    description=\"This is an error alert\"\n  />\n  <InlineAlert\n    variant=\"info\"\n    title=\"Info\"\n    description=\"This is an info alert\"\n  />\n</DocPreview>\n\n### Arrangements\n\nThe `InlineAlert` component supports the following arrangements: `single`, `multi` and `compact`\n\n<DocPreview style={{ flexDirection: \"column\" }}>\n  <InlineAlert\n    variant=\"success\"\n    title=\"Alert title\"\n    description=\"Alert Description\"\n    arrangement={\"single\"}\n    onClose={() => {}}\n  />\n  <InlineAlert\n    variant=\"success\"\n    title=\"Alert title\"\n    description=\"Alert Description\"\n    arrangement={\"multi\"}\n    onClose={() => {}}\n  />\n  <InlineAlert\n    variant=\"success\"\n    title=\"Alert title\"\n    description=\"Alert Description\"\n    arrangement={\"compact\"}\n    onClose={() => {}}\n  />\n</DocPreview>\n\n```jsx\n<InlineAlert\n  variant=\"success\"\n  title=\"Alert title\"\n  description=\"Alert Description\"\n  arrangement={\"single\"}\n  onClose={() => {}}\n/>\n<InlineAlert\n  variant=\"success\"\n  title=\"Alert title\"\n  description=\"Alert Description\"\n  arrangement={\"multi\"}\n  onClose={() => {}}\n/>\n<InlineAlert\n  variant=\"success\"\n  title=\"Alert title\"\n  description=\"Alert Description\"\n  arrangement={\"compact\"}\n  onClose={() => {}}\n/>\n```\n\n### Action Button\n\nYou can add an action button to the alert by passing a `actionLabel={} ` prop. You should also pass an `onAction` prop to handle the press event.\n\n<DocPreview>\n  <InlineAlert\n    variant=\"success\"\n    title=\"Alert title\"\n    description=\"Alert Description\"\n    actionLabel=\"Action\"\n    onAction={() => {}}\n  />\n</DocPreview>\n\n```jsx\n<InlineAlert\n  variant=\"success\"\n  title=\"Alert title\"\n  description=\"Alert Description\"\n  actionLabel=\"Action\"\n  onAction={() => {}}\n/>\n```\n\n### Dismiss Button\n\nYou can add a dismiss button to the alert by passing a `onClose` prop.\n\n<DocPreview>\n  <InlineAlert\n    variant=\"success\"\n    title=\"Alert title\"\n    description=\"Alert Description\"\n    actionLabel=\"Action\"\n    onAction={() => {}}\n    onClose={() => {}}\n  />\n</DocPreview>\n\n```jsx\n<InlineAlert\n  variant=\"success\"\n  title=\"Alert title\"\n  description=\"Alert Description\"\n  actionLabel=\"Action\"\n  onAction={() => {}}\n  onClose={() => {}}\n/>\n```\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "InlineToolbar": "import {\n  Meta,\n  Controls,\n  Primary,\n  ArgTypes,\n} from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./InlineToolbar.stories\";\n\n<Meta of={stories} />\n\n# InlineToolbar\n\nThe `InlineToolbar` component is used to display a toolbar of inline formatting options. It automatically detects the current selection and opens in the correct position.\n\n## Features\n\n- Automatically detects the current selection and opens in the correct position\n- Supports keyboard navigation\n- The toolbar is exposed to screen readers as a toolbar\n\n## Usage\n\n```jsx\nimport { InlineToolbar } from \"../../utils\";\n\nconst items = [\n  {\n    id: \"item-1\",\n    label: \"Item 1\",\n  },\n  {\n    id: \"delete\",\n    icon: BinIcon,\n    \"aria-label\": \"Delete\",\n  },\n];\n\n<InlineToolbar items={items}>\n  Select the text and scroll to see the inline toolbar in the correct position.\n</InlineToolbar>;\n```\n\n## Props\n\n<ArgTypes />\n",
-  "Link": "import { Meta, Primary, Controls, Canvas } from \"@storybook/addon-docs/blocks\";\nimport { DocPreview } from \"~storybook/DocPreview\";\nimport * as stories from \"./Link.stories\";\nimport { Link } from \"./Link\";\n\n<Meta of={stories} />\n\n# Link\n\nA `Link` is a component that allows you to navigate to a different page or section of the current page.\n\n<Canvas of={stories.Basic} withToolbar={false} />\n\n## Usage\n\n```jsx\nimport { Link } from \"../../utils\";\n\n<Link href=\"https://www.nutrient.io/\">Nutrient</Link>;\n```\n\n### Sizes\n\nThe `Link` component comes in three sizes: `small`, `medium`, and `large`.\n\n<DocPreview style={{ alignItems: \"end\" }}>\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</DocPreview>\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\n### Variants\n\nThe `Link` component comes in two variants: `default` and `inline`.\n\n<DocPreview style={{ alignItems: \"end\" }}>\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</DocPreview>\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\n### Disabled\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<DocPreview>\n  <Link href=\"https://www.nutrient.io/sdk/\" isDisabled>\n    Disabled link\n  </Link>\n</DocPreview>\n\n```jsx\nimport { Link } from \"../../utils\";\n\n<Link href=\"https://www.nutrient.io/sdk/\" isDisabled>\n  Disabled link\n</Link>;\n```\n\n### Client handling\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<DocPreview>\n  <Link onPress={() => alert(\"Link clicked\")} elementType=\"span\">\n    Click me to see an alert\n  </Link>\n</DocPreview>\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\n## Accessibility\n\nThe `Link` component is rendered as an `<a>` element, so it’s 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### Keyboard interactions\n\n| Key   | Function            |\n| ----- | ------------------- |\n| Enter | Activates the link. |\n\n## Props\n\n<Primary />\n<Controls />\n```\n",
-  "ListBox": "import { Meta, Controls, Primary } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./ListBox.stories\";\n\n<Meta of={stories} />\n\n# ListBox\n\n## Usage\n\n## Accessibility\n\n#### Keyboard Interaction\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "Markdown": "import { Meta, Controls, Primary } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./Markdown.stories\";\n\n<Meta of={stories} />\n\n# Markdown\n\nThis component is used to render markdown content as HTML. It supports [GFM](https://github.github.com/gfm/).\n\n## Usage\n\n```jsx\nimport { Markdown } from \"@storybook/addon-docs/blocks\";\n\nexport const MyComponent = () => {\n  const markdown = `\n# Hello, world!\n\nThis is will be rendered as HTML.\n`;\n\n  return <Markdown>{markdown}</Markdown>;\n};\n```\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "Menu": "import { Canvas, Controls, Meta, Primary } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./Menu.stories\";\n\n<Meta of={stories} />\n\n# Menu\n\nThe `Menu` component is an interactive widget designed for navigating between different parts of an application or website. This component is built with accessibility standards in mind, complying with the Web Content Accessibility Guidelines (WCAG).\n\n<Canvas of={stories.Basic} withToolbar={false} />\n\n## Features\n\n1. ARIA compliant: Ensures the `Menu` component is accessible to users with disabilities.\n2. Selection options: The component can be configured to allow single, multiple, or no selection.\n3. Disabled items support: Certain menu items can be disabled, preventing user interaction.\n4. Sections support: Related items can be grouped into sections for better organization and navigation.\n5. Keyboard navigation: Users can navigate through the menu using their keyboard, including arrow keys, home/end, and page up/down.\n6. Auto-scroll: The menu automatically scrolls as the user navigates through it with their keyboard.\n7. Keyboard menu opening: The menu can be opened using the keyboard, and automatically focuses on the first or last item.\n8. Typeahead: Users can quickly navigate to a menu item by typing the first few letters of the item's label.\n9. Virtualized scrolling: For long lists, performance is improved by only rendering the visible items.\n\n## Usage\n\n```jsx\nimport { ActionButton } from \"../../utils\";\nimport { Menu } from \"@storybook/addon-docs/blocks\";\n\nconst items = [\n  {\n    label: \"Cut\",\n    id: \"cut\",\n    keyboardShortcut: \"⌘X\",\n  },\n];\n\n<Menu items={items}>\n  <ActionButton label=\"Label\" />\n</Menu>;\n```\n\n### Selection\n\nThe `Menu` component can be configured to allow single, multiple, or no selection. The default is no selection. To allow single selection, set the `selectionMode` prop to `single`. To allow multiple selection, set the `selectionMode` prop to `multiple`.\nUse `defaultSelectedKeys` to provide a default set of selected items (uncontrolled) and `selectedKeys` to set the selected items (controlled).\nThe value of the selected keys must match the `id` prop of the items.\n\n#### Single Selection\n\n<Canvas of={stories.SingleSelection} withToolbar={false} />\n\n#### Multiple Selection\n\n<Canvas of={stories.MultipleSelection} withToolbar={false} />\n\n### Disabled Items\n\nYou can disable items in the menu by setting the `disabledKeys` prop to an array of item IDs. The value of the disabled keys must match the `id` property of the items.\nDisabled items are not focusable or keyboard navigable, and do not trigger `onAction` or `onSelectionChange`.\n\n<Canvas of={stories.WithDisabledKeys} withToolbar={false} />\n\n### Sections\n\nMenu supports sections with separators and headings in order to group options. You have to make sure you pass them in `items` prop.\n\n```jsx\nconst items = [\n  {\n    children: [\n      { id: \"cut\", keyboardShortcut: \"⌘X\", label: \"Cut\" },\n      { id: \"copy\", keyboardShortcut: \"⌘C\", label: \"Copy\" },\n      { id: \"paste\", keyboardShortcut: \"⌘V\", label: \"Paste\" },\n    ],\n    id: \"edit\",\n    title: \"Edit\",\n    type: \"section\",\n  },\n  // ... other sections\n];\n```\n\n<Canvas of={stories.WithSections} withToolbar={false} />\n\n### Controlled vs Uncontrolled\n\nThe `Menu` component can be controlled or uncontrolled. When uncontrolled, the component manages its own state internally. When controlled, the state is managed by the parent component. To control the component, set the `selectedKeys` prop to an array of item IDs. The value of the selected keys must match the `id` prop of the items.\n\n<Canvas of={stories.SingleSelection} withToolbar={false} />\n\n### Controlled open state\n\nThe `Menu` component can be controlled or uncontrolled. When uncontrolled, the component manages its own state internally. When controlled, the state is managed by the parent component. To control the component, set the `isOpen` prop to a boolean value.\n\n## Playground\n\n<Primary />\n<Controls />\n",
-  "MessageFormat": "import { Meta, Controls, Primary } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./MessageFormat.stories\";\n\n<Meta of={stories} />\n\n# MessageFormat\n\n`MessageFormat` is a component for formatting messages. This is built on top of [react-intl](https://formatjs.io/docs/react-intl/).\n\n## Usage\n\n```jsx\nimport { MessageFormat, I18nProvider } from \"../../utils\";\n\nconst messages = {\n  en: {\n    hello: \"Hello {name}!\",\n  },\n  fr: {\n    hello: \"Bonjour {name}!\",\n  },\n};\n\nconst App = () => (\n  <I18nProvider locale=\"en\" messages={messages}>\n    <MessageFormat id=\"hello\" values={{ name: \"World\" }} />\n  </I18nProvider>\n);\n```\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "Modal": "import {\n  Meta,\n  Controls,\n  Primary,\n  Canvas,\n  ArgTypes,\n} from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./Modal.stories\";\nimport * as modalContentStories from \"./ModalContent.stories\";\n\n<Meta of={stories} />\n\n# Modal\n\nThe `Modal` component is used to display content in a layer above the rest of the page.\n\n<Canvas of={stories.Basic} withToolbar={false} />\n\n## Features\n\n- The content outside the modal is hidden from screen readers.\n- The modal can optionally be closed by clicking outside the modal or by pressing the <kbd>Esc</kbd> key.\n- Focus is trapped within the modal when it is open. It is automatically returned to the element that triggered the modal when it is closed.\n- Scrolling of the page is disabled when the modal is open.\n\n## Usage\n\n```jsx\nimport {\n  Dialog,\n  Modal,\n  ModalTrigger,\n  ModalContent,\n  ModalClose,\n  DialogTitle,\n} from \"../../utils\";\n\n<Modal>\n  <ModalTrigger>\n    <ActionButton label=\"Open Dialog\" />\n  </ModalTrigger>\n  <ModalContent>\n    <Dialog>\n      <DialogTitle>\n        <h3>Title</h3>\n      </DialogTitle>\n      <ModalClose>\n        <ActionButton label=\"Close Modal\" />\n      </ModalClose>\n    </Dialog>\n  </ModalContent>\n</Modal>;\n```\n\n### Sizes\n\nThe `ModalContent` component supports three sizes: `sm`, `md`, and `lg`. The default size is `md`. The size defines the maximum width of the dialog.\n\n### Close Button\n\nYou can add a close button to the dialog by adding a `ModalClose` component to the `ModalContent` component.\n\n#### Keyboard Interaction\n\n| Key            | Function         |\n| -------------- | ---------------- |\n| <kbd>Esc</kbd> | Close the dialog |\n\n## Props\n\n<Primary />\n<Controls />\n\n## `ModalContent` Props\n\n<ArgTypes of={modalContentStories} />\n",
-  "NumberFormat": "import { Meta, Controls, Primary } from \"@storybook/addon-docs/blocks\";\nimport { Text } from \"../Text\";\nimport * as stories from \"./NumberFormat.stories\";\nimport { NumberFormat } from \"./NumberFormat\";\nimport { I18nProvider } from \"react-aria\";\nimport { DocPreview } from \"~storybook/DocPreview\";\n\n<Meta of={stories} />\n\n# NumberFormat\n\n`NumberFormat` provides localized number formatting for the current locale. It automatically updates when the locale changes, and handles caching of the number formatter for performance.\nIt is a wrapper around the [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) API.\n\n## Usage\n\n```jsx\nimport { NumberFormat } from \"../../utils\";\n\nconst MyComponent = () => (\n  <NumberFormat value={1000} style: \"currency\" currency: \"USD\" />\n);\n```\n\nThe above example will render the number in the US locale:\n\n<DocPreview>\n  <Text>\n    <NumberFormat value={1000} style=\"currency\" currency=\"USD\" />\n  </Text>\n</DocPreview>\n\nYou can also use `I18nProvider` to override the current locale:\n\n```jsx\nimport { I18nProvider } from \"../../utils\";\n\nconst MyComponent = () => (\n  <I18nProvider locale=\"fr\">\n    <NumberFormat value={1000} style=\"currency\" currency=\"USD\" />\n  </I18nProvider>\n);\n```\n\n<DocPreview>\n  <I18nProvider locale=\"fr\">\n    <Text>\n      <NumberFormat value={1000} style=\"currency\" currency=\"USD\" />\n    </Text>\n  </I18nProvider>\n</DocPreview>\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "NumberInput": "import { Meta, Controls, Primary, Canvas } from \"@storybook/addon-docs/blocks\";\nimport { DocPreview } from \"~storybook/DocPreview\";\nimport { NumberInput } from \"./NumberInput\";\nimport * as stories from \"./NumberInput.stories\";\n\n<Meta of={stories} />\n\n# NumberInput\n\nThe `NumberInput` component is used to capture numerical input from a user. It is built on top of the native `input` element.\n\n<Canvas of={stories.Basic} withToolbar={false} />\n\n## Features\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## Usage\n\n```jsx\nimport { NumberInput } from \"../../utils\";\n\n<NumberInput placeholder=\"Placeholder\" />;\n```\n\n### Variants\n\nThe `NumberInput` component supports the following variants: `primary` and `ghost`.\n\n<DocPreview style={{ flexDirection: \"column\", maxWidth: 400 }}>\n  <NumberInput placeholder=\"Placeholder\" variant=\"primary\" />\n  <NumberInput placeholder=\"Placeholder\" variant=\"ghost\" />\n</DocPreview>\n\n```jsx\n<NumberInput placeholder=\"Placeholder\" variant=\"primary\" />\n<NumberInput placeholder=\"Placeholder\" variant=\"ghost\" />\n```\n\n### Readonly\n\nThe `NumberInput` component supports the `isReadOnly` prop to make the input read-only.\n\n<Canvas of={stories.ReadOnly} />\n\n```jsx\n<NumberInput placeholder=\"Placeholder\" isReadOnly value={5} />\n```\n\n### Disabled\n\nThe `NumberInput` component supports the `isDisabled` prop to disable the input.\n\n<Canvas of={stories.Disabled} />\n\n```jsx\n<NumberInput placeholder=\"Placeholder\" isDisabled value={5} />\n```\n\n### Controlled\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<Canvas of={stories.Controlled} />\n\n```jsx\n<NumberInput placeholder=\"Placeholder\" value={5} onChange={console.log} />\n```\n\n### Min and Max Values\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<Canvas of={stories.WithMinAndMax} />\n\n```jsx\n<NumberInput placeholder=\"Placeholder\" minValue={0} maxValue={10} />\n```\n\n### Step Value\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<Canvas of={stories.WithCustomStep} />\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\n### Error Message\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<Canvas of={stories.WithErrorAndErrorMessage} />\n\n```jsx\n<NumberInput placeholder=\"Placeholder\" errorMessage=\"Error Message\" isInvalid />\n```\n\n### Internationalisation\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## CSS Selectors\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### Keyboard Interaction\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## Props\n\n<Primary />\n<Controls />\n```\n",
-  "Pagination": "import { Canvas, Controls, Meta, Primary } from \"@storybook/addon-docs/blocks\";\nimport { DocPreview } from \"~storybook/DocPreview\";\nimport * as stories from \"./Pagination.stories\";\nimport { Pagination } from \"./Pagination\";\n\n<Meta of={stories} />\n\n# Pagination\n\nThe `Pagination` component is used to navigate through a series of pages. It is\nbuilt on top of a number input component. It supports keyboard navigation and\nincrement/decrement by clicking the up/down arrows.\n\n<Canvas of={stories.Primary} withToolbar={false} />\n\n## Features\n\n- Support for internationalized number formatting and parsing including decimals, percentages, currency values, and units\n- Automatically detects the numbering system used and supports parsing numbers not in the default numbering system for the locale\n- Validates keyboard entry as the user types so that only valid numeric input according to the locale and numbering system is accepted\n- Automatically selects an appropriate software keyboard for mobile according to the current platform and allowed values\n- Supports rounding to a configurable number of fraction digits\n- Support for clamping the value between a configurable minimum and maximum, and snapping to a step value\n- Supports pressing and holding the stepper buttons to continuously increment or decrement\n- Supports using the scroll wheel to increment and decrement the value\n- Exposed to assistive technology as a text field with a custom localized role description using ARIA\n- Follows the [spinbutton](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/) ARIA pattern\n- Works around bugs in VoiceOver with the spinbutton role\n- Uses an ARIA live region to ensure that value changes are announced\n- Support for description and error message help text linked to the input via ARIA\n\n## Usage\n\n```jsx\nimport { Pagination } from \"../../utils\";\n\n<Pagination maxValue={10} />;\n```\n\n### Uncontrolled\n\nThe `Pagination` component can be used uncontrolled by omitting the `value` prop. You can\nprovide an initial value with the `defaultValue` prop.\n\n<DocPreview>\n  <Pagination maxValue={10} defaultValue={5} />\n</DocPreview>\n\n```jsx\nimport { Pagination } from \"../../utils\";\n\n<Pagination maxValue={10} defaultValue={5} />;\n```\n\n### Controlled\n\nThe `Pagination` component can be used controlled by providing a `value` prop.\n\n<DocPreview>\n  <Pagination maxValue={10} value={5} />\n</DocPreview>\n\n```jsx\nimport { Pagination } from \"../../utils\";\n\n<Pagination maxValue={10} value={5} />;\n```\n\n### Variants\n\nThe `Pagination` component supports two variants: `floating` and `pinned`. The\n`floating` variant is the default.\n\n<DocPreview>\n  <Pagination maxValue={10} defaultValue={5} />\n  <Pagination maxValue={10} defaultValue={5} variant=\"pinned\" />\n</DocPreview>\n\n```jsx\nimport { Pagination } from \"../../utils\";\n\n<Pagination maxValue={10} defaultValue={5} variant=\"floating\" />;\n<Pagination maxValue={10} defaultValue={5} variant=\"pinned\" />;\n```\n\n### Readonly\n\nThe `Pagination` component can be set to read-only by setting the `isReadOnly` prop.\n\n<Canvas of={stories.ReadOnly} />\n\n### Disabled\n\nThe `Pagination` component can be disabled by setting the `isDisabled` prop.\n\n<Canvas of={stories.Disabled} />\n\n### Sizes\n\nThe `Pagination` component supports four sizes: `xs`, `sm`, `md`, and `lg`. The\n`md` size is the default.\n\n<DocPreview>\n  <Pagination maxValue={10} defaultValue={5} size=\"xs\" />\n  <Pagination maxValue={10} defaultValue={5} size=\"sm\" />\n  <Pagination maxValue={10} defaultValue={5} />\n  <Pagination maxValue={10} defaultValue={5} size=\"lg\" />\n</DocPreview>\n\n```jsx\nimport { Pagination } from \"../../utils\";\n\n<Pagination maxValue={10} defaultValue={5} size=\"xs\" />;\n<Pagination maxValue={10} defaultValue={5} size=\"sm\" />;\n<Pagination maxValue={10} defaultValue={5} />;\n<Pagination maxValue={10} defaultValue={5} size=\"lg\" />;\n```\n\n### Localization\n\nThe `Pagination` component supports localization of the input value. Change the\nlocale in the toolbar to see the input value change.\n\n<DocPreview>\n  <Pagination maxValue={100000} defaultValue={50000} />\n</DocPreview>\n\n## CSS Selectors\n\n| Selector             | Description                                          |\n| -------------------- | ---------------------------------------------------- |\n| [data-focus-visible] | Styles the component when focused using the keyboard |\n| [data-focused]       | Styles the component when focused                    |\n| [data-hovered]       | Styles the component when hovered                    |\n\n### Keyboard Interaction\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## Props\n\n<Primary />\n<Controls />\n",
-  "Panel": "import {\n  Meta,\n  Controls,\n  Primary,\n  ArgTypes,\n  Canvas,\n} from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./Panel.stories\";\n\n<Meta of={stories} />\n\n# Panel\n\n`Panel` provides components for building resizable horizontal or vertical layouts e.g. a resizable sidebar panel\n\n<Canvas of={stories.Basic} withToolbar={false} />\n\n## Features\n\n- Supports nested layouts\n- Handles overflow content\n- Supports collapsible content\n- Keyboard controllable\n- Supports RTL\n\n## Usage\n\n```jsx\nimport { PanelGroup, Panel, PanelResizeHandle } from \"../../utils\";\n\n<PanelGroup direction=\"horizontal\">\n  <Panel defaultSize={25}>\n    <Sidebar />\n  </Panel>\n  <PanelResizeHandle />\n  <Panel>\n    <Main />\n  </Panel>\n</PanelGroup>;\n```\n\n### Controlled example\n\n`Panel` and `PanelGroup` provide imperative APIs via `ref` for setting the sizes and change handlers for reading them:\n\n```jsx\nimport { PanelGroup, Panel, PanelResizeHandle } from \"../../utils\";\nimport type { ImperativePanelGroupHandle, ImperativePanelHandle } from \"../../utils\";\n\nconst [layout, setLayout] = useState<number[]>([30, 70]);\nconst panelGroupRef = useRef<ImperativePanelGroupHandle>(null);\nconst sidebarPanelRef = useRef<ImperativePanelHandle>(null);\nconst mainPanelRef = useRef<ImperativePanelHandle>(null);\n\nuseEffect(() => {\n  if (panelGroupRef.current) {\n    panelGroupRef.current.setLayout?.([35, 65]);\n  }\n}, []);\n\n<>\n  <NumberInput\n    label=\"Sidebar\"\n    value={layout[0]}\n    onChange={(value) => sidebarPanelRef.current?.resize?.(value)}\n  />\n  <NumberInput\n    label=\"Main\"\n    value={layout[1]}\n    onChange={(value) => sidebarPanelRef.current?.resize?.(value)}\n  />\n  <PanelGroup\n    onLayout={(layout) => {\n      setLayout(layout);\n    }}\n    ref={panelGroupRef}\n  >\n    <Panel minSize={20} defaultSize={layout[0]} ref={sidebarPanelRef}>\n      <Text>Sidebar</Text>\n    </Panel>\n    <PanelResizeHandle />\n    <Panel minSize={50} defaultSize={layout[1]} ref={mainPanelRef}>\n      <Text>Main</Text>\n    </Panel>\n  </PanelGroup>\n</>\n```\n\n### Collapsible example\n\n```jsx\n<PanelGroup>\n  <Panel collapsible={true} collapsedSize={20} minSize={10}>\n    <Sidebar />\n  </Panel>\n  <PanelResizeHandle />\n  <Panel>\n    <Main />\n  </Panel>\n</PanelGroup>\n```\n\n### Persistent layouts\n\nLayouts can be automatically persisted when an `autoSaveId` is passed:\n\n```jsx\n<PanelGroup autoSaveId=\"dashboard\">...</PanelGroup>\n```\n\n### Conditional rendering\n\nPanels can be conditionally rendered but an `order` prop should be provided to ensure the rendering happens in correct order:\n\n```jsx\n<PanelGroup>\n  {showSidebarPanel && (\n    <Panel order={1}>\n      <Sidebar />\n    </Panel>\n  )}\n  <PanelResizeHandle />\n  <Panel order={2}>\n    <Main />\n  </Panel>\n</PanelGroup>\n```\n\n## Playground\n\n<Primary />\n\n### `PanelGroup` Props\n\n<ArgTypes of={stories.Basic} />\n",
-  "PointPicker": "import {\n  Meta,\n  Controls,\n  Primary,\n  ArgTypes,\n  Canvas,\n} from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./PointPicker.stories\";\nimport * as contentStories from \"./PointPickerContent/PointPickerContent.stories\";\nimport * as displayStories from \"./PointPickerDisplay/PointPickerDisplay.stories\";\n\n<Meta of={stories} />\n\n# PointPicker\n\nA component that allows users to pick precise points on a surface with a magnifier for enhanced accuracy. The PointPicker consists of three main parts: the main container, content area, and display area with optional magnifier.\n\n## Usage\n\n```tsx\nimport {\n  PointPicker,\n  PointPickerContent,\n  PointPickerDisplay,\n} from \"@baseline-ui/core\";\n\nfunction MyComponent() {\n  return (\n    <PointPicker>\n      <PointPickerContent>\n        <YourContent />\n      </PointPickerContent>\n      <PointPickerDisplay />\n    </PointPicker>\n  );\n}\n```\n\n### Features\n\n- Precise point selection with coordinate tracking with mouse and keyboard\n- Optional magnifier for enhanced accuracy with floating or pinned display\n- Grid lines for better visual alignment\n- Supports mouse, touch, and keyboard navigation\n- Customizable display variants (floating or pinned)\n- Rich content support in the magnifier\n\n## Component Structure\n\nThe PointPicker is composed of three main components that work together:\n\n1. **PointPicker**: The main container component that manages the state and context for the point picking functionality.\n2. **PointPickerContent**: The interactive area where users can select points. It handles mouse/touch events and coordinate tracking.\n3. **PointPickerDisplay**: The visual feedback component that shows the selected point and optional magnifier.\n\n### Disabled\n\nThe PointPicker can be disabled by setting the `isDisabled` prop to `true` on the `PointPicker` component. This will prevent the PointPicker from being interactive and will not show the magnifier. This\ncase is same as not having `PointPicker` component in the first place.\n\nThe demo can be found [here](/story/core-content-pointpicker--disabled)\n\n### Hide Grid Lines\n\nThe `showGridLines` prop in `PointPickerContent` can be used to hide the grid lines on the `PointPickerContent` component. The default value is `true`.\n\n```tsx\n<PointPicker>\n  <PointPickerContent showGridLines={false}>\n    <YourContent />\n  </PointPickerContent>\n  <PointPickerDisplay />\n</PointPicker>\n```\n\nThe demo can be found [here](/story/core-content-pointpicker-pointpickercontent--without-grid-lines)\n\n### Floating Display\n\nThe `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.\n\n```tsx\n<PointPicker>\n  <PointPickerContent />\n  <PointPickerDisplay variant=\"floating\" />\n</PointPicker>\n```\n\nThe demo can be found [here](/story/core-content-pointpicker-pointpickerdisplay--with-floating-display)\n\n### Custom scale\n\nThe `scale` prop in `PointPickerDisplay` can be used to customize the scale of the magnifier. The default value is `1`.\n\n```tsx\n<PointPicker>\n  <PointPickerContent />\n  <PointPickerDisplay scale={2} />\n</PointPicker>\n```\n\nThe demo can be found [here](/story/core-content-pointpicker-pointpickerdisplay--with-custom-scale)\n\n### Keyboard Interaction\n\n| Key                    | Action                               |\n| ---------------------- | ------------------------------------ |\n| `Tab`                  | Focus the PointPicker                |\n| `Enter`                | Select the point                     |\n| `ArrowRight`           | Move the point right                 |\n| `ArrowLeft`            | Move the point left                  |\n| `ArrowUp`              | Move the point up                    |\n| `ArrowDown`            | Move the point down                  |\n| `Shift` + `ArrowRight` | Move the point right by 10           |\n| `Shift` + `ArrowLeft`  | Move the point left by 10            |\n| `Shift` + `ArrowUp`    | Move the point up by 10              |\n| `Shift` + `ArrowDown`  | Move the point down by 10            |\n| `Home`                 | Move the point to the extreme left   |\n| `End`                  | Move the point to the extreme right  |\n| `PageUp`               | Move the point to the extreme top    |\n| `PageDown`             | Move the point to the extreme bottom |\n\n## PointPicker Props\n\n<ArgTypes of={stories} />\n\n### PointPickerContent Props\n\n<ArgTypes of={contentStories} />\n\n### PointPickerDisplay Props\n\n<ArgTypes of={displayStories} />\n",
-  "Popover": "import {\n  ArgsTable,\n  ArgTypes,\n  Controls,\n  Meta,\n  Primary,\n} from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./Popover.stories\";\nimport * as popoverContentStories from \"./PopoverContent.stories\";\nimport * as popoverTriggerStories from \"./PopoverTrigger.stories\";\n\n<Meta of={stories} />\n\n# Popover\n\nThe `Popover` component is a versatile component that can be used to display additional content or actions in a floating overlay.\n\n## Features\n\n- The component is accessible via keyboard. Users can open, close, and navigate through the popover using keyboard keys such as `Tab`, `Enter`, `Escape`, and arrow keys.\n- When the popover is opened, the focus is moved to the content within the popover. When it is closed, the focus returns to the trigger element.\n- The component is properly labeled to provide context to assistive technologies. This is done using ARIA labels or visible text.\n- The popover is dismissible by clicking outside of it, pressing the Escape key, or through a close button within the popover.\n- It supports mouse, keyboard, and touch interactions.\n\n## Usage\n\n```jsx\nimport { Popover, PopoverTrigger, PopoverContent } from \"../../utils\";\n\n<Popover type=\"listbox\">\n  <PopoverTrigger>{/* Trigger component goes here */}</PopoverTrigger>\n  <PopoverContent>\n    {/* Content to be shown when popover is open goes here */}\n  </PopoverContent>\n</Popover>;\n```\n\n### Trigger\n\nThe `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`.\n\nIt 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.\n\n### Content\n\nThe `PopoverContent` component is used to wrap the content that will be shown when the popover is open. It can be any valid HTML element or component.\n\n### Arrow\n\nBy default, the popover doesn't have an arrow. If you want to add an arrow to the popover, you can pass `includeArrow` prop to the `PopoverContent` component. It will add an arrow to the popover pointing towards the trigger element.\n\n## Playground\n\n<Primary />\n\n### `Popover` Props\n\n<Controls />\n\n### `PopoverContent` Props\n\n<ArgTypes of={popoverContentStories} />\n\n### `PopoverTrigger` Props\n\n<ArgTypes of={popoverTriggerStories} />\n",
-  "PortalContainerProvider": "import { Meta } from \"@storybook/addon-docs/blocks\";\n\n<Meta title=\"Core/Utilities/PortalContainerProvider\" />\n\n# PortalContainerProvider\n\n`PortalContainerProvider` allows you to provide a custom overlay portal where all overlay components will be rendered. This is useful when you want to render overlays in a specific part of the DOM, for example when you encapsulate your application inside of a shadow DOM and wants to render all overlays inside of shadow root where they can access the defined styles without the need to redefine the CSS outside of the shadow root.\n\nProviding any overlay component with `portalContainer` will override the overlay portal value from the provider and render the component inside of the provided container.\n\n## Usage\n\nThis example shows how to use `PortalContainerProvider`.\n\n```jsx\nimport { PortalContainerProvider } from \"@storybook/core\";\n\nconst shadowPortalContainer = shadowRoot.querySelector(\n  `.shadow-portal-container`,\n);\n\nexport const App = () => (\n  <PortalContainerProvider portalContainer={shadowPortalContainer}>\n    <App />\n  </PortalContainerProvider>\n);\n```\n\nAll overlay components will be rendered inside the `shadowPortalContainer` without the need to repeatedly provide `portalContainer` for all overlays in the application.\n",
-  "Preview": "import { Meta, Controls, Primary, Canvas } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./Preview.stories\";\n\n<Meta of={stories} />\n\n# Preview\n\nThe `Preview` component is used to display a preview of a SVG, image or text. You can add action buttons to the preview to allow the user to interact with the preview.\n\n<Canvas of={stories.ImagePreview} withToolbar={false} />\n\n### Features\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## Usage\n\n```jsx\nimport { Preview } from \"@storybook/addon-docs/blocks\";\n\n<Preview imageSrc=\"/portrait.png\" />;\n```\n\n### Variants\n\nThe `Preview` component has two variants. The two variants only differ in styling. It can be controlled using the `isInline` prop.\n\n### Disabled\n\nThe `Preview` component can be disabled. When disabled, the preview is not interactive and the action buttons are not rendered.\n\n<Canvas of={stories.Disabled} />\n\n## CSS Selectors\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## Keyboard Interaction\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## Props\n\n<Primary />\n<Controls />\n```\n",
-  "ProgressBar": "import {\n  Canvas,\n  Controls,\n  Meta,\n  Primary,\n  Source,\n} from \"@storybook/addon-docs/blocks\";\nimport { DocPreview } from \"~storybook/DocPreview\";\nimport { ProgressBar } from \"./ProgressBar\";\nimport * as stories from \"./ProgressBar.stories\";\n\n<Meta of={stories} />\n\n# ProgressBar\n\nA progress bar is a visual indication of an extended computer process such as a file download, file transfer, or an application installation. In our implementation, the progress bar is a horizontal bar that fills from left to right as the process progresses.\n\n## Features\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## Usage\n\n```jsx\nimport { ProgressBar } from \"../../utils\";\n\n<ProgressBar aria-label=\"Progress\" value={50} />;\n```\n\n### Variants\n\nThe progress bar component has three variants: `active`, `success`, and `error`. The `active` variant is the default.\n\n<DocPreview>\n  <div\n    style={{\n      display: \"flex\",\n      flexDirection: \"column\",\n      justifyContent: \"center\",\n      width: 300,\n    }}\n  >\n    <ProgressBar label=\"Label\" value={50} />\n    <ProgressBar label=\"Label\" value={50} variant=\"success\" />\n    <ProgressBar label=\"Label\" value={50} variant=\"error\" />\n  </div>\n</DocPreview>\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\n### Custom Scale\n\nYou can customize the scale of the progress bar by passing the `minValue` and `maxValue` props.\n\n<Canvas of={stories.WithMinAndMaxValue} />\n<Source of={stories.WithMinAndMaxValue} />\n\n### Custom Formatter\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\n<Canvas of={stories.WithCustomNumberFormatter} />\n<Source of={stories.WithCustomNumberFormatter} />\n\n### Custom Value Label\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\".\n\n<Canvas of={stories.WithCustomValueLabel} />\n<Source of={stories.WithCustomValueLabel} />\n\n## Playground\n\n<Primary />\n<Controls />\n",
-  "ProgressSpinner": "import { Controls, Meta, Primary } from \"@storybook/addon-docs/blocks\";\nimport { DocPreview } from \"~storybook/DocPreview\";\nimport { ProgressBar } from \"../ProgressBar\";\nimport { ProgressSpinner } from \"./ProgressSpinner\";\nimport * as stories from \"./ProgressSpinner.stories\";\n\n<Meta of={stories} />\n\n# ProgressSpinner\n\nThe `ProgressSpinner` component is used to indicate that an operation is in progress.\n\n## Usage\n\n```jsx\nimport { ProgressSpinner } from \"../../utils\";\n\n<ProgressSpinner aria-label={\"Label\"} />;\n```\n\n### Variants\n\nThe `ProgressSpinner` component comes in four variants: `active`, `inactive`, `success` and `error`. The default variant is `active`.\n\n<DocPreview>\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</DocPreview>\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\n## Sizes\n\nThe `ProgressSpinner` component comes in two sizes: `sm` and `md`. The default size is `md`.\n\n<DocPreview>\n  <ProgressSpinner aria-label={\"Label\"} size={\"sm\"} />\n  <ProgressSpinner aria-label={\"Label\"} size={\"md\"} />\n</DocPreview>\n\n```jsx\nimport { ProgressSpinner } from \"../../utils\";\n\n<ProgressSpinner aria-label={\"Label\"} size={\"sm\"} />\n<ProgressSpinner aria-label={\"Label\"} size={\"md\"} />\n```\n\n### Label\n\nYou can provide a label to the `ProgressSpinner` component using the `label` prop.\n\n<DocPreview>\n  <ProgressSpinner aria-label={\"Label\"} label={\"Label\"} />\n  <ProgressSpinner aria-label={\"Label\"} label={\"Label\"} size={\"sm\"} />\n</DocPreview>\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```\n\n### Props\n\n<Primary />\n<Controls />\n",
-  "RadioGroup": "import { Meta, Controls, Primary, Canvas } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./RadioGroup.stories\";\n\n<Meta of={stories} />\n\n# RadioGroup\n\nThe `RadioGroup` component is used to select a single option from a list of mutually exclusive options. It is a wrapper around the native `input[type=\"radio\"]` element.\n\n<Canvas of={stories.Basic} withToolbar={false} />\n\n## Features\n\n- Exposed to assistive technologies via ARIA attributes.\n- Supports keyboard navigation.\n- Full support for browser autofill\n\n## Usage\n\n```jsx\nimport { RadioGroup } from \"../../utils\";\n\nconst items = [\n  { id: \"1\", label: \"Radio 1\", description: \"Radio 1 description\" },\n  { id: \"2\", label: \"Radio 2\", description: \"Radio 2 description\" },\n]\n\n<RadioGroup items={items} label={\"Radio Group\"} />\n```\n\n### Variants\n\nBy default, the `RadioGroup` renders a vertical list of radio options. You can render custom variants by passing the `renderOption` prop. You can check out few variants:\n\n- [Basic](/story/core-forms-radiogroup--basic)\n- [With Option Description](/story/core-forms-radiogroup--with-option-description)\n- [With Option Label At Start](/story/core-forms-radiogroup--with-option-label-at-start)\n\n### Default Value\n\nYou can set the default value of the `RadioGroup` by passing the `defaultValue` prop.\n\n<Canvas of={stories.DefaultValue} />\n\n### Controlled\n\nYou can control the value of the `RadioGroup` by passing the `value` and `onChange` props.\n\n<Canvas of={stories.Controlled} />\n\n### Disabled\n\nYou can disable the `RadioGroup` by passing the `isDisabled` prop. This will disable all of the options within the group.\n\n<Canvas of={stories.Disabled} />\n\n### Disabled Values\n\nYou can disable individual options within the `RadioGroup` by passing the `disabledValues` prop on the item.\n\n<Canvas of={stories.DisabledValues} />\n\n### ReadOnly\n\nThe isReadOnly prop makes the selection immutable. Unlike isDisabled, the RadioGroup remains focusable. See the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information.\n\n<Canvas of={stories.ReadOnly} />\n\n## CSS Selectors for Radio items\n\n| Selector             | Description                                                       |\n| -------------------- | ----------------------------------------------------------------- |\n| [data-disabled]      | Whether the component is disabled.                                |\n| [data-focused]       | Whether the component is focused, either via a mouse or keyboard. |\n| [data-hovered]       | Whether the component is currently hovered with a mouse.          |\n| [data-focus-visible] | Whether the component is keyboard focused.                        |\n| [data-selected]      | Whether the component is selected.                                |\n| [data-pressed]       | Whether the component is currently pressed with a mouse.          |\n| [data-read-only]     | Whether the component is read only.                               |\n\n#### Keyboard Interaction\n\n| Key         | Function                                          |\n| ----------- | ------------------------------------------------- |\n| Up Arrow    | Moves focus and selection to the previous option. |\n| Down Arrow  | Moves focus and selection to the next option.     |\n| Left Arrow  | Moves focus and selection to the previous option. |\n| Right Arrow | Moves focus and selection to the next option.     |\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "Reaction": "import { Meta, Primary, Controls, Canvas } from \"@storybook/addon-docs/blocks\";\nimport { DocPreview } from \"~storybook/DocPreview\";\nimport { Reaction } from \"./Reaction\";\nimport * as stories from \"./Reaction.stories\";\n\n<Meta of={stories} />\n\n# Reaction\n\nThe `Reaction` component is used to react to a post or comment. It is basically a checkbox input that can be used to add or remove a reaction.\n\n<Canvas of={stories.Basic} withToolbar={false} />\n\n## Features\n\n- It is exposed as a input checkbox via ARIA\n- It has mouse, keyboard, and touch support\n- It has keyboard focus management and cross browser normalization\n\n## Usage\n\nYou can use the `Reaction` component like this:\n\n```jsx\nimport { Reaction } from \"../../utils\";\n\n<Reaction count={10} aria-label=\"Label\" />;\n```\n\n### Controlled\n\nYou can set the `isSelected` prop to `true` to indicate that the reaction is selected.\n\n<DocPreview>\n  <Reaction count={10} isSelected aria-label=\"Label\" />\n</DocPreview>\n\n```jsx\nimport { Reaction } from \"../../utils\";\n\n<Reaction count={10} isSelected aria-label=\"Label\" />;\n```\n\n### Read Only\n\nYou can set the `isReadOnly` prop to `true` to indicate that the reaction is read only.\n\n<DocPreview>\n  <Reaction count={10} isReadOnly aria-label=\"Label\" />\n  <Reaction count={10} isReadOnly isSelected aria-label=\"Label\" />\n</DocPreview>\n\n```jsx\nimport { Reaction } from \"../../utils\";\n\n<Reaction count={10} isReadOnly aria-label=\"Label\" />;\n<Reaction count={10} isReadOnly isSelected aria-label=\"Label\" />;\n```\n\n### Disabled\n\nYou can set the `isDisabled` prop to `true` to indicate that the reaction is disabled.\n\n<DocPreview>\n  <Reaction count={10} isDisabled aria-label=\"Label\" />\n  <Reaction count={10} isDisabled isSelected aria-label=\"Label\" />\n</DocPreview>\n\n```jsx\nimport { Reaction } from \"../../utils\";\n\n<Reaction count={10} isDisabled aria-label=\"Label\" />;\n<Reaction count={10} isDisabled isSelected aria-label=\"Label\" />;\n```\n\n### Size\n\nYou have the option to set the size of the reaction. The default size is `small`.\n\n<DocPreview>\n  <Reaction count={10} size=\"small\" aria-label=\"Label\" />\n  <Reaction count={10} aria-label=\"Label\" />\n</DocPreview>\n\n```jsx\nimport { Reaction } from \"../../utils\";\n\n<Reaction count={10} size=\"small\" aria-label=\"Label\" />;\n<Reaction count={10} aria-label=\"Label\" />;\n```\n\n## CSS Selectors\n\n| Selector             | Description                                                    |\n| -------------------- | -------------------------------------------------------------- |\n| [data-selected]      | Whether the button is currently selected.                      |\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\n### Keyboard Interaction\n\n| Key     | Function             |\n| ------- | -------------------- |\n| `Space` | Toggles the reaction |\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "ScrollControlButton": "import { Meta, Controls, Primary, Canvas } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./ScrollControlButton.stories\";\n\n<Meta of={stories} />\n\n# ScrollControlButton\n\nThe `ScrollControlButton` component is used to create a button that can be used to scroll a container.\n\n<Primary of={stories} />\n\n## Features\n\n- Can be used to scroll to the bottom or top of a container\n- Exposed to assistive technologies via aria attributes\n- Can be hidden when the user is using a keyboard\n\n## Usage\n\n```jsx\nimport { ScrollControlButton } from \"../../utils\";\n\nfunction MyComponent() {\n  const ref = useRef(null);\n\n  return (\n    <>\n      <div\n        ref={ref}\n        className=\"scrollable-container\"\n        style={{ position: \"relative\", maxHeight: 200, overflow: \"auto\" }}\n      >\n        <div className=\"content\">\n          {Array.from({ length: 100 }, (_, i) => (\n            <div key={i}>Item {i}</div>\n          ))}\n        </div>\n      </div>\n      <div className=\"relative\">\n        <ScrollControlButton scrollRef={ref} label=\"Scroll to top\" />\n      </div>\n    </>\n  );\n}\n```\n\nIn 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:\n\n```jsx\nimport { ScrollControlButton } from \"../../utils\";\n\nfunction MyComponent() {\n  const ref = useRef(null);\n\n  return (\n    <>\n      <div\n        ref={ref}\n        className=\"scrollable-container\"\n        style={{\n          position: \"relative\",\n          maxHeight: 200,\n          overflow: \"auto\",\n          display: \"flex\",\n          flexDirection: \"column-reverse\",\n        }}\n      >\n        <div className=\"content\">\n          {Array.from({ length: 100 }, (_, i) => (\n            <div key={i}>Item {i}</div>\n          ))}\n        </div>\n      </div>\n      <div className=\"relative\">\n        <ScrollControlButton scrollRef={ref} label=\"Scroll to top\" />\n      </div>\n    </>\n  );\n}\n```\n\n## Hide for Keyboard Users\n\nThe `hideForKeyboard` prop can be used to hide the button when the user is using a keyboard. Keyboard\nusers can use the `Home` and `End` keys to scroll to the top and bottom of the container.\n\n## Disable Smooth Scrolling\n\nThe `smoothScroll` prop can be used to disable smooth scrolling.\n\n<Canvas of={stories.WithoutSmoothScroll} />\n\n#### Keyboard Interaction\n\n| Key     | Action            |\n| ------- | ----------------- |\n| `Enter` | Scrolls to bottom |\n| `Space` | Scrolls to bottom |\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "SearchInput": "import { Canvas, Controls, Meta, Primary } from \"@storybook/addon-docs/blocks\";\nimport { DocPreview } from \"~storybook/DocPreview\";\nimport * as stories from \"./SearchInput.stories\";\nimport { SearchInput } from \"./SearchInput\";\n\n<Meta of={stories} />\n\n# SearchInput\n\n`SearchInput` is a component that allows users to search for content.\n\n<Canvas of={stories.Basic} withToolbar={false} />\n\n## Features\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## Usage\n\n```jsx\nimport { SearchInput } from \"../../utils\";\n\n<SearchInput aria-label=\"Label\" />;\n```\n\n### Variants\n\nThe `SearchInput` component has two variants: `primary` and `ghost`.\n\n<DocPreview style={{ flexDirection: \"column\" }}>\n  <SearchInput aria-label=\"Label\" placeholder=\"Search\" variant=\"primary\" />\n  <SearchInput aria-label=\"Label\" placeholder=\"Search\" variant=\"ghost\" />\n</DocPreview>\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\n### Sizes\n\nThe `SearchInput` component has three sizes: `sm`, `md`, and `lg`. The default size is `md`.\n\n<DocPreview style={{ flexDirection: \"column\" }}>\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</DocPreview>\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\n### Disabled\n\nThe `SearchInput` component can be disabled by setting the `isDisabled` prop to `true`.\n\n<DocPreview>\n  <SearchInput aria-label=\"Label\" placeholder=\"Search\" isDisabled />\n</DocPreview>\n\n```jsx\nimport { SearchInput } from \"../../utils\";\n\n<SearchInput aria-label=\"Label\" placeholder=\"Search\" isDisabled />;\n```\n\n## CSS Selectors for Radio items\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### Keyboard Interactions\n\n| Key     | Function                 |\n| ------- | ------------------------ |\n| `Enter` | Submits the search query |\n| `Esc`   | Clears the search query  |\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "Select": "import {\n  Meta,\n  Controls,\n  Primary,\n  Canvas,\n  ArgTypes,\n} from \"@storybook/addon-docs/blocks\";\nimport React from \"react\";\nimport * as stories from \"./Select.stories\";\nimport * as multiselectStories from \"./MultiSelect.stories\";\nimport * as iconSelectStories from \"./IconSelect.stories\";\n\n<Meta of={stories} />\n\n# Select\n\nThe `Select` component is used to select one or more options from a list of options. It supports both single and multiple selection modes. It is a wrapper around the native `input` element.\n\n<Canvas of={stories.Basic} withToolbar={false} />\n\n## Features\n\n- Exposed to assistive technology as a button with a listbox popup using ARIA (combined with useListBox)\n- Support for selecting a single option or multiple options\n- Support for disabled options\n- Support for sections\n- Labeling support for accessibility\n- Support for description and error message help text linked to the input via ARIA\n- Support for mouse, touch, and keyboard interactions\n- Tab stop focus management\n- Keyboard support for opening the listbox using the arrow keys, including automatically focusing the first or last item accordingly\n- Browser autofill integration via a hidden native `<select>` element\n- Mobile screen reader listbox dismissal support\n- Autocomplete support with automatic search input when wrapped with `Autocomplete` component\n- Virtualization support for large lists when wrapped with `Virtualizer` component\n\n## Usage\n\n```jsx\nimport { Select } from \"../../utils\";\n\nexport const items = [\n  { id: \"ellipse\", icon: EllipseIcon, label: \"Ellipse\" },\n  { id: \"square\", icon: SquareIcon, label: \"Square\" },\n  { id: \"polygon\", icon: PolygonIcon, label: \"Polygon\" },\n];\n\n<Select items={items} aria-label=\"Choose Stroke Style\" />;\n```\n\n### Default Selected Item\n\nWe can set the default selected item by passing the `defaultSelectedKey` prop. This prop accepts a string value that matches the `id` of the item we want to be selected by default.\n\n<Canvas of={stories.WithDefaultSelectedItem} />\n\n```jsx\n<Select\n  items={items}\n  aria-label=\"Choose Stroke Style\"\n  defaultSelectedKey=\"square\"\n/>\n```\n\n### Disabled\n\nWe can disable the select by passing the `isDisabled` prop. This prop accepts a boolean value.\n\n<Canvas of={stories.WithDisabled} />\n\n```jsx\n<Select items={items} label=\"Label\" placeholder=\"Choose an item\" isDisabled />\n```\n\n### Disabled Items\n\nWe can disable items by passing the `disabledKeys` prop. This prop accepts an array of strings that match the `id` of the items we want to be disabled.\n\n<Canvas of={stories.WithDisabledItems} />\n\n```jsx\n<Select\n  items={items}\n  aria-label=\"Choose Stroke Style\"\n  disabledKeys={[\"square\", \"square-dashed\"]}\n/>\n```\n\n### Controlled\n\nWe can control the selected item by passing the `selectedKey` prop. This prop accepts a string value that matches the `id` of the item we want to be selected.\n\n<Canvas of={stories.Controlled} />\n\n```jsx\n<Select items={items} aria-label=\"Choose Stroke Style\" selectedKey=\"square\" />\n```\n\n### Controlled Open State\n\nWe can control the open state by passing the `isOpen` prop. This prop accepts a boolean value.\n\n<Canvas of={stories.WithControlledOpen} />\n\n```jsx\nfunction App() {\n  const [isOpen, setIsOpen] = React.useState(false);\n\n  return <Select {...args} isOpen={isOpen} onOpenChange={setIsOpen} />;\n}\n```\n\n### Sections\n\nWe can group items into sections by passing the `items` prop an array of objects that contain a `type` property with a value of `section`. The `children` property of the section object should be an array of options. The `id` property of the section object should be unique.\n\n<Canvas of={stories.WithSections} />\n\n```jsx\nconst itemsWithSections = [\n  {\n    id: \"solid\",\n    type: \"section\",\n    children: items,\n  },\n  {\n    id: \"dashed\",\n    type: \"section\",\n    children: [\n      {\n        id: \"ellipse-dashed\",\n        icon: EllipseDashedIcon,\n        label: \"Ellipse Dashed\",\n      },\n      {\n        id: \"square-dashed\",\n        icon: RectangleDashedIcon,\n        label: \"Square Dashed\",\n      },\n      {\n        id: \"polygon-dashed\",\n        icon: PolygonDashedIcon,\n        label: \"Polygon Dashed\",\n      },\n    ],\n  },\n];\n\n<Select items={itemsWithSections} label=\"Label\" />;\n```\n\n### Multiselect\n\nThe `Select` component supports selecting multiple options by setting the `selectionMode` prop to `\"multiple\"`. When in multiselect mode, selected items are displayed as removable tags in the button, the popover stays open after selection, and checkboxes are shown instead of checkmarks.\n\n<Canvas of={multiselectStories.Basic} withToolbar={false} />\n\n```jsx\n<Select\n  items={items}\n  aria-label=\"Choose Stroke Style\"\n  selectionMode=\"multiple\"\n/>\n```\n\n#### Default Selected Items\n\nWe can set default selected items by passing the `defaultValue` prop. This prop accepts an array of strings that match the `id` of the items we want to be selected by default.\n\n<Canvas of={multiselectStories.WithDefaultSelectedItem} />\n\n```jsx\n<Select\n  items={items}\n  aria-label=\"Choose Stroke Style\"\n  selectionMode=\"multiple\"\n  defaultValue={[\"square\", \"polygon\"]}\n/>\n```\n\n#### Controlled Multiselect\n\nWe can control the selected items by passing the `value` prop. This prop accepts an array of strings that match the `id` of the items we want to be selected.\n\n<Canvas of={multiselectStories.Controlled} />\n\n```jsx\nfunction App() {\n  const [selectedKeys, setSelectedKeys] = React.useState([\"square\"]);\n\n  return (\n    <Select\n      items={items}\n      aria-label=\"Choose Stroke Style\"\n      selectionMode=\"multiple\"\n      value={selectedKeys}\n      onChange={setSelectedKeys}\n    />\n  );\n}\n```\n\n#### Max Count\n\nWhen multiple items are selected, they are displayed as tags in the button. By default, up to 2 tags are shown before displaying a \"+X more\" indicator. You can customize this using the `maxCount` prop.\n\n```jsx\n<Select\n  items={items}\n  aria-label=\"Choose Stroke Style\"\n  selectionMode=\"multiple\"\n  maxCount={3}\n/>\n```\n\n#### Select All and Clear\n\nIn multiselect mode, the popover includes \"Select All\" and \"Clear\" action buttons at the bottom. These buttons allow users to quickly select all enabled items or clear all selections.\n\n<Canvas of={multiselectStories.WithDefaultOpen} />\n\n#### Removing Selected Items\n\nSelected items can be removed by clicking the X icon on their tags, or by using the \"Clear\" button in the popover.\n\n#### Multiselect Behavior\n\n- The popover stays open after selecting an item, allowing users to select multiple items without reopening\n- Checkboxes are shown next to each option instead of checkmarks\n- The `onChange` callback receives an array of selected keys instead of a single key\n- Default and controlled values use arrays instead of single string values\n\n### Autocomplete\n\nThe `Select` component supports autocomplete functionality when wrapped with the `Autocomplete` component from `@baseline-ui/core`. When autocomplete is enabled, a search input field is automatically displayed at the top of the popover, allowing users to filter options by typing.\n\nThe autocomplete feature is particularly useful for large lists of options, and works well when combined with the `Virtualizer` component for better performance.\n\n<Canvas of={stories.WithAutocomplete} />\n\n```jsx\nimport { useListData } from \"react-stately\";\nimport { useFilter } from \"react-aria\";\nimport {\n  Autocomplete,\n  Virtualizer,\n  VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS,\n  Select,\n} from \"@baseline-ui/core\";\n\nfunction SelectWithAutocomplete() {\n  const list = useListData({\n    initialItems: items, // Your items array\n  });\n  const { contains } = useFilter({ sensitivity: \"base\" });\n  const filter = (textValue, inputValue) => contains(textValue, inputValue);\n\n  return (\n    <Virtualizer {...VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.LIST_BOX}>\n      <Autocomplete filter={filter}>\n        <Select\n          items={list.items}\n          label=\"Choose an option\"\n          placeholder=\"Search and select...\"\n        />\n      </Autocomplete>\n    </Virtualizer>\n  );\n}\n```\n\n#### Autocomplete Features\n\n- **Automatic Search Input**: When wrapped with `Autocomplete`, a search input is automatically rendered at the top of the popover\n- **Filtering**: Options are filtered as the user types based on the `filter` function provided to `Autocomplete`\n- **Keyboard Focus**: The search input receives focus when the popover opens\n- **Works with Multiselect**: Autocomplete can be combined with multiselect mode (`selectionMode=\"multiple\"`)\n- **Virtualization Support**: Recommended to use with `Virtualizer` for optimal performance with large lists\n\n### Virtualization\n\nThe `Select` component supports virtualization through the `Virtualizer` component from `@baseline-ui/core`. Virtualization is essential for large lists of options (hundreds or thousands of items) as it only renders visible items to the DOM, significantly improving performance and reducing memory usage.\n\n#### Basic Virtualization\n\nTo use virtualization with `Select`, wrap it with the `Virtualizer` component:\n\n```jsx\nimport {\n  Virtualizer,\n  VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS,\n  Select,\n} from \"@baseline-ui/core\";\n\nfunction VirtualizedSelect() {\n  const largeItemsList = Array.from({ length: 1000 }, (_, i) => ({\n    id: i.toString(),\n    label: `Option ${i + 1}`,\n  }));\n\n  return (\n    <Virtualizer {...VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.LIST_BOX}>\n      <Select\n        items={largeItemsList}\n        label=\"Choose an option\"\n        placeholder=\"Select from large list...\"\n        maxHeight={300}\n      />\n    </Virtualizer>\n  );\n}\n```\n\n#### Virtualization with Autocomplete\n\nVirtualization works seamlessly with autocomplete. This combination is recommended for large, searchable lists:\n\n```jsx\nimport { useListData } from \"react-stately\";\nimport { useFilter } from \"react-aria\";\nimport {\n  Virtualizer,\n  Autocomplete,\n  VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS,\n  Select,\n} from \"@baseline-ui/core\";\n\nfunction VirtualizedSelectWithAutocomplete() {\n  const list = useListData({\n    initialItems: largeItemsList,\n  });\n  const { contains } = useFilter({ sensitivity: \"base\" });\n  const filter = (textValue, inputValue) => contains(textValue, inputValue);\n\n  return (\n    <Virtualizer {...VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.LIST_BOX}>\n      <Autocomplete filter={filter}>\n        <Select\n          items={list.items}\n          label=\"Search and select\"\n          placeholder=\"Type to search...\"\n          maxHeight={300}\n        />\n      </Autocomplete>\n    </Virtualizer>\n  );\n}\n```\n\n#### Virtualization Features\n\n- **Performance Optimization**: Only renders visible items to the DOM, dramatically improving performance for large lists\n- **Memory Efficiency**: Reduces memory usage by reusing DOM elements as users scroll\n- **Smooth Scrolling**: Maintains smooth scrolling performance even with thousands of items\n- **Accessibility**: The focused element persists in the DOM even when out of view, ensuring keyboard navigation always works\n- **Automatic Detection**: The Select component automatically detects when it's inside a Virtualizer and adjusts its styling accordingly\n- **Works with All Selection Modes**: Virtualization works with both single and multiple selection modes\n\n#### When to Use Virtualization\n\nUse virtualization when:\n\n- You have **100+ items** in your list\n- You're experiencing performance issues with large lists\n- You want to maintain smooth scrolling and interactions\n- You're combining with autocomplete for searchable large lists\n\nFor smaller lists (under 100 items), virtualization is optional and may not provide significant benefits.\n\n#### Virtualization Layout Options\n\nThe `VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.LIST_BOX` provides optimized defaults for Select components:\n\n- Row height: 36px (standard for list items)\n- Optimized for vertical scrolling\n\nFor custom layouts, you can configure the Virtualizer directly:\n\n```jsx\nimport { Virtualizer, ListLayout } from \"@baseline-ui/core\";\n\n<Virtualizer\n  layout={ListLayout}\n  layoutOptions={{\n    rowHeight: 40, // Custom row height\n  }}\n>\n  <Select items={items} />\n</Virtualizer>;\n```\n\n### Keyboard Interaction\n\n| Key         | Function                                                                             |\n| ----------- | ------------------------------------------------------------------------------------ |\n| `Space`     | Opens the listbox popup or toggles selection of the focused item in multiselect mode |\n| `Enter`     | Opens the listbox popup or selects the focused item if the popup is open             |\n| `Escape`    | Closes the listbox popup                                                             |\n| `ArrowDown` | Opens the listbox popup and focuses the first item if no item is focused             |\n| `ArrowUp`   | Opens the listbox popup and focuses the last item if no item is focused              |\n| `Home`      | focuses the first item                                                               |\n| `End`       | focuses the last item                                                                |\n\n**Note:** In multiselect mode (`selectionMode=\"multiple\"`), the `Space` key toggles selection of the focused item, and the popover remains open after selection.\n\n## Props\n\n<Primary />\n<Controls />\n\n# IconSelect\n\nThe `IconSelect` component is a wrapper around the `Select` component that allows you to render an icon next to the select input. This basically overrides the `renderTrigger` prop of the `Select` component to render an icon.\n\n```jsx\nimport { IconSelect } from \"../../utils\";\nimport { EllipseIcon } from \"@baseline-ui/icons/24\";\n\n<IconSelect\n  icon={EllipseIcon}\n  aria-label=\"Choose Stroke Style\"\n  items={items}\n/>;\n```\n\n### Disable Tooltip\n\nThe `IconSelect` component supports adding a tooltip to the trigger button which is enabled by default. The tooltip will be the same as the `aria-label` of the trigger button. If you want to disable the tooltip, you can set the `tooltipProps` prop to `{ isDisabled: true }`.\n\n<Canvas of={iconSelectStories.WithoutTooltip} />\n\n## `IconSelect` Props\n\n<ArgTypes of={iconSelectStories} />\n",
-  "Separator": "import { Meta, Controls, Primary } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./Separator.stories\";\nimport { DocPreview } from \"~storybook/DocPreview\";\nimport { Separator } from \"./Separator\";\n\n<Meta of={stories} />\n\n# Separator\n\nA separator is a horizontal or vertical line that separates content. It can be used to divide content into sections or to create a visual break between two elements.\n\n## Usage\n\n```jsx\nimport { Separator } from \"../../utils\";\n\n<Separator />;\n```\n\n### Horizontal\n\nBy default, the separator is horizontal.\n\n<DocPreview\n  style={{\n    flexDirection: \"column\",\n  }}\n>\n  <div>\n    Section 1\n    <Separator />\n    Section 2\n  </div>\n</DocPreview>\n\n```jsx\nimport { Separator } from \"../../utils\";\n\n<div>\n  Section 1\n  <Separator />\n  Section 2\n</div>;\n```\n\n### Vertical\n\nThe `orientation` prop can be used to change the orientation of the separator.\n\n<DocPreview\n  style={{\n    flexDirection: \"row\",\n    height: \"80px\",\n  }}\n>\n  Section 1\n  <Separator orientation=\"vertical\" variant=\"secondary\" />\n  Section 2\n</DocPreview>\n\n```jsx\nimport { Separator } from \"../../utils\";\n\n<div>\n  Section 1\n  <Separator orientation=\"vertical\" variant=\"secondary\" />\n  Section 2\n</div>;\n```\n\n## CSS Selectors\n\n| Selector           | Description                                                             |\n| ------------------ | ----------------------------------------------------------------------- |\n| [data-orientation] | The orientation of the separator. It can be `horizontal` or `vertical`. |\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "Slider": "import {\n  Meta,\n  ArgTypes,\n  Primary,\n  Canvas,\n  Controls,\n} from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./Slider.stories\";\nimport * as iconSliderStories from \"./IconSlider.stories\";\n\n<Meta of={stories} />\n\n# Slider\n\nA Slider is an input that allows users to quickly select a value from a range of values.\n\n<Canvas of={stories.Basic} withToolbar={false} />\n\n## Features\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 10x the step amount.\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 both the slider as a whole and individual thumbs\n- Internationalized number formatting as a percentage or value\n\n## Usage\n\nYou can use the Slider component in your code like this:\n\n```jsx\nimport { Slider } from \"../../utils\";\n\n<Slider\n  value={50}\n  minValue={0}\n  maxValue={100}\n  onChange={(value) => console.log(value)}\n/>;\n```\n\n### Step\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\n<Canvas of={stories.WithStep} withToolbar={false} />\n\n### Min and Max\n\nYou can set the `min` and `max` props to control the minimum and maximum allowed values. The default values are `0` and `100` respectively. The below example shows how to set the `min` prop to `-100` and the `max` prop to `100`.\n\n<Canvas of={stories.WithMinAndMax} withToolbar={false} />\n\n### Number Input\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\n<Canvas of={stories.WithLabelAndNumberInput} withToolbar={false} />\n\n### Read Only\n\nThe `Slider` component can be used in a read only state by setting the `isReadOnly` prop to `true`.\n\n<Canvas of={stories.ReadOnly} withToolbar={false} />\n\n### Disabled\n\nThe `Slider` component can be used in a disabled state by setting the `isDisabled` prop to `true`.\n\n<Canvas of={stories.Disabled} withToolbar={false} />\n\n### Controlled\n\nThe `value` prop can be used to control the value of the `Slider` component from outside of the component.\n\n```jsx\nimport { Slider } from \"../../utils\";\n\nfunction App() {\n  const [value, setValue] = React.useState(50);\n\n  return (\n    <Slider\n      value={value}\n      minValue={0}\n      maxValue={100}\n      onChange={(value) => setValue(value)}\n    />\n  );\n}\n```\n\n## Accessibility\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 Interactions\n\n| Keyboard Shortcuts    | Description                            |\n| --------------------- | -------------------------------------- |\n| `Left Arrow`          | Decrease value by `step` amount        |\n| `Right Arrow`         | Increase value by `step` amount        |\n| `Shift + Left Arrow`  | Decrease value by `step * 10` amount   |\n| `Shift + Right Arrow` | Increase value by `step * 10` amount   |\n| `Home`                | Set value to the minimum allowed value |\n| `End`                 | Set value to the maximum allowed value |\n\n## Playground\n\n<Primary />\n<Controls />\n\n# IconSlider\n\nThe `IconSlider` component is a variation of the `Slider` component that allows you to place an icon before the slider.\n\n<Canvas of={iconSliderStories.Basic} withToolbar={false} />\n\n## Usage\n\n```jsx\nimport { IconSlider } from \"../../utils\";\nimport { EllipseIcon } from \"../Icon\";\n\n<IconSlider\n  value={50}\n  minValue={0}\n  maxValue={100}\n  onChange={(value) => console.log(value)}\n  icon={EllipseIcon}\n/>;\n```\n\n### Disabled Tooltip\n\nThe `IconSlider` component can be used with a disabled tooltip by setting the `tooltipProps` prop to `{ isDisabled: true }`.\n\n<Canvas of={iconSliderStories.WithoutTooltip} />\n\n## `IconSlider` Props\n\n<ArgTypes of={iconSliderStories} />\n",
-  "Switch": "import { Meta, Controls, Primary, Canvas } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./Switch.stories\";\nimport { DocPreview } from \"~storybook/DocPreview\";\nimport { Switch } from \"./Switch\";\nimport { Separator } from \"../Separator\";\n\n<Meta of={stories} />\n\n# Switch\n\n`Switch` is a component that allows the user to switch between two states. It is a stylized version of the native `input[type=checkbox]` element. It is used to represent a boolean value, and is typically used in forms and tables.\n\n<Canvas of={stories.Basic} withToolbar={false} />\n\n## Features\n\n- This component is built on top of the native `input[type=checkbox]` element.\n- Full support for browser features like form autofill\n- Keyboard focus management and cross browser normalization\n- Labeling support for screen readers\n- Exposed as a switch to assistive technology via ARIA\n\n## Usage\n\n```jsx\nimport { Switch } from \"../../utils\";\n\n<Switch />;\n```\n\n### Enabled\n\nThe Switch is enabled by default. To disable the Switch, pass the `isDisabled` prop.\n\n<DocPreview>\n  <Switch />\n</DocPreview>\n\n```jsx\nimport { Switch } from \"../../utils\";\n\n<Switch />;\n```\n\n### Selected\n\nThe Switch is unselected by default and is in uncontrolled mode. You can pass the `defaultSelected` prop to set the initial state of the Switch.\n\n<DocPreview>\n  <Switch defaultSelected />\n</DocPreview>\n\n```jsx\nimport { Switch } from \"../../utils\";\n\n<Switch defaultSelected />;\n```\n\nIf you want to control the state of the Switch, pass the `isSelected` prop and handle the `onChange` event.\n\n<DocPreview>\n  <Switch isSelected />\n</DocPreview>\n\n```jsx\nimport { Switch } from \"../../utils\";\n\n<Switch isSelected />;\n```\n\n### ReadOnly\n\nYou can pass the `isReadOnly` prop to prevent the user from changing the state of the Switch. In this mode the Switch remains focusable, but the user cannot change the state.\nThis 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.\n\n<DocPreview>\n  <Switch isReadOnly />\n</DocPreview>\n\n```jsx\nimport { Switch } from \"../../utils\";\n\n<Switch isReadOnly />;\n```\n\n### Disabled\n\nYou 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.\n\n<DocPreview>\n  <Switch isDisabled />\n</DocPreview>\n\n```jsx\nimport { Switch } from \"../../utils\";\n\n<Switch isDisabled />;\n```\n\n### HTML Forms\n\nThe `Switch` supports `name`, `value`, and `onChange` props to support HTML forms.\n\n<DocPreview>\n  <Switch\n    name=\"switch\"\n    value=\"value\"\n    onChange={(state) => alert(`Clicked ${state}`)}\n  />\n</DocPreview>\n\n```jsx\nimport { Switch } from \"../../utils\";\n\n<Switch\n  name=\"switch\"\n  value=\"value\"\n  onChange={(state) => alert(`Clicked ${state}`)}\n/>;\n```\n\n### Label\n\nYou 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.\n\n<DocPreview>\n  <Switch label=\"Label\" />\n</DocPreview>\n\n```jsx\nimport { Switch } from \"../../utils\";\n\n<Switch label=\"Label\" />;\n```\n\nYou can also position the label to the left of the Switch by passing the `labelPosition` prop.\n\n<DocPreview>\n  <div style={{ width: 200 }}>\n    <Switch label=\"Label\" labelPosition=\"left\" />\n  </div>\n</DocPreview>\n\n```jsx\nimport { Switch } from \"../../utils\";\n\n<div style={{ width: 200 }}>\n  <Switch label=\"Label\" labelPosition=\"left\" />\n</div>;\n```\n\n### Status Label\n\nYou 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.\n\n<DocPreview style={{ flexDirection: \"column\" }}>\n  <Switch label=\"Label\" statusLabel={{ on: \"On\", off: \"Off\" }} />\n  <Separator style={{ margin: \"10px 0\" }} />\n  <div style={{ width: 200 }}>\n    <Switch\n      label=\"Label\"\n      labelPosition=\"left\"\n      statusLabel={{ on: \"On\", off: \"Off\" }}\n    />\n  </div>\n</DocPreview>\n\n```jsx\nimport { Switch, Separator } from \"../../utils\";\n\n<Switch label=\"Label\" statusLabel={{ on: \"On\", off: \"Off\" }} />;\n<Separator style={{ margin: \"10px 0\" }} />\n<div style={{ width: 200 }}>\n<Switch\n  label=\"Label\"\n  labelPosition=\"left\"\n  statusLabel={{ on: \"On\", off: \"Off\" }}\n/>\n</div>\n```\n\nThe status labels can improve the accessibility of the Switch. However, they are not required. If you don't pass the `statusLabel` prop, the Switch will use the `label` prop to convey the meaning of the different states.\n\n## CSS Selectors\n\n| Selector             | Description                                                       |\n| -------------------- | ----------------------------------------------------------------- |\n| [data-disabled]      | Whether the component is disabled.                                |\n| [data-focused]       | Whether the component is focused, either via a mouse or keyboard. |\n| [data-hovered]       | Whether the component is currently hovered with a mouse.          |\n| [data-focus-visible] | Whether the component is keyboard focused.                        |\n| [data-selected]      | Whether the component is selected.                                |\n| [data-readonly]      | Whether the component is readonly.                                |\n| [data-pressed]       | Whether the component is pressed.                                 |\n\n### Keyboard Interaction\n\n| Key     | Function                        |\n| ------- | ------------------------------- |\n| `Space` | Toggle the state of the switch. |\n\n## Props\n\n<Primary />\n<Controls />\n```\n",
-  "Tabs": "import {\n  Meta,\n  Controls,\n  Primary,\n  ArgTypes,\n  Canvas,\n} from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./Tabs.stories\";\nimport * as tabItemStories from \"./TabItem.stories\";\n\n<Meta of={stories} />\n\n# Tabs\n\nThe `Tabs` component is used to display a set of tabs that can be used to navigate between different tab panels. You can create\na tab panel by wrapping a `TabItem` component in a `Tabs` component.\n\n<Canvas of={stories.Basic} withToolbar={false} />\n\n## Features\n\n- Full support for mouse, keyboard, and touch interactions\n- Supports disabled tabs\n- Follows the tabs ARIA pattern, semantically linking tabs and their associated tab panels\n- Supports focus management for tab panels without any focusable children\n\n## Usage\n\n```jsx\nimport { Tabs, TabItem } from \"../../utils\";\n\n<Tabs aria-label=\"Example\">\n  <TabItem value=\"tab-1\" title=\"Tab 1\">\n    Tab 1 content\n  </TabItem>\n  <TabItem value=\"tab-2\" title=\"Tab 2\">\n    Tab 2 content\n  </TabItem>\n</Tabs>;\n```\n\n### Removing the tab item\n\nIf you pass an `onRemove` prop to the `Tabs` component, a close icon will be rendered in the tab. Clicking this icon will trigger an `onRemove` event. You can use this event to remove the tab item from the `Tabs` component. If you don’t\npass an `onRemove` prop, the close icon won’t be rendered.\n\n<Canvas of={stories.WithCloseButton} />\n\n```jsx\nimport { Tabs, TabItem } from \"../../utils\";\n\n<Tabs aria-label=\"Danish Composers\" onRemove={() => alert(\"Delete\")}>\n  <TabItem value=\"tab-1\" title=\"Maria Ahlefeldt\">\n    Maria Theresia Ahlefeldt (16 January 1755 – 20 December 1810) was a\n    Danish...\n  </TabItem>\n  ...\n</Tabs>;\n```\n\n### Default selected tab\n\nA default selected tab can be specified by passing the `defaultSelectedValue` prop to the `Tabs` component. The value should be the `value` of the `TabItem` that should be selected by default. If no `defaultSelectedValue` is specified,\nthe first `TabItem` will be selected by default.\n\n<Canvas of={stories.WithDefaultSelected} />\n\n```jsx\nimport { Tabs, TabItem } from \"../../utils\";\n\n<Tabs aria-label=\"Danish Composers\" defaultSelectedValue=\"tab-2\">\n  <TabItem value=\"tab-1\" title=\"Maria Ahlefeldt\">\n    Maria Theresia Ahlefeldt (16 January 1755 – 20 December 1810) was a\n    Danish...\n  </TabItem>\n  <TabItem value=\"tab-2\" title=\"Carl Andersen\">\n    Carl Joachim Andersen (29 April 1847 – 7 May 1909) was a Danish...\n  </TabItem>\n  <TabItem value=\"tab-3\" title=\"Ida da Fonseca\">\n    Ida Henriette da Fonseca (July 27, 1802 – July 6, 1858) was a Danish opera\n    singer...\n  </TabItem>\n</Tabs>;\n```\n\n### Disabled\n\nA tab can be disabled by passing the `isDisabled` prop to the `Tabs` component. Disabled tabs cannot be selected.\n\n<Canvas of={stories.WithDisabled} />\n\n```jsx\nimport { Tabs, TabItem } from \"../../utils\";\n\n<Tabs aria-label=\"Danish Composers\" isDisabled>\n  <TabItem value=\"tab-1\" title=\"Maria Ahlefeldt\">\n    Maria Theresia Ahlefeldt (16 January 1755 – 20 December 1810) was a\n    Danish...\n  </TabItem>\n  ...\n</Tabs>;\n```\n\n### Disabled tab items\n\nIndividual 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.\n\n<Canvas of={stories.WithSpecificDisabled} />\n\n```jsx\nimport { Tabs, TabItem } from \"../../utils\";\n\n<Tabs aria-label=\"Danish Composers\" disabledValues={new Set([\"tab-2\"])}>\n  <TabItem value=\"tab-1\" title=\"Maria Ahlefeldt\">\n    Maria Theresia Ahlefeldt (16 January 1755 – 20 December 1810) was a\n    Danish...\n  </TabItem>\n  ...\n</Tabs>;\n```\n\n### Focusable content\n\nThe entire tab panel is given a `tabIndex=0` when the tab panel doesn’t 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.\n\n<Canvas of={stories.WithFocusableContent} />\n\n```jsx\nimport { Tabs, TabItem, Checkbox } from \"../../utils\";\n\n<Tabs aria-label=\"Danish Composers\">\n  <TabItem value=\"tab-1\" title=\"Maria Ahlefeldt\">\n    Maria Theresia Ahlefeldt (16 January 1755 – 20 December 1810) was...\n    <Checkbox label=\"Focusable Content\" labelPosition=\"start\" />\n  </TabItem>\n  ...\n</Tabs>;\n```\n\n### Tab action icon buttons\n\nA 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.\n\n<Canvas of={stories.WithActionButton} />\n\n```jsx\nimport { Tabs } from \"../../utils\";\nimport { PlusIcon } from \"../Icon\";\n\n<Tabs\n  aria-label=\"Danish Composers\"\n  disabledValues={new Set([\"tab-2\"])}\n  actions={[\n    {\n      icon: PlusIcon,\n      onPress: () => alert(\"Close\"),\n      \"aria-label\": \"Add\",\n    },\n  ]}\n>\n  <TabItem value=\"tab-1\" title=\"Maria Ahlefeldt\">\n    Maria Theresia Ahlefeldt (16 January 1755 – 20 December 1810) was a\n    Danish...\n  </TabItem>\n  ...\n</Tabs>;\n```\n\n#### Keyboard interaction\n\n| Key           | Function                |\n| ------------- | ----------------------- |\n| `Left Arrow`  | Select the previous tab |\n| `Right Arrow` | Select the next tab     |\n| `Enter`       | Select the focused tab  |\n| `Space`       | Select the focused tab  |\n\n## Playground\n\n<Primary />\n\n### `Tabs` Props\n\n<Controls />\n\n### `TabItem` Props\n\n<ArgTypes of={tabItemStories} />\n",
-  "TagGroup": "import { Meta, Controls, Primary } from \"@storybook/addon-docs/blocks\";\nimport { DocPreview } from \"~storybook/DocPreview\";\nimport { RemovableTagGroup } from \"./__tests__/testComponents\";\nimport { TagGroup } from \"./TagGroup\";\nimport * as stories from \"./TagGroup.stories\";\n\n<Meta of={stories} />\n\n# TagGroup\n\n`TagGroup` is a focusable list of labels, categories, keywords, filters or other items with support for keyboard navigation, selection and removal.\n\n## Features\n\n- The component is exposed to assistive technology as a grid using ARIA\n- Keyboard navigation supports arrow keys, home, end, page up, page down, space and enter\n- The component can be set to allow tags to be removed\n- The component can be set to allow tags to be selected\n- The component can be set to allow tags to be disabled\n- Supports keyboard, mouse and touch interactions\n\n## Usage\n\n```jsx\nimport { TagGroup } from \"../../utils\";\n\n<TagGroup items={[{ id: \"tag\", label: \"Tag\" }]} />;\n```\n\n### Variants\n\nThe `TagGroup` component has four variants: `neutral`, `red`, `green`, `blue` and `high-constrast`. You can set the variant of whole group or individual tags.\n\n<DocPreview>\n  <TagGroup aria-label={\"Tag Group\"} items={[{ id: \"tag\", label: \"Tag\" }]} />\n  <TagGroup\n    aria-label={\"Tag Group\"}\n    variant=\"red\"\n    items={[{ id: \"tag\", label: \"Tag\" }]}\n  />\n  <TagGroup\n    aria-label={\"Tag Group\"}\n    variant=\"green\"\n    items={[{ id: \"tag\", label: \"Tag\" }]}\n  />\n  <TagGroup\n    aria-label={\"Tag Group\"}\n    variant=\"blue\"\n    items={[{ id: \"tag\", label: \"Tag\" }]}\n  />\n  <TagGroup\n    aria-label={\"Tag Group\"}\n    variant=\"high-contrast\"\n    items={[{ id: \"tag\", label: \"Tag\" }]}\n  />\n</DocPreview>\n\n```jsx\nimport { TagGroup } from \"../../utils\";\n\nconst items = [{ id: \"tag\", label: \"Tag\" }];\n\n<TagGroup items={items} />;\n<TagGroup variant=\"red\" items={items} />;\n<TagGroup variant=\"green\" items={items} />;\n<TagGroup variant=\"blue\" items={items} />;\n<TagGroup variant=\"high-contrast\" items={items} />;\n```\n\nYou can set the individual variant of each tag by passing the `variant` prop to the `items` array.\n\n<DocPreview>\n  <TagGroup\n    aria-label={\"Tag Group\"}\n    items={[\n      { id: \"tag1\", label: \"Tag\" },\n      { id: \"tag2\", label: \"Tag\", variant: \"red\" },\n      { id: \"tag3\", label: \"Tag\", variant: \"green\" },\n      { id: \"tag4\", label: \"Tag\", variant: \"blue\" },\n      { id: \"tag5\", label: \"Tag\", variant: \"high-contrast\" },\n    ]}\n  />\n</DocPreview>\n\n```jsx\nimport { TagGroup } from \"../../utils\";\n\nconst items = [\n  { id: \"tag\", label: \"Tag\" },\n  { id: \"tag\", label: \"Tag\", variant: \"red\" },\n  { id: \"tag\", label: \"Tag\", variant: \"green\" },\n  { id: \"tag\", label: \"Tag\", variant: \"blue\" },\n  { id: \"tag\", label: \"Tag\", variant: \"high-contrast\" },\n];\n\n<TagGroup items={items} />;\n```\n\n### Removable\n\nThe `TagGroup` component can be set to allow tags to be removed by passing the `onRemove` prop.\n\n<DocPreview>\n  <RemovableTagGroup\n    aria-label={\"Tag Group\"}\n    items={[\n      { id: \"tag\", label: \"Tag\" },\n      { id: \"tag2\", label: \"Tag\" },\n      { id: \"tag3\", label: \"Tag\" },\n      { id: \"tag4\", label: \"Tag\" },\n      { id: \"tag5\", label: \"Tag\" },\n    ]}\n  />\n</DocPreview>\n\n### Selection\n\nThe `TagGroup` component can be set to allow tags to be selected by passing the `selectionMode` prop.\n\n<DocPreview>\n  <TagGroup\n    aria-label={\"Tag Group\"}\n    items={[\n      { id: \"tag\", label: \"Tag\" },\n      { id: \"tag2\", label: \"Tag\" },\n      { id: \"tag3\", label: \"Tag\" },\n      { id: \"tag4\", label: \"Tag\" },\n      { id: \"tag5\", label: \"Tag\" },\n    ]}\n    selectionMode=\"single\"\n    defaultSelectedKeys={[\"tag\"]}\n  />\n</DocPreview>\n\n```jsx\nimport { TagGroup } from \"../../utils\";\n\nconst items = [\n  { id: \"tag\", label: \"Tag\" },\n  { id: \"tag2\", label: \"Tag\" },\n  { id: \"tag3\", label: \"Tag\" },\n  { id: \"tag4\", label: \"Tag\" },\n  { id: \"tag5\", label: \"Tag\" },\n];\n\n<TagGroup items={items} selectionMode=\"single\" defaultSelectedKeys={[\"tag\"]} />;\n```\n\n### Disabled\n\nThe `TagGroup` component can be set to disabled by passing the `disabledKeys` prop. Disabled items are not focusable, selectable, or keyboard navigable.\n\n<DocPreview>\n  <TagGroup\n    aria-label={\"Tag Group\"}\n    items={[\n      { id: \"tag\", label: \"Tag\" },\n      { id: \"tag2\", label: \"Tag\" },\n      { id: \"tag3\", label: \"Tag\" },\n      { id: \"tag4\", label: \"Tag\" },\n      { id: \"tag5\", label: \"Tag\" },\n    ]}\n    disabledKeys={[\"tag\"]}\n  />\n</DocPreview>\n\n```jsx\nimport { TagGroup } from \"../../utils\";\n\nconst items = [\n  { id: \"tag\", label: \"Tag\" },\n  { id: \"tag2\", label: \"Tag\" },\n  { id: \"tag3\", label: \"Tag\" },\n  { id: \"tag4\", label: \"Tag\" },\n  { id: \"tag5\", label: \"Tag\" },\n];\n\n<TagGroup items={items} disabledKeys={[\"tag\"]} />;\n```\n\n## Keyboard Interaction\n\n| Key         | Function                        |\n| ----------- | ------------------------------- |\n| Arrow Left  | Moves focus to the previous tag |\n| Arrow Right | Moves focus to the next tag     |\n| Home        | Moves focus to the first tag    |\n| End         | Moves focus to the last tag     |\n| Page Up     | Moves focus to the previous tag |\n| Page Down   | Moves focus to the next tag     |\n| Space       | Selects the focused tag         |\n| Enter       | Selects the focused tag         |\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "TaggedPagination": "import { Meta, Controls, Primary, Canvas } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./TaggedPagination.stories\";\n\n<Meta of={stories} />\n\n# TaggedPagination\n\nThe `TaggedPagination` component is used to navigate through a list of items that have been tagged with a specific tag instead of just their index. For eg: It can help in going through pages using their page label and not just the page number.\n\n<Primary />\n\n## Features\n\n- Supports both string and number tags.\n- Keyboard handling of next and previous buttons.\n\n## Usage\n\n```jsx\nimport { TaggedPagination } from \"@baseline-ui/core\";\n\n<TaggedPagination\n  valueToLabelMap={{ 1: \"One\", 2: \"Two\", 4: \"Four\" }}\n  label=\"Page\"\n  decrementAriaLabel=\"Decrement\"\n  incrementAriaLabel=\"Increment\"\n  minValue={1}\n  maxValue={4}\n/>;\n```\n\nThis component is a controlled component and requires the `value` prop to be controlled. You can use the `onChange` prop to update the current page.\n\n#### Keyboard Interaction\n\n| Key         | Function                                                         |\n| ----------- | ---------------------------------------------------------------- |\n| `ArrowDown` | Decrement the current page.                                      |\n| `ArrowUp`   | Increment the current page.                                      |\n| `Enter`     | Change the current page to the value entered in the input field. |\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "Text": "import { Meta, Controls, Primary, Canvas } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./Text.stories\";\n\n<Meta of={stories} />\n\n# Text\n\nThe `Text` component is used to render text of various sizes and weights.\n\n<Canvas of={stories.Basic} withToolbar={false} />\n\n## Usage\n\n```jsx\nimport { Text } from \"@storybook/addon-docs/blocks\";\n\n<Text type=\"subtitle\" size=\"sm\">\n  Text\n</Text>;\n```\n\n### Variants\n\nThe `Text` component supports the following types: `title`, `subtitle`, `body`, `value` and `helper`. It\nalso supports the following sizes: `sm`, `md`, and `lg`. You can see all the variants [here](/story/core-text--variants)\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "TextInput": "import { Canvas, Controls, Meta, Primary } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./TextInput.stories\";\n\n<Meta of={stories} />\n\n# TextInput\n\n`TextInput` is a component that allows users to input text. It can be used to\nsearch, filter, or enter text.\n\n<Canvas of={stories.Basic} withToolbar={false} />\n\n## Features\n\n- This component is built on top of the `input` element.\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 the assistive technology via ARIA.\n- It supports description and other state messages which are linked to the `input` element via ARIA.\n\n## Usage\n\n```jsx\nimport { TextInput } from \"../../utils\";\n\n<TextInput placeholder=\"Enter Text\" />;\n```\n\n### Label\n\nYou can add a label to the `TextInput` by passing a `label` prop.\n\n<Canvas of={stories.WithLabel} />\n\n```jsx\nimport { TextInput } from \"../../utils\";\n\n<TextInput label=\"Label\" placeholder=\"Placeholder\" />;\n```\n\n#### Label position\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<Canvas of={stories.WithLabelAtStart} />\n\n```jsx\nimport { TextInput } from \"../../utils\";\n\n<TextInput label=\"Label\" labelPosition=\"start\" placeholder=\"Placeholder\" />;\n```\n\n### Description\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<Canvas of={stories.WithDescription} />\n\n```jsx\nimport { TextInput } from \"../../utils\";\n\n<TextInput label=\"Label\" description=\"Description\" placeholder=\"Placeholder\" />;\n```\n\n### Error\n\nYou can add an error to the `TextInput` by setting the `validationState` prop to\n`\"error\"`. You can also pass `errorMessage` to provide additional information\nabout the error.\n\n<Canvas of={stories.WithErrorMessage} />\n\n```jsx\nimport { TextInput } from \"../../utils\";\n\n<TextInput\n  label=\"Label\"\n  validationState=\"error\"\n  placeholder=\"Placeholder\"\n  defaultValue=\"Error value\"\n/>;\n```\n\n### Warning\n\nYou can add a warning to the `TextInput` by setting the `validationState` prop to\n`\"warning\"`. You can also pass `warningMessage` to provide additional\n\n<Canvas of={stories.WithWarningMessage} />\n\n```jsx\nimport { TextInput } from \"../../utils\";\n\n<TextInput\n  label=\"Label\"\n  validationState=\"warning\"\n  placeholder=\"Placeholder\"\n  defaultValue=\"Warning value\"\n/>;\n```\n\n### Read Only\n\nYou can make the `TextInput` read only by passing a `isReadOnly` prop.\n\n<Canvas of={stories.ReadOnly} />\n\n```jsx\nimport { TextInput } from \"../../utils\";\n\n<TextInput\n  isReadOnly\n  placeholder=\"Placeholder\"\n  defaultValue=\"Read only value\"\n/>;\n```\n\n### Disabled\n\nYou can disable the `TextInput` by passing a `isDisabled` prop.\n\n<Canvas of={stories.Disabled} />\n\n```jsx\nimport { TextInput } from \"../../utils\";\n\n<TextInput\n  isDisabled\n  placeholder=\"Placeholder\"\n  defaultValue=\"Disabled value\"\n  description=\"Description\"\n/>;\n```\n\n### Controlled\n\nYou can control the `TextInput` by passing a `value` prop and a `onChange` prop.\n\n<Canvas of={stories.Controlled} />\n\n```jsx\nimport { TextInput } from \"../../utils\";\n\n<TextInput\n  value={\"Controlled value\"}\n  onChange={(event) => setValue(event.target.value)}\n  placeholder=\"Placeholder\"\n  description=\"Description\"\n/>;\n```\n\n### HTML forms\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<Canvas of={stories.HTMLForms} />\n\n```jsx\nimport { TextInput } from \"../../utils\";\n\n<form>\n  <TextInput\n    name=\"text-input\"\n    type=\"text\"\n    placeholder=\"Placeholder\"\n    description=\"Description\"\n  />\n</form>;\n```\n\n## Playground\n\n<Primary />\n<Controls />\n",
-  "ThemeProvider": "import {\n  Meta,\n  Controls,\n  ArgTypes,\n  Unstyled,\n} from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./ThemeProvider.stories\";\nimport types from \"../../../../tokens/build/Theme.d.ts?raw\";\n\nimport { ThemeProvider } from \"./ThemeProvider\";\n\n<Meta of={stories} />\n\n# ThemeProvider\n\nThe `ThemeProvider` component is used to set a theme for your application.\n\n## Usage\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\n## Theme\n\nThe `theme` prop accepts a `Theme` object. The `Theme` type has the following structure:\n\n<Unstyled>\n  <pre\n    style={{\n      whiteSpace: \"pre-wrap\",\n      backgroundColor: \"#fafafa\",\n      padding: \"20px\",\n      borderRadius: \"8px\",\n    }}\n  >\n    {types}\n  </pre>\n</Unstyled>\n\n## Props\n\n<ArgTypes of={stories.Basic} />\n",
-  "TimeField": "import { Meta, Controls, Primary, Canvas } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./TimeField.stories\";\n\n<Meta of={stories} />\n\n# TimeField\n\nThe `TimeField` component is used to input a time value. Each part of the time value can be input separately.\n\n<Primary />\n\n## Features\n\n- Support for locale-specific formatting, number systems, hour cycles, and right-to-left layout.\n- Times can optionally include a time zone. All modifications follow time zone rules such as daylight saving time.\n- Each time unit is displayed as an individually focusable and editable segment, which allows users an easy way to edit times using the keyboard, in any format and locale.\n- Time segments are editable using an easy to use numeric keypad, and all interactions are accessible using touch-based screen readers.\n\n## Usage\n\n```jsx\nimport { TimeField } from \"../../utils\";\n\n<TimeField label=\"Event Time\" />;\n```\n\n### Default Value\n\nYou can set a default time value using the `defaultValue` prop.\n\n<Canvas of={stories.DefaultValue} />\n\n```jsx\nimport { parseZonedDateTime } from \"@internationalized/date\";\n\nconst time = parseZonedDateTime(\"2022-11-07T00:45[America/Los_Angeles]\");\n\n<TimeField label=\"Event Time\" defaultValue={time} />;\n```\n\n### Min and Max Values\n\nYou can restrict the time range using `minValue` and `maxValue` props.\n\n<Canvas of={stories.WithMinAndMaxValue} />\n\n```jsx\nimport { Time } from \"@internationalized/date\";\n\n<TimeField\n  aria-label=\"Event Time\"\n  minValue={new Time(9)} // 9:00 AM\n  maxValue={new Time(17)} // 5:00 PM\n/>;\n```\n\n### Disabled State\n\nThe TimeField can be disabled using the `isDisabled` prop.\n\n<Canvas of={stories.Disabled} />\n\n```jsx\n<TimeField label=\"Event Time\" isDisabled />\n```\n\n### Read Only\n\nMake the TimeField read-only using the `isReadOnly` prop.\n\n<Canvas of={stories.ReadOnly} />\n\n```jsx\n<TimeField label=\"Event Time\" isReadOnly defaultValue={time} />\n```\n\n### Validation States\n\nThe TimeField supports error and warning states with associated messages.\n\n<Canvas of={stories.WithErrorMessage} />\n<Canvas of={stories.WithWarningMessage} />\n\n```jsx\n<TimeField\n  label=\"Event Time\"\n  validationState=\"error\"\n  errorMessage=\"Invalid time\"\n/>\n\n<TimeField\n  label=\"Event Time\"\n  validationState=\"warning\"\n  warningMessage=\"Outside business hours\"\n/>\n```\n\n### Keyboard Interaction\n\n| Key               | Function                                                    |\n| ----------------- | ----------------------------------------------------------- |\n| `ArrowLeft/Right` | Navigate between time segments                              |\n| `ArrowUp/Down`    | Increment/decrement the selected segment                    |\n| `PageUp/Down`     | Increment/decrement the selected segment by a larger amount |\n| `Home/End`        | Go to minimum/maximum value for the selected segment        |\n| `Numbers`         | Type numbers to edit the selected segment                   |\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "Toast": "import {\n  Meta,\n  Controls,\n  Primary,\n  Canvas,\n  ArgTypes,\n} from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./Toast.stories\";\n\n<Meta of={stories} />\n\n# Toast\n\nThe `Toast` component is used to display a toast notification to the user. It displays brief, temporary messages to the user.\n\nA toast region is an ARIA landmark region labeled \"Notifications\" by default. It contains one or more visible toasts, displayed in priority order. When the maximum number of visible toasts is reached, additional toasts are queued until a visible toast is dismissed. Each toast is an ARIA alert element that includes the notification content and a close button.\n\n<Primary />\n\n## Features\n\n- Automatically shifts focus to the next toast when a toast is closed.\n- Toasts follow the [ARIA alert pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alert/). They are rendered in a [landmark region](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/), which keyboard and screen reader users can easily jump to when an alert is announced.\n- Toasts are displayed according to a priority queue, displaying a configurable number of toasts at a time.\n\n## Usage\n\n```tsx\nimport { useMemo } from \"react\";\nimport { GlobalToastRegion, ToastQueue, ActionButton } from \"../../utils\";\n\nfunction ToastExample() {\n  const toastQueue = useMemo(\n    () =>\n      new ToastQueue({\n        maxVisibleToasts: 3,\n      }),\n    [],\n  );\n\n  return (\n    <div>\n      <GlobalToastRegion toastQueue={toastQueue} />\n\n      <ActionButton\n        onPress={() =>\n          toastQueue.add({\n            title: \"This is a toast\",\n            description: \"This is a toast description\",\n          })\n        }\n        label=\"Add Toast\"\n      />\n    </div>\n  );\n}\n```\n\n### UI\n\nThe toast component is built on top of the [`InlineAlert` component](/docs/core-status-inlinealert--docs). It uses the same props and behavior, but adds a few additional features. You pass the props while adding the toast to the queue.\n\n```tsx\ntoastQueue.add(alertProps: InlineAlertProps, {\n  timeout: number,\n  priority: number,\n  onClose: () => void,\n});\n```\n\nYou can find the documentation for the [`InlineAlertProps` here](/docs/core-status-inlinealert--docs#props).\n\n### Variants\n\nThe toast component supports the same variants as the [`InlineAlert` component](/docs/core-status-inlinealert--docs#variants). You can view all the variants [here](/story/core-status-toast--variants-without-action).\n\n### Timeout\n\nYou can pass a `timeout` prop to the `toastQueue.add` method to set the timeout of the toast. Toasts will be automatically closed after the timeout. By default, the timeout is set to 0, in which case the toast will not be closed automatically.\n\n```tsx\ntoastQueue.add(alertProps, { timeout: 1000 });\n```\n\n<Canvas of={stories.Timeout} />\n\n## GlobalToastRegion Props\n\n<ArgTypes of={stories} />\n",
-  "ToggleButton": "import { Meta, Controls, Primary, Canvas } from \"@storybook/addon-docs/blocks\";\nimport { DocPreview } from \"~storybook/DocPreview\";\nimport { ToggleButton } from \"./ToggleButton\";\nimport * as stories from \"./ToggleButton.stories\";\n\n<Meta of={stories} />\n\n# ToggleButton\n\nThe `ToggleButton` component is used to toggle between two states.\n\n<Canvas of={stories.Basic} withToolbar={false} />\n\n## Features\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## Usage\n\n```jsx\nimport { ToggleButton } from \"../../utils\";\n\n<ToggleButton label={\"Label\"} />;\n```\n\n### Controlled\n\nYou can control the state of the button by passing the `isSelected` prop.\n\n### Default Selection State\n\nYou can set the default selection state of the button by passing the `defaultSelected` prop.\n\n### Disabled\n\nYou can disable the button by passing the `isDisabled` prop.\n\n## CSS Selectors\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### Keyboard Interaction\n\n| Key     | Function          |\n| ------- | ----------------- |\n| `Space` | Toggle the button |\n| `Enter` | Toggle the button |\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "ToggleIconButton": "import { Meta, Controls, Primary, Canvas } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./ToggleIconButton.stories\";\n\n<Meta of={stories} />\n\n# ToggleIconButton\n\nThe `ToggleIconButton` component is a button that toggles between two states. It is used to toggle a boolean value.\n\n## Features\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## Usage\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\n### Controlled\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\n### Default Selection State\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\n### Disabled\n\nYou can disable the button by passing the `isDisabled` prop.\n\n```jsx\n<ToggleButton label={\"Label\"} isDisabled={true} />\n```\n\n### State Specific Icons\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<Canvas of={stories.StateSpecificIcons} />\n\n## CSS Selectors\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### Keyboard Interaction\n\n| Key     | Function          |\n| ------- | ----------------- |\n| `Space` | Toggle the button |\n| `Enter` | Toggle the button |\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "Toolbar": "import { Meta, Controls, Primary, Canvas } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./Toolbar.stories\";\n\n<Meta of={stories} />\n\n# Toolbar\n\nThe `Toolbar` component is used to display a set of interactive controls with arrow key navigation.\n\n<Canvas of={stories.Basic} />\n\n## Features\n\n- The component is exposed to assistive technology as a `toolbar` element.\n- The component is keyboard accessible. It supports arrow key navigation.\n- It supports tabbing within the toolbar items when `isSingleTabStop` is set to `false`.\n- It supports both horizontal and vertical orientation.\n- Support for interactive children including button, toggle button, menu, checkbox, and link\n- Automatic scrolling support during keyboard navigation\n- Collapsible toolbar support\n\n## Usage\n\n```jsx\nimport { Toolbar, Link, ActionIconButton } from \"../../utils\";\n\n<Toolbar>\n  <ActionIconButton icon={EllipseIcon} aria-label=\"Button\" />\n  <Link href=\"https://pspdfkit.com\">PSPDFKit</Link>\n  <ActionIconButton icon={EllipseIcon} aria-label=\"Button\" />\n</Toolbar>;\n```\n\n### Collapsible Toolbar\n\nThere are situations when you have a lot of controls in the toolbar, and might want to collapse them into a menu when the toolbar is resized. You can achieve this by using the `Toolbar` component with the `isCollapsible` prop.\nThis mode only supports horizontal orientation. The components supported in this mode are `ActionButton`, `ActionIconButton`, and `Popover`.\n\nIn case of Popover, when the popover trigger has moved to the menu:\n\n- The content will be visible in a modal for non-mobile devices.\n- The content will be visible in a drawer for mobile devices.\n\n<Canvas of={stories.Collapsible} />\n\n#### Keyboard Interaction\n\n| Key                           | Function                                                     |\n| ----------------------------- | ------------------------------------------------------------ |\n| Up                            | Focus the previous interactive child in vertical orientation |\n| Down                          | Focus the next interactive child in vertical orientation     |\n| Left                          | Focus the previous interactive child                         |\n| Right                         | Focus the next interactive child                             |\n| Tab                           | Focus the next interactive child outside the toolbar         |\n| Tab without `isSingleTabStop` | Focus the next interactive child within the toolbar          |\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "Tooltip": "import { Controls, Meta, Primary, Canvas } from \"@storybook/addon-docs/blocks\";\nimport { DocPreview } from \"~storybook/DocPreview\";\nimport { ActionButton } from \"../ActionButton\";\nimport { Tooltip } from \"./Tooltip\";\nimport * as stories from \"./Tooltip.stories\";\n\n<Meta of={stories} />\n\n# Tooltip\n\n`Tooltip` is a accessible pop-up that displays information about an element when users hover over or focus on it.\n\n## Features\n\n- Automatic handling of Keyboard focus management and cross browser normalization\n- Automatic Hover management and cross browser normalization\n- Labeling support for screen readers (aria-describedby)\n- Exposed as a tooltip to assistive technology via ARIA\n- Matches native tooltip behavior with delay on hover of first tooltip and no delay on subsequent tooltips.\n\n## Usage\n\n```jsx\nimport { Tooltip, ActionButton } from \"../../utils\";\n\n<Tooltip text=\"Tooltip content\">\n  <ActionButton label=\"Label\">Hover me</ActionButton>\n</Tooltip>;\n```\n\n### Controlled\n\nThe open state of the tooltip can be controlled using the `isOpen` prop. This is useful when you want to control the tooltip from outside the component.\n\n<DocPreview>\n  <Tooltip text=\"Tooltip content\" isOpen={true}>\n    <ActionButton label=\"Open\" />\n  </Tooltip>\n</DocPreview>\n\n```jsx\nimport { Tooltip, ActionButton } from \"../../utils\";\n\n<Tooltip text=\"Tooltip content\" isOpen={true}>\n  <ActionButton label=\"Open\" />\n</Tooltip>;\n```\n\n### Position\n\nThe `position` prop determines the position of the tooltip relative to the element it is attached to. You can see the examples [here](/?path=/story/core-tooltip--variants).\n\n### Delay\n\nThe `delay` prop determines the delay in milliseconds before the tooltip appears. The tooltip appears after a delay while hovering over the element and immediately when the element is focused using keyboard. One\nthing to note is that the delay is only applied to the first tooltip. Subsequent tooltips will appear immediately.\n\n<DocPreview>\n  <Tooltip text=\"Tooltip Content\" delay={1000}>\n    <ActionButton label=\"Delay 1000ms\" />\n  </Tooltip>\n  <Tooltip text=\"Tooltip Content\" delay={0}>\n    <ActionButton label=\"Delay 0ms\" />\n  </Tooltip>\n</DocPreview>\n\n```jsx\nimport { Tooltip, ActionButton } from \"../../utils\";\n\n<Tooltip text=\"Tooltip content\" delay={1000}>\n  <ActionButton label=\"Delay 1000ms\" />\n</Tooltip>\n<Tooltip text=\"Tooltip content\" delay={0}>\n  <ActionButton label=\"Delay 0ms\" />\n</Tooltip>;\n```\n\n### Close Delay\n\nThe `closeDelay` prop determines the delay in milliseconds before the tooltip disappears. The tooltip will disappear immediately when the element is focused using keyboard.\n\n<DocPreview>\n  <Tooltip text=\"Tooltip Content\" closeDelay={1000}>\n    <ActionButton label=\"Close Delay 1000ms\" />\n  </Tooltip>\n  <Tooltip text=\"Tooltip Content\" closeDelay={0}>\n    <ActionButton label=\"Close Delay 0ms\" />\n  </Tooltip>\n</DocPreview>\n\n```jsx\nimport { Tooltip, ActionButton } from \"../../utils\";\n\n<Tooltip text=\"Tooltip content\" closeDelay={1000}>\n  <ActionButton label=\"Close Delay 1000ms\" />\n</Tooltip>\n<Tooltip text=\"Tooltip content\" closeDelay={0}>\n  <ActionButton label=\"Close Delay 0ms\" />\n</Tooltip>\n```\n\n### Trigger\n\nThe tooltip is triggered by both focus and hover by default. You can use the `trigger` prop to change that behaviour.\n\n<DocPreview>\n  <Tooltip text=\"Tooltip content\" trigger=\"focus\">\n    <ActionButton label=\"Triggered on Focus only\" />\n  </Tooltip>\n</DocPreview>\n\n### Attach to arbitrary elements\n\nThe `Focusable` component can be used to attach the tooltip to arbitrary elements.\n\n<Canvas of={stories.WithFocusable} />\n\n```jsx\nimport { Tooltip, Focusable } from \"@baseline-ui/src\";\n\n<Tooltip text=\"Tooltip content\">\n  <Focusable>Hover over me. This is just a div.</Focusable>\n</Tooltip>;\n```\n\n### Keyboard Interaction\n\n| Key | Function |\n| --- | -------- |\n| ESC | Close    |\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "TreeView": "import { Meta, Controls, Primary, Canvas } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./TreeView.stories\";\n\n<Meta of={stories} />\n\n# TreeView\n\nThe `TreeView` component is used to display a tree structure of items which allows the user to navigate and interact with hierarchical data.\n\n<Primary />\n\n## Features\n\n- Support for mouse, touch and keyboard interaction\n- Support for accessibility features such as focus management and keyboard interaction\n- Support for primary and secondary actions on items\n- Support for renaming labels of items\n\n## Usage\n\n```tsx\nimport { TreeView } from \"@pw/core\";\n\nconst treeItems = {\n  id: \"root\",\n  label: \"Root item\",\n  children: [\n    {\n      id: \"documents\",\n      label: \"Documents\",\n      icon: EllipseIcon,\n      children: [\n        {\n          id: \"work\",\n          label: \"Work\",\n          icon: EllipseIcon,\n        },\n      ],\n    },\n  ],\n};\n\n<TreeView items={treeItems} />;\n```\n\n#### Controlled Expansion\n\nYou can control the expansion state of the tree view by using the `expandedKeys` prop. In controlled state, you can use the `onExpansionChange` prop to handle the change of the expanded keys.\n\n<Canvas of={stories.WithControlledExpandedKeys} />\n\n#### Expanded by default\n\nYou can expand the tree view by default by using the `defaultExpandedKeys` prop. This prop only controls the initial state of the expanded keys which means that ou can still expand and collapse the tree view by internal interaction\n\n<Canvas of={stories.WithDefaultExpandedKeys} />\n\n#### Description\n\nYou can add a `description` to every item in the tree view.\n\n<Canvas of={stories.WithDescription} />\n\n#### Action Buttons\n\nYou can add primary and secondary action buttons to every item in the tree view. These buttons are rendered if you pass the `primaryActionIcon` and `secondaryActionIcon` props respectively. You can also handle the click events of these buttons using the `onPrimaryAction` and `onSecondaryAction` props. By default, the buttons are rendered at the end of the row. You can change the position of the buttons using the `actionsPosition` prop.\n\n<Canvas of={stories.WithPrimaryAndSecondaryAction} />\n\n#### Rename\n\nYou can rename the label of an item by double clicking on it if `canRename` prop is passed. You can also start renaming a row using the keyboard by pressing `F2`.\n\n<Canvas of={stories.WithRename} />\n\n### Keyboard Interaction\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         |\n| <kbd>Arrow Left</kbd>  | Collapse the focused item       |\n| <kbd>Enter</kbd>       | Activate the focused item       |\n| <kbd>Space</kbd>       | Activate the focused item       |\n| <kbd>F2</kbd>          | Start renaming the focused item |\n\n## Props\n\n<Primary />\n<Controls />\n",
-  "Virtualizer": "import {\n  Meta,\n  Controls,\n  Primary,\n  Canvas,\n  Source,\n  ArgTypes,\n} from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./Virtualizer.stories\";\n\n<Meta of={stories} />\n\n# Virtualizer\n\nA Virtualizer renders a scrollable collection of data using customizable layouts. It supports very large collections by only rendering visible items to the DOM, reusing them as the user scrolls. This results in a small number of DOM elements being rendered, reducing memory usage and improving browser layout and rendering performance.\n\n<Canvas of={stories.ListLayoutExample} />\n\n## Features\n\n- **Performance Optimization** – Only renders visible items to the DOM, reusing them as the user scrolls\n- **Integrated** – Works with UNSAFE_ListBox and ImageGallery components\n- **Custom Layouts** – Support for list, grid, and waterfall layouts out of the box\n- **Accessible** – Persists the focused element in the DOM even when out of view, ensuring keyboard navigation always works\n- **Drag and Drop Support** – Integrated drag and drop functionality\n- **Selection Support** – Works seamlessly with selection implementations\n\n## Usage\n\n```tsx\nimport {\n  Virtualizer,\n  ListLayout,\n  UNSAFE_ListBox,\n  VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS,\n} from \"@baseline-ui/core\";\n\nfunction MyComponent() {\n  const items = Array.from({ length: 5000 }, (_, i) => ({\n    id: i.toString(),\n    label: `Item ${i}`,\n  }));\n\n  return (\n    <Virtualizer\n      layout={ListLayout}\n      layoutOptions={VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.LIST_BOX}\n    >\n      <UNSAFE_ListBox aria-label=\"Virtualized ListBox\" items={items} />\n    </Virtualizer>\n  );\n}\n```\n\n### Virtualized components must have a defined size\n\nThis may be an explicit CSS `width` and `height`, or an implicit size (e.g. percentage or `flex`) bounded by an ancestor element. Without a bounded size, all items will be rendered to the DOM, negating the performance benefits of virtualized scrolling.\n\n### Default Options\n\nThe Virtualizer provides default layout options for common use cases. These can be imported from `@baseline-ui/core` and used directly:\n\n```tsx\nimport {\n  Virtualizer,\n  ListLayout,\n  VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS,\n} from \"@baseline-ui/core\";\n\n<Virtualizer {...VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.LIST_BOX}>\n  <UNSAFE_ListBox items={items} />\n</Virtualizer>;\n```\n\nAvailable default options include:\n\n- `VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.LIST_BOX` – Optimized settings for list boxes with standard spacing and row heights\n- `VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.IMAGE_GALLERY` – Configured settings for image galleries with appropriate item sizes and spacing\n\nFor more advanced layout configurations and custom implementations, refer to the [React Aria Virtualizer documentation](https://react-spectrum.adobe.com/react-aria/Virtualizer.html).\n"
-}