@baseline-ui/mcp 3.7.0 → 3.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4542,7 +4542,9 @@ includePicker?: boolean
4542
4542
  * that is currently selected. If boolean, the label will be shown only when
4543
4543
  * the color is not \`null\`. If a function, the function will be called with
4544
4544
  * the current color and should return a string. If \`false\`, the label will
4545
- * not be shown.
4545
+ * not be shown, but the default trigger's accessible name still includes the
4546
+ * color name. A custom \`renderTriggerButton\` receives \`colorName: false\` and
4547
+ * is responsible for naming its trigger.
4546
4548
  *
4547
4549
  * @default true
4548
4550
  */
@@ -4722,10 +4724,13 @@ import { presets } from "./data";
4722
4724
 
4723
4725
  import type { ColorInputProps, IconColorInputProps } from "../ColorInput.types";
4724
4726
 
4725
- export const CustomTriggerButton = () => {
4727
+ export const CustomTriggerButton: React.FC<
4728
+ Omit<ColorInputProps, "renderTriggerButton">
4729
+ > = (props) => {
4726
4730
  return (
4727
4731
  <ColorInput
4728
4732
  label="label"
4733
+ presets={presets}
4729
4734
  renderTriggerButton={({ colorName, ref, triggerProps }) => (
4730
4735
  <ActionIconButton
4731
4736
  {...triggerProps}
@@ -4735,6 +4740,7 @@ export const CustomTriggerButton = () => {
4735
4740
  aria-haspopup="true"
4736
4741
  />
4737
4742
  )}
4743
+ {...props}
4738
4744
  />
4739
4745
  );
4740
4746
  };
@@ -4835,6 +4841,10 @@ export const StoredCustomColorsExample: React.FC<{ storageKey: string }> = ({
4835
4841
  />
4836
4842
  );
4837
4843
 
4844
+ export const RedPresetColorInput: React.FC<ColorInputProps> = (props) => (
4845
+ <ColorInput presets={presets} defaultValue="#ff0000" {...props} />
4846
+ );
4847
+
4838
4848
  export const IconColorInputExample: React.FC<
4839
4849
  Omit<IconColorInputProps, "icon">
4840
4850
  > = (props) => <IconColorInput icon={BorderColorIcon} {...props} />;
@@ -9763,7 +9773,7 @@ labelPosition?: any
9763
9773
  ],
9764
9774
  }}
9765
9775
  />
9766
- );`}],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 `FileUploader` 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* `FileUploader` \u2014 picker / drop target that produces files to render here.\n* `ImageDropZone` \u2014 a dedicated drop target specialized for images.\n* `UNSAFE_ListBox` \u2014 the underlying listbox primitive.',props:`interface FileListProps {
9776
+ );`}],implementation:""},similarTo:[],figmaUrl:null},FileList:{id:"core-collections-filelist",breadcrumb:"Core/Collections/FileList",importStatement:'import { FileList, Image } from "@baseline-ui/core";',description:"FileList renders a list of files. The default `compact` variant shows each uploaded or attached file with its name, an upload-progress spinner or remove button, and an optional error state; use it to surface attachments inside forms, drawers, or upload flows. The `expanded` and `grid` variants offer files to pick instead, such as samples next to a `FileUploader`.",documentation:'FileList renders a list of files. The default `compact` variant shows each uploaded or attached file with its name, an upload-progress spinner or remove button, and an optional error state; use it to surface attachments inside forms, drawers, or upload flows. The `expanded` and `grid` variants offer files to pick instead, such as samples next to a `FileUploader`.\n\nFor collecting files, pair this with `FileUploader` 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 `compact` 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. In the `expanded` and `grid` variants, disabled items are dimmed and cannot be picked with `onAction`.\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\n`variant="expanded"` renders each item as a card with a file icon, its name, a\n`description` and an optional `tag`; `variant="grid"` renders preview tiles with\nthe item\'s `preview` (typically an `Image`), name and `description`. Use them to\noffer files to pick, such as samples next to a `FileUploader`, and handle the\npick in `onAction`. They do not render the remove button, spinner or error\nmessages of the default `compact` variant.\n\n```jsx\n<FileList\n variant="grid"\n label="Or start from a sample"\n items={[\n { id: "invoice", name: "Invoice", description: "2 pages" },\n {\n id: "medical-bill",\n name: "Medical bill",\n preview: <Image src="/medical-bill.png" alt="Medical bill preview" />,\n },\n ]}\n onAction={loadSample}\n/>\n```\n\nA `tag` is a `label` and an optional `variant`, such as\n`{ label: "Compliant", variant: "green" }`. An `Image` preview that fails to load shows the file\nicon. `label` renders a title above the list that also names it for assistive\ntechnology.\n\nLong lists scroll so the content around them stays in view: `expanded` shows\nabout five rows, and `grid` about two, with up to six tiles per row.\n\nEach item is named by its file name and described by its `description` and\n`tag`. In `grid`, `ArrowLeft` and `ArrowRight` move between tiles in a row, and\n`ArrowUp` and `ArrowDown` move between rows.\n\nProvide `label`, `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| `ArrowLeft` / `ArrowRight` | In `grid`, moves focus between tiles in a row. |\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* `FileUploader` \u2014 picker / drop target that produces files to render here.\n* `ImageDropZone` \u2014 a dedicated drop target specialized for images.\n* `UNSAFE_ListBox` \u2014 the underlying listbox primitive.',props:`interface FileListProps {
9767
9777
  /**
9768
9778
  * The className applied to the root element.
9769
9779
  */
@@ -9772,6 +9782,30 @@ className?: string
9772
9782
  * The style applied to the root element.
9773
9783
  */
9774
9784
  style?: React.CSSProperties
9785
+ /**
9786
+ * How the items are rendered.
9787
+ *
9788
+ * - \`compact\` (default): divided rows with a file icon and name, for files
9789
+ * the user has added. The only variant that renders the remove button,
9790
+ * the loading spinner and error messages.
9791
+ * - \`expanded\`: bordered cards with the name, \`description\` and \`tag\`.
9792
+ * Past about five rows the list scrolls.
9793
+ * - \`grid\`: preview tiles with the \`preview\`, name and \`description\`, up to
9794
+ * six per row. Past about two rows the grid scrolls.
9795
+ *
9796
+ * @default "compact"
9797
+ */
9798
+ variant?: "compact" | "expanded" | "grid"
9799
+ /**
9800
+ * A title rendered above the list that also labels it for assistive
9801
+ * technology.
9802
+ */
9803
+ label?: React.ReactNode
9804
+ /**
9805
+ * Called with the \`id\` of the item the user picks by clicking it or
9806
+ * pressing Enter.
9807
+ */
9808
+ onAction?: (id: string) => void
9775
9809
  /**
9776
9810
  * The items rendered in the list. Pass a stable reference (e.g. memoize
9777
9811
  * or hoist) when possible \u2014 every new array identity rebuilds the
@@ -9779,18 +9813,19 @@ style?: React.CSSProperties
9779
9813
  */
9780
9814
  items: FileListItem[]
9781
9815
  /**
9782
- * Called when the user removes an item via the row button or Delete.
9816
+ * Called when the user removes an item via the row button, Delete or
9817
+ * Backspace. Only the \`compact\` variant supports removal.
9783
9818
  */
9784
9819
  onRemove?: (id: string) => void
9785
9820
  /**
9786
9821
  * Keys of items that should be disabled individually, or \`"all"\` to
9787
9822
  * disable every item. Disabled items cannot be removed via the row
9788
- * button or keyboard.
9823
+ * button or keyboard, or picked with \`onAction\`.
9789
9824
  */
9790
9825
  disabledKeys?: Iterable<string> | "all"
9791
9826
  /**
9792
9827
  * Overrides the accessible name of a file row while it is loading, and of
9793
- * its spinner.
9828
+ * its spinner. Used in the \`compact\` variant only.
9794
9829
  *
9795
9830
  * Message id: \`bui.fileList.loading\`. Defaults to \`"Loading {fileName}"\`.
9796
9831
  * A string is used as-is, with no placeholder substitution. To include
@@ -9800,7 +9835,7 @@ disabledKeys?: Iterable<string> | "all"
9800
9835
  loadingLabel?: string | ((values: { fileName: string }) => string)
9801
9836
  /**
9802
9837
  * Overrides the accessible name of a removable file row, telling keyboard
9803
- * users how to delete it.
9838
+ * users how to delete it. Used in the \`compact\` variant only.
9804
9839
  *
9805
9840
  * Message id: \`bui.fileList.removeHint\`. Defaults to
9806
9841
  * \`"{fileName}, press Delete or Backspace to remove"\`. A string is used
@@ -9932,9 +9967,90 @@ removeHintLabel?: string | ((values: { fileName: string }) => string)
9932
9967
  setItems((current) => current.filter((item) => item.id !== id));
9933
9968
  }} />
9934
9969
  );
9970
+ };`},{id:"core-collections-filelist--expanded",name:"Expanded",snippet:`const Expanded = () => {
9971
+ const [items, setItems] = React.useState(args.items);
9972
+ React.useEffect(() => {
9973
+ setItems(args.items);
9974
+ }, [args.items]);
9975
+
9976
+ return (
9977
+ <FileList
9978
+ aria-label={undefined}
9979
+ variant="expanded"
9980
+ label="Or start from a sample"
9981
+ onAction={fn()}
9982
+ items={items}
9983
+ onRemove={(id) => {
9984
+ args.onRemove?.(id);
9985
+ setItems((current) => current.filter((item) => item.id !== id));
9986
+ }} />
9987
+ );
9988
+ };`},{id:"core-collections-filelist--grid",name:"Grid",snippet:`const Grid = () => {
9989
+ const [items, setItems] = React.useState(args.items);
9990
+ React.useEffect(() => {
9991
+ setItems(args.items);
9992
+ }, [args.items]);
9993
+
9994
+ return (
9995
+ <FileList
9996
+ aria-label="Uploaded files"
9997
+ variant="grid"
9998
+ items={items}
9999
+ onRemove={(id) => {
10000
+ args.onRemove?.(id);
10001
+ setItems((current) => current.filter((item) => item.id !== id));
10002
+ }} />
10003
+ );
10004
+ };`},{id:"core-collections-filelist--many-expanded",name:"Many Expanded",snippet:`const ManyExpanded = () => {
10005
+ const [items, setItems] = React.useState(args.items);
10006
+ React.useEffect(() => {
10007
+ setItems(args.items);
10008
+ }, [args.items]);
10009
+
10010
+ return (
10011
+ <FileList
10012
+ aria-label="Uploaded files"
10013
+ items={items}
10014
+ onRemove={(id) => {
10015
+ args.onRemove?.(id);
10016
+ setItems((current) => current.filter((item) => item.id !== id));
10017
+ }} />
10018
+ );
10019
+ };`},{id:"core-collections-filelist--many-grid",name:"Many Grid",snippet:`const ManyGrid = () => {
10020
+ const [items, setItems] = React.useState(args.items);
10021
+ React.useEffect(() => {
10022
+ setItems(args.items);
10023
+ }, [args.items]);
10024
+
10025
+ return (
10026
+ <FileList
10027
+ aria-label="Uploaded files"
10028
+ items={items}
10029
+ onRemove={(id) => {
10030
+ args.onRemove?.(id);
10031
+ setItems((current) => current.filter((item) => item.id !== id));
10032
+ }} />
10033
+ );
10034
+ };`},{id:"core-collections-filelist--expanded-disabled",name:"Expanded Disabled",snippet:`const ExpandedDisabled = () => {
10035
+ const [items, setItems] = React.useState(args.items);
10036
+ React.useEffect(() => {
10037
+ setItems(args.items);
10038
+ }, [args.items]);
10039
+
10040
+ return (
10041
+ <FileList
10042
+ aria-label="Uploaded files"
10043
+ disabledKeys="all"
10044
+ items={items}
10045
+ onRemove={(id) => {
10046
+ args.onRemove?.(id);
10047
+ setItems((current) => current.filter((item) => item.id !== id));
10048
+ }} />
10049
+ );
9935
10050
  };`}],implementation:`import React from "react";
9936
10051
 
9937
10052
  import { ActionButton } from "../../ActionButton";
10053
+ import { Image } from "../../Image/Image";
9938
10054
  import { FileList } from "../FileList";
9939
10055
 
9940
10056
  import type { FileListItem, FileListProps } from "../FileList.types";
@@ -9991,9 +10107,11 @@ export const manyItems: FileListItem[] = Array.from({ length: 12 }, (_, i) => ({
9991
10107
 
9992
10108
  // Swaps in a new array whose items carry new content, which is the only way a caller can
9993
10109
  // legitimately invalidate the memoised options.
9994
- export const UploadingFileList: React.FC<{ errorMessage?: string }> = ({
9995
- errorMessage,
9996
- }) => {
10110
+ export const UploadingFileList: React.FC<{
10111
+ errorMessage?: string;
10112
+ description?: string;
10113
+ variant?: FileListProps["variant"];
10114
+ }> = ({ errorMessage, description, variant }) => {
9997
10115
  const [items, setItems] = React.useState<FileListItem[]>(loadingItems);
9998
10116
 
9999
10117
  return (
@@ -10002,12 +10120,18 @@ export const UploadingFileList: React.FC<{ errorMessage?: string }> = ({
10002
10120
  label="Finish upload"
10003
10121
  onPress={() => {
10004
10122
  setItems((prev) =>
10005
- prev.map((item) => ({ ...item, isLoading: false, errorMessage })),
10123
+ prev.map((item) => ({
10124
+ ...item,
10125
+ isLoading: false,
10126
+ errorMessage,
10127
+ description,
10128
+ })),
10006
10129
  );
10007
10130
  }}
10008
10131
  />
10009
10132
  <FileList
10010
10133
  aria-label="Uploaded files"
10134
+ variant={variant}
10011
10135
  items={items}
10012
10136
  onRemove={(id) => {
10013
10137
  setItems((prev) => prev.filter((item) => item.id !== id));
@@ -10158,23 +10282,79 @@ export const AriaDetailsFileList: React.FC = () => (
10158
10282
  items={defaultItems}
10159
10283
  />
10160
10284
  </>
10161
- );`},similarTo:["FileUploader","ImageDropZone"],figmaUrl:null},FileUploader:{id:"core-forms-fileuploader",breadcrumb:"Core/Forms/FileUploader",importStatement:'import { Box, FileList, FileUploader, VariantViewer } from "@baseline-ui/core";',description:"`FileUploader` lets users select files via the native file picker or by\ndragging and dropping them onto a drop area. It reports the selected files\nthrough `onAdd`; it does not own any `files` state and does not perform the\nupload itself. Because the uploader is stateless, you pair it with `FileList`\nto display (and remove) the files the user has added \u2014 every example below\ndoes exactly that.",documentation:'`FileUploader` lets users select files via the native file picker or by\ndragging and dropping them onto a drop area. It reports the selected files\nthrough `onAdd`; it does not own any `files` state and does not perform the\nupload itself. Because the uploader is stateless, you pair it with `FileList`\nto display (and remove) the files the user has added \u2014 every example below\ndoes exactly that.\n\n* Native file picker triggered by clicking anywhere in the drop area (or the\n button, in the `button` variant)\n* Drag-and-drop and paste support in the `dropzone` variant, built on React\n Aria\'s `DropZone`\n* MIME-type filtering through the `accept` prop\n* Single- or multiple-file selection via `allowsMultiple`\n* Keyboard focus management with visible focus rings, and an error message\n wired to the trigger via `aria-describedby`\n\n`FileUploader` only emits files; it never renders them. Keep the file\ncollection in your own state, append to it in `onAdd`, and render it with a\nsibling `FileList`:\n\n```tsx\nimport { FileUploader, FileList } from "@baseline-ui/core";\nimport type { FileListItem } from "@baseline-ui/core";\n\nconst [items, setItems] = React.useState<FileListItem[]>([]);\n\n<FileUploader\n label="Attachments"\n onAdd={(files) =>\n setItems((current) => [\n ...current,\n ...files.map((file) => ({ id: crypto.randomUUID(), name: file.name })),\n ])\n }\n/>\n<FileList\n aria-label="Uploaded files"\n items={items}\n onRemove={(id) => setItems((c) => c.filter((item) => item.id !== id))}\n/>;\n```\n\nThere are three visual treatments: the default `dropzone`, the `dropzone` with\n`isInline`, and the `button` variant.\n\n* The `dropzone` variant (default) renders a filled drop area that accepts\n dragged and pasted files. Clicking anywhere in the area opens the native file\n picker.\n* Set `isInline` to outline the drop area with a dashed border and rounded\n corners instead of rendering it as a plain filled box.\n* The `button` variant renders a single `ActionButton` that opens the file\n picker, with no drop area. Use it when drag-and-drop is not appropriate for\n the surrounding layout.\n\n```tsx\n<FileUploader label="Dropzone" />\n<FileUploader isInline label="Inline" />\n<FileUploader variant="button" buttonLabel="Upload" />\n```\n\nSee the [Variants story](?path=/story/core-forms-fileuploader--variants) for\nevery variant in every state laid out as a grid.\n\nSet `errorMessage` to show an error below the control; in the `dropzone`\nvariant the drop area is also outlined in the error color. Set `isDisabled` to\nblock all interaction.\n\n```tsx\n<FileUploader label="Error" errorMessage="Upload failed." />\n<FileUploader label="Disabled" isDisabled />\n```\n\nPass `accept` to restrict the picker to specific MIME types, and\n`allowsMultiple={false}` to limit selection to a single file.\n\n```tsx\n<FileUploader accept="image/png" allowsMultiple={false} />\n```\n\nThe root element exposes the current variant; the drop area (in the `dropzone`\nvariant) exposes the React Aria `DropZone` state attributes.\n\n| Selector | Description |\n| ---------------------- | -------------------------------------------------------- |\n| `[data-variant]` | The active variant (`"dropzone"` or `"button"`). |\n| `[data-drop-target]` | Whether files are currently being dragged over the area. |\n| `[data-disabled]` | Whether the uploader is disabled. |\n| `[data-focused]` | Whether the drop area is focused. |\n| `[data-focus-visible]` | Whether the drop area is keyboard focused. |\n| `[data-hovered]` | Whether the drop area is hovered with a mouse. |\n\n| Key | Function |\n| -------------- | ------------------------------------------------------------- |\n| `Tab` | Moves focus between the drop area and the upload button. |\n| `Enter` | Activates the upload button and opens the native file picker. |\n| `Space` | Activates the upload button and opens the native file picker. |\n| Paste shortcut | With the drop area focused, pastes files from the clipboard. |\n\n`errorMessage` is announced to assistive technology and is referenced by the\ntrigger via `aria-describedby`.\n\n* [`FileList`](?path=/docs/core-collections-filelist--docs) \u2014 displays and removes the\n files emitted by `onAdd`.\n* [`ActionButton`](?path=/docs/core-buttons-actionbutton--docs) \u2014 the button\n rendered by the `button` variant.',props:`interface FileUploaderProps {
10285
+ );
10286
+
10287
+ const LOADABLE_IMAGE =
10288
+ "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==";
10289
+
10290
+ const sampleItems: FileListItem[] = [
10291
+ {
10292
+ id: "annual-report",
10293
+ name: "annual-report-2024.pdf",
10294
+ description: "12 pages \xB7 untagged",
10295
+ tag: { label: "Non-compliant", variant: "red" },
10296
+ preview: (
10297
+ <Image src={LOADABLE_IMAGE} alt="" data-testid="annual-report-preview" />
10298
+ ),
10299
+ },
10300
+ {
10301
+ id: "invoice",
10302
+ name: "invoice-tagged.pdf",
10303
+ description: "3 pages \xB7 fully tagged",
10304
+ tag: { label: "Compliant", variant: "green" },
10305
+ },
10306
+ ];
10307
+
10308
+ export const SampleFileList: React.FC<Partial<FileListProps>> = (props) => (
10309
+ <FileList
10310
+ variant="expanded"
10311
+ label="Or start from a sample"
10312
+ items={sampleItems}
10313
+ {...props}
10314
+ />
10315
+ );
10316
+
10317
+ export const BrokenPreviewFileList: React.FC = () => (
10318
+ <FileList
10319
+ variant="grid"
10320
+ aria-label="Samples"
10321
+ items={[
10322
+ {
10323
+ id: "scan",
10324
+ name: "scan.pdf",
10325
+ preview: <Image src="http://localhost:1/missing.png" alt="" />,
10326
+ },
10327
+ ]}
10328
+ />
10329
+ );`},similarTo:["FileUploader","ImageDropZone"],figmaUrl:null},FileUploader:{id:"core-forms-fileuploader",breadcrumb:"Core/Forms/FileUploader",importStatement:'import { Box, FileList, FileUploader, Image, VariantViewer } from "@baseline-ui/core";',description:"`FileUploader` lets users select files via the native file picker or by\ndragging and dropping them onto a drop area. It reports the selected files\nthrough `onAdd`; it does not own any `files` state and does not perform the\nupload itself. Because the uploader is stateless, you pair it with `FileList`\nto display (and remove) the files the user has added \u2014 every example below\ndoes exactly that.",documentation:'`FileUploader` lets users select files via the native file picker or by\ndragging and dropping them onto a drop area. It reports the selected files\nthrough `onAdd`; it does not own any `files` state and does not perform the\nupload itself. Because the uploader is stateless, you pair it with `FileList`\nto display (and remove) the files the user has added \u2014 every example below\ndoes exactly that.\n\n* Native file picker triggered by clicking blank space in the drop area (or the\n button, in the `button` variant)\n* Drag-and-drop and paste support in the `dropzone-*` variants\n* MIME-type filtering through the `accept` prop\n* Single- or multiple-file selection via `allowsMultiple`\n* Keyboard focus management with visible focus rings, and an error message\n wired to the trigger via `aria-describedby`\n\n`FileUploader` only emits files; it never renders them. Keep the file\ncollection in your own state, append to it in `onAdd`, and render it with a\nsibling `FileList`:\n\n```tsx\nimport { FileUploader, FileList } from "@baseline-ui/core";\nimport type { FileListItem } from "@baseline-ui/core";\n\nconst [items, setItems] = React.useState<FileListItem[]>([]);\n\n<FileUploader\n label="Attachments"\n onAdd={(files) =>\n setItems((current) => [\n ...current,\n ...files.map((file) => ({ id: crypto.randomUUID(), name: file.name })),\n ])\n }\n/>\n<FileList\n aria-label="Uploaded files"\n items={items}\n onRemove={(id) => setItems((c) => c.filter((item) => item.id !== id))}\n/>;\n```\n\nThere are four visual treatments, chosen with `variant`.\n\n* `dropzone-box` (default) renders a filled drop area that accepts dragged and\n pasted files. Clicking blank space in the area opens the native file picker.\n* `dropzone-inline` outlines the drop area with a dashed border and rounded\n corners instead of rendering it as a plain filled box.\n* `dropzone-compact` renders a one-line dashed bar with the upload icon, the\n action text and the `description` side by side. The text truncates with an\n ellipsis instead of wrapping, so it suits tight layouts; keep the\n `description` plain text, since a link in it can be cut off. The `children`\n render below the bar, outside the drop area.\n* `button` renders a single `ActionButton` that opens the file picker, with no\n drop area. Use it when drag-and-drop is not appropriate for the surrounding\n layout.\n\n`variant="dropzone"` and `isInline` still work but are deprecated: `"dropzone"`\nis `dropzone-box`, or `dropzone-inline` with `isInline`. Use `dropzone-box` and\n`dropzone-inline` instead.\n\n```tsx\n<FileUploader label="Box" />\n<FileUploader variant="dropzone-inline" label="Inline" />\n<FileUploader variant="dropzone-compact" description="Supports .mov and .mp4" />\n<FileUploader variant="button" buttonLabel="Upload" />\n```\n\nSee the [Variants story](?path=/story/core-forms-fileuploader--variants) for\nevery variant in every state laid out as a grid.\n\nSet `errorMessage` to show an error below the control; in the `dropzone-*`\nvariants the drop area is also outlined in the error color. Set `isDisabled` to\nblock all interaction.\n\n```tsx\n<FileUploader label="Error" errorMessage="Upload failed." />\n<FileUploader label="Disabled" isDisabled />\n```\n\nPass `accept` to restrict the picker to specific MIME types, and\n`allowsMultiple={false}` to limit selection to a single file.\n\n```tsx\n<FileUploader accept="image/png" allowsMultiple={false} />\n```\n\nTo offer sample files the user can start from instead of uploading their own,\nrender a `FileList` with the `expanded` or `grid` variant and handle its\n`onAction`. The uploader neither loads the sample nor calls `onAdd`; fetching it\nis up to you.\n\nTo show the samples below the drop area, render the `FileList` next to the\nuploader:\n\nTo put them inside the drop area, which suits large empty states, pass a\n`grid` `FileList` as the uploader\'s children; an `expanded` list there shrinks\nto its widest card. A file dropped anywhere on the area is\nstill added, and clicking blank space in it opens the file picker, while\nclicking a sample only picks it. Anything clickable among the children should\nbe a Baseline component: a native `<button>`, `<a>` or `<input>` also opens\nthe picker. `isDisabled` disables every sample too. The\n`button` and `dropzone-compact` variants render the children below the\ncontrol instead.\n\n```tsx\n<FileUploader onAdd={handleAdd}>\n <FileList\n variant="grid"\n label="Or start from a sample"\n items={[\n { id: "invoice", name: "Invoice" },\n {\n id: "medical-bill",\n name: "Medical bill",\n preview: <Image src="/medical-bill.png" alt="Medical bill preview" />,\n },\n ]}\n onAction={loadSample}\n />\n</FileUploader>\n```\n\nSee [`FileList`](?path=/docs/core-collections-filelist--docs) for its variants,\nscrolling and keyboard interaction.\n\nThe root element exposes the current variant.\n\n| Selector | Description |\n| ---------------- | ----------------------------------------------------------------------------------------------- |\n| `[data-variant]` | The active variant (`"dropzone-box"`, `"dropzone-inline"`, `"dropzone-compact"` or `"button"`). |\n\n| Key | Function |\n| -------------- | ------------------------------------------------------------------------------------------- |\n| `Tab` | Moves focus to the upload trigger, then to any link in the description and to the children. |\n| `Enter` | Activates the upload trigger and opens the native file picker. |\n| `Space` | Activates the upload trigger and opens the native file picker. |\n| Paste shortcut | With the upload trigger focused, pastes files from the clipboard. |\n\n`errorMessage` is announced to assistive technology and is referenced by the\ntrigger via `aria-describedby`.\n\n* [`FileList`](?path=/docs/core-collections-filelist--docs) \u2014 displays and removes the\n files emitted by `onAdd`.\n* [`ActionButton`](?path=/docs/core-buttons-actionbutton--docs) \u2014 the button\n rendered by the `button` variant.',props:`interface FileUploaderProps {
10162
10330
  /**
10163
10331
  * The visual variant.
10164
10332
  *
10165
- * - \`dropzone\` (default): renders a drop area that accepts dragged and
10166
- * pasted files. Clicking anywhere in the area opens the file picker.
10167
- * - \`button\`: renders an \`ActionButton\` that opens the file picker. No
10168
- * drop target is rendered.
10169
- *
10170
- * @default "dropzone"
10171
- */
10172
- variant?: "dropzone" | "button"
10173
- /**
10174
- * Whether the \`dropzone\` drop area is rendered inline \u2014 outlined with a
10175
- * dashed border and rounded corners \u2014 instead of as a plain filled box.
10176
- * Has no effect on the \`button\` variant.
10177
- *
10333
+ * - \`dropzone-box\` (default): a filled drop area that accepts dragged and
10334
+ * pasted files. Clicking blank space in the area opens the file picker.
10335
+ * - \`dropzone-inline\`: the same drop area outlined with a dashed border and
10336
+ * rounded corners instead of a filled box.
10337
+ * - \`dropzone-compact\`: a one-line dashed bar with the upload icon, the
10338
+ * action text and the \`description\` side by side. The action text and the
10339
+ * description truncate with an ellipsis rather than wrap. The \`children\`
10340
+ * render below the bar, outside the drop area.
10341
+ * - \`button\`: an \`ActionButton\` that opens the file picker. No drop target
10342
+ * is rendered.
10343
+ * - \`dropzone\` (deprecated): an alias for \`dropzone-box\`, or for
10344
+ * \`dropzone-inline\` when \`isInline\` is set. Use one of the values above.
10345
+ *
10346
+ * @default "dropzone-box"
10347
+ */
10348
+ variant?: | "dropzone-box"
10349
+ | "dropzone-inline"
10350
+ | "dropzone-compact"
10351
+ | "button"
10352
+ | "dropzone"
10353
+ /**
10354
+ * Whether the drop area is rendered inline. Only honoured when \`variant\` is
10355
+ * omitted or the deprecated \`"dropzone"\`; any other \`variant\` ignores it.
10356
+ *
10357
+ * @deprecated Use \`variant="dropzone-inline"\`.
10178
10358
  * @default false
10179
10359
  */
