@firecms/ui 3.0.0-canary.118 → 3.0.0-canary.119

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-radio-group"), require("@radix-ui/react-select"), require("@radix-ui/react-separator"), require("react-dom"), require("@radix-ui/react-tooltip"), require("@radix-ui/react-tabs"), require("@radix-ui/react-popover")) : 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-radio-group", "@radix-ui/react-select", "@radix-ui/react-separator", "react-dom", "@radix-ui/react-tooltip", "@radix-ui/react-tabs", "@radix-ui/react-popover"], 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.RadioGroupPrimitive, global.SelectPrimitive, global.SeparatorPrimitive, global.ReactDOM, global.TooltipPrimitive, global.TabsPrimitive, global.PopoverPrimitive));
-})(this, function(exports2, jsxRuntime, React, Collapsible, clsx, tailwindMerge, locales, DatePicker, CheckboxPrimitive, filled_css, DialogPrimitive, reactDropzone, LabelPrimitive, equal, MarkdownIt, DropdownMenu, MenubarPrimitive, cmdk, RadioGroupPrimitive, SelectPrimitive, SeparatorPrimitive, ReactDOM, TooltipPrimitive, TabsPrimitive, PopoverPrimitive) {
+  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) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -26,13 +26,13 @@
   const LabelPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(LabelPrimitive);
   const DropdownMenu__namespace = /* @__PURE__ */ _interopNamespaceDefault(DropdownMenu);
   const MenubarPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(MenubarPrimitive);
+  const PopoverPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(PopoverPrimitive);
+  const SeparatorPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(SeparatorPrimitive);
   const RadioGroupPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(RadioGroupPrimitive);
   const SelectPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(SelectPrimitive);
-  const SeparatorPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(SeparatorPrimitive);
   const ReactDOM__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactDOM);
   const TooltipPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(TooltipPrimitive);
   const TabsPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(TabsPrimitive);
-  const PopoverPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(PopoverPrimitive);
   const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
   const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-slate-100 focus:dark:bg-gray-800 focus:dark:bg-opacity-60";
   const focusedClasses = "z-30 outline-none ring-2 ring-primary ring-opacity-75 ring-offset-2 ring-offset-transparent ";
@@ -14842,7 +14842,7 @@
       if (!open) {
         const timeout = setTimeout(() => {
           setDisplayed(false);
-        }, 250);
+        }, 150);
         return () => clearTimeout(timeout);
       } else {
         setDisplayed(true);
@@ -15208,6 +15208,8 @@
     trigger,
     open,
     defaultOpen,
+    side,
+    align,
     onOpenChange,
     portalContainer
   }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -15225,7 +15227,15 @@
             children: trigger
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Content, { className: cls(paperMixin, "shadow py-2 z-30"), children }) })
+        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+          DropdownMenu__namespace.Content,
+          {
+            side,
+            align,
+            className: cls(paperMixin, focusedDisabled, "shadow py-2 z-30"),
+            children
+          }
+        ) })
       ]
     }
   ));
@@ -15517,7 +15527,6 @@
     disabled,
     renderValue,
     renderValues,
-    includeFocusOutline = true,
     containerClassName,
     className,
     children,
@@ -15616,38 +15625,46 @@
                 ]
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { open: openInternal, onOpenChange: setOpenInternal, children: /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-              MultiSelectContext.Provider,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              DialogPrimitive__namespace.Root,
               {
-                value: {
-                  fieldValue: value,
-                  setInputValue,
-                  onValueChangeInternal
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
+                open: openInternal,
+                modal: true,
+                onOpenChange: setOpenInternal,
+                children: /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                  MultiSelectContext.Provider,
                   {
-                    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
+                    value: {
+                      fieldValue: value,
+                      setInputValue,
+                      onValueChangeInternal
                     },
                     children: /* @__PURE__ */ jsxRuntime.jsx(
-                      cmdk.Command.Group,
+                      "div",
                       {
-                        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
+                        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
+                          }
+                        )
                       }
                     )
                   }
-                )
+                ) })
               }
-            ) }) })
+            )
           ]
         }
       )
@@ -15682,6 +15699,305 @@
       }
     );
   }
