@vibe/core 4.3.0 → 4.4.0-alpha-26200.0

package/dist/components/Dropdown/Dropdown.types.d.ts

@@ -15,6 +15,18 @@ interface MultiSelectSpecifics<Item extends BaseItemData<Record<string, unknown>
      * Callback fired when an option is removed in multi-select mode. Only available when multi is true.
      */
     onOptionRemove?: (option: Item) => void;
+    /**
+     * If true, selected items are shown as a comma-separated text summary inside the input instead of chips.
+     * Satisfies WCAG 4.1.2 by exposing the combobox value to assistive technologies on focus.
+     * Only applies when searchable=true.
+     */
+    textInput?: boolean;
+    /**
+     * If true, chips are always visible and support keyboard navigation: pressing Backspace or Left arrow
+     * from the input moves focus to the last chip; Left/Right navigates between chips; Delete/Backspace
+     * removes the focused chip. Only applies when searchable=true.
+     */
+    interactiveChips?: boolean;
     /**
      * The function to call to render the selected value on single select mode.
      */

package/dist/components/Dropdown/components/MultiSelectedValues/MultiSelectedValues.d.ts

@@ -7,6 +7,10 @@ type MultiSelectedValuesProps<Item> = {
     disabled?: boolean;
     readOnly?: boolean;
     minVisibleCount?: number;
+    /** Extra props (tabIndex, onKeyDown, etc.) to spread on each visible chip container. */
+    getChipContainerProps?: (item: Item, index: number) => Record<string, any>;
+    /** Ref forwarded to the +N overflow Chips element, for external keyboard focus management. */
+    badgeRef?: React.Ref<HTMLDivElement>;
 };
-declare function MultiSelectedValues<Item extends BaseItemData<Record<string, unknown>>>({ selectedItems, onRemove, renderInput, disabled, readOnly, minVisibleCount }: MultiSelectedValuesProps<Item>): React.JSX.Element;
+declare function MultiSelectedValues<Item extends BaseItemData<Record<string, unknown>>>({ selectedItems, onRemove, renderInput, disabled, readOnly, minVisibleCount, getChipContainerProps, badgeRef }: MultiSelectedValuesProps<Item>): React.JSX.Element;
 export default MultiSelectedValues;

package/dist/components/Dropdown/components/Trigger/DropdownInput.d.ts