10180
10360
  isInline?: boolean
@@ -10183,7 +10363,13 @@ isInline?: boolean
10183
10363
  */
10184
10364
  label?: React.ReactNode
10185
10365
  /**
10186
- * Optional description rendered below the label.
10366
+ * Optional description. The dropzone variants render it inside the drop
10367
+ * area, under the action text (beside it in \`dropzone-compact\`), where
10368
+ * clicking it opens the file picker; a link in it should be a Baseline
10369
+ * \`Link\`, since a native \`<a>\` also opens the picker. Keep it plain text in
10370
+ * \`dropzone-compact\`: it truncates there, so a link can be cut off while
10371
+ * still taking keyboard focus. The \`button\` variant renders it below the
10372
+ * label.
10187
10373
  */
10188
10374
  description?: React.ReactNode
10189
10375
  /**
@@ -10221,12 +10407,26 @@ errorMessage?: string
10221
10407
  */
10222
10408
  buttonLabel?: string
10223
10409
  /**
10224
- * The text rendered inside the clickable drop area in the \`dropzone\`
10225
- * variant.
10410
+ * The text rendered inside the clickable drop area in the dropzone
10411
+ * variants.
10226
10412
  *
10227
10413
  * @default "Drop files here or click to upload"
10228
10414
  */
10229
10415
  dropzoneLabel?: string
10416
+ /**
10417
+ * Content offered alongside the drop area, typically a \`FileList\` of sample
10418
+ * files the user can pick instead of uploading one. In the \`dropzone-box\`
10419
+ * and \`dropzone-inline\` variants it renders inside the drop area, centered,
10420
+ * so a file dropped on it is still added; clicking blank space in the drop
10421
+ * area opens the file picker, and clicking an item, button or link does not.
10422
+ * Use Baseline components for anything clickable here: a native \`<button>\`,
10423
+ * \`<a>\` or \`<input>\` also opens the picker. Use the \`grid\` \`FileList\`
10424
+ * variant here; an \`expanded\` list shrinks to its widest card. The \`button\`
10425
+ * and \`dropzone-compact\` variants render it below the control. Disabling the
10426
+ * uploader disables a \`FileList\` passed here. To show samples outside the
10427
+ * drop area, render the \`FileList\` next to the uploader instead.
10428
+ */
10429
+ children?: React.ReactNode
10230
10430
  }`,stories:{usage:[{id:"core-forms-fileuploader--default",name:"Default",snippet:`const Default = () => <Box style={{ width: 240 }}>
10231
10431
  <UploaderWithFileList label="Label" description="Supports .mov and .mp4" onAdd={fn()} />
