@baseline-ui/mcp 3.0.1 → 3.2.0

package/dist/server.cjs

@@ -11809,6 +11809,39 @@ export function ScrollIntoViewImageGalleryExample() {
  );
 }
 
+export function MountEffectScrollIntoViewImageGalleryExample() {
+ const listBoxHandle = React.useRef<ListHandle>(null);
+ const galleryItems = Array.from({ length: 20 }, (_, i) => {
+ const index = i + 1;
+ return {
+ id: \`image-\${i}\`,
+ src: resolvePublicUrl(\`gallery/\${(index % 10) + 1}.jpg\`),
+ alt: \`Image \${index}\`,
+ label: index.toString(),
+ };
+ });
+
+ // Scrolls from the consumer's own mount effect, which runs before the list box's
+ // collection has rendered any options.
+ React.useEffect(() => {
+ listBoxHandle.current?.scrollIntoView("image-15");
+ }, []);
+
+ return (
+ <Box display="flex" flexDirection="column" gap="md" style={{ width: 500 }}>
+ <div
+ style={{
+ maxHeight: 300,
+ overflow: "auto",
+ border: "1px solid #ccc",
+ }}
+ >
+ <ImageGallery items={galleryItems} listBoxHandle={listBoxHandle} />
+ </div>
+ </Box>
+ );
+}
+
 // Counts \`renderImage\` calls so a spec can prove that a re-render which changes nothing
 // the gallery reads does not throw away the list box's cached options. \`Report\` publishes
 // the tally taken *before* its own render, so two clicks bracket exactly one re-render.
@@ -13879,7 +13912,8 @@ console.log(greet('Markdown Maverick'));
 | Row 1, Col 1    | Row 1, Col 2    | Row 1, Col 3    |
 | Row 2, Col 1    | Row 2, Col 2    | Row 2, Col 3    |
 | Row 3, Col 1    | Row 3, Col 2    | Row 3, Col 3    |
-\`}</Markdown>;`},{id:"core-content-markdown--with-caret",name:"With Caret",snippet:'const WithCaret = () => <div style={{ width: "150px" }}>\n    <Markdown showCaret>{`This is a long sentence that showcases how Markdown component looks with a caret at the end.`}</Markdown>\n</div>;'}],implementation:""},similarTo:[],figmaUrl:null},Menu:{id:"core-collections-menu",breadcrumb:"Core/Collections/Menu",importStatement:'import { ActionButton, Menu } from "@baseline-ui/core";',description:"`Menu` is a popup list of actions or options revealed by a trigger, with support for sections, selection, and keyboard typeahead. Use it for contextual command lists, overflow actions, or selecting a value from a moderate set of choices.",documentation:`\`Menu\` is a popup list of actions or options revealed by a trigger, with support for sections, selection, and keyboard typeahead. Use it for contextual command lists, overflow actions, or selecting a value from a moderate set of choices.
+\`}</Markdown>;`},{id:"core-content-markdown--with-caret",name:"With Caret",snippet:'const WithCaret = () => <div style={{ width: "150px" }}>\n    <Markdown showCaret>{`This is a long sentence that showcases how Markdown component looks with a caret at the end.`}</Markdown>\n</div>;'}],implementation:""},similarTo:[],figmaUrl:null},Menu:{id:"core-collections-menu",breadcrumb:"Core/Collections/Menu",importStatement:`import { ActionButton, Avatar, Box, Menu } from "@baseline-ui/core";
+import { CheckmarkIcon } from "@baseline-ui/icons/16";`,description:"`Menu` is a popup list of actions or options revealed by a trigger, with support for sections, selection, and keyboard typeahead. Use it for contextual command lists, overflow actions, or selecting a value from a moderate set of choices.",documentation:`\`Menu\` is a popup list of actions or options revealed by a trigger, with support for sections, selection, and keyboard typeahead. Use it for contextual command lists, overflow actions, or selecting a value from a moderate set of choices.
 
 1. ARIA compliant: Ensures the \`Menu\` component is accessible to users with disabilities.
 2. Selection options: The component can be configured to allow single, multiple, or no selection.
@@ -13891,6 +13925,7 @@ console.log(greet('Markdown Maverick'));
 8. Keyboard menu opening: The menu can be opened using the keyboard, and automatically focuses on the first or last item.
 9. Typeahead: Users can quickly navigate to a menu item by typing the first few letters of the item's label.
 10. Virtualized scrolling: For long lists, performance is improved by only rendering the visible items.
+11. Per-item customization: Options can take a class, an inline style, or a completely custom body.
 
 Pass the list of options via \`items\` and a \`triggerLabel\` for the default
 \`ActionButton\` trigger. \`Menu\` renders its own trigger and popover \u2014 it does not
@@ -13915,7 +13950,8 @@ you need on/off state rather than a command list, use \`ToggleButton\`; to pick
 value from a set with an always-visible field, use \`Select\`.
 
 Each option accepts an optional leading \`icon\` (a \`@baseline-ui/icons\` component)
-and a \`keyboardShortcut\` string rendered at the trailing edge of the item.
+and a \`keyboardShortcut\` string rendered at the trailing edge of the item. An
+option with a submenu spends that slot on its chevron instead.
 
 \`\`\`jsx
 import { CopyIcon, TrashIcon } from "@baseline-ui/icons/16";
@@ -13926,6 +13962,110 @@ const items = [
 ];
 \`\`\`
 
+\`optionClassName\`, \`optionStyle\` and \`renderOption\` are props on \`Menu\`, not
+fields on an item. \`optionClassName\` and \`optionStyle\` take either a plain value
+or a function of the option and its current state; \`renderOption\` is always such
+a function. One row is styled by branching inside that function rather than by
+annotating the item.
+
+\`renderOption\` replaces an option's contents outright, which is how an item
+holds a badge, an avatar, or a two-line body. Keyboard navigation and selection
+behavior are unchanged, but the row's own presentation is not: the hover, focus
+and disabled styling and the trailing \`keyboardShortcut\` all live in the default
+body you are replacing, so draw whatever of them you need from the render state.
+Keep a text label in the output \u2014 it is what names the option to a screen
+reader.
+
+An assignee picker is the shape that needs all of this at once: each row carries
+an avatar and a trailing presence label the default body has no slot for, offline
+people are muted, and the row redraws the focus ring and the selection check
+that came with the body \`renderOption\` replaced, while \`optionStyle\` carries the
+row-level background and text colour. Anything an
+option needs beyond \`label\` rides along in its \`data\`.
+
+\`\`\`jsx
+import { Avatar, Box } from "@baseline-ui/core";
+import { CheckmarkIcon } from "@baseline-ui/icons/16";
+import { themeVars } from "@baseline-ui/tokens";
+
+const assignees = [
+ { id: "ana", label: "Ana Silva", data: { status: "Online" } },
+ { id: "sam", label: "Sam Ortiz", data: { status: "Offline" } },
+];
+
+const PRESENCE_COLOR = {
+ Online: themeVars.color.support.success.medium,
+ Away: themeVars.color.support.warning.medium,
+ Offline: themeVars.color.icon.secondary,
+};
+
+<Menu
+ items={assignees}
+ triggerLabel="Assign to"
+ selectionMode="single"
+ defaultSelectedKeys={["ana"]}
+ optionClassName="MyApp-AssigneeOption"
+ optionStyle={(item, { isHovered }) => ({
+ backgroundColor: isHovered
+ ? themeVars.color.background.primary.medium
+ : themeVars.color.background.primary.subtle,
+ color:
+ item.data?.status === "Offline"
+ ? themeVars.color.text.secondary
+ : themeVars.color.text.primary,
+ })}
+ renderOption={(item, { isSelected, isFocusVisible }) => (
+ <Box
+ display="flex"
+ alignItems="center"
+ gap="lg"
+ width="full"
+ paddingX="lg"
+ style={{ height: 36 }}
+ outlineColor={isFocusVisible ? "focused.default" : "transparent"}
+ outlineWidth={2}
+ outlineStyle="solid"
+ outlineOffset={-2}
+ >
+ <Box aria-hidden={true} display="flex">
+ <Avatar name={item.label} size="sm" showInitials={true} />
+ </Box>
+ <Box flex={1}>{item.label}</Box>
+ <Box display="flex" alignItems="center" gap="sm" style={{ width: 72 }}>
+ <Box
+ aria-hidden={true}
+ style={{
+ width: 8,
+ height: 8,
+ borderRadius: "50%",
+ backgroundColor: PRESENCE_COLOR[item.data?.status],
+ }}
+ />
+ <Box color="text.secondary">{item.data?.status}</Box>
+ </Box>
+ <Box display="flex" style={{ width: 16 }}>
+ {isSelected ? <CheckmarkIcon size={16} /> : null}
+ </Box>
+ </Box>
+ )}
+/>;
+\`\`\`
+
+The avatar and the presence dot are \`aria-hidden\` because each only restates
+something already beside it; the status word is not, because it is what carries
+presence to a screen reader. Colour is never the only cue.
+
+\`renderOption\` replaces the row's contents \u2014 the default selection indicator and a
+submenu option's chevron included \u2014 so draw your own from the \`isSelected\` and
+\`hasSubmenu\` render state when you need them, as the check above does. A submenu
+chevron has to mirror itself under RTL; the built-in one already does. A function
+given to any of these three props is compared by identity, so an inline one can
+rebuild cached options on each render; memoize it for long or sectioned menus.
+
+\`itemClassName\` is the older string-only form of \`optionClassName\` and is
+deprecated. It applies to the item element, and both classes are added when both
+are set, but prefer \`optionClassName\`.
+
 The \`Menu\` component can be configured to allow single, multiple, or no selection. The default is no selection. To allow single selection, set the \`selectionMode\` prop to \`single\`. To allow multiple selection, set the \`selectionMode\` prop to \`multiple\`.
 Use \`defaultSelectedKeys\` to provide a default set of selected items (uncontrolled) and \`selectedKeys\` to set the selected items (controlled).
 The value of the selected keys must match the \`id\` prop of the items.
@@ -14056,6 +14196,39 @@ onOpenChange?: (isOpen: boolean) => void
  * @default 'press'
  */
 trigger?: 'press' | 'longPress'
+/**
+ * The custom render function for the collection's options.
+ * 
+ * Replaces the option's entire contents, the default selection indicator
+ * included, so render your own affordance from \`options\` when you need one.
+ * The hover, focus and disabled styling lives in that default body too \u2014
+ * only selection and keyboard behavior are unaffected. Keep a text label in
+ * the output; it is what names the option to a screen reader.
+ * 
+ * Reading component state here works, at the cost of rebuilding every cached option and
+ * section whenever the function's identity changes \u2014 see {@link UNSAFE_ListBoxProps.items}
+ * for when that cost applies.
+ */
+renderOption?: (item: TOption, options: TRenderProps) => React.ReactNode
+/**
+ * A CSS class name added to the option's built-in classes.
+ * 
+ * Compared by identity, so an inline function or an unmemoized value rebuilds every
+ * cached option and section on each render. A plain string is compared by value.
+ */
+optionClassName?: | string
+| ((item: TOption, renderProps: TRenderProps) => string | undefined)
+/**
+ * The style of the option.
+ * 
+ * Compared by identity, so an inline function or object literal rebuilds every cached
+ * option and section on each render \u2014 memoize it to avoid that.
+ */
+optionStyle?: | React.CSSProperties
+| ((
+    item: TOption,
+    renderProps: TRenderProps,
+  ) => React.CSSProperties | undefined)
 /**
  * The \`className\` property assigned to the root element of the component.
  */
@@ -14066,6 +14239,9 @@ className?: string
 contentClassName?: string
 /**
  * The \`className\` property assigned to the item element of the component.
+ * 
+ * @deprecated Use \`optionClassName\`, which also accepts a function of the item
+ * and its render state. Both are applied when set.
  */
 itemClassName?: string
 /**
@@ -14184,14 +14360,68 @@ placement?: any
               if (meta) setSel((prev) => ({ ...prev, [meta.sectionId]: keys }));
             }} />
     );
-};`}],implementation:`import React from "react";
+};`},{id:"core-collections-menu--with-custom-options",name:"With Custom Options",snippet:`const WithCustomOptions = () => <Menu
+    triggerLabel="Menu Trigger"
+    items={assigneeItems}
+    defaultOpen
+    selectionMode="single"
+    defaultSelectedKeys={["jo"]}
+    optionStyle={(item, { isHovered }) => ({
+      backgroundColor: isHovered
+        ? themeVars.color.background.primary.medium
+        : themeVars.color.background.primary.subtle,
+      color:
+        item.data?.status === "Offline"
+          ? themeVars.color.text.secondary
+          : themeVars.color.text.primary,
+    })}
+    renderOption={(item, { isSelected, isFocusVisible }) => (
+      <Box
+        display="flex"
+        alignItems="center"
+        gap="lg"
+        width="full"
+        paddingX="lg"
+        style={{ height: 36 }}
+        outlineColor={isFocusVisible ? "focused.default" : "transparent"}
+        outlineWidth={2}
+        outlineStyle="solid"
+        outlineOffset={-2}
+      >
+        <Box aria-hidden={true} display="flex">
+          <Avatar name={item.label} size="sm" showInitials={true} />
+        </Box>
+        <Box flex={1} typography="body.md.regular">
+          {item.label}
+        </Box>
+        <Box display="flex" alignItems="center" gap="sm" style={{ width: 72 }}>
+          <Box
+            aria-hidden={true}
+            style={{
+              width: 8,
+              height: 8,
+              borderRadius: "50%",
+              backgroundColor: PRESENCE_COLOR[item.data?.status ?? "Offline"],
+            }}
+          />
+          <Box color="text.secondary" typography="label.sm.regular">
+            {item.data?.status}
+          </Box>
+        </Box>
+        <Box display="flex" style={{ width: 16 }}>
+          {isSelected ? <CheckmarkIcon size={16} /> : null}
+        </Box>
+      </Box>
+    )} />;`}],implementation:`import React from "react";
 
+import { ActionButton } from "../../ActionButton/ActionButton";
 import { I18nProvider } from "../../I18nProvider/I18nProvider";
 import { Menu } from "../Menu";
 import { items, itemsWithSections, itemsWithSubmenu } from "./data";
 
-import type { MenuProps } from "../Menu.types";
+import type { MenuOption, MenuProps } from "../Menu.types";
 import type { Key } from "react-aria";
+import type { MenuItemRenderProps } from "react-aria-components";
 import type { Selection } from "react-stately";
 
 export const MenuExample: React.FC<
@@ -14396,6 +14626,78 @@ export const MenuPartialSectionSelectionExample: React.FC<{
  <div data-testid="menu-partial-action">{action}</div>
  </>
  );
+};
+
+const optionClassNames = {
+ perItem: (item: MenuOption) => \`option-\${item.id}\`,
+ perRenderState: (item: MenuOption, { isFocusVisible }: MenuItemRenderProps) =>
+ isFocusVisible ? \`option-\${item.id} focus-visible\` : \`option-\${item.id}\`,
+};
+
+const renderCustomOption = (
+ item: MenuOption,
+ { hasSubmenu, isSelected }: MenuItemRenderProps,
+) => (
+ <span data-testid={\`custom-\${item.id}\`} data-selected={isSelected}>
+ {item.label}
+ {hasSubmenu ? " (submenu)" : ""}
+ </span>
+);
+
+// Callbacks can't cross the CT mount boundary, so they are selected by name.
+export const MenuOptionCustomisationExample: React.FC<{
+ label: string;
+ items?: MenuProps["items"];
+ itemClassName?: string;
+ optionClassName?: keyof typeof optionClassNames;
+ withRenderOption?: boolean;
+ selectionMode?: "single" | "multiple";
+}> = ({
+ label,
+ items: menuItems = items,
+ itemClassName,
+ optionClassName = "perItem",
+ withRenderOption = false,
+ selectionMode,
+}) => (
+ <Menu
+ items={menuItems}
+ triggerLabel={label}
+ defaultOpen={true}
+ selectionMode={selectionMode}
+ itemClassName={itemClassName}
+ optionClassName={optionClassNames[optionClassName]}
+ renderOption={withRenderOption ? renderCustomOption : undefined}
+ />
+);
+
+export const MenuSectionOptionClassToggleExample: React.FC<{
+ label: string;
+}> = ({ label }) => {
+ const [flagged, setFlagged] = React.useState(false);
+ const optionClassName = React.useCallback(
+ () => (flagged ? "flagged" : "unflagged"),
+ [flagged],
+ );
+
+ return (
+ <>
+ <ActionButton
+ label="Toggle"
+ onPress={() => {
+ setFlagged((v) => !v);
+ }}
+ />
+ <Menu
+ items={itemsWithSections}
+ triggerLabel={label}
+ // Keep the menu mounted while the outside toggle changes the callback.
+ isOpen={true}
+ isNonModal={true}
+ optionClassName={optionClassName}
+ />
+ </>
+ );
 };`},similarTo:[],figmaUrl:null},MessageFormat:{id:"core-utilities-messageformat",breadcrumb:"Core/Utilities/MessageFormat",importStatement:'import { MessageFormat } from "@baseline-ui/core";',description:"`MessageFormat` renders a single message from the catalog supplied to `I18nProvider`. When the catalog has no entry for `id`, it renders `defaultMessage` \u2014 and when it was given no `defaultMessage` either, the `id` itself. Unlike the rest of the library, it has no English of its own to fall back on: `id` arrives at runtime, so pass a catalog covering it or a `defaultMessage` beside it.",documentation:'`MessageFormat` renders a single message from the catalog supplied to `I18nProvider`. When the catalog has no entry for `id`, it renders `defaultMessage` \u2014 and when it was given no `defaultMessage` either, the `id` itself. Unlike the rest of the library, it has no English of its own to fall back on: `id` arrives at runtime, so pass a catalog covering it or a `defaultMessage` beside it.\n\nBecause it is a component rather than a hook, it is also how a class component reaches a translation \u2014 see [From a class component](/?path=/docs/internationalization--docs#from-a-class-component).\n\n```jsx\nimport { I18nProvider, MessageFormat } from "@baseline-ui/core";\nimport en from "@baseline-ui/core/intl/en.json";\nimport fr from "@baseline-ui/core/intl/fr.json";\n\nconst App = () => (\n <I18nProvider locale="en" messages={{ en, fr }}>\n <MessageFormat id="bui.calendar.previousMonth" />\n <MessageFormat id="myApp.hello" defaultMessage="Hello!" />\n </I18nProvider>\n);\n```\n\nPassing `id` and `defaultMessage` as separate props leaves `defaultMessage` easy to omit, and an `id` nothing answers for renders as itself. Declaring the message with `defineMessages` and spreading the descriptor keeps the two together, so there is no way to pass one without the other \u2014 and the same descriptor is what the extraction pipeline reads:\n\n```jsx\nimport { defineMessages, MessageFormat } from "@baseline-ui/core";\n\nconst messages = defineMessages({\n hello: {\n id: "myApp.hello",\n defaultMessage: "Hello, {name}!",\n description: "Greeting shown at the top of the dashboard.",\n },\n});\n\n<MessageFormat {...messages.hello} values={{ name: "Ada" }} />;\n```\n\n`description` is translator context; it is ignored at render time and never reaches the DOM.\n\nWrite every `defaultMessage` as a literal, whether it comes from a descriptor or the prop. Each distinct template is compiled once and cached, so a message built per render \u2014 interpolating a file name or a row into the template itself rather than passing it through `values` \u2014 churns that cache and recompiles the templates it displaces.\n\nMessages that carry ICU placeholders take their substitutions through `values`:\n\n```jsx\nconst messages = defineMessages({\n pageXofY: {\n id: "myApp.pageXofY",\n defaultMessage: "Page {current} of {total}",\n description:\n "Pagination status. `current` is the current page, `total` the last.",\n },\n});\n\n<MessageFormat {...messages.pageXofY} values={{ current: 2, total: 10 }} />;\n// \u2192 "Page 2 of 10"\n```\n\nSpreading the descriptor is what makes that true on its own. With a bare\n`id`, the same line renders `"Page 2 of 10"` only where a supplied catalog\ncovers the active locale, and the id itself everywhere else.',props:`interface MessageFormatProps {
 /**
  * By default \`<MessageFormat>\` will render the formatted string into a
@@ -14490,7 +14792,8 @@ onOpenChange?: (isOpen: boolean) => void
 children: React.ReactNode
 }`,stories:{usage:[{id:"core-overlays-modal--basic",name:"Basic",snippet:"const Basic = (args) => <DialogExample modalProps={args} />;"},{id:"core-overlays-modal--default-open",name:"Default Open",snippet:"const DefaultOpen = (args) => <DialogExample modalProps={args} />;"},{id:"core-overlays-modal--controlled",name:"Controlled",snippet:"const Controlled = (args) => <DialogExample modalProps={args} />;"}],implementation:`import { IFrame, ShadowRoot } from "@baseline-ui/test-utils/client";
 import { sprinkles } from "@baseline-ui/tokens";
-import React, { useState } from "react";
+import { getOwnerDocument } from "@react-aria/utils";
+import React, { useEffect, useRef, useState } from "react";
 import { VisuallyHidden, useId } from "react-aria";
 
 import { ActionButton } from "../../ActionButton";
@@ -14501,6 +14804,7 @@ import { Editor } from "../../Editor";
 import { FrameProvider } from "../../FrameProvider";
 import { ListBox } from "../../ListBox";
 import { NumberInput } from "../../NumberInput";
+import { PortalContainerProvider } from "../../PortalContainerProvider";
 import { RadioGroup } from "../../RadioGroup";
 import { Select } from "../../Select";
 import { Slider } from "../../Slider";
@@ -14903,6 +15207,59 @@ export const DisabledFocusManagementExample: React.FC<{
  )}
  </Box>
  );
+};
+
+/**
+ * A \`defaultOpen\` Modal whose portal container only resolves to \`document.body\`
+ * in a mount effect, through either \`ModalContent.portalContainer\` or
+ * \`PortalContainerProvider\`. The portal target is \`document.body\` before and
+ * after, so nothing remounts when the container arrives \u2014 only its identity
+ * changes.
+ */
+export const ModalLateBodyContainerExample: React.FC<
+ TestComponentProps & { via: "prop" | "provider" }
+> = ({ enableInert, via }) => {
+ const rootRef = useRef<HTMLDivElement>(null);
+ const [container, setContainer] = useState<HTMLElement>();
+
+ // The body of the tree's own document, not this module's: under the iframe
+ // fixture the component renders into the frame while the module still
+ // evaluates in the top-level realm.
+ useEffect(() => {
+ setContainer(getOwnerDocument(rootRef.current).body);
+ }, []);
+
+ const modal = (
+ <Modal defaultOpen={true}>
+ <ModalContent
+ portalContainer={via === "prop" ? container : undefined}
+ UNSAFE_enableInert={enableInert}
+ >
+ <Dialog aria-label="Late container">
+ <Text>Modal content</Text>
+ </Dialog>
+ </ModalContent>
+ </Modal>
+ );
+
+ return (
+ <Box
+ ref={rootRef}
+ display="flex"
+ flexDirection="column"
+ gap="md"
+ padding="lg"
+ >
+ <ActionButton label="Background button" variant="secondary" />
+ {via === "provider" ? (
+ <PortalContainerProvider portalContainer={container}>
+ {modal}
+ </PortalContainerProvider>
+ ) : (
+ modal
+ )}
+ </Box>
+ );
 };`},similarTo:[],figmaUrl:null},NumberFormat:{id:"core-utilities-numberformat",breadcrumb:"Core/Utilities/NumberFormat",importStatement:'import { NumberFormat } from "@baseline-ui/core";',description:"`NumberFormat` provides localized number formatting for the current locale. It automatically updates when the locale changes, and handles caching of the number formatter for performance.\nIt is a wrapper around the [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) API.",documentation:`\`NumberFormat\` provides localized number formatting for the current locale. It automatically updates when the locale changes, and handles caching of the number formatter for performance.
 It is a wrapper around the [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) API.
 
@@ -17167,7 +17524,7 @@ children: React.ReactNode
   />
 );`},{id:"core-overlays-popover--with-boundary-element",name:"With Boundary Element",snippet:"const WithBoundaryElement = (args) => <PopoverBoundaryElementExample popoverProps={args} />;"},{id:"core-overlays-popover--with-no-boundary",name:"With No Boundary",snippet:"const WithNoBoundary = () => <PopoverNoBoundaryExample />;"},{id:"core-overlays-popover--with-dynamic-trigger-width",name:"With Dynamic Trigger Width",snippet:"const WithDynamicTriggerWidth = (args) => <PopoverTriggerWidthExample popoverProps={args} />;"}],implementation:`import { sprinkles, themeVars } from "@baseline-ui/tokens";
 import { ScrollBox } from "@pw/utils/components";
-import { mergeRefs } from "@react-aria/utils";
+import { getOwnerDocument, mergeRefs } from "@react-aria/utils";
 import React, { useEffect, useRef, useState } from "react";
 import { useButton, useInteractOutside } from "react-aria";
 import { flushSync } from "react-dom";
@@ -17176,6 +17533,7 @@ import { ActionButton } from "../../ActionButton";
 import { Box } from "../../Box";
 import { Dialog } from "../../Dialog";
 import { ListBoxExample, items } from "../../ListBox/__tests__/testComponents";
+import { PortalContainerProvider } from "../../PortalContainerProvider";
 import { Select } from "../../Select";
 import { popoverContentCn } from "../../Select/Select.css";
 import { Switch } from "../../Switch";
@@ -18329,6 +18687,60 @@ export const PopoverHorizontalBoundaryBehaviorDemo: React.FC<{
  </Box>
  </Box>
  );
+};
+
+/**
+ * A \`defaultOpen\` Popover whose portal container only resolves to \`document.body\`
+ * in a mount effect, through either \`PopoverContent.portalContainer\` or
+ * \`PortalContainerProvider\`. The portal target is \`document.body\` before and
+ * after, so nothing remounts when the container arrives \u2014 only its identity
+ * changes.
+ */
+export const PopoverLateBodyContainerExample: React.FC<{
+ via: "prop" | "provider";
+}> = ({ via }) => {
+ const rootRef = useRef<HTMLDivElement>(null);
+ const [container, setContainer] = useState<HTMLElement>();
+
+ // The body of the tree's own document, not this module's: under the iframe
+ // fixture the component renders into the frame while the module still
+ // evaluates in the top-level realm.
+ useEffect(() => {
+ setContainer(getOwnerDocument(rootRef.current).body);
+ }, []);
+
+ const popover = (
+ <Popover type="listbox" defaultOpen={true}>
+ <PopoverTrigger>
+ <ActionButton label="Open" />
+ </PopoverTrigger>
+ <PopoverContent
+ offset={4}
+ portalContainer={via === "prop" ? container : undefined}
+ >
+ <ListBoxExample className={popoverContentCn} autoFocus="first" />
+ </PopoverContent>
+ </Popover>
+ );
+
+ return (
+ <Box
+ ref={rootRef}
+ display="flex"
+ flexDirection="column"
+ gap="md"
+ padding="lg"
+ >
+ <ActionButton label="Background button" variant="secondary" />
+ {via === "provider" ? (
+ <PortalContainerProvider portalContainer={container}>
+ {popover}
+ </PortalContainerProvider>
+ ) : (
+ popover
+ )}
+ </Box>
+ );
 };`},similarTo:[],figmaUrl:null},Portal:{id:"core-utilities-portal",breadcrumb:"Core/Utilities/Portal",importStatement:'import { Portal } from "@baseline-ui/core";',description:"`Portal` renders its children into an overlay portal outside the normal React DOM hierarchy. It integrates with `ThemeProvider` so that the portal content inherits the current theme and virtual keyboard handling configuration.",documentation:'`Portal` renders its children into an overlay portal outside the normal React DOM hierarchy. It integrates with `ThemeProvider` so that the portal content inherits the current theme and virtual keyboard handling configuration.\n\n* Renders children into an overlay container managed by React Aria\n* Automatically wraps children in a `ThemeProvider` to propagate the active theme into the portal\n* Respects a custom `portalContainer` provided via prop or the nearest `PortalContainerProvider` in context\n* Supports all standard `StylingProps` (`className`, `style`, `data-block-id`, `data-block-class`)\n\n```jsx\nimport { Portal } from "@baseline-ui/core";\n\nexport default function App() {\n return (\n <Portal>\n <div>I am rendered in a portal</div>\n </Portal>\n );\n}\n```\n\nPass a `portalContainer` element to render the portal inside a specific DOM node instead of the default overlay container. This is useful when rendering inside Shadow DOM or other isolated subtrees.\n\n```jsx\nimport { Portal } from "@baseline-ui/core";\n\nconst shadowRoot = document.querySelector("#shadow-host").shadowRoot;\nconst container = shadowRoot.querySelector(".portal-root");\n\nexport default function App() {\n return (\n <Portal portalContainer={container}>\n <div>Rendered inside shadow DOM</div>\n </Portal>\n );\n}\n```',props:`interface PortalProps {
 /**
  * The container element in which the overlay portal will be placed.
@@ -28746,23 +29158,19 @@ className?: string
  */
 style?: React.CSSProperties
 /**
- * The custom render function for the listbox options.
+ * The custom render function for the collection's options.
  * 
- * Replaces the option's entire contents, including the default selection
- * indicator \u2014 render your own affordance from \`options.isSelected\` if you
- * need one. Selection and keyboard behavior are unaffected.
+ * Replaces the option's entire contents, the default selection indicator
+ * included, so render your own affordance from \`options\` when you need one.
+ * The hover, focus and disabled styling lives in that default body too \u2014
+ * only selection and keyboard behavior are unaffected. Keep a text label in
+ * the output; it is what names the option to a screen reader.
  * 
  * Reading component state here works, at the cost of rebuilding every cached option and
  * section whenever the function's identity changes \u2014 see {@link UNSAFE_ListBoxProps.items}
  * for when that cost applies.
- * 
- * @param item ListOption
- * @param options ListBoxItemRenderProps
  */
-renderOption?: (
-  item: ListOption,
-  options: ListBoxItemRenderProps,
-) => React.ReactNode
+renderOption?: (item: TOption, options: TRenderProps) => React.ReactNode
 /**
  * A CSS class name added to the option's built-in classes.
  * 
@@ -28770,10 +29178,7 @@ renderOption?: (
  * cached option and section on each render. A plain string is compared by value.
  */
 optionClassName?: | string
-| ((
-    item: ListOption,
-    renderProps: ListBoxItemRenderProps,
-  ) => string | undefined)
+| ((item: TOption, renderProps: TRenderProps) => string | undefined)
 /**
  * The style of the option.
  * 
@@ -28782,8 +29187,8 @@ optionClassName?: | string
  */
 optionStyle?: | React.CSSProperties
 | ((
-    item: ListOption,
-    renderProps: ListBoxItemRenderProps,
+    item: TOption,
+    renderProps: TRenderProps,
   ) => React.CSSProperties | undefined)
 /**
  * The custom render function for the listbox sections.
@@ -29497,6 +29902,45 @@ export const ScrollIntoViewExample: React.FC = () => {
  );
 };
 
+export const SupersededScrollIntoViewExample: React.FC = () => {
+ const listBoxHandle = React.useRef<ListHandle>(null);
+ const [itemCount, setItemCount] = React.useState(5);
+
+ return (
+ <Box display="flex" flexDirection="column" gap="md" style={{ width: 300 }}>
+ <ActionButton
+ label="Grow then scroll to Item 0"
+ onPress={() => {
+ // Item 19 only renders once this handler returns, so the first call finds
+ // nothing and schedules a retry. The second call succeeds against the options
+ // already on screen, and must cancel that retry instead of letting it scroll
+ // back to Item 19 a frame later.
+ setItemCount(20);
+ listBoxHandle.current?.scrollIntoView("item-19");
+ listBoxHandle.current?.scrollIntoView("item-0");
+ }}
+ />
+
+ <div
+ style={{
+ maxHeight: 200,
+ overflow: "auto",
+ border: "1px solid #ccc",
+ }}
+ >
+ <ListBox
+ items={Array.from({ length: itemCount }).map((_, i) => ({
+ id: \`item-\${i}\`,
+ label: \`Item \${i}\`,
+ }))}
+ listBoxHandle={listBoxHandle}
+ aria-label="Superseded scroll list"
+ />
+ </div>
+ </Box>
+ );
+};
+
 const virtualSections = Array.from({ length: 10 }).map((_, sectionIndex) => ({
  id: \`section-\${sectionIndex}\`,
  title: \`Section \${sectionIndex + 1}\`,
@@ -29690,6 +30134,35 @@ export const VirtualizedScrollIntoViewExample: React.FC = () => {
  );
 };
 
+export const MountEffectVirtualizedScrollIntoViewExample: React.FC = () => {
+ const listBoxHandle = React.useRef<ListHandle>(null);
+ const items = Array.from({ length: 10_000 }).map((_, i) => ({
+ id: \`item-\${i}\`,
+ label: \`Item \${i}\`,
+ }));
+
+ // Scrolls from the consumer's own mount effect, which runs before the virtualizer has
+ // rendered any options.
+ useEffect(() => {
+ listBoxHandle.current?.scrollIntoView("item-5000");
+ }, []);
+
+ return (
+ <Virtualizer {...VIRTUALIZER_LAYOUT_DEFAULT_OPTIONS.LIST_BOX}>
+ <ListBox
+ items={items}
+ listBoxHandle={listBoxHandle}
+ style={{
+ height: 300,
+ width: 300,
+ overflow: "auto",
+ }}
+ aria-label="Virtualized mount effect list"
+ />
+ </Virtualizer>
+ );
+};
+
 // Each example varies exactly one prop off \`count\` and keeps the rest at stable
 // module-level identity; varying several at once would let one invalidate the cache for
 // the others, hiding a missing \`dependencies\` entry.
@@ -30452,7 +30925,8 @@ UNSAFE_enableInert?: boolean | ((isDrawer: boolean) => boolean)
   />
 );`},{id:"core-overlays-modal-modalcontent--drawer-mobile",name:"Drawer Mobile",snippet:"const DrawerMobile = () => <ModalDrawerExample />;"},{id:"core-overlays-modal-modalcontent--drawer-mobile-with-nested-popover",name:"Drawer Mobile With Nested Popover",snippet:"const DrawerMobileWithNestedPopover = () => <SelectInsideModalExample />;"},{id:"core-overlays-modal-modalcontent--uncontrolled-interaction-outside",name:"Uncontrolled Interaction Outside",snippet:"const UncontrolledInteractionOutside = () => <UncontrolledInteractionOutsideExample />;"},{id:"core-overlays-modal-modalcontent--long-content",name:"Long Content",snippet:"const LongContent = () => <LongModalExample />;"},{id:"core-overlays-modal-modalcontent--form-controls",name:"Form Controls",snippet:"const FormControls = () => <FormControlsInModalExample defaultOpen={true} />;"},{id:"core-overlays-modal-modalcontent--with-inert",name:"With Inert",snippet:"const WithInert = () => <FormControlsInModalExample enableInert={true} />;",description:"Experimental: Uses the HTML `inert` attribute instead of `aria-hidden` to hide elements outside the modal. This makes elements truly non-interactive (not just hidden from screen readers) which can improve performance and accessibility. Note: With inert enabled, elements outside the modal cannot be clicked or focused. Try interacting with the background elements when the modal is open vs closed."},{id:"core-overlays-modal-modalcontent--with-disabled-focus-management",name:"With Disabled Focus Management",snippet:"const WithDisabledFocusManagement = () => <DisabledFocusManagementExample />;",description:"Demonstrates `disableFocusManagement` with a FrameProvider. When the modal is open, the text input outside the FrameProvider container remains interactive because focus trapping and restoration are disabled."}],implementation:`import { IFrame, ShadowRoot } from "@baseline-ui/test-utils/client";
 import { sprinkles } from "@baseline-ui/tokens";
-import React, { useState } from "react";
+import { getOwnerDocument } from "@react-aria/utils";
+import React, { useEffect, useRef, useState } from "react";
 import { VisuallyHidden, useId } from "react-aria";
 
 import { ActionButton } from "../../ActionButton";
@@ -30463,6 +30937,7 @@ import { Editor } from "../../Editor";
 import { FrameProvider } from "../../FrameProvider";
 import { ListBox } from "../../ListBox";
 import { NumberInput } from "../../NumberInput";
+import { PortalContainerProvider } from "../../PortalContainerProvider";
 import { RadioGroup } from "../../RadioGroup";
 import { Select } from "../../Select";
 import { Slider } from "../../Slider";
@@ -30865,6 +31340,59 @@ export const DisabledFocusManagementExample: React.FC<{
  )}
  </Box>
  );
+};
+
+/**
+ * A \`defaultOpen\` Modal whose portal container only resolves to \`document.body\`
+ * in a mount effect, through either \`ModalContent.portalContainer\` or
+ * \`PortalContainerProvider\`. The portal target is \`document.body\` before and
+ * after, so nothing remounts when the container arrives \u2014 only its identity
+ * changes.
+ */
+export const ModalLateBodyContainerExample: React.FC<
+ TestComponentProps & { via: "prop" | "provider" }
+> = ({ enableInert, via }) => {
+ const rootRef = useRef<HTMLDivElement>(null);
+ const [container, setContainer] = useState<HTMLElement>();
+
+ // The body of the tree's own document, not this module's: under the iframe
+ // fixture the component renders into the frame while the module still
+ // evaluates in the top-level realm.
+ useEffect(() => {
+ setContainer(getOwnerDocument(rootRef.current).body);
+ }, []);
+
+ const modal = (
+ <Modal defaultOpen={true}>
+ <ModalContent
+ portalContainer={via === "prop" ? container : undefined}
+ UNSAFE_enableInert={enableInert}
+ >
+ <Dialog aria-label="Late container">
+ <Text>Modal content</Text>
+ </Dialog>
+ </ModalContent>
+ </Modal>
+ );
+
+ return (
+ <Box
+ ref={rootRef}
+ display="flex"
+ flexDirection="column"
+ gap="md"
+ padding="lg"
+ >
+ <ActionButton label="Background button" variant="secondary" />
+ {via === "provider" ? (
+ <PortalContainerProvider portalContainer={container}>
+ {modal}
+ </PortalContainerProvider>
+ ) : (
+ modal
+ )}
+ </Box>
+ );
 };`},similarTo:[],figmaUrl:null},PointPickerContent:{id:"core-content-pointpicker-pointpickercontent",importStatement:`import {
     Box,
     MultiplePointPickersExample,
@@ -32392,7 +32920,7 @@ horizontalBoundaryBehavior?: "shift" | "anchor"
     boundaryWidth={360}
     boundaryHeight={300} />;`}],implementation:`import { sprinkles, themeVars } from "@baseline-ui/tokens";
 import { ScrollBox } from "@pw/utils/components";
-import { mergeRefs } from "@react-aria/utils";
+import { getOwnerDocument, mergeRefs } from "@react-aria/utils";
 import React, { useEffect, useRef, useState } from "react";
 import { useButton, useInteractOutside } from "react-aria";
 import { flushSync } from "react-dom";
@@ -32401,6 +32929,7 @@ import { ActionButton } from "../../ActionButton";
 import { Box } from "../../Box";
 import { Dialog } from "../../Dialog";
 import { ListBoxExample, items } from "../../ListBox/__tests__/testComponents";
+import { PortalContainerProvider } from "../../PortalContainerProvider";
 import { Select } from "../../Select";
 import { popoverContentCn } from "../../Select/Select.css";
 import { Switch } from "../../Switch";
@@ -33554,6 +34083,60 @@ export const PopoverHorizontalBoundaryBehaviorDemo: React.FC<{
  </Box>
  </Box>
  );
+};
+
+/**
+ * A \`defaultOpen\` Popover whose portal container only resolves to \`document.body\`
+ * in a mount effect, through either \`PopoverContent.portalContainer\` or
+ * \`PortalContainerProvider\`. The portal target is \`document.body\` before and
+ * after, so nothing remounts when the container arrives \u2014 only its identity
+ * changes.
+ */
+export const PopoverLateBodyContainerExample: React.FC<{
+ via: "prop" | "provider";
+}> = ({ via }) => {
+ const rootRef = useRef<HTMLDivElement>(null);
+ const [container, setContainer] = useState<HTMLElement>();
+
+ // The body of the tree's own document, not this module's: under the iframe
+ // fixture the component renders into the frame while the module still
+ // evaluates in the top-level realm.
+ useEffect(() => {
+ setContainer(getOwnerDocument(rootRef.current).body);
+ }, []);
+
+ const popover = (
+ <Popover type="listbox" defaultOpen={true}>
+ <PopoverTrigger>
+ <ActionButton label="Open" />
+ </PopoverTrigger>
+ <PopoverContent
+ offset={4}
+ portalContainer={via === "prop" ? container : undefined}
+ >
+ <ListBoxExample className={popoverContentCn} autoFocus="first" />
+ </PopoverContent>
+ </Popover>
+ );
+
+ return (
+ <Box
+ ref={rootRef}
+ display="flex"
+ flexDirection="column"
+ gap="md"
+ padding="lg"
+ >
+ <ActionButton label="Background button" variant="secondary" />
+ {via === "provider" ? (
+ <PortalContainerProvider portalContainer={container}>
+ {popover}
+ </PortalContainerProvider>
+ ) : (
+ popover
+ )}
+ </Box>
+ );
 };`},similarTo:[],figmaUrl:null},PopoverTrigger:{id:"core-overlays-popover-popovertrigger",importStatement:`import {
     ActionButton,
     PopoverFunctionChildrenExample,
@@ -33585,7 +34168,7 @@ anchorRect?: Rect
   <PopoverWithCustomPositionExample anchorRect={anchorRect} />
 );`},{id:"core-overlays-popover-popovertrigger--function-children",name:"Function Children",snippet:"const FunctionChildren = () => <PopoverFunctionChildrenExample />;"}],implementation:`import { sprinkles, themeVars } from "@baseline-ui/tokens";
 import { ScrollBox } from "@pw/utils/components";
-import { mergeRefs } from "@react-aria/utils";
+import { getOwnerDocument, mergeRefs } from "@react-aria/utils";
 import React, { useEffect, useRef, useState } from "react";
 import { useButton, useInteractOutside } from "react-aria";
 import { flushSync } from "react-dom";
@@ -33594,6 +34177,7 @@ import { ActionButton } from "../../ActionButton";
 import { Box } from "../../Box";
 import { Dialog } from "../../Dialog";
 import { ListBoxExample, items } from "../../ListBox/__tests__/testComponents";
+import { PortalContainerProvider } from "../../PortalContainerProvider";
 import { Select } from "../../Select";
 import { popoverContentCn } from "../../Select/Select.css";
 import { Switch } from "../../Switch";
@@ -34747,6 +35331,60 @@ export const PopoverHorizontalBoundaryBehaviorDemo: React.FC<{
  </Box>
  </Box>
  );
+};
+
+/**
+ * A \`defaultOpen\` Popover whose portal container only resolves to \`document.body\`
+ * in a mount effect, through either \`PopoverContent.portalContainer\` or
+ * \`PortalContainerProvider\`. The portal target is \`document.body\` before and
+ * after, so nothing remounts when the container arrives \u2014 only its identity
+ * changes.
+ */
+export const PopoverLateBodyContainerExample: React.FC<{
+ via: "prop" | "provider";
+}> = ({ via }) => {
+ const rootRef = useRef<HTMLDivElement>(null);
+ const [container, setContainer] = useState<HTMLElement>();
+
+ // The body of the tree's own document, not this module's: under the iframe
+ // fixture the component renders into the frame while the module still
+ // evaluates in the top-level realm.
+ useEffect(() => {
+ setContainer(getOwnerDocument(rootRef.current).body);
+ }, []);
+
+ const popover = (
+ <Popover type="listbox" defaultOpen={true}>
+ <PopoverTrigger>
+ <ActionButton label="Open" />
+ </PopoverTrigger>
+ <PopoverContent
+ offset={4}
+ portalContainer={via === "prop" ? container : undefined}
+ >
+ <ListBoxExample className={popoverContentCn} autoFocus="first" />
+ </PopoverContent>
+ </Popover>
+ );
+
+ return (
+ <Box
+ ref={rootRef}
+ display="flex"
+ flexDirection="column"
+ gap="md"
+ padding="lg"
+ >
+ <ActionButton label="Background button" variant="secondary" />
+ {via === "provider" ? (
+ <PortalContainerProvider portalContainer={container}>
+ {popover}
+ </PortalContainerProvider>
+ ) : (
+ popover
+ )}
+ </Box>
+ );
 };`},similarTo:[],figmaUrl:null},IconSelect:{id:"core-forms-select-iconselect",importStatement:'import { IconSelect } from "@baseline-ui/core";',description:"",documentation:null,props:`interface IconSelectProps {
 /**
  * The icon to show at the start of the color input.
@@ -36895,7 +37533,7 @@ padding={[null, "lg", "xl"]}
 
 * [vanilla-extract sprinkles documentation](https://vanilla-extract.style/documentation/packages/sprinkles/) - Learn about the underlying sprinkles framework
 * [Box component documentation](/docs/core-utilities-box--docs) - Detailed information about the Box component
-* [Theme documentation](/docs/theming--docs) - Learn about Baseline UI's theming system`};var c={"8":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","ChevronRightFilledIcon","ChevronRightIcon","EllipseIcon","MinusIcon","PlusIcon","XIcon"],"12":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","EditIcon","EllipseIcon","EnterKeyIcon","LockFilledIcon","LockIcon","MinusIcon","MoreVIcon","MoreIcon","PlaceholderIcon","PlusIcon","SearchIcon","SizeIcon","TrashIcon","XIcon","ZoomIcon"],"16":["AlignBottomIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDiagonalTopLeftBottomRightIcon","ArrowDownCircleFilledIcon","ArrowDownIcon","ArrowIcon","ArrowLeftRightIcon","ArrowRightIcon","ArrowUpArrowDownIcon","ArrowUpIcon","AtIcon","AttachmentsIcon","AvatarIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BulletListIcon","CalendarIcon","CaretLeftIcon","CaretRightIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","CircleFilledIcon","ClockIcon","CopyIcon","CustomizeIcon","DocumentEditIcon","DownloadIcon","DuplicateIcon","EditIcon","ElipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FilterAltIcon","FolderIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FullScreenIcon","HelpCircleIcon","HelpIcon","HereIcon","HideIcon","HighlightTextAltIcon","HighlightTextIcon","HorizontalScrollIcon","ImageIcon","InfoCircleFilledIcon","InsertIcon","ItalicIcon","LightBulbIcon","LineIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MeasureIcon","MinusIcon","MoreIcon","MoreVerticalIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","NumberedListIcon","OpenIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageVerticalScrollIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PlaceholderIcon","PlayIcon","PlusIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","ReadOnlyIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedoIcon","RemoveFormattingIcon","ReorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RulerIcon","SearchIcon","SettingsIcon","ShowIcon","SlashCommandsIcon","SoundRecordIcon","StampIcon","StarFilledIcon","StarIcon","StrikeoutTextAltIcon","TableCellIcon","TableColumnIcon","TableHeaderIcon","TableIcon","TableRowIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextDecreaseIndentIcon","TextIcon","TextIncreaseIndentIcon","TextMarkIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UndoIcon","UnlockIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WindowedIcon","WorkflowIcon","XCircleFilledIcon","XIcon"],"20":["AddPageIcon","AnonymousIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpCircleFilledIcon","AtIcon","AvatarFilledIcon","BoldIcon","CalloutIcon","CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ClockIcon","CollapseIcon","CommentIcon","CopyIcon","CutIcon","DistanceIcon","DownloadIcon","DuplicateIcon","EditIcon","EllipseIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorAlternativeCircleIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FormDateIcon","FormSignatureIcon","FormTextFieldIcon","HelpCircleIcon","HighlightTextIcon","HomeIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","ItalicIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MinusIcon","MoreIcon","MoreVerticalIcon","MoveIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OpenIcon","PageMoveLeftIcon","PageMoveRightIcon","PagesInsertIcon","PasteIcon","PipetteIcon","PlusIcon","PrintIcon","RotateClockwiseIcon","SearchIcon","SettingsIcon","ShapeIcon","ShareIcon","SoundIcon","SoundRecordIcon","StarFilledIcon","StarIcon","StyleIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UploadIcon","WarningFilledIcon","WarningIcon","XCircleFilledIcon","XCircleIcon","XIcon"],"24":["AddNoteCloudIcon","AddNoteIcon","AddTextSerifIcon","AiIcon","AirplaneIcon","AlignBottomIcon","AlignHorizontalCenterIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDownIcon","ArrowIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpIcon","AtIcon","AttachmentIcon","AvatarFilledIcon","AvatarIcon","BlendModeIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BorderColorIcon","BottomBorderIcon","BulletListIcon","CalibrateIcon","CaptureAddIcon","CaretDownIcon","CaretIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ChevronListIcon","ClockIcon","CloudyBorderIcon","CollapseIcon","ColorPaletteIcon","ColorSwatchIcon","CommentIcon","CommentInSidebarIcon","CommentOnPageIcon","CompareDocumentsIcon","CopyIcon","CopyPageIcon","CropIcon","CustomizeIcon","CutIcon","DateModifiedIcon","DatePlusIcon","DebugIcon","DocumentArrowDownCircleIcon","DocumentArrowDownIcon","DocumentArrowRightIcon","DocumentFilledIcon","DocumentLockIcon","DocumentPdfIcon","DownloadIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","DuplicateIcon","EditAnnotationsIcon","EditContentIcon","EditDocumentIcon","EditIcon","EditThumbnailsIcon","EllipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","EndCapArrowFilledIcon","EndCapArrowIcon","EndCapChevronFilledIcon","EndCapChevronIcon","EndCapCircleIcon","EndCapDiamondIcon","EndCapNoneIcon","EndCapSlantedIcon","EndCapSquareIcon","EndCapStraightIcon","EraserIcon","ErrorAltCircleFilledIcon","ErrorAltIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","ExpandVerticalIcon","FillColorIcon","FilterIcon","FitToHeightIcon","FivePagesHorizontalFilledIcon","FivePagesVerticalFilledIcon","FolderAddIcon","FolderIcon","FontListIcon","FontSizeIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormPageIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FormTwoRadioButtonsIcon","FourPagesGridFilledIcon","FourPagesHorizontalFilledIcon","FourPagesStackedFilledIcon","FourPagesVerticalFilledIcon","GroupIcon","HamburgerMenuIcon","HandIcon","HeartIcon","HideIcon","HideRevealIcon","HighlightTextIcon","HomeIcon","HorizontalScollIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","InitialsIcon","InnerHorizontalBorderIcon","InnerVerticalBorderIcon","InsertIcon","ItalicIcon","LayerBottomIcon","LayerDownIcon","LayerTopIcon","LayerUpIcon","LayersIcon","LeftBindingIcon","LeftBorderIcon","LineCapsIcon","LineIcon","LineSpacingIcon","LineStyleCloudyIcon","LineStyleDashedDoubleDashIcon","LineStyleDashedDoubleGapIcon","LineStyleDashedQuadrupleDashIcon","LineStyleDashedSingleGapIcon","LineStyleIcon","LineStyleSolidIcon","LineWidthIcon","LinkIcon","LockFilledIcon","LockIcon","MagicIcon","MagicPenIcon","MailIcon","MarkupIcon","MarqueeZoomIcon","MeasureIcon","MergeIcon","MessageCloudIcon","MinusIcon","MoonIcon","MoreCircleIcon","MoreIcon","MoreVerticalIcon","MoveAllDirectionsIcon","MoveLeftIcon","MoveLeftRightIcon","MoveRightIcon","MultiplePagesIcon","NonEditableIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OcrIcon","OpacityIcon","PageAddIcon","PageCurlIcon","PageDuplicateIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLandscapeIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageMoveLeftIcon","PageMoveRightIcon","PageNumberCircleIcon","PageNumberIcon","PagePortraitIcon","PageRemoveIcon","PageVerticalScrollIcon","PagesInsertAltIcon","PagesInsertIcon","PagesNewFromSelectionAltIcon","PagesNewFromSelectionIcon","PagesSelectAllIcon","PagesSelectNoneIcon","PasteBoardIcon","PastePageIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PinDropFilledIcon","PinDropIcon","PipetteIcon","PlayIcon","PlusCircleFilledIcon","PlusCircleIcon","PlusIcon","PointerIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","PrecisionIcon","PrintIcon","PrivateModeIcon","PushPinIcon","QuestionmarkCircleIcon","ReaderViewIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedactIcon","RedactRectangleIcon","RedactTextHighlighterIcon","RedactionTextRepeatingIcon","RedactionTextSingleIcon","RedoAllIcon","RedoIcon","RegexIcon","ReplaceIcon","RightBindingIcon","RightBorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RotateObjectClockwiseIcon","RotateObjectCounterClockwiseIcon","RulerIcon","ScaleIcon","SearchCircleIcon","SearchIcon","SearchSelectionIcon","SelectAllIcon","SelectionToolIcon","SettingsIcon","ShapesIcon","ShareAltIcon","ShareIcon","ShieldAddIcon","ShieldCheckmarkIcon","ShieldWarningIcon","ShieldXIcon","ShowIcon","SidebarIcon","SignOutIcon","SignatureDigitalIcon","SignatureIcon","SinglePageFilledIcon","SoundIcon","SquigglyTextIcon","StampAddIcon","StampIcon","StarFilledIcon","StarIcon","StartCapArrowFilledIcon","StartCapArrowIcon","StartCapChevronFilledIcon","StartCapChevronIcon","StartCapCircleIcon","StartCapDiamondIcon","StartCapNoneIcon","StartCapSlantedIcon","StartCapSquareIcon","StartCapStraightIcon","StrikeoutTextIcon","StyleFilledIcon","StyleIcon","StylusFilledIcon","StylusIcon","SunIcon","TableCellIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextColorIcon","TextIcon","TextPropertiesHideIcon","TextPropertiesShowIcon","TextSerifIcon","TextSmallerIcon","ThreePagesHorizontalFilledIcon","ThreePagesStackedFilledIcon","ThreePagesVerticalFilledIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TopBorderIcon","TrashIcon","TwoPagesHorizontalFilledIcon","TwoPagesVerticalFilledIcon","TypeTextIcon","UnderlineIcon","UnderlineTextIcon","UndoAllIcon","UndoIcon","UndoRedoIcon","UngroupIcon","UnlockIcon","UploadIcon","UserIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WidgetIcon","WorkflowIcon","XCircleFilledIcon","XCircleIcon","XIcon","ZoomInIcon","ZoomOutIcon"],"36":["ArrowRight","Check","Circle","Cross","Help","Inset","Key","NewParagraphAlt","NewParagraph","Note","PointerRight","SpeechBubble","Star"]};var p={version:"3.0.1"};var u=`
+* [Theme documentation](/docs/theming--docs) - Learn about Baseline UI's theming system`};var c={"8":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","ChevronRightFilledIcon","ChevronRightIcon","EllipseIcon","MinusIcon","PlusIcon","XIcon"],"12":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","EditIcon","EllipseIcon","EnterKeyIcon","LockFilledIcon","LockIcon","MinusIcon","MoreVIcon","MoreIcon","PlaceholderIcon","PlusIcon","SearchIcon","SizeIcon","TrashIcon","XIcon","ZoomIcon"],"16":["AlignBottomIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDiagonalTopLeftBottomRightIcon","ArrowDownCircleFilledIcon","ArrowDownIcon","ArrowIcon","ArrowLeftRightIcon","ArrowRightIcon","ArrowUpArrowDownIcon","ArrowUpIcon","AtIcon","AttachmentsIcon","AvatarIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BulletListIcon","CalendarIcon","CaretLeftIcon","CaretRightIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","CircleFilledIcon","ClockIcon","CopyIcon","CustomizeIcon","DocumentEditIcon","DownloadIcon","DuplicateIcon","EditIcon","ElipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FilterAltIcon","FolderIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FullScreenIcon","HelpCircleIcon","HelpIcon","HereIcon","HideIcon","HighlightTextAltIcon","HighlightTextIcon","HorizontalScrollIcon","ImageIcon","InfoCircleFilledIcon","InsertIcon","ItalicIcon","LightBulbIcon","LineIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MeasureIcon","MinusIcon","MoreIcon","MoreVerticalIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","NumberedListIcon","OpenIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageVerticalScrollIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PlaceholderIcon","PlayIcon","PlusIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","ReadOnlyIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedoIcon","RemoveFormattingIcon","ReorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RulerIcon","SearchIcon","SettingsIcon","ShowIcon","SlashCommandsIcon","SoundRecordIcon","StampIcon","StarFilledIcon","StarIcon","StrikeoutTextAltIcon","TableCellIcon","TableColumnIcon","TableHeaderIcon","TableIcon","TableRowIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextDecreaseIndentIcon","TextIcon","TextIncreaseIndentIcon","TextMarkIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UndoIcon","UnlockIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WindowedIcon","WorkflowIcon","XCircleFilledIcon","XIcon"],"20":["AddPageIcon","AnonymousIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpCircleFilledIcon","AtIcon","AvatarFilledIcon","BoldIcon","CalloutIcon","CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ClockIcon","CollapseIcon","CommentIcon","CopyIcon","CutIcon","DistanceIcon","DownloadIcon","DuplicateIcon","EditIcon","EllipseIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorAlternativeCircleIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FormDateIcon","FormSignatureIcon","FormTextFieldIcon","HelpCircleIcon","HighlightTextIcon","HomeIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","ItalicIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MinusIcon","MoreIcon","MoreVerticalIcon","MoveIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OpenIcon","PageMoveLeftIcon","PageMoveRightIcon","PagesInsertIcon","PasteIcon","PipetteIcon","PlusIcon","PrintIcon","RotateClockwiseIcon","SearchIcon","SettingsIcon","ShapeIcon","ShareIcon","SoundIcon","SoundRecordIcon","StarFilledIcon","StarIcon","StyleIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UploadIcon","WarningFilledIcon","WarningIcon","XCircleFilledIcon","XCircleIcon","XIcon"],"24":["AddNoteCloudIcon","AddNoteIcon","AddTextSerifIcon","AiIcon","AirplaneIcon","AlignBottomIcon","AlignHorizontalCenterIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDownIcon","ArrowIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpIcon","AtIcon","AttachmentIcon","AvatarFilledIcon","AvatarIcon","BlendModeIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BorderColorIcon","BottomBorderIcon","BulletListIcon","CalibrateIcon","CaptureAddIcon","CaretDownIcon","CaretIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ChevronListIcon","ClockIcon","CloudyBorderIcon","CollapseIcon","ColorPaletteIcon","ColorSwatchIcon","CommentIcon","CommentInSidebarIcon","CommentOnPageIcon","CompareDocumentsIcon","CopyIcon","CopyPageIcon","CropIcon","CustomizeIcon","CutIcon","DateModifiedIcon","DatePlusIcon","DebugIcon","DocumentArrowDownCircleIcon","DocumentArrowDownIcon","DocumentArrowRightIcon","DocumentFilledIcon","DocumentLockIcon","DocumentPdfIcon","DownloadIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","DuplicateIcon","EditAnnotationsIcon","EditContentIcon","EditDocumentIcon","EditIcon","EditThumbnailsIcon","EllipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","EndCapArrowFilledIcon","EndCapArrowIcon","EndCapChevronFilledIcon","EndCapChevronIcon","EndCapCircleIcon","EndCapDiamondIcon","EndCapNoneIcon","EndCapSlantedIcon","EndCapSquareIcon","EndCapStraightIcon","EraserIcon","ErrorAltCircleFilledIcon","ErrorAltIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","ExpandVerticalIcon","FillColorIcon","FilterIcon","FitToHeightIcon","FivePagesHorizontalFilledIcon","FivePagesVerticalFilledIcon","FolderAddIcon","FolderIcon","FontListIcon","FontSizeIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormPageIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FormTwoRadioButtonsIcon","FourPagesGridFilledIcon","FourPagesHorizontalFilledIcon","FourPagesStackedFilledIcon","FourPagesVerticalFilledIcon","GroupIcon","HamburgerMenuIcon","HandIcon","HeartIcon","HideIcon","HideRevealIcon","HighlightTextIcon","HomeIcon","HorizontalScollIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","InitialsIcon","InnerHorizontalBorderIcon","InnerVerticalBorderIcon","InsertIcon","ItalicIcon","LayerBottomIcon","LayerDownIcon","LayerTopIcon","LayerUpIcon","LayersIcon","LeftBindingIcon","LeftBorderIcon","LineCapsIcon","LineIcon","LineSpacingIcon","LineStyleCloudyIcon","LineStyleDashedDoubleDashIcon","LineStyleDashedDoubleGapIcon","LineStyleDashedQuadrupleDashIcon","LineStyleDashedSingleGapIcon","LineStyleIcon","LineStyleSolidIcon","LineWidthIcon","LinkIcon","LockFilledIcon","LockIcon","MagicIcon","MagicPenIcon","MailIcon","MarkupIcon","MarqueeZoomIcon","MeasureIcon","MergeIcon","MessageCloudIcon","MinusIcon","MoonIcon","MoreCircleIcon","MoreIcon","MoreVerticalIcon","MoveAllDirectionsIcon","MoveLeftIcon","MoveLeftRightIcon","MoveRightIcon","MultiplePagesIcon","NonEditableIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OcrIcon","OpacityIcon","PageAddIcon","PageCurlIcon","PageDuplicateIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLandscapeIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageMoveLeftIcon","PageMoveRightIcon","PageNumberCircleIcon","PageNumberIcon","PagePortraitIcon","PageRemoveIcon","PageVerticalScrollIcon","PagesInsertAltIcon","PagesInsertIcon","PagesNewFromSelectionAltIcon","PagesNewFromSelectionIcon","PagesSelectAllIcon","PagesSelectNoneIcon","PasteBoardIcon","PastePageIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PinDropFilledIcon","PinDropIcon","PipetteIcon","PlayIcon","PlusCircleFilledIcon","PlusCircleIcon","PlusIcon","PointerIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","PrecisionIcon","PrintIcon","PrivateModeIcon","PushPinIcon","QuestionmarkCircleIcon","ReaderViewIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedactIcon","RedactRectangleIcon","RedactTextHighlighterIcon","RedactionTextRepeatingIcon","RedactionTextSingleIcon","RedoAllIcon","RedoIcon","RegexIcon","ReplaceIcon","RightBindingIcon","RightBorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RotateObjectClockwiseIcon","RotateObjectCounterClockwiseIcon","RulerIcon","ScaleIcon","SearchCircleIcon","SearchIcon","SearchSelectionIcon","SelectAllIcon","SelectionToolIcon","SettingsIcon","ShapesIcon","ShareAltIcon","ShareIcon","ShieldAddIcon","ShieldCheckmarkIcon","ShieldWarningIcon","ShieldXIcon","ShowIcon","SidebarIcon","SignOutIcon","SignatureDigitalIcon","SignatureIcon","SinglePageFilledIcon","SoundIcon","SquigglyTextIcon","StampAddIcon","StampIcon","StarFilledIcon","StarIcon","StartCapArrowFilledIcon","StartCapArrowIcon","StartCapChevronFilledIcon","StartCapChevronIcon","StartCapCircleIcon","StartCapDiamondIcon","StartCapNoneIcon","StartCapSlantedIcon","StartCapSquareIcon","StartCapStraightIcon","StrikeoutTextIcon","StyleFilledIcon","StyleIcon","StylusFilledIcon","StylusIcon","SunIcon","TableCellIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextColorIcon","TextIcon","TextPropertiesHideIcon","TextPropertiesShowIcon","TextSerifIcon","TextSmallerIcon","ThreePagesHorizontalFilledIcon","ThreePagesStackedFilledIcon","ThreePagesVerticalFilledIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TopBorderIcon","TrashIcon","TwoPagesHorizontalFilledIcon","TwoPagesVerticalFilledIcon","TypeTextIcon","UnderlineIcon","UnderlineTextIcon","UndoAllIcon","UndoIcon","UndoRedoIcon","UngroupIcon","UnlockIcon","UploadIcon","UserIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WidgetIcon","WorkflowIcon","XCircleFilledIcon","XCircleIcon","XIcon","ZoomInIcon","ZoomOutIcon"],"36":["ArrowRight","Check","Circle","Cross","Help","Inset","Key","NewParagraphAlt","NewParagraph","Note","PointerRight","SpeechBubble","Star"]};var p={version:"3.2.0"};var u=`
 # Baseline UI MCP Server Guidelines
 
 This MCP server provides AI assistants with structured access to Baseline UI's comprehensive component documentation, icon library, theming resources, and design guidelines.