@baseline-ui/mcp 0.0.0-nightly-20251203000617 → 0.0.0-nightly-20251205000606

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @baseline-ui/mcp
 
-## 0.0.0-nightly-20251203000617
+## 0.0.0-nightly-20251205000606
 
 ## 0.47.0
 

package/dist/data/component-docs.json

@@ -9,6 +9,7 @@
   "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",
+  "Code": "import { Meta, Controls, Primary, Canvas } from \"@storybook/addon-docs/blocks\";\nimport * as stories from \"./Code.stories\";\n\n<Meta of={stories} />\n\n# Code\n\nThe `Code` component is used to display code snippets in a readable, formatted way. It provides a styled container with monospace typography and automatic scrolling for long code blocks.\n\n<Canvas of={stories.Basic} />\n\n## Features\n\n- Monospace font family optimized for code readability\n- Automatic horizontal and vertical scrolling for long code blocks\n- Custom scrollbar styling that matches the theme\n- Theme-aware styling with proper contrast and spacing\n\n## Usage\n\n### Basic Usage\n\n```jsx\nimport { Code } from \"@baseline-ui/core\";\n\n<Code>{`{ \"name\": \"Baseline UI\" }`}</Code>;\n```\n\n### Long Code Blocks\n\nFor longer code snippets, the component automatically provides scrolling when the content exceeds the container size:\n\n```jsx\nimport { Code } from \"@baseline-ui/core\";\n\n<Code style={{ maxWidth: 400, maxHeight: 200 }}>\n  {`{\n  \"scripts\": {\n    \"build\": \"lerna run build --stream\",\n    \"test\": \"jest\",\n    \"lint\": \"eslint .\"\n  }\n}`}\n</Code>;\n```\n\n<Canvas of={stories.WithScroll} />\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",

package/dist/data/component-source.json

@@ -9,6 +9,7 @@
   "Box": "import { sprinkles } from \"@baseline-ui/tokens\";\nimport React, { useMemo } from \"react\";\n\nimport { classNames } from \"../../utils\";\n\nimport type { BoxProps, SprinkleProps } from \"./Box.types\";\n\nfunction isSprinkleKey(key: unknown): key is keyof SprinkleProps {\n  return sprinkles.properties.has(key as keyof SprinkleProps);\n}\n\nexport const Box = React.forwardRef<HTMLDivElement, BoxProps>(\n  ({ elementType = \"div\", children, ...rest }, ref) => {\n    const ElementType = elementType as React.ElementType;\n\n    const { sprinkleProps, domProps } = useMemo(() => {\n      const sprinkleProps = {} as SprinkleProps;\n      const domProps = {} as React.ComponentPropsWithoutRef<\"div\">;\n\n      for (const key in rest) {\n        if (isSprinkleKey(key)) {\n          // @ts-expect-error Too complicated union\n          sprinkleProps[key] = rest[key];\n        } else {\n          domProps[key] = rest[key];\n        }\n      }\n\n      return { sprinkleProps, domProps };\n    }, [rest]);\n\n    return (\n      <ElementType\n        {...domProps}\n        className={classNames(\n          sprinkles(sprinkleProps),\n          \"BaselineUI-Box\",\n          domProps.className,\n        )}\n        ref={ref}\n      >\n        {children}\n      </ElementType>\n    );\n  },\n);\n\nBox.displayName = \"Box\";\n",
   "ButtonSelect": "import { CaretDownIcon } from \"@baseline-ui/icons/8\";\nimport { PressResponder } from \"@react-aria/interactions\";\nimport { useObjectRef } from \"@react-aria/utils\";\nimport { useControlledState } from \"@react-stately/utils\";\nimport React, { useCallback, useMemo } from \"react\";\nimport { useHover } from \"react-aria\";\nimport { useSelectState } from \"react-stately\";\n\nimport { classNames, filterTruthyValues } from \"../../utils\";\nimport { defineMessages, useI18n } from \"../../hooks\";\nimport { ActionIconButton } from \"../ActionIconButton\";\nimport { Box } from \"../Box\";\nimport { Select } from \"../Select\";\nimport { SelectContext } from \"../Select/Select\";\nimport { ToggleButton } from \"../ToggleButton\";\nimport { toggleButtonCn } from \"../ToggleButton/ToggleButton.css\";\nimport { ToggleIconButton } from \"../ToggleIconButton\";\nimport { containerCn, selectCn, selectTriggerCn } from \"./ButtonSelect.css\";\nimport { Tooltip } from \"../Tooltip\";\nimport { ActionButton } from \"../ActionButton\";\nimport { ListCollectionBuilder } from \"../shared/components/ListCollectionBuilder\";\nimport { ListOptionContext } from \"../UNSAFE_ListBox/ListBox\";\nimport { ListOptionContent } from \"../UNSAFE_ListBox/ListBoxUI\";\n\nimport type { ListItem } from \"../shared/types/List\";\nimport type { BaseCollection } from \"@react-aria/collections\";\nimport type { PressEvent } from \"@react-aria/interactions\";\nimport type { Key } from \"@react-types/shared\";\nimport type { SelectProps } from \"../Select\";\nimport type { ListOption } from \"../ListBox\";\nimport type { ButtonSelectProps } from \"./ButtonSelect.types\";\n\nconst ButtonSelectCore = React.forwardRef<\n  HTMLDivElement,\n  Omit<ButtonSelectProps, \"onPress\"> & {\n    collection: BaseCollection<ListItem>;\n    onButtonPress?: (e: PressEvent) => void;\n  }\n>(\n  (\n    {\n      className,\n      style,\n      items,\n      \"data-block-id\": dataBlockId,\n      \"data-block-class\": dataBlockClass,\n      hideLabel,\n      size = \"md\",\n      isDisabled,\n      excludeFromTabOrder,\n      onButtonPress,\n      onButtonAction,\n      isSelected,\n      defaultSelected,\n      onButtonSelectionChange,\n      collection,\n      moreAriaLabel,\n      optionStyle,\n      optionClassName,\n      triggerClassName,\n      triggerStyle,\n      tooltipProps,\n      buttonBehaviour = \"toggle\",\n      ...rest\n    },\n    ref,\n  ) => {\n    const { formatMessage } = useI18n();\n\n    const state = useSelectState({\n      ...rest,\n      collection,\n      defaultValue: rest.defaultSelectedKey || items?.[0]?.id,\n      children: undefined,\n      selectionMode: \"single\",\n      validationState: rest.validationState === \"error\" ? \"invalid\" : \"valid\",\n    });\n\n    const _buttonBehaviour = useMemo(() => {\n      if (typeof buttonBehaviour === \"function\") {\n        return buttonBehaviour(state.value as string);\n      }\n      return buttonBehaviour;\n    }, [buttonBehaviour, state.value]);\n\n    const [isButtonSelected, setIsButtonSelected] = useControlledState(\n      isSelected,\n      !!defaultSelected,\n      (isSelected) => {\n        onButtonSelectionChange?.({\n          isSelected,\n          selectedKey: state.value as string,\n        });\n      },\n    );\n\n    const { hoverProps, isHovered } = useHover({ isDisabled });\n\n    const button = useMemo(() => {\n      const selectedItem = state.collection.getItem(state.value as string);\n      if (!selectedItem) return null;\n\n      const buttonLabel =\n        selectedItem?.textValue || selectedItem?.[\"aria-label\"];\n      const _item = selectedItem?.value as ListOption;\n\n      const Icon = _item?.icon;\n\n      const isToggle = _buttonBehaviour === \"toggle\";\n      const isButtonDisabled =\n        isDisabled || state.disabledKeys.has(state.value as string);\n\n      const sharedProps = {\n        size,\n        ...(isToggle && { isSelected: isButtonSelected }),\n        onPress: (e: PressEvent) => {\n          if (isToggle) {\n            setIsButtonSelected(!isButtonSelected);\n          }\n          onButtonPress?.(e);\n          onButtonAction?.({\n            isSelected: isToggle ? !isButtonSelected : false,\n            selectedKey: state.value as string,\n            buttonBehaviour: _buttonBehaviour,\n          });\n        },\n        isDisabled: isButtonDisabled,\n        excludeFromTabOrder,\n        className: classNames(\n          typeof optionClassName === \"function\"\n            ? optionClassName(_item, {\n                isButton: true,\n                isSelected: isButtonSelected,\n              })\n            : optionClassName,\n          \"BaselineUI-ButtonSelect-Button\",\n        ),\n        style:\n          typeof optionStyle === \"function\"\n            ? optionStyle(_item, {\n                isButton: true,\n                isSelected: isButtonSelected,\n              })\n            : optionStyle,\n      };\n\n      if (hideLabel && Icon) {\n        return (\n          <Tooltip\n            variant=\"inverse\"\n            size=\"sm\"\n            includeArrow={false}\n            text={buttonLabel}\n            placement=\"bottom start\"\n            offset={4}\n            {...(typeof tooltipProps === \"function\"\n              ? tooltipProps(\"button\")\n              : tooltipProps)}\n          >\n            {_buttonBehaviour === \"action\" ? (\n              <ActionIconButton\n                icon={Icon}\n                aria-label={buttonLabel}\n                variant=\"toolbar\"\n                {...sharedProps}\n              />\n            ) : (\n              <ToggleIconButton\n                icon={Icon}\n                aria-label={buttonLabel}\n                variant=\"toolbar\"\n                {...sharedProps}\n              />\n            )}\n          </Tooltip>\n        );\n      } else {\n        return _buttonBehaviour === \"toggle\" ? (\n          <ToggleButton\n            iconStart={Icon}\n            label={buttonLabel}\n            variant=\"toolbar\"\n            {...sharedProps}\n          />\n        ) : (\n          <ActionButton\n            label={buttonLabel}\n            variant=\"toolbar\"\n            {...sharedProps}\n          />\n        );\n      }\n    }, [\n      state.collection,\n      state.value,\n      state.disabledKeys,\n      _buttonBehaviour,\n      isDisabled,\n      size,\n      isButtonSelected,\n      excludeFromTabOrder,\n      optionClassName,\n      optionStyle,\n      hideLabel,\n      onButtonPress,\n      onButtonAction,\n      setIsButtonSelected,\n      tooltipProps,\n    ]);\n\n    const ariaLabel = rest[\"aria-label\"];\n\n    const renderTrigger = useCallback<\n      Exclude<SelectProps[\"renderTrigger\"], undefined>\n    >(\n      ({ buttonProps, ref }) => {\n        delete buttonProps[\"aria-labelledby\"];\n\n        const label =\n          moreAriaLabel || `${formatMessage(messages.more)} ${ariaLabel}`;\n\n        return (\n          <Tooltip\n            variant=\"inverse\"\n            size=\"sm\"\n            includeArrow={false}\n            text={label}\n            placement=\"bottom start\"\n            offset={4}\n            {...tooltipProps}\n          >\n            <PressResponder {...buttonProps}>\n              <ActionIconButton\n                aria-label={label}\n                ref={ref}\n                icon={CaretDownIcon}\n                variant=\"toolbar\"\n                size={size}\n                className={({ isFocusVisible }) =>\n                  classNames(\n                    toggleButtonCn({\n                      isSelected:\n                        isButtonSelected && _buttonBehaviour === \"toggle\",\n                      isFocusVisible,\n                    }),\n                    selectTriggerCn,\n                    triggerClassName,\n                    \"BaselineUI-ButtonSelect-Trigger\",\n                  )\n                }\n                style={triggerStyle}\n                isDisabled={isDisabled}\n                excludeFromTabOrder={excludeFromTabOrder}\n              />\n            </PressResponder>\n          </Tooltip>\n        );\n      },\n      [\n        ariaLabel,\n        _buttonBehaviour,\n        excludeFromTabOrder,\n        formatMessage,\n        isButtonSelected,\n        isDisabled,\n        moreAriaLabel,\n        size,\n        tooltipProps,\n        triggerClassName,\n        triggerStyle,\n      ],\n    );\n\n    const dataAttrs = filterTruthyValues({\n      \"data-block-id\": dataBlockId,\n      \"data-block-class\": dataBlockClass,\n      \"data-hovered\": isHovered,\n      \"data-selected\": isButtonSelected,\n      \"data-disabled\": isDisabled,\n      \"data-expanded\": state.isOpen,\n      \"data-button-behaviour\": _buttonBehaviour,\n    });\n\n    const containerRef = useObjectRef(ref);\n\n    const contextValue = useMemo(\n      () => ({ state, popoverAnchorRef: containerRef }),\n      [state, containerRef],\n    );\n\n    return (\n      <SelectContext.Provider value={contextValue}>\n        <Box\n          {...hoverProps}\n          role=\"group\"\n          display=\"inline-flex\"\n          flexDirection=\"row\"\n          alignItems=\"center\"\n          className={classNames(\n            containerCn,\n            \"BaselineUI-ButtonSelect\",\n            className,\n          )}\n          aria-label={rest[\"aria-label\"]}\n          aria-labelledby={rest[\"aria-labelledby\"]}\n          aria-describedby={rest[\"aria-describedby\"]}\n          aria-details={rest[\"aria-details\"]}\n          style={style}\n          ref={containerRef}\n          {...dataAttrs}\n        >\n          {button}\n\n          <Select\n            isDisabled={isDisabled}\n            placement=\"bottom start\"\n            items={items}\n            {...rest}\n            variant=\"ghost\"\n            renderTrigger={renderTrigger}\n            className={classNames(selectCn, \"BaselineUI-ButtonSelect-Select\")}\n          />\n        </Box>\n      </SelectContext.Provider>\n    );\n  },\n);\n\nButtonSelectCore.displayName = \"ButtonSelectCore\";\n\nexport const ButtonSelect = React.forwardRef<HTMLDivElement, ButtonSelectProps>(\n  (\n    {\n      onPress,\n      optionStyle,\n      optionClassName,\n      onSelectionChange,\n      onOptionPress,\n      ...props\n    },\n    ref,\n  ) => {\n    const onPressHandler = useCallback(\n      (e: PressEvent, key: string) => {\n        onOptionPress?.(e, key);\n        // When clicking the selected option, react-aria won't call onSelectionChange\n        // because the selection doesn't change, so we call it here\n        if (props.selectedKey === key) {\n          onSelectionChange?.(key);\n        }\n      },\n      [onOptionPress, onSelectionChange, props.selectedKey],\n    );\n\n    const wrappedOnSelectionChange = useCallback(\n      (key: Key | null) => {\n        // Always call onSelectionChange when react-aria calls it (when selection changes)\n        if (key) {\n          onSelectionChange?.(key as string);\n        }\n      },\n      [onSelectionChange],\n    );\n\n    const contextValue = useMemo(\n      () => ({ onPress: onPressHandler }),\n      [onPressHandler],\n    );\n\n    return (\n      <ListOptionContext.Provider value={contextValue}>\n        <ListCollectionBuilder\n          items={props.items}\n          listBoxProps={{\n            renderOption: (item, itemProps) => (\n              <ListOptionContent {...itemProps} item={item} />\n            ),\n            optionStyle: (item, props) =>\n              typeof optionStyle === \"function\"\n                ? optionStyle(item, {\n                    isButton: false,\n                    isSelected: props.isSelected,\n                  })\n                : optionStyle,\n            optionClassName: (item, props) =>\n              typeof optionClassName === \"function\"\n                ? optionClassName(item, {\n                    isButton: false,\n                    isSelected: props.isSelected,\n                  })\n                : optionClassName,\n          }}\n        >\n          {(collection) => (\n            <ButtonSelectCore\n              collection={collection}\n              onButtonPress={onPress}\n              onSelectionChange={wrappedOnSelectionChange}\n              optionStyle={optionStyle}\n              optionClassName={optionClassName}\n              {...props}\n              ref={ref}\n            />\n          )}\n        </ListCollectionBuilder>\n      </ListOptionContext.Provider>\n    );\n  },\n);\n\nButtonSelect.displayName = \"ButtonSelect\";\n\nconst messages = defineMessages({\n  more: {\n    id: \"more\",\n    defaultMessage: \"More\",\n  },\n});\n",
   "Checkbox": "import React from \"react\";\nimport {\n  VisuallyHidden,\n  mergeProps,\n  useCheckbox,\n  useFocusRing,\n  useHover,\n  useObjectRef,\n} from \"react-aria\";\nimport { useToggleState } from \"react-stately\";\nimport { CheckmarkIcon, MinusIcon } from \"@baseline-ui/icons/12\";\n\nimport { classNames, filterTruthyValues } from \"../../utils\";\nimport { checkBoxLabelCn, checkboxCn, checkboxIconCn } from \"./Checkbox.css\";\n\nimport type { CheckboxProps } from \"./Checkbox.types\";\n\nexport const Checkbox = React.forwardRef<HTMLLabelElement, CheckboxProps>(\n  (\n    {\n      className,\n      style,\n      label,\n      labelPosition = \"end\",\n      \"data-block-id\": dataBlockId,\n      \"data-block-class\": dataBlockClass,\n      ...rest\n    },\n    ref,\n  ) => {\n    const labelRef = useObjectRef(ref);\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const state = useToggleState(rest);\n    const { isFocusVisible, isFocused, focusProps } = useFocusRing();\n    const { inputProps, isPressed, isDisabled, isSelected, isReadOnly } =\n      useCheckbox({ ...rest, children: label }, state, inputRef);\n    const { hoverProps, isHovered } = useHover(\n      {\n        isDisabled,\n      },\n      labelRef,\n    );\n\n    const dataAttrs = filterTruthyValues({\n      \"data-disabled\": isDisabled,\n      \"data-readonly\": isReadOnly,\n      \"data-hovered\": isHovered,\n      \"data-selected\": isSelected,\n      \"data-pressed\": isPressed,\n      \"data-indeterminate\": rest.isIndeterminate,\n      \"data-invalid\": rest.isInvalid,\n      \"data-focus-visible\": isFocusVisible,\n      \"data-focused\": isFocused,\n      \"data-block-id\": dataBlockId,\n      \"data-block-class\": dataBlockClass,\n    });\n\n    return (\n      <label\n        {...dataAttrs}\n        className={classNames(\n          checkboxCn({ labelPosition }),\n          \"BaselineUI-Checkbox\",\n          className,\n        )}\n        style={style}\n        ref={labelRef}\n      >\n        <VisuallyHidden>\n          <input {...mergeProps(inputProps, focusProps)} ref={inputRef} />\n        </VisuallyHidden>\n\n        <div\n          {...hoverProps}\n          className={checkboxIconCn({\n            isSelected: isSelected && !rest.isIndeterminate,\n            isIndeterminate: rest.isIndeterminate,\n            isFocusVisible,\n            isDisabled,\n            isReadOnly,\n            hasError: rest.isInvalid,\n            isHovered,\n          })}\n        >\n          {isSelected && !rest.isIndeterminate ? (\n            <CheckmarkIcon size={12} />\n          ) : null}\n          {rest.isIndeterminate ? <MinusIcon size={12} /> : null}\n        </div>\n        {label ? (\n          <span className={checkBoxLabelCn({ isDisabled })}>{label}</span>\n        ) : null}\n      </label>\n    );\n  },\n);\n\nCheckbox.displayName = \"Checkbox\";\n",
