@baseline-ui/mcp 0.60.0 → 0.61.0

package/dist/index.js

@@ -197,6 +197,13 @@ showXAxis?: boolean
  * Whether to show the Y axis. @default true
  */
 showYAxis?: boolean
+/**
+ * Props passed to \`NumberFormat\` for formatting numeric values in the
+ * Y-axis ticks and tooltip entries (e.g.
+ * \`{ style: "currency", currency: "USD" }\`). When omitted, values render
+ * as raw numbers in both the tooltip and on the Y axis.
+ */
+numberFormatterProps?: Omit<NumberFormatProps, "value">
 /**
  * The data array to render. Each item is an object keyed by \`xAxisDataKey\` and bar \`dataKey\` values.
  */
@@ -316,6 +323,18 @@ barRadius?: number
       { dataKey: "expenses", name: "Expenses" },
     ]}
     height={320}
+    showLegend />;`},{id:"charts-barchart--formatted",name:"Formatted",snippet:`const Formatted = () => <BarChart
+    data={yearlyData}
+    xAxisDataKey="year"
+    bars={[
+      { dataKey: "revenue", name: "Revenue" },
+      { dataKey: "expenses", name: "Expenses" },
+    ]}
+    height={320}
+    numberFormatterProps={{
+      notation: "compact",
+      maximumFractionDigits: 1,
+    }}
     showLegend />;`},{id:"charts-barchart--hidden-axes",name:"Hidden Axes",snippet:`const HiddenAxes = () => <BarChart
     data={yearlyData}
     xAxisDataKey="year"
@@ -419,6 +438,13 @@ showXAxis?: boolean
  * Whether to show the Y axis. @default true
  */
 showYAxis?: boolean
+/**
+ * Props passed to \`NumberFormat\` for formatting numeric values in the
+ * Y-axis ticks and tooltip entries (e.g.
+ * \`{ style: "currency", currency: "USD" }\`). When omitted, values render
+ * as raw numbers in both the tooltip and on the Y axis.
+ */
+numberFormatterProps?: Omit<NumberFormatProps, "value">
 /**
  * The data array to render. Each item is an object keyed by \`xAxisDataKey\` and line \`dataKey\` values.
  */
@@ -509,7 +535,20 @@ variant?: "default" | "sparkline"
     height={320}
     showXAxis={false}
     showYAxis={false}
-    showGrid={false} />;`},{id:"charts-linechart--sparkline",name:"Sparkline",snippet:`const Sparkline = () => <LineChart
+    showGrid={false} />;`},{id:"charts-linechart--formatted",name:"Formatted",snippet:`const Formatted = () => <LineChart
+    data={monthlyData}
+    xAxisDataKey="month"
+    lines={[
+      { dataKey: "revenue", name: "Revenue" },
+      { dataKey: "expenses", name: "Expenses" },
+    ]}
+    height={320}
+    numberFormatterProps={{
+      style: "currency",
+      currency: "USD",
+      maximumFractionDigits: 0,
+    }}
+    showLegend />;`},{id:"charts-linechart--sparkline",name:"Sparkline",snippet:`const Sparkline = () => <LineChart
     data={monthlyData}
     xAxisDataKey="month"
     lines={[{ dataKey: "revenue" }]}