10232
10432
  </Box>;`},{id:"core-forms-fileuploader--variants",name:"Variants",snippet:`const Variants = (args) => (
@@ -10236,15 +10436,20 @@ dropzoneLabel?: string
10236
10436
  defaultProps={args}
10237
10437
  cellStyle={{ width: 240 }}
10238
10438
  variants={{
10239
- Dropzone: [
10240
- { variant: "dropzone" },
10241
- { variant: "dropzone", ...ERROR_PROPS },
10242
- { variant: "dropzone", ...DISABLED_PROPS },
10439
+ Box: [
10440
+ { variant: "dropzone-box" },
10441
+ { variant: "dropzone-box", ...ERROR_PROPS },
10442
+ { variant: "dropzone-box", ...DISABLED_PROPS },
10243
10443
  ],
10244
10444
  Inline: [
10245
- { isInline: true },
10246
- { isInline: true, ...ERROR_PROPS },
10247
- { isInline: true, ...DISABLED_PROPS },
10445
+ { variant: "dropzone-inline" },
10446
+ { variant: "dropzone-inline", ...ERROR_PROPS },
10447
+ { variant: "dropzone-inline", ...DISABLED_PROPS },
10448
+ ],
10449
+ Compact: [
10450
+ { variant: "dropzone-compact" },
10451
+ { variant: "dropzone-compact", ...ERROR_PROPS },
10452
+ { variant: "dropzone-compact", ...DISABLED_PROPS },
10248
10453
  ],
10249
10454
  Button: [
10250
10455
  { variant: "button" },
@@ -10261,7 +10466,17 @@ dropzoneLabel?: string
10261
10466
  variant="button"
10262
10467
  buttonLabel="Upload" />
10263
10468
  </Box>;`},{id:"core-forms-fileuploader--inline",name:"Inline",snippet:`const Inline = () => <Box style={{ width: 240 }}>
10264
- <UploaderWithFileList label="Label" description="Supports .mov and .mp4" onAdd={fn()} isInline />
10469
+ <UploaderWithFileList
10470
+ label="Label"
10471
+ description="Supports .mov and .mp4"
10472
+ onAdd={fn()}
10473
+ variant="dropzone-inline" />
10474
+ </Box>;`},{id:"core-forms-fileuploader--compact",name:"Compact",snippet:`const Compact = () => <Box style={{ width: 480 }}>
10475
+ <UploaderWithFileList
10476
+ label="Label"
10477
+ description="Supports .mov and .mp4"
10478
+ onAdd={fn()}
10479
+ variant="dropzone-compact" />
10265
10480
  </Box>;`},{id:"core-forms-fileuploader--error-dropzone",name:"Error Dropzone",snippet:`const ErrorDropzone = () => <Box style={{ width: 240 }}>
10266
10481
  <UploaderWithFileList
10267
10482
  label="Label"
@@ -10275,11 +10490,40 @@ dropzoneLabel?: string
10275
10490
  onAdd={fn()}
10276
10491
  isDisabled />
10277
10492
  </Box>;`},{id:"core-forms-fileuploader--no-label",name:"No Label",snippet:`const NoLabel = () => <Box style={{ width: 240 }}>
10278
- <UploaderWithFileList label={undefined} description={undefined} onAdd={fn()} />
10279
- </Box>;`}],implementation:`import React from "react";
10493
+ <UploaderWithFileList label={undefined} description="Supports .mov and .mp4" onAdd={fn()} />
10494
+ </Box>;`},{id:"core-forms-fileuploader--samples-outside",name:"Samples Outside",snippet:`const SamplesOutside = () => <Box display="flex" flexDirection="column" gap="xl" style={{ width: 480 }}>
10495
+ <FileUploader
10496
+ label={undefined}
10497
+ description="Supports .mov and .mp4"
10498
+ onAdd={fn()}
10499
+ variant="dropzone-inline" />
10500
+ <FileList
10501
+ variant="expanded"
10502
+ label={SAMPLES_LABEL}
10503
+ items={expandedSamples}
10504
+ disabledKeys={args.isDisabled ? "all" : undefined}
10505
+ onAction={fn()} />
10506
+ </Box>;`},{id:"core-forms-fileuploader--samples-inside-grid",name:"Samples Inside Grid",snippet:`const SamplesInsideGrid = () => <Box style={{ width: 720 }}>
10507
+ <FileUploader label="Label" description="Supports .mov and .mp4" onAdd={fn()}><FileList variant="grid" label={SAMPLES_LABEL} items={gridSamples} onAction={fn()} /></FileUploader>
10508
+ </Box>;`},{id:"core-forms-fileuploader--samples-inside-disabled",name:"Samples Inside Disabled",error:{name:"SyntaxError",message:`Expected render to be an arrow function or function expression
10509
+ 239 | isDisabled: true,
10510
+ 240 | },
10511
+ > 241 | render: SamplesInsideGrid.render,
10512
+ | ^^^^^^^^^^^^^^^^^^^^^^^^
10513
+ 242 | };
10514
+ 243 |`}}],implementation:`import React from "react";
10515
+ import { useDrag } from "react-aria/useDrag";
10516
+ import { createPortal } from "react-dom";
10280
10517
 
10518
+ import { ActionButton } from "../../ActionButton";
10519
+ import { Box } from "../../Box";
10520
+ import { Checkbox } from "../../Checkbox";
10521
+ import { SampleFileList } from "../../FileList/__tests__/testComponents";
10522
+ import { FileList } from "../../FileList/FileList";
10523
+ import { Link } from "../../Link";
10281
10524
  import { FileUploader } from "../FileUploader";
10282
10525
 
10526
+ import type { FileListProps } from "../../FileList/FileList.types";
10283
10527
  import type { FileUploaderProps } from "../FileUploader.types";
10284
10528
 
10285
10529
  export const ToggleDisabledFileUploaderExample: React.FC<FileUploaderProps> = (
@@ -10300,6 +10544,130 @@ export const ToggleDisabledFileUploaderExample: React.FC<FileUploaderProps> = (
10300
10544
  <FileUploader label="Upload" isDisabled={isDisabled} {...props} />
10301
10545
  </>
10302
10546
  );
10547
+ };
10548
+
10549
+ interface SampleFileUploaderProps extends Partial<FileUploaderProps> {
10550
+ listVariant?: FileListProps["variant"];
10551
+ onAction?: FileListProps["onAction"];
10552
+ disabledKeys?: FileListProps["disabledKeys"];
10553
+ }
10554
+
10555
+ export const SampleFileUploader: React.FC<SampleFileUploaderProps> = ({
10556
+ listVariant = "expanded",
10557
+ onAction,
10558
+ disabledKeys,
10559
+ ...props
10560
+ }) => (
10561
+ <FileUploader label="Upload" {...props}>
10562
+ <SampleFileList
10563
+ variant={listVariant}
10564
+ onAction={onAction}
10565
+ disabledKeys={disabledKeys}
10566
+ />
10567
+ </FileUploader>
10568
+ );
10569
+
10570
+ export const DisabledAncestorFileUploader: React.FC = () => (
10571
+ <div aria-disabled="true">
10572
+ <SampleFileUploader />
10573
+ </div>
10574
+ );
10575
+
10576
+ export const NarrowSampleGridFileUploader: React.FC = () => (
10577
+ <Box style={{ width: 240 }}>
10578
+ <SampleFileUploader listVariant="grid" />
10579
+ </Box>
10580
+ );
10581
+
10582
+ export const CompactGridCellFileUploader: React.FC = () => (
10583
+ <Box display="grid" style={{ width: 300, gridTemplateColumns: "1fr" }}>
10584
+ <FileUploader
10585
+ variant="dropzone-compact"
10586
+ description="Supports .mov, .mp4, .avi, .mkv and .webm up to 2 GB"
10587
+ />
10588
+ </Box>
10589
+ );
10590
+
10591
+ export const CenteredGridFileUploader: React.FC = () => (
10592
+ <Box style={{ width: 640 }}>
10593
+ <FileUploader label="Upload">
10594
+ <FileList
10595
+ variant="grid"
10596
+ aria-label="Samples"
10597
+ items={["a", "b", "c", "d", "e"].map((id) => ({
10598
+ id,
10599
+ name: \`\${id}.pdf\`,
10600
+ }))}
10601
+ onAction={() => {}}
10602
+ />
10603
+ </FileUploader>
10604
+ </Box>
10605
+ );
10606
+
10607
+ export const DescriptionLinkFileUploader: React.FC<{
10608
+ onPress?: () => void;
10609
+ }> = ({ onPress }) => (
10610
+ <FileUploader
10611
+ label="Upload"
10612
+ description={
10613
+ <>
10614
+ PDF up to 10 MB. <Link onPress={onPress}>Supported formats</Link>
10615
+ </>
10616
+ }
10617
+ />
10618
+ );
10619
+
10620
+ export const SamplesOnFocusFileUploader: React.FC = () => {
10621
+ const [hasSamples, setHasSamples] = React.useState(false);
10622
+
10623
+ return (
10624
+ <div
10625
+ onFocus={() => {
10626
+ setHasSamples(true);
10627
+ }}
10628
+ >
10629
+ <FileUploader label="Upload">
10630
+ {hasSamples ? <SampleFileList /> : null}
10631
+ </FileUploader>
10632
+ </div>
10633
+ );
10634
+ };
10635
+
10636
+ export const KeyboardDragFileUploader: React.FC = () => {
10637
+ const { dragProps } = useDrag({
10638
+ getItems: () => [{ "text/plain": "hello" }],
10639
+ });
10640
+
10641
+ return (
10642
+ <>
10643
+ <div {...dragProps} role="button" tabIndex={0}>
10644
+ Draggable
10645
+ </div>
10646
+ <SampleFileUploader />
10647
+ </>
10648
+ );
10649
+ };
10650
+
10651
+ export const InteractiveChildrenFileUploader: React.FC<{
10652
+ onPress?: () => void;
10653
+ onToggle?: (isSelected: boolean) => void;
10654
+ }> = ({ onPress, onToggle }) => {
10655
+ const [portalContainer, setPortalContainer] =
10656
+ React.useState<HTMLDivElement | null>(null);
10657
+
10658
+ return (
10659
+ <>
10660
+ <FileUploader label="Upload">
10661
+ <ActionButton label="Load sample" onPress={onPress} />
10662
+ <Link onPress={() => {}}>Sample link</Link>
10663
+ <Checkbox label="Run text recognition" onChange={onToggle} />
10664
+ {portalContainer
10665
+ ? createPortal(<span>Portaled sample preview</span>, portalContainer)
10666
+ : null}
10667
+ </FileUploader>
10668
+ <div ref={setPortalContainer} />
10669
+ </>
10670
+ );
10303
10671
  };`},similarTo:[],figmaUrl:null},FrameProvider:{id:"core-utilities-frameprovider",breadcrumb:"Core/Utilities/FrameProvider",importStatement:`import {
10304
10672
  Box,
10305
10673
  FrameProvider,
@@ -10921,10 +11289,10 @@ export const PopoverWithFrameBoundaryExample: React.FC<{
10921
11289
  </FrameProvider>
10922
11290
  </Box>
10923
11291
  );
10924
- };`},similarTo:[],figmaUrl:null},FreehandCanvas:{id:"core-miscellaneous-freehandcanvas",breadcrumb:"Core/Miscellaneous/FreehandCanvas",importStatement:'import { ControlledFreehandCanvas, FreehandCanvas } from "@baseline-ui/core";',description:"`FreehandCanvas` is a drawing surface that captures freehand strokes from mouse, pen, or touch input, with built-in undo, redo, and clear. Use it for signatures, sketches, annotations, or any input that requires hand-drawn shapes.",documentation:`\`FreehandCanvas\` is a drawing surface that captures freehand strokes from mouse, pen, or touch input, with built-in undo, redo, and clear. Use it for signatures, sketches, annotations, or any input that requires hand-drawn shapes.
11292
+ };`},similarTo:[],figmaUrl:null},FreehandCanvas:{id:"core-miscellaneous-freehandcanvas",breadcrumb:"Core/Miscellaneous/FreehandCanvas",importStatement:'import { ControlledFreehandCanvas, FreehandCanvas } from "@baseline-ui/core";',description:"`FreehandCanvas` is a drawing surface that captures freehand strokes from mouse, pen, or touch input, with built-in clear and optional undo and redo. Use it for signatures, sketches, annotations, or any input that requires hand-drawn shapes.",documentation:`\`FreehandCanvas\` is a drawing surface that captures freehand strokes from mouse, pen, or touch input, with built-in clear and optional undo and redo. Use it for signatures, sketches, annotations, or any input that requires hand-drawn shapes.
10925
11293
 
10926
11294
  * Draw on the canvas with your mouse or pointer
10927
- * Undo and redo your drawings via keyboard shortcuts
11295
+ * Undo and redo your drawings (opt-in via \`enableHistory\`)
10928
11296
  * Clear the canvas via keyboard shortcut (or button)
10929
11297
 
10930
11298
  \`\`\`jsx
@@ -10934,7 +11302,7 @@ import { FreehandCanvas } from "@baseline-ui/core";
10934
11302
  \`\`\`
10935
11303
 
10936
11304
  You can listen for events on the canvas by passing an \`onChange\` prop. The \`onChange\` prop is a function that receives the points that have been drawn on the canvas.
10937
- You can also use \`onChaneEnd\` to listen for the end of a drawing. This is useful if you want to save the drawing to a database or something similar.
11305
+ You can also use \`onChangeEnd\` to listen for the end of a drawing. This is useful if you want to save the drawing to a database or something similar.
10938
11306
 
10939
11307
  \`\`\`jsx
10940
11308
  import { FreehandCanvas } from "@baseline-ui/core";
@@ -10952,13 +11320,12 @@ const handleChangeEnd = (points) => {
10952
11320
 
10953
11321
  You can render the canvas with a default value by passing a \`defaultValue\` prop.
10954
11322
 
10955
- By default, the component supports undo and redo via keyboard shortcuts. You can disable this behavior by passing a \`enableHistory\` prop with a value of \`false\`.
11323
+ Undo and redo are off by default. Pass \`enableHistory\` to turn them on: the canvas then shows undo and redo buttons, and \`Cmd\` or \`Ctrl\` + \`Z\` undoes.
10956
11324
 
10957
11325
  | Key | Action |
10958
- | ---------------------- | ------ |
10959
- | \`Ctrl\` + \`Z\` | Undo |
10960
- | \`Ctrl\` + \`Shift\` + \`Z\` | Redo |
10961
- | \`Delete\` | Clear |
11326
+ | --------------------- | --------------------------- |
11327
+ | \`Cmd\` or \`Ctrl\` + \`Z\` | Undo (with \`enableHistory\`) |
11328
+ | \`Backspace\` | Clear |
10962
11329
 
10963
11330
  The following strings are used by the \`FreehandCanvas\` component and can be overridden via \`I18nProvider\`:
10964
11331
 
@@ -11118,6 +11485,11 @@ value?: FreehandCanvasLine[]
11118
11485
  * The label for the canvas.
11119
11486
  */
11120
11487
  label?: string
11488
+ /**
11489
+ * The accessible name of the canvas. Without it, the canvas is named by
11490
+ * \`label\` or \`aria-labelledby\`, and by "Drawing canvas" when neither is set.
11491
+ */
11492
+ aria-label?: string
11121
11493
  /**
11122
11494
  * Whether to enable history for undo/redo.
11123
11495
  *
@@ -11154,7 +11526,6 @@ redoLabel?: string
11154
11526
  * Description for the canvas.
11155
11527
  */
11156
11528
  description?: string
11157
- aria-label?: any
11158
11529
  }`,stories:{usage:[{id:"core-miscellaneous-freehandcanvas--basic",name:"Basic",snippet:`const Basic = () => <FreehandCanvas
11159
11530
  style={{
11160
11531
  width: 240,
@@ -11300,7 +11671,14 @@ export const TrackedControlledFreehandCanvas = ({
11300
11671
  }}
11301
11672
  />
11302
11673
  );
11303
- };`},similarTo:[],figmaUrl:null},GridList:{id:"core-collections-gridlist",breadcrumb:"Core/Collections/GridList",importStatement:'import { DynamicGridListExample, GridList } from "@baseline-ui/core";',description:"`GridList` displays a collection of items in a single column or row with support for selection, interactive children, and arrow-key navigation. Use it when you need a keyboard-navigable list whose rows can contain buttons, checkboxes, or other controls.",documentation:`\`GridList\` displays a collection of items in a single column or row with support for selection, interactive children, and arrow-key navigation. Use it when you need a keyboard-navigable list whose rows can contain buttons, checkboxes, or other controls.
11674
+ };
11675
+
11676
+ export const FreehandCanvasWithHint = (props: FreehandCanvasProps) => (
11677
+ <>
11678
+ <p id="freehand-canvas-hint">Sign inside the box.</p>
11679
+ <FreehandCanvas {...props} />
11680
+ </>
11681
+ );`},similarTo:[],figmaUrl:null},GridList:{id:"core-collections-gridlist",breadcrumb:"Core/Collections/GridList",importStatement:'import { DynamicGridListExample, GridList } from "@baseline-ui/core";',description:"`GridList` displays a collection of items in a single column or row with support for selection, interactive children, and arrow-key navigation. Use it when you need a keyboard-navigable list whose rows can contain buttons, checkboxes, or other controls.",documentation:`\`GridList\` displays a collection of items in a single column or row with support for selection, interactive children, and arrow-key navigation. Use it when you need a keyboard-navigable list whose rows can contain buttons, checkboxes, or other controls.
11304
11682
 
11305
11683
  * **Item Selection**: Single or multiple selections with optional checkboxes.
11306
11684
  * **Interactive Children**: Supports buttons, checkboxes, and menus within list items.
@@ -12008,7 +12386,116 @@ export const OverridePrecedenceExample: React.FC = () => (
12008
12386
  pageXofYLabel="Prop position"
12009
12387
  />
12010
12388
  </I18nProvider>
12011
- );`},similarTo:[],figmaUrl:null},ImageDropZone:{id:"core-forms-imagedropzone",breadcrumb:"Core/Forms/ImageDropZone",importStatement:'import { ImageDropZone, VariantViewer } from "@baseline-ui/core";',description:"`ImageDropZone` is a single-image input that accepts a file via drag-and-drop, paste, or the native picker and previews it in place. Use it when collecting one representative image, such as an avatar, logo, or thumbnail, with an optional replace and remove flow.",documentation:`\`ImageDropZone\` is a single-image input that accepts a file via drag-and-drop, paste, or the native picker and previews it in place. Use it when collecting one representative image, such as an avatar, logo, or thumbnail, with an optional replace and remove flow.
12389
+ );`},similarTo:[],figmaUrl:null},Image:{id:"core-content-image",breadcrumb:"Core/Content/Image",importStatement:'import { Box, Image } from "@baseline-ui/core";',description:"`Image` displays a picture that fills its container, with control over how it is cropped and what shows when it cannot be loaded. Use it for previews and thumbnails.",documentation:'`Image` displays a picture that fills its container, with control over how it is cropped and what shows when it cannot be loaded. Use it for previews and thumbnails.\n\n```jsx\nimport { Image } from "@baseline-ui/core";\n\n<Image src="/photo.png" alt="A mountain at sunrise" />;\n```\n\n`alt` is required. Pass an empty string when the image is decorative.\n\nThe image takes the full width and height of its container, so size the container, not the image. Set `loading="lazy"` to defer loading until the image nears the viewport, for example for thumbnails in a long list. Other `<img>` attributes such as `srcSet` and `sizes` pass through to the underlying element.\n\n`fit` chooses how the image fills its container. `cover` (the default) crops the image to fill it, and `contain` shows the whole image inside it.\n\n```jsx\n<Image src="/photo.png" alt="A mountain at sunrise" fit="contain" />\n```\n\nPass `fallback` to show other content in place of the image when it fails to load, including a server-rendered image that failed before hydration, or when `src` is empty. Without it, the browser\'s broken-image rendering stays. The image is tried again when `src` changes. The fallback replaces the `<img>`, so give meaningful fallback content its own accessible name.\n\n```jsx\n<Image src="/photo.png" alt="A mountain at sunrise" fallback={<Icon />} />\n```\n\nAs a `FileList` item\'s `preview`, an `Image` without a `fallback` shows the file icon.',props:`interface ImageProps {
12390
+ /**
12391
+ * The URL of the image to display.
12392
+ */
12393
+ src: string
12394
+ /**
12395
+ * The text alternative of the image. Pass an empty string when the image is
12396
+ * purely decorative.
12397
+ */
12398
+ alt: string
12399
+ /**
12400
+ * How the image fills its container. \`cover\` crops the image to fill the
12401
+ * container; \`contain\` shows the whole image inside it.
12402
+ *
12403
+ * @default "cover"
12404
+ */
12405
+ fit?: "cover" | "contain"
12406
+ /**
12407
+ * When the browser loads the image. \`lazy\` defers it until the image is near
12408
+ * the viewport, which suits thumbnails in long lists; \`eager\` loads it right
12409
+ * away.
12410
+ *
12411
+ * @default "eager"
12412
+ */
12413
+ loading?: "lazy" | "eager"
12414
+ /**
12415
+ * Content rendered in place of the image when it fails to load or \`src\` is
12416
+ * empty. Without it, the browser's broken-image rendering stays. The
12417
+ * fallback replaces the \`<img>\`, so \`alt\`, \`className\`, \`style\` and the ref
12418
+ * do not apply to it; give a meaningful fallback its own accessible name.
12419
+ */
12420
+ fallback?: React.ReactNode
12421
+ }`,stories:{usage:[{id:"core-content-image--basic",name:"Basic",snippet:'const Basic = () => <Image src="avatar.png" alt="A profile picture" />;'},{id:"core-content-image--contain",name:"Contain",snippet:'const Contain = () => <Image fit="contain" />;'},{id:"core-content-image--fallback",name:"Fallback",snippet:`const Fallback = () => <Image
12422
+ src="missing.png"
12423
+ alt="A profile picture"
12424
+ fallback={(<Box padding="md" typography="body.md.regular" color="text.primary">The image could not be loaded.
12425
+ </Box>)} />;`}],implementation:`import React from "react";
12426
+ import { hydrateRoot } from "react-dom/client";
12427
+ import { renderToString } from "react-dom/server";
12428
+
12429
+ import { ActionButton } from "../../ActionButton";
12430
+ import { Image } from "../Image";
12431
+
12432
+ import type { Root } from "react-dom/client";
12433
+
12434
+ export const ImageFallbackExample: React.FC<{ src: string }> = ({ src }) => (
12435
+ <Image src={src} alt="Sample" fallback={<span>Fallback content</span>} />
12436
+ );
12437
+
12438
+ /** Hydrates after the server-rendered image settles, so its error fires before React listens. */
12439
+ export const HydratedImageFallbackExample: React.FC<{ src: string }> = ({
12440
+ src,
12441
+ }) => {
12442
+ const containerRef = React.useRef<HTMLDivElement>(null);
12443
+
12444
+ React.useEffect(() => {
12445
+ const container = containerRef.current;
12446
+ if (!container) return;
12447
+ const element = <ImageFallbackExample src={src} />;
12448
+ // eslint-disable-next-line no-unsanitized/property
12449
+ container.innerHTML = renderToString(element);
12450
+ const image = container.querySelector("img");
12451
+ let root: Root | undefined;
12452
+ const hydrate = () => {
12453
+ root = hydrateRoot(container, element);
12454
+ };
12455
+ if (!image || image.complete) {
12456
+ hydrate();
12457
+ } else {
12458
+ image.addEventListener("error", hydrate, { once: true });
12459
+ image.addEventListener("load", hydrate, { once: true });
12460
+ }
12461
+ return () => {
12462
+ root?.unmount();
12463
+ };
12464
+ }, [src]);
12465
+
12466
+ return <div ref={containerRef} />;
12467
+ };
12468
+
12469
+ export const EmptySourceImageExample: React.FC = () => (
12470
+ <Image src="" alt="Sample" fallback={<span>Fallback content</span>} />
12471
+ );
12472
+
12473
+ export const ImageWithoutFallbackExample: React.FC<{
12474
+ src: string;
12475
+ loading?: "lazy" | "eager";
12476
+ }> = ({ src, loading }) => <Image src={src} alt="Sample" loading={loading} />;
12477
+
12478
+ export const ImageSourcesExample: React.FC<{ sources: string[] }> = ({
12479
+ sources,
12480
+ }) => {
12481
+ const [index, setIndex] = React.useState(0);
12482
+
12483
+ return (
12484
+ <>
12485
+ <Image
12486
+ src={sources[index]}
12487
+ alt="Sample"
12488
+ fallback={<span>Fallback content</span>}
12489
+ />
12490
+ <ActionButton
12491
+ label="Next source"
12492
+ onPress={() => {
12493
+ setIndex((i) => (i + 1) % sources.length);
12494
+ }}
12495
+ />
12496
+ </>
12497
+ );
12498
+ };`},similarTo:[],figmaUrl:null},ImageDropZone:{id:"core-forms-imagedropzone",breadcrumb:"Core/Forms/ImageDropZone",importStatement:'import { ImageDropZone, VariantViewer } from "@baseline-ui/core";',description:"`ImageDropZone` is a single-image input that accepts a file via drag-and-drop, paste, or the native picker and previews it in place. Use it when collecting one representative image, such as an avatar, logo, or thumbnail, with an optional replace and remove flow.",documentation:`\`ImageDropZone\` is a single-image input that accepts a file via drag-and-drop, paste, or the native picker and previews it in place. Use it when collecting one representative image, such as an avatar, logo, or thumbnail, with an optional replace and remove flow.
12012
12499
 
12013
12500
  * Automatic handling of Keyboard focus management and cross browser normalization
12014
12501
  * Labeling support for screen readers (aria-describedby)
@@ -14070,6 +14557,33 @@ className?: string
14070
14557
  * The style applied to the root element of the component.
14071
14558
  */
14072
14559
  style?: React.CSSProperties
14560
+ /**
14561
+ * The placement of the toolbar relative to the selected text.
14562
+ *
14563
+ * @default "top"
14564
+ */
14565
+ placement?: | 'bottom'
14566
+ | 'bottom left'
14567
+ | 'bottom right'
14568
+ | 'bottom start'
14569
+ | 'bottom end'
14570
+ | 'top'
14571
+ | 'top left'
14572
+ | 'top right'
14573
+ | 'top start'
14574
+ | 'top end'
14575
+ | 'left'
14576
+ | 'left top'
14577
+ | 'left bottom'
14578
+ | 'start'
14579
+ | 'start top'
14580
+ | 'start bottom'
14581
+ | 'right'
14582
+ | 'right top'
14583
+ | 'right bottom'
14584
+ | 'end'
14585
+ | 'end top'
14586
+ | 'end bottom'
14073
14587
  /**
14074
14588
  * The children of the InlineToolbar component. This should be a single
14075
14589
  * element that will be used as the trigger for the InlineToolbar. Any text
@@ -14120,7 +14634,6 @@ isDisabled?: boolean
14120
14634
  * \`anchorRect\` instead of the selection.
14121
14635
  */
14122
14636
  anchorRect?: Rect
14123
- placement?: any
14124
14637
  }`,stories:{usage:[{id:"core-overlays-inlinetoolbar--basic",name:"Basic",snippet:`const Basic = () => <InlineToolbar
14125
14638
  onAction={(id: string, selection: Selection) => {
14126
14639
  alert(\`Action \${id} clicked with selection "\${selection.toString()}"\`);
@@ -15555,6 +16068,33 @@ optionStyle?: | React.CSSProperties
15555
16068
  item: TOption,
15556
16069
  renderProps: TRenderProps,
15557
16070
  ) => React.CSSProperties | undefined)
16071
+ /**
16072
+ * The placement of the menu relative to its trigger.
16073
+ *
16074
+ * @default "bottom start"
16075
+ */
16076
+ placement?: | 'bottom'
16077
+ | 'bottom left'
16078
+ | 'bottom right'
16079
+ | 'bottom start'
16080
+ | 'bottom end'
16081
+ | 'top'
16082
+ | 'top left'
16083
+ | 'top right'
16084
+ | 'top start'
16085
+ | 'top end'
16086
+ | 'left'
16087
+ | 'left top'
16088
+ | 'left bottom'
16089
+ | 'start'
16090
+ | 'start top'
16091
+ | 'start bottom'
16092
+ | 'right'
16093
+ | 'right top'
16094
+ | 'right bottom'
16095
+ | 'end'
16096
+ | 'end top'
16097
+ | 'end bottom'
15558
16098
  /**
15559
16099
  * How the menu is opened from its trigger. With \`"longPress"\`, a long press
15560
16100
  * or \`Alt\` + \`ArrowDown\` / \`ArrowUp\` / \`Enter\` / \`Space\` opens the menu.
@@ -15620,7 +16160,6 @@ defaultSelectedKeys?: | "all"
15620
16160
  * assignable.
15621
16161
  */
15622
16162
  onSelectionChange?: (keys: Selection, meta?: { sectionId: string }) => void
15623
- placement?: any
15624
16163
  }`,stories:{usage:[{id:"core-collections-menu--basic",name:"Basic",snippet:'const Basic = () => <Menu triggerLabel="Menu Trigger" items={items} />;'},{id:"core-collections-menu--with-sections",name:"With Sections",snippet:'const WithSections = () => <Menu triggerLabel="Menu Trigger" items={itemsWithSections} />;'},{id:"core-collections-menu--controlled-open",name:"Controlled Open",snippet:'const ControlledOpen = () => <Menu triggerLabel="Menu Trigger" items={items} isOpen />;'},{id:"core-collections-menu--disabled",name:"Disabled",snippet:'const Disabled = () => <Menu triggerLabel="Menu Trigger" items={items} isDisabled />;'},{id:"core-collections-menu--with-disabled-keys",name:"With Disabled Keys",snippet:'const WithDisabledKeys = () => <Menu triggerLabel="Menu Trigger" items={items} disabledKeys={["paste"]} />;'},{id:"core-collections-menu--single-selection",name:"Single Selection",snippet:`const SingleSelection = () => {
15625
16164
  const [selectedKey, setSelectedKey] = React.useState(
15626
16165
  new Set<string | number>(["light"]),
@@ -20461,7 +21000,7 @@ addAriaLabel?: string
20461
21000
  * - "positive": Represents a positive accent color that doesn't change with
20462
21001
  * theme.
20463
21002
  *
20464
- * @default "theme"
21003
+ * @default "positive"
20465
21004
  */
20466
21005
  accent?: "theme" | "positive"
20467
21006
  }`,stories:{usage:[{id:"core-content-preview--svg-preview",name:"SVG Preview",snippet:`const SVGPreview = () => <Preview
@@ -22032,6 +22571,33 @@ className?: string
22032
22571
  * The style applied to the root element of the component.
22033
22572
  */
22034
22573
  style?: React.CSSProperties
22574
+ /**
22575
+ * The placement of the popover relative to the trigger.
22576
+ *
22577
+ * @default "bottom start"
22578
+ */
22579
+ placement?: | 'bottom'
22580
+ | 'bottom left'
22581
+ | 'bottom right'
22582
+ | 'bottom start'
22583
+ | 'bottom end'
22584
+ | 'top'
22585
+ | 'top left'
22586
+ | 'top right'
22587
+ | 'top start'
22588
+ | 'top end'
22589
+ | 'left'
22590
+ | 'left top'
22591
+ | 'left bottom'
22592
+ | 'start'
22593
+ | 'start top'
22594
+ | 'start bottom'
22595
+ | 'right'
22596
+ | 'right top'
22597
+ | 'right bottom'
22598
+ | 'end'
22599
+ | 'end top'
22600
+ | 'end bottom'
22035
22601
  /**
22036
22602
  * The position of the label.
22037
22603
  *
@@ -23779,7 +24345,13 @@ completedLabel?: string
23779
24345
  ]}
23780
24346
  aria-label="Checkout"
23781
24347
  defaultSelectedStep="a"
23782
- defaultLastCompletedStep={undefined} />;`},{id:"core-navigation-stepper--indicator-only",name:"Indicator Only",snippet:`const IndicatorOnly = () => <Stepper
24348
+ defaultLastCompletedStep={undefined} />;`},{id:"core-navigation-stepper--with-disabled-completed-step",name:"With Disabled Completed Step",snippet:`const WithDisabledCompletedStep = () => <Stepper
24349
+ items={items.map((i) =>
24350
+ i.key === "cart" ? { ...i, isDisabled: true } : i,
24351
+ )}
24352
+ aria-label="Checkout"
24353
+ defaultSelectedStep="shipping"
24354
+ defaultLastCompletedStep="cart" />;`},{id:"core-navigation-stepper--indicator-only",name:"Indicator Only",snippet:`const IndicatorOnly = () => <Stepper
23783
24355
  items={items.map((i) => ({ key: i.key }))}
23784
24356
  aria-label="Checkout"
23785
24357
  defaultSelectedStep="shipping"
@@ -26588,7 +27160,7 @@ export const AddButtonExample: React.FC<{
26588
27160
  ))}
26589
27161
  </Tabs>
26590
27162
  );
26591
- };`},similarTo:[],figmaUrl:null},Tag:{id:"core-content-tag",breadcrumb:"Core/Content/Tag",importStatement:'import { Tag } from "@baseline-ui/core";',description:"`Tag` is a compact, color-coded label that can be selected, removed, or paired with an icon. Use it to mark items with a category, attribute, or filter value, either on its own or within a `TagGroup`.",documentation:'`Tag` is a compact, color-coded label that can be selected, removed, or paired with an icon. Use it to mark items with a category, attribute, or filter value, either on its own or within a `TagGroup`.\n\n* Five visual variants: `neutral`, `red`, `green`, `blue`, and `high-contrast`\n* Two sizes: `md` (default) and `sm`\n* Optional leading icon (replaced by a checkmark when selected)\n* Optional remove button via `onRemove`\n* Selected and disabled states\n* Focus ring support\n* Works standalone or inside a `TagGroup` for collection behavior\n\n```jsx\nimport { Tag } from "@baseline-ui/core";\n\n<Tag>Label</Tag>;\n```\n\nFor collection behavior with keyboard navigation and selection, use `Tag` inside a `TagGroup`. See the <a href="?path=/docs/core-content-taggroup--docs">TagGroup documentation</a> for details.\n\n`Tag` supports five visual variants: `neutral`, `red`, `green`, `blue`, and\n`high-contrast`.\n\n```jsx\n<Tag>Neutral</Tag>\n<Tag variant="red">Red</Tag>\n<Tag variant="green">Green</Tag>\n<Tag variant="blue">Blue</Tag>\n<Tag variant="high-contrast">High Contrast</Tag>\n```\n\nPass an `icon` prop to display a leading icon. Use `@baseline-ui/icons/16` for `md` size and `@baseline-ui/icons/12` for `sm` size. When the tag is selected, the custom icon is replaced by a checkmark.\n\n```jsx\nimport { EllipseIcon } from "@baseline-ui/icons/16";\n\n<Tag icon={EllipseIcon}>With Icon</Tag>;\n```\n\nPass `onRemove` to render a remove button. When the tag is disabled, the remove button is present but non-interactive.\n\n```jsx\n<Tag onRemove={() => console.log("removed")}>Removable</Tag>\n```\n\nWhen selected, the tag displays a checkmark icon and uses the interactive color scheme. If a custom `icon` is provided, the checkmark replaces it.\n\n```jsx\n<Tag isSelected>Selected</Tag>\n```\n\n```jsx\n<Tag isDisabled>Disabled</Tag>\n```\n\n```jsx\n<Tag size="sm">Small</Tag>\n```\n\n| Selector | Description |\n| ---------------------- | -------------------------------------------- |\n| `.BaselineUI-Tag` | The root tag element. |\n| `.BaselineUI-Tag-Icon` | The icon element (custom icon or checkmark). |\n\nWhen the tag has a remove button:\n\n| Key | Function |\n| ------- | --------------------------------- |\n| `Tab` | Moves focus to the remove button. |\n| `Enter` | Activates the remove button. |\n| `Space` | Activates the remove button. |\n\n* <a href="?path=/docs/core-content-taggroup--docs">TagGroup</a> \u2014 Use for\n collections of tags with keyboard navigation, selection, and removal.\n* <a href="?path=/docs/core-content-badge--docs">Badge</a> \u2014 Use for numeric or\n status indicators that don\'t need interaction.',props:`interface TagProps {
27163
+ };`},similarTo:[],figmaUrl:null},Tag:{id:"core-content-tag",breadcrumb:"Core/Content/Tag",importStatement:'import { Tag } from "@baseline-ui/core";',description:"`Tag` is a compact, color-coded label that can be selected, removed, or paired with an icon. Use it to mark items with a category, attribute, or filter value, either on its own or within a `TagGroup`.",documentation:'`Tag` is a compact, color-coded label that can be selected, removed, or paired with an icon. Use it to mark items with a category, attribute, or filter value, either on its own or within a `TagGroup`.\n\n* Five visual variants: `neutral`, `red`, `green`, `blue`, and `high-contrast`\n* Two sizes: `md` (default) and `sm`\n* Optional leading icon (replaced by a checkmark when selected)\n* Optional remove button via `onRemove`\n* Selected and disabled states\n* Focus ring support\n* Works standalone or inside a `TagGroup` for collection behavior\n\n```jsx\nimport { Tag } from "@baseline-ui/core";\n\n<Tag>Label</Tag>;\n```\n\nFor collection behavior with keyboard navigation and selection, use `Tag` inside a `TagGroup`. See the <a href="?path=/docs/core-content-taggroup--docs">TagGroup documentation</a> for details.\n\n`Tag` supports five visual variants: `neutral`, `red`, `green`, `blue`, and\n`high-contrast`.\n\n```jsx\n<Tag>Neutral</Tag>\n<Tag variant="red">Red</Tag>\n<Tag variant="green">Green</Tag>\n<Tag variant="blue">Blue</Tag>\n<Tag variant="high-contrast">High Contrast</Tag>\n```\n\nPass an `icon` prop to display a leading icon. Use `@baseline-ui/icons/16` for `md` size and `@baseline-ui/icons/12` for `sm` size. When the tag is selected, the custom icon is replaced by a checkmark.\n\n```jsx\nimport { EllipseIcon } from "@baseline-ui/icons/16";\n\n<Tag icon={EllipseIcon}>With Icon</Tag>;\n```\n\nPass `onRemove` to render a remove button. When the tag is disabled, the remove button is present but non-interactive.\n\n```jsx\n<Tag onRemove={() => console.log("removed")}>Removable</Tag>\n```\n\nWhen selected, the tag displays a checkmark icon and uses the interactive color scheme. If a custom `icon` is provided, the checkmark replaces it.\n\n```jsx\n<Tag isSelected>Selected</Tag>\n```\n\n```jsx\n<Tag isDisabled>Disabled</Tag>\n```\n\n```jsx\n<Tag size="sm">Small</Tag>\n```\n\nSet `elementType="span"` to render the tag as a `span` so it can sit inside a button or other inline content, where a `div` is not valid HTML. The tag still lays out as a block, so make its container a flex row to keep it on the same line as the text.\n\n```jsx\n<button\n type="button"\n style={{ display: "inline-flex", alignItems: "center", gap: 8 }}\n>\n Report.pdf <Tag elementType="span">Draft</Tag>\n</button>\n```\n\n| Selector | Description |\n| ---------------------- | -------------------------------------------- |\n| `.BaselineUI-Tag` | The root tag element. |\n| `.BaselineUI-Tag-Icon` | The icon element (custom icon or checkmark). |\n\nWhen the tag has a remove button:\n\n| Key | Function |\n| ------- | --------------------------------- |\n| `Tab` | Moves focus to the remove button. |\n| `Enter` | Activates the remove button. |\n| `Space` | Activates the remove button. |\n\n* <a href="?path=/docs/core-content-taggroup--docs">TagGroup</a> \u2014 Use for\n collections of tags with keyboard navigation, selection, and removal.\n* <a href="?path=/docs/core-content-badge--docs">Badge</a> \u2014 Use for numeric or\n status indicators that don\'t need interaction.',props:`interface TagProps {
26592
27164
  /**
26593
27165
  * @deprecated Do not use in new components. This is a legacy block
26594
27166
  * identifier; new components should exclude it via
@@ -26638,6 +27210,14 @@ variant?: "neutral" | "red" | "green" | "blue" | "high-contrast"
26638
27210
  * @default "md"
26639
27211
  */
26640
27212
  size?: "sm" | "md"
27213
+ /**
27214
+ * The element the tag renders as. Use \`span\` to place a tag without
27215
+ * \`onRemove\` inside a button or other inline content, where a \`div\` is not
27216
+ * valid HTML. Has no effect inside a \`TagGroup\`.
27217
+ *
27218
+ * @default "div"
27219
+ */
27220
+ elementType?: "div" | "span"
26641
27221
  /**
26642
27222
  * An optional icon to display before the tag content.
26643
27223
  */
@@ -26666,7 +27246,10 @@ onRemove?: () => void
26666
27246
  * Message id: \`bui.tag.remove\`. Defaults to \`"Remove"\`.
26667
27247
  */
26668
27248
  removeLabel?: string
26669
- }`,stories:{usage:[{id:"core-content-tag--basic",name:"Basic",snippet:"const Basic = () => <Tag>Tag</Tag>;"},{id:"core-content-tag--with-icon",name:"With Icon",snippet:"const WithIcon = () => <Tag icon={EllipseIcon}>Tag</Tag>;"},{id:"core-content-tag--removable",name:"Removable",snippet:"const Removable = () => <Tag onRemove={fn()}>Tag</Tag>;"},{id:"core-content-tag--selected",name:"Selected",snippet:"const Selected = () => <Tag isSelected>Tag</Tag>;"},{id:"core-content-tag--selected-with-icon",name:"Selected With Icon",snippet:"const SelectedWithIcon = () => <Tag isSelected icon={EllipseIcon}>Tag</Tag>;"},{id:"core-content-tag--disabled",name:"Disabled",snippet:"const Disabled = () => <Tag isDisabled>Tag</Tag>;"},{id:"core-content-tag--disabled-removable",name:"Disabled Removable",snippet:"const DisabledRemovable = () => <Tag isDisabled onRemove={fn()}>Tag</Tag>;"},{id:"core-content-tag--small",name:"Small",snippet:'const Small = () => <Tag size="sm">Tag</Tag>;'},{id:"core-content-tag--small-with-icon",name:"Small With Icon",snippet:'const SmallWithIcon = () => <Tag size="sm" icon={EllipseIcon12}>Tag</Tag>;'},{id:"core-content-tag--long-text",name:"Long Text",snippet:"const LongText = () => <Tag>This is a very long tag label that might overflow or cause layout issues</Tag>;"}],implementation:`import { EllipseIcon } from "@baseline-ui/icons/16";
27249
+ }`,stories:{usage:[{id:"core-content-tag--basic",name:"Basic",snippet:"const Basic = () => <Tag>Tag</Tag>;"},{id:"core-content-tag--with-icon",name:"With Icon",snippet:"const WithIcon = () => <Tag icon={EllipseIcon}>Tag</Tag>;"},{id:"core-content-tag--removable",name:"Removable",snippet:"const Removable = () => <Tag onRemove={fn()}>Tag</Tag>;"},{id:"core-content-tag--selected",name:"Selected",snippet:"const Selected = () => <Tag isSelected>Tag</Tag>;"},{id:"core-content-tag--selected-with-icon",name:"Selected With Icon",snippet:"const SelectedWithIcon = () => <Tag isSelected icon={EllipseIcon}>Tag</Tag>;"},{id:"core-content-tag--disabled",name:"Disabled",snippet:"const Disabled = () => <Tag isDisabled>Tag</Tag>;"},{id:"core-content-tag--disabled-removable",name:"Disabled Removable",snippet:"const DisabledRemovable = () => <Tag isDisabled onRemove={fn()}>Tag</Tag>;"},{id:"core-content-tag--small",name:"Small",snippet:'const Small = () => <Tag size="sm">Tag</Tag>;'},{id:"core-content-tag--small-with-icon",name:"Small With Icon",snippet:'const SmallWithIcon = () => <Tag size="sm" icon={EllipseIcon12}>Tag</Tag>;'},{id:"core-content-tag--inline-content",name:"Inline Content",snippet:`const InlineContent = () => <button
27250
+ type="button"
27251
+ style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>Report.pdf <Tag elementType="span">Draft</Tag>
27252
+ </button>;`},{id:"core-content-tag--long-text",name:"Long Text",snippet:"const LongText = () => <Tag>This is a very long tag label that might overflow or cause layout issues</Tag>;"}],implementation:`import { EllipseIcon } from "@baseline-ui/icons/16";
26670
27253
  import React from "react";
26671
27254
 
26672
27255
  import { Tag } from "../Tag";
@@ -27214,8 +27797,9 @@ import { TaggedPagination } from "../TaggedPagination";
27214
27797
  export const TaggedPaginationExample: React.FC<
27215
27798
  React.ComponentProps<typeof TaggedPagination> & {
27216
27799
  onAncestorKeyDown?: React.KeyboardEventHandler;
27800
+ descriptionByValue?: Record<number, string>;
27217
27801
  }
27218
- > = ({ onAncestorKeyDown, ...props }) => {
27802
+ > = ({ onAncestorKeyDown, descriptionByValue, ...props }) => {
27219
27803
  const pagination = (
27220
27804
  <TaggedPagination
27221
27805
  valueToLabelMap={
@@ -27232,6 +27816,9 @@ export const TaggedPaginationExample: React.FC<
27232
27816
  incrementAriaLabel="Increment"
27233
27817
  minValue={1}
27234
27818
  maxValue={4}
27819
+ {...(descriptionByValue && {
27820
+ description: (value: number) => descriptionByValue[value] ?? "",
27821
+ })}
27235
27822
  {...props}
27236
27823
  />
27237
27824
  );
@@ -30321,6 +30908,20 @@ includeArrow?: boolean
30321
30908
  * @default document.body
30322
30909
  */
30323
30910
  portalContainer?: HTMLElement
30911
+ /**
30912
+ * The distance in pixels between the tooltip and its trigger along the main
30913
+ * axis. Defaults to 2 when \`includeArrow\` is false.
30914
+ *
30915
+ * @default 12
30916
+ */
30917
+ offset?: number
30918
+ /**
30919
+ * The minimum distance in pixels of the arrow from the edge of the tooltip. It
30920
+ * defaults to 0 when \`includeArrow\` is false.
30921
+ *
30922
+ * @default 8
30923
+ */
30924
+ arrowBoundaryOffset?: number
30324
30925
  placement?: any
30325
30926
  }`,stories:{usage:[{id:"core-overlays-tooltip--basic",name:"Basic",snippet:'const Basic = () => <Tooltip text="Tooltip text" delay={0} closeDelay={0}><ActionButton label="Label" /></Tooltip>;'},{id:"core-overlays-tooltip--variants",name:"Variants",snippet:`const Variants = (args) => (
30326
30927
  <VariantViewer
@@ -30654,12 +31255,14 @@ onPrimaryAction?: (key: Key) => void
30654
31255
  */
30655
31256
  onSecondaryAction?: (key: Key) => void
30656
31257
  /**
30657
- * The icon to use for the primary action.
31258
+ * The icon to use for the primary action. The action is a plain button, so
31259
+ * a \`{ selected, unselected }\` pair renders \`unselected\`.
30658
31260
  */
30659
31261
  primaryActionIcon?: | ToggleIconButtonProps["icon"]
30660
31262
  | ((key: Key) => ToggleIconButtonProps["icon"])
30661
31263
  /**
30662
- * The icon to use for the secondary action.
31264
+ * The icon to use for the secondary action. The action is a plain button,
31265
+ * so a \`{ selected, unselected }\` pair renders \`unselected\`.
30663
31266
  */
30664
31267
  secondaryActionIcon?: | ToggleIconButtonProps["icon"]
30665
31268
  | ((key: Key) => ToggleIconButtonProps["icon"])
@@ -30929,6 +31532,7 @@ import {
30929
31532
  import { TreeView } from "../TreeView";
30930
31533
  import { generateLargeTree, getTreeItems } from "./data";
30931
31534
 
31535
+ import type { IconProps } from "../../Icon";
30932
31536
  import type {
30933
31537
  TreeItemRenderState,
30934
31538
  TreeListItem,
@@ -30936,15 +31540,31 @@ import type {
30936
31540
  } from "../TreeView.types";
30937
31541
  import type { DropPosition, Key } from "@react-types/shared";
30938
31542
 
31543
+ const SelectedPairIcon: React.FC<IconProps> = () => (
31544
+ <svg width={16} height={16} data-testid="tree-view-action-icon-selected" />
31545
+ );
31546
+ const UnselectedPairIcon: React.FC<IconProps> = () => (
31547
+ <svg width={16} height={16} data-testid="tree-view-action-icon-unselected" />
31548
+ );
31549
+ // The prop type does not spell out a falsy return, but TreeView hides the action for one.
31550
+ const noIcon = null as unknown as React.FC<IconProps>;
31551
+ const pairIconFor = (key: React.Key) =>
31552
+ key === "documents"
31553
+ ? { selected: SelectedPairIcon, unselected: UnselectedPairIcon }
31554
+ : noIcon;
31555
+
30939
31556
  export function TreeViewWithPrimaryAction({
30940
- onPrimaryAction,
30941
- }: Pick<TreeViewProps, "onPrimaryAction">): React.JSX.Element {
31557
+ iconPair = false,
31558
+ ...props
31559
+ }: Pick<TreeViewProps, "onPrimaryAction"> & {
31560
+ iconPair?: boolean;
31561
+ }): React.JSX.Element {
30942
31562
  return (
30943
31563
  <TreeView
30944
31564
  items={getTreeItems({})}
30945
- onPrimaryAction={onPrimaryAction}
30946
- primaryActionIcon={PlusIcon}
31565
+ primaryActionIcon={iconPair ? pairIconFor : PlusIcon}
30947
31566
  primaryActionAriaLabel="Primary Action"
31567
+ {...props}
30948
31568
  />
30949
31569
  );
30950
31570
  }
@@ -33306,10 +33926,13 @@ import { presets } from "./data";
33306
33926
 
33307
33927
  import type { ColorInputProps, IconColorInputProps } from "../ColorInput.types";
33308
33928
 
33309
- export const CustomTriggerButton = () => {
33929
+ export const CustomTriggerButton: React.FC<
33930
+ Omit<ColorInputProps, "renderTriggerButton">
33931
+ > = (props) => {
33310
33932
  return (
33311
33933
  <ColorInput
33312
33934
  label="label"
33935
+ presets={presets}
33313
33936
  renderTriggerButton={({ colorName, ref, triggerProps }) => (
33314
33937
  <ActionIconButton
33315
33938
  {...triggerProps}
@@ -33319,6 +33942,7 @@ export const CustomTriggerButton = () => {
33319
33942
  aria-haspopup="true"
33320
33943
  />
33321
33944
  )}
33945
+ {...props}
33322
33946
  />
33323
33947
  );
33324
33948
  };
@@ -33419,6 +34043,10 @@ export const StoredCustomColorsExample: React.FC<{ storageKey: string }> = ({
33419
34043
  />
33420
34044
  );
33421
34045
 
34046
+ export const RedPresetColorInput: React.FC<ColorInputProps> = (props) => (
34047
+ <ColorInput presets={presets} defaultValue="#ff0000" {...props} />
34048
+ );
34049
+
33422
34050
  export const IconColorInputExample: React.FC<
33423
34051
  Omit<IconColorInputProps, "icon">
33424
34052
  > = (props) => <IconColorInput icon={BorderColorIcon} {...props} />;
@@ -35786,6 +36414,20 @@ boundaryAxis?: 'horizontal' | 'vertical' | 'both'
35786
36414
  * @default "shift"
35787
36415
  */
35788
36416
  horizontalBoundaryBehavior?: "shift" | "anchor"
36417
+ /**
36418
+ * The distance in pixels between the popover and its trigger along the main
36419
+ * axis. When \`includeArrow\` is set, the arrow's 8px is added on top.
36420
+ *
36421
+ * @default 2
36422
+ */
36423
+ offset?: number
36424
+ /**
36425
+ * The minimum distance in pixels kept between the popover and the edge of its
36426
+ * boundary.
36427
+ *
36428
+ * @default 0
36429
+ */
36430
+ containerPadding?: number
35789
36431
  }`,stories:{usage:[{id:"core-overlays-popover-popovercontent--basic",name:"Basic",snippet:"const Basic = (args) => <PopoverCustomTargetExample popoverContentProps={args} />;"},{id:"core-overlays-popover-popovercontent--default-open-with-arrow",name:"Default Open With Arrow",snippet:"const DefaultOpenWithArrow = () => <PopoverDefaultOpenWithArrowExample />;"},{id:"core-overlays-popover-popovercontent--contained-focus",name:"Contained Focus",snippet:"const ContainedFocus = () => <PopoverContainedFocusExample />;"},{id:"core-overlays-popover-popovercontent--disable-animation",name:"Disable Animation",snippet:`const DisableAnimation = () => (
35790
36432
  <PopoverExample
35791
36433
  popoverProps={{ type: "dialog" }}
@@ -40550,7 +41192,7 @@ padding={[null, "lg", "xl"]}
40550
41192
 
40551
41193
  * [vanilla-extract sprinkles documentation](https://vanilla-extract.style/documentation/packages/sprinkles/) - Learn about the underlying sprinkles framework
40552
41194
  * [Box component documentation](/docs/core-utilities-box--docs) - Detailed information about the Box component
40553
- * [Theme documentation](/docs/theming--docs) - Learn about Baseline UI's theming system`};var m={"8":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","ChevronRightFilledIcon","ChevronRightIcon","EllipseIcon","MinusIcon","PlusIcon","XIcon"],"12":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","EditIcon","EllipseIcon","EnterKeyIcon","LockFilledIcon","LockIcon","MinusIcon","MoreVIcon","MoreIcon","PlaceholderIcon","PlusIcon","SearchIcon","SizeIcon","TrashIcon","XIcon","ZoomIcon"],"16":["AlignBottomIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDiagonalTopLeftBottomRightIcon","ArrowDownCircleFilledIcon","ArrowDownIcon","ArrowIcon","ArrowLeftRightIcon","ArrowRightIcon","ArrowUpArrowDownIcon","ArrowUpIcon","AtIcon","AttachmentsIcon","AvatarIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BulletListIcon","CalendarIcon","CaretLeftIcon","CaretRightIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","CircleFilledIcon","ClockIcon","CopyIcon","CustomizeIcon","DocumentEditIcon","DownloadIcon","DuplicateIcon","EditIcon","ElipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FilterAltIcon","FolderIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FullScreenIcon","HelpCircleIcon","HelpIcon","HereIcon","HideIcon","HighlightTextAltIcon","HighlightTextIcon","HorizontalScrollIcon","ImageIcon","InfoCircleFilledIcon","InsertIcon","ItalicIcon","LightBulbIcon","LineIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MeasureIcon","MinusIcon","MoreIcon","MoreVerticalIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","NumberedListIcon","OpenIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageVerticalScrollIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PlaceholderIcon","PlayIcon","PlusIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","ReadOnlyIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedoIcon","RemoveFormattingIcon","ReorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RulerIcon","SearchIcon","SettingsIcon","ShowIcon","SlashCommandsIcon","SoundRecordIcon","StampIcon","StarFilledIcon","StarIcon","StrikeoutTextAltIcon","TableCellIcon","TableColumnIcon","TableHeaderIcon","TableIcon","TableRowIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextDecreaseIndentIcon","TextIcon","TextIncreaseIndentIcon","TextMarkIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UndoIcon","UnlockIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WindowedIcon","WorkflowIcon","XCircleFilledIcon","XIcon"],"20":["AddPageIcon","AnonymousIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpCircleFilledIcon","AtIcon","AvatarFilledIcon","BoldIcon","CalloutIcon","CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ClockIcon","CollapseIcon","CommentIcon","CopyIcon","CutIcon","DistanceIcon","DownloadIcon","DuplicateIcon","EditIcon","EllipseIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorAlternativeCircleIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FormDateIcon","FormSignatureIcon","FormTextFieldIcon","HelpCircleIcon","HighlightTextIcon","HomeIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","ItalicIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MinusIcon","MoreIcon","MoreVerticalIcon","MoveIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OpenIcon","PageMoveLeftIcon","PageMoveRightIcon","PagesInsertIcon","PasteIcon","PipetteIcon","PlusIcon","PrintIcon","RotateClockwiseIcon","SearchIcon","SettingsIcon","ShapeIcon","ShareIcon","SoundIcon","SoundRecordIcon","StarFilledIcon","StarIcon","StyleIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UploadIcon","WarningFilledIcon","WarningIcon","XCircleFilledIcon","XCircleIcon","XIcon"],"24":["AddNoteCloudIcon","AddNoteIcon","AddTextSerifIcon","AiIcon","AirplaneIcon","AlignBottomIcon","AlignHorizontalCenterIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDownIcon","ArrowIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpIcon","AtIcon","AttachmentIcon","AvatarFilledIcon","AvatarIcon","BlendModeIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BorderColorIcon","BottomBorderIcon","BulletListIcon","CalibrateIcon","CaptureAddIcon","CaretDownIcon","CaretIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ChevronListIcon","ClockIcon","CloudyBorderIcon","CollapseIcon","ColorPaletteIcon","ColorSwatchIcon","CommentIcon","CommentInSidebarIcon","CommentOnPageIcon","CompareDocumentsIcon","CopyIcon","CopyPageIcon","CropIcon","CustomizeIcon","CutIcon","DateModifiedIcon","DatePlusIcon","DebugIcon","DocumentArrowDownCircleIcon","DocumentArrowDownIcon","DocumentArrowRightIcon","DocumentFilledIcon","DocumentLockIcon","DocumentPdfIcon","DownloadIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","DuplicateIcon","EditAnnotationsIcon","EditContentIcon","EditDocumentIcon","EditIcon","EditThumbnailsIcon","EllipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","EndCapArrowFilledIcon","EndCapArrowIcon","EndCapChevronFilledIcon","EndCapChevronIcon","EndCapCircleIcon","EndCapDiamondIcon","EndCapNoneIcon","EndCapSlantedIcon","EndCapSquareIcon","EndCapStraightIcon","EraserIcon","ErrorAltCircleFilledIcon","ErrorAltIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","ExpandVerticalIcon","FillColorIcon","FilterIcon","FitToHeightIcon","FivePagesHorizontalFilledIcon","FivePagesVerticalFilledIcon","FolderAddIcon","FolderIcon","FontListIcon","FontSizeIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormPageIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FormTwoRadioButtonsIcon","FourPagesGridFilledIcon","FourPagesHorizontalFilledIcon","FourPagesStackedFilledIcon","FourPagesVerticalFilledIcon","GroupIcon","HamburgerMenuIcon","HandIcon","HeartIcon","HideIcon","HideRevealIcon","HighlightTextIcon","HomeIcon","HorizontalScollIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","InitialsIcon","InnerHorizontalBorderIcon","InnerVerticalBorderIcon","InsertIcon","ItalicIcon","LayerBottomIcon","LayerDownIcon","LayerTopIcon","LayerUpIcon","LayersIcon","LeftBindingIcon","LeftBorderIcon","LineCapsIcon","LineIcon","LineSpacingIcon","LineStyleCloudyIcon","LineStyleDashedDoubleDashIcon","LineStyleDashedDoubleGapIcon","LineStyleDashedQuadrupleDashIcon","LineStyleDashedSingleGapIcon","LineStyleIcon","LineStyleSolidIcon","LineWidthIcon","LinkIcon","LockFilledIcon","LockIcon","MagicIcon","MagicPenIcon","MailIcon","MarkupIcon","MarqueeZoomIcon","MeasureIcon","MergeIcon","MessageCloudIcon","MinusIcon","MoonIcon","MoreCircleIcon","MoreIcon","MoreVerticalIcon","MoveAllDirectionsIcon","MoveLeftIcon","MoveLeftRightIcon","MoveRightIcon","MultiplePagesIcon","NonEditableIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OcrIcon","OpacityIcon","PageAddIcon","PageCurlIcon","PageDuplicateIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLandscapeIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageMoveLeftIcon","PageMoveRightIcon","PageNumberCircleIcon","PageNumberIcon","PagePortraitIcon","PageRemoveIcon","PageVerticalScrollIcon","PagesInsertAltIcon","PagesInsertIcon","PagesNewFromSelectionAltIcon","PagesNewFromSelectionIcon","PagesSelectAllIcon","PagesSelectNoneIcon","PasteBoardIcon","PastePageIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PinDropFilledIcon","PinDropIcon","PipetteIcon","PlayIcon","PlusCircleFilledIcon","PlusCircleIcon","PlusIcon","PointerIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","PrecisionIcon","PrintIcon","PrivateModeIcon","PushPinIcon","QuestionmarkCircleIcon","ReaderViewIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedactIcon","RedactRectangleIcon","RedactTextHighlighterIcon","RedactionTextRepeatingIcon","RedactionTextSingleIcon","RedoAllIcon","RedoIcon","RegexIcon","ReplaceIcon","RightBindingIcon","RightBorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RotateObjectClockwiseIcon","RotateObjectCounterClockwiseIcon","RulerIcon","ScaleIcon","SearchCircleIcon","SearchIcon","SearchSelectionIcon","SelectAllIcon","SelectionToolIcon","SettingsIcon","ShapesIcon","ShareAltIcon","ShareIcon","ShieldAddIcon","ShieldCheckmarkIcon","ShieldWarningIcon","ShieldXIcon","ShowIcon","SidebarIcon","SignOutIcon","SignatureDigitalIcon","SignatureIcon","SinglePageFilledIcon","SoundIcon","SquigglyTextIcon","StampAddIcon","StampIcon","StarFilledIcon","StarIcon","StartCapArrowFilledIcon","StartCapArrowIcon","StartCapChevronFilledIcon","StartCapChevronIcon","StartCapCircleIcon","StartCapDiamondIcon","StartCapNoneIcon","StartCapSlantedIcon","StartCapSquareIcon","StartCapStraightIcon","StrikeoutTextIcon","StyleFilledIcon","StyleIcon","StylusFilledIcon","StylusIcon","SunIcon","TableCellIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextColorIcon","TextIcon","TextPropertiesHideIcon","TextPropertiesShowIcon","TextSerifIcon","TextSmallerIcon","ThreePagesHorizontalFilledIcon","ThreePagesStackedFilledIcon","ThreePagesVerticalFilledIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TopBorderIcon","TrashIcon","TwoPagesHorizontalFilledIcon","TwoPagesVerticalFilledIcon","TypeTextIcon","UnderlineIcon","UnderlineTextIcon","UndoAllIcon","UndoIcon","UndoRedoIcon","UngroupIcon","UnlockIcon","UploadIcon","UserIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WidgetIcon","WorkflowIcon","XCircleFilledIcon","XCircleIcon","XIcon","ZoomInIcon","ZoomOutIcon"],"36":["ArrowRight","Check","Circle","Cross","Help","Inset","Key","NewParagraphAlt","NewParagraph","Note","PointerRight","SpeechBubble","Star"]};var r=["charts-barchart--basic","charts-barchart--custom-colors","charts-barchart--formatted","charts-barchart--hidden-axes","charts-barchart--many-series","charts-barchart--mixed-stacking","charts-barchart--single-series","charts-barchart--stacked","charts-barchart--stacked-with-three-series","charts-barchart--thicker-bars","charts-barchart--with-legend","charts-linechart--basic","charts-linechart--custom-colors","charts-linechart--formatted","charts-linechart--hidden-axes","charts-linechart--linear-curve","charts-linechart--many-lines","charts-linechart--single-line","charts-linechart--sparkline","charts-linechart--with-dots","charts-linechart--with-legend","charts-piechart--basic","charts-piechart--custom-colors","charts-piechart--donut","charts-piechart--long-legend-names","charts-piechart--many-slices","charts-piechart--no-labels","charts-piechart--no-legend","charts-piechart--no-tooltip","charts-piechart--small-slices-below-five-percent","core-buttons-actionbutton--as-div","core-buttons-actionbutton--basic","core-buttons-actionbutton--disabled","core-buttons-actionbutton--variants","core-buttons-actionbutton--with-both-icons","core-buttons-actionbutton--with-icon","core-buttons-actionbutton--with-popover","core-buttons-actiongroup--basic","core-buttons-actiongroup--default-selected","core-buttons-actiongroup--disabled","core-buttons-actiongroup--disabled-items","core-buttons-actiongroup--disabled-items-multi-select","core-buttons-actiongroup--disabled-with-selection","core-buttons-actiongroup--multi-select","core-buttons-actiongroup--multiple-default-selected","core-buttons-actiongroup--multiple-selected-items","core-buttons-actiongroup--single-item","core-buttons-actiongroup--single-select","core-buttons-actiongroup--with-custom-action-item","core-buttons-actiongroup--with-icon","core-buttons-actiongroup--with-icon-disabled","core-buttons-actiongroup--with-icon-multi-select","core-buttons-actiongroup--without-tooltip","core-buttons-actioniconbutton--basic","core-buttons-actioniconbutton--disabled","core-buttons-actioniconbutton--variants","core-buttons-actioniconbutton--with-popover","core-buttons-actioniconbutton--with-tooltip","core-buttons-reaction--basic","core-buttons-reaction--disabled","core-buttons-reaction--read-only","core-buttons-reaction--selected","core-buttons-reaction--variants","core-buttons-scrollcontrolbutton--basic","core-buttons-scrollcontrolbutton--hide-for-keyboard","core-buttons-scrollcontrolbutton--with-custom-delay","core-buttons-scrollcontrolbutton--with-reversed-items","core-buttons-scrollcontrolbutton--without-smooth-scroll","core-buttons-togglebutton--basic","core-buttons-togglebutton--controlled","core-buttons-togglebutton--default-selected","core-buttons-togglebutton--disabled","core-buttons-togglebutton--variants","core-buttons-togglebutton--with-icon","core-buttons-toggleiconbutton--basic","core-buttons-toggleiconbutton--primary-variants","core-buttons-toggleiconbutton--secondary-variants","core-buttons-toggleiconbutton--state-specific-icons","core-buttons-toggleiconbutton--teritary-variants","core-buttons-toggleiconbutton--toolbar-variants","core-buttons-toggleiconbutton--with-tooltip","core-collections-filelist--basic","core-collections-filelist--disabled","core-collections-filelist--disabled-items","core-collections-filelist--loading","core-collections-filelist--long-filename","core-collections-filelist--many-items","core-collections-filelist--mixed-states","core-collections-filelist--with-error","core-collections-gridlist--basic","core-collections-gridlist--default-selected-keys","core-collections-gridlist--disabled","core-collections-gridlist--disabled-rows","core-collections-gridlist--disallow-empty-selection","core-collections-gridlist--with-drag-and-drop","core-collections-gridlist--with-multiple-selection","core-collections-gridlist--with-single-selection","core-collections-imagegallery--basic","core-collections-imagegallery--more-items","core-collections-imagegallery--rtl-with-virtualization","core-collections-imagegallery--scrollable","core-collections-imagegallery--with-controlled-list","core-collections-imagegallery--with-custom-aspect-ratio","core-collections-imagegallery--with-custom-fit","core-collections-imagegallery--with-custom-image-dimensions","core-collections-imagegallery--with-custom-image-renderer","core-collections-imagegallery--with-custom-size","core-collections-imagegallery--with-deletion","core-collections-imagegallery--with-disabled-deletion","core-collections-imagegallery--with-dynamic-list","core-collections-imagegallery--with-long-labels","core-collections-imagegallery--with-medium-size","core-collections-imagegallery--with-multiple-selection","core-collections-imagegallery--with-reordering","core-collections-imagegallery--with-single-selection","core-collections-imagegallery--with-single-selection-and-deletion","core-collections-imagegallery--with-virtualization","core-collections-listbox--basic","core-collections-listbox--controlled-auto-scroll","core-collections-listbox--drag-and-drop-custom-preview","core-collections-listbox--drag-and-drop-grid","core-collections-listbox--drag-and-drop-horizontal","core-collections-listbox--drag-and-drop-multiple","core-collections-listbox--drag-and-drop-single","core-collections-listbox--dynamic-items","core-collections-listbox--with-custom-option-style","core-collections-listbox--with-customized-section-titles","core-collections-listbox--with-default-selected","core-collections-listbox--with-disabled-items","core-collections-listbox--with-focus-loop","core-collections-listbox--with-padded-section-titles","core-collections-listbox--with-section-titles","core-collections-listbox--with-sections","core-collections-listbox--with-selected","core-collections-menu--basic","core-collections-menu--controlled-open","core-collections-menu--disabled","core-collections-menu--long-menu","core-collections-menu--multiple-selection","core-collections-menu--section-level-selection","core-collections-menu--single-selection","core-collections-menu--with-custom-options","core-collections-menu--with-custom-trigger","core-collections-menu--with-disabled-keys","core-collections-menu--with-disabled-submenu","core-collections-menu--with-icons","core-collections-menu--with-long-labels","core-collections-menu--with-sections","core-collections-menu--with-selected-keys-controlled","core-collections-menu--with-submenu","core-collections-table--async-loading","core-collections-table--default","core-collections-table--disabled-rows","core-collections-table--drag-and-drop","core-collections-table--empty","core-collections-table--long-text-content","core-collections-table--multiple-selection","core-collections-table--row-action","core-collections-table--selection-with-row-action","core-collections-table--single-selection","core-collections-table--sorting","core-collections-table--virtualized","core-collections-table--with-tag-and-menu","core-collections-table--with-toolbar","core-collections-taggroup--basic","core-collections-taggroup--disabled","core-collections-taggroup--disabled-items","core-collections-taggroup--group-variants","core-collections-taggroup--multi-select","core-collections-taggroup--removable","core-collections-taggroup--single-select","core-collections-taggroup--small-variants","core-collections-taggroup--variants","core-collections-treeview--basic","core-collections-treeview--custom-row","core-collections-treeview--custom-row-drag-and-drop","core-collections-treeview--deeply-nested","core-collections-treeview--drag-and-drop","core-collections-treeview--empty-tree","core-collections-treeview--flat-tree","core-collections-treeview--handle-only-drag-and-drop","core-collections-treeview--interactive-fields-drag-and-drop","core-collections-treeview--long-labels","core-collections-treeview--single-item","core-collections-treeview--virtualized-drag-and-drop","core-collections-treeview--virtualized-with-actions","core-collections-treeview--virtualized-with-descriptions","core-collections-treeview--virtualized-with-expand-control","core-collections-treeview--virtualized-with-rename","core-collections-treeview--with-actions-at-end","core-collections-treeview--with-controlled-expanded-keys","core-collections-treeview--with-custom-render-icons","core-collections-treeview--with-custom-render-item-title","core-collections-treeview--with-default-expanded-keys","core-collections-treeview--with-description","core-collections-treeview--with-icons","core-collections-treeview--with-primary-action","core-collections-treeview--with-primary-and-secondary-action","core-collections-treeview--with-primary-secondary-and-description-action","core-collections-treeview--with-rename","core-collections-treeview--with-selected-items","core-collections-treeview--with-virtualization","core-collections-unsafe-listbox--basic","core-collections-unsafe-listbox--controlled-auto-scroll","core-collections-unsafe-listbox--drag-and-drop-custom-preview","core-collections-unsafe-listbox--drag-and-drop-grid","core-collections-unsafe-listbox--drag-and-drop-horizontal","core-collections-unsafe-listbox--drag-and-drop-multiple","core-collections-unsafe-listbox--drag-and-drop-single","core-collections-unsafe-listbox--dynamic-items","core-collections-unsafe-listbox--virtualized-horizontal","core-collections-unsafe-listbox--virtualized-scroll-into-view","core-collections-unsafe-listbox--virtualized-vertical","core-collections-unsafe-listbox--virtualized-with-section-separators","core-collections-unsafe-listbox--virtualized-with-sections","core-collections-unsafe-listbox--with-custom-option-style","core-collections-unsafe-listbox--with-customized-section-titles","core-collections-unsafe-listbox--with-default-selected","core-collections-unsafe-listbox--with-disabled-items","core-collections-unsafe-listbox--with-focus-loop","core-collections-unsafe-listbox--with-padded-section-titles","core-collections-unsafe-listbox--with-section-titles","core-collections-unsafe-listbox--with-sections","core-collections-unsafe-listbox--with-selected","core-collections-virtualizer--grid-layout-example","core-collections-virtualizer--list-layout-example","core-collections-virtualizer--rtl-image-gallery-preset-example","core-collections-virtualizer--tree-view-preset-example","core-content-avatar--basic","core-content-avatar--disabled","core-content-avatar--variants","core-content-avatar--with-image","core-content-avatar--with-initials","core-content-avatar--with-notification","core-content-code--basic","core-content-code--with-scroll","core-content-colorswatch--basic","core-content-colorswatch--disabled","core-content-colorswatch--full-transparency","core-content-colorswatch--indeterminate","core-content-colorswatch--interactive","core-content-colorswatch--none","core-content-colorswatch--variants","core-content-colorswatch--with-custom-label","core-content-colorswatch--with-tooltip","core-content-colorswatch--with-transparency","core-content-kbd--common-shortcuts","core-content-kbd--complex-shortcut","core-content-kbd--key-combination","core-content-kbd--key-combination-with-symbols","core-content-kbd--modifier-key","core-content-kbd--single-key","core-content-kbd--symbols-showcase","core-content-markdown--basic","core-content-markdown--with-caret","core-content-pointpicker--basic","core-content-pointpicker--disabled","core-content-pointpicker-pointpickercontent--custom-cursor","core-content-pointpicker-pointpickercontent--custom-cursor-without-default","core-content-pointpicker-pointpickercontent--default","core-content-pointpicker-pointpickercontent--multiple-point-pickers","core-content-pointpicker-pointpickercontent--points-within-radius","core-content-pointpicker-pointpickercontent--programmatic-focus","core-content-pointpicker-pointpickercontent--snap-to-point","core-content-pointpicker-pointpickercontent--trailing-element","core-content-pointpicker-pointpickercontent--without-grid-lines","core-content-pointpicker-pointpickerdisplay--with-custom-scale","core-content-pointpicker-pointpickerdisplay--with-description","core-content-pointpicker-pointpickerdisplay--with-floating-display","core-content-preview--disabled","core-content-preview--image-preview","core-content-preview--svg-preview","core-content-preview--text-preview","core-content-preview--variants","core-content-preview--without-delete-button","core-content-separator--basic","core-content-separator--secondary","core-content-separator--secondary-vertical","core-content-separator--vertical","core-content-statuscard--basic","core-content-statuscard--interactive","core-content-statuscard--long-content","core-content-statuscard--truncated-title","core-content-statuscard--variants","core-content-statuscard--with-custom-icon","core-content-statuscard--with-trailing-element","core-content-statuscard--without-description","core-content-tag--basic","core-content-tag--disabled","core-content-tag--disabled-removable","core-content-tag--long-text","core-content-tag--removable","core-content-tag--selected","core-content-tag--selected-with-icon","core-content-tag--small","core-content-tag--small-with-icon","core-content-tag--with-icon","core-content-text--basic","core-content-text--slots","core-content-text--variants","core-feedback-skeleton--circle","core-feedback-skeleton--composed-example","core-feedback-skeleton--custom-shape","core-feedback-skeleton--document-view-area","core-feedback-skeleton--rectangle","core-feedback-skeleton--text-line","core-forms-buttonselect--basic","core-forms-buttonselect--controlled","core-forms-buttonselect--controlled-button-selection","core-forms-buttonselect--default-button-selected-value","core-forms-buttonselect--default-select-selected-value","core-forms-buttonselect--disabled","core-forms-buttonselect--exclude-from-tab-order","core-forms-buttonselect--items-without-icons","core-forms-buttonselect--long-text-labels","core-forms-buttonselect--many-items","core-forms-buttonselect--variants","core-forms-buttonselect--with-action-behaviour","core-forms-buttonselect--with-button-disabled-key","core-forms-buttonselect--with-callbacks","core-forms-buttonselect--with-default-open","core-forms-buttonselect--with-disabled-keys","core-forms-buttonselect--with-disabled-keys-and-default-selected","core-forms-buttonselect--with-hidden-label","core-forms-buttonselect--with-individual-button-behaviour","core-forms-buttonselect--with-multiple-disabled-keys","core-forms-buttonselect--with-validation-error","core-forms-buttonselect--without-tooltip","core-forms-calendar--default","core-forms-calendar--disabled","core-forms-calendar--extra-small","core-forms-calendar--extra-small-no-title","core-forms-calendar--fixed-weeks","core-forms-calendar--international-calendar","core-forms-calendar--read-only","core-forms-calendar--select-month","core-forms-calendar--select-month-and-year","core-forms-calendar--select-month-and-year-extra-small","core-forms-calendar--select-month-and-year-with-title","core-forms-calendar--select-month-extra-small","core-forms-calendar--select-month-with-title","core-forms-calendar--unavailable-dates","core-forms-calendar--with-default-value","core-forms-calendar--with-min-max","core-forms-calendar--with-title","core-forms-checkbox--checked","core-forms-checkbox--indeterminate","core-forms-checkbox--primary","core-forms-checkbox--with-error","core-forms-checkbox--with-label-at-end","core-forms-checkbox--with-label-at-start","core-forms-colorinput--basic","core-forms-colorinput--color-presets-only","core-forms-colorinput--controlled","core-forms-colorinput--disabled","core-forms-colorinput--indeterminate","core-forms-colorinput--lazy-picker","core-forms-colorinput--lazy-picker-mobile","core-forms-colorinput--with-alpha","core-forms-colorinput--with-controlled-open","core-forms-colorinput--with-custom-trigger","core-forms-colorinput--with-default-open","core-forms-colorinput--with-default-value","core-forms-colorinput--with-label","core-forms-colorinput--with-label-at-start","core-forms-colorinput--with-removal","core-forms-colorinput--without-alpha","core-forms-colorinput--without-color-label","core-forms-colorinput--without-color-presets","core-forms-colorinput-iconcolorinput--compact","core-forms-colorinput-iconcolorinput--compact-disabled","core-forms-colorinput-iconcolorinput--compact-indeterminate","core-forms-colorinput-iconcolorinput--disabled","core-forms-colorinput-iconcolorinput--indeterminate","core-forms-colorinput-iconcolorinput--standard","core-forms-colorinput-iconcolorinput--without-tooltip","core-forms-colorswatchpicker--basic","core-forms-colorswatchpicker--controlled","core-forms-colorswatchpicker--default-value","core-forms-colorswatchpicker--disabled","core-forms-colorswatchpicker--with-icon","core-forms-colorswatchpicker--with-label","core-forms-colorswatchpicker--with-label-at-start","core-forms-combobox--basic","core-forms-combobox--disabled","core-forms-combobox--dynamic-collections","core-forms-combobox--ghost-variant","core-forms-combobox--items-with-icon","core-forms-combobox--read-only","core-forms-combobox--variants","core-forms-combobox--with-custom-filter","core-forms-combobox--with-custom-number-value","core-forms-combobox--with-custom-value","core-forms-combobox--with-description","core-forms-combobox--with-error-message","core-forms-combobox--with-focus-menu-trigger","core-forms-combobox--with-label-at-start","core-forms-combobox--with-manual-menu-trigger","core-forms-combobox--with-min-max-value","core-forms-combobox--with-render-option","core-forms-combobox--with-tooltip","core-forms-combobox--with-warning-message","core-forms-datefield--basic","core-forms-datefield--controlled","core-forms-datefield--default-value","core-forms-datefield--different-granularity","core-forms-datefield--disabled","core-forms-datefield--ghost-variant","core-forms-datefield--html-forms","core-forms-datefield--placeholder-value","core-forms-datefield--read-only","core-forms-datefield--variants","core-forms-datefield--with-calendar-icon","core-forms-datefield--with-calendar-picker","core-forms-datefield--with-calendar-picker-and-default-value","core-forms-datefield--with-calendar-picker-and-min-max","core-forms-datefield--with-calendar-picker-disabled","core-forms-datefield--with-calendar-picker-error","core-forms-datefield--with-calendar-picker-ghost","core-forms-datefield--with-calendar-picker-read-only","core-forms-datefield--with-error-message","core-forms-datefield--with-error-message-only","core-forms-datefield--with-label","core-forms-datefield--with-label-at-start","core-forms-datefield--with-min-and-max-value","core-forms-datefield--with-warning-message","core-forms-fileinput--basic","core-forms-fileinput--custom-labels","core-forms-fileinput--directory","core-forms-fileinput--disabled","core-forms-fileinput--label-position-start","core-forms-fileinput--multiple","core-forms-fileinput--variants","core-forms-fileinput--with-error","core-forms-fileinput--with-warning","core-forms-fileinput--without-label","core-forms-fileuploader--button-variant","core-forms-fileuploader--default","core-forms-fileuploader--disabled","core-forms-fileuploader--error-dropzone","core-forms-fileuploader--inline","core-forms-fileuploader--no-label","core-forms-fileuploader--variants","core-forms-imagedropzone--basic","core-forms-imagedropzone--controlled","core-forms-imagedropzone--disabled","core-forms-imagedropzone--variants","core-forms-imagedropzone--with-default-image","core-forms-imagedropzone--with-file-size-limit","core-forms-imagedropzone--with-file-type-restriction","core-forms-numberinput--basic","core-forms-numberinput--controlled","core-forms-numberinput--disabled","core-forms-numberinput--ghost-variant","core-forms-numberinput--read-only","core-forms-numberinput--variants","core-forms-numberinput--with-custom-step","core-forms-numberinput--with-description","core-forms-numberinput--with-error","core-forms-numberinput--with-error-and-error-message","core-forms-numberinput--with-label","core-forms-numberinput--with-label-at-start","core-forms-numberinput--with-min-and-max","core-forms-numberinput--without-stepper","core-forms-pagination--controlled","core-forms-pagination--disabled","core-forms-pagination--primary","core-forms-pagination--read-only","core-forms-pagination--variants","core-forms-pagination--with-custom-messages","core-forms-pagination--with-default-value","core-forms-pagination--with-large-numbers","core-forms-pagination--with-step","core-forms-pagination--without-actions","core-forms-radiogroup--basic","core-forms-radiogroup--controlled","core-forms-radiogroup--custom-render-option","core-forms-radiogroup--default-value","core-forms-radiogroup--disabled","core-forms-radiogroup--disabled-values","core-forms-radiogroup--horizontal","core-forms-radiogroup--read-only","core-forms-radiogroup--with-group-label","core-forms-radiogroup--with-group-label-at-start","core-forms-radiogroup--with-option-description","core-forms-radiogroup--with-option-label-at-start","core-forms-rangecalendar--default","core-forms-rangecalendar--disabled","core-forms-rangecalendar--extra-small","core-forms-rangecalendar--extra-small-no-title","core-forms-rangecalendar--fixed-weeks","core-forms-rangecalendar--international-calendar","core-forms-rangecalendar--read-only","core-forms-rangecalendar--select-month","core-forms-rangecalendar--select-month-and-year","core-forms-rangecalendar--select-month-and-year-with-title","core-forms-rangecalendar--select-month-with-title","core-forms-rangecalendar--unavailable-dates","core-forms-rangecalendar--with-default-value","core-forms-rangecalendar--with-min-max","core-forms-rangecalendar--with-title","core-forms-searchinput--basic","core-forms-searchinput--clear-button-focusable","core-forms-searchinput--disabled","core-forms-searchinput--variants","core-forms-select--basic","core-forms-select--controlled","core-forms-select--empty-items","core-forms-select--ghost","core-forms-select--long-labels","core-forms-select--long-list","core-forms-select--read-only","core-forms-select--scrollable","core-forms-select--with-autocomplete","core-forms-select--with-controlled-open","core-forms-select--with-custom-trigger","core-forms-select--with-default-open","core-forms-select--with-default-selected-item","core-forms-select--with-description","core-forms-select--with-disabled","core-forms-select--with-disabled-items","core-forms-select--with-error","core-forms-select--with-error-and-error-message","core-forms-select--with-label","core-forms-select--with-label-at-start","core-forms-select--with-section-headers","core-forms-select--with-sections","core-forms-select--with-virtualized-section-headers","core-forms-select--with-warning","core-forms-select--with-warning-and-warning-message","core-forms-select-iconselect--basic","core-forms-select-iconselect--disabled","core-forms-select-iconselect--read-only","core-forms-select-iconselect--with-default-open","core-forms-select-iconselect--with-error","core-forms-select-iconselect--with-warning","core-forms-select-iconselect--without-icon","core-forms-select-iconselect--without-tooltip","core-forms-select-multiselect--basic","core-forms-select-multiselect--controlled","core-forms-select-multiselect--ghost","core-forms-select-multiselect--hide-clear","core-forms-select-multiselect--hide-select-all","core-forms-select-multiselect--hide-select-all-and-clear","core-forms-select-multiselect--long-labels-as-tags","core-forms-select-multiselect--long-list","core-forms-select-multiselect--max-count-1","core-forms-select-multiselect--max-count-3","core-forms-select-multiselect--read-only","core-forms-select-multiselect--read-only-with-tags-open","core-forms-select-multiselect--scrollable","core-forms-select-multiselect--with-autocomplete","core-forms-select-multiselect--with-controlled-open","core-forms-select-multiselect--with-custom-trigger","core-forms-select-multiselect--with-default-open","core-forms-select-multiselect--with-default-selected-item","core-forms-select-multiselect--with-description","core-forms-select-multiselect--with-disabled","core-forms-select-multiselect--with-disabled-items","core-forms-select-multiselect--with-error","core-forms-select-multiselect--with-error-and-error-message","core-forms-select-multiselect--with-error-and-tags","core-forms-select-multiselect--with-label","core-forms-select-multiselect--with-label-at-start","core-forms-select-multiselect--with-sections","core-forms-select-multiselect--with-warning","core-forms-select-multiselect--with-warning-and-warning-message","core-forms-slider--basic","core-forms-slider--controlled","core-forms-slider--disabled","core-forms-slider--read-only","core-forms-slider--read-only-with-number-input","core-forms-slider--with-description","core-forms-slider--with-label","core-forms-slider--with-label-and-number-input","core-forms-slider--with-min-and-max","core-forms-slider--with-number-input","core-forms-slider--with-step","core-forms-slider-iconslider--basic","core-forms-slider-iconslider--disabled","core-forms-slider-iconslider--with-number-input","core-forms-slider-iconslider--without-tooltip","core-forms-switch--basic","core-forms-switch--disabled","core-forms-switch--selected","core-forms-switch--selected-disabled","core-forms-switch--with-description","core-forms-switch--with-description-disabled","core-forms-switch--with-description-in-left-and-status","core-forms-switch--with-description-in-left-long-label","core-forms-switch--with-description-on-top","core-forms-switch--with-label","core-forms-switch--with-label-and-status","core-forms-switch--with-label-in-left-and-status","core-forms-switch--with-label-in-left-and-status-disabled","core-forms-taggedpagination--basic","core-forms-taggedpagination--disabled","core-forms-taggedpagination--disabled-steppers","core-forms-taggedpagination--read-only","core-forms-taggedpagination--variant","core-forms-taggedpagination--with-page-label","core-forms-textinput--basic","core-forms-textinput--controlled","core-forms-textinput--disabled","core-forms-textinput--focusing-the-input","core-forms-textinput--ghost-variant","core-forms-textinput--html-forms","core-forms-textinput--multiline","core-forms-textinput--multiline-variants","core-forms-textinput--multiline-with-rows","core-forms-textinput--read-only","core-forms-textinput--variants","core-forms-textinput--with-description","core-forms-textinput--with-error-message","core-forms-textinput--with-label","core-forms-textinput--with-label-at-start","core-forms-textinput--with-warning-message","core-forms-timefield--basic","core-forms-timefield--controlled","core-forms-timefield--default-value","core-forms-timefield--disabled","core-forms-timefield--ghost-variant","core-forms-timefield--html-forms","core-forms-timefield--placeholder-value","core-forms-timefield--read-only","core-forms-timefield--variants","core-forms-timefield--with-error-message","core-forms-timefield--with-error-message-only","core-forms-timefield--with-label","core-forms-timefield--with-label-at-start","core-forms-timefield--with-min-and-max-value","core-forms-timefield--with-warning-message","core-media-audioplayer--basic","core-media-audioplayer--small","core-miscellaneous-editor--basic","core-miscellaneous-editor--headless-clipboard-hooks","core-miscellaneous-editor--headless-custom","core-miscellaneous-editor--headless-document-model","core-miscellaneous-editor--headless-max-length","core-miscellaneous-editor--headless-paragraphs","core-miscellaneous-editor--headless-styles","core-miscellaneous-editor-plain--auto-focus","core-miscellaneous-editor-plain--auto-focus-at-end","core-miscellaneous-editor-plain--auto-focus-at-start","core-miscellaneous-editor-plain--clear-on-cancel","core-miscellaneous-editor-plain--clear-on-save","core-miscellaneous-editor-plain--controlled","core-miscellaneous-editor-plain--custom-submit-icon","core-miscellaneous-editor-plain--default-save-disabled","core-miscellaneous-editor-plain--disabled","core-miscellaneous-editor-plain--minimal","core-miscellaneous-editor-plain--minimal-disabled","core-miscellaneous-editor-plain--minimal-multiline","core-miscellaneous-editor-plain--minimal-save-disabled","core-miscellaneous-editor-plain--not-inline","core-miscellaneous-editor-plain--save-on-enter","core-miscellaneous-editor-plain--variants","core-miscellaneous-editor-plain--with-cancel","core-miscellaneous-editor-plain--with-dynamic-caret-position","core-miscellaneous-editor-rich-text--auto-focus","core-miscellaneous-editor-rich-text--auto-focus-at-end","core-miscellaneous-editor-rich-text--clear-on-cancel","core-miscellaneous-editor-rich-text--clear-on-save","core-miscellaneous-editor-rich-text--controlled","core-miscellaneous-editor-rich-text--default","core-miscellaneous-editor-rich-text--disabled","core-miscellaneous-editor-rich-text--long-content","core-miscellaneous-editor-rich-text--mentions","core-miscellaneous-editor-rich-text--mentions-max-suggestions","core-miscellaneous-editor-rich-text--not-inline","core-miscellaneous-editor-rich-text--save-disabled","core-miscellaneous-editor-rich-text--save-on-enter","core-miscellaneous-editor-rich-text--variants","core-miscellaneous-editor-rich-text--with-cancel","core-miscellaneous-editor-rich-text--with-custom-footer-buttons","core-miscellaneous-editor-rich-text--with-placeholder","core-miscellaneous-freehandcanvas--basic","core-miscellaneous-freehandcanvas--clear-button","core-miscellaneous-freehandcanvas--controlled","core-miscellaneous-freehandcanvas--default-value","core-miscellaneous-freehandcanvas--disabled","core-miscellaneous-freehandcanvas--history-enabled","core-miscellaneous-freehandcanvas--label","core-miscellaneous-freehandcanvas--streamlining","core-miscellaneous-icon--basic","core-miscellaneous-toolbar--basic","core-miscellaneous-toolbar--collapsible","core-miscellaneous-toolbar--vertical","core-miscellaneous-toolbar--with-inputs","core-miscellaneous-toolbar--with-over-flow","core-miscellaneous-toolbar--with-tabbing-within","core-miscellaneous-toolbar--with-tooltip","core-navigation-accordion--basic","core-navigation-accordion--controlled","core-navigation-accordion--default-expanded-keys","core-navigation-accordion--disabled","core-navigation-accordion--single-expansion","core-navigation-accordion-accordionitem--force-mount","core-navigation-accordion-accordionitem--show-actions-on-trigger-only","core-navigation-accordion-accordionitem--with-buttons","core-navigation-accordion-accordionitem--with-sub-labels","core-navigation-accordion-accordionitem--with-tabbable-content","core-navigation-breadcrumbs--basic","core-navigation-breadcrumbs--collapsed","core-navigation-breadcrumbs--custom-separator","core-navigation-breadcrumbs--disabled","core-navigation-breadcrumbs--variants","core-navigation-breadcrumbs--with-icons","core-navigation-breadcrumbs--with-select","core-navigation-disclosure--basic","core-navigation-disclosure--controlled","core-navigation-disclosure--truncated-title","core-navigation-disclosure--variants","core-navigation-disclosure--with-custom-icon","core-navigation-disclosure--with-interactive-content","core-navigation-disclosure--with-long-content","core-navigation-disclosure--without-description","core-navigation-link--basic","core-navigation-link--client-side-action","core-navigation-link--variants","core-navigation-stepper--all-complete","core-navigation-stepper--all-states","core-navigation-stepper--condensed","core-navigation-stepper--controlled","core-navigation-stepper--default","core-navigation-stepper--expanded-without-descriptions","core-navigation-stepper--frontier-ahead-of-selection","core-navigation-stepper--indicator-only","core-navigation-stepper--indicator-only-expanded","core-navigation-stepper--is-disabled","core-navigation-stepper--long-title-and-description","core-navigation-stepper--mixed-indicator-and-titled-items","core-navigation-stepper--per-item-aria-label-overrides-title","core-navigation-stepper--single-item","core-navigation-stepper--size-small-condensed","core-navigation-stepper--size-small-expanded","core-navigation-stepper--two-steps","core-navigation-stepper--with-disabled-step","core-navigation-tabs--basic","core-navigation-tabs--controlled","core-navigation-tabs--ghost","core-navigation-tabs--with-action-button","core-navigation-tabs--with-close-button","core-navigation-tabs--with-default-selected","core-navigation-tabs--with-disabled","core-navigation-tabs--with-disabled-and-close-button","core-navigation-tabs--with-focusable-content","core-navigation-tabs--with-specific-disabled","core-navigation-tabs-tabitem--with-icon","core-overlays-alertdialog--auto-focus-cancel-button","core-overlays-alertdialog--basic","core-overlays-alertdialog--custom-focused-button","core-overlays-alertdialog--default-open","core-overlays-alertdialog--long-content","core-overlays-alertdialog--only-cancel-button","core-overlays-alertdialog--only-primary-action","core-overlays-alertdialog--primary-action-disabled","core-overlays-alertdialog--separate-close-handler","core-overlays-alertdialog--with-text-input","core-overlays-alertdialog--with-title-only","core-overlays-alertdialog--without-close-button","core-overlays-alertdialog--without-icon","core-overlays-alertdialog--without-message-and-actions","core-overlays-dialog--basic","core-overlays-dialog--default-open","core-overlays-dialog--different-sizes","core-overlays-dialog--ghost","core-overlays-drawer--basic","core-overlays-drawer--with-action","core-overlays-inlinetoolbar--basic","core-overlays-inlinetoolbar--controlled","core-overlays-inlinetoolbar--disabled","core-overlays-inlinetoolbar--disabled-keys","core-overlays-inlinetoolbar--with-interactive-element","core-overlays-inlinetoolbar--with-scroll","core-overlays-modal--basic","core-overlays-modal--controlled","core-overlays-modal--default-open","core-overlays-modal-modalcontent--disabled-animation","core-overlays-modal-modalcontent--drawer-mobile","core-overlays-modal-modalcontent--drawer-mobile-with-nested-popover","core-overlays-modal-modalcontent--form-controls","core-overlays-modal-modalcontent--long-content","core-overlays-modal-modalcontent--not-dismissable","core-overlays-modal-modalcontent--uncontrolled-interaction-outside","core-overlays-modal-modalcontent--with-disabled-focus-management","core-overlays-modal-modalcontent--with-inert","core-overlays-popover--basic","core-overlays-popover--event-leak-fix","core-overlays-popover--with-arrow","core-overlays-popover--with-boundary-element","core-overlays-popover--with-custom-target","core-overlays-popover--with-dynamic-trigger-width","core-overlays-popover--with-no-boundary","core-overlays-popover--with-scrollable-content","core-overlays-popover--with-scrollable-content-non-modal","core-overlays-popover--with-scrollable-viewport","core-overlays-popover--with-tooltip","core-overlays-popover-popovercontent--basic","core-overlays-popover-popovercontent--contained-focus","core-overlays-popover-popovercontent--default-open-with-arrow","core-overlays-popover-popovercontent--disable-animation","core-overlays-popover-popovercontent--manual-repositioning","core-overlays-popover-popovercontent--nested-scrollable-containers","core-overlays-popover-popovercontent--scroll-repositioning","core-overlays-popover-popovercontent--with-boundary-axis","core-overlays-popover-popovercontent--with-horizontal-boundary-behavior","core-overlays-popover-popovertrigger--basic","core-overlays-popover-popovertrigger--function-children","core-overlays-popover-popovertrigger--with-updated-position","core-overlays-tooltip--basic","core-overlays-tooltip--controlled-open","core-overlays-tooltip--disabled","core-overlays-tooltip--focus-trigger","core-overlays-tooltip--no-text","core-overlays-tooltip--placement","core-overlays-tooltip--variants","core-overlays-tooltip--variants-size","core-overlays-tooltip--with-cross-offset","core-overlays-tooltip--with-focusable","core-overlays-tooltip--with-offset","core-overlays-tooltip--with-on-open-change","core-status-inlinealert--basic","core-status-inlinealert--compact","core-status-inlinealert--compact-with-action","core-status-inlinealert--compact-with-action-and-close","core-status-inlinealert--multi-line","core-status-inlinealert--multi-line-with-action","core-status-inlinealert--multi-line-with-action-and-close","core-status-inlinealert--sizes","core-status-inlinealert--variants","core-status-inlinealert--with-action","core-status-inlinealert--with-action-and-close","core-status-progressbar--basic","core-status-progressbar--variants","core-status-progressbar--with-custom-number-formatter","core-status-progressbar--with-custom-value-label","core-status-progressbar--with-error","core-status-progressbar--with-max-value","core-status-progressbar--with-min-and-max-value","core-status-progressbar--with-min-value","core-status-progressbar--with-no-description","core-status-progressbar--with-no-label","core-status-progressbar--with-show-value","core-status-progressspinner--error","core-status-progressspinner--primary","core-status-progressspinner--success","core-status-progressspinner--variants","core-status-progressspinner--without-label","core-status-toast--basic","core-status-toast--timeout","core-status-toast--variants-with-action","core-status-toast--variants-without-action","core-status-toast--with-action","core-utilities-actionable--basic","core-utilities-actionable--disabled","core-utilities-actionable--with-complex-content","core-utilities-actionable--with-div","core-utilities-actionable--with-dynamic-button-styling","core-utilities-actionable--with-dynamic-child-styling","core-utilities-box--basic","core-utilities-box--element-type","core-utilities-box--flex-layout","core-utilities-box--media-queries","core-utilities-box--nested-boxes","core-utilities-dateformat--basic","core-utilities-dateformat--time-only","core-utilities-dateformat--time-only-with-time-zone","core-utilities-dateformat--time-zone-24-hour","core-utilities-dateformat--with-date-and-time","core-utilities-deviceprovider--always-desktop","core-utilities-deviceprovider--always-mobile","core-utilities-deviceprovider--basic","core-utilities-deviceprovider--custom-breakpoints","core-utilities-frameprovider--always-contained","core-utilities-frameprovider--basic","core-utilities-frameprovider--custom-portal-container","core-utilities-frameprovider--inside-shadow-root","core-utilities-frameprovider--nested-containers","core-utilities-frameprovider--never-contained","core-utilities-frameprovider--popover-with-frame-boundary","core-utilities-frameprovider--portal-container-outside-container","core-utilities-frameprovider--with-interactive-elements-outside-of-container","core-utilities-group--basic","core-utilities-i18nprovider--string-format","core-utilities-messageformat--basic","core-utilities-numberformat--basic","core-utilities-numberformat--currency","core-utilities-numberformat--currency-with-fraction-digits","core-utilities-numberformat--currency-with-fraction-digits-and-currency-display","core-utilities-numberformat--percent","core-utilities-numberformat--percent-with-fraction-digits","core-utilities-panel--basic","core-utilities-panel--collapsible","core-utilities-panel--conditional","core-utilities-panel--controlled","core-utilities-panel--disabled-handle","core-utilities-panel--max-size","core-utilities-panel--multiple","core-utilities-panel--nested","core-utilities-panel--persistent","core-utilities-panel--vertical","core-utilities-portal--basic","core-utilities-themeprovider--basic","json-render-examples--dashboard","json-render-examples--data-table","json-render-examples--login-form","json-render-examples--settings-panel"];var h={version:"3.7.0"};var b=`
41195
+ * [Theme documentation](/docs/theming--docs) - Learn about Baseline UI's theming system`};var m={"8":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","ChevronRightFilledIcon","ChevronRightIcon","EllipseIcon","MinusIcon","PlusIcon","XIcon"],"12":["CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","EditIcon","EllipseIcon","EnterKeyIcon","LockFilledIcon","LockIcon","MinusIcon","MoreVIcon","MoreIcon","PlaceholderIcon","PlusIcon","SearchIcon","SizeIcon","TrashIcon","XIcon","ZoomIcon"],"16":["AlignBottomIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDiagonalTopLeftBottomRightIcon","ArrowDownCircleFilledIcon","ArrowDownIcon","ArrowIcon","ArrowLeftRightIcon","ArrowRightIcon","ArrowUpArrowDownIcon","ArrowUpIcon","AtIcon","AttachmentsIcon","AvatarIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BulletListIcon","CalendarIcon","CaretLeftIcon","CaretRightIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","CircleFilledIcon","ClockIcon","CopyIcon","CustomizeIcon","DocumentEditIcon","DownloadIcon","DuplicateIcon","EditIcon","ElipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FilterAltIcon","FolderIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FullScreenIcon","HelpCircleIcon","HelpIcon","HereIcon","HideIcon","HighlightTextAltIcon","HighlightTextIcon","HorizontalScrollIcon","ImageIcon","InfoCircleFilledIcon","InsertIcon","ItalicIcon","LightBulbIcon","LineIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MeasureIcon","MinusIcon","MoreIcon","MoreVerticalIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","NumberedListIcon","OpenIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageVerticalScrollIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PlaceholderIcon","PlayIcon","PlusIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","ReadOnlyIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedoIcon","RemoveFormattingIcon","ReorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RulerIcon","SearchIcon","SettingsIcon","ShowIcon","SlashCommandsIcon","SoundRecordIcon","StampIcon","StarFilledIcon","StarIcon","StrikeoutTextAltIcon","TableCellIcon","TableColumnIcon","TableHeaderIcon","TableIcon","TableRowIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextDecreaseIndentIcon","TextIcon","TextIncreaseIndentIcon","TextMarkIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UndoIcon","UnlockIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WindowedIcon","WorkflowIcon","XCircleFilledIcon","XIcon"],"20":["AddPageIcon","AnonymousIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpCircleFilledIcon","AtIcon","AvatarFilledIcon","BoldIcon","CalloutIcon","CaretDownIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ClockIcon","CollapseIcon","CommentIcon","CopyIcon","CutIcon","DistanceIcon","DownloadIcon","DuplicateIcon","EditIcon","EllipseIcon","EmojiSmileIcon","ErrorAltCircleFilledIcon","ErrorAlternativeCircleIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","FormDateIcon","FormSignatureIcon","FormTextFieldIcon","HelpCircleIcon","HighlightTextIcon","HomeIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","ItalicIcon","LinkIcon","ListIcon","LockIcon","MagicIcon","MinusIcon","MoreIcon","MoreVerticalIcon","MoveIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCrossIcon","NoteHelpIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OpenIcon","PageMoveLeftIcon","PageMoveRightIcon","PagesInsertIcon","PasteIcon","PipetteIcon","PlusIcon","PrintIcon","RotateClockwiseIcon","SearchIcon","SettingsIcon","ShapeIcon","ShareIcon","SoundIcon","SoundRecordIcon","StarFilledIcon","StarIcon","StyleIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TrashIcon","TypeTextIcon","UnderlineIcon","UploadIcon","WarningFilledIcon","WarningIcon","XCircleFilledIcon","XCircleIcon","XIcon"],"24":["AddNoteCloudIcon","AddNoteIcon","AddTextSerifIcon","AiIcon","AirplaneIcon","AlignBottomIcon","AlignHorizontalCenterIcon","AlignMiddleIcon","AlignTopIcon","AnonymousIcon","ArrowDownIcon","ArrowIcon","ArrowLeftIcon","ArrowRightIcon","ArrowUpIcon","AtIcon","AttachmentIcon","AvatarFilledIcon","AvatarIcon","BlendModeIcon","BoldIcon","BookmarkFilledIcon","BookmarkIcon","BorderColorIcon","BottomBorderIcon","BulletListIcon","CalibrateIcon","CaptureAddIcon","CaretDownIcon","CaretIcon","CaretLeftIcon","CaretRightIcon","CaretUpIcon","CheckmarkCircleFilledIcon","CheckmarkCircleIcon","CheckmarkIcon","ChevronListIcon","ClockIcon","CloudyBorderIcon","CollapseIcon","ColorPaletteIcon","ColorSwatchIcon","CommentIcon","CommentInSidebarIcon","CommentOnPageIcon","CompareDocumentsIcon","CopyIcon","CopyPageIcon","CropIcon","CustomizeIcon","CutIcon","DateModifiedIcon","DatePlusIcon","DebugIcon","DocumentArrowDownCircleIcon","DocumentArrowDownIcon","DocumentArrowRightIcon","DocumentFilledIcon","DocumentLockIcon","DocumentPdfIcon","DownloadIcon","DragIndicatorIcon","DragIndicatorVerticalIcon","DuplicateIcon","EditAnnotationsIcon","EditContentIcon","EditDocumentIcon","EditIcon","EditThumbnailsIcon","EllipseAreaIcon","EllipseCloudyIcon","EllipseDashedIcon","EllipseIcon","EmbedIcon","EmojiSmileIcon","EndCapArrowFilledIcon","EndCapArrowIcon","EndCapChevronFilledIcon","EndCapChevronIcon","EndCapCircleIcon","EndCapDiamondIcon","EndCapNoneIcon","EndCapSlantedIcon","EndCapSquareIcon","EndCapStraightIcon","EraserIcon","ErrorAltCircleFilledIcon","ErrorAltIcon","ErrorCircleFilledIcon","ErrorCircleIcon","ExpandIcon","ExpandVerticalIcon","FillColorIcon","FilterIcon","FitToHeightIcon","FivePagesHorizontalFilledIcon","FivePagesVerticalFilledIcon","FolderAddIcon","FolderIcon","FontListIcon","FontSizeIcon","FormButtonIcon","FormChoiceIcon","FormComboboxIcon","FormDateIcon","FormListboxIcon","FormPageIcon","FormRadioButtonIcon","FormSignatureIcon","FormTextFieldIcon","FormTwoRadioButtonsIcon","FourPagesGridFilledIcon","FourPagesHorizontalFilledIcon","FourPagesStackedFilledIcon","FourPagesVerticalFilledIcon","GroupIcon","HamburgerMenuIcon","HandIcon","HeartIcon","HideIcon","HideRevealIcon","HighlightTextIcon","HomeIcon","HorizontalScollIcon","ImageIcon","InfoCircleFilledIcon","InfoCircleIcon","InitialsIcon","InnerHorizontalBorderIcon","InnerVerticalBorderIcon","InsertIcon","ItalicIcon","LayerBottomIcon","LayerDownIcon","LayerTopIcon","LayerUpIcon","LayersIcon","LeftBindingIcon","LeftBorderIcon","LineCapsIcon","LineIcon","LineSpacingIcon","LineStyleCloudyIcon","LineStyleDashedDoubleDashIcon","LineStyleDashedDoubleGapIcon","LineStyleDashedQuadrupleDashIcon","LineStyleDashedSingleGapIcon","LineStyleIcon","LineStyleSolidIcon","LineWidthIcon","LinkIcon","LockFilledIcon","LockIcon","MagicIcon","MagicPenIcon","MailIcon","MarkupIcon","MarqueeZoomIcon","MeasureIcon","MergeIcon","MessageCloudIcon","MinusIcon","MoonIcon","MoreCircleIcon","MoreIcon","MoreVerticalIcon","MoveAllDirectionsIcon","MoveLeftIcon","MoveLeftRightIcon","MoveRightIcon","MultiplePagesIcon","NonEditableIcon","NoteArrowRightIcon","NoteCheckIcon","NoteCircleIcon","NoteCloudIcon","NoteCrossIcon","NoteHelpIcon","NoteIcon","NoteInsetIcon","NoteKeyIcon","NoteNewParagraphAltIcon","NoteNewParagraphIcon","NoteNoteIcon","NotePointerRightIcon","NoteSpeechBubbleIcon","NoteStarIcon","OcrIcon","OpacityIcon","PageAddIcon","PageCurlIcon","PageDuplicateIcon","PageFittingFillIcon","PageFittingFitIcon","PageHorizontalScrollIcon","PageLandscapeIcon","PageLayoutDoubleIcon","PageLayoutSingleIcon","PageMoveLeftIcon","PageMoveRightIcon","PageNumberCircleIcon","PageNumberIcon","PagePortraitIcon","PageRemoveIcon","PageVerticalScrollIcon","PagesInsertAltIcon","PagesInsertIcon","PagesNewFromSelectionAltIcon","PagesNewFromSelectionIcon","PagesSelectAllIcon","PagesSelectNoneIcon","PasteBoardIcon","PastePageIcon","PauseIcon","PenHighlighterIcon","PenIcon","PerimeterIcon","PinDropFilledIcon","PinDropIcon","PipetteIcon","PlayIcon","PlusCircleFilledIcon","PlusCircleIcon","PlusIcon","PointerIcon","PolygonAreaIcon","PolygonCloudyIcon","PolygonDashedIcon","PolygonIcon","PolylineIcon","PrecisionIcon","PrintIcon","PrivateModeIcon","PushPinIcon","QuestionmarkCircleIcon","ReaderViewIcon","RectangleAreaIcon","RectangleCloudyIcon","RectangleDashedIcon","RectangleIcon","RedactIcon","RedactRectangleIcon","RedactTextHighlighterIcon","RedactionTextRepeatingIcon","RedactionTextSingleIcon","RedoAllIcon","RedoIcon","RegexIcon","ReplaceIcon","RightBindingIcon","RightBorderIcon","RotateClockwiseIcon","RotateCounterClockwiseIcon","RotateObjectClockwiseIcon","RotateObjectCounterClockwiseIcon","RulerIcon","ScaleIcon","SearchCircleIcon","SearchIcon","SearchSelectionIcon","SelectAllIcon","SelectionToolIcon","SettingsIcon","ShapesIcon","ShareAltIcon","ShareIcon","ShieldAddIcon","ShieldCheckmarkIcon","ShieldWarningIcon","ShieldXIcon","ShowIcon","SidebarIcon","SignOutIcon","SignatureDigitalIcon","SignatureIcon","SinglePageFilledIcon","SoundIcon","SquigglyTextIcon","StampAddIcon","StampIcon","StarFilledIcon","StarIcon","StartCapArrowFilledIcon","StartCapArrowIcon","StartCapChevronFilledIcon","StartCapChevronIcon","StartCapCircleIcon","StartCapDiamondIcon","StartCapNoneIcon","StartCapSlantedIcon","StartCapSquareIcon","StartCapStraightIcon","StrikeoutTextIcon","StyleFilledIcon","StyleIcon","StylusFilledIcon","StylusIcon","SunIcon","TableCellIcon","TextAlignCenterIcon","TextAlignJustifyIcon","TextAlignLeftIcon","TextAlignRightIcon","TextCalloutIcon","TextColorIcon","TextIcon","TextPropertiesHideIcon","TextPropertiesShowIcon","TextSerifIcon","TextSmallerIcon","ThreePagesHorizontalFilledIcon","ThreePagesStackedFilledIcon","ThreePagesVerticalFilledIcon","ThumbnailsIcon","ThumbsDownIcon","ThumbsUpIcon","TopBorderIcon","TrashIcon","TwoPagesHorizontalFilledIcon","TwoPagesVerticalFilledIcon","TypeTextIcon","UnderlineIcon","UnderlineTextIcon","UndoAllIcon","UndoIcon","UndoRedoIcon","UngroupIcon","UnlockIcon","UploadIcon","UserIcon","VerticalScrollIcon","VideoIcon","WarningFilledIcon","WarningIcon","WidgetIcon","WorkflowIcon","XCircleFilledIcon","XCircleIcon","XIcon","ZoomInIcon","ZoomOutIcon"],"36":["ArrowRight","Check","Circle","Cross","Help","Inset","Key","NewParagraphAlt","NewParagraph","Note","PointerRight","SpeechBubble","Star"]};var r=["charts-barchart--basic","charts-barchart--custom-colors","charts-barchart--formatted","charts-barchart--hidden-axes","charts-barchart--many-series","charts-barchart--mixed-stacking","charts-barchart--single-series","charts-barchart--stacked","charts-barchart--stacked-with-three-series","charts-barchart--thicker-bars","charts-barchart--with-legend","charts-linechart--basic","charts-linechart--custom-colors","charts-linechart--formatted","charts-linechart--hidden-axes","charts-linechart--linear-curve","charts-linechart--many-lines","charts-linechart--single-line","charts-linechart--sparkline","charts-linechart--with-dots","charts-linechart--with-legend","charts-piechart--basic","charts-piechart--custom-colors","charts-piechart--donut","charts-piechart--long-legend-names","charts-piechart--many-slices","charts-piechart--no-labels","charts-piechart--no-legend","charts-piechart--no-tooltip","charts-piechart--small-slices-below-five-percent","core-buttons-actionbutton--as-div","core-buttons-actionbutton--basic","core-buttons-actionbutton--disabled","core-buttons-actionbutton--variants","core-buttons-actionbutton--with-both-icons","core-buttons-actionbutton--with-icon","core-buttons-actionbutton--with-popover","core-buttons-actiongroup--basic","core-buttons-actiongroup--default-selected","core-buttons-actiongroup--disabled","core-buttons-actiongroup--disabled-items","core-buttons-actiongroup--disabled-items-multi-select","core-buttons-actiongroup--disabled-with-selection","core-buttons-actiongroup--multi-select","core-buttons-actiongroup--multiple-default-selected","core-buttons-actiongroup--multiple-selected-items","core-buttons-actiongroup--single-item","core-buttons-actiongroup--single-select","core-buttons-actiongroup--with-custom-action-item","core-buttons-actiongroup--with-icon","core-buttons-actiongroup--with-icon-disabled","core-buttons-actiongroup--with-icon-multi-select","core-buttons-actiongroup--without-tooltip","core-buttons-actioniconbutton--basic","core-buttons-actioniconbutton--disabled","core-buttons-actioniconbutton--variants","core-buttons-actioniconbutton--with-popover","core-buttons-actioniconbutton--with-tooltip","core-buttons-reaction--basic","core-buttons-reaction--disabled","core-buttons-reaction--read-only","core-buttons-reaction--selected","core-buttons-reaction--variants","core-buttons-scrollcontrolbutton--basic","core-buttons-scrollcontrolbutton--hide-for-keyboard","core-buttons-scrollcontrolbutton--with-custom-delay","core-buttons-scrollcontrolbutton--with-reversed-items","core-buttons-scrollcontrolbutton--without-smooth-scroll","core-buttons-togglebutton--basic","core-buttons-togglebutton--controlled","core-buttons-togglebutton--default-selected","core-buttons-togglebutton--disabled","core-buttons-togglebutton--variants","core-buttons-togglebutton--with-icon","core-buttons-toggleiconbutton--basic","core-buttons-toggleiconbutton--primary-variants","core-buttons-toggleiconbutton--secondary-variants","core-buttons-toggleiconbutton--state-specific-icons","core-buttons-toggleiconbutton--teritary-variants","core-buttons-toggleiconbutton--toolbar-variants","core-buttons-toggleiconbutton--with-tooltip","core-collections-filelist--basic","core-collections-filelist--disabled","core-collections-filelist--disabled-items","core-collections-filelist--expanded","core-collections-filelist--expanded-disabled","core-collections-filelist--grid","core-collections-filelist--loading","core-collections-filelist--long-filename","core-collections-filelist--many-expanded","core-collections-filelist--many-grid","core-collections-filelist--many-items","core-collections-filelist--mixed-states","core-collections-filelist--with-error","core-collections-gridlist--basic","core-collections-gridlist--default-selected-keys","core-collections-gridlist--disabled","core-collections-gridlist--disabled-rows","core-collections-gridlist--disallow-empty-selection","core-collections-gridlist--with-drag-and-drop","core-collections-gridlist--with-multiple-selection","core-collections-gridlist--with-single-selection","core-collections-imagegallery--basic","core-collections-imagegallery--more-items","core-collections-imagegallery--rtl-with-virtualization","core-collections-imagegallery--scrollable","core-collections-imagegallery--with-controlled-list","core-collections-imagegallery--with-custom-aspect-ratio","core-collections-imagegallery--with-custom-fit","core-collections-imagegallery--with-custom-image-dimensions","core-collections-imagegallery--with-custom-image-renderer","core-collections-imagegallery--with-custom-size","core-collections-imagegallery--with-deletion","core-collections-imagegallery--with-disabled-deletion","core-collections-imagegallery--with-dynamic-list","core-collections-imagegallery--with-long-labels","core-collections-imagegallery--with-medium-size","core-collections-imagegallery--with-multiple-selection","core-collections-imagegallery--with-reordering","core-collections-imagegallery--with-single-selection","core-collections-imagegallery--with-single-selection-and-deletion","core-collections-imagegallery--with-virtualization","core-collections-listbox--basic","core-collections-listbox--controlled-auto-scroll","core-collections-listbox--drag-and-drop-custom-preview","core-collections-listbox--drag-and-drop-grid","core-collections-listbox--drag-and-drop-horizontal","core-collections-listbox--drag-and-drop-multiple","core-collections-listbox--drag-and-drop-single","core-collections-listbox--dynamic-items","core-collections-listbox--with-custom-option-style","core-collections-listbox--with-customized-section-titles","core-collections-listbox--with-default-selected","core-collections-listbox--with-disabled-items","core-collections-listbox--with-focus-loop","core-collections-listbox--with-padded-section-titles","core-collections-listbox--with-section-titles","core-collections-listbox--with-sections","core-collections-listbox--with-selected","core-collections-menu--basic","core-collections-menu--controlled-open","core-collections-menu--disabled","core-collections-menu--long-menu","core-collections-menu--multiple-selection","core-collections-menu--section-level-selection","core-collections-menu--single-selection","core-collections-menu--with-custom-options","core-collections-menu--with-custom-trigger","core-collections-menu--with-disabled-keys","core-collections-menu--with-disabled-submenu","core-collections-menu--with-icons","core-collections-menu--with-long-labels","core-collections-menu--with-sections","core-collections-menu--with-selected-keys-controlled","core-collections-menu--with-submenu","core-collections-table--async-loading","core-collections-table--default","core-collections-table--disabled-rows","core-collections-table--drag-and-drop","core-collections-table--empty","core-collections-table--long-text-content","core-collections-table--multiple-selection","core-collections-table--row-action","core-collections-table--selection-with-row-action","core-collections-table--single-selection","core-collections-table--sorting","core-collections-table--virtualized","core-collections-table--with-tag-and-menu","core-collections-table--with-toolbar","core-collections-taggroup--basic","core-collections-taggroup--disabled","core-collections-taggroup--disabled-items","core-collections-taggroup--group-variants","core-collections-taggroup--multi-select","core-collections-taggroup--removable","core-collections-taggroup--single-select","core-collections-taggroup--small-variants","core-collections-taggroup--variants","core-collections-treeview--basic","core-collections-treeview--custom-row","core-collections-treeview--custom-row-drag-and-drop","core-collections-treeview--deeply-nested","core-collections-treeview--drag-and-drop","core-collections-treeview--empty-tree","core-collections-treeview--flat-tree","core-collections-treeview--handle-only-drag-and-drop","core-collections-treeview--interactive-fields-drag-and-drop","core-collections-treeview--long-labels","core-collections-treeview--single-item","core-collections-treeview--virtualized-drag-and-drop","core-collections-treeview--virtualized-with-actions","core-collections-treeview--virtualized-with-descriptions","core-collections-treeview--virtualized-with-expand-control","core-collections-treeview--virtualized-with-rename","core-collections-treeview--with-actions-at-end","core-collections-treeview--with-controlled-expanded-keys","core-collections-treeview--with-custom-render-icons","core-collections-treeview--with-custom-render-item-title","core-collections-treeview--with-default-expanded-keys","core-collections-treeview--with-description","core-collections-treeview--with-icons","core-collections-treeview--with-primary-action","core-collections-treeview--with-primary-and-secondary-action","core-collections-treeview--with-primary-secondary-and-description-action","core-collections-treeview--with-rename","core-collections-treeview--with-selected-items","core-collections-treeview--with-virtualization","core-collections-unsafe-listbox--basic","core-collections-unsafe-listbox--controlled-auto-scroll","core-collections-unsafe-listbox--drag-and-drop-custom-preview","core-collections-unsafe-listbox--drag-and-drop-grid","core-collections-unsafe-listbox--drag-and-drop-horizontal","core-collections-unsafe-listbox--drag-and-drop-multiple","core-collections-unsafe-listbox--drag-and-drop-single","core-collections-unsafe-listbox--dynamic-items","core-collections-unsafe-listbox--virtualized-horizontal","core-collections-unsafe-listbox--virtualized-scroll-into-view","core-collections-unsafe-listbox--virtualized-vertical","core-collections-unsafe-listbox--virtualized-with-section-separators","core-collections-unsafe-listbox--virtualized-with-sections","core-collections-unsafe-listbox--with-custom-option-style","core-collections-unsafe-listbox--with-customized-section-titles","core-collections-unsafe-listbox--with-default-selected","core-collections-unsafe-listbox--with-disabled-items","core-collections-unsafe-listbox--with-focus-loop","core-collections-unsafe-listbox--with-padded-section-titles","core-collections-unsafe-listbox--with-section-titles","core-collections-unsafe-listbox--with-sections","core-collections-unsafe-listbox--with-selected","core-collections-virtualizer--grid-layout-example","core-collections-virtualizer--list-layout-example","core-collections-virtualizer--rtl-image-gallery-preset-example","core-collections-virtualizer--tree-view-preset-example","core-content-avatar--basic","core-content-avatar--disabled","core-content-avatar--variants","core-content-avatar--with-image","core-content-avatar--with-initials","core-content-avatar--with-notification","core-content-code--basic","core-content-code--with-scroll","core-content-colorswatch--basic","core-content-colorswatch--disabled","core-content-colorswatch--full-transparency","core-content-colorswatch--indeterminate","core-content-colorswatch--interactive","core-content-colorswatch--none","core-content-colorswatch--variants","core-content-colorswatch--with-custom-label","core-content-colorswatch--with-tooltip","core-content-colorswatch--with-transparency","core-content-image--basic","core-content-image--contain","core-content-image--fallback","core-content-kbd--common-shortcuts","core-content-kbd--complex-shortcut","core-content-kbd--key-combination","core-content-kbd--key-combination-with-symbols","core-content-kbd--modifier-key","core-content-kbd--single-key","core-content-kbd--symbols-showcase","core-content-markdown--basic","core-content-markdown--with-caret","core-content-pointpicker--basic","core-content-pointpicker--disabled","core-content-pointpicker-pointpickercontent--custom-cursor","core-content-pointpicker-pointpickercontent--custom-cursor-without-default","core-content-pointpicker-pointpickercontent--default","core-content-pointpicker-pointpickercontent--multiple-point-pickers","core-content-pointpicker-pointpickercontent--points-within-radius","core-content-pointpicker-pointpickercontent--programmatic-focus","core-content-pointpicker-pointpickercontent--snap-to-point","core-content-pointpicker-pointpickercontent--trailing-element","core-content-pointpicker-pointpickercontent--without-grid-lines","core-content-pointpicker-pointpickerdisplay--with-custom-scale","core-content-pointpicker-pointpickerdisplay--with-description","core-content-pointpicker-pointpickerdisplay--with-floating-display","core-content-preview--disabled","core-content-preview--image-preview","core-content-preview--svg-preview","core-content-preview--text-preview","core-content-preview--variants","core-content-preview--without-delete-button","core-content-separator--basic","core-content-separator--secondary","core-content-separator--secondary-vertical","core-content-separator--vertical","core-content-statuscard--basic","core-content-statuscard--interactive","core-content-statuscard--long-content","core-content-statuscard--truncated-title","core-content-statuscard--variants","core-content-statuscard--with-custom-icon","core-content-statuscard--with-trailing-element","core-content-statuscard--without-description","core-content-tag--basic","core-content-tag--disabled","core-content-tag--disabled-removable","core-content-tag--inline-content","core-content-tag--long-text","core-content-tag--removable","core-content-tag--selected","core-content-tag--selected-with-icon","core-content-tag--small","core-content-tag--small-with-icon","core-content-tag--with-icon","core-content-text--basic","core-content-text--slots","core-content-text--variants","core-feedback-skeleton--circle","core-feedback-skeleton--composed-example","core-feedback-skeleton--custom-shape","core-feedback-skeleton--document-view-area","core-feedback-skeleton--rectangle","core-feedback-skeleton--text-line","core-forms-buttonselect--basic","core-forms-buttonselect--controlled","core-forms-buttonselect--controlled-button-selection","core-forms-buttonselect--default-button-selected-value","core-forms-buttonselect--default-select-selected-value","core-forms-buttonselect--disabled","core-forms-buttonselect--exclude-from-tab-order","core-forms-buttonselect--items-without-icons","core-forms-buttonselect--long-text-labels","core-forms-buttonselect--many-items","core-forms-buttonselect--variants","core-forms-buttonselect--with-action-behaviour","core-forms-buttonselect--with-button-disabled-key","core-forms-buttonselect--with-callbacks","core-forms-buttonselect--with-default-open","core-forms-buttonselect--with-disabled-keys","core-forms-buttonselect--with-disabled-keys-and-default-selected","core-forms-buttonselect--with-hidden-label","core-forms-buttonselect--with-individual-button-behaviour","core-forms-buttonselect--with-multiple-disabled-keys","core-forms-buttonselect--with-validation-error","core-forms-buttonselect--without-tooltip","core-forms-calendar--default","core-forms-calendar--disabled","core-forms-calendar--extra-small","core-forms-calendar--extra-small-no-title","core-forms-calendar--fixed-weeks","core-forms-calendar--international-calendar","core-forms-calendar--read-only","core-forms-calendar--select-month","core-forms-calendar--select-month-and-year","core-forms-calendar--select-month-and-year-extra-small","core-forms-calendar--select-month-and-year-with-title","core-forms-calendar--select-month-extra-small","core-forms-calendar--select-month-with-title","core-forms-calendar--unavailable-dates","core-forms-calendar--with-default-value","core-forms-calendar--with-min-max","core-forms-calendar--with-title","core-forms-checkbox--checked","core-forms-checkbox--indeterminate","core-forms-checkbox--primary","core-forms-checkbox--with-error","core-forms-checkbox--with-label-at-end","core-forms-checkbox--with-label-at-start","core-forms-colorinput--basic","core-forms-colorinput--color-presets-only","core-forms-colorinput--controlled","core-forms-colorinput--disabled","core-forms-colorinput--indeterminate","core-forms-colorinput--lazy-picker","core-forms-colorinput--lazy-picker-mobile","core-forms-colorinput--with-alpha","core-forms-colorinput--with-controlled-open","core-forms-colorinput--with-custom-trigger","core-forms-colorinput--with-default-open","core-forms-colorinput--with-default-value","core-forms-colorinput--with-label","core-forms-colorinput--with-label-at-start","core-forms-colorinput--with-removal","core-forms-colorinput--without-alpha","core-forms-colorinput--without-color-label","core-forms-colorinput--without-color-presets","core-forms-colorinput-iconcolorinput--compact","core-forms-colorinput-iconcolorinput--compact-disabled","core-forms-colorinput-iconcolorinput--compact-indeterminate","core-forms-colorinput-iconcolorinput--disabled","core-forms-colorinput-iconcolorinput--indeterminate","core-forms-colorinput-iconcolorinput--standard","core-forms-colorinput-iconcolorinput--without-tooltip","core-forms-colorswatchpicker--basic","core-forms-colorswatchpicker--controlled","core-forms-colorswatchpicker--default-value","core-forms-colorswatchpicker--disabled","core-forms-colorswatchpicker--with-icon","core-forms-colorswatchpicker--with-label","core-forms-colorswatchpicker--with-label-at-start","core-forms-combobox--basic","core-forms-combobox--disabled","core-forms-combobox--dynamic-collections","core-forms-combobox--ghost-variant","core-forms-combobox--items-with-icon","core-forms-combobox--read-only","core-forms-combobox--variants","core-forms-combobox--with-custom-filter","core-forms-combobox--with-custom-number-value","core-forms-combobox--with-custom-value","core-forms-combobox--with-description","core-forms-combobox--with-error-message","core-forms-combobox--with-focus-menu-trigger","core-forms-combobox--with-label-at-start","core-forms-combobox--with-manual-menu-trigger","core-forms-combobox--with-min-max-value","core-forms-combobox--with-render-option","core-forms-combobox--with-tooltip","core-forms-combobox--with-warning-message","core-forms-datefield--basic","core-forms-datefield--controlled","core-forms-datefield--default-value","core-forms-datefield--different-granularity","core-forms-datefield--disabled","core-forms-datefield--ghost-variant","core-forms-datefield--html-forms","core-forms-datefield--placeholder-value","core-forms-datefield--read-only","core-forms-datefield--variants","core-forms-datefield--with-calendar-icon","core-forms-datefield--with-calendar-picker","core-forms-datefield--with-calendar-picker-and-default-value","core-forms-datefield--with-calendar-picker-and-min-max","core-forms-datefield--with-calendar-picker-disabled","core-forms-datefield--with-calendar-picker-error","core-forms-datefield--with-calendar-picker-ghost","core-forms-datefield--with-calendar-picker-read-only","core-forms-datefield--with-error-message","core-forms-datefield--with-error-message-only","core-forms-datefield--with-label","core-forms-datefield--with-label-at-start","core-forms-datefield--with-min-and-max-value","core-forms-datefield--with-warning-message","core-forms-fileinput--basic","core-forms-fileinput--custom-labels","core-forms-fileinput--directory","core-forms-fileinput--disabled","core-forms-fileinput--label-position-start","core-forms-fileinput--multiple","core-forms-fileinput--variants","core-forms-fileinput--with-error","core-forms-fileinput--with-warning","core-forms-fileinput--without-label","core-forms-fileuploader--button-variant","core-forms-fileuploader--compact","core-forms-fileuploader--default","core-forms-fileuploader--disabled","core-forms-fileuploader--error-dropzone","core-forms-fileuploader--inline","core-forms-fileuploader--no-label","core-forms-fileuploader--samples-inside-disabled","core-forms-fileuploader--samples-inside-grid","core-forms-fileuploader--samples-outside","core-forms-fileuploader--variants","core-forms-imagedropzone--basic","core-forms-imagedropzone--controlled","core-forms-imagedropzone--disabled","core-forms-imagedropzone--variants","core-forms-imagedropzone--with-default-image","core-forms-imagedropzone--with-file-size-limit","core-forms-imagedropzone--with-file-type-restriction","core-forms-numberinput--basic","core-forms-numberinput--controlled","core-forms-numberinput--disabled","core-forms-numberinput--ghost-variant","core-forms-numberinput--read-only","core-forms-numberinput--variants","core-forms-numberinput--with-custom-step","core-forms-numberinput--with-description","core-forms-numberinput--with-error","core-forms-numberinput--with-error-and-error-message","core-forms-numberinput--with-label","core-forms-numberinput--with-label-at-start","core-forms-numberinput--with-min-and-max","core-forms-numberinput--without-stepper","core-forms-pagination--controlled","core-forms-pagination--disabled","core-forms-pagination--primary","core-forms-pagination--read-only","core-forms-pagination--variants","core-forms-pagination--with-custom-messages","core-forms-pagination--with-default-value","core-forms-pagination--with-large-numbers","core-forms-pagination--with-step","core-forms-pagination--without-actions","core-forms-radiogroup--basic","core-forms-radiogroup--controlled","core-forms-radiogroup--custom-render-option","core-forms-radiogroup--default-value","core-forms-radiogroup--disabled","core-forms-radiogroup--disabled-values","core-forms-radiogroup--horizontal","core-forms-radiogroup--read-only","core-forms-radiogroup--with-group-label","core-forms-radiogroup--with-group-label-at-start","core-forms-radiogroup--with-option-description","core-forms-radiogroup--with-option-label-at-start","core-forms-rangecalendar--default","core-forms-rangecalendar--disabled","core-forms-rangecalendar--extra-small","core-forms-rangecalendar--extra-small-no-title","core-forms-rangecalendar--fixed-weeks","core-forms-rangecalendar--international-calendar","core-forms-rangecalendar--read-only","core-forms-rangecalendar--select-month","core-forms-rangecalendar--select-month-and-year","core-forms-rangecalendar--select-month-and-year-with-title","core-forms-rangecalendar--select-month-with-title","core-forms-rangecalendar--unavailable-dates","core-forms-rangecalendar--with-default-value","core-forms-rangecalendar--with-min-max","core-forms-rangecalendar--with-title","core-forms-searchinput--basic","core-forms-searchinput--clear-button-focusable","core-forms-searchinput--disabled","core-forms-searchinput--variants","core-forms-select--basic","core-forms-select--controlled","core-forms-select--empty-items","core-forms-select--ghost","core-forms-select--long-labels","core-forms-select--long-list","core-forms-select--read-only","core-forms-select--scrollable","core-forms-select--with-autocomplete","core-forms-select--with-controlled-open","core-forms-select--with-custom-trigger","core-forms-select--with-default-open","core-forms-select--with-default-selected-item","core-forms-select--with-description","core-forms-select--with-disabled","core-forms-select--with-disabled-items","core-forms-select--with-error","core-forms-select--with-error-and-error-message","core-forms-select--with-label","core-forms-select--with-label-at-start","core-forms-select--with-section-headers","core-forms-select--with-sections","core-forms-select--with-virtualized-section-headers","core-forms-select--with-warning","core-forms-select--with-warning-and-warning-message","core-forms-select-iconselect--basic","core-forms-select-iconselect--disabled","core-forms-select-iconselect--read-only","core-forms-select-iconselect--with-default-open","core-forms-select-iconselect--with-error","core-forms-select-iconselect--with-warning","core-forms-select-iconselect--without-icon","core-forms-select-iconselect--without-tooltip","core-forms-select-multiselect--basic","core-forms-select-multiselect--controlled","core-forms-select-multiselect--ghost","core-forms-select-multiselect--hide-clear","core-forms-select-multiselect--hide-select-all","core-forms-select-multiselect--hide-select-all-and-clear","core-forms-select-multiselect--long-labels-as-tags","core-forms-select-multiselect--long-list","core-forms-select-multiselect--max-count-1","core-forms-select-multiselect--max-count-3","core-forms-select-multiselect--read-only","core-forms-select-multiselect--read-only-with-tags-open","core-forms-select-multiselect--scrollable","core-forms-select-multiselect--with-autocomplete","core-forms-select-multiselect--with-controlled-open","core-forms-select-multiselect--with-custom-trigger","core-forms-select-multiselect--with-default-open","core-forms-select-multiselect--with-default-selected-item","core-forms-select-multiselect--with-description","core-forms-select-multiselect--with-disabled","core-forms-select-multiselect--with-disabled-items","core-forms-select-multiselect--with-error","core-forms-select-multiselect--with-error-and-error-message","core-forms-select-multiselect--with-error-and-tags","core-forms-select-multiselect--with-label","core-forms-select-multiselect--with-label-at-start","core-forms-select-multiselect--with-sections","core-forms-select-multiselect--with-warning","core-forms-select-multiselect--with-warning-and-warning-message","core-forms-slider--basic","core-forms-slider--controlled","core-forms-slider--disabled","core-forms-slider--read-only","core-forms-slider--read-only-with-number-input","core-forms-slider--with-description","core-forms-slider--with-label","core-forms-slider--with-label-and-number-input","core-forms-slider--with-min-and-max","core-forms-slider--with-number-input","core-forms-slider--with-step","core-forms-slider-iconslider--basic","core-forms-slider-iconslider--disabled","core-forms-slider-iconslider--with-number-input","core-forms-slider-iconslider--without-tooltip","core-forms-switch--basic","core-forms-switch--disabled","core-forms-switch--selected","core-forms-switch--selected-disabled","core-forms-switch--with-description","core-forms-switch--with-description-disabled","core-forms-switch--with-description-in-left-and-status","core-forms-switch--with-description-in-left-long-label","core-forms-switch--with-description-on-top","core-forms-switch--with-label","core-forms-switch--with-label-and-status","core-forms-switch--with-label-in-left-and-status","core-forms-switch--with-label-in-left-and-status-disabled","core-forms-taggedpagination--basic","core-forms-taggedpagination--disabled","core-forms-taggedpagination--disabled-steppers","core-forms-taggedpagination--read-only","core-forms-taggedpagination--variant","core-forms-taggedpagination--with-page-label","core-forms-textinput--basic","core-forms-textinput--controlled","core-forms-textinput--disabled","core-forms-textinput--focusing-the-input","core-forms-textinput--ghost-variant","core-forms-textinput--html-forms","core-forms-textinput--multiline","core-forms-textinput--multiline-variants","core-forms-textinput--multiline-with-rows","core-forms-textinput--read-only","core-forms-textinput--variants","core-forms-textinput--with-description","core-forms-textinput--with-error-message","core-forms-textinput--with-label","core-forms-textinput--with-label-at-start","core-forms-textinput--with-warning-message","core-forms-timefield--basic","core-forms-timefield--controlled","core-forms-timefield--default-value","core-forms-timefield--disabled","core-forms-timefield--ghost-variant","core-forms-timefield--html-forms","core-forms-timefield--placeholder-value","core-forms-timefield--read-only","core-forms-timefield--variants","core-forms-timefield--with-error-message","core-forms-timefield--with-error-message-only","core-forms-timefield--with-label","core-forms-timefield--with-label-at-start","core-forms-timefield--with-min-and-max-value","core-forms-timefield--with-warning-message","core-media-audioplayer--basic","core-media-audioplayer--small","core-miscellaneous-editor--basic","core-miscellaneous-editor--headless-clipboard-hooks","core-miscellaneous-editor--headless-custom","core-miscellaneous-editor--headless-document-model","core-miscellaneous-editor--headless-max-length","core-miscellaneous-editor--headless-paragraphs","core-miscellaneous-editor--headless-styles","core-miscellaneous-editor-plain--auto-focus","core-miscellaneous-editor-plain--auto-focus-at-end","core-miscellaneous-editor-plain--auto-focus-at-start","core-miscellaneous-editor-plain--clear-on-cancel","core-miscellaneous-editor-plain--clear-on-save","core-miscellaneous-editor-plain--controlled","core-miscellaneous-editor-plain--custom-submit-icon","core-miscellaneous-editor-plain--default-save-disabled","core-miscellaneous-editor-plain--disabled","core-miscellaneous-editor-plain--minimal","core-miscellaneous-editor-plain--minimal-disabled","core-miscellaneous-editor-plain--minimal-multiline","core-miscellaneous-editor-plain--minimal-save-disabled","core-miscellaneous-editor-plain--not-inline","core-miscellaneous-editor-plain--save-on-enter","core-miscellaneous-editor-plain--variants","core-miscellaneous-editor-plain--with-cancel","core-miscellaneous-editor-plain--with-dynamic-caret-position","core-miscellaneous-editor-rich-text--auto-focus","core-miscellaneous-editor-rich-text--auto-focus-at-end","core-miscellaneous-editor-rich-text--clear-on-cancel","core-miscellaneous-editor-rich-text--clear-on-save","core-miscellaneous-editor-rich-text--controlled","core-miscellaneous-editor-rich-text--default","core-miscellaneous-editor-rich-text--disabled","core-miscellaneous-editor-rich-text--long-content","core-miscellaneous-editor-rich-text--mentions","core-miscellaneous-editor-rich-text--mentions-max-suggestions","core-miscellaneous-editor-rich-text--not-inline","core-miscellaneous-editor-rich-text--save-disabled","core-miscellaneous-editor-rich-text--save-on-enter","core-miscellaneous-editor-rich-text--variants","core-miscellaneous-editor-rich-text--with-cancel","core-miscellaneous-editor-rich-text--with-custom-footer-buttons","core-miscellaneous-editor-rich-text--with-placeholder","core-miscellaneous-freehandcanvas--basic","core-miscellaneous-freehandcanvas--clear-button","core-miscellaneous-freehandcanvas--controlled","core-miscellaneous-freehandcanvas--default-value","core-miscellaneous-freehandcanvas--disabled","core-miscellaneous-freehandcanvas--history-enabled","core-miscellaneous-freehandcanvas--label","core-miscellaneous-freehandcanvas--streamlining","core-miscellaneous-icon--basic","core-miscellaneous-toolbar--basic","core-miscellaneous-toolbar--collapsible","core-miscellaneous-toolbar--vertical","core-miscellaneous-toolbar--with-inputs","core-miscellaneous-toolbar--with-over-flow","core-miscellaneous-toolbar--with-tabbing-within","core-miscellaneous-toolbar--with-tooltip","core-navigation-accordion--basic","core-navigation-accordion--controlled","core-navigation-accordion--default-expanded-keys","core-navigation-accordion--disabled","core-navigation-accordion--single-expansion","core-navigation-accordion-accordionitem--force-mount","core-navigation-accordion-accordionitem--show-actions-on-trigger-only","core-navigation-accordion-accordionitem--with-buttons","core-navigation-accordion-accordionitem--with-sub-labels","core-navigation-accordion-accordionitem--with-tabbable-content","core-navigation-breadcrumbs--basic","core-navigation-breadcrumbs--collapsed","core-navigation-breadcrumbs--custom-separator","core-navigation-breadcrumbs--disabled","core-navigation-breadcrumbs--variants","core-navigation-breadcrumbs--with-icons","core-navigation-breadcrumbs--with-select","core-navigation-disclosure--basic","core-navigation-disclosure--controlled","core-navigation-disclosure--truncated-title","core-navigation-disclosure--variants","core-navigation-disclosure--with-custom-icon","core-navigation-disclosure--with-interactive-content","core-navigation-disclosure--with-long-content","core-navigation-disclosure--without-description","core-navigation-link--basic","core-navigation-link--client-side-action","core-navigation-link--variants","core-navigation-stepper--all-complete","core-navigation-stepper--all-states","core-navigation-stepper--condensed","core-navigation-stepper--controlled","core-navigation-stepper--default","core-navigation-stepper--expanded-without-descriptions","core-navigation-stepper--frontier-ahead-of-selection","core-navigation-stepper--indicator-only","core-navigation-stepper--indicator-only-expanded","core-navigation-stepper--is-disabled","core-navigation-stepper--long-title-and-description","core-navigation-stepper--mixed-indicator-and-titled-items","core-navigation-stepper--per-item-aria-label-overrides-title","core-navigation-stepper--single-item","core-navigation-stepper--size-small-condensed","core-navigation-stepper--size-small-expanded","core-navigation-stepper--two-steps","core-navigation-stepper--with-disabled-completed-step","core-navigation-stepper--with-disabled-step","core-navigation-tabs--basic","core-navigation-tabs--controlled","core-navigation-tabs--ghost","core-navigation-tabs--with-action-button","core-navigation-tabs--with-close-button","core-navigation-tabs--with-default-selected","core-navigation-tabs--with-disabled","core-navigation-tabs--with-disabled-and-close-button","core-navigation-tabs--with-focusable-content","core-navigation-tabs--with-specific-disabled","core-navigation-tabs-tabitem--with-icon","core-overlays-alertdialog--auto-focus-cancel-button","core-overlays-alertdialog--basic","core-overlays-alertdialog--custom-focused-button","core-overlays-alertdialog--default-open","core-overlays-alertdialog--long-content","core-overlays-alertdialog--only-cancel-button","core-overlays-alertdialog--only-primary-action","core-overlays-alertdialog--primary-action-disabled","core-overlays-alertdialog--separate-close-handler","core-overlays-alertdialog--with-text-input","core-overlays-alertdialog--with-title-only","core-overlays-alertdialog--without-close-button","core-overlays-alertdialog--without-icon","core-overlays-alertdialog--without-message-and-actions","core-overlays-dialog--basic","core-overlays-dialog--default-open","core-overlays-dialog--different-sizes","core-overlays-dialog--ghost","core-overlays-drawer--basic","core-overlays-drawer--with-action","core-overlays-inlinetoolbar--basic","core-overlays-inlinetoolbar--controlled","core-overlays-inlinetoolbar--disabled","core-overlays-inlinetoolbar--disabled-keys","core-overlays-inlinetoolbar--with-interactive-element","core-overlays-inlinetoolbar--with-scroll","core-overlays-modal--basic","core-overlays-modal--controlled","core-overlays-modal--default-open","core-overlays-modal-modalcontent--disabled-animation","core-overlays-modal-modalcontent--drawer-mobile","core-overlays-modal-modalcontent--drawer-mobile-with-nested-popover","core-overlays-modal-modalcontent--form-controls","core-overlays-modal-modalcontent--long-content","core-overlays-modal-modalcontent--not-dismissable","core-overlays-modal-modalcontent--uncontrolled-interaction-outside","core-overlays-modal-modalcontent--with-disabled-focus-management","core-overlays-modal-modalcontent--with-inert","core-overlays-popover--basic","core-overlays-popover--event-leak-fix","core-overlays-popover--with-arrow","core-overlays-popover--with-boundary-element","core-overlays-popover--with-custom-target","core-overlays-popover--with-dynamic-trigger-width","core-overlays-popover--with-no-boundary","core-overlays-popover--with-scrollable-content","core-overlays-popover--with-scrollable-content-non-modal","core-overlays-popover--with-scrollable-viewport","core-overlays-popover--with-tooltip","core-overlays-popover-popovercontent--basic","core-overlays-popover-popovercontent--contained-focus","core-overlays-popover-popovercontent--default-open-with-arrow","core-overlays-popover-popovercontent--disable-animation","core-overlays-popover-popovercontent--manual-repositioning","core-overlays-popover-popovercontent--nested-scrollable-containers","core-overlays-popover-popovercontent--scroll-repositioning","core-overlays-popover-popovercontent--with-boundary-axis","core-overlays-popover-popovercontent--with-horizontal-boundary-behavior","core-overlays-popover-popovertrigger--basic","core-overlays-popover-popovertrigger--function-children","core-overlays-popover-popovertrigger--with-updated-position","core-overlays-tooltip--basic","core-overlays-tooltip--controlled-open","core-overlays-tooltip--disabled","core-overlays-tooltip--focus-trigger","core-overlays-tooltip--no-text","core-overlays-tooltip--placement","core-overlays-tooltip--variants","core-overlays-tooltip--variants-size","core-overlays-tooltip--with-cross-offset","core-overlays-tooltip--with-focusable","core-overlays-tooltip--with-offset","core-overlays-tooltip--with-on-open-change","core-status-inlinealert--basic","core-status-inlinealert--compact","core-status-inlinealert--compact-with-action","core-status-inlinealert--compact-with-action-and-close","core-status-inlinealert--multi-line","core-status-inlinealert--multi-line-with-action","core-status-inlinealert--multi-line-with-action-and-close","core-status-inlinealert--sizes","core-status-inlinealert--variants","core-status-inlinealert--with-action","core-status-inlinealert--with-action-and-close","core-status-progressbar--basic","core-status-progressbar--variants","core-status-progressbar--with-custom-number-formatter","core-status-progressbar--with-custom-value-label","core-status-progressbar--with-error","core-status-progressbar--with-max-value","core-status-progressbar--with-min-and-max-value","core-status-progressbar--with-min-value","core-status-progressbar--with-no-description","core-status-progressbar--with-no-label","core-status-progressbar--with-show-value","core-status-progressspinner--error","core-status-progressspinner--primary","core-status-progressspinner--success","core-status-progressspinner--variants","core-status-progressspinner--without-label","core-status-toast--basic","core-status-toast--timeout","core-status-toast--variants-with-action","core-status-toast--variants-without-action","core-status-toast--with-action","core-utilities-actionable--basic","core-utilities-actionable--disabled","core-utilities-actionable--with-complex-content","core-utilities-actionable--with-div","core-utilities-actionable--with-dynamic-button-styling","core-utilities-actionable--with-dynamic-child-styling","core-utilities-box--basic","core-utilities-box--element-type","core-utilities-box--flex-layout","core-utilities-box--media-queries","core-utilities-box--nested-boxes","core-utilities-dateformat--basic","core-utilities-dateformat--time-only","core-utilities-dateformat--time-only-with-time-zone","core-utilities-dateformat--time-zone-24-hour","core-utilities-dateformat--with-date-and-time","core-utilities-deviceprovider--always-desktop","core-utilities-deviceprovider--always-mobile","core-utilities-deviceprovider--basic","core-utilities-deviceprovider--custom-breakpoints","core-utilities-frameprovider--always-contained","core-utilities-frameprovider--basic","core-utilities-frameprovider--custom-portal-container","core-utilities-frameprovider--inside-shadow-root","core-utilities-frameprovider--nested-containers","core-utilities-frameprovider--never-contained","core-utilities-frameprovider--popover-with-frame-boundary","core-utilities-frameprovider--portal-container-outside-container","core-utilities-frameprovider--with-interactive-elements-outside-of-container","core-utilities-group--basic","core-utilities-i18nprovider--string-format","core-utilities-messageformat--basic","core-utilities-numberformat--basic","core-utilities-numberformat--currency","core-utilities-numberformat--currency-with-fraction-digits","core-utilities-numberformat--currency-with-fraction-digits-and-currency-display","core-utilities-numberformat--percent","core-utilities-numberformat--percent-with-fraction-digits","core-utilities-panel--basic","core-utilities-panel--collapsible","core-utilities-panel--conditional","core-utilities-panel--controlled","core-utilities-panel--disabled-handle","core-utilities-panel--max-size","core-utilities-panel--multiple","core-utilities-panel--nested","core-utilities-panel--persistent","core-utilities-panel--vertical","core-utilities-portal--basic","core-utilities-themeprovider--basic","json-render-examples--dashboard","json-render-examples--data-table","json-render-examples--login-form","json-render-examples--settings-panel"];var h={version:"3.8.0"};var b=`
40554
41196
  # Baseline UI MCP Server Guidelines
40555
41197
 
40556
41198
  This MCP server provides AI assistants with structured access to Baseline UI's comprehensive component documentation, icon library, theming resources, and design guidelines.
@@ -40601,7 +41243,7 @@ A component can be imported using:
40601
41243
  \`\`\`tsx
40602
41244
  import { ComponentName } from "@baseline-ui/core";
40603
41245
  \`\`\`
40604
- `,c=`
41246
+ `,d=`
40605
41247
  A complete icon library organized by size with import instructions. The icons are organized by size and can be imported using the import statement provided.
40606
41248
 
40607
41249
  An icon can be imported using:
@@ -40657,7 +41299,7 @@ import { ComponentName } from "@baseline-ui/core";
40657
41299
  Generate a live demo URL for a Baseline UI story. Use a story ID from the Storybook index; the component info tool lists them for each component. The response is the URL, or an error result with suggestions when the story id is unknown. You can use this URL to understand the structure of the component and how to customize it.
40658
41300
  `,y=`
40659
41301
  Get the Figma URL for a given component. The response is the URL, or an error result when the component has no linked Figma design. You can use this URL to understand the structure of the component and how it looks. The actual component's HTML structure might be slightly different from the Figma design but the overall structure and design should be the same including the design tokens.
40660
- `,d=`
41302
+ `,c=`
40661
41303
  Best practices and guidelines for using Baseline UI components, styling, and design tokens. READ THIS BEFORE DOING ANYTHING.
40662
41304
 
40663
41305
  ## Usage
@@ -40705,7 +41347,7 @@ Use this tool to:
40705
41347
  - Consult **list_components** to find the right component for your needs
40706
41348
  - Reference **theming** for custom design systems
40707
41349
  - Check **styling** for CSS and design token guidance
40708
- `;var I=`# List of available components in Baseline UI design system
41350
+ `;var k=`# List of available components in Baseline UI design system
40709
41351
  | Name | Description | Similar To |
40710
41352
  | --- | --- | --- |
40711
41353
  ${Object.entries(o).sort(([n],[e])=>n.localeCompare(e)).map(([n,{description:e,similarTo:t}])=>`|${n}|${e}|${t?.join(", ")||""}|`).join(`
@@ -40715,5 +41357,5 @@ ${Object.entries(o).sort(([n],[e])=>n.localeCompare(e)).map(([n,{description:e,s
40715
41357
  ${e.map(t=>"- "+t).join(`
40716
41358
  `)}`).join(`
40717
41359
 
40718
- `),D=new Set(r);function B(n){let e=n.toLowerCase();if(!e)return [];let t=r.filter(s=>s.includes(e));if(t.length>0)return t.slice(0,5);let a=e.split("--")[0];return a?r.filter(s=>s.includes(a)).slice(0,5):[]}function j(){let n=new McpServer({name:"baseline-ui",version:h.version});return n.registerResource("list_components","resource://baseline-ui/list_components.md",{description:l,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:I}]})),n.registerResource("list_icons","resource://baseline-ui/list_icons.md",{description:c,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:P}]})),n.registerResource("getting_started","resource://baseline-ui/getting_started.md",{description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.gettingStarted}]})),n.registerResource("nutrient_web_viewer_theming","resource://baseline-ui/nutrient_web_viewer_theming.md",{description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.nutrientWebViewerTheming}]})),n.registerResource("theming","resource://baseline-ui/theming.md",{description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.theming}]})),n.registerResource("internationalization","resource://baseline-ui/internationalization.md",{description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.internationalization}]})),n.registerResource("styling","resource://baseline-ui/styling.md",{description:p,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.styling}]})),n.registerResource("guidelines","resource://baseline-ui/guidelines.md",{description:d,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:b}]})),n.registerTool("get_component_info",{title:"Get component info",description:g,inputSchema:{componentName:z.enum(Object.keys(o))}},({componentName:e})=>({content:[{type:"text",text:JSON.stringify(Object.fromEntries(Object.entries(o[e]).filter(([t])=>!["description","similarTo","figmaUrl"].includes(t))),null,2)}]})),n.registerTool("get_story_url",{title:"Get story demo URL",description:f,inputSchema:{storyId:z.string()}},({storyId:e})=>{let t=e.toLowerCase();if(!D.has(t)){let a=B(e);return {isError:true,content:[{type:"text",text:`Unknown story id "${e}".`+(a.length>0?` Did you mean: ${a.join(", ")}?`:"")+" Story ids come from the Storybook index; get_component_info lists them under `stories.usage[].id`."}]}}return {content:[{type:"text",text:`https://nutrient.io/baseline-ui/iframe.html?id=${t}`}]}}),n.registerTool("get_figma_url",{title:"Get Figma URL",description:y,inputSchema:{componentName:z.enum(Object.keys(o))}},({componentName:e})=>{let{figmaUrl:t}=o[e];return t?{content:[{type:"text",text:t}]}:{isError:true,content:[{type:"text",text:`No Figma URL is available for ${e}.`}]}}),n.registerTool("list_available_resources",{title:"List Available Resources",description:v,inputSchema:{}},()=>({content:[{type:"text",text:JSON.stringify([{name:"list_components",uri:"resource://baseline-ui/list_components.md",description:l,mimeType:"text/markdown"},{name:"list_icons",uri:"resource://baseline-ui/list_icons.md",description:c,mimeType:"text/markdown"},{name:"getting_started",uri:"resource://baseline-ui/getting_started.md",description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},{name:"nutrient_web_viewer_theming",uri:"resource://baseline-ui/nutrient_web_viewer_theming.md",description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},{name:"theming",uri:"resource://baseline-ui/theming.md",description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},{name:"internationalization",uri:"resource://baseline-ui/internationalization.md",description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},{name:"styling",uri:"resource://baseline-ui/styling.md",description:p,mimeType:"text/markdown"},{name:"guidelines",uri:"resource://baseline-ui/guidelines.md",description:d,mimeType:"text/markdown"}],null,2)}]})),n}
41360
+ `),D=new Set(r);function B(n){let e=n.toLowerCase();if(!e)return [];let t=r.filter(s=>s.includes(e));if(t.length>0)return t.slice(0,5);let a=e.split("--")[0];return a?r.filter(s=>s.includes(a)).slice(0,5):[]}function j(){let n=new McpServer({name:"baseline-ui",version:h.version});return n.registerResource("list_components","resource://baseline-ui/list_components.md",{description:l,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:k}]})),n.registerResource("list_icons","resource://baseline-ui/list_icons.md",{description:d,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:P}]})),n.registerResource("getting_started","resource://baseline-ui/getting_started.md",{description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.gettingStarted}]})),n.registerResource("nutrient_web_viewer_theming","resource://baseline-ui/nutrient_web_viewer_theming.md",{description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.nutrientWebViewerTheming}]})),n.registerResource("theming","resource://baseline-ui/theming.md",{description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.theming}]})),n.registerResource("internationalization","resource://baseline-ui/internationalization.md",{description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.internationalization}]})),n.registerResource("styling","resource://baseline-ui/styling.md",{description:p,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:i.styling}]})),n.registerResource("guidelines","resource://baseline-ui/guidelines.md",{description:c,mimeType:"text/markdown"},e=>({contents:[{uri:e.href,mimeType:"text/markdown",text:b}]})),n.registerTool("get_component_info",{title:"Get component info",description:g,inputSchema:{componentName:z.enum(Object.keys(o))}},({componentName:e})=>({content:[{type:"text",text:JSON.stringify(Object.fromEntries(Object.entries(o[e]).filter(([t])=>!["description","similarTo","figmaUrl"].includes(t))),null,2)}]})),n.registerTool("get_story_url",{title:"Get story demo URL",description:f,inputSchema:{storyId:z.string()}},({storyId:e})=>{let t=e.toLowerCase();if(!D.has(t)){let a=B(e);return {isError:true,content:[{type:"text",text:`Unknown story id "${e}".`+(a.length>0?` Did you mean: ${a.join(", ")}?`:"")+" Story ids come from the Storybook index; get_component_info lists them under `stories.usage[].id`."}]}}return {content:[{type:"text",text:`https://nutrient.io/baseline-ui/iframe.html?id=${t}`}]}}),n.registerTool("get_figma_url",{title:"Get Figma URL",description:y,inputSchema:{componentName:z.enum(Object.keys(o))}},({componentName:e})=>{let{figmaUrl:t}=o[e];return t?{content:[{type:"text",text:t}]}:{isError:true,content:[{type:"text",text:`No Figma URL is available for ${e}.`}]}}),n.registerTool("list_available_resources",{title:"List Available Resources",description:v,inputSchema:{}},()=>({content:[{type:"text",text:JSON.stringify([{name:"list_components",uri:"resource://baseline-ui/list_components.md",description:l,mimeType:"text/markdown"},{name:"list_icons",uri:"resource://baseline-ui/list_icons.md",description:d,mimeType:"text/markdown"},{name:"getting_started",uri:"resource://baseline-ui/getting_started.md",description:"Quick start guide for integrating Baseline UI into new projects",mimeType:"text/markdown"},{name:"nutrient_web_viewer_theming",uri:"resource://baseline-ui/nutrient_web_viewer_theming.md",description:"Specialized theming guide for customizing Baseline UI in Nutrient Web Viewer. This is not applicable if you are not theming the Nutrient Web Viewer SDK.",mimeType:"text/markdown"},{name:"theming",uri:"resource://baseline-ui/theming.md",description:"Comprehensive guide for implementing custom themes and color schemes in Baseline UI",mimeType:"text/markdown"},{name:"internationalization",uri:"resource://baseline-ui/internationalization.md",description:"Guide for implementing multi-language support and localization in Baseline UI",mimeType:"text/markdown"},{name:"styling",uri:"resource://baseline-ui/styling.md",description:p,mimeType:"text/markdown"},{name:"guidelines",uri:"resource://baseline-ui/guidelines.md",description:c,mimeType:"text/markdown"}],null,2)}]})),n}
40719
41361
  export{j as a};