@eightshift/ui-components 5.6.0 → 6.0.0

package/dist/components/select/{v2/async-select.js → async-select.js}

@@ -1,22 +1,22 @@
 import { jsx, jsxs } 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 { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../../Input-8yja_IHC.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../../Label-DWVaNd2E.js";
-import { $ as $eed445e0843c11d0$export$41f133550aa26f48 } from "../../../ListBox-CEpKw7yC.js";
-import { e as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../../Dialog-B8p4Ymh7.js";
-import { $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, b as $82d7e5349645de74$export$ef445b55be0601bd } from "../../../Select-CHzjZxXy.js";
-import { useRef, useEffect, cloneElement, useContext } 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 { unescapeHTML } from "../../../utilities/text-helpers.js";
-import "../../../sha256-C56UDWfQ.js";
-import { c as clsx } from "../../../utils-cvK1vxO7.js";
-import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66 } from "../../../useAsyncList-D52mQcrH.js";
+import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
+import { BaseControl } from "../base-control/base-control.js";
+import { $ as $d2f53cda644affe3$export$2f2b9559550c7bbc, a as $440f4836bcb56932$export$b94867ecbd698f21 } from "../../SearchField-CHYnN-jt.js";
+import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-BXjXzdW_.js";
+import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-CNNksOWg.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-D8a3eYb-.js";
+import { $ as $eed445e0843c11d0$export$41f133550aa26f48 } from "../../ListBox-Dd37zMvs.js";
+import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../Dialog-D8bjn-nh.js";
+import { $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, S as SelectClearButton, O as OptionItemBase } from "../../shared-DwjRce5e.js";
+import { useRef, cloneElement } from "react";
+import { icons } from "../../icons/icons.js";
+import "../../react-jsx-parser.min-B_hvYYa1.js";
+import { Spinner } from "../../icons/spinner.js";
+import { RichLabel } from "../rich-label/rich-label.js";
+import { unescapeHTML } from "../../utilities/text-helpers.js";
+import { c as cva } from "../../index-BHpUy2Ix.js";
+import { c as clsx } from "../../clsx-DgYk2OaC.js";
+import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66 } from "../../useAsyncList-D52mQcrH.js";
 /**
  * Select menu with async loading.
  *
@@ -47,9 +47,14 @@ import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66 } from "../../../useAsyn
  * @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.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
+ * @param {SelectSize} [props.size='default'] - Sets the size of the input field.
  * @param {boolean} [props.noMinWidth=false] - If `true`, the select menu will not have a minimum width.
+ * @param {string[]} [props.extraItemProps] - List of props to include to the option items.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
+ * @typedef {'small' | 'medium' | 'default' | 'large'} SelectSize
+ *
  * @returns {JSX.Element} The AsyncSelectNext component.
  *
  * @example
@@ -66,7 +71,7 @@ import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66 } from "../../../useAsyn
  *
  * @preserve
  */
