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

package/dist/index.umd.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react"), require("@radix-ui/react-collapsible"), require("clsx"), require("tailwind-merge"), require("date-fns/locale"), require("react-datepicker"), require("@radix-ui/react-checkbox"), require("material-icons/iconfont/filled.css"), require("@radix-ui/react-dialog"), require("react-dropzone"), require("@radix-ui/react-label"), require("react-fast-compare"), require("markdown-it"), require("@radix-ui/react-dropdown-menu"), require("@radix-ui/react-menubar"), require("cmdk"), require("@radix-ui/react-popover"), require("@radix-ui/react-separator"), require("@radix-ui/react-radio-group"), require("@radix-ui/react-select"), require("react-dom"), require("@radix-ui/react-tooltip"), require("@radix-ui/react-tabs")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react", "@radix-ui/react-collapsible", "clsx", "tailwind-merge", "date-fns/locale", "react-datepicker", "@radix-ui/react-checkbox", "material-icons/iconfont/filled.css", "@radix-ui/react-dialog", "react-dropzone", "@radix-ui/react-label", "react-fast-compare", "markdown-it", "@radix-ui/react-dropdown-menu", "@radix-ui/react-menubar", "cmdk", "@radix-ui/react-popover", "@radix-ui/react-separator", "@radix-ui/react-radio-group", "@radix-ui/react-select", "react-dom", "@radix-ui/react-tooltip", "@radix-ui/react-tabs"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS UI"] = {}, global.jsxRuntime, global.React, global.Collapsible, global.clsx, global.tailwindMerge, global.locales, global.DatePicker, global.CheckboxPrimitive, null, global.DialogPrimitive, global.reactDropzone, global.LabelPrimitive, global.equal, global.MarkdownIt, global.DropdownMenu, global.MenubarPrimitive, global.cmdk, global.PopoverPrimitive, global.SeparatorPrimitive, global.RadioGroupPrimitive, global.SelectPrimitive, global.ReactDOM, global.TooltipPrimitive, global.TabsPrimitive));
-})(this, function(exports2, jsxRuntime, React, Collapsible, clsx, tailwindMerge, locales, DatePicker, CheckboxPrimitive, filled_css, DialogPrimitive, reactDropzone, LabelPrimitive, equal, MarkdownIt, DropdownMenu, MenubarPrimitive, cmdk, PopoverPrimitive, SeparatorPrimitive, RadioGroupPrimitive, SelectPrimitive, ReactDOM, TooltipPrimitive, TabsPrimitive) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react"), require("@radix-ui/react-collapsible"), require("clsx"), require("tailwind-merge"), require("date-fns/locale"), require("react-datepicker"), require("@radix-ui/react-checkbox"), require("material-icons/iconfont/filled.css"), require("@radix-ui/react-dialog"), require("react-dropzone"), require("@radix-ui/react-label"), require("react-fast-compare"), require("markdown-it"), require("@radix-ui/react-dropdown-menu"), require("@radix-ui/react-menubar"), require("@radix-ui/react-popover"), require("cmdk"), require("@radix-ui/react-separator"), require("@radix-ui/react-radio-group"), require("@radix-ui/react-select"), require("react-dom"), require("@radix-ui/react-tooltip"), require("@radix-ui/react-tabs")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react", "@radix-ui/react-collapsible", "clsx", "tailwind-merge", "date-fns/locale", "react-datepicker", "@radix-ui/react-checkbox", "material-icons/iconfont/filled.css", "@radix-ui/react-dialog", "react-dropzone", "@radix-ui/react-label", "react-fast-compare", "markdown-it", "@radix-ui/react-dropdown-menu", "@radix-ui/react-menubar", "@radix-ui/react-popover", "cmdk", "@radix-ui/react-separator", "@radix-ui/react-radio-group", "@radix-ui/react-select", "react-dom", "@radix-ui/react-tooltip", "@radix-ui/react-tabs"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS UI"] = {}, global.jsxRuntime, global.React, global.Collapsible, global.clsx, global.tailwindMerge, global.locales, global.DatePicker, global.CheckboxPrimitive, null, global.DialogPrimitive, global.reactDropzone, global.LabelPrimitive, global.equal, global.MarkdownIt, global.DropdownMenu, global.MenubarPrimitive, global.PopoverPrimitive, global.cmdk, global.SeparatorPrimitive, global.RadioGroupPrimitive, global.SelectPrimitive, global.ReactDOM, global.TooltipPrimitive, global.TabsPrimitive));
+})(this, function(exports2, jsxRuntime, React, Collapsible, clsx, tailwindMerge, locales, DatePicker, CheckboxPrimitive, filled_css, DialogPrimitive, reactDropzone, LabelPrimitive, equal, MarkdownIt, DropdownMenu, MenubarPrimitive, PopoverPrimitive, cmdk, SeparatorPrimitive, RadioGroupPrimitive, SelectPrimitive, ReactDOM, TooltipPrimitive, TabsPrimitive) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -15511,485 +15511,279 @@
   function MenubarSubTriggerIndicator() {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto pl-5 ", children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, { size: "small" }) });
   }
-  function SelectInputLabel({ children, error }) {
-    return /* @__PURE__ */ jsxRuntime.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__namespace.createContext({});
-  function MultiSelect({
-    value,
-    open,
-    onMultiValueChange,
-    size = "medium",
-    label,
-    disabled,
-    renderValue,
-    renderValues,
-    containerClassName,
-    className,
-    children,
-    error
+  function Separator({
+    orientation,
+    decorative,
+    className
   }) {
-    const containerRef = React__namespace.useRef(null);
-    const inputRef = React__namespace.useRef(null);
-    const listRef = React__namespace.useRef(null);
-    useOutsideAlerter(listRef, () => setOpenInternal(false));
-    const [openInternal, setOpenInternal] = React__namespace.useState(false);
-    React.useEffect(() => {
-      setOpenInternal(open ?? false);
-    }, [open]);
-    const onValueChangeInternal = React__namespace.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__namespace.useState("");
-    const [boundingRect, setBoundingRect] = React__namespace.useState(null);
-    const handleKeyDown = React__namespace.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__namespace.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(SelectInputLabel, { error, children: label }) : label,
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        cmdk.Command,
-        {
-          onKeyDown: handleKeyDown,
-          onClick: () => {
-            inputRef.current?.focus();
-            openDialog();
-          },
-          className: cls("relative overflow-visible bg-transparent", containerClassName),
-          children: [
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                      cmdk.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__ */ jsxRuntime.jsx("div", { className: "px-2 h-full flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-                    ExpandMoreIcon,
-                    {
-                      size: "small",
-                      className: cls("transition ", openInternal ? "rotate-180" : "")
-                    }
-                  ) })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              DialogPrimitive__namespace.Root,
-              {
-                open: openInternal,
-                modal: true,
-                onOpenChange: setOpenInternal,
-                children: /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                  MultiSelectContext.Provider,
-                  {
-                    value: {
-                      fieldValue: value,
-                      setInputValue,
-                      onValueChangeInternal
-                    },
-                    children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                          cmdk.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__namespace.useContext(MultiSelectContext);
-    if (!context) throw new Error("MultiSelectItem must be used inside a MultiSelect");
-    const { fieldValue, setInputValue, onValueChangeInternal } = context;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      cmdk.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__ */ jsxRuntime.jsx(
         SeparatorPrimitive__namespace.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__ */ jsxRuntime.jsx(
         SeparatorPrimitive__namespace.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__namespace.forwardRef(
+  function SelectInputLabel({ children, error }) {
+    return /* @__PURE__ */ jsxRuntime.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__namespace.createContext({});
+  const MultiSelect = React__namespace.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__namespace.useState(defaultValue);
-      const [isPopoverOpen, setIsPopoverOpen] = React__namespace.useState(false);
+      const [isPopoverOpen, setIsPopoverOpen] = React__namespace.useState(open ?? false);
+      const [selectedValues, setSelectedValues] = React__namespace.useState(value ?? []);
+      console.log("selectedValues", selectedValues);
+      const onPopoverOpenChange = (open2) => {
+        setIsPopoverOpen(open2);
+        onOpenChange?.(open2);
+      };
+      React.useEffect(() => {
+        setIsPopoverOpen(open ?? false);
+      }, [open]);
+      const allValues = children ? (
+        // @ts-ignore
+        React.Children.map(children, (child) => {
+          if (React__namespace.isValidElement(child)) {
+            return child.props.value;
+          }
+          return null;
+        }).filter(Boolean)
+      ) : [];
       React__namespace.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__ */ jsxRuntime.jsxs(
-        PopoverPrimitive__namespace.Root,
+        MultiSelectContext.Provider,
         {
-          open: isPopoverOpen,
-          onOpenChange: setIsPopoverOpen,
-          modal: modalPopover,
+          value: {
+            fieldValue: selectedValues,
+            onItemClick
+          },
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
+            typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(SelectInputLabel, { error, children: label }) : label,
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              PopoverPrimitive__namespace.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__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center w-full", children: [
-                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center w-full", children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-1.5 text-start", children: [
+                          renderValues && renderValues(selectedValues),
+                          !renderValues && selectedValues.map((value2) => {
+                            const childrenProps = React.Children.map(children, (child) => {
+                              if (React__namespace.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__ */ jsxRuntime.jsx(
-                              CloseIcon,
+                            return /* @__PURE__ */ jsxRuntime.jsxs(
+                              Chip,
                               {
-                                size: "smallest",
-                                onClick: (event) => {
-                                  event.stopPropagation();
-                                  toggleOption(value);
-                                }
-                              }
-                            )
-                          ]
-                        },
-                        value
-                      );
-                    }),
-                    selectedValues.length > maxCount && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                                size: "small",
+                                className: cls("flex flex-row items-center p-1"),
+                                children: [
+                                  option?.children,
+                                  /* @__PURE__ */ jsxRuntime.jsx(
+                                    CloseIcon,
+                                    {
+                                      size: "smallest",
+                                      onClick: (event) => {
+                                        event.stopPropagation();
+                                        toggleOption(value2);
+                                      }
+                                    }
+                                  )
+                                ]
+                              },
+                              value2
+                            );
+                          })
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+                          includeClear && /* @__PURE__ */ jsxRuntime.jsx(
                             CloseIcon,
                             {
-                              size: "smallest",
+                              className: "ml-4",
+                              size: "small",
                               onClick: (event) => {
                                 event.stopPropagation();
-                                clearExtraOptions();
+                                handleClear();
                               }
                             }
-                          )
-                        ]
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      CloseIcon,
-                      {
-                        size: "small",
-                        onClick: (event) => {
-                          event.stopPropagation();
-                          handleClear();
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      Separator,
-                      {
-                        orientation: "vertical"
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsxRuntime.jsx(
-                      ExpandMoreIcon,
-                      {
-                        size: "small",
-                        className: cls("transition", isPopoverOpen ? "rotate-180" : "")
-                      }
-                    ) })
-                  ] })
-                ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full mx-auto", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground mx-3", children: placeholder }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsxRuntime.jsx(
-                    ExpandMoreIcon,
-                    {
-                      size: "small",
-                      className: cls("transition", isPopoverOpen ? "rotate-180" : "")
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsxRuntime.jsx(
+                            ExpandMoreIcon,
+                            {
+                              size: "small",
+                              className: cls("transition", isPopoverOpen ? "rotate-180" : "")
+                            }
+                          ) })
+                        ] })
+                      ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full mx-auto", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: placeholder }),
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsxRuntime.jsx(
+                          ExpandMoreIcon,
+                          {
+                            size: "small",
+                            className: cls("transition", isPopoverOpen ? "rotate-180" : "")
+                          }
+                        ) })
+                      ] })
                     }
