@firecms/ui 3.0.0-canary.120 → 3.0.0-canary.121

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { useEffect, useState, useCallback, useRef, useMemo, forwardRef, useLayoutEffect, useDeferredValue } from "react";
+import React__default, { useEffect, useState, useCallback, useRef, useMemo, Children, forwardRef, useLayoutEffect, useDeferredValue } from "react";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -15,8 +15,8 @@ import equal from "react-fast-compare";
 import MarkdownIt from "markdown-it";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
-import { Command } from "cmdk";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { Command } from "cmdk";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import * as SelectPrimitive from "@radix-ui/react-select";
@@ -15501,485 +15501,279 @@ function MenubarShortcut({
 function MenubarSubTriggerIndicator() {
   return /* @__PURE__ */ jsx("div", { className: "ml-auto pl-5 ", children: /* @__PURE__ */ jsx(ChevronRightIcon, { size: "small" }) });
 }
-function SelectInputLabel({ children, error }) {
-  return /* @__PURE__ */ jsx("div", { className: cls(
-    "text-sm  font-medium ml-3.5 mb-1",
-    error ? "text-red-500 dark:text-red-600" : "text-slate-500 dark:text-slate-300"
-  ), children });
-}
-const MultiSelectContext = React.createContext({});
-function MultiSelect({
-  value,
-  open,
-  onMultiValueChange,
-  size = "medium",
-  label,
-  disabled,
-  renderValue,
-  renderValues,
-  containerClassName,
-  className,
-  children,
-  error
+function Separator({
+  orientation,
+  decorative,
+  className
 }) {
-  const containerRef = React.useRef(null);
-  const inputRef = React.useRef(null);
-  const listRef = React.useRef(null);
-  useOutsideAlerter(listRef, () => setOpenInternal(false));
-  const [openInternal, setOpenInternal] = React.useState(false);
-  useEffect(() => {
-    setOpenInternal(open ?? false);
-  }, [open]);
-  const onValueChangeInternal = React.useCallback((newValue) => {
-    if (Array.isArray(value) && value.includes(newValue)) {
-      onMultiValueChange?.(value.filter((v) => v !== newValue));
-    } else {
-      onMultiValueChange?.([...value ?? [], newValue]);
-    }
-  }, [value, onMultiValueChange]);
-  const [inputValue, setInputValue] = React.useState("");
-  const [boundingRect, setBoundingRect] = React.useState(null);
-  const handleKeyDown = React.useCallback((e) => {
-    const input = inputRef.current;
-    if (input) {
-      if (e.key === "Delete" || e.key === "Backspace") {
-        if (input.value === "") {
-          const newSelected = [...value ?? []];
-          newSelected.pop();
-          onMultiValueChange?.(newSelected);
-        }
-      }
-      if (e.key === "Escape") {
-        input.blur();
-        setOpenInternal(false);
-        e.stopPropagation();
-      }
-    }
-  }, [onMultiValueChange, value]);
-  const openDialog = React.useCallback(() => {
-    setBoundingRect(containerRef.current?.getBoundingClientRect() ?? null);
-    setOpenInternal(true);
-  }, []);
-  const usedBoundingRect = boundingRect ?? containerRef.current?.getBoundingClientRect();
-  const maxHeight = window.innerHeight - (usedBoundingRect?.top ?? 0) - (usedBoundingRect?.height ?? 0) - 16;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    typeof label === "string" ? /* @__PURE__ */ jsx(SelectInputLabel, { error, children: label }) : label,
-    /* @__PURE__ */ jsxs(
-      Command,
-      {
-        onKeyDown: handleKeyDown,
-        onClick: () => {
-          inputRef.current?.focus();
-          openDialog();
-        },
-        className: cls("relative overflow-visible bg-transparent", containerClassName),
-        children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              ref: containerRef,
-              className: cls(
-                "flex flex-row",
-                size === "small" ? "min-h-[42px]" : "min-h-[64px]",
-                "select-none rounded-md text-sm",
-                fieldBackgroundMixin,
-                disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
-                "relative flex items-center",
-                "p-4",
-                error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark",
-                error ? "border border-red-500 dark:border-red-600" : "",
-                className
-              ),
-              children: [
-                /* @__PURE__ */ jsxs("div", { className: cls("flex-grow flex gap-1.5 flex-wrap items-center"), children: [
-                  renderValue && (value ?? []).map((v, i) => renderValue(v, i)),
-                  renderValues && renderValues(value ?? []),
-                  /* @__PURE__ */ jsx(
-                    Command.Input,
-                    {
-                      ref: inputRef,
-                      value: inputValue,
-                      onValueChange: setInputValue,
-                      onFocus: openDialog,
-                      className: cls("ml-2 bg-transparent outline-none flex-1 h-full w-full ", focusedDisabled)
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsx("div", { className: "px-2 h-full flex items-center", children: /* @__PURE__ */ jsx(
-                  ExpandMoreIcon,
-                  {
-                    size: "small",
-                    className: cls("transition ", openInternal ? "rotate-180" : "")
-                  }
-                ) })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            DialogPrimitive.Root,
-            {
-              open: openInternal,
-              modal: true,
-              onOpenChange: setOpenInternal,
-              children: /* @__PURE__ */ jsx(DialogPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-                MultiSelectContext.Provider,
-                {
-                  value: {
-                    fieldValue: value,
-                    setInputValue,
-                    onValueChangeInternal
-                  },
-                  children: /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      ref: listRef,
-                      className: "z-50 absolute overflow-auto outline-none",
-                      style: {
-                        pointerEvents: openInternal ? "auto" : "none",
-                        top: (usedBoundingRect?.top ?? 0) + (usedBoundingRect?.height ?? 0),
-                        left: usedBoundingRect?.left,
-                        // right: boundingRect?.right,
-                        width: usedBoundingRect?.width,
-                        maxHeight
-                      },
-                      children: /* @__PURE__ */ jsx(
-                        Command.Group,
-                        {
-                          className: "mt-2 text-slate-900 dark:text-white animate-in z-50 border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-800 p-2 rounded-lg shadow-lg flex flex-col outline-none w-full",
-                          children
-                        }
-                      )
-                    }
-                  )
-                }
-              ) })
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-function MultiSelectItem({ children, value, className }) {
-  const context = React.useContext(MultiSelectContext);
-  if (!context) throw new Error("MultiSelectItem must be used inside a MultiSelect");
-  const { fieldValue, setInputValue, onValueChangeInternal } = context;
-  return /* @__PURE__ */ jsx(
-    Command.Item,
-    {
-      onMouseDown: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      },
-      onSelect: (_) => {
-        setInputValue("");
-        onValueChangeInternal(value);
-      },
-      className: cls(
-        (fieldValue ?? []).includes(value) ? "bg-slate-200 dark:bg-slate-950" : "",
-        "cursor-pointer",
-        "m-1",
-        "ring-offset-transparent",
-        "p-2 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-offset-2",
-        "aria-[selected=true]:bg-slate-100 aria-[selected=true]:dark:bg-slate-900",
-        "cursor-pointer p-2 rounded aria-[selected=true]:bg-slate-100 aria-[selected=true]:dark:bg-slate-900",
-        className
-      ),
-      children
-    }
-  );
-}
-function Separator({ orientation, decorative }) {
   if (orientation === "horizontal")
     return /* @__PURE__ */ jsx(
       SeparatorPrimitive.Root,
       {
         decorative,
         orientation: "horizontal",
-        className: "dark:bg-opacity-50 bg-opacity-50 dark:bg-gray-600 bg-gray-300 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-[8px]"
+        className: cls("dark:bg-opacity-80 dark:bg-gray-800 bg-gray-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-4", className)
       }
     );
   else
     return /* @__PURE__ */ jsx(
       SeparatorPrimitive.Root,
       {
-        className: "dark:bg-opacity-50 bg-opacity-50 dark:bg-gray-600 bg-gray-300 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-[8px]",
+        className: cls("dark:bg-opacity-80 dark:bg-gray-800 bg-gray-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-4", className),
         decorative,
         orientation: "vertical"
       }
     );
 }
-const NewMultiSelect = React.forwardRef(
+function SelectInputLabel({ children, error }) {
+  return /* @__PURE__ */ jsx("div", { className: cls(
+    "text-sm  font-medium ml-3.5 mb-1",
+    error ? "text-red-500 dark:text-red-600" : "text-slate-500 dark:text-slate-300"
+  ), children });
+}
+const MultiSelectContext = React.createContext({});
+const MultiSelect = React.forwardRef(
   ({
+    value,
     size,
-    options,
+    label,
+    error,
     onValueChange,
     invisible,
     disabled,
-    variant,
-    defaultValue = [],
-    placeholder = "Select options",
-    animation = 0,
-    maxCount = 3,
+    placeholder,
     modalPopover = false,
-    asChild = false,
+    includeClear = true,
+    useChips = true,
     className,
-    ...props
+    children,
+    renderValues,
+    open,
+    onOpenChange
   }, ref) => {
-    const [selectedValues, setSelectedValues] = React.useState(defaultValue);
-    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+    const [isPopoverOpen, setIsPopoverOpen] = React.useState(open ?? false);
+    const [selectedValues, setSelectedValues] = React.useState(value ?? []);
+    console.log("selectedValues", selectedValues);
+    const onPopoverOpenChange = (open2) => {
+      setIsPopoverOpen(open2);
+      onOpenChange?.(open2);
+    };
+    useEffect(() => {
+      setIsPopoverOpen(open ?? false);
+    }, [open]);
+    const allValues = children ? (
+      // @ts-ignore
+      Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return child.props.value;
+        }
+        return null;
+      }).filter(Boolean)
+    ) : [];
     React.useEffect(() => {
-      setSelectedValues(defaultValue);
-    }, [defaultValue]);
+      setSelectedValues(value ?? []);
+    }, [value]);
+    function onItemClick(newValue) {
+      let newSelectedValues;
+      if (selectedValues.includes(newValue)) {
+        newSelectedValues = selectedValues.filter((v) => v !== newValue);
+      } else {
+        newSelectedValues = [...selectedValues, newValue];
+      }
+      updateValues(newSelectedValues);
+    }
+    function updateValues(values) {
+      setSelectedValues(values);
+      onValueChange?.(values);
+    }
     const handleInputKeyDown = (event) => {
       if (event.key === "Enter") {
-        setIsPopoverOpen(true);
+        onPopoverOpenChange(true);
       } else if (event.key === "Backspace" && !event.currentTarget.value) {
         const newSelectedValues = [...selectedValues];
         newSelectedValues.pop();
-        setSelectedValues(newSelectedValues);
-        onValueChange(newSelectedValues);
+        updateValues(newSelectedValues);
       }
     };
-    const toggleOption = (value) => {
-      const newSelectedValues = selectedValues.includes(value) ? selectedValues.filter((v) => v !== value) : [...selectedValues, value];
-      setSelectedValues(newSelectedValues);
-      onValueChange(newSelectedValues);
+    const toggleOption = (value2) => {
+      const newSelectedValues = selectedValues.includes(value2) ? selectedValues.filter((v) => v !== value2) : [...selectedValues, value2];
+      updateValues(newSelectedValues);
     };
     const handleClear = () => {
-      setSelectedValues([]);
-      onValueChange([]);
+      updateValues([]);
     };
     const handleTogglePopover = () => {
-      setIsPopoverOpen((prev) => !prev);
-    };
-    const clearExtraOptions = () => {
-      const newSelectedValues = selectedValues.slice(0, maxCount);
-      setSelectedValues(newSelectedValues);
-      onValueChange(newSelectedValues);
+      onPopoverOpenChange(!isPopoverOpen);
     };
     const toggleAll = () => {
-      if (selectedValues.length === options.length) {
+      if (selectedValues.length === allValues.length) {
         handleClear();
       } else {
-        const allValues = options.map((option) => option.value);
-        setSelectedValues(allValues);
-        onValueChange(allValues);
+        updateValues(allValues);
       }
     };
+    useInjectStyles("MultiSelect", `
+[cmdk-group] {
+  max-height: 45vh;
+  overflow-y: auto;
+  // width: 400px;
+} `);
     return /* @__PURE__ */ jsxs(
-      PopoverPrimitive.Root,
+      MultiSelectContext.Provider,
       {
-        open: isPopoverOpen,
-        onOpenChange: setIsPopoverOpen,
-        modal: modalPopover,
+        value: {
+          fieldValue: selectedValues,
+          onItemClick
+        },
         children: [
-          /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
-            "button",
+          typeof label === "string" ? /* @__PURE__ */ jsx(SelectInputLabel, { error, children: label }) : label,
+          /* @__PURE__ */ jsxs(
+            PopoverPrimitive.Root,
             {
-              ref,
-              ...props,
-              onClick: handleTogglePopover,
-              className: cls(
-                size === "small" ? "min-h-[42px]" : "min-h-[64px]",
-                "select-none rounded-md text-sm",
-                invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
-                disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
-                "relative flex items-center",
-                className
-              ),
-              children: selectedValues.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center w-full", children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center", children: [
-                  selectedValues.slice(0, maxCount).map((value) => {
-                    const option = options.find((o) => o.value === value);
-                    return /* @__PURE__ */ jsxs(
-                      Chip,
-                      {
-                        className: cls(
-                          "m-1 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300",
-                          {
-                            "border-foreground/10 text-foreground bg-card hover:bg-card/80": variant === "default",
-                            "border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80": variant === "secondary",
-                            "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80": variant === "destructive"
+              open: isPopoverOpen,
+              onOpenChange: onPopoverOpenChange,
+              modal: modalPopover,
+              children: [
+                /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    ref,
+                    onClick: handleTogglePopover,
+                    className: cls(
+                      size === "small" ? "min-h-[42px]" : "min-h-[64px]",
+                      "py-2",
+                      "px-4",
+                      "select-none rounded-md text-sm",
+                      invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
+                      disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
+                      "relative flex items-center",
+                      className
+                    ),
+                    children: selectedValues.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center w-full", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5 text-start", children: [
+                        renderValues && renderValues(selectedValues),
+                        !renderValues && selectedValues.map((value2) => {
+                          const childrenProps = Children.map(children, (child) => {
+                            if (React.isValidElement(child)) {
+                              return child.props;
+                            }
+                          }).filter(Boolean);
+                          const option = childrenProps.find((o) => o.value === value2);
+                          if (!useChips) {
+                            return option?.children;
                           }
-                        ),
-                        style: { animationDuration: `${animation}s` },
-                        children: [
-                          option?.label,
-                          /* @__PURE__ */ jsx(
-                            CloseIcon,
+                          return /* @__PURE__ */ jsxs(
+                            Chip,
                             {
-                              size: "smallest",
-                              onClick: (event) => {
-                                event.stopPropagation();
-                                toggleOption(value);
-                              }
-                            }
-                          )
-                        ]
-                      },
-                      value
-                    );
-                  }),
-                  selectedValues.length > maxCount && /* @__PURE__ */ jsxs(
-                    Chip,
-                    {
-                      className: cls(
-                        "bg-transparent text-foreground border-foreground/1 hover:bg-transparent",
-                        "m-1 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300",
-                        {
-                          "border-foreground/10 text-foreground bg-card hover:bg-card/80": variant === "default",
-                          "border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80": variant === "secondary",
-                          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80": variant === "destructive"
-                        }
-                      ),
-                      style: { animationDuration: `${animation}s` },
-                      children: [
-                        `+ ${selectedValues.length - maxCount} more`,
-                        /* @__PURE__ */ jsx(
+                              size: "small",
+                              className: cls("flex flex-row items-center p-1"),
+                              children: [
+                                option?.children,
+                                /* @__PURE__ */ jsx(
+                                  CloseIcon,
+                                  {
+                                    size: "smallest",
+                                    onClick: (event) => {
+                                      event.stopPropagation();
+                                      toggleOption(value2);
+                                    }
+                                  }
+                                )
+                              ]
+                            },
+                            value2
+                          );
+                        })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+                        includeClear && /* @__PURE__ */ jsx(
                           CloseIcon,
                           {
-                            size: "smallest",
+                            className: "ml-4",
+                            size: "small",
                             onClick: (event) => {
                               event.stopPropagation();
-                              clearExtraOptions();
+                              handleClear();
                             }
                           }
-                        )
-                      ]
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ jsx(
-                    CloseIcon,
-                    {
-                      size: "small",
-                      onClick: (event) => {
-                        event.stopPropagation();
-                        handleClear();
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Separator,
-                    {
-                      orientation: "vertical"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsx(
-                    ExpandMoreIcon,
-                    {
-                      size: "small",
-                      className: cls("transition", isPopoverOpen ? "rotate-180" : "")
-                    }
-                  ) })
-                ] })
-              ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full mx-auto", children: [
-                /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground mx-3", children: placeholder }),
-                /* @__PURE__ */ jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsx(
-                  ExpandMoreIcon,
-                  {
-                    size: "small",
-                    className: cls("transition", isPopoverOpen ? "rotate-180" : "")
+                        ),
+                        /* @__PURE__ */ jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsx(
+                          ExpandMoreIcon,
+                          {
+                            size: "small",
+                            className: cls("transition", isPopoverOpen ? "rotate-180" : "")
+                          }
+                        ) })
+                      ] })
+                    ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full mx-auto", children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-sm", children: placeholder }),
+                      /* @__PURE__ */ jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsx(
+                        ExpandMoreIcon,
+                        {
+                          size: "small",
+                          className: cls("transition", isPopoverOpen ? "rotate-180" : "")
+                        }
+                      ) })
+                    ] })
                   }
-                ) })
-              ] })
-            }
-          ) }),
-          /* @__PURE__ */ jsx(
-            PopoverPrimitive.Content,
-            {
-              className: cls("z-50 relative overflow-hidden border bg-white dark:bg-gray-900 p-2 rounded-lg", defaultBorderMixin),
-              align: "start",
-              onEscapeKeyDown: () => setIsPopoverOpen(false),
-              children: /* @__PURE__ */ jsxs(Command, { children: [
+                ) }),
                 /* @__PURE__ */ jsx(
-                  Command.Input,
+                  PopoverPrimitive.Content,
                   {
-                    className: cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full m-4"),
-                    placeholder: "Search...",
-                    onKeyDown: handleInputKeyDown
-                  }
-                ),
-                /* @__PURE__ */ jsxs(Command.List, { children: [
-                  /* @__PURE__ */ jsx(Command.Empty, { children: "No results found." }),
-                  /* @__PURE__ */ jsxs(Command.Group, { children: [
-                    /* @__PURE__ */ jsxs(
-                      Command.Item,
-                      {
-                        onSelect: toggleAll,
-                        className: cls(
-                          // (fieldValue ?? []).includes(value) ? "bg-slate-200 dark:bg-slate-950" : "",
-                          "cursor-pointer",
-                          "flex flex-row items-center gap-2",
-                          "ring-offset-transparent",
-                          "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-offset-2",
-                          "aria-[selected=true]:bg-slate-100 aria-[selected=true]:dark:bg-slate-900",
-                          "cursor-pointer p-1 rounded aria-[selected=true]:bg-slate-100 aria-[selected=true]:dark:bg-slate-900",
-                          className
+                    className: cls("z-50 relative overflow-hidden border bg-white dark:bg-gray-900 rounded-lg w-[400px]", defaultBorderMixin),
+                    align: "start",
+                    sideOffset: 8,
+                    onEscapeKeyDown: () => onPopoverOpenChange(false),
+                    children: /* @__PURE__ */ jsxs(Command, { children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
+                        /* @__PURE__ */ jsx(
+                          Command.Input,
+                          {
+                            className: cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full m-4 flex-grow"),
+                            placeholder: "Search...",
+                            onKeyDown: handleInputKeyDown
+                          }
                         ),
-                        children: [
-                          /* @__PURE__ */ jsx(Checkbox, { checked: selectedValues.length === options.length, size: "small" }),
-                          /* @__PURE__ */ jsx("span", { children: "(Select All)" })
-                        ]
-                      },
-                      "all"
-                    ),
-                    options.map((option) => {
-                      const isSelected = selectedValues.includes(option.value);
-                      return /* @__PURE__ */ jsxs(
-                        Command.Item,
-                        {
-                          onSelect: () => toggleOption(option.value),
-                          className: cls(
-                            // (fieldValue ?? []).includes(value) ? "bg-slate-200 dark:bg-slate-950" : "",
-                            "cursor-pointer",
-                            "flex flex-row items-center gap-2",
-                            "ring-offset-transparent",
-                            "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-offset-2",
-                            "aria-[selected=true]:bg-slate-100 aria-[selected=true]:dark:bg-slate-900",
-                            "cursor-pointer p-1 rounded aria-[selected=true]:bg-slate-100 aria-[selected=true]:dark:bg-slate-900",
-                            className
+                        selectedValues.length > 0 && /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            onClick: handleClear,
+                            className: "text-sm justify-center cursor-pointer py-3 px-4 text-text-secondary dark:text-text-secondary-dark",
+                            children: "Clear"
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsx(Separator, { orientation: "horizontal", className: "my-0" }),
+                      /* @__PURE__ */ jsxs(Command.List, { children: [
+                        /* @__PURE__ */ jsx(Command.Empty, { className: "px-4 py-2", children: "No results found." }),
+                        /* @__PURE__ */ jsxs(Command.Group, { children: [
+                          /* @__PURE__ */ jsxs(
+                            Command.Item,
+                            {
+                              onSelect: toggleAll,
+                              className: cls(
+                                "flex flex-row items-center gap-1.5",
+                                "cursor-pointer",
+                                "m-1",
+                                "ring-offset-transparent",
+                                "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-offset-2",
+                                "aria-[selected=true]:bg-slate-100 aria-[selected=true]:dark:bg-slate-900",
+                                "cursor-pointer p-2 rounded aria-[selected=true]:bg-slate-100 aria-[selected=true]:dark:bg-slate-900"
+                              ),
+                              children: [
+                                /* @__PURE__ */ jsx(InnerCheckBox, { checked: selectedValues.length === allValues.length }),
+                                /* @__PURE__ */ jsx("span", { className: "text-sm text-text-secondary dark:text-text-secondary-dark", children: "(Select All)" })
+                              ]
+                            },
+                            "all"
                           ),
-                          children: [
-                            /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, size: "small" }),
-                            /* @__PURE__ */ jsx("span", { children: option.label })
-                          ]
-                        },
-                        option.value
-                      );
-                    })
-                  ] }),
-                  /* @__PURE__ */ jsx(Command.Separator, {}),
-                  /* @__PURE__ */ jsx(Command.Group, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-                    selectedValues.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                      /* @__PURE__ */ jsx(
-                        Command.Item,
-                        {
-                          onSelect: handleClear,
-                          className: "flex-1 justify-center cursor-pointer",
-                          children: "Clear"
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Separator,
-                        {
-                          orientation: "vertical"
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsx(
-                      Command.Item,
-                      {
-                        onSelect: () => setIsPopoverOpen(false),
-                        className: "flex-1 justify-center cursor-pointer max-w-full",
-                        children: "Close"
-                      }
-                    )
-                  ] }) })
-                ] })
-              ] })
+                          children
+                        ] })
+                      ] })
+                    ] })
+                  }
+                )
+              ]
             }
           )
         ]