+  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]"
+        }
+      );
+    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]",
+          decorative,
+          orientation: "vertical"
+        }
+      );
+  }
+  const NewMultiSelect = React__namespace.forwardRef(
+    ({
+      size,
+      options,
+      onValueChange,
+      invisible,
+      disabled,
+      variant,
+      defaultValue = [],
+      placeholder = "Select options",
+      animation = 0,
+      maxCount = 3,
+      modalPopover = false,
+      asChild = false,
+      className,
+      ...props
+    }, ref) => {
+      const [selectedValues, setSelectedValues] = React__namespace.useState(defaultValue);
+      const [isPopoverOpen, setIsPopoverOpen] = React__namespace.useState(false);
+      React__namespace.useEffect(() => {
+        setSelectedValues(defaultValue);
+      }, [defaultValue]);
+      const handleInputKeyDown = (event) => {
+        if (event.key === "Enter") {
+          setIsPopoverOpen(true);
+        } else if (event.key === "Backspace" && !event.currentTarget.value) {
+          const newSelectedValues = [...selectedValues];
+          newSelectedValues.pop();
+          setSelectedValues(newSelectedValues);
+          onValueChange(newSelectedValues);
+        }
+      };
+      const toggleOption = (value) => {
+        const newSelectedValues = selectedValues.includes(value) ? selectedValues.filter((v) => v !== value) : [...selectedValues, value];
+        setSelectedValues(newSelectedValues);
+        onValueChange(newSelectedValues);
+      };
+      const handleClear = () => {
+        setSelectedValues([]);
+        onValueChange([]);
+      };
+      const handleTogglePopover = () => {
+        setIsPopoverOpen((prev) => !prev);
+      };
+      const clearExtraOptions = () => {
+        const newSelectedValues = selectedValues.slice(0, maxCount);
+        setSelectedValues(newSelectedValues);
+        onValueChange(newSelectedValues);
+      };
+      const toggleAll = () => {
+        if (selectedValues.length === options.length) {
+          handleClear();
+        } else {
+          const allValues = options.map((option) => option.value);
+          setSelectedValues(allValues);
+          onValueChange(allValues);
+        }
+      };
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        PopoverPrimitive__namespace.Root,
+        {
+          open: isPopoverOpen,
+          onOpenChange: setIsPopoverOpen,
+          modal: modalPopover,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                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"
+                            }
+                          ),
+                          style: { animationDuration: `${animation}s` },
+                          children: [
+                            option?.label,
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              CloseIcon,
+                              {
+                                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(
+                            CloseIcon,
+                            {
+                              size: "smallest",
+                              onClick: (event) => {
+                                event.stopPropagation();
+                                clearExtraOptions();
+                              }
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__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(
+              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,
+                    {
+                      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
+                          ),
+                          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
+                            ),
+                            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"
+                        }
+                      )
+                    ] }) })
+                  ] })
+                ] })
+              }
+            )
+          ]
+        }
+      );
+    }
+  );
+  NewMultiSelect.displayName = "MultiSelect";
   function Paper({
     children,
     style,
@@ -15946,7 +16262,7 @@
             SelectPrimitive__namespace.Content,
             {
               position,
-              className: "z-50 relative overflow-hidden border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-800 p-2 rounded-lg shadow-lg",
+              className: cls("z-50 relative overflow-hidden border bg-white dark:bg-gray-900 p-2 rounded-lg", defaultBorderMixin),
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 SelectPrimitive__namespace.Viewport,
                 {
@@ -15981,8 +16297,8 @@
           "w-full",
           "relative flex items-center p-2 rounded-md text-sm text-slate-700 dark:text-slate-300",
           "focus:z-10",
-          "data-[state=checked]:bg-slate-100 data-[state=checked]:dark:bg-slate-900 focus:bg-slate-100 dark:focus:bg-slate-950",
-          "data-[state=checked]:focus:bg-slate-200 data-[state=checked]:dark:focus:bg-slate-950",
+          "data-[state=checked]:bg-slate-100 data-[state=checked]:dark:bg-slate-800 focus:bg-slate-100 dark:focus:bg-gray-950",
+          "data-[state=checked]:focus:bg-slate-200 data-[state=checked]:dark:focus:bg-gray-950",
           disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
           "[&>*]:w-full",
           "overflow-visible",
@@ -16022,26 +16338,6 @@
       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]"
-        }
-      );
-    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]",
-          decorative,
-          orientation: "vertical"
-        }
-      );
-  }
   const Sheet = ({
     children,
     side = "right",
@@ -19001,6 +19297,7 @@
   exports2.NetworkWifiLockedIcon = NetworkWifiLockedIcon;
   exports2.NeurologyIcon = NeurologyIcon;
   exports2.NewLabelIcon = NewLabelIcon;
+  exports2.NewMultiSelect = NewMultiSelect;
   exports2.NewReleasesIcon = NewReleasesIcon;
   exports2.NewWindowIcon = NewWindowIcon;
   exports2.NewsIcon = NewsIcon;