-                  ) })
-                ] })
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              PopoverPrimitive__namespace.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__ */ jsxRuntime.jsxs(cmdk.Command, { children: [
+                  ) }),
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    cmdk.Command.Input,
+                    PopoverPrimitive__namespace.Content,
                     {
-                      className: cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full m-4"),
-                      placeholder: "Search...",
-                      onKeyDown: handleInputKeyDown
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.List, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Empty, { children: "No results found." }),
-                    /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.Group, { children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs(
-                        cmdk.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__ */ jsxRuntime.jsxs(cmdk.Command, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center", children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            cmdk.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__ */ jsxRuntime.jsx(Checkbox, { checked: selectedValues.length === options.length, size: "small" }),
-                            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "(Select All)" })
-                          ]
-                        },
-                        "all"
-                      ),
-                      options.map((option) => {
-                        const isSelected = selectedValues.includes(option.value);
-                        return /* @__PURE__ */ jsxRuntime.jsxs(
-                          cmdk.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Separator, { orientation: "horizontal", className: "my-0" }),
+                        /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.List, { children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Empty, { className: "px-4 py-2", children: "No results found." }),
+                          /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.Group, { children: [
+                            /* @__PURE__ */ jsxRuntime.jsxs(
+                              cmdk.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__ */ jsxRuntime.jsx(InnerCheckBox, { checked: selectedValues.length === allValues.length }),
+                                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-text-secondary dark:text-text-secondary-dark", children: "(Select All)" })
+                                ]
+                              },
+                              "all"
                             ),
-                            children: [
-                              /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: isSelected, size: "small" }),
-                              /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label })
-                            ]
-                          },
-                          option.value
-                        );
-                      })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Separator, {}),
-                    /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Group, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-                      selectedValues.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          cmdk.Command.Item,
-                          {
-                            onSelect: handleClear,
-                            className: "flex-1 justify-center cursor-pointer",
-                            children: "Clear"
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          Separator,
-                          {
-                            orientation: "vertical"
-                          }
-                        )
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        cmdk.Command.Item,
-                        {
-                          onSelect: () => setIsPopoverOpen(false),
-                          className: "flex-1 justify-center cursor-pointer max-w-full",
-                          children: "Close"
-                        }
-                      )
-                    ] }) })
-                  ] })
-                ] })
+                            children
+                          ] })
+                        ] })
+                      ] })
+                    }
+                  )
+                ]
               }
             )
           ]