+  "Code": "import React from \"react\";\n\nimport { classNames } from \"../../utils\";\nimport { codeCn, preCn } from \"./Code.css\";\n\nimport type { CodeProps } from \"./Code.types\";\n\nexport const Code = React.forwardRef<HTMLPreElement, CodeProps>(\n  ({ className, style, children }, ref) => {\n    return (\n      <pre\n        className={classNames(preCn, \"BaselineUI-Code\", className)}\n        style={style}\n        ref={ref}\n      >\n        <code className={codeCn} tabIndex={0}>\n          {children}\n        </code>\n      </pre>\n    );\n  },\n);\n\nCode.displayName = \"Code\";\n",
   "ColorInput": "import { useControlledState } from \"@react-stately/utils\";\nimport React, { useMemo } from \"react\";\nimport { mergeProps, useId, useOverlayTrigger } from \"react-aria\";\nimport { useOverlayTriggerState } from \"react-stately\";\n\nimport _messages from \"./intl\";\nimport { classNames } from \"../../utils\";\nimport { Separator } from \"../Separator\";\nimport { Dialog } from \"../Dialog\";\nimport { CustomColors } from \"./CustomColors\";\nimport { ColorPresetList } from \"./ColorPresetList\";\nimport { ColorInputButton } from \"./ColorInputButton\";\nimport {\n  colorInputCn,\n  colorInputLabelCn,\n  dialogCn,\n  maxWidthCn,\n} from \"./ColorInput.css\";\nimport { defineMessages, useI18n, usePortalContainer } from \"../../hooks\";\nimport { PopoverContent } from \"../Popover/PopoverContent\";\nimport { Picker } from \"./Picker\";\nimport {\n  FALLBACK_COLOR,\n  NONE_ID,\n  getParsedColor,\n  getPresetsWithNone,\n} from \"./utils\";\nimport { useColorTrigger } from \"./hooks/useColorTrigger\";\n\nimport type Messages from \"./intl/en.json\";\nimport type { ColorInputProps } from \"./ColorInput.types\";\n\nexport const ColorInput = React.forwardRef<HTMLDivElement, ColorInputProps>(\n  (\n    {\n      className,\n      style,\n      allowRemoval,\n      allowAlpha = true,\n      presets,\n      labelPosition = \"top\",\n      colorLabel = true,\n      includePicker = true,\n      onChange,\n      onChangeEnd,\n      defaultValue,\n      storePickedColorKey = \"baselinePickedColor\",\n      value,\n      addColorButtonLabel,\n      removeColorButtonLabel,\n      customColorsLabel,\n      onTriggerPress,\n      renderTriggerButton = ({\n        isOpen,\n        color,\n        ref,\n        colorName,\n        triggerProps,\n        labelId,\n        isIndeterminate,\n        indeterminateIcon,\n      }) => (\n        <ColorInputButton\n          {...mergeProps(triggerProps, {\n            ...(rest.label\n              ? { \"aria-labelledby\": labelId }\n              : { \"aria-label\": rest[\"aria-label\"] }),\n          })}\n          ref={ref}\n          isOpen={isOpen}\n          isDisabled={rest.isDisabled}\n          labelPosition={labelPosition}\n          color={color}\n          colorLabel={colorLabel}\n          colorName={colorName}\n          isIndeterminate={isIndeterminate}\n          indeterminateIcon={indeterminateIcon}\n        />\n      ),\n      pickerMode = \"active\",\n      offset = 2,\n      placement = labelPosition === \"start\" ? \"bottom end\" : \"bottom start\",\n      \"data-block-id\": dataBlockId,\n      \"data-block-class\": dataBlockClass,\n      isIndeterminate,\n      indeterminateIcon,\n      ...rest\n    },\n    ref,\n  ) => {\n    const triggerRef = React.useRef<HTMLButtonElement>(null);\n    const dialogRef = React.useRef<HTMLDivElement>(null);\n    const state = useOverlayTriggerState(rest);\n    const { triggerProps, overlayProps } = useOverlayTrigger(\n      { type: \"listbox\" },\n      state,\n      triggerRef,\n    );\n    const _portalContainer = usePortalContainer(rest.portalContainer);\n\n    const [color, setColor] = useControlledState(\n      value === undefined ? undefined : getParsedColor(value),\n      getParsedColor(defaultValue),\n      (color) => onChange?.(color?.toFormat(\"rgba\") || null),\n    );\n\n    const { formatMessage } = useI18n<typeof Messages>(_messages);\n\n    const _presets = useMemo(\n      () => getPresetsWithNone(formatMessage(messages.noColor), presets),\n      [presets, formatMessage],\n    );\n\n    const labelId = useId();\n\n    const { colorName } = useColorTrigger({\n      colorLabel,\n      color,\n      presets: _presets,\n      isIndeterminate,\n    });\n\n    const presetsToShow = useMemo(\n      () => _presets.filter((p) => allowRemoval || p.id !== NONE_ID),\n      [_presets, allowRemoval],\n    );\n\n    const _addColorButtonLabel =\n      addColorButtonLabel || formatMessage(messages.addColor);\n\n    const _removeColorButtonLabel =\n      removeColorButtonLabel || formatMessage(messages.removeColor);\n\n    const _customColorsLabel =\n      customColorsLabel || formatMessage(messages.customColors);\n\n    const customColors = (\n      <CustomColors\n        color={color || FALLBACK_COLOR}\n        setColor={(color) => {\n          setColor(color);\n          onChangeEnd?.(color?.toFormat(\"rgba\") || null);\n        }}\n        storePickedColorKey={storePickedColorKey}\n        addColorButtonLabel={_addColorButtonLabel}\n        removeColorButtonLabel={_removeColorButtonLabel}\n        customColorsLabel={_customColorsLabel}\n        pickerMode={pickerMode}\n        allowAlpha={allowAlpha}\n        isIndeterminate={!!isIndeterminate}\n      />\n    );\n\n    return (\n      <>\n        <div\n          className={classNames(\n            { [colorInputCn]: labelPosition === \"start\" },\n            \"BaselineUI-ColorInput-Trigger\",\n            className,\n          )}\n          data-block-id={dataBlockId}\n          data-block-class={dataBlockClass}\n          style={style}\n          ref={ref}\n        >\n          {rest.label ? (\n            <label\n              id={labelId}\n              className={colorInputLabelCn({ labelPosition })}\n            >\n              {rest.label}\n            </label>\n          ) : null}\n\n          {renderTriggerButton({\n            isOpen: state.isOpen,\n            color,\n            ref: triggerRef,\n            colorName,\n            triggerProps: mergeProps(triggerProps, {\n              onPress: onTriggerPress,\n            }),\n            labelId,\n            isIndeterminate,\n            indeterminateIcon,\n          })}\n        </div>\n        <PopoverContent\n          {...rest}\n          portalContainer={_portalContainer}\n          placement={placement}\n          state={state}\n          offset={offset}\n          className={classNames(maxWidthCn, \"BaselineUI-ColorInput-Popover\")}\n          triggerRef={triggerRef}\n          overlayProps={overlayProps}\n        >\n          <Dialog\n            size=\"content\"\n            className={dialogCn({\n              includesCustomColorPicker: includePicker,\n            })}\n            ref={dialogRef}\n            aria-labelledby={rest.label ? labelId : undefined}\n            aria-label={rest[\"aria-label\"]}\n          >\n            {includePicker && pickerMode === \"active\" ? (\n              <>\n                <Picker\n                  color={color || FALLBACK_COLOR}\n                  setColor={setColor}\n                  allowAlpha={allowAlpha}\n                  onChangeEnd={(color) => {\n                    onChangeEnd?.(color?.toFormat(\"rgba\") || null);\n                  }}\n                />\n\n                {customColors}\n              </>\n            ) : null}\n\n            {!!presetsToShow.length && (\n              <>\n                {includePicker && pickerMode === \"active\" ? (\n                  <Separator />\n                ) : null}\n\n                <ColorPresetList\n                  autoFocus={\n                    includePicker && pickerMode === \"active\" ? false : \"first\"\n                  }\n                  state={state}\n                  triggerRef={triggerRef}\n                  presets={presetsToShow}\n                  color={color}\n                  setColor={(color) => {\n                    setColor(color);\n                    onChangeEnd?.(color?.toFormat(\"rgba\") || null);\n                  }}\n                  isIndeterminate={!!isIndeterminate}\n                />\n              </>\n            )}\n\n            {includePicker && pickerMode === \"lazy\" ? customColors : null}\n          </Dialog>\n        </PopoverContent>\n      </>\n    );\n  },\n);\n\nColorInput.displayName = \"ColorInput\";\n\nconst messages = defineMessages({\n  addColor: {\n    defaultMessage: \"Add color\",\n    id: \"addColor\",\n  },\n  removeColor: {\n    defaultMessage: \"Remove color\",\n    id: \"removeColor\",\n  },\n  customColors: {\n    defaultMessage: \"Custom colors\",\n    id: \"customColors\",\n  },\n  noColor: {\n    defaultMessage: \"No color\",\n    id: \"noColor\",\n  },\n  transparent: {\n    defaultMessage: \"Transparent\",\n    id: \"transparent\",\n  },\n});\n",
   "ColorSwatch": "import { parseColor } from \"@react-stately/color\";\nimport React from \"react\";\nimport { Focusable, mergeProps, useHover } from \"react-aria\";\nimport { useColorSwatch } from \"@react-aria/color\";\nimport { HelpIcon } from \"@baseline-ui/icons/16\";\n\nimport { classNames, filterTruthyValues } from \"../../utils\";\nimport { defineMessages, useI18n } from \"../../hooks\";\nimport { Box } from \"../Box\";\nimport { NONE_ID, getTransparentStyle } from \"../ColorInput/utils\";\nimport { Tooltip } from \"../Tooltip\";\nimport { useSharedTooltipProps } from \"../shared/tooltips\";\nimport { colorSwatchCn, indeterminateCn, noneCn } from \"./ColorSwatch.css\";\n\nimport type { ColorSwatchProps } from \"./ColorSwatch.types\";\n\nexport const ColorSwatch = React.forwardRef<HTMLDivElement, ColorSwatchProps>(\n  (\n    {\n      color,\n      isFocusVisible,\n      isSelected,\n      isInteractive,\n      isDisabled,\n      style,\n      className,\n      id,\n      tooltip,\n      isIndeterminate,\n      indeterminateIcon: IndeterminateIcon = HelpIcon,\n      \"data-block-id\": dataBlockId,\n      \"data-block-class\": dataBlockClass,\n      ...rest\n    },\n    ref,\n  ) => {\n    const parsed =\n      color &&\n      color !== NONE_ID &&\n      (typeof color === \"string\" ? parseColor(color) : color);\n\n    const { formatMessage } = useI18n();\n\n    const isNone = !parsed;\n\n    const { colorSwatchProps } = useColorSwatch({\n      color: isNone ? \"#000000\" : color,\n    });\n\n    const { hoverProps, isHovered } = useHover({\n      isDisabled: isDisabled || !isInteractive,\n    });\n\n    const dataAttrs = filterTruthyValues({\n      \"data-focus-visible\": isFocusVisible,\n      \"data-selected\": isSelected,\n      \"data-hovered\": isHovered,\n      \"data-block-id\": dataBlockId,\n      \"data-block-class\": dataBlockClass,\n      \"data-disabled\": isDisabled,\n      \"data-interactive\": isInteractive,\n      \"data-indeterminate\": isIndeterminate,\n    });\n\n    const inferredTooltipContent = isNone\n      ? formatMessage(messages.none)\n      : colorSwatchProps[\"aria-label\"];\n\n    // prefer provided aria-label over inferred one\n    const tooltipContent = rest[\"aria-label\"] ?? inferredTooltipContent;\n\n    const { tooltipProps } = useSharedTooltipProps({\n      tooltip,\n      label: tooltipContent,\n    });\n\n    const content = (\n      <div\n        {...mergeProps(hoverProps, dataAttrs, isNone ? {} : colorSwatchProps)}\n        style={style}\n        aria-label={\n          isNone ? formatMessage(messages.none) : colorSwatchProps[\"aria-label\"]\n        }\n        role=\"img\"\n        className={classNames(\n          colorSwatchCn({\n            removeBlendMode: isNone,\n            isFocusVisible,\n            isDisabled: !!isDisabled,\n            isSelected: !!isSelected,\n            isHovered,\n          }),\n          \"BaselineUI-ColorSwatch\",\n          className,\n        )}\n        ref={ref}\n        id={id}\n        {...rest}\n      >\n        <Box\n          display=\"inline-flex\"\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          borderRadius=\"full\"\n          height=\"full\"\n          width=\"full\"\n          opacity={isDisabled ? \"medium\" : undefined}\n          style={\n            parsed && !isIndeterminate\n              ? getTransparentStyle(parsed, 4)\n              : undefined\n          }\n        >\n          {isNone && !isIndeterminate ? <div className={noneCn} /> : null}\n          {isIndeterminate && IndeterminateIcon ? (\n            <IndeterminateIcon\n              role=\"presentation\"\n              size={16}\n              className={indeterminateCn}\n              aria-hidden=\"true\"\n            />\n          ) : null}\n        </Box>\n      </div>\n    );\n\n    return tooltipProps && !isDisabled ? (\n      <Tooltip {...tooltipProps}>\n        <Focusable>{content}</Focusable>\n      </Tooltip>\n    ) : (\n      content\n    );\n  },\n);\n\nColorSwatch.displayName = \"ColorSwatch\";\n\nconst messages = defineMessages({\n  none: {\n    id: \"none\",\n    defaultMessage: \"None\",\n  },\n});\n",
   "ColorSwatchPicker": "import { sprinkles } from \"@baseline-ui/tokens\";\nimport { filterDOMProps } from \"@react-aria/utils\";\nimport React, { useEffect, useMemo } from \"react\";\nimport { Focusable, useId } from \"react-aria\";\n\nimport { classNames } from \"../../utils\";\nimport { Box } from \"../Box\";\nimport { colorSwatchCn, groupContainerCn } from \"./ColorSwatchPicker.css\";\nimport { ColorSwatch } from \"../ColorSwatch\";\nimport { ListBox } from \"../ListBox\";\nimport { Text } from \"../Text\";\nimport { Tooltip } from \"../Tooltip\";\nimport { useSharedTooltipProps } from \"../shared/tooltips\";\n\nimport type { ListBoxProps } from \"../ListBox\";\nimport type { ColorSwatchPickerProps } from \"./ColorSwatchPicker.types\";\n\nexport const ColorSwatchPicker = React.forwardRef<\n  HTMLDivElement,\n  ColorSwatchPickerProps\n>(\n  (\n    {\n      className,\n      style,\n      items,\n      optionsContainerClassName,\n      label,\n      icon: Icon,\n      value,\n      defaultValue,\n      onChange,\n      isDisabled: _isDisabled,\n      optionClassName,\n      optionStyle,\n      labelPosition = \"top\",\n      \"data-block-id\": dataBlockId,\n      \"data-block-class\": dataBlockClass,\n      shouldFocusWrap,\n      tooltip = true,\n      ...rest\n    },\n    ref,\n  ) => {\n    const _items = useMemo(\n      () =>\n        items.map((item) => ({\n          id: item.color,\n          label: item.label,\n        })),\n      [items],\n    );\n\n    const labelId = useId();\n\n    useEffect(() => {\n      if (!label && !rest[\"aria-label\"] && !rest[\"aria-labelledby\"]) {\n        console.warn(\n          \"ColorSwatchPicker: Please provide a label or aria-label for accessibility.\",\n        );\n      }\n    }, [label, rest]);\n\n    return (\n      <Box\n        {...filterDOMProps(rest)}\n        className={classNames(\"BaselineUI-ColorSwatchPicker\", className)}\n        data-block-id={dataBlockId}\n        data-block-class={dataBlockClass}\n        display=\"flex\"\n        flexDirection={labelPosition === \"top\" ? \"column\" : \"row\"}\n        alignItems={labelPosition === \"top\" ? \"flex-start\" : \"center\"}\n        justifyContent=\"space-between\"\n        gap=\"md\"\n        style={style}\n        ref={ref}\n      >\n        {Icon || label ? (\n          <Box display=\"flex\" alignItems=\"center\" gap=\"md\">\n            {Icon ? (\n              <Icon\n                aria-hidden=\"true\"\n                size={24}\n                className={sprinkles({ color: \"icon.primary\" })}\n              />\n            ) : null}\n            {label ? (\n              <Text id={labelId} type=\"label\" size=\"sm\">\n                {label}\n              </Text>\n            ) : null}\n          </Box>\n        ) : null}\n\n        <ListBox\n          className={classNames(groupContainerCn, optionsContainerClassName)}\n          selectionMode=\"single\"\n          items={_items}\n          orientation=\"horizontal\"\n          defaultSelectedKeys={defaultValue ? [defaultValue] : undefined}\n          disabledKeys={_isDisabled ? _items.map((item) => item.id) : undefined}\n          isDisabled={_isDisabled}\n          selectedKeys={value ? [value] : undefined}\n          onSelectionChange={(keys) => {\n            onChange?.([...keys][0] as string);\n          }}\n          optionClassName={optionClassName}\n          optionStyle={optionStyle}\n          renderOption={(...args) => RenderOption(...args, tooltip)}\n          shouldFocusWrap={shouldFocusWrap}\n          {...rest}\n          aria-labelledby={label ? labelId : rest[\"aria-labelledby\"]}\n        />\n      </Box>\n    );\n  },\n);\n\nColorSwatchPicker.displayName = \"ColorSwatchPicker\";\n\ntype RenderOptionParameters = Parameters<\n  Exclude<ListBoxProps[\"renderOption\"], undefined>\n>;\n\nconst RenderOption = (\n  { key, textValue }: RenderOptionParameters[0],\n  {\n    isSelected,\n    isFocusVisible,\n    isDisabled,\n    optionProps,\n  }: RenderOptionParameters[1],\n  ref: RenderOptionParameters[2],\n  tooltip: ColorSwatchPickerProps[\"tooltip\"],\n) => {\n  const { tooltipProps } = useSharedTooltipProps({\n    label: textValue,\n    tooltip,\n  });\n\n  return (\n    <Tooltip {...tooltipProps}>\n      <Focusable>\n        <li\n          {...optionProps}\n          data-disabled={isDisabled}\n          className={classNames(colorSwatchCn, optionProps.className)}\n          ref={ref}\n        >\n          <ColorSwatch\n            isFocusVisible={isFocusVisible}\n            color={key as string}\n            isSelected={isSelected}\n            aria-label={textValue}\n            isInteractive={true}\n            isDisabled={isDisabled}\n            tooltip={false}\n          />\n        </li>\n      </Focusable>\n    </Tooltip>\n  );\n};\n",

