@eightshift/ui-components 5.6.0 → 6.0.0

package/dist/components/select/react-select-component-wrappers.js

@@ -1,90 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { c as components } from "../../index-641ee5b8.esm-DiwvO-RP.js";
-/**
- * Custom dropdown indicator for CustomSelect.
- *
- * (a wrapper for `components.DropdownIndicator` from `react-select`)
- *
- * @param {import('react-select').DropdownIndicatorProps} props - components.DropdownIndicator props.
- *
- * @preserve
- */
-const RSDropdownIndicator = (props) => /* @__PURE__ */ jsx(components.DropdownIndicator, { ...props });
-/**
- * Custom value display for CustomSelect.
- *
- * (a wrapper for `components.SingleValue` from `react-select`)
- *
- * @param {import('react-select').SingleValueProps} props - components.SingleValue props.
- *
- * @preserve
- */
-const RSSingleValue = (props) => /* @__PURE__ */ jsx(components.SingleValue, { ...props });
-/**
- * Custom value display for multi item select.
- *
- * (a wrapper for `components.MultiValue` from `react-select`)
- *
- * @param {import('react-select').MultiValueProps} props - components.SingleValue props.
- *
- * @preserve
- */
-const RSMultiValue = (props) => /* @__PURE__ */ jsx(components.MultiValue, { ...props });
-/**
- * Custom option for CustomSelect.
- *
- * (a wrapper for `components.Option` from `react-select`)
- *
- * @param {import('react-select').OptionProps} props - components.Option props.
- *
- * @preserve
- */
-const RSOption = (props) => /* @__PURE__ */ jsx(components.Option, { ...props });
-/**
- * Custom multiple value remove button for CustomSelect.
- *
- * (a wrapper for `components.MultiValueRemove` from `react-select`)
- *
- * @param {import('react-select').MultiValueRemoveProps} props - components.MultiValueRemove props.
- *
- * @preserve
- */
-const RSMultiValueRemove = (props) => /* @__PURE__ */ jsx(components.MultiValueRemove, { ...props });
-/**
- * Custom multiple value display container for CustomSelect.
- *
- * (a wrapper for `components.MultiValueContainer` from `react-select`)
- *
- * @param {import('react-select').MultiValueGenericProps} props - components.MultiValueContainer props.
- *
- * @preserve
- */
-const RSMultiValueContainer = (props) => /* @__PURE__ */ jsx(components.MultiValueContainer, { ...props });
-/**
- * Custom multiple value display for CustomSelect.
- *
- * (a wrapper for `components.MultiValueLabel` from `react-select`)
- *
- * @param {import('react-select').MultiValueGenericProps} props - components.MultiValueLabel props.
- *
- * @preserve
- */
-const RSMultiValueLabel = (props) => /* @__PURE__ */ jsx(components.MultiValueLabel, { ...props });
-/**
- * Default clear indicator for CustomSelect.
- *
- * @param {import('react-select').ClearIndicatorProps} props - components.ClearIndicator props.
- *
- * @preserve
- */
-const RSClearIndicator = (props) => /* @__PURE__ */ jsx(components.ClearIndicator, { ...props });
-export {
-  RSClearIndicator,
-  RSDropdownIndicator,
-  RSMultiValue,
-  RSMultiValueContainer,
-  RSMultiValueLabel,
-  RSMultiValueRemove,
-  RSOption,
-  RSSingleValue
-};

package/dist/components/select/styles.js