@@ -1,6 +1,8 @@
-import React from "react";
-declare const DropdownInput: ({ inputSize, fullWidth }: {
+import React, { type RefObject } from "react";
+declare const DropdownInput: ({ inputSize, fullWidth, onKeyDown: externalKeyDown, inputRef: externalInputRef }: {
     inputSize?: "small" | "medium" | "large";
     fullWidth?: boolean;
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+    inputRef?: RefObject<HTMLInputElement>;
 }) => React.JSX.Element;
 export default DropdownInput;

package/dist/components/Dropdown/context/DropdownContext.types.d.ts

@@ -29,6 +29,12 @@ export interface DropdownContextProps<Item extends BaseItemData<Record<string, u
     contextOnOptionRemove?: (option: Item) => void;
     addSelectedItem?: (item: Item) => void;
     removeSelectedItem?: (item: Item) => void;
+    getSelectedItemProps?: (options: {
+        selectedItem: any;
+        index: number;
+    }) => Record<string, any>;
     isFocused?: boolean;
+    textInput?: boolean;
+    interactiveChips?: boolean;
 }
 export {};

package/dist/components/Dropdown/hooks/useDropdownMultiCombobox.d.ts

@@ -1,6 +1,6 @@
 import { type DropdownGroupOption } from "../Dropdown.types";
 import { type BaseItemData } from "../../BaseItem";
-declare function useDropdownMultiCombobox<T extends BaseItemData<Record<string, unknown>>>(options: DropdownGroupOption<T>, selectedItems: T[], setSelectedItems: (items: T[]) => void, isMenuOpen: boolean, autoFocus?: boolean, defaultValue?: T[], value?: T[], inputValueProp?: string, onChange?: (options: T[]) => void, onInputChange?: (value: string | null) => void, onMenuOpen?: () => void, onMenuClose?: () => void, onOptionSelect?: (option: T) => void, filterOption?: (option: T, inputValue: string) => boolean, showSelectedOptions?: boolean, id?: string): {
+declare function useDropdownMultiCombobox<T extends BaseItemData<Record<string, unknown>>>(options: DropdownGroupOption<T>, selectedItems: T[], setSelectedItems: (items: T[]) => void, isMenuOpen: boolean, autoFocus?: boolean, defaultValue?: T[], value?: T[], inputValueProp?: string, onChange?: (options: T[]) => void, onInputChange?: (value: string | null) => void, onMenuOpen?: () => void, onMenuClose?: () => void, onOptionSelect?: (option: T) => void, filterOption?: (option: T, inputValue: string) => boolean, showSelectedOptions?: boolean, id?: string, onOptionRemove?: (option: T) => void, textInput?: boolean, interactiveChips?: boolean): {
     isOpen: boolean;
     inputValue: string;
     highlightedIndex: number;

package/dist/metadata/components.json

@@ -6320,6 +6320,24 @@
           "name": "(option: Item) => void"
         }
       },
+      "textInput": {
+        "defaultValue": null,
+        "description": "If true, selected items are shown as a comma-separated text summary inside the input instead of chips.\nSatisfies WCAG 4.1.2 by exposing the combobox value to assistive technologies on focus.\nOnly applies when searchable=true.",
+        "name": "textInput",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "interactiveChips": {
+        "defaultValue": null,
+        "description": "If true, chips are always visible and support keyboard navigation: pressing Backspace or Left arrow\nfrom the input moves focus to the last chip; Left/Right navigates between chips; Delete/Backspace\nremoves the focused chip. Only applies when searchable=true.",
+        "name": "interactiveChips",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "valueRenderer": {
         "defaultValue": null,
         "description": "The function to call to render the selected value on single select mode.",

package/dist/metadata/examples/DropdownMultiSelectA11y.md

@@ -0,0 +1,50 @@
+# Storybook Code Examples
+
+## TextInputBasic
+
+```tsx
+const options = useMemo(() => [{
+  value: "1",
+  label: "Chip one"
+}, {
+  value: "2",
+  label: "Chip two"
+}, {
+  value: "3",
+  label: "Chip three"
+}, {
+  value: "4",
+  label: "Chip four"
+}], []);
+return <div style={{
+  width: "350px",
+  marginBottom: "50px"
+}}>
+        <Dropdown placeholder="Select items" options={options} multi searchable textInput clearAriaLabel="Clear" />
+      </div>;
+```
+
+## InteractiveChipsBasic
+
+```tsx
+const options = useMemo(() => [{
+  value: "1",
+  label: "Chip one"
+}, {
+  value: "2",
+  label: "Chip two"
+}, {
+  value: "3",
+  label: "Chip three"
+}, {
+  value: "4",
+  label: "Chip four"
+}], []);
+return <div style={{
+  width: "350px",
+  marginBottom: "50px"
+}}>
+        <Dropdown placeholder="Select items" options={options} multi searchable interactiveChips clearAriaLabel="Clear" />
+      </div>;
+```
+

package/dist/metadata/examples/DropdownSearchableSingleSelect.md

@@ -0,0 +1,379 @@
+# Storybook Code Examples
+
+## Overview
+
+```tsx
+const dropdownTemplate = (props: BaseDropdownProps<any>) => {
+  const options = useMemo(() => basicOptions, []);
+  return <div style={{
+    height: "260px",
+    width: "300px"
+  }}>
+      <Dropdown options={options} searchable label="Team" helperText="Search and pick a team" {...props} />
+    </div>;
+}
+```
+
+## Sizes
+
+```tsx
+const options = useMemo(() => basicOptions, []);
+return <Flex gap="medium" align="start">
+        <div style={{
+    width: "300px"
+  }}>
+          <Dropdown id="searchable-single-large" options={options} searchable size="large" label="Large" placeholder="Search a team" clearAriaLabel="Clear" />
+        </div>
+        <div style={{
+    width: "300px"
+  }}>
+          <Dropdown id="searchable-single-medium" options={options} searchable size="medium" label="Medium" placeholder="Search a team" clearAriaLabel="Clear" />
+        </div>
+        <div style={{
+    width: "300px"
+  }}>
+          <Dropdown id="searchable-single-small" options={options} searchable size="small" label="Small" placeholder="Search a team" clearAriaLabel="Clear" />
+        </div>
+      </Flex>;
+```
+
+## States
+
+```tsx
+const options = useMemo(() => basicOptions, []);
+return <Flex gap="large" align="start">
+        <Flex direction="column" gap="medium">
+          <div style={{
+      width: "300px"
+    }}>
+            <Dropdown id="searchable-single-default" options={options} searchable label="Default" placeholder="Search a team" clearAriaLabel="Clear" />
+          </div>
+          <div style={{
+      width: "300px"
+    }}>
+            <Dropdown id="searchable-single-disabled" options={options} searchable label="Disabled" placeholder="Search a team" disabled clearAriaLabel="Clear" />
+          </div>
+        </Flex>
+        <Flex direction="column" gap="medium">
+          <div style={{
+      width: "300px"
+    }}>
+            <Dropdown id="searchable-single-error" options={options} searchable label="Error" placeholder="Search a team" error clearAriaLabel="Clear" />
+          </div>
+          <div style={{
+      width: "300px"
+    }}>
+            <Dropdown id="searchable-single-readonly" options={options} searchable label="Read only" placeholder="Search a team" defaultValue={options[0]} readOnly clearAriaLabel="Clear" />
+          </div>
+        </Flex>
+      </Flex>;
+```
+
+## WithDefaultValue
+
+```tsx
+const options = useMemo(() => basicOptions, []);
+return <div style={{
+  height: "260px",
+  width: "300px"
+}}>
+        <Text type="text2" color="secondary">
+          The selected value lives inside the input, so it is exposed to screen readers on mount.
+        </Text>
+        <Dropdown id="searchable-single-default-value" options={options} searchable label="Team" defaultValue={options[2]} placeholder="Search a team" clearAriaLabel="Clear" />
+      </div>;
+```
+
+## Controlled
+
+```tsx
+const options = useMemo(() => basicOptions, []);
+const [value, setValue] = useState<DropdownOption | null | undefined>(options[1]);
+return <Flex direction="column" gap="medium" align="start" style={{
+  width: "300px"
+}}>
+        <Text type="text2">Selected: {value?.label ?? "none"}</Text>
+        <Dropdown id="searchable-single-controlled" options={options} searchable label="Team" placeholder="Search a team" value={value} onChange={(option: DropdownOption) => setValue(option)} onClear={() => setValue(null)} clearAriaLabel="Clear" />
+      </Flex>;
+```
+
+## WithIconsAndAvatars
+
+```tsx
+const iconOptions = useMemo(() => [{
+  value: "email",
+  label: "Email",
+  startElement: {
+    type: "icon",
+    value: Email
+  }
+}, {
+  value: "attach",
+  label: "Attach",
+  startElement: {
+    type: "icon",
+    value: Attach
+  }
+}], []);
+const avatarOptions = useMemo(() => [{
+  value: "julia",
+  label: "Julia Martinez",
+  startElement: {
+    type: "avatar",
+    value: person1
+  }
+}, {
+  value: "sophia",
+  label: "Sophia Johnson",
+  startElement: {
+    type: "avatar",
+    value: person2
+  }
+}, {
+  value: "marco",
+  label: "Marco DiAngelo",
+  startElement: {
+    type: "avatar",
+    value: person3
+  }
+}], []);
+return <Flex direction="column" gap="medium">
+        <Text type="text2" color="secondary">
+          Each option is preselected. The icon / avatar shows in the option list, but the collapsed selected value
+          inside the input is text-only — a native input can only hold a string.
+        </Text>
+        <Flex gap="large" align="start">
+          <div style={{
+      width: "300px"
+    }}>
+            <Dropdown id="searchable-single-icons" options={iconOptions as any} defaultValue={iconOptions[0] as any} searchable label="With icons" placeholder="Search an action" clearAriaLabel="Clear" />
+          </div>
+          <div style={{
+      width: "300px"
+    }}>
+            <Dropdown id="searchable-single-avatars" options={avatarOptions as any} defaultValue={avatarOptions[0] as any} searchable label="With avatars" placeholder="Search a person" clearAriaLabel="Clear" />
+          </div>
+        </Flex>
+      </Flex>;
+```
+
+## WithEndElements
+
+```tsx
+const endIconOptions = useMemo(() => [{
+  value: "email",
+  label: "Email",
+  endElement: {
+    type: "icon",
+    value: Email
+  }
+}, {
+  value: "attach",
+  label: "Attach",
+  endElement: {
+    type: "icon",
+    value: Attach
+  }
+}], []);
+const suffixOptions = useMemo(() => [{
+  value: "copy",
+  label: "Copy",
+  endElement: {
+    type: "suffix",
+    value: "⌘C"
+  }
+}, {
+  value: "paste",
+  label: "Paste",
+  endElement: {
+    type: "suffix",
+    value: "⌘V"
+  }
+}], []);
+return <Flex direction="column" gap="medium">
+        <Text type="text2" color="secondary">
+          Trailing icons and suffix / hint text appear in the option list, but are dropped from the collapsed selected
+          value (text-only).
+        </Text>
+        <Flex gap="large" align="start">
+          <div style={{
+      width: "300px"
+    }}>
+            <Dropdown id="searchable-single-end-icon" options={endIconOptions as any} defaultValue={endIconOptions[0] as any} searchable label="With end icon" placeholder="Search an action" clearAriaLabel="Clear" />
+          </div>
+          <div style={{
+      width: "300px"
+    }}>
+            <Dropdown id="searchable-single-suffix" options={suffixOptions as any} defaultValue={suffixOptions[0] as any} searchable label="With suffix / hint" placeholder="Search an action" clearAriaLabel="Clear" />
+          </div>
+        </Flex>
+      </Flex>;
+```
+
+## WithValueRenderer
+
+```tsx
+const options = useMemo(() => [{
+  value: "julia",
+  label: "Julia Martinez",
+  startElement: {
+    type: "avatar",
+    value: person1
+  }
+}, {
+  value: "sophia",
+  label: "Sophia Johnson",
+  startElement: {
+    type: "avatar",
+    value: person2
+  }
+}], []);
+const valueRenderer = (option: DropdownOption) => <Flex gap="small" align="center">
+        <Email />
+        <Text type="text2">Custom: {option.label}</Text>
+      </Flex>;
+return <Flex direction="column" gap="medium">
+        <Text type="text2" color="secondary">
+          A custom <code>valueRenderer</code> is provided and the value is preselected. For searchable single select it
+          is <strong>not</strong> applied to the collapsed selected value — the input shows the plain label text only.
+          (<code>valueRenderer</code> still applies to non-searchable single select.)
+        </Text>
+        <div style={{
+    width: "300px"
+  }}>
+          <Dropdown id="searchable-single-value-renderer" options={options as any} defaultValue={options[0] as any} valueRenderer={valueRenderer} searchable label="With valueRenderer" placeholder="Search a person" clearAriaLabel="Clear" />
+        </div>
+      </Flex>;
+```
+
+## WithGroups
+
+```tsx
+const groupedOptions = useMemo(() => [{
+  label: "Engineering",
+  options: [{
+    value: "frontend",
+    label: "Frontend"
+  }, {
+    value: "backend",
+    label: "Backend"
+  }, {
+    value: "infra",
+    label: "Infrastructure"
+  }]
+}, {
+  label: "Business",
+  options: [{
+    value: "marketing",
+    label: "Marketing"
+  }, {
+    value: "sales",
+    label: "Sales"
+  }]
+}], []);
+return <Flex gap="large" align="start">
+        <Flex direction="column" gap="small">
+          <Text type="text2">Grouped by category</Text>
+          <div style={{
+      width: "300px"
+    }}>
+            <Dropdown id="searchable-single-groups" options={groupedOptions} searchable placeholder="Search a team" maxMenuHeight={200} clearAriaLabel="Clear" />
+          </div>
+        </Flex>
+        <Flex direction="column" gap="small">
+          <Text type="text2">Sticky group titles</Text>
+          <div style={{
+      width: "300px"
+    }}>
+            <Dropdown id="searchable-single-groups-sticky" options={groupedOptions} searchable stickyGroupTitle placeholder="Search a team" maxMenuHeight={200} clearAriaLabel="Clear" />
+          </div>
+        </Flex>
+        <Flex direction="column" gap="small">
+          <Text type="text2">Group by divider</Text>
+          <div style={{
+      width: "300px"
+    }}>
+            <Dropdown id="searchable-single-groups-divider" options={groupedOptions} searchable withGroupDivider placeholder="Search a team" maxMenuHeight={200} clearAriaLabel="Clear" />
+          </div>
+        </Flex>
+      </Flex>;
+```
+
+## WithTooltips
+
+```tsx
+const options = useMemo(() => [{
+  value: "marketing",
+  label: "Marketing",
+  tooltipProps: {
+    content: "Campaigns, content and brand."
+  }
+}, {
+  value: "design",
+  label: "Design",
+  tooltipProps: {
+    content: "Product and brand design."
+  }
+}, {
+  value: "engineering",
+  label: "Engineering"
+}], []);
+return <div style={{
+  height: "220px",
+  width: "300px"
+}}>
+        <Dropdown id="searchable-single-tooltips" options={options as any} searchable label="Team" placeholder="Search a team" clearAriaLabel="Clear" />
+      </div>;
+```
+
+## ClearableAndMaxHeight
+
+```tsx
+const options = useMemo(() => Array.from({
+  length: 30
+}, (_, index) => ({
+  value: `option-${index + 1}`,
+  label: `Option ${index + 1}`
+})), []);
+return <Flex gap="large" align="start">
+        <div style={{
+    width: "300px"
+  }}>
+          <Dropdown id="searchable-single-not-clearable" options={options} searchable clearable={false} label="Not clearable" defaultValue={options[0]} placeholder="Search an option" clearAriaLabel="Clear" />
+        </div>
+        <div style={{
+    width: "300px"
+  }}>
+          <Dropdown id="searchable-single-max-height" options={options} searchable maxMenuHeight={170} label="Limited menu height" placeholder="Search an option" clearAriaLabel="Clear" />
+        </div>
+      </Flex>;
+```
+
+## CustomFilterAndNoOptions
+
+```tsx
+const options = useMemo(() => basicOptions, []);
+
+// Match only from the start of the label instead of the default substring match.
+// Match only from the start of the label instead of the default substring match.
+const startsWithFilter = (option: DropdownOption, inputValue: string) => option.label.toLowerCase().startsWith(inputValue.toLowerCase());
+return <Flex gap="large" align="start">
+        <Flex direction="column" gap="small">
+          <Text type="text2">Custom "starts with" filter</Text>
+          <div style={{
+      width: "300px"
+    }}>
+            <Dropdown id="searchable-single-custom-filter" options={options} searchable filterOption={startsWithFilter} placeholder="Search a team" clearAriaLabel="Clear" />
+          </div>
+        </Flex>
+        <Flex direction="column" gap="small">
+          <Text type="text2">Custom empty message</Text>
+          <div style={{
+      width: "300px"
+    }}>
+            <Dropdown id="searchable-single-no-options" options={[]} searchable noOptionsMessage="No teams found" placeholder="Search a team" clearAriaLabel="Clear" />
+          </div>
+        </Flex>
+      </Flex>;
+```
+

package/dist/metadata.json

@@ -6320,6 +6320,24 @@
           "name": "(option: Item) => void"
         }
       },
+      "textInput": {
+        "defaultValue": null,
+        "description": "If true, selected items are shown as a comma-separated text summary inside the input instead of chips.\nSatisfies WCAG 4.1.2 by exposing the combobox value to assistive technologies on focus.\nOnly applies when searchable=true.",
+        "name": "textInput",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
+      "interactiveChips": {
+        "defaultValue": null,
+        "description": "If true, chips are always visible and support keyboard navigation: pressing Backspace or Left arrow\nfrom the input moves focus to the last chip; Left/Right navigates between chips; Delete/Backspace\nremoves the focused chip. Only applies when searchable=true.",
+        "name": "interactiveChips",
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "valueRenderer": {
         "defaultValue": null,
         "description": "The function to call to render the selected value on single select mode.",

package/dist/mocked_classnames/components/Dropdown/Dropdown.types.d.ts

@@ -15,6 +15,18 @@ interface MultiSelectSpecifics<Item extends BaseItemData<Record<string, unknown>
      * Callback fired when an option is removed in multi-select mode. Only available when multi is true.
      */
     onOptionRemove?: (option: Item) => void;
+    /**
+     * If true, selected items are shown as a comma-separated text summary inside the input instead of chips.
+     * Satisfies WCAG 4.1.2 by exposing the combobox value to assistive technologies on focus.
+     * Only applies when searchable=true.
+     */
+    textInput?: boolean;
+    /**
+     * If true, chips are always visible and support keyboard navigation: pressing Backspace or Left arrow
+     * from the input moves focus to the last chip; Left/Right navigates between chips; Delete/Backspace
+     * removes the focused chip. Only applies when searchable=true.
+     */
+    interactiveChips?: boolean;
     /**
      * The function to call to render the selected value on single select mode.
      */

package/dist/mocked_classnames/components/Dropdown/components/MultiSelectedValues/MultiSelectedValues.d.ts

@@ -7,6 +7,10 @@ type MultiSelectedValuesProps<Item> = {
     disabled?: boolean;
     readOnly?: boolean;
     minVisibleCount?: number;
+    /** Extra props (tabIndex, onKeyDown, etc.) to spread on each visible chip container. */
+    getChipContainerProps?: (item: Item, index: number) => Record<string, any>;
+    /** Ref forwarded to the +N overflow Chips element, for external keyboard focus management. */
+    badgeRef?: React.Ref<HTMLDivElement>;
 };
-declare function MultiSelectedValues<Item extends BaseItemData<Record<string, unknown>>>({ selectedItems, onRemove, renderInput, disabled, readOnly, minVisibleCount }: MultiSelectedValuesProps<Item>): React.JSX.Element;
+declare function MultiSelectedValues<Item extends BaseItemData<Record<string, unknown>>>({ selectedItems, onRemove, renderInput, disabled, readOnly, minVisibleCount, getChipContainerProps, badgeRef }: MultiSelectedValuesProps<Item>): React.JSX.Element;
 export default MultiSelectedValues;

package/dist/mocked_classnames/components/Dropdown/components/Trigger/DropdownInput.d.ts

@@ -1,6 +1,8 @@
-import React from "react";
-declare const DropdownInput: ({ inputSize, fullWidth }: {
+import React, { type RefObject } from "react";
+declare const DropdownInput: ({ inputSize, fullWidth, onKeyDown: externalKeyDown, inputRef: externalInputRef }: {
     inputSize?: "small" | "medium" | "large";
     fullWidth?: boolean;
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+    inputRef?: RefObject<HTMLInputElement>;
 }) => React.JSX.Element;
 export default DropdownInput;

package/dist/mocked_classnames/components/Dropdown/context/DropdownContext.types.d.ts

@@ -29,6 +29,12 @@ export interface DropdownContextProps<Item extends BaseItemData<Record<string, u
     contextOnOptionRemove?: (option: Item) => void;
     addSelectedItem?: (item: Item) => void;
     removeSelectedItem?: (item: Item) => void;
+    getSelectedItemProps?: (options: {
+        selectedItem: any;
+        index: number;
+    }) => Record<string, any>;
     isFocused?: boolean;
+    textInput?: boolean;
+    interactiveChips?: boolean;
 }
 export {};

package/dist/mocked_classnames/components/Dropdown/hooks/useDropdownMultiCombobox.d.ts

@@ -1,6 +1,6 @@
 import { type DropdownGroupOption } from "../Dropdown.types";
 import { type BaseItemData } from "../../BaseItem";
-declare function useDropdownMultiCombobox<T extends BaseItemData<Record<string, unknown>>>(options: DropdownGroupOption<T>, selectedItems: T[], setSelectedItems: (items: T[]) => void, isMenuOpen: boolean, autoFocus?: boolean, defaultValue?: T[], value?: T[], inputValueProp?: string, onChange?: (options: T[]) => void, onInputChange?: (value: string | null) => void, onMenuOpen?: () => void, onMenuClose?: () => void, onOptionSelect?: (option: T) => void, filterOption?: (option: T, inputValue: string) => boolean, showSelectedOptions?: boolean, id?: string): {
+declare function useDropdownMultiCombobox<T extends BaseItemData<Record<string, unknown>>>(options: DropdownGroupOption<T>, selectedItems: T[], setSelectedItems: (items: T[]) => void, isMenuOpen: boolean, autoFocus?: boolean, defaultValue?: T[], value?: T[], inputValueProp?: string, onChange?: (options: T[]) => void, onInputChange?: (value: string | null) => void, onMenuOpen?: () => void, onMenuClose?: () => void, onOptionSelect?: (option: T) => void, filterOption?: (option: T, inputValue: string) => boolean, showSelectedOptions?: boolean, id?: string, onOptionRemove?: (option: T) => void, textInput?: boolean, interactiveChips?: boolean): {
     isOpen: boolean;
     inputValue: string;
     highlightedIndex: number;

package/dist/mocked_classnames/src/components/Accordion/Accordion/Accordion.module.scss.js

@@ -1,2 +1,2 @@
-var e={accordion:"accordion",accordionItemExpandCollapse:"accordionItemExpandCollapse",accordionItemExpandCollapseLast:"accordionItemExpandCollapseLast"};!function(e){const o="s_id-0e4aa6b3ed9f_4_2_6";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+o))return;const d=document.createElement("style");d.id=o,n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[o]=e)}(".accordion {\n  height: fit-content;\n  border: 1px solid var(--ui-border-color);\n  box-sizing: border-box;\n  border-radius: var(--border-radius-small);\n}\n\n.accordion .accordionItemExpandCollapse {\n  border-radius: 0;\n  border-top: none;\n  border-inline: none;\n  border-color: var(--ui-border-color);\n}\n\n.accordion .accordionItemExpandCollapseLast {\n  border-bottom: none;\n}");export{e as default};
+var e={accordion:"accordion",accordionItemExpandCollapse:"accordionItemExpandCollapse",accordionItemExpandCollapseLast:"accordionItemExpandCollapseLast"};!function(e){const o="s_id-0e4aa6b3ed9f_4_3_0";if("undefined"!=typeof document){const n=document.head||document.getElementsByTagName("head")[0];if(n.querySelector("#"+o))return;const d=document.createElement("style");d.id=o,n.firstChild?n.insertBefore(d,n.firstChild):n.appendChild(d),d.appendChild(document.createTextNode(e))}else globalThis.injectedStyles&&(globalThis.injectedStyles[o]=e)}(".accordion {\n  height: fit-content;\n  border: 1px solid var(--ui-border-color);\n  box-sizing: border-box;\n  border-radius: var(--border-radius-small);\n}\n\n.accordion .accordionItemExpandCollapse {\n  border-radius: 0;\n  border-top: none;\n  border-inline: none;\n  border-color: var(--ui-border-color);\n}\n\n.accordion .accordionItemExpandCollapseLast {\n  border-bottom: none;\n}");export{e as default};
 //# sourceMappingURL=Accordion.module.scss.js.map

package/dist/mocked_classnames/src/components/AlertBanner/AlertBanner.module.scss.js

@@ -1,2 +1,2 @@
-var n={alertBanner:"alertBanner",primary:"primary",positive:"positive",negative:"negative",dark:"dark",warning:"warning",closeBtn:"closeBtn",content:"content",closeButtonWrapper:"closeButtonWrapper",ellipsis:"ellipsis",contentItem:"contentItem",contentItemText:"contentItemText"};!function(n){const e="s_id-d6894f952adc_4_2_6";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const o=document.createElement("style");o.id=e,t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".alertBanner {\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n}\n\n.primary {\n  background-color: var(--primary-color);\n}\n\n.positive {\n  background-color: var(--positive-color);\n}\n\n.negative {\n  background-color: var(--negative-color);\n}\n\n.dark {\n  background-color: var(--inverted-color-background);\n}\n\n.warning {\n  background-color: var(--warning-color);\n  color: var(--fixed-dark-color);\n}\n\n.warning .closeBtn {\n  color: var(--fixed-dark-color);\n}\n\n.content {\n  flex: 1 1 auto;\n  display: flex;\n  height: 100%;\n  min-width: 0;\n  align-items: center;\n  justify-content: center;\n  padding-inline-start: var(--space-16);\n}\n\n.closeButtonWrapper {\n  flex: 0 0 40px;\n  position: relative;\n  height: 100%;\n  min-width: 0;\n}\n\n.closeBtn {\n  position: absolute;\n  inset-inline-end: 4px;\n  top: 4px;\n}\n\n.ellipsis {\n  flex: 0 1 auto;\n}\n\n.contentItem {\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.contentItemText {\n  flex: 0 1 auto;\n  min-width: 0;\n}");export{n as default};
+var n={alertBanner:"alertBanner",primary:"primary",positive:"positive",negative:"negative",dark:"dark",warning:"warning",closeBtn:"closeBtn",content:"content",closeButtonWrapper:"closeButtonWrapper",ellipsis:"ellipsis",contentItem:"contentItem",contentItemText:"contentItemText"};!function(n){const e="s_id-d6894f952adc_4_3_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const o=document.createElement("style");o.id=e,t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".alertBanner {\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n}\n\n.primary {\n  background-color: var(--primary-color);\n}\n\n.positive {\n  background-color: var(--positive-color);\n}\n\n.negative {\n  background-color: var(--negative-color);\n}\n\n.dark {\n  background-color: var(--inverted-color-background);\n}\n\n.warning {\n  background-color: var(--warning-color);\n  color: var(--fixed-dark-color);\n}\n\n.warning .closeBtn {\n  color: var(--fixed-dark-color);\n}\n\n.content {\n  flex: 1 1 auto;\n  display: flex;\n  height: 100%;\n  min-width: 0;\n  align-items: center;\n  justify-content: center;\n  padding-inline-start: var(--space-16);\n}\n\n.closeButtonWrapper {\n  flex: 0 0 40px;\n  position: relative;\n  height: 100%;\n  min-width: 0;\n}\n\n.closeBtn {\n  position: absolute;\n  inset-inline-end: 4px;\n  top: 4px;\n}\n\n.ellipsis {\n  flex: 0 1 auto;\n}\n\n.contentItem {\n  flex: 0 0 auto;\n  min-width: 0;\n}\n\n.contentItemText {\n  flex: 0 1 auto;\n  min-width: 0;\n}");export{n as default};
 //# sourceMappingURL=AlertBanner.module.scss.js.map

package/dist/mocked_classnames/src/components/AlertBanner/AlertBannerButton/AlertBannerButton.module.scss.js

@@ -1,2 +1,2 @@
-var n={bannerButton:"bannerButton",darkBackground:"darkBackground",marginLeft:"marginLeft"};!function(n){const e="s_id-35a7e70934a8_4_2_6";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const a=document.createElement("style");a.id=e,t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".bannerButton {\n  -webkit-font-smoothing: auto;\n  -moz-osx-font-smoothing: auto;\n}\n\n.dark-app-theme .darkBackground .bannerButton {\n  background-color: var(--dark-background-color);\n}\n\n.marginLeft {\n  margin-inline-start: var(--space-8);\n}");export{n as default};
+var n={bannerButton:"bannerButton",darkBackground:"darkBackground",marginLeft:"marginLeft"};!function(n){const e="s_id-35a7e70934a8_4_3_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const a=document.createElement("style");a.id=e,t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".bannerButton {\n  -webkit-font-smoothing: auto;\n  -moz-osx-font-smoothing: auto;\n}\n\n.dark-app-theme .darkBackground .bannerButton {\n  background-color: var(--dark-background-color);\n}\n\n.marginLeft {\n  margin-inline-start: var(--space-8);\n}");export{n as default};
 //# sourceMappingURL=AlertBannerButton.module.scss.js.map

package/dist/mocked_classnames/src/components/AlertBanner/AlertBannerLink/AlertBannerLink.module.scss.js

@@ -1,2 +1,2 @@
-var n={bannerLink:"bannerLink",bannerLinkTextColorOnPrimary:"bannerLinkTextColorOnPrimary",bannerLinkTextColorOnInverted:"bannerLinkTextColorOnInverted",marginLeft:"marginLeft"};!function(n){const e="s_id-b8e9178179b1_4_2_6";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const r=document.createElement("style");r.id=e,t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".bannerLink {\n  text-decoration: underline;\n  -webkit-font-smoothing: auto;\n  -moz-osx-font-smoothing: auto;\n}\n\n.bannerLinkTextColorOnPrimary {\n  color: var(--text-color-on-primary);\n}\n\n.bannerLinkTextColorOnInverted {\n  color: var(--text-color-on-inverted);\n}\n\n.marginLeft {\n  margin-inline-start: var(--space-8);\n}");export{n as default};
+var n={bannerLink:"bannerLink",bannerLinkTextColorOnPrimary:"bannerLinkTextColorOnPrimary",bannerLinkTextColorOnInverted:"bannerLinkTextColorOnInverted",marginLeft:"marginLeft"};!function(n){const e="s_id-b8e9178179b1_4_3_0";if("undefined"!=typeof document){const t=document.head||document.getElementsByTagName("head")[0];if(t.querySelector("#"+e))return;const r=document.createElement("style");r.id=e,t.firstChild?t.insertBefore(r,t.firstChild):t.appendChild(r),r.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[e]=n)}(".bannerLink {\n  text-decoration: underline;\n  -webkit-font-smoothing: auto;\n  -moz-osx-font-smoothing: auto;\n}\n\n.bannerLinkTextColorOnPrimary {\n  color: var(--text-color-on-primary);\n}\n\n.bannerLinkTextColorOnInverted {\n  color: var(--text-color-on-inverted);\n}\n\n.marginLeft {\n  margin-inline-start: var(--space-8);\n}");export{n as default};
 //# sourceMappingURL=AlertBannerLink.module.scss.js.map