package/dist/data/component-types.json

@@ -9,6 +9,7 @@
   "Box": "type BoxProps = {\n  \"alignItems\"?: \"stretch\" | \"center\" | \"flex-end\" | \"flex-start\" | { mobile?: \"stretch\" | \"center\" | \"flex-end\" | \"flex-start\"; tablet?: \"stretch\" | \"center\" | \"flex-end\" | \"flex-start\"; desktop?: \"stretch\" | ... 3 more ... | undefined; } | ResponsiveArray<...> | undefined;\n  \"alignSelf\"?: \"stretch\" | \"center\" | \"flex-end\" | \"flex-start\" | ResponsiveArray<1 | 2 | 3, \"stretch\" | \"center\" | \"flex-end\" | \"flex-start\" | null> | { mobile?: \"stretch\" | \"center\" | \"flex-end\" | \"flex-start\"; tablet?: \"stretch\" | ... 3 more ...; desktop?: \"stretch\" | ... 3 more ... | undefined; } | unde...;\n/** Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. */\n  \"aria-activedescendant\"?: string;\n/** Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. */\n  \"aria-atomic\"?: Booleanish;\n/** Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made. */\n  \"aria-autocomplete\"?: \"list\" | \"none\" | \"inline\" | \"both\";\n/** Defines a string value that labels the current element, which is intended to be converted into Braille.\n@see aria-label. */\n  \"aria-braillelabel\"?: string;\n/** Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.\n@see aria-roledescription. */\n  \"aria-brailleroledescription\"?: string;\n  \"aria-busy\"?: Booleanish;\n/** Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets.\n@see aria-pressed\n@see aria-selected. */\n  \"aria-checked\"?: boolean | \"true\" | \"false\" | \"mixed\";\n/** Defines the total number of columns in a table, grid, or treegrid.\n@see aria-colindex. */\n  \"aria-colcount\"?: number;\n/** Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.\n@see aria-colcount\n@see aria-colspan. */\n  \"aria-colindex\"?: number;\n/** Defines a human readable text alternative of aria-colindex.\n@see aria-rowindextext. */\n  \"aria-colindextext\"?: string;\n/** Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-colindex\n@see aria-rowspan. */\n  \"aria-colspan\"?: number;\n/** Identifies the element (or elements) whose contents or presence are controlled by the current element.\n@see aria-owns. */\n  \"aria-controls\"?: string;\n/** Indicates the element that represents the current item within a container or set of related elements. */\n  \"aria-current\"?: boolean | \"true\" | \"false\" | \"page\" | \"step\" | \"location\" | \"date\" | \"time\";\n/** Identifies the element (or elements) that describes the object.\n@see aria-labelledby */\n  \"aria-describedby\"?: string;\n/** Defines a string value that describes or annotates the current element.\n@see related aria-describedby. */\n  \"aria-description\"?: string;\n/** Identifies the element that provides a detailed, extended description for the object.\n@see aria-describedby. */\n  \"aria-details\"?: string;\n/** Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.\n@see aria-hidden\n@see aria-readonly. */\n  \"aria-disabled\"?: Booleanish;\n/** Indicates what functions can be performed when a dragged object is released on the drop target.\n@deprecated in ARIA 1.1 */\n  \"aria-dropeffect\"?: \"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\";\n/** Identifies the element that provides an error message for the object.\n@see aria-invalid\n@see aria-describedby. */\n  \"aria-errormessage\"?: string;\n/** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */\n  \"aria-expanded\"?: Booleanish;\n/** Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order. */\n  \"aria-flowto\"?: string;\n/** Indicates an element's \"grabbed\" state in a drag-and-drop operation.\n@deprecated in ARIA 1.1 */\n  \"aria-grabbed\"?: Booleanish;\n/** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */\n  \"aria-haspopup\"?: boolean | \"dialog\" | \"grid\" | \"listbox\" | \"menu\" | \"tree\" | \"true\" | \"false\";\n/** Indicates whether the element is exposed to an accessibility API.\n@see aria-disabled. */\n  \"aria-hidden\"?: Booleanish;\n/** Indicates the entered value does not conform to the format expected by the application.\n@see aria-errormessage. */\n  \"aria-invalid\"?: boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\";\n/** Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. */\n  \"aria-keyshortcuts\"?: string;\n/** Defines a string value that labels the current element.\n@see aria-labelledby. */\n  \"aria-label\"?: string;\n/** Identifies the element (or elements) that labels the current element.\n@see aria-describedby. */\n  \"aria-labelledby\"?: string;\n/** Defines the hierarchical level of an element within a structure. */\n  \"aria-level\"?: number;\n/** Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. */\n  \"aria-live\"?: \"off\" | \"assertive\" | \"polite\";\n/** Indicates whether an element is modal when displayed. */\n  \"aria-modal\"?: Booleanish;\n/** Indicates whether a text box accepts multiple lines of input or only a single line. */\n  \"aria-multiline\"?: Booleanish;\n/** Indicates that the user may select more than one item from the current selectable descendants. */\n  \"aria-multiselectable\"?: Booleanish;\n/** Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. */\n  \"aria-orientation\"?: \"horizontal\" | \"vertical\";\n/** Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship.\n@see aria-controls. */\n  \"aria-owns\"?: string;\n/** Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format. */\n  \"aria-placeholder\"?: string;\n/** Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-setsize. */\n  \"aria-posinset\"?: number;\n/** Indicates the current \"pressed\" state of toggle buttons.\n@see aria-checked\n@see aria-selected. */\n  \"aria-pressed\"?: boolean | \"true\" | \"false\" | \"mixed\";\n/** Indicates that the element is not editable, but is otherwise operable.\n@see aria-disabled. */\n  \"aria-readonly\"?: Booleanish;\n/** Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.\n@see aria-atomic. */\n  \"aria-relevant\"?: \"additions\" | \"additions removals\" | \"additions text\" | \"all\" | \"removals\" | \"removals additions\" | \"removals text\" | \"text\" | \"text additions\" | \"text removals\";\n/** Indicates that user input is required on the element before a form may be submitted. */\n  \"aria-required\"?: Booleanish;\n/** Defines a human-readable, author-localized description for the role of an element. */\n  \"aria-roledescription\"?: string;\n/** Defines the total number of rows in a table, grid, or treegrid.\n@see aria-rowindex. */\n  \"aria-rowcount\"?: number;\n/** Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.\n@see aria-rowcount\n@see aria-rowspan. */\n  \"aria-rowindex\"?: number;\n/** Defines a human readable text alternative of aria-rowindex.\n@see aria-colindextext. */\n  \"aria-rowindextext\"?: string;\n/** Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.\n@see aria-rowindex\n@see aria-colspan. */\n  \"aria-rowspan\"?: number;\n/** Indicates the current \"selected\" state of various widgets.\n@see aria-checked\n@see aria-pressed. */\n  \"aria-selected\"?: Booleanish;\n/** Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.\n@see aria-posinset. */\n  \"aria-setsize\"?: number;\n/** Indicates if items in a table or grid are sorted in ascending or descending order. */\n  \"aria-sort\"?: \"none\" | \"ascending\" | \"descending\" | \"other\";\n/** Defines the maximum allowed value for a range widget. */\n  \"aria-valuemax\"?: number;\n/** Defines the minimum allowed value for a range widget. */\n  \"aria-valuemin\"?: number;\n/** Defines the current value for a range widget.\n@see aria-valuetext. */\n  \"aria-valuenow\"?: number;\n/** Defines the human readable text alternative of aria-valuenow for a range widget. */\n  \"aria-valuetext\"?: string;\n  \"backgroundColor\"?: \"background.interactive.enabled\" | \"background.interactive.hovered\" | \"background.interactive.active\" | \"background.interactive.visited\" | \"background.interactive.disabled\" | ... 33 more ...;\n  \"border\"?: \"none\";\n  \"borderBottomRadius\"?: \"full\" | \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | ResponsiveArray<1 | 2 | 3, \"full\" | \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | null> | { ...; };\n  \"borderColor\"?: \"support.error.subtler\" | \"support.error.subtle\" | \"support.error.medium\" | \"support.error.strong\" | \"support.success.subtler\" | \"support.success.subtle\" | \"support.success.medium\" | ... 25 more ...;\n  \"borderEndEndRadius\"?: \"full\" | \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | ResponsiveArray<1 | 2 | 3, \"full\" | \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | null> | { ...; };\n  \"borderEndStartRadius\"?: \"full\" | \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | ResponsiveArray<1 | 2 | 3, \"full\" | \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | null> | { ...; };\n  \"borderLeftRadius\"?: \"full\" | \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | ResponsiveArray<1 | 2 | 3, \"full\" | \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | null> | { ...; };\n  \"borderRadius\"?: \"full\" | \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | ResponsiveArray<1 | 2 | 3, \"full\" | \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | null> | { ...; };\n  \"borderRightRadius\"?: \"full\" | \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | ResponsiveArray<1 | 2 | 3, \"full\" | \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | null> | { ...; };\n  \"borderStartEndRadius\"?: \"full\" | \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | ResponsiveArray<1 | 2 | 3, \"full\" | \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | null> | { ...; };\n  \"borderStartStartRadius\"?: \"full\" | \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | { mobile?: \"full\" | \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\"; tablet?: \"full\" | \"none\" | \"xs\" | \"sm\" | ... 4 more ...; desktop?: \"full\" | ... 7 more ... | undefined; } | ResponsiveArray<...> | undefined;\n  \"borderStyle\"?: \"solid\" | \"dashed\";\n  \"borderTopRadius\"?: \"full\" | \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | ResponsiveArray<1 | 2 | 3, \"full\" | \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | null> | { ...; };\n  \"borderWidth\"?: number;\n  \"boxShadow\"?: \"medium\" | \"low\";\n  \"className\"?: string;\n  \"color\"?: \"text.primary\" | \"text.secondary\" | \"text.helper\" | \"text.placeholder\" | \"text.interactive.disabled\" | \"text.inverse\" | \"text.oninteractive\" | \"text.interactive.enabled\" | ... 35 more ...;\n  \"cursor\"?: \"pointer\";\n  \"dangerouslySetInnerHTML\"?: { __html: string | TrustedHTML; };\n/** The unique identifier for the block. This is used to identify the block in\nthe DOM and in the block map. It is added as a data attribute\n`data-block-id` to the root element of the block if a DOM node is\nrendered. */\n  \"data-block-id\"?: string;\n  \"display\"?: \"flex\" | \"grid\" | \"none\" | \"block\" | \"inline-flex\" | { mobile?: \"flex\" | \"grid\" | \"none\" | \"block\" | \"inline-flex\"; tablet?: \"flex\" | \"grid\" | \"none\" | \"block\" | \"inline-flex\"; desktop?: \"flex\" | ... 4 more ... | undefined; } | ResponsiveArray<...> | undefined;\n/** The HTML element to use for the box. */\n/** @default div */\n  \"elementType\"?: any;\n  \"flex\"?: number | { mobile?: number; tablet?: number; desktop?: number | undefined; } | ResponsiveArray<1 | 2 | 3, number | null> | undefined;\n  \"flexDirection\"?: \"row\" | \"column\" | \"column-reverse\" | \"row-reverse\" | { mobile?: \"row\" | \"column\" | \"column-reverse\" | \"row-reverse\"; tablet?: \"row\" | \"column\" | \"column-reverse\" | \"row-reverse\"; desktop?: \"row\" | ... 3 more ... | undefined; } | ResponsiveArray<...> | undefined;\n  \"flexGrow\"?: 0 | 1;\n  \"flexShrink\"?: 0;\n  \"flexWrap\"?: \"nowrap\" | \"wrap\";\n  \"gap\"?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"8xl\" | \"9xl\" | ResponsiveArray<1 | 2 | 3, \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | ... 6 more ... | null> | { ...; };\n  \"height\"?: \"full\";\n  \"id\"?: string;\n  \"inset\"?: 0;\n  \"insetBlockEnd\"?: 0;\n  \"insetBlockStart\"?: 0;\n  \"insetInlineEnd\"?: 0;\n  \"insetInlineStart\"?: 0;\n  \"justifyContent\"?: \"stretch\" | \"center\" | \"flex-end\" | \"flex-start\" | \"space-between\" | { mobile?: \"stretch\" | \"center\" | \"flex-end\" | \"flex-start\" | \"space-between\"; tablet?: \"stretch\" | ... 4 more ...; desktop?: \"stretch\" | ... 4 more ... | undefined; } | ResponsiveArray<...> | undefined;\n  \"justifySelf\"?: \"stretch\" | \"center\" | \"flex-end\" | \"flex-start\" | ResponsiveArray<1 | 2 | 3, \"stretch\" | \"center\" | \"flex-end\" | \"flex-start\" | null> | { mobile?: \"stretch\" | \"center\" | \"flex-end\" | \"flex-start\"; tablet?: \"stretch\" | ... 3 more ...; desktop?: \"stretch\" | ... 3 more ... | undefined; } | unde...;\n  \"key\"?: Key | null;\n  \"margin\"?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"8xl\" | \"9xl\" | ResponsiveArray<1 | 2 | 3, \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | ... 6 more ... | null> | { ...; };\n  \"marginBlockEnd\"?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"8xl\" | \"9xl\" | ResponsiveArray<1 | 2 | 3, \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | ... 6 more ... | null> | { ...; };\n  \"marginBlockStart\"?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"8xl\" | \"9xl\" | ResponsiveArray<1 | 2 | 3, \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | ... 6 more ... | null> | { ...; };\n  \"marginBottom\"?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"8xl\" | \"9xl\" | ResponsiveArray<1 | 2 | 3, \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | ... 6 more ... | null> | { ...; };\n  \"marginInlineEnd\"?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"8xl\" | \"9xl\" | ResponsiveArray<1 | 2 | 3, \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | ... 6 more ... | null> | { ...; };\n  \"marginInlineStart\"?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"8xl\" | \"9xl\" | ResponsiveArray<1 | 2 | 3, \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | ... 6 more ... | null> | { ...; };\n  \"marginLeft\"?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"8xl\" | \"9xl\" | ResponsiveArray<1 | 2 | 3, \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | ... 6 more ... | null> | { ...; };\n  \"marginRight\"?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"8xl\" | \"9xl\" | ResponsiveArray<1 | 2 | 3, \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | ... 6 more ... | null> | { ...; };\n  \"marginTop\"?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"8xl\" | \"9xl\" | ResponsiveArray<1 | 2 | 3, \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | ... 6 more ... | null> | { ...; };\n  \"marginX\"?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"8xl\" | \"9xl\" | ResponsiveArray<1 | 2 | 3, \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | ... 6 more ... | null> | { ...; };\n  \"marginY\"?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"8xl\" | \"9xl\" | ResponsiveArray<1 | 2 | 3, \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | ... 6 more ... | null> | { ...; };\n  \"onAbort\"?: ReactEventHandler<HTMLElement>;\n  \"onAbortCapture\"?: ReactEventHandler<HTMLElement>;\n  \"onAnimationEnd\"?: AnimationEventHandler<HTMLElement>;\n  \"onAnimationEndCapture\"?: AnimationEventHandler<HTMLElement>;\n  \"onAnimationIteration\"?: AnimationEventHandler<HTMLElement>;\n  \"onAnimationIterationCapture\"?: AnimationEventHandler<HTMLElement>;\n  \"onAnimationStart\"?: AnimationEventHandler<HTMLElement>;\n  \"onAnimationStartCapture\"?: AnimationEventHandler<HTMLElement>;\n  \"onAuxClick\"?: MouseEventHandler<HTMLElement>;\n  \"onAuxClickCapture\"?: MouseEventHandler<HTMLElement>;\n  \"onBeforeInput\"?: FormEventHandler<HTMLElement>;\n  \"onBeforeInputCapture\"?: FormEventHandler<HTMLElement>;\n  \"onBlur\"?: FocusEventHandler<HTMLElement>;\n  \"onBlurCapture\"?: FocusEventHandler<HTMLElement>;\n  \"onCanPlay\"?: ReactEventHandler<HTMLElement>;\n  \"onCanPlayCapture\"?: ReactEventHandler<HTMLElement>;\n  \"onCanPlayThrough\"?: ReactEventHandler<HTMLElement>;\n  \"onCanPlayThroughCapture\"?: ReactEventHandler<HTMLElement>;\n  \"onChange\"?: FormEventHandler<HTMLElement>;\n  \"onChangeCapture\"?: FormEventHandler<HTMLElement>;\n  \"onClick\"?: MouseEventHandler<HTMLElement>;\n  \"onClickCapture\"?: MouseEventHandler<HTMLElement>;\n  \"onCompositionEnd\"?: CompositionEventHandler<HTMLElement>;\n  \"onCompositionEndCapture\"?: CompositionEventHandler<HTMLElement>;\n  \"onCompositionStart\"?: CompositionEventHandler<HTMLElement>;\n  \"onCompositionStartCapture\"?: CompositionEventHandler<HTMLElement>;\n  \"onCompositionUpdate\"?: CompositionEventHandler<HTMLElement>;\n  \"onCompositionUpdateCapture\"?: CompositionEventHandler<HTMLElement>;\n  \"onContextMenu\"?: MouseEventHandler<HTMLElement>;\n  \"onContextMenuCapture\"?: MouseEventHandler<HTMLElement>;\n  \"onCopy\"?: ClipboardEventHandler<HTMLElement>;\n  \"onCopyCapture\"?: ClipboardEventHandler<HTMLElement>;\n  \"onCut\"?: ClipboardEventHandler<HTMLElement>;\n  \"onCutCapture\"?: ClipboardEventHandler<HTMLElement>;\n  \"onDoubleClick\"?: MouseEventHandler<HTMLElement>;\n  \"onDoubleClickCapture\"?: MouseEventHandler<HTMLElement>;\n  \"onDrag\"?: DragEventHandler<HTMLElement>;\n  \"onDragCapture\"?: DragEventHandler<HTMLElement>;\n  \"onDragEnd\"?: DragEventHandler<HTMLElement>;\n  \"onDragEndCapture\"?: DragEventHandler<HTMLElement>;\n  \"onDragEnter\"?: DragEventHandler<HTMLElement>;\n  \"onDragEnterCapture\"?: DragEventHandler<HTMLElement>;\n  \"onDragExit\"?: DragEventHandler<HTMLElement>;\n  \"onDragExitCapture\"?: DragEventHandler<HTMLElement>;\n  \"onDragLeave\"?: DragEventHandler<HTMLElement>;\n  \"onDragLeaveCapture\"?: DragEventHandler<HTMLElement>;\n  \"onDragOver\"?: DragEventHandler<HTMLElement>;\n  \"onDragOverCapture\"?: DragEventHandler<HTMLElement>;\n  \"onDragStart\"?: DragEventHandler<HTMLElement>;\n  \"onDragStartCapture\"?: DragEventHandler<HTMLElement>;\n  \"onDrop\"?: DragEventHandler<HTMLElement>;\n  \"onDropCapture\"?: DragEventHandler<HTMLElement>;\n  \"onDurationChange\"?: ReactEventHandler<HTMLElement>;\n  \"onDurationChangeCapture\"?: ReactEventHandler<HTMLElement>;\n  \"onEmptied\"?: ReactEventHandler<HTMLElement>;\n  \"onEmptiedCapture\"?: ReactEventHandler<HTMLElement>;\n  \"onEncrypted\"?: ReactEventHandler<HTMLElement>;\n  \"onEncryptedCapture\"?: ReactEventHandler<HTMLElement>;\n  \"onEnded\"?: ReactEventHandler<HTMLElement>;\n  \"onEndedCapture\"?: ReactEventHandler<HTMLElement>;\n  \"onError\"?: ReactEventHandler<HTMLElement>;\n  \"onErrorCapture\"?: ReactEventHandler<HTMLElement>;\n  \"onFocus\"?: FocusEventHandler<HTMLElement>;\n  \"onFocusCapture\"?: FocusEventHandler<HTMLElement>;\n  \"onGotPointerCapture\"?: PointerEventHandler<HTMLElement>;\n  \"onGotPointerCaptureCapture\"?: PointerEventHandler<HTMLElement>;\n  \"onInput\"?: FormEventHandler<HTMLElement>;\n  \"onInputCapture\"?: FormEventHandler<HTMLElement>;\n  \"onInvalid\"?: FormEventHandler<HTMLElement>;\n  \"onInvalidCapture\"?: FormEventHandler<HTMLElement>;\n  \"onKeyDown\"?: KeyboardEventHandler<HTMLElement>;\n  \"onKeyDownCapture\"?: KeyboardEventHandler<HTMLElement>;\n/** @deprecated */\n  \"onKeyPress\"?: KeyboardEventHandler<HTMLElement>;\n/** @deprecated */\n  \"onKeyPressCapture\"?: KeyboardEventHandler<HTMLElement>;\n  \"onKeyUp\"?: KeyboardEventHandler<HTMLElement>;\n  \"onKeyUpCapture\"?: KeyboardEventHandler<HTMLElement>;\n  \"onLoad\"?: ReactEventHandler<HTMLElement>;\n  \"onLoadCapture\"?: ReactEventHandler<HTMLElement>;\n  \"onLoadedData\"?: ReactEventHandler<HTMLElement>;\n  \"onLoadedDataCapture\"?: ReactEventHandler<HTMLElement>;\n  \"onLoadedMetadata\"?: ReactEventHandler<HTMLElement>;\n  \"onLoadedMetadataCapture\"?: ReactEventHandler<HTMLElement>;\n  \"onLoadStart\"?: ReactEventHandler<HTMLElement>;\n  \"onLoadStartCapture\"?: ReactEventHandler<HTMLElement>;\n  \"onLostPointerCapture\"?: PointerEventHandler<HTMLElement>;\n  \"onLostPointerCaptureCapture\"?: PointerEventHandler<HTMLElement>;\n  \"onMouseDown\"?: MouseEventHandler<HTMLElement>;\n  \"onMouseDownCapture\"?: MouseEventHandler<HTMLElement>;\n  \"onMouseEnter\"?: MouseEventHandler<HTMLElement>;\n  \"onMouseLeave\"?: MouseEventHandler<HTMLElement>;\n  \"onMouseMove\"?: MouseEventHandler<HTMLElement>;\n  \"onMouseMoveCapture\"?: MouseEventHandler<HTMLElement>;\n  \"onMouseOut\"?: MouseEventHandler<HTMLElement>;\n  \"onMouseOutCapture\"?: MouseEventHandler<HTMLElement>;\n  \"onMouseOver\"?: MouseEventHandler<HTMLElement>;\n  \"onMouseOverCapture\"?: MouseEventHandler<HTMLElement>;\n  \"onMouseUp\"?: MouseEventHandler<HTMLElement>;\n  \"onMouseUpCapture\"?: MouseEventHandler<HTMLElement>;\n  \"onPaste\"?: ClipboardEventHandler<HTMLElement>;\n  \"onPasteCapture\"?: ClipboardEventHandler<HTMLElement>;\n  \"onPause\"?: ReactEventHandler<HTMLElement>;\n  \"onPauseCapture\"?: ReactEventHandler<HTMLElement>;\n  \"onPlay\"?: ReactEventHandler<HTMLElement>;\n  \"onPlayCapture\"?: ReactEventHandler<HTMLElement>;\n  \"onPlaying\"?: ReactEventHandler<HTMLElement>;\n  \"onPlayingCapture\"?: ReactEventHandler<HTMLElement>;\n  \"onPointerCancel\"?: PointerEventHandler<HTMLElement>;\n  \"onPointerCancelCapture\"?: PointerEventHandler<HTMLElement>;\n  \"onPointerDown\"?: PointerEventHandler<HTMLElement>;\n  \"onPointerDownCapture\"?: PointerEventHandler<HTMLElement>;\n  \"onPointerEnter\"?: PointerEventHandler<HTMLElement>;\n  \"onPointerLeave\"?: PointerEventHandler<HTMLElement>;\n  \"onPointerMove\"?: PointerEventHandler<HTMLElement>;\n  \"onPointerMoveCapture\"?: PointerEventHandler<HTMLElement>;\n  \"onPointerOut\"?: PointerEventHandler<HTMLElement>;\n  \"onPointerOutCapture\"?: PointerEventHandler<HTMLElement>;\n  \"onPointerOver\"?: PointerEventHandler<HTMLElement>;\n  \"onPointerOverCapture\"?: PointerEventHandler<HTMLElement>;\n  \"onPointerUp\"?: PointerEventHandler<HTMLElement>;\n  \"onPointerUpCapture\"?: PointerEventHandler<HTMLElement>;\n  \"onProgress\"?: ReactEventHandler<HTMLElement>;\n  \"onProgressCapture\"?: ReactEventHandler<HTMLElement>;\n  \"onRateChange\"?: ReactEventHandler<HTMLElement>;\n  \"onRateChangeCapture\"?: ReactEventHandler<HTMLElement>;\n  \"onReset\"?: FormEventHandler<HTMLElement>;\n  \"onResetCapture\"?: FormEventHandler<HTMLElement>;\n  \"onResize\"?: ReactEventHandler<HTMLElement>;\n  \"onResizeCapture\"?: ReactEventHandler<HTMLElement>;\n  \"onScroll\"?: UIEventHandler<HTMLElement>;\n  \"onScrollCapture\"?: UIEventHandler<HTMLElement>;\n  \"onSeeked\"?: ReactEventHandler<HTMLElement>;\n  \"onSeekedCapture\"?: ReactEventHandler<HTMLElement>;\n  \"onSeeking\"?: ReactEventHandler<HTMLElement>;\n  \"onSeekingCapture\"?: ReactEventHandler<HTMLElement>;\n  \"onSelect\"?: ReactEventHandler<HTMLElement>;\n  \"onSelectCapture\"?: ReactEventHandler<HTMLElement>;\n  \"onStalled\"?: ReactEventHandler<HTMLElement>;\n  \"onStalledCapture\"?: ReactEventHandler<HTMLElement>;\n  \"onSubmit\"?: FormEventHandler<HTMLElement>;\n  \"onSubmitCapture\"?: FormEventHandler<HTMLElement>;\n  \"onSuspend\"?: ReactEventHandler<HTMLElement>;\n  \"onSuspendCapture\"?: ReactEventHandler<HTMLElement>;\n  \"onTimeUpdate\"?: ReactEventHandler<HTMLElement>;\n  \"onTimeUpdateCapture\"?: ReactEventHandler<HTMLElement>;\n  \"onTouchCancel\"?: TouchEventHandler<HTMLElement>;\n  \"onTouchCancelCapture\"?: TouchEventHandler<HTMLElement>;\n  \"onTouchEnd\"?: TouchEventHandler<HTMLElement>;\n  \"onTouchEndCapture\"?: TouchEventHandler<HTMLElement>;\n  \"onTouchMove\"?: TouchEventHandler<HTMLElement>;\n  \"onTouchMoveCapture\"?: TouchEventHandler<HTMLElement>;\n  \"onTouchStart\"?: TouchEventHandler<HTMLElement>;\n  \"onTouchStartCapture\"?: TouchEventHandler<HTMLElement>;\n  \"onTransitionEnd\"?: TransitionEventHandler<HTMLElement>;\n  \"onTransitionEndCapture\"?: TransitionEventHandler<HTMLElement>;\n  \"onVolumeChange\"?: ReactEventHandler<HTMLElement>;\n  \"onVolumeChangeCapture\"?: ReactEventHandler<HTMLElement>;\n  \"onWaiting\"?: ReactEventHandler<HTMLElement>;\n  \"onWaitingCapture\"?: ReactEventHandler<HTMLElement>;\n  \"onWheel\"?: WheelEventHandler<HTMLElement>;\n  \"onWheelCapture\"?: WheelEventHandler<HTMLElement>;\n  \"opacity\"?: \"none\" | \"medium\" | \"low\" | \"high\";\n  \"outline\"?: \"none\";\n  \"outlineColor\"?: \"support.error.subtler\" | \"support.error.subtle\" | \"support.error.medium\" | \"support.error.strong\" | \"support.success.subtler\" | \"support.success.subtle\" | \"support.success.medium\" | ... 25 more ...;\n  \"outlineOffset\"?: number;\n  \"outlineStyle\"?: \"solid\";\n  \"outlineWidth\"?: number;\n  \"padding\"?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"8xl\" | \"9xl\" | ResponsiveArray<1 | 2 | 3, \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | ... 6 more ... | null> | { ...; };\n  \"paddingBlockEnd\"?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"8xl\" | \"9xl\" | ResponsiveArray<1 | 2 | 3, \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | ... 6 more ... | null> | { ...; };\n  \"paddingBlockStart\"?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"8xl\" | \"9xl\" | { mobile?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | ... 5 more ...; tablet?: \"none\" | ... 13 more ...; desktop?: \"none\" | ... 13 more ... | undefined; } | Res...;\n  \"paddingBottom\"?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"8xl\" | \"9xl\" | ResponsiveArray<1 | 2 | 3, \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | ... 6 more ... | null> | { ...; };\n  \"paddingInlineEnd\"?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"8xl\" | \"9xl\" | ResponsiveArray<1 | 2 | 3, \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | ... 6 more ... | null> | { ...; };\n  \"paddingInlineStart\"?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"8xl\" | \"9xl\" | ResponsiveArray<1 | 2 | 3, \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | ... 6 more ... | null> | { ...; };\n  \"paddingLeft\"?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"8xl\" | \"9xl\" | ResponsiveArray<1 | 2 | 3, \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | ... 6 more ... | null> | { ...; };\n  \"paddingRight\"?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"8xl\" | \"9xl\" | ResponsiveArray<1 | 2 | 3, \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | ... 6 more ... | null> | { ...; };\n  \"paddingTop\"?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"8xl\" | \"9xl\" | ResponsiveArray<1 | 2 | 3, \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | ... 6 more ... | null> | { ...; };\n  \"paddingX\"?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"8xl\" | \"9xl\" | ResponsiveArray<1 | 2 | 3, \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | ... 6 more ... | null> | { ...; };\n  \"paddingY\"?: \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\" | \"6xl\" | \"7xl\" | \"8xl\" | \"9xl\" | ResponsiveArray<1 | 2 | 3, \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | ... 6 more ... | null> | { ...; };\n  \"placeItems\"?: \"stretch\" | \"center\" | \"flex-end\" | \"flex-start\" | ResponsiveArray<1 | 2 | 3, \"stretch\" | \"center\" | \"flex-end\" | \"flex-start\" | null> | { mobile?: \"stretch\" | \"center\" | \"flex-end\" | \"flex-start\"; tablet?: \"stretch\" | ... 3 more ...; desktop?: \"stretch\" | ... 3 more ... | undefined; } | unde...;\n  \"position\"?: \"fixed\" | \"absolute\" | \"relative\" | { mobile?: \"fixed\" | \"absolute\" | \"relative\"; tablet?: \"fixed\" | \"absolute\" | \"relative\"; desktop?: \"fixed\" | \"absolute\" | \"relative\" | undefined; } | ResponsiveArray<...> | undefined;\n/** Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} */\n  \"ref\"?: LegacyRef<HTMLDivElement>;\n  \"role\"?: AriaRole;\n  \"style\"?: CSSProperties;\n  \"tabIndex\"?: number;\n  \"transition\"?: \"transition.medium\";\n  \"transitionProperty\"?: \"opacity\" | \"transform\" | \"background-color\";\n  \"typography\"?: \"heading.h6.regular\" | \"heading.h6.medium\" | \"heading.h6.semibold\" | \"heading.h5.regular\" | \"heading.h5.medium\" | \"heading.h5.semibold\" | \"heading.h4.regular\" | \"heading.h4.medium\" | ... 28 more ...;\n  \"width\"?: \"full\";\n}",
   "ButtonSelect": "type ButtonSelectProps = {\n/** Identifies the element (or elements) that describes the object. */\n  \"aria-describedby\"?: string;\n/** Identifies the element (or elements) that provide a detailed, extended description for the object. */\n  \"aria-details\"?: string;\n/** Defines a string value that labels the current element. */\n  \"aria-label\"?: string;\n/** Identifies the element (or elements) that labels the current element. */\n  \"aria-labelledby\"?: string;\n/** The behaviour of the button select. */\n/** @default toggle */\n  \"buttonBehaviour\"?: ButtonBehaviour | ((activeKey: string) => ButtonBehaviour);\n/** The className applied to the root element of the component. */\n  \"className\"?: string;\n/** Represents a data block group. This is similar to `data-block-id` but it\ndoesn't have to be unique just like `class`. This is used to group blocks\ntogether in the DOM and in the block map. It is added as a data attribute\n`data-block-class` to the root element of the block if a DOM node is\nrendered. */\n  \"data-block-class\"?: string;\n/** The unique identifier for the block. This is used to identify the block in\nthe DOM and in the block map. It is added as a data attribute\n`data-block-id` to the root element of the block if a DOM node is\nrendered. */\n  \"data-block-id\"?: string;\n/** Sets the default open state of the menu. */\n  \"defaultOpen\"?: boolean;\n/** Whether the element should be selected (uncontrolled). */\n  \"defaultSelected\"?: boolean;\n/** The initial selected key in the collection (uncontrolled).\n@deprecated */\n  \"defaultSelectedKey\"?: Key;\n/** The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. */\n  \"disabledKeys\"?: Iterable<Key>;\n/** Whether to exclude the element from the sequential tab order. If true,\nthe element will not be focusable via the keyboard by tabbing. This should\nbe avoided except in rare scenarios where an alternative means of accessing\nthe element or its functionality via the keyboard is available. */\n  \"excludeFromTabOrder\"?: boolean;\n/** Whether to hide the label in the button. */\n/** @default false */\n  \"hideLabel\"?: boolean;\n/** Whether the input is disabled. */\n  \"isDisabled\"?: boolean;\n/** Sets the open state of the menu. */\n  \"isOpen\"?: boolean;\n/** Whether the element should be selected (controlled). */\n  \"isSelected\"?: boolean;\n/** The items to render in the listbox. Items have the following shape:\n\n```ts\nexport type ListOption = {\n  id: string;\n  label: string;\n  description?: string;\n  icon?: React.FC<IconProps>;\n};\n\nexport type ListSection = {\n  id: string;\n  title?: string;\n  type: \"section\";\n  children: ListOption[];\n};\n\ntype ListItem = ListOption | ListSection;\n``` */\n  \"items\"?: ListItem[];\n  \"key\"?: Key | null;\n/** The aria-label for the select button. */\n  \"moreAriaLabel\"?: string;\n/** A callback that is called when the button is pressed. */\n  \"onButtonAction\"?: ((options: { isSelected: boolean; selectedKey: string; buttonBehaviour: ButtonBehaviour; }) => void);\n/** A callback that is called when the button selection changes. */\n  \"onButtonSelectionChange\"?: ((options: { isSelected: boolean; selectedKey: string; }) => void);\n/** A callback that is called when the option in the dropdown is pressed. */\n  \"onOptionPress\"?: ((e: PressEvent, key: string) => void);\n/** Handler that is called when the press is released over the target. */\n  \"onPress\"?: ((e: PressEvent) => void);\n/** Handler that is called when the selection changes.\n@deprecated */\n  \"onSelectionChange\"?: ((key: Key | null) => void);\n/** A function that is called to get the class name for the option. */\n  \"optionClassName\"?: string | ((item: ListOption<Record<string, any>>, options: { isButton: boolean; isSelected: boolean; }) => string);\n/** A function that is called to get the style for the option. */\n  \"optionStyle\"?: CSSProperties | ((item: ListOption<Record<string, any>>, options: { isButton: boolean; isSelected: boolean; }) => CSSProperties);\n/** Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} */\n  \"ref\"?: LegacyRef<HTMLDivElement>;\n/** The currently selected key in the collection (controlled).\n@deprecated */\n  \"selectedKey\"?: Key | null;\n/** The size of the button. */\n/** @default md */\n  \"size\"?: \"md\" | \"lg\";\n/** The style applied to the root element of the component. */\n  \"style\"?: CSSProperties;\n/** Props for the tooltip. */\n  \"tooltipProps\"?: Omit<TooltipProps, \"children\"> | ((trigger: \"button\" | \"select\") => Omit<TooltipProps, \"children\">);\n/** The class name of the trigger element. */\n  \"triggerClassName\"?: string;\n/** The style of the trigger element. */\n  \"triggerStyle\"?: CSSProperties;\n/** The state of the select component. */\n  \"validationState\"?: \"valid\" | \"error\" | \"warning\";\n}",
   "Checkbox": "type CheckboxProps = {\n/** Identifies the element (or elements) whose contents or presence are controlled by the current element. */\n  \"aria-controls\"?: string;\n/** Identifies the element (or elements) that describes the object. */\n  \"aria-describedby\"?: string;\n/** Identifies the element (or elements) that provide a detailed, extended description for the object. */\n  \"aria-details\"?: string;\n/** Identifies the element that provides an error message for the object. */\n  \"aria-errormessage\"?: string;\n/** Defines a string value that labels the current element. */\n  \"aria-label\"?: string;\n/** Identifies the element (or elements) that labels the current element. */\n  \"aria-labelledby\"?: string;\n/** Whether the element should receive focus on render. */\n  \"autoFocus\"?: boolean;\n/** The className applied to the root element of the component. */\n  \"className\"?: string;\n/** Represents a data block group. This is similar to `data-block-id` but it\ndoesn't have to be unique just like `class`. This is used to group blocks\ntogether in the DOM and in the block map. It is added as a data attribute\n`data-block-class` to the root element of the block if a DOM node is\nrendered. */\n  \"data-block-class\"?: string;\n/** The unique identifier for the block. This is used to identify the block in\nthe DOM and in the block map. It is added as a data attribute\n`data-block-id` to the root element of the block if a DOM node is\nrendered. */\n  \"data-block-id\"?: string;\n/** Whether the element should be selected (uncontrolled). */\n  \"defaultSelected\"?: boolean;\n/** Whether to exclude the element from the sequential tab order. If true,\nthe element will not be focusable via the keyboard by tabbing. This should\nbe avoided except in rare scenarios where an alternative means of accessing\nthe element or its functionality via the keyboard is available. */\n  \"excludeFromTabOrder\"?: boolean;\n/** The `<form>` element to associate the input with.\nThe value of this attribute must be the id of a `<form>` in the same document.\nSee [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). */\n  \"form\"?: string;\n/** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */\n  \"id\"?: string;\n/** Whether the input is disabled. */\n  \"isDisabled\"?: boolean;\n/** Indeterminism is presentational only.\nThe indeterminate visual representation remains regardless of user interaction. */\n  \"isIndeterminate\"?: boolean;\n/** Whether the input value is invalid. */\n  \"isInvalid\"?: boolean;\n/** Whether the input can be selected but not changed by the user. */\n  \"isReadOnly\"?: boolean;\n/** Whether user input is required on the input before form submission. */\n  \"isRequired\"?: boolean;\n/** Whether the element should be selected (controlled). */\n  \"isSelected\"?: boolean;\n  \"key\"?: Key | null;\n/** The checkbox's label. */\n  \"label\"?: string;\n/** The position of the label */\n/** @default end */\n  \"labelPosition\"?: \"start\" | \"end\";\n/** The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname). */\n  \"name\"?: string;\n/** Handler that is called when the element loses focus. */\n  \"onBlur\"?: ((e: FocusEvent<Element, Element>) => void);\n/** Handler that is called when the element's selection state changes. */\n  \"onChange\"?: ((isSelected: boolean) => void);\n/** **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress`\nprovided for compatibility with other libraries. `onPress` provides \nadditional event details for non-mouse interactions. */\n  \"onClick\"?: ((e: MouseEvent<FocusableElement, MouseEvent>) => void);\n/** Handler that is called when the element receives focus. */\n  \"onFocus\"?: ((e: FocusEvent<Element, Element>) => void);\n/** Handler that is called when the element's focus status changes. */\n  \"onFocusChange\"?: ((isFocused: boolean) => void);\n/** Handler that is called when a key is pressed. */\n  \"onKeyDown\"?: ((e: KeyboardEvent) => void);\n/** Handler that is called when a key is released. */\n  \"onKeyUp\"?: ((e: KeyboardEvent) => void);\n/** Handler that is called when the press is released over the target. */\n  \"onPress\"?: ((e: PressEvent) => void);\n/** Handler that is called when the press state changes. */\n  \"onPressChange\"?: ((isPressed: boolean) => void);\n/** Handler that is called when a press interaction ends, either\nover the target or when the pointer leaves the target. */\n  \"onPressEnd\"?: ((e: PressEvent) => void);\n/** Handler that is called when a press interaction starts. */\n  \"onPressStart\"?: ((e: PressEvent) => void);\n/** Handler that is called when a press is released over the target, regardless of\nwhether it started on the target or not. */\n  \"onPressUp\"?: ((e: PressEvent) => void);\n/** Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} */\n  \"ref\"?: LegacyRef<HTMLLabelElement>;\n/** The style applied to the root element of the component. */\n  \"style\"?: CSSProperties;\n/** The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue). */\n  \"value\"?: string;\n}",