@@ -1,49 +0,0 @@
-import { c as clsx } from "../../lite-DVmmD_-j.js";
-const controlStyles = {
-  base: "es:border es:border-gray-300 es:rounded-10 es:bg-white es:text-sm es:transition es:group es:shadow-sm es:min-h-10! es:inset-ring es:inset-ring-secondary-100",
-  focus: "es:ring-2 es:ring-accent-500/50 es:border-accent-500!"
-};
-const placeholderStyles = "es:text-gray-400 es:ml-1";
-const selectInputStyles = "es:any-focus:outline-hidden es:[&_input]:shadow-none! es:[&_input:focus]:shadow-none!";
-const valueContainerStyles = "es:gap-1 es:ml-1.25 es:my-1 es:overflow-visible!";
-const singleValueStyles = "es:ml-0.5 es:px-1";
-const multiValueStyles = clsx(
-  "es:bg-gray-100 es:rounded-md es:py-1 es:px-1.5 es:border es:border-gray-100 hover:border-gray-300 es:items-center es:gap-1.5 es:transition es:overflow-visible es:max-w-40",
-  "es:in-focus-visible:outline-hidden es:in-focus-visible:ring",
-  "es:in-focus-visible:ring-accent-500/50"
-);
-const multiValueLabelStyles = "es:select-none";
-const multiValueRemoveStyles = "es:hover:bg-red-500/15 es:hover:text-red-900 es:text-gray-500 es:rounded es:p-0.5 es:icon:size-3.5 es:icon:stroke-[1.5] es:transition";
-const clearIndicatorStyles = "es:text-gray-500 es:p-1 es:rounded-md hover:bg-red-50 hover:text-red-800 es:transition";
-const dropdownIndicatorStyles = "es:text-gray-500 es:px-1 es:group-hover:text-black es:icon:transition-transform es:icon:duration-500 es:icon:size-5";
-const menuStyles = "es:rounded-2xl es:border es:border-gray-200 es:bg-white es:shadow-lg es:mt-1 es:text-sm es:overflow-x-hidden es:min-w-48";
-const optionStyles = {
-  base: "es:p-2 es:flex! es:items-center es:gap-1.5 es:text-gray-800 es:rounded-xl es:icon:size-5 es:icon:text-gray-500 es:transition es:mx-1 es:first:mt-1 es:last:mb-1 es:w-auto! es:min-h-9",
-  focus: "es:bg-gray-100 es:active:bg-accent-700/15",
-  selected: "es:bg-accent-600/15 es:text-accent-950"
-};
-const noOptionsMessageStyles = "es:text-gray-400 es:p-4";
-const groupHeadingStyles = "es:ml-3 es:mt-3 es:mb-1 es:text-gray-500/80 es:empty:hidden";
-const groupStyles = "es:border-b es:border-b-gray-200 es:last:border-b-0";
-const loadingMessageStyles = "es:p-4";
-const eightshiftSelectClasses = {
-  clearIndicator: () => clearIndicatorStyles,
-  control: ({ isFocused }) => clsx(isFocused && controlStyles.focus, controlStyles.base),
-  dropdownIndicator: () => dropdownIndicatorStyles,
-  group: () => groupStyles,
-  groupHeading: () => groupHeadingStyles,
-  input: () => selectInputStyles,
-  menu: () => menuStyles,
-  multiValue: () => multiValueStyles,
-  multiValueLabel: () => multiValueLabelStyles,
-  multiValueRemove: () => multiValueRemoveStyles,
-  noOptionsMessage: () => noOptionsMessageStyles,
-  option: ({ isFocused, isSelected }) => clsx(isFocused && optionStyles.focus, isSelected && optionStyles.selected, optionStyles.base),
-  placeholder: () => placeholderStyles,
-  singleValue: () => singleValueStyles,
-  valueContainer: () => valueContainerStyles,
-  loadingMessage: () => loadingMessageStyles
-};
-export {
-  eightshiftSelectClasses
-};

package/dist/components/select/v2/async-multi-select.js