@@ -7093,7 +7132,507 @@ export const EditorWithAutoFocusAndCaretAtEnd = ({
  editorHandle={editorHandleRef}
  />
  );
-};`},similarTo:[],figmaUrl:null},FrameProvider:{id:"core-utilities-frameprovider",breadcrumb:"Core/Utilities/FrameProvider",importStatement:`import {
+};`},similarTo:[],figmaUrl:null},FileInput:{id:"core-forms-fileinput",breadcrumb:"Core/Forms/FileInput",importStatement:'import { FileInput, VariantViewer } from "@baseline-ui/core";',description:"`FileInput` is a form control for selecting one or more files from the user's device. It pairs a primary button with a read-only display of the chosen file name and supports labels, helper text, validation states, and accessibility hooks consistent with `TextInput`.",documentation:'`FileInput` is a form control for selecting one or more files from the user\'s device. It pairs a primary button with a read-only display of the chosen file name and supports labels, helper text, validation states, and accessibility hooks consistent with `TextInput`.\n\n* Built on top of [React Aria\'s `FileTrigger`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html), so it works with mouse, touch, and keyboard.\n* Only the button is interactive \u2014 the label, file name, and helper text are visual and wired into the button via `aria-describedby` for assistive technology.\n* Accepts an array of MIME types or file extensions via `acceptedFileTypes`, and an `allowsMultiple` flag for selecting more than one file.\n* Supports directory selection ([`acceptDirectory`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html#directory-selection)) and mobile capture ([`defaultCamera`](https://react-spectrum.adobe.com/react-aria/FileTrigger.html#media-capture)) via the underlying `FileTrigger`.\n* Renders helper, warning, and error messages with the same precedence rules as the rest of the form components: error > warning > description.\n\n```jsx\nimport { FileInput } from "@baseline-ui/core";\n\n<FileInput\n label="Attachment"\n description="Supports .mov and .mp4"\n acceptedFileTypes={[".mov", ".mp4"]}\n onValueChange={(files) => console.log(files)}\n/>;\n```\n\nIf you need a drag-and-drop drop zone instead of a button trigger, use [`ImageDropZone`](/story/core-forms-imagedropzone--basic) or [`FileUpload`](/story/core-forms-fileupload--basic).\n\nPass a visible `label` for sighted users; the label is wired into the button\'s accessible description so it is announced on focus.\n\n```jsx\n<FileInput label="Attachment" description="Supports .mov and .mp4" />\n```\n\nBy default the label sits above the field. Pass `labelPosition="start"` to align it inline.\n\n```jsx\n<FileInput label="Attachment" labelPosition="start" />\n```\n\nIf the field is described by surrounding context, omit `label`. The button\'s intrinsic name (`buttonLabel`, "Choose file" by default) is still announced.\n\n```jsx\n<FileInput aria-label="Upload a file" />\n```\n\nSet `allowsMultiple` to allow more than one file. The display switches to an aggregate `"N files"` count once more than one file is selected.\n\n```jsx\n<FileInput label="Attachments" allowsMultiple onValueChange={setFiles} />\n```\n\nPass an array of MIME types or file extensions to `acceptedFileTypes`.\n\n```jsx\n<FileInput\n label="Avatar"\n acceptedFileTypes={["image/png", "image/jpeg"]}\n onValueChange={setAvatar}\n/>\n```\n\nSet `acceptDirectory` to let users pick a folder. The browser forwards every file inside the chosen directory to `onValueChange`.\n\n```jsx\n<FileInput label="Upload folder" acceptDirectory onValueChange={setFiles} />\n```\n\nSet `defaultCamera="user"` (front-facing) or `"environment"` (rear-facing) to hint that the picker should open the device\'s camera on mobile.\n\n```jsx\n<FileInput\n label="Take a photo"\n acceptedFileTypes={["image/*"]}\n defaultCamera="environment"\n/>\n```\n\nSet `autoFocus` to focus the button on mount \u2014 useful in dialogs or multi-step flows.\n\n```jsx\n<FileInput label="Attachment" autoFocus />\n```\n\nOverride `buttonLabel` and `placeholder` for non-English copy or domain-specific wording.\n\n```jsx\n<FileInput\n label="Avatar"\n buttonLabel="Browse..."\n placeholder="Drop an image here"\n/>\n```\n\nPass `validationState="warning"` and a `warningMessage` to show a non-blocking advisory.\n\n```jsx\n<FileInput\n label="Attachment"\n validationState="warning"\n warningMessage="This file format is uncommon \u2014 make sure it is supported."\n/>\n```\n\nSetting `errorMessage` flips the field into the error state and replaces the helper text. The error message takes precedence over both `description` and `warningMessage`.\n\n```jsx\n<FileInput label="Attachment" errorMessage="Please choose a supported file." />\n```\n\nDisable the field with `isDisabled`. The button cannot be activated and the displayed file name uses the disabled text color.\n\n```jsx\n<FileInput label="Attachment" isDisabled />\n```\n\n`FileInput` exposes a single callback for handling the selection:\n\n| Prop | Signature | When to use |\n| --------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `onValueChange` | `(files: File[]) => void` | Receives the parsed file list directly. When `allowsMultiple` is not set, the array has at most one entry. An empty array means the user opened and dismissed the file picker. |\n\n`FileInput` sets the following data attributes on the field wrapper. Use them to scope your custom styles.\n\n| Selector | Description |\n| ----------------------------------- | ---------------------------------------------------- |\n| `[data-disabled]` | Present when `isDisabled` is true. |\n| `[data-validation-state="error"]` | Present when an error message or error state is set. |\n| `[data-validation-state="warning"]` | Present when `validationState="warning"`. |\n| `.BaselineUI-FileInput` | Root element of the component. |\n\nTo style the button itself, target `.BaselineUI-FileInput button` or pass a class via `buttonClassName` / inline styles via `buttonStyle`.\n\n* Only the button is interactive; the label, file name, and helper text are visual elements wired into the button via `aria-describedby`.\n* The button keeps its own accessible name (`"Choose file"` by default), so screen readers announce the action on focus.\n* The visible `label`, the selected file name, and any helper/warning/error message are all referenced from the button\'s `aria-describedby`, so they are announced after the action label.\n* An externally supplied `aria-describedby` is merged with the internal IDs rather than replacing them.\n\n| Key | Action |\n| ----------------- | ----------------------------- |\n| `Tab` | Moves focus to the button. |\n| `Shift + Tab` | Moves focus out of the field. |\n| `Space` / `Enter` | Opens the system file picker. |',props:`interface FileInputProps {
+/**
+ * The description to display below the input.
+ */
+description?: string
+/**
+ * The error message to display when the input is in an error state.
+ */
+errorMessage?: string
+/**
+ * The warning message to display when the input is in a warning state.
+ */
+warningMessage?: string
+/**
+ * Specifies what mime type of files are allowed.
+ */
+acceptedFileTypes?: ReadonlyArray<string>
+/**
+ * Whether multiple files can be selected.
+ */
+allowsMultiple?: boolean
+/**
+ * Specifies the use of a media capture mechanism to capture the media on the spot.
+ */
+defaultCamera?: 'user' | 'environment'
+/**
+ * Handler when a user selects a file.
+ */
+onSelect?: (files: FileList | null) => void
+/**
+ * The children of the component.
+ */
+children?: ReactNode
+/**
+ * Enables the selection of directories instead of individual files.
+ */
+acceptDirectory?: boolean
+/**
+ * The className applied to the root element of the component.
+ */
+className?: string
+/**
+ * The style applied to the root element of the component.
+ */
+style?: React.CSSProperties
+/**
+ * The label to display above the field.
+ */
+label?: React.ReactNode
+/**
+ * The label shown on the file picker button.
+ * 
+ * @default "Choose file"
+ */
+buttonLabel?: React.ReactNode
+/**
+ * The text shown when no file has been selected.
+ * 
+ * @default "No file chosen"
+ */
+placeholder?: string
+/**
+ * Whether the field is disabled.
+ */
+isDisabled?: boolean
+/**
+ * Identifier of element(s) that describe the input.
+ */
+aria-describedby?: string
+/**
+ * Accessible label for the field when no visible label is provided.
+ */
+aria-label?: string
+/**
+ * Called with the selected files. An empty array signals that the picker was cancelled.
+ */
+onValueChange?: (files: File[]) => void
+/**
+ * Whether to focus the input on mount.
+ */
+autoFocus?: boolean
+/**
+ * Style applied to the inner button.
+ */
+buttonStyle?: React.CSSProperties
+/**
+ * Class name applied to the inner button.
+ */
+buttonClassName?: string
+labelPosition?: any
+}`,stories:{usage:[{id:"core-forms-fileinput--basic",name:"Basic",snippet:`const Basic = () => <FileInput
+    onValueChange={fn()}
+    onChange={fn()}
+    label="Label"
+    description="Supports .mov and .mp4"
+    acceptedFileTypes={[".mov", ".mp4"]} />;`},{id:"core-forms-fileinput--without-label",name:"Without Label",snippet:'const WithoutLabel = () => <FileInput onValueChange={fn()} onChange={fn()} aria-label="Upload a file" />;'},{id:"core-forms-fileinput--label-position-start",name:"Label Position Start",snippet:`const LabelPositionStart = () => <FileInput
+    onValueChange={fn()}
+    onChange={fn()}
+    label="Attachment"
+    description="Supports .mov and .mp4"
+    labelPosition="start" />;`},{id:"core-forms-fileinput--disabled",name:"Disabled",snippet:`const Disabled = () => <FileInput
+    onValueChange={fn()}
+    onChange={fn()}
+    label="Label"
+    description="Supports .mov and .mp4"
+    isDisabled />;`},{id:"core-forms-fileinput--with-error",name:"With Error",snippet:`const WithError = () => <FileInput
+    onValueChange={fn()}
+    onChange={fn()}
+    label="Label"
+    errorMessage="Please choose a supported file." />;`},{id:"core-forms-fileinput--with-warning",name:"With Warning",snippet:`const WithWarning = () => <FileInput
+    onValueChange={fn()}
+    onChange={fn()}
+    label="Label"
+    validationState="warning"
+    warningMessage="This file format is uncommon \u2014 make sure it is supported." />;`},{id:"core-forms-fileinput--multiple",name:"Multiple",snippet:`const Multiple = () => <FileInput
+    onValueChange={fn()}
+    onChange={fn()}
+    label="Attachments"
+    description="You can choose multiple files."
+    allowsMultiple />;`},{id:"core-forms-fileinput--directory",name:"Directory",snippet:`const Directory = () => <FileInput
+    onValueChange={fn()}
+    onChange={fn()}
+    label="Upload folder"
+    description="Selects all files inside the chosen folder."
+    acceptDirectory />;`},{id:"core-forms-fileinput--custom-labels",name:"Custom Labels",snippet:`const CustomLabels = () => <FileInput
+    onValueChange={fn()}
+    onChange={fn()}
+    label="Avatar"
+    buttonLabel="Browse..."
+    placeholder="Drop an image here" />;`},{id:"core-forms-fileinput--variants",name:"Variants",snippet:`const Variants = () => (
+  <VariantViewer<React.ComponentProps<typeof FileInput>>
+    cellStyle={{ minWidth: 300 }}
+    header={["Label on top", "Label inline"]}
+    component={FileInput}
+    variants={{
+      Enabled: [
+        { label: "Label", description: "Supports .mov and .mp4" },
+        {
+          label: "Label",
+          description: "Supports .mov and .mp4",
+          labelPosition: "start",
+        },
+      ],
+      Warning: [
+        {
+          label: "Label",
+          validationState: "warning",
+          warningMessage: "Warning message replaces helper text",
+        },
+        {
+          label: "Label",
+          labelPosition: "start",
+          validationState: "warning",
+          warningMessage: "Warning message replaces helper text",
+        },
+      ],
+      Error: [
+        {
+          label: "Label",
+          errorMessage: "Error message replaces helper text",
+        },
+        {
+          label: "Label",
+          labelPosition: "start",
+          errorMessage: "Error message replaces helper text",
+        },
+      ],
+      Disabled: [
+        {
+          label: "Label",
+          description: "Supports .mov and .mp4",
+          isDisabled: true,
+        },
+        {
+          label: "Label",
+          labelPosition: "start",
+          description: "Supports .mov and .mp4",
+          isDisabled: true,
+        },
+      ],
+    }}
+  />
+);`}],implementation:""},similarTo:[],figmaUrl:null},FileList:{id:"core-collections-filelist",breadcrumb:"Core/Collections/FileList",importStatement:'import { FileList } from "@baseline-ui/core";',description:"FileList renders a vertical list of uploaded or attached files. Each row shows the file name, an upload-progress spinner or remove button, and an optional error state. Use it to surface attachments inside forms, drawers, or upload flows.",documentation:'FileList renders a vertical list of uploaded or attached files. Each row shows the file name, an upload-progress spinner or remove button, and an optional error state. Use it to surface attachments inside forms, drawers, or upload flows.\n\nFor collecting files, pair this with `FileUpload` or `ImageDropZone`.\n\n* Built on `UNSAFE_ListBox`, so rows are keyboard navigable and announced as listbox options\n* Per-row remove button, plus `Delete` / `Backspace` keyboard removal on the focused row\n* Loading state replaces the remove button with a `ProgressSpinner`\n* Error state with a red border, error message, and optional explanation\n* Long file names truncate with an ellipsis; the full name is exposed via `title`\n* Disabled state propagates to every remove button and blocks keyboard removal\n\n```jsx\nimport { FileList } from "@baseline-ui/core";\n\nconst items = [\n { id: "1", name: "report.pdf" },\n { id: "2", name: "photo.png" },\n];\n\nexport default function App() {\n return (\n <FileList\n aria-label="Uploaded files"\n items={items}\n onRemove={(id) => console.log("remove", id)}\n />\n );\n}\n```\n\nWhen `items` is empty, FileList renders nothing \u2014 render an empty-state component yourself if you need one.\n\nA FileList row can appear in three primary states: default, loading, and error. The states can be mixed across items in a single list.\n\nSet `isLoading` on an item to show a spinner instead of the remove button while the upload is in flight. Keyboard removal (`Delete` / `Backspace`) is suppressed on loading rows.\n\n```jsx\n<FileList\n aria-label="Uploaded files"\n items={[\n { id: "1", name: "uploading.zip", isLoading: true },\n { id: "2", name: "done.pdf" },\n ]}\n onRemove={handleRemove}\n/>\n```\n\nSet `errorMessage` (and optionally `errorExplanation`) on an item to render the row in the error state. The row gets a red border and the messages appear below the file name. The remove button stays visible so the user can clear the failed item.\n\n```jsx\n<FileList\n aria-label="Uploaded files"\n items={[\n {\n id: "1",\n name: "too-large.mp4",\n errorMessage: "Upload failed",\n errorExplanation: "File exceeds the 50 MB limit.",\n },\n ]}\n onRemove={handleRemove}\n/>\n```\n\nPass `disabledKeys="all"` to disable removal across every row, or an iterable of item ids to disable specific rows. Both the per-row remove button and `Delete` / `Backspace` keyboard removal are suppressed for disabled rows; loading rows keep their spinner.\n\n```jsx\n<FileList aria-label="Uploaded files" items={items} disabledKeys="all" />\n```\n\nFile names that exceed the row width truncate with an ellipsis. The full name is exposed via the `title` attribute and read by assistive technologies, so it is recoverable on hover and through screen readers.\n\nProvide `aria-label` or `aria-labelledby` so the listbox has an accessible name. `aria-labelledby` points to the id of an existing visible label.\n\n```jsx\n<>\n <span id="attachments-label">Attached files</span>\n <FileList aria-labelledby="attachments-label" items={items} />\n</>\n```\n\n| Selector | Description |\n| ----------------------------- | ------------------------------------------ |\n| `.BaselineUI-FileList` | Root element wrapping the listbox. |\n| `[role="option"][data-key]` | A row. `data-key` matches the item\'s `id`. |\n| `[data-focus-visible="true"]` | Row currently showing the focus ring. |\n| `[data-disabled="true"]` | Row that is currently disabled. |\n\n| Key | Function |\n| ----------------------- | ------------------------------------------- |\n| `Tab` / `Shift+Tab` | Moves focus into and out of the list. |\n| `ArrowUp` / `ArrowDown` | Moves focus between rows. |\n| `Home` / `End` | Moves focus to the first or last row. |\n| `Delete` | Removes the focused row (calls `onRemove`). |\n| `Backspace` | Removes the focused row (calls `onRemove`). |\n\nThe remove button is excluded from the tab order \u2014 keyboard users delete rows by focusing the row and pressing `Delete` or `Backspace`, while pointer users click the row\'s remove button. `Delete` / `Backspace` are suppressed when the focused item is disabled (via `disabledKeys`) or loading.\n\n* `FileUpload` \u2014 picker / drop target that produces files to render here.\n* `ImageDropZone` \u2014 variant of `FileUpload` specialized for images.\n* `UNSAFE_ListBox` \u2014 the underlying listbox primitive.',props:`interface FileListProps {
+/**
+ * The className applied to the root element.
+ */
+className?: string
+/**
+ * The style applied to the root element.
+ */
+style?: React.CSSProperties
+/**
+ * The items rendered in the list. Pass a stable reference (e.g. memoize
+ * or hoist) when possible \u2014 every new array identity rebuilds the
+ * underlying listbox collection.
+ */
+items: FileListItem[]
+/**
+ * Called when the user removes an item via the row button or Delete.
+ */
+onRemove?: (id: string) => void
+/**
+ * Keys of items that should be disabled individually, or \`"all"\` to
+ * disable every item. Disabled items cannot be removed via the row
+ * button or keyboard.
+ */
+disabledKeys?: Iterable<string> | "all"
+}`,stories:{usage:[{id:"core-collections-filelist--basic",name:"Basic",snippet:`const Basic = () => {
+    const [items, setItems] = React.useState(args.items);
+    React.useEffect(() => {
+      setItems(args.items);
+    }, [args.items]);
+
+    return (
+        <FileList
+            aria-label="Uploaded files"
+            items={items}
+            onRemove={(id) => {
+              args.onRemove?.(id);
+              setItems((current) => current.filter((item) => item.id !== id));
+            }} />
+    );
+};`},{id:"core-collections-filelist--loading",name:"Loading",snippet:`const Loading = () => {
+    const [items, setItems] = React.useState(args.items);
+    React.useEffect(() => {
+      setItems(args.items);
+    }, [args.items]);
+
+    return (
+        <FileList
+            aria-label="Uploaded files"
+            items={items}
+            onRemove={(id) => {
+              args.onRemove?.(id);
+              setItems((current) => current.filter((item) => item.id !== id));
+            }} />
+    );
+};`},{id:"core-collections-filelist--with-error",name:"With Error",snippet:`const WithError = () => {
+    const [items, setItems] = React.useState(args.items);
+    React.useEffect(() => {
+      setItems(args.items);
+    }, [args.items]);
+
+    return (
+        <FileList
+            aria-label="Uploaded files"
+            items={items}
+            onRemove={(id) => {
+              args.onRemove?.(id);
+              setItems((current) => current.filter((item) => item.id !== id));
+            }} />
+    );
+};`},{id:"core-collections-filelist--disabled",name:"Disabled",snippet:`const Disabled = () => {
+    const [items, setItems] = React.useState(args.items);
+    React.useEffect(() => {
+      setItems(args.items);
+    }, [args.items]);
+
+    return (
+        <FileList
+            aria-label="Uploaded files"
+            disabledKeys="all"
+            items={items}
+            onRemove={(id) => {
+              args.onRemove?.(id);
+              setItems((current) => current.filter((item) => item.id !== id));
+            }} />
+    );
+};`},{id:"core-collections-filelist--disabled-items",name:"Disabled Items",snippet:`const DisabledItems = () => {
+    const [items, setItems] = React.useState(args.items);
+    React.useEffect(() => {
+      setItems(args.items);
+    }, [args.items]);
+
+    return (
+        <FileList
+            aria-label="Uploaded files"
+            disabledKeys={["1", "3"]}
+            items={items}
+            onRemove={(id) => {
+              args.onRemove?.(id);
+              setItems((current) => current.filter((item) => item.id !== id));
+            }} />
+    );
+};`},{id:"core-collections-filelist--long-filename",name:"Long Filename",snippet:`const LongFilename = () => {
+    const [items, setItems] = React.useState(args.items);
+    React.useEffect(() => {
+      setItems(args.items);
+    }, [args.items]);
+
+    return (
+        <FileList
+            aria-label="Uploaded files"
+            items={items}
+            onRemove={(id) => {
+              args.onRemove?.(id);
+              setItems((current) => current.filter((item) => item.id !== id));
+            }} />
+    );
+};`},{id:"core-collections-filelist--mixed-states",name:"Mixed States",snippet:`const MixedStates = () => {
+    const [items, setItems] = React.useState(args.items);
+    React.useEffect(() => {
+      setItems(args.items);
+    }, [args.items]);
+
+    return (
+        <FileList
+            aria-label="Uploaded files"
+            items={items}
+            onRemove={(id) => {
+              args.onRemove?.(id);
+              setItems((current) => current.filter((item) => item.id !== id));
+            }} />
+    );
+};`},{id:"core-collections-filelist--many-items",name:"Many Items",snippet:`const ManyItems = () => {
+    const [items, setItems] = React.useState(args.items);
+    React.useEffect(() => {
+      setItems(args.items);
+    }, [args.items]);
+
+    return (
+        <FileList
+            aria-label="Uploaded files"
+            style={{ maxHeight: 240, overflowY: "auto" }}
+            items={items}
+            onRemove={(id) => {
+              args.onRemove?.(id);
+              setItems((current) => current.filter((item) => item.id !== id));
+            }} />
+    );
+};`}],implementation:`import React from "react";
+
+import { FileList } from "../FileList";
+
+import type { FileListItem } from "../FileList.types";
+
+export const defaultItems: FileListItem[] = [
+ { id: "1", name: "report.pdf" },
+ { id: "2", name: "photo.png" },
+ { id: "3", name: "notes.txt" },
+];
+
+export const loadingItems: FileListItem[] = [
+ { id: "1", name: "uploading-large-archive.zip", isLoading: true },
+ { id: "2", name: "already-uploaded.pdf" },
+];
+
+export const errorItems: FileListItem[] = [
+ {
+ id: "1",
+ name: "too-large.mp4",
+ errorMessage: "Upload failed",
+ errorExplanation: "File exceeds the 50 MB limit.",
+ },
+ {
+ id: "2",
+ name: "unsupported.exe",
+ errorMessage: "Unsupported file type",
+ },
+ { id: "3", name: "ok.pdf" },
+];
+
+export const longNameItems: FileListItem[] = [
+ {
+ id: "1",
+ name: "This is a very long file name that should be truncated in the UI.pdf",
+ },
+ { id: "2", name: "short.pdf" },
+];
+
+export const mixedStateItems: FileListItem[] = [
+ { id: "1", name: "uploading.zip", isLoading: true },
+ {
+ id: "2",
+ name: "too-large.mp4",
+ errorMessage: "Upload failed",
+ errorExplanation: "File exceeds the 50 MB limit.",
+ },
+ { id: "3", name: "report.pdf" },
+];
+
+export const manyItems: FileListItem[] = Array.from({ length: 12 }, (_, i) => ({
+ id: String(i + 1),
+ name: \`attachment-\${i + 1}.pdf\`,
+}));
+
+interface BasicProps {
+ onRemove?: (id: string) => void;
+ disabledKeys?: Iterable<string> | "all";
+}
+
+export const BasicFileList: React.FC<BasicProps> = ({
+ onRemove,
+ disabledKeys,
+}) => {
+ const [items, setItems] = React.useState<FileListItem[]>(defaultItems);
+ return (
+ <FileList
+ aria-label="Uploaded files"
+ items={items}
+ disabledKeys={disabledKeys}
+ onRemove={(id) => {
+ onRemove?.(id);
+ setItems((current) => current.filter((item) => item.id !== id));
+ }}
+ />
+ );
+};
+
+export const EmptyFileList: React.FC = () => (
+ <FileList aria-label="Empty" items={[]} />
+);
+
+export const LoadingFileList: React.FC = () => (
+ <FileList aria-label="Uploaded files" items={loadingItems} />
+);
+
+export const ErrorFileList: React.FC = () => (
+ <FileList
+ aria-label="Uploaded files"
+ items={errorItems}
+ onRemove={() => {}}
+ />
+);
+
+export const AriaLabelFileList: React.FC = () => (
+ <FileList aria-label="My files" items={defaultItems} />
+);
+
+export const AriaLabelledByFileList: React.FC = () => (
+ <>
+ <span id="file-list-label">Attached files</span>
+ <FileList aria-labelledby="file-list-label" items={defaultItems} />
+ </>
+);
+
+export const DisabledLoadingFileList: React.FC<BasicProps> = ({
+ onRemove,
+ disabledKeys,
+}) => (
+ <FileList
+ aria-label="Uploaded files"
+ items={[
+ { id: "1", name: "uploading.zip", isLoading: true },
+ { id: "2", name: "done.pdf" },
+ ]}
+ disabledKeys={disabledKeys}
+ onRemove={onRemove}
+ />
+);
+
+export const ClassNameFileList: React.FC = () => (
+ <FileList
+ aria-label="Files"
+ className="my-custom-list"
+ items={defaultItems}
+ />
+);
+
+export const LongNameFileList: React.FC = () => (
+ <FileList
+ aria-label="Files"
+ items={longNameItems}
+ style={{ width: 200 }}
+ onRemove={() => {}}
+ />
+);
+
+export const NoCallbackFileList: React.FC = () => (
+ <FileList aria-label="Files" items={defaultItems} />
+);
+
+export const ErrorNoCallbackFileList: React.FC = () => (
+ <FileList aria-label="Uploaded files" items={errorItems} />
+);
+
+export const LoadingNoCallbackFileList: React.FC = () => (
+ <FileList aria-label="Uploaded files" items={loadingItems} />
+);
+
+export const AriaDescribedByFileList: React.FC = () => (
+ <>
+ <span id="file-list-help">Drag files anywhere to upload</span>
+ <FileList
+ aria-label="Files"
+ aria-describedby="file-list-help"
+ items={defaultItems}
+ />
+ </>
+);
+
+export const AriaDetailsFileList: React.FC = () => (
+ <>
+ <span id="file-list-details">Detailed upload information</span>
+ <FileList
+ aria-label="Files"
+ aria-details="file-list-details"
+ items={defaultItems}
+ />
+ </>
+);`},similarTo:["FileUpload","ImageDropZone"],figmaUrl:null},FrameProvider:{id:"core-utilities-frameprovider",breadcrumb:"Core/Utilities/FrameProvider",importStatement:`import {
     Box,
     FrameProvider,
     NestedTestFrameProvider,
@@ -31311,7 +31850,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:"0.60.0"};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:"0.61.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.