@@ -15987,7 +15781,66 @@ const NewMultiSelect = React.forwardRef(
     );
   }
 );
-NewMultiSelect.displayName = "MultiSelect";
+MultiSelect.displayName = "MultiSelect";
+function MultiSelectItem({
+  children,
+  value,
+  className
+}) {
+  const context = React.useContext(MultiSelectContext);
+  if (!context) throw new Error("MultiSelectItem must be used inside a MultiSelect");
+  const {
+    fieldValue,
+    onItemClick
+  } = context;
+  const isSelected = (fieldValue ?? []).includes(value);
+  return /* @__PURE__ */ jsxs(
+    Command.Item,
+    {
+      onMouseDown: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      onSelect: (_) => {
+        onItemClick(value);
+      },
+      className: cls(
+        "flex flex-row items-center gap-1.5",
+        isSelected ? "bg-slate-200 dark:bg-slate-950" : "",
+        "cursor-pointer",
+        "m-1",
+        "ring-offset-transparent",
+        "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-offset-2",
+        "aria-[selected=true]:bg-slate-100 aria-[selected=true]:dark:bg-slate-900",
+        "cursor-pointer p-2 rounded aria-[selected=true]:bg-slate-100 aria-[selected=true]:dark:bg-slate-900",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(InnerCheckBox, { checked: isSelected }),
+        children
+      ]
+    }
+  );
+}
+function InnerCheckBox({ checked }) {
+  return /* @__PURE__ */ jsx("div", { className: cls(
+    "p-2",
+    "w-8 h-8",
+    "inline-flex items-center justify-center text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150"
+  ), children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cls(
+        "border-2 relative transition-colors ease-in-out duration-150",
+        "w-4 h-4 rounded flex items-center justify-center",
+        checked ? "bg-primary" : "bg-white dark:bg-slate-900",
+        checked ? "text-slate-100 dark:text-slate-900" : "",
+        checked ? "border-transparent" : "border-slate-800 dark:border-slate-200"
+      ),
+      children: checked && /* @__PURE__ */ jsx(Icon, { iconKey: "check", size: 16, className: "absolute" })
+    }
+  ) });
+}
 function Paper({
   children,
   style,
@@ -16127,40 +15980,28 @@ const Select = forwardRef(({
   value,
   onChange,
   onValueChange,
-  onMultiValueChange,
   className,
   inputClassName,
   placeholder,
   renderValue,
-  renderValues,
   label,
   size = "medium",
-  includeFocusOutline = true,
   error,
   disabled,
   padding = true,
   position = "item-aligned",
   endAdornment,
-  multiple,
   invisible,
   children,
   ...props
 }, ref) => {
-  const [openInternal, setOpenInternal] = useState(false);
+  const [openInternal, setOpenInternal] = useState(open ?? false);
   useEffect(() => {
     setOpenInternal(open ?? false);
   }, [open]);
   const onValueChangeInternal = useCallback((newValue) => {
-    if (multiple) {
-      if (Array.isArray(value) && value.includes(newValue)) {
-        onMultiValueChange?.(value.filter((v) => v !== newValue));
-      } else {
-        onMultiValueChange?.([...value ?? [], newValue]);
-      }
-    } else {
-      onValueChange?.(newValue);
-    }
-    if (!multiple && onChange) {
+    onValueChange?.(newValue);
+    if (onChange) {
       const event = {
         target: {
           name,
@@ -16169,14 +16010,13 @@ const Select = forwardRef(({
       };
       onChange(event);
     }
-  }, [multiple, onChange, value, onMultiValueChange, onValueChange]);
+  }, [onChange, value, onValueChange]);
   const hasValue = Array.isArray(value) ? value.length > 0 : value != null;
   return /* @__PURE__ */ jsxs(
     SelectPrimitive.Root,
     {
       name,
-      value: Array.isArray(value) ? void 0 : value,
-      defaultOpen: open,
+      value,
       open: openInternal,
       disabled,
       onValueChange: onValueChangeInternal,
@@ -16216,6 +16056,10 @@ const Select = forwardRef(({
                     "relative flex items-center",
                     inputClassName
                   ),
+                  onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                  },
                   children: [
                     /* @__PURE__ */ jsx(
                       "div",
@@ -16226,11 +16070,22 @@ const Select = forwardRef(({
                           "overflow-visible",
                           size === "small" ? "h-[42px]" : "h-[64px]"
                         ),
-                        children: /* @__PURE__ */ jsxs(SelectPrimitive.Value, { placeholder, className: "w-full", children: [
-                          renderValue && (hasValue && Array.isArray(value) ? value.map((v, i) => /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 max-w-full", children: renderValue ? renderValue(v, i) : v }, v)) : typeof value === "string" ? renderValue ? renderValue(value, 0) : value : placeholder),
-                          renderValues && (!hasValue || Array.isArray(value)) ? renderValues(value ?? []) : null,
-                          !renderValue && !renderValues && hasValue
-                        ] })
+                        children: /* @__PURE__ */ jsxs(
+                          SelectPrimitive.Value,
+                          {
+                            onClick: (e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+                            },
+                            placeholder,
+                            className: "w-full",
+                            children: [
+                              !hasValue && placeholder,
+                              hasValue && value && renderValue ? renderValue(value) : placeholder,
+                              hasValue && !renderValue && value
+                            ]
+                          }
+                        )
                       }
                     ),
                     /* @__PURE__ */ jsx(SelectPrimitive.Icon, { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsx(ExpandMoreIcon, { size: "small", className: cls("transition", open ? "rotate-180" : "") }) })
@@ -16241,7 +16096,10 @@ const Select = forwardRef(({
                 "div",
                 {
                   className: cls("absolute h-full flex items-center", size === "small" ? "right-10" : "right-14"),
-                  onClick: (e) => e.stopPropagation(),
+                  onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                  },
                   children: endAdornment
                 }
               )
@@ -17059,7 +16917,7 @@ function Popover({
           {
             className: cls(
               paperMixin,
-              "PopoverContent shadow z-40",
+              "PopoverContent z-40",
               className
             ),
             side,
@@ -19288,7 +19146,6 @@ export {
   NetworkWifiLockedIcon,
   NeurologyIcon,
   NewLabelIcon,
-  NewMultiSelect,
   NewReleasesIcon,
   NewWindowIcon,
   NewsIcon,