+  "Code": "type CodeProps = {\n/** The code to render. */\n  \"children\": ReactNode;\n/** The className applied to the root element of the component. */\n  \"className\"?: string;\n  \"key\"?: Key | null;\n/** Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} */\n  \"ref\"?: LegacyRef<HTMLPreElement>;\n/** The style applied to the root element of the component. */\n  \"style\"?: CSSProperties;\n}",
   "ColorInput": "type ColorInputProps = {\n/** The label to show on the add color button. */\n/** @default Add color */\n  \"addColorButtonLabel\"?: string;\n/** Whether to allow alpha values in the custom color picker. */\n/** @default true */\n  \"allowAlpha\"?: boolean;\n/** Whether to allow the removal of the color. */\n/** @default false */\n  \"allowRemoval\"?: boolean;\n/** Defines a string value that labels the current element. */\n  \"aria-label\"?: string;\n/** Element that that serves as the positioning boundary. */\n/** @default document.body */\n  \"boundaryElement\"?: Element;\n/** The className applied to the root element of the component. */\n  \"className\"?: string;\n/** Whether to show the color label. The color label is the name of the color\nthat is currently selected. If boolean, the label will be shown only when\nthe color is not `null`. If a function, the function will be called with\nthe current color and should return a string. If `false`, the label will\nnot be shown. */\n/** @default true */\n  \"colorLabel\"?: boolean | ((color: Color | null, options: { isIndeterminate: boolean; }) => string);\n/** The additional offset applied along the cross axis between the element and its\nanchor element. */\n/** @default 0 */\n  \"crossOffset\"?: number;\n/** The label to show on the custom colors section. */\n/** @default Custom colors */\n  \"customColorsLabel\"?: string;\n/** Represents a data block group. This is similar to `data-block-id` but it\ndoesn't have to be unique just like `class`. This is used to group blocks\ntogether in the DOM and in the block map. It is added as a data attribute\n`data-block-class` to the root element of the block if a DOM node is\nrendered. */\n  \"data-block-class\"?: string;\n/** The unique identifier for the block. This is used to identify the block in\nthe DOM and in the block map. It is added as a data attribute\n`data-block-id` to the root element of the block if a DOM node is\nrendered. */\n  \"data-block-id\"?: string;\n/** Whether the overlay is open by default (uncontrolled). */\n  \"defaultOpen\"?: boolean;\n/** The default value (uncontrolled). */\n  \"defaultValue\"?: string | Color | null;\n/** Whether to include the custom color picker. If `false`, the color picker\nwill only show the color presets. The custom color picker allows the user\nto pick any color. You can set the `allowAlpha` prop to `false` to disable\nthe alpha channel. */\n/** @default true */\n  \"includePicker\"?: boolean;\n/** The icon to display when the swatch is indeterminate. The icon should be a\n16x16px icon to ensure consistency with the design system. */\n/** @default HelpIcon */\n  \"indeterminateIcon\"?: FC<IconProps> | null;\n/** Whether the input is disabled. */\n  \"isDisabled\"?: boolean;\n/** Whether the color input is indeterminate. */\n/** @default false */\n  \"isIndeterminate\"?: boolean;\n/** Whether the popover is non-modal, i.e. elements outside the popover may be\ninteracted with by assistive technologies.\n\nMost popovers should not use this option as it may negatively impact the screen\nreader experience. Only use with components such as combobox, which are designed\nto handle this situation carefully. */\n  \"isNonModal\"?: boolean;\n/** Whether the overlay is open by default (controlled). */\n  \"isOpen\"?: boolean;\n  \"key\"?: Key | null;\n/** The content to display as the label. */\n  \"label\"?: ReactNode;\n/** The label position of the color input. */\n/** @default top */\n  \"labelPosition\"?: \"top\" | \"start\";\n/** The additional offset applied along the main axis between the element and its\nanchor element. */\n/** @default 2 */\n  \"offset\"?: number;\n/** Handler that is called when the value changes. */\n  \"onChange\"?: ((color: Color | null) => void);\n/** Handler that is called when the user stops dragging or clicking on the\ncolor picker. In case of presets, this is called when the user clicks on a\ncolor preset. */\n  \"onChangeEnd\"?: ((color: Color | null) => void);\n/** Handler that is called when the overlay's open state changes. */\n  \"onOpenChange\"?: ((isOpen: boolean) => void);\n/** Handler that is called when the user presses the trigger button. This can\nbe used to track events like clicks on the trigger button. */\n  \"onTriggerPress\"?: ((event: PressEvent) => void);\n/** Whether to show the color picker in active or lazy mode. In active mode,\nthe color picker will be rendered when the color input popover is open and\nthe value of the color input will be updated when the user picks a color.\nIn lazy mode, the color picker will be rendered only when the user clicks\non the \"Add color\" button and the selected color will be added to custom\ncolors when the user clicks on the \"Add color\" button. */\n/** @default active */\n  \"pickerMode\"?: \"active\" | \"lazy\";\n/** The placement of the element with respect to its anchor element. */\n/** @default labelPosition === \"start\" ? \"bottom end\" : \"bottom start\" */\n  \"placement\"?: Placement;\n/** The container element for the popover. By default, the modal is rendered as\na child of the body element. */\n/** @default document.body */\n  \"portalContainer\"?: HTMLElement;\n/** The list of color presets to show in the color picker. The signature of the\ncolor presets is:\n\n```ts\nexport interface ColorPreset {\n  label: string;\n  color: string;\n}\n```\n\nThe color can be a hex or hexa value. */\n  \"presets\"?: ColorPreset[];\n/** Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} */\n  \"ref\"?: LegacyRef<HTMLDivElement>;\n/** The label to show on the remove color button. */\n/** @default Remove color */\n  \"removeColorButtonLabel\"?: string;\n/** An optional function to render the custom trigger button.\n@param options */\n/** @default Function */\n  \"renderTriggerButton\"?: ((options: { isOpen: boolean; color: Color | null; ref: RefObject<HTMLButtonElement>; colorName?: string | boolean; triggerProps: AriaButtonProps<\"button\">; labelId?: string; } & Pick<...>) => Element) | undefined;\n/** Whether the element should flip its orientation (e.g. top to bottom or left to right) when\nthere is insufficient room for it to render completely. */\n/** @default true */\n  \"shouldFlip\"?: boolean;\n/** Whether the overlay should update its position automatically. */\n/** @default true */\n  \"shouldUpdatePosition\"?: boolean;\n/** The key to use to store the picked color in the local storage. */\n/** @default baselinePickedColor */\n  \"storePickedColorKey\"?: string;\n/** The style applied to the root element of the component. */\n  \"style\"?: CSSProperties;\n/** The current value (controlled). */\n  \"value\"?: string | Color | null;\n}",
   "ColorSwatch": "type ColorSwatchProps = {\n/** Identifies the element (or elements) that describes the object. */\n  \"aria-describedby\"?: string;\n/** Identifies the element (or elements) that provide a detailed, extended description for the object. */\n  \"aria-details\"?: string;\n/** Defines a string value that labels the current element. */\n  \"aria-label\"?: string;\n/** Identifies the element (or elements) that labels the current element. */\n  \"aria-labelledby\"?: string;\n/** The className applied to the root element of the component. */\n  \"className\"?: string;\n/** The color value to display in the swatch. */\n  \"color\"?: string | Color;\n/** Represents a data block group. This is similar to `data-block-id` but it\ndoesn't have to be unique just like `class`. This is used to group blocks\ntogether in the DOM and in the block map. It is added as a data attribute\n`data-block-class` to the root element of the block if a DOM node is\nrendered. */\n  \"data-block-class\"?: string;\n/** The unique identifier for the block. This is used to identify the block in\nthe DOM and in the block map. It is added as a data attribute\n`data-block-id` to the root element of the block if a DOM node is\nrendered. */\n  \"data-block-id\"?: string;\n/** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */\n  \"id\"?: string;\n/** The icon to display when the swatch is indeterminate. The icon should be a\n16x16px icon to ensure consistency with the design system. */\n/** @default HelpIcon */\n  \"indeterminateIcon\"?: FC<IconProps> | null;\n/** Whether the swatch is disabled. This is used to determine whether to show\ndisabled styles. */\n  \"isDisabled\"?: boolean;\n/** Whether the swatch is focused by keyboard. */\n  \"isFocusVisible\"?: boolean;\n/** Whether the swatch is indeterminate. When this is `true`, the color related\nprops will be ignored and indeterminate styles will be applied. This change\nis only visual. */\n/** @default false */\n  \"isIndeterminate\"?: boolean;\n/** Whether the swatch is interactive. This is used to determine whether to\nshow hover styles. */\n  \"isInteractive\"?: boolean;\n/** Whether the swatch is selected. */\n  \"isSelected\"?: boolean;\n  \"key\"?: Key | null;\n/** Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} */\n  \"ref\"?: LegacyRef<HTMLDivElement>;\n/** The style applied to the root element of the component. */\n  \"style\"?: CSSProperties;\n/** Whether to show a tooltip. You can pass a boolean or a partial tooltip\nobject that extends the default tooltip props. */\n/** @default false */\n  \"tooltip\"?: boolean | Partial<Omit<TooltipProps, \"children\">>;\n}",
   "ColorSwatchPicker": "type ColorSwatchPickerProps = {\n/** Identifies the element (or elements) that describes the object. */\n  \"aria-describedby\"?: string;\n/** Identifies the element (or elements) that provide a detailed, extended description for the object. */\n  \"aria-details\"?: string;\n/** Defines a string value that labels the current element. */\n  \"aria-label\"?: string;\n/** Identifies the element (or elements) that labels the current element. */\n  \"aria-labelledby\"?: string;\n/** The className applied to the root element of the component. */\n  \"className\"?: string;\n/** Represents a data block group. This is similar to `data-block-id` but it\ndoesn't have to be unique just like `class`. This is used to group blocks\ntogether in the DOM and in the block map. It is added as a data attribute\n`data-block-class` to the root element of the block if a DOM node is\nrendered. */\n  \"data-block-class\"?: string;\n/** The unique identifier for the block. This is used to identify the block in\nthe DOM and in the block map. It is added as a data attribute\n`data-block-id` to the root element of the block if a DOM node is\nrendered. */\n  \"data-block-id\"?: string;\n/** The default value of the picker. */\n  \"defaultValue\"?: string;\n/** The icon visible at the start of the picker. */\n  \"icon\"?: FC<IconProps>;\n/** Whether the picker is disabled. */\n  \"isDisabled\"?: boolean;\n/** The items to display in the picker. Each item should have a `color` and a\n`label`.\n\n```js\nconst items = [\n  { color: \"#FF0000\", label: \"Red\" },\n  { color: \"#00FF00\", label: \"Green\" },\n  { color: \"#0000FF\", label: \"Blue\" },\n  { color: \"#FFFF00\", label: \"Yellow\" },\n];\n``` */\n  \"items\": ColorPreset[];\n  \"key\"?: Key | null;\n/** The label for the picker. */\n  \"label\"?: string;\n/** The position of the label relative to the input. */\n/** @default top */\n  \"labelPosition\"?: \"top\" | \"start\";\n/** A function that is called when the selected item changes. */\n  \"onChange\"?: ((value?: string) => void);\n/** The CSS class name for the option. */\n  \"optionClassName\"?: string | ((item: ListOption<Record<string, any>>, state: UIState) => string);\n/** The class name for the group container. */\n  \"optionsContainerClassName\"?: string;\n/** The style of the option. */\n  \"optionStyle\"?: CSSProperties | ((item: ListOption<Record<string, any>>, state: UIState) => CSSProperties);\n/** Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} */\n  \"ref\"?: LegacyRef<HTMLDivElement>;\n/** Whether focus should wrap around when the end/start is reached. */\n  \"shouldFocusWrap\"?: boolean;\n/** The style applied to the root element of the component. */\n  \"style\"?: CSSProperties;\n/** Whether to show a tooltip. You can pass a boolean or a partial tooltip\nobject that extends the default tooltip props. */\n/** @default true */\n  \"tooltip\"?: boolean | Partial<Omit<TooltipProps, \"children\">>;\n/** The value of the selected item. This is useful if you want to control the\nvalue of the picker. */\n  \"value\"?: string;\n}",

package/dist/data/components.json

@@ -79,6 +79,14 @@
     "hasTypes": true,
     "path": "core/src/components/Checkbox"
   },
+  {
+    "name": "Code",
+    "description": "The `Code` component is used to display code snippets in a readable, formatted way. It provides a styled container with monospace typography and automatic scrolling for long code blocks.",
+    "hasMdx": true,
+    "hasTsx": true,
+    "hasTypes": true,
+    "path": "core/src/components/Code"
+  },
   {
     "name": "ColorInput",
     "description": "The `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.",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baseline-ui/mcp",
-  "version": "0.0.0-nightly-20251203000617",
+  "version": "0.0.0-nightly-20251205000606",
   "description": "MCP server for Baseline UI design system documentation",
   "type": "module",
   "bin": "dist/index.js",