@@ -15997,7 +15791,66 @@
       );
     }
   );
-  NewMultiSelect.displayName = "MultiSelect";
+  MultiSelect.displayName = "MultiSelect";
+  function MultiSelectItem({
+    children,
+    value,
+    className
+  }) {
+    const context = React__namespace.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__ */ jsxRuntime.jsxs(
+      cmdk.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__ */ jsxRuntime.jsx(InnerCheckBox, { checked: isSelected }),
+          children
+        ]
+      }
+    );
+  }
+  function InnerCheckBox({ checked }) {
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { iconKey: "check", size: 16, className: "absolute" })
+      }
+    ) });
+  }
   function Paper({
     children,
     style,
@@ -16137,40 +15990,28 @@
     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] = React.useState(false);
+    const [openInternal, setOpenInternal] = React.useState(open ?? false);
     React.useEffect(() => {
       setOpenInternal(open ?? false);
     }, [open]);
     const onValueChangeInternal = React.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,
@@ -16179,14 +16020,13 @@
         };
         onChange(event);
       }
-    }, [multiple, onChange, value, onMultiValueChange, onValueChange]);
+    }, [onChange, value, onValueChange]);
     const hasValue = Array.isArray(value) ? value.length > 0 : value != null;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       SelectPrimitive__namespace.Root,
       {
         name,
-        value: Array.isArray(value) ? void 0 : value,
-        defaultOpen: open,
+        value,
         open: openInternal,
         disabled,
         onValueChange: onValueChangeInternal,
@@ -16226,6 +16066,10 @@
                       "relative flex items-center",
                       inputClassName
                     ),