-const AsyncSelectNext = (props) => {
+const AsyncSelect = (props) => {
   const {
     label,
     help,
@@ -93,12 +98,16 @@ const AsyncSelectNext = (props) => {
     getIcon,
     getSubtitle,
     getData = (data) => data,
+    extraItemProps,
     hidden,
+    flat,
+    size = "default",
     noMinWidth = false,
     ...rest
   } = props;
   const list = $f86e6c1ec7da6ebb$export$bc3384a35de93d66({
-    getKey: (item) => item.value,
+    initialSelectedKeys: value?.value ? [value?.value] : [],
+    getKey: (item) => item?.value,
     async load({ signal, filterText }) {
       let json = [];
       if (fetchFunction) {
@@ -110,7 +119,7 @@ const AsyncSelectNext = (props) => {
       }
       const output = json?.map((item, index) => {
         const id = getValue?.(item) ?? index;
-        const entry = { label: unescapeHTML(getLabel?.(item) ?? ""), value: id };
+        const entry = { ...item, label: unescapeHTML(getLabel?.(item) ?? ""), value: id };
         if (getMeta) {
           entry.meta = getMeta(item);
         }
@@ -119,51 +128,118 @@ const AsyncSelectNext = (props) => {
         }
         return entry;
       });
-      if (value && value?.value && (filterText ?? "").length < 1 && output.length > 0 && !output?.find((item) => item.value === value?.value)) {
+      if (filterText.length > 0) {
         return {
-          items: [value, ...output.slice(0, -1)],
-          selectedKeys: [value?.value]
+          items: output
         };
       }
+      let extra = [];
+      if (value && !output?.find((item) => item.value === value?.value)) {
+        extra = [value];
+        output.pop();
+      }
       return {
-        items: output
+        items: [...extra, ...output]
       };
     }
   });
   const ref = useRef();
-  useEffect(() => {
-    if (value?.value && !list.getItem(value?.value)) {
-      list.items[0] = value;
-    }
-    list.setSelectedKeys(value?.value ? [value.value] : []);
-    list.setFilterText("");
-  }, [value?.value]);
   if (hidden) {
     return null;
   }
+  const selectClass = cva(
+    [
+      "es:relative",
+      "es:flex es:items-center es:gap-px",
+      "es:leading-none",
+      "es:rounded-lg es:hover:rounded-xl es:has-focus-visible:rounded-2xl es:group-open:rounded-2xl",
+      "es:transition-plus",
+      "es:any-focus:outline-hidden",
+      "es:inset-ring",
+      "es:has-focus-visible:ring-2 es:has-focus-visible:ring-accent-500/30",
+      "es:has-focus-visible:text-accent-950 es:has-focus-visible:inset-ring-accent-500",
+      clearable && "es:pr-8",
+      "es:focus:placeholder:text-surface-400",
+      !noMinWidth && "es:min-w-48",
+      !inline && "es:w-fill",
+      className
+    ],
+    {
+      variants: {
+        size: {
+          small: ["es:min-h-8", "es:px-2.5"],
+          medium: ["es:min-h-9", "es:px-3"],
+          default: ["es:min-h-10", "es:px-3"],
+          large: ["es:min-h-12", "es:px-4"]
+        },
+        disabled: {
+          false: "es:selection:bg-surface-100 es:selection:text-accent-800",
+          true: "es:selection:bg-secondary-200 es:selection:text-secondary-600"
+        }
+      },
+      compoundVariants: [
+        {
+          flat: false,
+          disabled: false,
+          class: [
+            "es:bg-white",
+            "es:bg-linear-to-b es:from-secondary-100/0 es:to-secondary-100/50 es:from-25%",
+            "es:hover:from-surface-100/0 es:hover:to-surface-100/50",
+            "es:inset-ring-secondary-400/50 es:hover:inset-ring-surface-300 es:focus:inset-ring-surface-400",
+            "es:inset-shadow-sm es:inset-shadow-secondary-100/50",
+            "es:hover:placeholder:text-surface-400",
+            "es:placeholder:text-secondary-400",
+            "es:shadow-xs es:shadow-black/5"
+          ]
+        },
+        {
+          flat: true,
+          disabled: false,
+          class: [
+            "es:inset-ring-secondary-100",
+            "es:focus:text-accent-950",
+            "es:placeholder:text-secondary-500/80",
+            "es:bg-secondary-100 es:focus:bg-surface-50",
+            "es:inset-ring-secondary-200/15 es:hover:inset-ring-secondary-200/65 es:focus:inset-ring-surface-200"
+          ]
+        },
+        { disabled: true, class: ["es:bg-secondary-50 es:inset-ring-secondary-200 es:text-secondary-400"] },
+        { readOnly: true, flat: false, class: ["es:bg-secondary-50 es:inset-ring-secondary-300 es:text-secondary-400"] },
+        { readOnly: true, flat: true, class: ["es:bg-secondary-50 es:inset-ring-secondary-300/60 es:text-secondary-400"] }
+      ],
+      defaultVariants: { disabled: false, flat: false, size: "default" }
+    }
+  );
+  const handleSelectionChange = (selected) => {
+    list.filterText = "";
+    if (selected === null || selected === void 0) {
+      onChange(null);
+      return;
+    }
+    const item = list.items.find((item2) => item2.value === selected);
+    if (!item) {
+      onChange(null);
+      return;
+    }
+    if (item && "id" in item) {
+      delete item.id;
+    }
+    onChange({
+      label: item?.label,
+      value: item?.value,
+      subtitle: item?.subtitle,
+      meta: item?.meta
+    });
+  };
   return /* @__PURE__ */ jsx(
     $82d7e5349645de74$export$ef9b1a59e592288f,
     {
       isDisabled: disabled,
-      selectedKey: value?.value ?? null,
-      onSelectionChange: (selected) => {
-        list.filterText = "";
-        if (selected === null || selected === void 0) {
-          onChange(null);
-          return;
-        }
-        const item = list.items.find((item2) => item2.value === selected);
-        if (!item) {
-          onChange(null);
-          return;
-        }
-        if (item && "id" in item) {
-          delete item.id;
-        }
-        onChange(item);
-      },
+      value: value?.value ?? null,
+      onChange: (selected) => handleSelectionChange(selected),
       placeholder,
       ...rest,
+      className: clsx("es:group es:w-fill", rest?.className),
       children: /* @__PURE__ */ jsxs(
         BaseControl,
         {
@@ -178,27 +254,18 @@ const AsyncSelectNext = (props) => {
             /* @__PURE__ */ jsxs(
               "div",
               {
-                className: clsx(
-                  "es:relative es:flex es:items-center es:gap-1 es:px-1.5 es:focus-visible:outline-hidden es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
-                  "es: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
-                ),
+                className: selectClass({ disabled, flat, size }),
                 ref,
                 children: [
                   /* @__PURE__ */ jsxs($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: "es:any-focus:outline-hidden es:text-start es:size-full es:inline-block es:group es:overflow-x-clip", children: [
-                    /* @__PURE__ */ jsx($82d7e5349645de74$export$e288731fd71264f0, { children: ({ selectedItem }) => {
-                      if (!value?.value) {
-                        return /* @__PURE__ */ jsx("span", { className: "es:pointer-events-none es:pr-6 es:text-sm es:text-secondary-500", children: placeholder });
-                      }
-                      if (customValueDisplay) {
+                    /* @__PURE__ */ jsx($82d7e5349645de74$export$e288731fd71264f0, { children: ({ isPlaceholder, selectedItems }) => {
+                      const [selectedItem] = selectedItems;
+                      if (!isPlaceholder && selectedItem && customValueDisplay) {
                         return customValueDisplay(selectedItem);
                       }
+                      if (!selectedItem) {
+                        return /* @__PURE__ */ jsx("span", { className: "es:select-none es:pointer-events-none es:text-sm es:text-surface-500", children: placeholder });
+                      }
                       let icon2 = getIcon ? getIcon(selectedItem) : selectedItem?.icon ?? null;
                       if (typeof selectedItem?.icon === "string") {
                         icon2 = icons?.[selectedItem.icon] ?? null;
@@ -207,21 +274,23 @@ const AsyncSelectNext = (props) => {
                         RichLabel,
                         {
                           icon: icon2,
-                          label: /* @__PURE__ */ jsx("span", { className: "es:line-clamp-1", children: selectedItem?.label }),
-                          subtitle: /* @__PURE__ */ jsx("span", { className: "es:line-clamp-1", children: selectedItem?.subtitle }),
-                          className: clsx("es:pr-6 es:grow es:w-full", disabled && "es:grayscale es:pointer-events-none"),
-                          iconClassName: "es:pointer-events-none es:select-none"
+                          label: selectedItem?.label,
+                          subtitle: selectedItem?.subtitle,
+                          className: clsx("es:grow es:w-full", disabled && "es:grayscale es:pointer-events-none"),
+                          iconClassName: "es:pointer-events-none es:select-none",
+                          labelClassName: "es:line-clamp-1",
+                          subtitleClassName: "es:line-clamp-1"
                         }
                       );
                     } }),
                     /* @__PURE__ */ jsxs(
                       "div",
                       {
-                        className: clsx("es:absolute es:bottom-0 es:right-1 es:top-0 es:my-auto es:flex es:items-center", disabled ? "es:text-secondary-300" : "es:text-secondary-500"),
+                        className: clsx("es:absolute es:bottom-0 es:right-3 es:top-0 es:my-auto es:flex es:items-center", disabled ? "es:text-secondary-300" : "es:text-secondary-500"),
                         "aria-hidden": "true",
                         children: [
-                          !customDropdownArrow && cloneElement(icons.dropdownCaretAlt, {
-                            className: "es:w-4 es:group-aria-expanded:-scale-y-100 es:transition-transform es:duration-200"
+                          !customDropdownArrow && cloneElement(icons.dropdownCaret, {
+                            className: "es:w-4 es:stroke-[1.2] es:group-aria-expanded:-scale-y-100 es:transition-transform es:duration-200"
                           }),
                           customDropdownArrow && /* @__PURE__ */ jsx(
                             "div",
@@ -243,15 +312,27 @@ const AsyncSelectNext = (props) => {
               $07b14b47974efb58$export$5b6b19405a83ff9d,
               {
                 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:w-(--trigger-width) es:min-w-72",
+                  "es:outline-hidden",
+                  "es:rounded-t-3xl",
+                  "es:overflow-clip es:grid es:grid-cols-1",
+                  "es:grid-rows-[auto_minmax(0,1fr)]",
+                  "es:has-last-selected:rounded-b-20!",
+                  "es:inset-ring es:inset-ring-surface-500/10",
+                  "es:inset-shadow-sm es:inset-shadow-white/30",
+                  !list?.items?.length ? "es:bg-surface-50/50" : "es:bg-surface-300/50",
+                  !list?.items?.length ? "es:backdrop-blur-sm" : "es:backdrop-blur-md",
+                  !list?.items?.length ? "es:backdrop-brightness-105" : "es:backdrop-brightness-110",
+                  list.isLoading || !list?.items?.length ? "es:rounded-b-3xl" : "es:rounded-b-xl",
+                  "es:backdrop-saturate-125",
+                  "es:shadow-lg es:shadow-black/10",
+                  "es:transition-plus",
+                  "es:motion-duration-300 es: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%]"
+                  isEntering && "es:motion-scale-x-in-95 es:motion-scale-y-in-85 es:motion-opacity-in-0 es:motion-blur-in-[2px]",
+                  isEntering && "es:placement-top:motion-translate-y-in-[0.5rem] es:placement-bottom:motion-translate-y-in-[-0.5rem]",
+                  isExiting && "es:motion-scale-x-out-95 es:motion-scale-y-out-85 es:motion-opacity-out-0 es:motion-blur-out-xs",
+                  isExiting && "es:placement-top:motion-translate-y-out-[0.5rem] es:placement-bottom:motion-translate-y-out-[-0.5rem]"
                 ),
                 placement: "bottom left",
                 maxHeight: 300,
@@ -266,14 +347,19 @@ const AsyncSelectNext = (props) => {
                         $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,
+                          className: "es:flex es:items-center es:relative",
                           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"
+                                className: clsx(
+                                  "es:peer es:size-full es:h-9.5 es:outline-hidden es:pl-3.5 es:pr-9 es:shadow-none es:text-13 es:placeholder:text-surface-500 es:[&::-webkit-search-cancel-button]:hidden",
+                                  "es:bg-accent-900/8 es:m-1.5 es:rounded-3xl es:border-none",
+                                  "es:inset-ring es:inset-ring-accent-950/7 es:focus:inset-ring-accent-950/20",
+                                  "es:text-accent-950 es:placeholder:text-accent-700/50",
+                                  "es:transition"
+                                )
                               }
                             ),
                             /* @__PURE__ */ jsx(
@@ -281,8 +367,8 @@ const AsyncSelectNext = (props) => {
                               {
                                 "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:absolute es:right-3 es:top-0 es:bottom-0 es:my-auto es:border-none es:bg-transparent",
+                                  "es:flex es:size-7 es:items-center es:justify-center es:rounded-3xl es:text-sm es:text-surface-700 es:transition es:hover:bg-accent-50 es:hover:text-accent-800 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
@@ -291,13 +377,17 @@ const AsyncSelectNext = (props) => {
                           ]
                         }
                       ),
-                      /* @__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" }) }),
+                      list.isLoading && /* @__PURE__ */ jsx("div", { className: "es:p-3 es:min-h-16 es:flex es:items-center es:justify-center", children: /* @__PURE__ */ jsx(Spinner, {}) }),
                       /* @__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"),
+                          className: clsx("es:space-y-0.75 es:p-1.5 es:pt-0 es:any-focus:outline-hidden es:h-full es:overflow-y-auto es:rounded-t-xl", list?.isLoading && "es:hidden"),
                           items: list.items,
+                          selectedKeys: list.selectedKeys,
+                          onSelectionChange: (selected) => {
+                            list.setSelectedKeys(selected);
+                            handleSelectionChange(selected);
+                          },
                           renderEmptyState: () => /* @__PURE__ */ jsx(
                             RichLabel,
                             {
@@ -319,6 +409,7 @@ const AsyncSelectNext = (props) => {
                               {
                                 id: item?.value,
                                 className: item?.className,
+                                selectIndicator: true,
                                 children: [
                                   customMenuOption && customMenuOption(item),
                                   !customMenuOption && /* @__PURE__ */ jsx(
@@ -327,6 +418,8 @@ const AsyncSelectNext = (props) => {
                                       icon: icon2,
                                       label: item?.label,
                                       subtitle: item?.subtitle,
+                                      labelClassName: "es:line-clamp-1",
+                                      subtitleClassName: "es:line-clamp-1",
                                       noColor: true
                                     }
                                   )
@@ -347,23 +440,6 @@ const AsyncSelectNext = (props) => {
     }
   );
 };
-const SelectClearButton = () => {
-  const state = useContext($82d7e5349645de74$export$ef445b55be0601bd);
-  const isEmpty = state?.selectedKey === null;
-  return /* @__PURE__ */ jsx(
-    $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
-    {
-      "aria-label": __("Clear value", "eightshift-ui-components"),
-      className: clsx(
-        "es:mr-6 es:flex es:h-6 es:w-8 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",
-        isEmpty ? "es:hidden" : "es:flex"
-      ),
-      onPress: () => state?.setSelectedKey(null),
-      slot: null,
-      children: icons.clearAlt
-    }
-  );
-};
 export {
-  AsyncSelectNext
+  AsyncSelect
 };