@@ -1,433 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { _ as __ } from "../../../default-i18n-DBm-GqWM.js";
-import { BaseControl } from "../../base-control/base-control.js";
-import { $ as $d2f53cda644affe3$export$2f2b9559550c7bbc, a as $440f4836bcb56932$export$b94867ecbd698f21 } from "../../../SearchField-D6mPli0i.js";
-import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../../Button-BhEIfWLY.js";
-import { g as $de32f1b87079253c$export$2e1e1122cf0cba88, e as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../../Dialog-B8p4Ymh7.js";
-import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../../Input-8yja_IHC.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../../Label-DWVaNd2E.js";
-import { $ as $eed445e0843c11d0$export$41f133550aa26f48, a as $eed445e0843c11d0$export$a11e76429ed99b4, b as $612b8eb6cb90e02d$export$62ed72bc21f6b8a6 } from "../../../ListBox-CEpKw7yC.js";
-import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../../Text-AxKZjtFm.js";
-import { $ as $d8f176866e6dc039$export$2cfc5be7a55829f6 } from "../../../useDragAndDrop-DUXKDS0N.js";
-import { useRef, useEffect, cloneElement } from "react";
-import { icons } from "../../../icons/icons.js";
-import "../../../react-jsx-parser.min-VUl-CuCv.js";
-import { OptionItemBase } from "./shared.js";
-import { RichLabel } from "../../rich-label/rich-label.js";
-import { c as clsx } from "../../../utils-cvK1vxO7.js";
-import { truncateEnd, unescapeHTML } from "../../../utilities/text-helpers.js";
-import "../../../sha256-C56UDWfQ.js";
-import { moveArrayItem } from "../shared.js";
-import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66 } from "../../../useAsyncList-D52mQcrH.js";
-/**
- * Async multi-select menu.
- *
- * @component
- * @param {Object} props - Component props.
- * @param {string} [props.label] - Label of the component.
- * @param {string} [props.help] - Help text of the component.
- * @param {string} [props.icon] - Icon of the component.
- * @param {string} [props.subtitle] - Subtitle of the component.
- * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to show to the right of the label.
- * @param {boolean} [props.inline] - Whether the Select menu is displayed inline with the label, to the right.
- * @param {{label: string, value: string, metadata: Object<string, any>?}[]} props.value - Current value of the select.
- * @param {Function} props.onChange - Function to call when the value changes.
- * @param {boolean} [props.clearable=false] - Whether the select is clearable.
- * @param {boolean} [props.disabled=false] - Whether the select is disabled.
- * @param {string} [props.placeholder] - Placeholder text to show when no value is selected.
- * @param {Function} [props.getLabel] - Function to get the label for the item from the fetched data. `(item: Object<string, any>) => string`
- * @param {Function} [props.getValue] - Function to get the value for the item from the fetched data. `(item: Object<string, any>) => string`
- * @param {Function} [props.getMeta] - Function to get the metadata for the item from the fetched data. `(item: Object<string, any>) => Object<string, any>` (optional)
- * @param {Function} [props.getIcon] - Function to get the icon for the item from the fetched data. `(item: Object<string, any>) => JSX.Element | string`
- * @param {Function} [props.getSubtitle] - Function to get the subtitle for the item from the fetched data. `(item: Object<string, any>) => string`
- * @param {Function} [props.getData] - Function to pre-process the fetched data before it is used in the select. `(data: Object<string, any>[]) => Object<string, any>[]`
- * @param {Function} [props.fetchUrl] - Function to get the URL for fetching data. Provides typed search text if entered. `(searchText: string) => string`
- * @param {Object} [props.fetchConfig] - Configuration object for the fetch request, passed to the `fetch` function.
- * @param {Function} [props.fetchFunction] - Allows overriding the default fetch function. `fetchFunction: (url: string, fetchOptions: Object<string, any>, searchText?: string) => Promise<Object<string, any>>`
- * @param {Function} [props.processLoadedOptions] - Allows processing the options fetched from the source. `(options: Object<string, any>[]) => Object<string, any>[]`
- * @param {JSX.Element} [props.customMenuOption] - If provided, replaces the default item in the dropdown menu. `({ value: string, label: string, subtitle: string, metadata: any }) => JSX.Element`
- * @param {JSX.Element} [props.customValueDisplay] - If provided, replaces the default current value display of each selected item. `({ value: string, label: string, subtitle: string, metadata: any }) => JSX.Element`
- * @param {JSX.Element} [props.customDropdownArrow] - If provided, replaces the default dropdown arrow indicator.
- * @param {string} props.className - Classes to pass to the select menu.
- * @param {boolean} [props.noMinWidth=false] - If `true`, the select menu will not have a minimum width.
- * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
- *
- * @returns {JSX.Element} The __AsyncMultiSelectNext component.
- *
- * @example
- * const [value, setValue] = useState(null);
- *
- * <__AsyncMultiSelectNext
- * 	label='Select items'
- * 	value={value}
- * 	onChange={setValue}
- * 	fetchUrl={(searchText) => `https://api.example.com/items?search=${searchText}`}
- * 	getLabel={(item) => item?.label}
- * 	getValue={(item) => item?.id}
- * 	getIcon={() => icons.emptyCircle}
- * />
- *
- * @preserve
- */
-const __AsyncMultiSelectNext = (props) => {
-  const {
-    label,
-    help,
-    icon,
-    subtitle,
-    actions,
-    inline,
-    value,
-    onChange,
-    clearable,
-    disabled,
-    placeholder = __("Select...", "eightshift-ui-components"),
-    fetchUrl,
-    fetchConfig = {},
-    fetchFunction,
-    getLabel = (item) => item?.label,
-    getValue = (item) => item?.value,
-    getMeta,
-    getIcon,
-    getSubtitle,
-    getData = (data) => data,
-    customMenuOption,
-    customValueDisplay,
-    customDropdownArrow,
-    className,
-    noMinWidth,
-    hidden,
-    processLoadedOptions,
-    ...rest
-  } = props;
-  const list = $f86e6c1ec7da6ebb$export$bc3384a35de93d66({
-    initialSelectedKeys: Array.isArray(value) ? value.map((item) => item?.value) : [],
-    getKey: (item) => item.value,
-    async load({ signal, filterText }) {
-      let json = [];
-      if (fetchFunction) {
-        const res = await fetchFunction(filterText, signal);
-        json = processLoadedOptions ? processLoadedOptions(getData(res)) : getData(res);
-      } else {
-        const res = await fetch(fetchUrl(filterText), { ...fetchConfig, signal });
-        json = processLoadedOptions ? processLoadedOptions(getData(await res.json())) : getData(res);
-      }
-      const output = json?.map((item, index) => {
-        const id = getValue?.(item) ?? index;
-        const entry = { label: unescapeHTML(getLabel?.(item) ?? ""), value: id };
-        if (getMeta) {
-          entry.meta = getMeta(item);
-        }
-        if (getSubtitle) {
-          entry.subtitle = unescapeHTML(getSubtitle(item));
-        }
-        return entry;
-      });
-      if (filterText.length > 0) {
-        return {
-          items: output
-        };
-      }
-      const extra = value?.map((val) => {
-        if (output?.find((item) => item.value === val?.value)) {
-          return null;
-        }
-        return val;
-      })?.filter(Boolean) ?? [];
-      return {
-        items: [...output, ...extra]
-      };
-    }
-  });
-  const handleSelectionChange = (rawSelected) => {
-    const selected = list.filterText.length > 0 ? /* @__PURE__ */ new Set([...value?.map((item) => item?.value) ?? [], ...rawSelected]) : rawSelected;
-    list.filterText = "";
-    if (selected === null || selected === void 0) {
-      onChange(null);
-      return;
-    }
-    if (selected.size === 0) {
-      onChange([]);
-      return;
-    }
-    const selectedValues = [...selected].map((item) => {
-      const option = list.items.find((option2) => option2.value === item) || value.find((option2) => option2.value === item);
-      if (!option) {
-        return null;
-      }
-      return {
-        ...option
-      };
-    }).filter(Boolean);
-    onChange(selectedValues);
-  };
-  const ref = useRef();
-  let { dragAndDropHooks } = $d8f176866e6dc039$export$2cfc5be7a55829f6({
-    getItems: (keys) => [...keys].map((key) => ({ "text/plain": key, text: value.find((item) => item.value === key)?.label ?? key })),
-    onReorder(e) {
-      handleSelectionChange(
-        new Set(
-          moveArrayItem(
-            value?.map((item) => item?.value),
-            [...e.keys][0],
-            e.target.key,
-            e.target.dropPosition
-          )
-        )
-      );
-    },
-    renderDragPreview(items) {
-      return /* @__PURE__ */ jsxs("div", { className: "es:bg-accent-700 es:rounded-md es:px-1.5 es:py-0.5 es:text-white es:translate-x-7 es:translate-y-6", children: [
-        truncateEnd(items[0]["text"], 20),
-        items.length > 1 && /* @__PURE__ */ jsx("span", { className: "badge", children: items.length })
-      ] });
-    },
-    renderDropIndicator(target) {
-      return /* @__PURE__ */ jsx(
-        $612b8eb6cb90e02d$export$62ed72bc21f6b8a6,
-        {
-          target,
-          className: "es:w-0.75 es:h-5.5 es:rounded-md es:transition es:inset-ring-0 es:drop-target:bg-accent-600 es:bg-accent-700/30 es:any-focus:outline-hidden es:any-focus:inset-ring-0"
-        }
-      );
-    },
-    isDisabled: disabled || value.length < 2
-  });
-  useEffect(() => {
-    if (list.selectedKeys.size !== (value ?? []).length) {
-      list.setSelectedKeys(new Set(value?.map((item) => item?.value)));
-      list.setFilterText("");
-    }
-  }, [value]);
-  if (hidden) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    BaseControl,
-    {
-      label,
-      icon,
-      subtitle,
-      actions,
-      help,
-      inline,
-      labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
-      ...rest,
-      children: /* @__PURE__ */ jsxs(
-        $de32f1b87079253c$export$2e1e1122cf0cba88,
-        {
-          onOpenChange: (isOpen) => {
-            if (!isOpen) {
-              list.setFilterText("");
-            }
-          },
-          children: [
-            /* @__PURE__ */ jsxs(
-              $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
-              {
-                "aria-label": __("Select items", "eightshift-ui-components"),
-                className: clsx(
-                  "es:group",
-                  "es:relative es:flex es:items-center es:gap-1 es:py-0.75 es:pl-0.75 es:pr-1.5 es:focus-visible:outline-hidden es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
-                  "es:min-h-9 es:rounded-10 es:border es:border-secondary-300 es:bg-white es:text-sm es:shadow-sm es:transition",
-                  "es:inset-ring es:inset-ring-secondary-100",
-                  "es:any-focus:outline-hidden",
-                  !noMinWidth && "es:min-w-48",
-                  !inline && "es:w-full",
-                  disabled && "es:select-none es:shadow-none!",
-                  "es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:border-accent-500 es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:ring-2 es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:ring-accent-500/50",
-                  className
-                ),
-                ref,
-                children: [
-                  /* @__PURE__ */ jsx(
-                    $eed445e0843c11d0$export$41f133550aa26f48,
-                    {
-                      "aria-label": __("Selected items", "eightshift-ui-components"),
-                      layout: "grid",
-                      items: value,
-                      selectionMode: "none",
-                      dependencies: [value],
-                      className: "es:peer es:w-full es:flex es:items-center es:flex-wrap es:gap-0.75 es:has-dragging:inset-ring-1 es:has-dragging:inset-ring-accent-500/10 es:rounded-md es:transition es:leading-tight",
-                      renderEmptyState: () => /* @__PURE__ */ jsx("div", { className: "es:text-secondary-500 es:pl-1.5 es:flex es:items-center", children: placeholder }),
-                      dragAndDropHooks,
-                      children: (item) => /* @__PURE__ */ jsxs(
-                        $eed445e0843c11d0$export$a11e76429ed99b4,
-                        {
-                          id: item?.value,
-                          textValue: item?.label,
-                          className: clsx(
-                            "es:inset-ring es:inset-ring-secondary-200/30 es:h-7 es:bg-secondary-100 es:focus-visible:inset-ring-accent-500 es:dragging:cursor-grabbing es:focus:outline-hidden es:py-1 es:px-1.5 es:rounded-7 es:dragging:inset-ring-accent-600/20 es:dragging:bg-transparent es:dragging:text-accent-600/40 es:transition es:flex es:items-center es:gap-1",
-                            !disabled && value.size >= 2 && "es:cursor-move"
-                          ),
-                          children: [
-                            customValueDisplay && customValueDisplay(truncateEnd(item?.label, 20), item),
-                            !customValueDisplay && /* @__PURE__ */ jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "label", children: truncateEnd(item?.label, 20) })
-                          ]
-                        }
-                      )
-                    }
-                  ),
-                  /* @__PURE__ */ jsxs("div", { className: "es:shrink-0 es:ml-auto es:peer-has-dragging:hidden", children: [
-                    !customDropdownArrow && cloneElement(icons.dropdownCaretAlt, {
-                      className: "es:shrink-0 es:w-4 es:group-aria-expanded:-scale-y-100 es:transition-transform es:duration-200"
-                    }),
-                    customDropdownArrow && /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        "aria-hidden": "true",
-                        className: "es:shrink-0 es:group-aria-expanded:-scale-y-100 es:transition-transform es:duration-200",
-                        children: customDropdownArrow
-                      }
-                    )
-                  ] })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              $07b14b47974efb58$export$5b6b19405a83ff9d,
-              {
-                "aria-label": __("Items", "eightshift-ui-components"),
-                className: ({ isEntering, isExiting }) => clsx(
-                  "es:flex es:w-76 es:min-w-9 es:max-w-76 es:flex-col es:overflow-hidden es:rounded-2xl es:border es:border-secondary-200 es:bg-white es:text-sm es:shadow-xl es:inset-ring es:inset-ring-secondary-100",
-                  "es:any-focus:outline-hidden",
-                  "es:motion-safe:motion-duration-200 es:motion-safe:motion-ease-spring-bouncy",
-                  "es:placement-bottom:origin-top-left es:placement-top:origin-bottom-left",
-                  "es:placement-left:origin-right es:placement-right:origin-left",
-                  isEntering && "es:motion-safe:motion-scale-in-95 es:motion-opacity-in-0",
-                  isEntering && "es:motion-safe:placement-top:motion-translate-y-in-[5%] es:motion-safe:placement-bottom:motion-translate-y-in-[-5%] es:motion-safe:placement-left:motion-translate-x-in-[5%] es:motion-safe:placement-right:motion-translate-x-in-[-5%]",
-                  isExiting && "es:motion-safe:motion-scale-out-95 es:motion-opacity-out-0",
-                  isExiting && "es:motion-safe:placement-top:motion-translate-y-out-[5%] es:motion-safe:placement-bottom:motion-translate-y-out-[-5%] es:motion-safe:placement-left:motion-translate-x-out-[5%] es:motion-safe:placement-right:motion-translate-x-out-[-5%]"
-                ),
-                placement: "bottom left",
-                maxHeight: 360,
-                triggerRef: ref,
-                children: /* @__PURE__ */ jsxs(
-                  $d2f53cda644affe3$export$2f2b9559550c7bbc,
-                  {
-                    inputValue: list.filterText,
-                    onInputChange: list.setFilterText,
-                    children: [
-                      /* @__PURE__ */ jsxs(
-                        $440f4836bcb56932$export$b94867ecbd698f21,
-                        {
-                          "aria-label": __("Search", "eightshift-ui-components"),
-                          className: "es:flex es:items-center es:bg-secondary-100 es:m-2 es:rounded-lg es:relative es:placeholder:text-secondary-500",
-                          autoFocus: true,
-                          children: [
-                            /* @__PURE__ */ jsx(
-                              $3985021b0ad6602f$export$f5b8910cec6cf069,
-                              {
-                                placeholder: __("Search...", "eightshift-ui-components"),
-                                className: "es:peer es:size-full es:h-9 es:outline-hidden es:shadow-none es:px-2.5 es:text-sm es:py-0 es:[&::-webkit-search-cancel-button]:hidden"
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
-                              {
-                                "aria-label": __("Clear", "eightshift-ui-components"),
-                                className: clsx(
-                                  "es:absolute es:right-2 es:top-0 es:bottom-0 es:my-auto",
-                                  "es:flex es:size-6 es:items-center es:justify-center es:rounded es:text-sm es:text-secondary-600 es:transition es:hover:bg-red-50 es:hover:text-red-900 es:any-focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:disabled:text-secondary-300 es:cursor-pointer",
-                                  "es:peer-placeholder-shown:opacity-0"
-                                ),
-                                children: icons.clearAlt
-                              }
-                            )
-                          ]
-                        }
-                      ),
-                      /* @__PURE__ */ jsx("div", { className: "es:w-full es:h-px es:bg-secondary-200 es:shrink-0" }),
-                      list.isLoading && /* @__PURE__ */ jsx("div", { className: "es:p-3 es:min-h-16 es:flex es:items-center es:justify-center", children: cloneElement(icons.loader, { className: "es:text-accent-600! es:size-5 es:motion-preset-spin es:motion-duration-1500" }) }),
-                      /* @__PURE__ */ jsx(
-                        $eed445e0843c11d0$export$41f133550aa26f48,
-                        {
-                          className: clsx("es:space-y-0.5 es:p-1 es:any-focus:outline-hidden es:min-h-16", list.isLoading && "es:hidden", list?.items?.length > 0 && "es:overflow-y-auto"),
-                          items: list.items,
-                          selectedKeys: list.selectedKeys,
-                          selectionMode: "multiple",
-                          selectionBehavior: "toggle",
-                          onSelectionChange: (selected) => {
-                            list.setSelectedKeys(selected);
-                            handleSelectionChange(selected);
-                          },
-                          dependencies: [value],
-                          renderEmptyState: () => /* @__PURE__ */ jsx(
-                            RichLabel,
-                            {
-                              icon: icons.searchEmpty,
-                              label: __("No results", "eightshift-ui-components"),
-                              subtitle: __("Try a different search term", "eightshift-ui-components"),
-                              className: "es:min-h-14 es:p-2 es:w-fit es:mx-auto es:motion-preset-slide-up es:motion-ease-spring-bouncy es:motion-duration-200 es:shrink-0",
-                              iconClassName: "es:text-accent-700 es:icon:size-7!",
-                              noColor: true
-                            }
-                          ),
-                          children: (item) => {
-                            let icon2 = getIcon ? getIcon(item) : item?.icon ?? null;
-                            if (typeof item?.icon === "string") {
-                              icon2 = icons?.[item.icon] ?? null;
-                            }
-                            return /* @__PURE__ */ jsxs(
-                              OptionItemBase,
-                              {
-                                id: item?.value,
-                                className: item?.className,
-                                selectIndicator: true,
-                                children: [
-                                  customMenuOption && customMenuOption(item),
-                                  !customMenuOption && /* @__PURE__ */ jsx(
-                                    RichLabel,
-                                    {
-                                      icon: icon2,
-                                      label: item?.label,
-                                      subtitle: item?.subtitle,
-                                      noColor: true
-                                    }
-                                  )
-                                ]
-                              }
-                            );
-                          }
-                        }
-                      ),
-                      clearable && value.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx("div", { className: "es:w-full es:h-px es:bg-secondary-200 es:shrink-0" }),
-                        /* @__PURE__ */ jsx(
-                          $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
-                          {
-                            slot: "close",
-                            onPress: () => handleSelectionChange([]),
-                            className: clsx(
-                              "es:flex es:h-10 es:m-1 es:select-none es:items-center es:gap-1 es:rounded-xl es:px-2 es:py-1.5 es:transition es:scroll-m-1",
-                              "es:any-focus:outline-hidden es:overflow-clip",
-                              "es:not-selected:hover:bg-secondary-100 es:not-selected:hover:outline-hidden",
-                              "es:selected:bg-accent-600/15 es:selected:text-accent-950",
-                              "es:selected:focus-visible:inset-ring es:selected:focus-visible:inset-ring-accent-600/30",
-                              "es:not-selected:focus-visible:bg-secondary-100 es:not-selected:focus-visible:outline-hidden",
-                              "es:active:bg-accent-700/15"
-                            ),
-                            children: /* @__PURE__ */ jsx(
-                              RichLabel,
-                              {
-                                icon: icons.clearAlt,
-                                label: __("Clear selection", "eightshift-ui-components")
-                              }
-                            )
-                          }
-                        )
-                      ] })
-                    ]
-                  }
-                )
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-};
-export {
-  __AsyncMultiSelectNext
-};