+                    onClick: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                    },
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsx(
                         "div",
@@ -16236,11 +16080,22 @@
                             "overflow-visible",
                             size === "small" ? "h-[42px]" : "h-[64px]"
                           ),
-                          children: /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Value, { placeholder, className: "w-full", children: [
-                            renderValue && (hasValue && Array.isArray(value) ? value.map((v, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+                            SelectPrimitive__namespace.Value,
+                            {
+                              onClick: (e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                              },
+                              placeholder,
+                              className: "w-full",
+                              children: [
+                                !hasValue && placeholder,
+                                hasValue && value && renderValue ? renderValue(value) : placeholder,
+                                hasValue && !renderValue && value
+                              ]
+                            }
+                          )
                         }
                       ),
                       /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsxRuntime.jsx(ExpandMoreIcon, { size: "small", className: cls("transition", open ? "rotate-180" : "") }) })
@@ -16251,7 +16106,10 @@
                   "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
                   }
                 )
@@ -17069,7 +16927,7 @@
             {
               className: cls(
                 paperMixin,
-                "PopoverContent shadow z-40",
+                "PopoverContent z-40",
                 className
               ),
               side,
@@ -19297,7 +19155,6 @@
   exports2.NetworkWifiLockedIcon = NetworkWifiLockedIcon;
   exports2.NeurologyIcon = NeurologyIcon;
   exports2.NewLabelIcon = NewLabelIcon;
-  exports2.NewMultiSelect = NewMultiSelect;
   exports2.NewReleasesIcon = NewReleasesIcon;
   exports2.NewWindowIcon = NewWindowIcon;
   exports2.NewsIcon = NewsIcon;