@page-speed/forms 0.4.4 → 0.4.6

package/dist/inputs.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React8 = require('react');
+var React9 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var useOnClickOutside = require('@opensite/hooks/useOnClickOutside');
@@ -23,7 +23,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React8__namespace = /*#__PURE__*/_interopNamespace(React8);
+var React9__namespace = /*#__PURE__*/_interopNamespace(React9);
 
 // src/inputs/TextInput.tsx
 function cn(...inputs) {
@@ -62,7 +62,7 @@ function TextInput({
     error && "border-destructive ring-1 ring-destructive",
     className
   );
-  return /* @__PURE__ */ React8__namespace.createElement(
+  return /* @__PURE__ */ React9__namespace.createElement(
     "input",
     {
       type,
@@ -116,7 +116,7 @@ function TextArea({
     error && "border-destructive ring-1 ring-destructive",
     className
   );
-  return /* @__PURE__ */ React8__namespace.createElement(
+  return /* @__PURE__ */ React9__namespace.createElement(
     "textarea",
     {
       name,
@@ -155,11 +155,11 @@ var LabelGroup = ({
     variant === "legend" ? "mb-1.5" : "mb-1 block",
     primaryClassName
   );
-  const requiredIndicator = required ? /* @__PURE__ */ React8__namespace.createElement("span", { className: "text-destructive pl-0.5", "aria-label": "required" }, "*") : null;
+  const requiredIndicator = required ? /* @__PURE__ */ React9__namespace.createElement("span", { className: "text-destructive pl-0.5", "aria-label": "required" }, "*") : null;
   let primaryElement = null;
   if (primary) {
     if (variant === "label") {
-      primaryElement = /* @__PURE__ */ React8__namespace.createElement(
+      primaryElement = /* @__PURE__ */ React9__namespace.createElement(
         "label",
         {
           htmlFor: labelHtmlFor,
@@ -170,12 +170,12 @@ var LabelGroup = ({
         requiredIndicator
       );
     } else if (variant === "legend") {
-      primaryElement = /* @__PURE__ */ React8__namespace.createElement("legend", { "data-slot": "field-legend", className: primaryClasses }, primary, requiredIndicator);
+      primaryElement = /* @__PURE__ */ React9__namespace.createElement("legend", { "data-slot": "field-legend", className: primaryClasses }, primary, requiredIndicator);
     } else {
-      primaryElement = /* @__PURE__ */ React8__namespace.createElement("div", { "data-slot": "field-label", className: primaryClasses }, primary, requiredIndicator);
+      primaryElement = /* @__PURE__ */ React9__namespace.createElement("div", { "data-slot": "field-label", className: primaryClasses }, primary, requiredIndicator);
     }
   }
-  const secondaryElement = secondary ? /* @__PURE__ */ React8__namespace.createElement(
+  const secondaryElement = secondary ? /* @__PURE__ */ React9__namespace.createElement(
     "p",
     {
       "data-slot": "field-description",
@@ -185,7 +185,10 @@ var LabelGroup = ({
     secondary
   ) : null;
   if (!primaryElement && !secondaryElement) return null;
-  return /* @__PURE__ */ React8__namespace.createElement(React8__namespace.Fragment, null, primaryElement, secondaryElement);
+  if (variant === "legend") {
+    return /* @__PURE__ */ React9__namespace.createElement(React9__namespace.Fragment, null, primaryElement, secondaryElement);
+  }
+  return /* @__PURE__ */ React9__namespace.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, primaryElement, secondaryElement);
 };
 
 // src/inputs/Checkbox.tsx
@@ -204,9 +207,9 @@ function Checkbox({
   useChoiceCard = false,
   ...props
 }) {
-  const inputRef = React8__namespace.useRef(null);
+  const inputRef = React9__namespace.useRef(null);
   const checkboxId = props.id || `checkbox-${name}`;
-  React8__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     if (inputRef.current) {
       inputRef.current.indeterminate = indeterminate;
     }
@@ -218,7 +221,7 @@ function Checkbox({
     onBlur?.();
   };
   const isActive = value || indeterminate && !value;
-  const checkbox = /* @__PURE__ */ React8__namespace.createElement(
+  const checkbox = /* @__PURE__ */ React9__namespace.createElement(
     "div",
     {
       className: cn(
@@ -226,7 +229,7 @@ function Checkbox({
         !label && className
       )
     },
-    /* @__PURE__ */ React8__namespace.createElement(
+    /* @__PURE__ */ React9__namespace.createElement(
       "input",
       {
         ref: inputRef,
@@ -245,7 +248,7 @@ function Checkbox({
         ...props
       }
     ),
-    /* @__PURE__ */ React8__namespace.createElement(
+    /* @__PURE__ */ React9__namespace.createElement(
       "div",
       {
         className: cn(
@@ -258,7 +261,7 @@ function Checkbox({
           "peer-focus-visible:ring-2 peer-focus-visible:ring-ring/50 peer-focus-visible:ring-offset-1"
         )
       },
-      value && /* @__PURE__ */ React8__namespace.createElement(
+      value && /* @__PURE__ */ React9__namespace.createElement(
         "svg",
         {
           className: "size-3.5",
@@ -269,9 +272,9 @@ function Checkbox({
           strokeLinecap: "round",
           strokeLinejoin: "round"
         },
-        /* @__PURE__ */ React8__namespace.createElement("polyline", { points: "20 6 9 17 4 12" })
+        /* @__PURE__ */ React9__namespace.createElement("polyline", { points: "20 6 9 17 4 12" })
       ),
-      indeterminate && !value && /* @__PURE__ */ React8__namespace.createElement(
+      indeterminate && !value && /* @__PURE__ */ React9__namespace.createElement(
         "svg",
         {
           className: "size-3.5",
@@ -282,12 +285,12 @@ function Checkbox({
           strokeLinecap: "round",
           strokeLinejoin: "round"
         },
-        /* @__PURE__ */ React8__namespace.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+        /* @__PURE__ */ React9__namespace.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
       )
     )
   );
   if (label) {
-    return /* @__PURE__ */ React8__namespace.createElement(
+    return /* @__PURE__ */ React9__namespace.createElement(
       "label",
       {
         className: cn(
@@ -299,7 +302,7 @@ function Checkbox({
         ),
         htmlFor: checkboxId
       },
-      /* @__PURE__ */ React8__namespace.createElement(
+      /* @__PURE__ */ React9__namespace.createElement(
         "div",
         {
           className: cn(
@@ -308,7 +311,7 @@ function Checkbox({
           )
         },
         checkbox,
-        /* @__PURE__ */ React8__namespace.createElement(
+        /* @__PURE__ */ React9__namespace.createElement(
           LabelGroup,
           {
             variant: "text",
@@ -353,11 +356,11 @@ function CheckboxGroup({
   ).length;
   const allSelected = selectedEnabledCount === enabledOptions.length;
   const someSelected = selectedEnabledCount > 0 && !allSelected;
-  const useChoiceCard = React8__namespace.useMemo(() => {
+  const useChoiceCard = React9__namespace.useMemo(() => {
     if (!options) return false;
     return options?.some((opt) => opt.description);
   }, [options]);
-  const countableValue = React8__namespace.useMemo(() => {
+  const countableValue = React9__namespace.useMemo(() => {
     if (value?.length > 0) {
       return value.length;
     }
@@ -382,7 +385,7 @@ function CheckboxGroup({
     onBlur?.();
   };
   const maxReached = Boolean(maxSelections && countableValue >= maxSelections);
-  const containerClass = React8__namespace.useMemo(() => {
+  const containerClass = React9__namespace.useMemo(() => {
     return cn(
       "w-full gap-3 grid grid-cols-1 border-0 m-0 p-0 min-w-0",
       (layout === "grid" || layout === "inline") && "md:grid-cols-2",
@@ -391,7 +394,7 @@ function CheckboxGroup({
   }, [layout, className]);
   const groupDescriptionId = description ? `${name}-description` : void 0;
   const groupAriaDescribedBy = [props["aria-describedby"], groupDescriptionId].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ React8__namespace.createElement(
+  return /* @__PURE__ */ React9__namespace.createElement(
     "fieldset",
     {
       className: containerClass,
@@ -401,7 +404,7 @@ function CheckboxGroup({
       "aria-required": required || props["aria-required"],
       "aria-label": typeof label === "string" ? label : props["aria-label"]
     },
-    /* @__PURE__ */ React8__namespace.createElement(
+    /* @__PURE__ */ React9__namespace.createElement(
       LabelGroup,
       {
         labelHtmlFor: name,
@@ -412,7 +415,7 @@ function CheckboxGroup({
         primary: label
       }
     ),
-    showSelectAll && enabledOptions.length > 0 && /* @__PURE__ */ React8__namespace.createElement(
+    showSelectAll && enabledOptions.length > 0 && /* @__PURE__ */ React9__namespace.createElement(
       Checkbox,
       {
         name: `${name}-select-all`,
@@ -430,7 +433,7 @@ function CheckboxGroup({
     options.map((option) => {
       const isChecked = value.includes(option.value);
       const isDisabled = disabled || option.disabled || maxReached && !isChecked;
-      return /* @__PURE__ */ React8__namespace.createElement(
+      return /* @__PURE__ */ React9__namespace.createElement(
         Checkbox,
         {
           key: option.value,
@@ -448,7 +451,7 @@ function CheckboxGroup({
         }
       );
     }),
-    (minSelections || maxSelections) && /* @__PURE__ */ React8__namespace.createElement(
+    (minSelections || maxSelections) && /* @__PURE__ */ React9__namespace.createElement(
       "div",
       {
         className: cn(
@@ -457,8 +460,8 @@ function CheckboxGroup({
         ),
         "aria-live": "polite"
       },
-      minSelections && countableValue < minSelections && /* @__PURE__ */ React8__namespace.createElement("span", null, "Select at least ", minSelections, " option", minSelections !== 1 ? "s" : ""),
-      maxSelections && /* @__PURE__ */ React8__namespace.createElement("span", null, countableValue, "/", maxSelections, " selected")
+      minSelections && countableValue < minSelections && /* @__PURE__ */ React9__namespace.createElement("span", null, "Select at least ", minSelections, " option", minSelections !== 1 ? "s" : ""),
+      maxSelections && /* @__PURE__ */ React9__namespace.createElement("span", null, countableValue, "/", maxSelections, " selected")
     )
   );
 }
@@ -509,10 +512,10 @@ function Radio({
   const handleBlur = () => {
     onBlur?.();
   };
-  const useChoiceCard = React8__namespace.useMemo(() => {
+  const useChoiceCard = React9__namespace.useMemo(() => {
     return options.some((option) => option.description);
   }, [options]);
-  const containerClass = React8__namespace.useMemo(() => {
+  const containerClass = React9__namespace.useMemo(() => {
     return cn(
       "w-full gap-3 grid grid-cols-1 border-0 m-0 p-0 min-w-0",
       (layout === "grid" || layout === "inline") && "md:grid-cols-2",
@@ -521,7 +524,7 @@ function Radio({
   }, [layout, className]);
   const groupDescriptionId = description ? `${name}-description` : void 0;
   const groupAriaDescribedBy = [props["aria-describedby"], groupDescriptionId].filter(Boolean).join(" ") || void 0;
-  return /* @__PURE__ */ React8__namespace.createElement(
+  return /* @__PURE__ */ React9__namespace.createElement(
     "fieldset",
     {
       className: containerClass,
@@ -531,7 +534,7 @@ function Radio({
       "aria-required": required || props["aria-required"],
       "aria-label": typeof label === "string" ? label : props["aria-label"]
     },
-    /* @__PURE__ */ React8__namespace.createElement(
+    /* @__PURE__ */ React9__namespace.createElement(
       LabelGroup,
       {
         variant: "legend",
@@ -545,7 +548,7 @@ function Radio({
       const isDisabled = disabled || option.disabled;
       const radioId = `${name}-${option.value}`;
       const hasDescription = option.description != null && option.description !== "";
-      const radioIndicator = /* @__PURE__ */ React8__namespace.createElement("div", { className: "relative inline-flex items-center justify-center" }, /* @__PURE__ */ React8__namespace.createElement(
+      const radioIndicator = /* @__PURE__ */ React9__namespace.createElement("div", { className: "relative inline-flex items-center justify-center" }, /* @__PURE__ */ React9__namespace.createElement(
         "input",
         {
           type: "radio",
@@ -560,7 +563,7 @@ function Radio({
           className: "peer sr-only",
           "aria-describedby": hasDescription ? `${radioId}-description` : props["aria-describedby"]
         }
-      ), /* @__PURE__ */ React8__namespace.createElement(
+      ), /* @__PURE__ */ React9__namespace.createElement(
         "div",
         {
           className: cn(
@@ -573,9 +576,9 @@ function Radio({
             "peer-focus-visible:ring-2 peer-focus-visible:ring-ring/50 peer-focus-visible:ring-offset-1"
           )
         },
-        isChecked && /* @__PURE__ */ React8__namespace.createElement("div", { className: "size-3 rounded-full bg-primary" })
+        isChecked && /* @__PURE__ */ React9__namespace.createElement("div", { className: "size-3 rounded-full bg-primary" })
       ));
-      const labelContent = /* @__PURE__ */ React8__namespace.createElement(
+      const labelContent = /* @__PURE__ */ React9__namespace.createElement(
         LabelGroup,
         {
           variant: "text",
@@ -586,7 +589,7 @@ function Radio({
           secondaryClassName: "text-xs opacity-75"
         }
       );
-      return /* @__PURE__ */ React8__namespace.createElement(
+      return /* @__PURE__ */ React9__namespace.createElement(
         "label",
         {
           key: option.value,
@@ -600,7 +603,7 @@ function Radio({
           onKeyDown: (e) => handleKeyDown(e, index),
           tabIndex: isDisabled ? -1 : 0
         },
-        /* @__PURE__ */ React8__namespace.createElement(
+        /* @__PURE__ */ React9__namespace.createElement(
           "div",
           {
             className: cn(
@@ -609,7 +612,7 @@ function Radio({
             )
           },
           !useChoiceCard && radioIndicator,
-          /* @__PURE__ */ React8__namespace.createElement("div", { className: "flex flex-1 flex-col gap-0.5" }, labelContent),
+          labelContent,
           useChoiceCard && radioIndicator
         )
       );
@@ -636,19 +639,20 @@ function Select({
   renderOption,
   ...props
 }) {
-  const [isOpen, setIsOpen] = React8__namespace.useState(false);
-  const [searchQuery, setSearchQuery] = React8__namespace.useState("");
-  const [focusedIndex, setFocusedIndex] = React8__namespace.useState(-1);
-  const selectRef = React8__namespace.useRef(null);
-  const searchInputRef = React8__namespace.useRef(null);
+  const [isOpen, setIsOpen] = React9__namespace.useState(false);
+  const [searchQuery, setSearchQuery] = React9__namespace.useState("");
+  const [focusedIndex, setFocusedIndex] = React9__namespace.useState(-1);
+  const triggerRef = React9__namespace.useRef(null);
+  const dropdownRef = React9__namespace.useRef(null);
+  const searchInputRef = React9__namespace.useRef(null);
   const dropdownId = `${name}-dropdown`;
-  const allOptions = React8__namespace.useMemo(() => {
+  const allOptions = React9__namespace.useMemo(() => {
     if (optionGroups.length > 0) {
       return optionGroups.flatMap((group) => group.options);
     }
     return options;
   }, [options, optionGroups]);
-  const filteredOptions = React8__namespace.useMemo(() => {
+  const filteredOptions = React9__namespace.useMemo(() => {
     if (!searchQuery.trim()) {
       return allOptions;
     }
@@ -658,7 +662,7 @@ function Select({
       return label.toLowerCase().includes(query);
     });
   }, [allOptions, searchQuery]);
-  const selectedOption = React8__namespace.useMemo(() => {
+  const selectedOption = React9__namespace.useMemo(() => {
     return allOptions.find((opt) => opt.value === value);
   }, [allOptions, value]);
   const hasValue = Boolean(value);
@@ -758,28 +762,29 @@ function Select({
   };
   const handleBlur = (event) => {
     const nextTarget = event?.relatedTarget;
-    if (!nextTarget || !selectRef.current?.contains(nextTarget)) {
+    const focusStayedInside = !!triggerRef.current && triggerRef.current.contains(nextTarget) || !!dropdownRef.current && dropdownRef.current.contains(nextTarget);
+    if (!nextTarget || !focusStayedInside) {
       onBlur?.();
     }
   };
-  const closeDropdown = React8__namespace.useCallback(() => {
-    if (!isOpen) return;
+  const closeDropdown = React9__namespace.useCallback(() => {
     setIsOpen(false);
     setSearchQuery("");
     setFocusedIndex(-1);
     onBlur?.();
-  }, [isOpen, onBlur]);
-  useOnClickOutside.useOnClickOutside(selectRef, closeDropdown, "pointerdown", true);
+  }, [onBlur]);
+  useOnClickOutside.useOnClickOutside([triggerRef, dropdownRef], closeDropdown, void 0, {
+    capture: true
+  });
   const combinedClassName = cn("relative w-full", className);
-  return /* @__PURE__ */ React8__namespace.createElement(
+  return /* @__PURE__ */ React9__namespace.createElement(
     "div",
     {
-      ref: selectRef,
       className: combinedClassName,
       onKeyDown: handleKeyDown,
       onBlur: handleBlur
     },
-    /* @__PURE__ */ React8__namespace.createElement(
+    /* @__PURE__ */ React9__namespace.createElement(
       "select",
       {
         name,
@@ -792,12 +797,13 @@ function Select({
         tabIndex: -1,
         style: { display: "none" }
       },
-      /* @__PURE__ */ React8__namespace.createElement("option", { value: "" }, "Select..."),
-      allOptions.map((option) => /* @__PURE__ */ React8__namespace.createElement("option", { key: option.value, value: option.value }, typeof option.label === "string" ? option.label : option.value))
+      /* @__PURE__ */ React9__namespace.createElement("option", { value: "" }, "Select..."),
+      allOptions.map((option) => /* @__PURE__ */ React9__namespace.createElement("option", { key: option.value, value: option.value }, typeof option.label === "string" ? option.label : option.value))
     ),
-    /* @__PURE__ */ React8__namespace.createElement(
+    /* @__PURE__ */ React9__namespace.createElement(
       "div",
       {
+        ref: triggerRef,
         className: cn(
           "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm",
           "cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
@@ -815,8 +821,8 @@ function Select({
         "aria-disabled": disabled,
         tabIndex: disabled ? -1 : 0
       },
-      /* @__PURE__ */ React8__namespace.createElement("span", { className: "flex items-center flex-1 overflow-hidden text-ellipsis" }, selectedOption ? renderOption ? renderOption(selectedOption) : selectedOption.label : /* @__PURE__ */ React8__namespace.createElement("span", { className: "relative" }, placeholder)),
-      /* @__PURE__ */ React8__namespace.createElement("div", { className: "flex items-center gap-1 ml-2" }, loading && /* @__PURE__ */ React8__namespace.createElement("span", { className: "text-xs" }, "\u23F3"), clearable && value && !disabled && !loading && /* @__PURE__ */ React8__namespace.createElement(
+      /* @__PURE__ */ React9__namespace.createElement("span", { className: "flex items-center flex-1 overflow-hidden text-ellipsis" }, selectedOption ? renderOption ? renderOption(selectedOption) : selectedOption.label : /* @__PURE__ */ React9__namespace.createElement("span", { className: "relative" }, placeholder)),
+      /* @__PURE__ */ React9__namespace.createElement("div", { className: "flex items-center gap-1 ml-2" }, loading && /* @__PURE__ */ React9__namespace.createElement("span", { className: "text-xs" }, "\u23F3"), clearable && value && !disabled && !loading && /* @__PURE__ */ React9__namespace.createElement(
         "button",
         {
           type: "button",
@@ -826,16 +832,17 @@ function Select({
           tabIndex: -1
         },
         "\u2715"
-      ), /* @__PURE__ */ React8__namespace.createElement("span", { className: "text-xs leading-none", "aria-hidden": "true" }, isOpen ? "\u25B2" : "\u25BC"))
+      ), /* @__PURE__ */ React9__namespace.createElement("span", { className: "text-xs leading-none", "aria-hidden": "true" }, isOpen ? "\u25B2" : "\u25BC"))
     ),
-    isOpen && /* @__PURE__ */ React8__namespace.createElement(
+    isOpen && /* @__PURE__ */ React9__namespace.createElement(
       "div",
       {
+        ref: dropdownRef,
         id: dropdownId,
         className: "absolute z-50 top-full mt-1 min-w-full overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md",
         role: "listbox"
       },
-      searchable && /* @__PURE__ */ React8__namespace.createElement("div", { className: "p-2 border-b border-border" }, /* @__PURE__ */ React8__namespace.createElement(
+      searchable && /* @__PURE__ */ React9__namespace.createElement("div", { className: "p-2 border-b border-border" }, /* @__PURE__ */ React9__namespace.createElement(
         "input",
         {
           ref: searchInputRef,
@@ -851,19 +858,19 @@ function Select({
           "aria-label": "Search options"
         }
       )),
-      /* @__PURE__ */ React8__namespace.createElement("div", { className: "max-h-64 overflow-y-auto p-1" }, filteredOptions.length === 0 ? /* @__PURE__ */ React8__namespace.createElement("div", { className: "py-2 px-3 text-center text-sm " }, "No options found") : optionGroups.length > 0 ? (
+      /* @__PURE__ */ React9__namespace.createElement("div", { className: "max-h-64 overflow-y-auto p-1" }, filteredOptions.length === 0 ? /* @__PURE__ */ React9__namespace.createElement("div", { className: "py-2 px-3 text-center text-sm " }, "No options found") : optionGroups.length > 0 ? (
         // Render grouped options
         optionGroups.map((group, groupIndex) => {
           const groupOptions = group.options.filter(
             (opt) => filteredOptions.includes(opt)
           );
           if (groupOptions.length === 0) return null;
-          return /* @__PURE__ */ React8__namespace.createElement("div", { key: groupIndex, className: "py-1" }, /* @__PURE__ */ React8__namespace.createElement("div", { className: "py-1.5 px-2 text-xs font-semibold " }, group.label), groupOptions.map((option) => {
+          return /* @__PURE__ */ React9__namespace.createElement("div", { key: groupIndex, className: "py-1" }, /* @__PURE__ */ React9__namespace.createElement("div", { className: "py-1.5 px-2 text-xs font-semibold " }, group.label), groupOptions.map((option) => {
             const globalIndex = filteredOptions.indexOf(option);
             const isSelected = value === option.value;
             const isFocused = globalIndex === focusedIndex;
             const isDisabled = option.disabled;
-            return /* @__PURE__ */ React8__namespace.createElement(
+            return /* @__PURE__ */ React9__namespace.createElement(
               "div",
               {
                 key: option.value,
@@ -883,7 +890,7 @@ function Select({
           const isSelected = value === option.value;
           const isFocused = index === focusedIndex;
           const isDisabled = option.disabled;
-          return /* @__PURE__ */ React8__namespace.createElement(
+          return /* @__PURE__ */ React9__namespace.createElement(
             "div",
             {
               key: option.value,
@@ -901,6 +908,360 @@ function Select({
   );
 }
 Select.displayName = "Select";
+function MultiSelect({
+  name,
+  value = [],
+  onChange,
+  onBlur,
+  onFocus,
+  disabled = false,
+  required = false,
+  error = false,
+  className = "",
+  placeholder = "Select...",
+  searchable = true,
+  clearable = true,
+  loading = false,
+  maxSelections,
+  showSelectAll = false,
+  options = [],
+  optionGroups = [],
+  renderOption,
+  renderValue,
+  ...props
+}) {
+  const [isOpen, setIsOpen] = React9__namespace.useState(false);
+  const [searchQuery, setSearchQuery] = React9__namespace.useState("");
+  const [focusedIndex, setFocusedIndex] = React9__namespace.useState(-1);
+  const triggerRef = React9__namespace.useRef(null);
+  const dropdownRef = React9__namespace.useRef(null);
+  const searchInputRef = React9__namespace.useRef(null);
+  const dropdownId = `${name}-dropdown`;
+  const allOptions = React9__namespace.useMemo(() => {
+    if (optionGroups.length > 0) {
+      return optionGroups.flatMap((group) => group.options);
+    }
+    return options;
+  }, [options, optionGroups]);
+  const filteredOptions = React9__namespace.useMemo(() => {
+    if (!searchQuery.trim()) {
+      return allOptions;
+    }
+    const query = searchQuery.toLowerCase();
+    return allOptions.filter((option) => {
+      const label = typeof option.label === "string" ? option.label : String(option.label);
+      return label.toLowerCase().includes(query);
+    });
+  }, [allOptions, searchQuery]);
+  const selectedOptions = React9__namespace.useMemo(() => {
+    return allOptions.filter((opt) => value.includes(opt.value));
+  }, [allOptions, value]);
+  const hasValue = value.length > 0;
+  const isMaxReached = React9__namespace.useMemo(() => {
+    return maxSelections !== void 0 && value.length >= maxSelections;
+  }, [maxSelections, value.length]);
+  const handleToggleOption = (optionValue) => {
+    const isSelected = value.includes(optionValue);
+    if (isSelected) {
+      onChange(value.filter((v) => v !== optionValue));
+    } else {
+      if (!isMaxReached) {
+        onChange([...value, optionValue]);
+      }
+    }
+    setSearchQuery("");
+  };
+  const handleSelectAll = () => {
+    const enabledOptions = filteredOptions.filter((opt) => !opt.disabled);
+    const allValues = enabledOptions.map((opt) => opt.value);
+    onChange(allValues);
+    setSearchQuery("");
+  };
+  const handleClearAll = (e) => {
+    e.stopPropagation();
+    onChange([]);
+    setSearchQuery("");
+    setFocusedIndex(-1);
+  };
+  const handleRemoveValue = (optionValue, e) => {
+    e.stopPropagation();
+    onChange(value.filter((v) => v !== optionValue));
+  };
+  const handleToggle = () => {
+    if (disabled) return;
+    const newIsOpen = !isOpen;
+    setIsOpen(newIsOpen);
+    if (newIsOpen && searchable && searchInputRef.current) {
+      setTimeout(() => searchInputRef.current?.focus(), 0);
+    }
+    if (newIsOpen) {
+      onFocus?.();
+    }
+  };
+  const handleSearchChange = (e) => {
+    setSearchQuery(e.target.value);
+    setFocusedIndex(0);
+  };
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+          setFocusedIndex(0);
+        } else {
+          const enabledOptions = filteredOptions.filter((opt) => !opt.disabled);
+          if (enabledOptions.length > 0) {
+            const currentIndexInFiltered = focusedIndex;
+            const nextIndex = (currentIndexInFiltered + 1) % enabledOptions.length;
+            setFocusedIndex(filteredOptions.indexOf(enabledOptions[nextIndex]));
+          }
+        }
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (isOpen) {
+          const enabledOptions = filteredOptions.filter((opt) => !opt.disabled);
+          if (enabledOptions.length > 0) {
+            const currentIndexInFiltered = focusedIndex;
+            const prevIndex = (currentIndexInFiltered - 1 + enabledOptions.length) % enabledOptions.length;
+            setFocusedIndex(filteredOptions.indexOf(enabledOptions[prevIndex]));
+          }
+        }
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (isOpen && focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
+          const focusedOption = filteredOptions[focusedIndex];
+          if (!focusedOption.disabled) {
+            handleToggleOption(focusedOption.value);
+          }
+        } else if (!isOpen) {
+          setIsOpen(true);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        if (isOpen) {
+          setIsOpen(false);
+          setSearchQuery("");
+          setFocusedIndex(-1);
+        }
+        break;
+      case " ":
+        if (isOpen && focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
+          e.preventDefault();
+          const focusedOption = filteredOptions[focusedIndex];
+          if (!focusedOption.disabled) {
+            handleToggleOption(focusedOption.value);
+          }
+        } else if (!isOpen && !searchable) {
+          e.preventDefault();
+          setIsOpen(true);
+        }
+        break;
+    }
+  };
+  const handleBlur = (event) => {
+    const nextTarget = event?.relatedTarget;
+    const focusStayedInside = !!triggerRef.current && triggerRef.current.contains(nextTarget) || !!dropdownRef.current && dropdownRef.current.contains(nextTarget);
+    if (!nextTarget || !focusStayedInside) {
+      onBlur?.();
+    }
+  };
+  const closeDropdown = React9__namespace.useCallback(() => {
+    setIsOpen(false);
+    setSearchQuery("");
+    setFocusedIndex(-1);
+    onBlur?.();
+  }, [onBlur]);
+  useOnClickOutside.useOnClickOutside([triggerRef, dropdownRef], closeDropdown, void 0, {
+    capture: true
+  });
+  const combinedClassName = cn("relative w-full", className);
+  return /* @__PURE__ */ React9__namespace.createElement(
+    "div",
+    {
+      className: combinedClassName,
+      onKeyDown: handleKeyDown,
+      onBlur: handleBlur
+    },
+    /* @__PURE__ */ React9__namespace.createElement(
+      "select",
+      {
+        name,
+        value,
+        onChange: () => {
+        },
+        disabled,
+        required,
+        "aria-hidden": "true",
+        tabIndex: -1,
+        style: { display: "none" },
+        multiple: true
+      },
+      /* @__PURE__ */ React9__namespace.createElement("option", { value: "" }, "Select..."),
+      allOptions.map((option) => /* @__PURE__ */ React9__namespace.createElement("option", { key: option.value, value: option.value }, typeof option.label === "string" ? option.label : option.value))
+    ),
+    /* @__PURE__ */ React9__namespace.createElement(
+      "div",
+      {
+        ref: triggerRef,
+        className: cn(
+          "flex min-h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm",
+          "cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          !error && hasValue && "ring-2 ring-ring",
+          disabled && "cursor-not-allowed opacity-50 pointer-events-none",
+          error && "border-destructive ring-1 ring-destructive"
+        ),
+        onClick: handleToggle,
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-controls": dropdownId,
+        "aria-invalid": error || props["aria-invalid"],
+        "aria-describedby": props["aria-describedby"],
+        "aria-required": required || props["aria-required"],
+        "aria-disabled": disabled,
+        tabIndex: disabled ? -1 : 0
+      },
+      /* @__PURE__ */ React9__namespace.createElement("div", { className: "flex items-center flex-1 overflow-hidden" }, selectedOptions.length > 0 ? /* @__PURE__ */ React9__namespace.createElement("div", { className: "flex flex-wrap gap-1" }, selectedOptions.map((option) => /* @__PURE__ */ React9__namespace.createElement(
+        "span",
+        {
+          key: option.value,
+          className: "inline-flex items-center gap-1 rounded px-2 py-0.5 text-xs font-medium"
+        },
+        renderValue ? renderValue(option) : /* @__PURE__ */ React9__namespace.createElement(React9__namespace.Fragment, null, /* @__PURE__ */ React9__namespace.createElement("span", { className: "max-w-40 overflow-hidden text-ellipsis whitespace-nowrap" }, option.label), !disabled && /* @__PURE__ */ React9__namespace.createElement(
+          "button",
+          {
+            type: "button",
+            className: "flex items-center justify-center h-3.5 w-3.5 rounded-sm border-none bg-transparent cursor-pointer text-[0.625rem] p-0 transition-opacity hover:opacity-70",
+            onClick: (e) => handleRemoveValue(option.value, e),
+            "aria-label": `Remove ${option.label}`,
+            tabIndex: -1
+          },
+          "\u2715"
+        ))
+      ))) : /* @__PURE__ */ React9__namespace.createElement("span", { className: "relative" }, placeholder)),
+      /* @__PURE__ */ React9__namespace.createElement("div", { className: "flex items-center gap-1 ml-2" }, loading && /* @__PURE__ */ React9__namespace.createElement("span", { className: "text-xs" }, "\u23F3"), clearable && value.length > 0 && !disabled && !loading && /* @__PURE__ */ React9__namespace.createElement(
+        "button",
+        {
+          type: "button",
+          className: "flex items-center justify-center h-4 w-4 rounded-sm border-none bg-transparent cursor-pointer text-xs p-0 transition-opacity hover:opacity-70",
+          onClick: handleClearAll,
+          "aria-label": "Clear all selections",
+          tabIndex: -1
+        },
+        "\u2715"
+      ), /* @__PURE__ */ React9__namespace.createElement("span", { className: "text-xs leading-none", "aria-hidden": "true" }, isOpen ? "\u25B2" : "\u25BC"))
+    ),
+    isOpen && /* @__PURE__ */ React9__namespace.createElement(
+      "div",
+      {
+        ref: dropdownRef,
+        id: dropdownId,
+        className: "absolute z-50 top-full mt-1 w-full overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md",
+        role: "listbox",
+        "aria-multiselectable": "true"
+      },
+      searchable && /* @__PURE__ */ React9__namespace.createElement("div", { className: "p-2 border-b border-border" }, /* @__PURE__ */ React9__namespace.createElement(
+        "input",
+        {
+          ref: searchInputRef,
+          type: "text",
+          className: cn(
+            "w-full border border-input rounded px-2 py-1 text-sm bg-transparent outline-none focus:ring-1 focus:ring-ring",
+            INPUT_AUTOFILL_RESET_CLASSES
+          ),
+          placeholder: "Search...",
+          value: searchQuery,
+          onChange: handleSearchChange,
+          onClick: (e) => e.stopPropagation(),
+          "aria-label": "Search options"
+        }
+      )),
+      showSelectAll && filteredOptions.length > 0 && /* @__PURE__ */ React9__namespace.createElement("div", { className: "flex gap-2 p-2 border-b border-border" }, /* @__PURE__ */ React9__namespace.createElement(
+        "button",
+        {
+          type: "button",
+          className: "flex-1 px-3 py-1.5 text-xs font-medium rounded border border-input bg-transparent hover:bg-muted transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+          onClick: handleSelectAll,
+          disabled
+        },
+        "Select All"
+      ), value.length > 0 && /* @__PURE__ */ React9__namespace.createElement(
+        "button",
+        {
+          type: "button",
+          className: "flex-1 px-3 py-1.5 text-xs font-medium rounded border border-input bg-transparent hover:bg-muted transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
+          onClick: handleClearAll,
+          disabled
+        },
+        "Clear All"
+      )),
+      isMaxReached && /* @__PURE__ */ React9__namespace.createElement("div", { className: "px-2 py-1 text-xs font-medium text-amber-600 bg-destructive/80 text-destructive-foreground border-b border-destructive" }, "Maximum ", maxSelections, " selection", maxSelections !== 1 ? "s" : "", " ", "reached"),
+      /* @__PURE__ */ React9__namespace.createElement("div", { className: "max-h-64 overflow-y-auto p-1" }, filteredOptions.length === 0 ? /* @__PURE__ */ React9__namespace.createElement("div", { className: "px-2 py-1 text-center text-sm" }, "No options found") : optionGroups.length > 0 ? (
+        // Render grouped options
+        optionGroups.map((group, groupIndex) => {
+          const groupOptions = group.options.filter(
+            (opt) => filteredOptions.includes(opt)
+          );
+          if (groupOptions.length === 0) return null;
+          return /* @__PURE__ */ React9__namespace.createElement("div", { key: groupIndex, className: "py-1" }, /* @__PURE__ */ React9__namespace.createElement("div", { className: "py-1.5 px-2 text-xs font-semibold " }, group.label), groupOptions.map((option) => {
+            const globalIndex = filteredOptions.indexOf(option);
+            const isSelected = value.includes(option.value);
+            const isFocused = globalIndex === focusedIndex;
+            const isDisabled = option.disabled || isMaxReached && !isSelected;
+            return /* @__PURE__ */ React9__namespace.createElement(
+              "div",
+              {
+                key: option.value,
+                className: cn(
+                  "relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 px-2 text-sm outline-none transition-colors hover:bg-muted",
+                  isFocused && "bg-muted",
+                  isSelected && "font-medium",
+                  isDisabled && "pointer-events-none opacity-50"
+                ),
+                onClick: () => !isDisabled && handleToggleOption(option.value),
+                role: "option",
+                "aria-selected": isSelected,
+                "aria-disabled": isDisabled
+              },
+              /* @__PURE__ */ React9__namespace.createElement("span", { className: "text-base leading-none" }, isSelected ? "\u2611" : "\u2610"),
+              /* @__PURE__ */ React9__namespace.createElement("span", { className: "flex-1" }, renderOption ? renderOption(option) : option.label)
+            );
+          }));
+        })
+      ) : (
+        // Render flat options
+        filteredOptions.map((option, index) => {
+          const isSelected = value.includes(option.value);
+          const isFocused = index === focusedIndex;
+          const isDisabled = option.disabled || isMaxReached && !isSelected;
+          return /* @__PURE__ */ React9__namespace.createElement(
+            "div",
+            {
+              key: option.value,
+              className: cn(
+                "relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 px-2 text-sm outline-none transition-colors hover:bg-muted",
+                isFocused && "bg-muted",
+                isSelected && "font-medium bg-muted",
+                isDisabled && "pointer-events-none opacity-50"
+              ),
+              onClick: () => !isDisabled && handleToggleOption(option.value),
+              role: "option",
+              "aria-selected": isSelected,
+              "aria-disabled": isDisabled
+            },
+            /* @__PURE__ */ React9__namespace.createElement("span", { className: "text-base leading-none" }, isSelected ? "\u2611" : "\u2610"),
+            /* @__PURE__ */ React9__namespace.createElement("span", { className: "flex-1" }, renderOption ? renderOption(option) : option.label)
+          );
+        })
+      ))
+    )
+  );
+}
+MultiSelect.displayName = "MultiSelect";
 function FileInput({
   name,
   value = [],
@@ -926,14 +1287,14 @@ function FileInput({
   onFileRemove,
   ...props
 }) {
-  const inputRef = React8__namespace.useRef(null);
-  const [dragActive, setDragActive] = React8__namespace.useState(false);
-  const [cropperOpen, setCropperOpen] = React8__namespace.useState(false);
-  const [imageToCrop, setImageToCrop] = React8__namespace.useState(null);
-  const [crop, setCrop] = React8__namespace.useState({ x: 0, y: 0 });
-  const [zoom, setZoom] = React8__namespace.useState(1);
-  const [croppedAreaPixels, setCroppedAreaPixels] = React8__namespace.useState(null);
-  const validateFile = React8__namespace.useCallback(
+  const inputRef = React9__namespace.useRef(null);
+  const [dragActive, setDragActive] = React9__namespace.useState(false);
+  const [cropperOpen, setCropperOpen] = React9__namespace.useState(false);
+  const [imageToCrop, setImageToCrop] = React9__namespace.useState(null);
+  const [crop, setCrop] = React9__namespace.useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = React9__namespace.useState(1);
+  const [croppedAreaPixels, setCroppedAreaPixels] = React9__namespace.useState(null);
+  const validateFile = React9__namespace.useCallback(
     (file) => {
       if (accept) {
         const acceptedTypes = accept.split(",").map((t) => t.trim());
@@ -968,7 +1329,7 @@ function FileInput({
     },
     [accept, maxSize]
   );
-  const handleFiles = React8__namespace.useCallback(
+  const handleFiles = React9__namespace.useCallback(
     (fileList) => {
       if (!fileList || fileList.length === 0) return;
       const newFiles = Array.from(fileList);
@@ -1019,7 +1380,7 @@ function FileInput({
       onValidationError
     ]
   );
-  const createCroppedImage = React8__namespace.useCallback(
+  const createCroppedImage = React9__namespace.useCallback(
     async (imageUrl, cropArea) => {
       return new Promise((resolve, reject) => {
         const image = new Image();
@@ -1063,7 +1424,7 @@ function FileInput({
     },
     []
   );
-  const handleCropSave = React8__namespace.useCallback(async () => {
+  const handleCropSave = React9__namespace.useCallback(async () => {
     if (!imageToCrop || !croppedAreaPixels) return;
     try {
       const croppedBlob = await createCroppedImage(
@@ -1096,7 +1457,7 @@ function FileInput({
     onChange,
     multiple
   ]);
-  const handleCropCancel = React8__namespace.useCallback(() => {
+  const handleCropCancel = React9__namespace.useCallback(() => {
     if (imageToCrop) {
       URL.revokeObjectURL(imageToCrop.url);
     }
@@ -1106,13 +1467,13 @@ function FileInput({
     setZoom(1);
     setCroppedAreaPixels(null);
   }, [imageToCrop]);
-  const onCropChange = React8__namespace.useCallback((crop2) => {
+  const onCropChange = React9__namespace.useCallback((crop2) => {
     setCrop(crop2);
   }, []);
-  const onZoomChange = React8__namespace.useCallback((zoom2) => {
+  const onZoomChange = React9__namespace.useCallback((zoom2) => {
     setZoom(zoom2);
   }, []);
-  const onCropCompleteInternal = React8__namespace.useCallback(
+  const onCropCompleteInternal = React9__namespace.useCallback(
     (_, croppedAreaPixels2) => {
       setCroppedAreaPixels(croppedAreaPixels2);
     },
@@ -1173,7 +1534,7 @@ function FileInput({
     }
     return null;
   };
-  React8__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     return () => {
       value.forEach((file) => {
         const previewUrl = getPreviewUrl(file);
@@ -1187,7 +1548,7 @@ function FileInput({
     };
   }, [value, imageToCrop]);
   const combinedClassName = `${className}`.trim();
-  return /* @__PURE__ */ React8__namespace.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React8__namespace.createElement(
+  return /* @__PURE__ */ React9__namespace.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React9__namespace.createElement(
     "input",
     {
       ref: inputRef,
@@ -1204,7 +1565,7 @@ function FileInput({
       "aria-required": required || props["aria-required"],
       style: { display: "none" }
     }
-  ), /* @__PURE__ */ React8__namespace.createElement(
+  ), /* @__PURE__ */ React9__namespace.createElement(
     "div",
     {
       className: `flex min-h-32 w-full cursor-pointer items-center justify-center rounded-md border-2 border-dashed border-input bg-transparent p-6 transition-colors hover:bg-primary/50 hover:border-ring ${dragActive ? "bg-primary text-primary-foreground border-ring" : ""} ${disabled ? "cursor-not-allowed opacity-50" : ""} ${error ? "border-destructive" : ""}`,
@@ -1219,7 +1580,7 @@ function FileInput({
       "aria-label": placeholder,
       "aria-disabled": disabled
     },
-    /* @__PURE__ */ React8__namespace.createElement("div", { className: "flex flex-col items-center gap-2 text-center" }, /* @__PURE__ */ React8__namespace.createElement(
+    /* @__PURE__ */ React9__namespace.createElement("div", { className: "flex flex-col items-center gap-2 text-center" }, /* @__PURE__ */ React9__namespace.createElement(
       "svg",
       {
         width: "48",
@@ -1232,19 +1593,19 @@ function FileInput({
         strokeLinejoin: "round",
         "aria-hidden": "true"
       },
-      /* @__PURE__ */ React8__namespace.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-      /* @__PURE__ */ React8__namespace.createElement("polyline", { points: "17 8 12 3 7 8" }),
-      /* @__PURE__ */ React8__namespace.createElement("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
-    ), /* @__PURE__ */ React8__namespace.createElement("p", { className: "text-sm font-medium" }, value.length > 0 ? `${value.length} file(s) selected` : placeholder), accept && /* @__PURE__ */ React8__namespace.createElement("p", { className: "text-xs" }, "Accepted: ", accept), maxSize && /* @__PURE__ */ React8__namespace.createElement("p", { className: "text-xs " }, "Max size: ", formatFileSize(maxSize)))
-  ), value.length > 0 && /* @__PURE__ */ React8__namespace.createElement("ul", { className: "flex flex-col gap-2 mt-4", role: "list" }, value.map((file, index) => {
+      /* @__PURE__ */ React9__namespace.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+      /* @__PURE__ */ React9__namespace.createElement("polyline", { points: "17 8 12 3 7 8" }),
+      /* @__PURE__ */ React9__namespace.createElement("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+    ), /* @__PURE__ */ React9__namespace.createElement("p", { className: "text-sm font-medium" }, value.length > 0 ? `${value.length} file(s) selected` : placeholder), accept && /* @__PURE__ */ React9__namespace.createElement("p", { className: "text-xs" }, "Accepted: ", accept), maxSize && /* @__PURE__ */ React9__namespace.createElement("p", { className: "text-xs " }, "Max size: ", formatFileSize(maxSize)))
+  ), value.length > 0 && /* @__PURE__ */ React9__namespace.createElement("ul", { className: "flex flex-col gap-2 mt-4", role: "list" }, value.map((file, index) => {
     const previewUrl = showPreview ? getPreviewUrl(file) : null;
-    return /* @__PURE__ */ React8__namespace.createElement(
+    return /* @__PURE__ */ React9__namespace.createElement(
       "li",
       {
         key: `${file.name}-${index}`,
         className: "flex items-center gap-3 p-3 rounded-md border border-border bg-card text-card-foreground hover:bg-primary/50 transition-colors"
       },
-      previewUrl && /* @__PURE__ */ React8__namespace.createElement(
+      previewUrl && /* @__PURE__ */ React9__namespace.createElement(
         "img",
         {
           src: previewUrl,
@@ -1254,7 +1615,7 @@ function FileInput({
           height: "48"
         }
       ),
-      /* @__PURE__ */ React8__namespace.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ React8__namespace.createElement("span", { className: "text-sm font-medium truncate" }, file.name), /* @__PURE__ */ React8__namespace.createElement("span", { className: "text-xs" }, formatFileSize(file.size)), showProgress && uploadProgress[file.name] !== void 0 && /* @__PURE__ */ React8__namespace.createElement("div", { className: "flex items-center gap-2 mt-1" }, /* @__PURE__ */ React8__namespace.createElement(
+      /* @__PURE__ */ React9__namespace.createElement("div", { className: "flex flex-col flex-1 min-w-0" }, /* @__PURE__ */ React9__namespace.createElement("span", { className: "text-sm font-medium truncate" }, file.name), /* @__PURE__ */ React9__namespace.createElement("span", { className: "text-xs" }, formatFileSize(file.size)), showProgress && uploadProgress[file.name] !== void 0 && /* @__PURE__ */ React9__namespace.createElement("div", { className: "flex items-center gap-2 mt-1" }, /* @__PURE__ */ React9__namespace.createElement(
         "div",
         {
           className: "h-1.5 bg-muted rounded-full overflow-hidden flex-1",
@@ -1264,15 +1625,15 @@ function FileInput({
           "aria-valuemax": 100,
           "aria-label": `Upload progress: ${uploadProgress[file.name]}%`
         },
-        /* @__PURE__ */ React8__namespace.createElement(
+        /* @__PURE__ */ React9__namespace.createElement(
           "div",
           {
             className: "h-full bg-primary transition-all",
             style: { width: `${uploadProgress[file.name]}%` }
           }
         )
-      ), /* @__PURE__ */ React8__namespace.createElement("span", { className: "text-xs " }, uploadProgress[file.name], "%"))),
-      enableCropping && file.type.startsWith("image/") && /* @__PURE__ */ React8__namespace.createElement(
+      ), /* @__PURE__ */ React9__namespace.createElement("span", { className: "text-xs " }, uploadProgress[file.name], "%"))),
+      enableCropping && file.type.startsWith("image/") && /* @__PURE__ */ React9__namespace.createElement(
         "button",
         {
           type: "button",
@@ -1284,7 +1645,7 @@ function FileInput({
           className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-primary hover:text-primary-foreground transition-colors",
           "aria-label": `Crop ${file.name}`
         },
-        /* @__PURE__ */ React8__namespace.createElement(
+        /* @__PURE__ */ React9__namespace.createElement(
           "svg",
           {
             width: "20",
@@ -1297,11 +1658,11 @@ function FileInput({
             strokeLinejoin: "round",
             "aria-hidden": "true"
           },
-          /* @__PURE__ */ React8__namespace.createElement("path", { d: "M6.13 1L6 16a2 2 0 0 0 2 2h15" }),
-          /* @__PURE__ */ React8__namespace.createElement("path", { d: "M1 6.13L16 6a2 2 0 0 1 2 2v15" })
+          /* @__PURE__ */ React9__namespace.createElement("path", { d: "M6.13 1L6 16a2 2 0 0 0 2 2h15" }),
+          /* @__PURE__ */ React9__namespace.createElement("path", { d: "M1 6.13L16 6a2 2 0 0 1 2 2v15" })
         )
       ),
-      /* @__PURE__ */ React8__namespace.createElement(
+      /* @__PURE__ */ React9__namespace.createElement(
         "button",
         {
           type: "button",
@@ -1313,7 +1674,7 @@ function FileInput({
           className: "flex items-center justify-center h-8 w-8 rounded border-none bg-transparent hover:bg-primary hover:text-primary-foreground transition-colors",
           "aria-label": `Remove ${file.name}`
         },
-        /* @__PURE__ */ React8__namespace.createElement(
+        /* @__PURE__ */ React9__namespace.createElement(
           "svg",
           {
             width: "20",
@@ -1326,19 +1687,19 @@ function FileInput({
             strokeLinejoin: "round",
             "aria-hidden": "true"
           },
-          /* @__PURE__ */ React8__namespace.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-          /* @__PURE__ */ React8__namespace.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+          /* @__PURE__ */ React9__namespace.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+          /* @__PURE__ */ React9__namespace.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
         )
       )
     );
-  })), cropperOpen && imageToCrop && /* @__PURE__ */ React8__namespace.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center" }, /* @__PURE__ */ React8__namespace.createElement(
+  })), cropperOpen && imageToCrop && /* @__PURE__ */ React9__namespace.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center" }, /* @__PURE__ */ React9__namespace.createElement(
     "div",
     {
       className: "absolute inset-0 bg-black/50",
       onClick: handleCropCancel,
       "aria-label": "Close cropper"
     }
-  ), /* @__PURE__ */ React8__namespace.createElement("div", { className: "relative bg-popover border border-border rounded-lg shadow-lg max-w-3xl w-full mx-4" }, /* @__PURE__ */ React8__namespace.createElement("div", { className: "flex items-center justify-between p-4 border-b border-border" }, /* @__PURE__ */ React8__namespace.createElement("h3", { className: "text-lg font-semibold" }, "Crop Image"), /* @__PURE__ */ React8__namespace.createElement(
+  ), /* @__PURE__ */ React9__namespace.createElement("div", { className: "relative bg-popover border border-border rounded-lg shadow-lg max-w-3xl w-full mx-4" }, /* @__PURE__ */ React9__namespace.createElement("div", { className: "flex items-center justify-between p-4 border-b border-border" }, /* @__PURE__ */ React9__namespace.createElement("h3", { className: "text-lg font-semibold" }, "Crop Image"), /* @__PURE__ */ React9__namespace.createElement(
     "button",
     {
       type: "button",
@@ -1347,7 +1708,7 @@ function FileInput({
       "aria-label": "Close"
     },
     "\u2715"
-  )), /* @__PURE__ */ React8__namespace.createElement("div", { className: "p-4" }, /* @__PURE__ */ React8__namespace.createElement(
+  )), /* @__PURE__ */ React9__namespace.createElement("div", { className: "p-4" }, /* @__PURE__ */ React9__namespace.createElement(
     "div",
     {
       className: "relative w-full h-96 bg-muted rounded-md overflow-hidden",
@@ -1369,7 +1730,7 @@ function FileInput({
         document.addEventListener("mouseup", handleMouseUp);
       }
     },
-    /* @__PURE__ */ React8__namespace.createElement(
+    /* @__PURE__ */ React9__namespace.createElement(
       "img",
       {
         src: imageToCrop.url,
@@ -1404,7 +1765,7 @@ function FileInput({
         }
       }
     ),
-    /* @__PURE__ */ React8__namespace.createElement(
+    /* @__PURE__ */ React9__namespace.createElement(
       "div",
       {
         className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 border-2 border-primary rounded pointer-events-none",
@@ -1413,9 +1774,9 @@ function FileInput({
           aspectRatio: cropAspectRatio ? String(cropAspectRatio) : void 0
         }
       },
-      /* @__PURE__ */ React8__namespace.createElement("div", { className: "absolute inset-0 grid grid-cols-3 grid-rows-3" }, /* @__PURE__ */ React8__namespace.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React8__namespace.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React8__namespace.createElement("div", { className: "border-b border-primary/30" }), /* @__PURE__ */ React8__namespace.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React8__namespace.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React8__namespace.createElement("div", { className: "border-b border-primary/30" }), /* @__PURE__ */ React8__namespace.createElement("div", { className: "border-r border-primary/30" }), /* @__PURE__ */ React8__namespace.createElement("div", { className: "border-r border-primary/30" }), /* @__PURE__ */ React8__namespace.createElement("div", null))
+      /* @__PURE__ */ React9__namespace.createElement("div", { className: "absolute inset-0 grid grid-cols-3 grid-rows-3" }, /* @__PURE__ */ React9__namespace.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React9__namespace.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React9__namespace.createElement("div", { className: "border-b border-primary/30" }), /* @__PURE__ */ React9__namespace.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React9__namespace.createElement("div", { className: "border-r border-b border-primary/30" }), /* @__PURE__ */ React9__namespace.createElement("div", { className: "border-b border-primary/30" }), /* @__PURE__ */ React9__namespace.createElement("div", { className: "border-r border-primary/30" }), /* @__PURE__ */ React9__namespace.createElement("div", { className: "border-r border-primary/30" }), /* @__PURE__ */ React9__namespace.createElement("div", null))
     )
-  ), /* @__PURE__ */ React8__namespace.createElement("div", { className: "flex items-center gap-3 mt-4" }, /* @__PURE__ */ React8__namespace.createElement(
+  ), /* @__PURE__ */ React9__namespace.createElement("div", { className: "flex items-center gap-3 mt-4" }, /* @__PURE__ */ React9__namespace.createElement(
     "label",
     {
       htmlFor: "zoom-slider",
@@ -1424,7 +1785,7 @@ function FileInput({
     "Zoom: ",
     zoom.toFixed(1),
     "x"
-  ), /* @__PURE__ */ React8__namespace.createElement(
+  ), /* @__PURE__ */ React9__namespace.createElement(
     "input",
     {
       id: "zoom-slider",
@@ -1437,7 +1798,7 @@ function FileInput({
       className: "flex-1 h-2 bg-muted rounded-lg appearance-none cursor-pointer",
       "aria-label": "Zoom level"
     }
-  ))), /* @__PURE__ */ React8__namespace.createElement("div", { className: "flex items-center justify-end gap-2 p-4 border-t border-border" }, /* @__PURE__ */ React8__namespace.createElement(
+  ))), /* @__PURE__ */ React9__namespace.createElement("div", { className: "flex items-center justify-end gap-2 p-4 border-t border-border" }, /* @__PURE__ */ React9__namespace.createElement(
     "button",
     {
       type: "button",
@@ -1445,7 +1806,7 @@ function FileInput({
       onClick: handleCropCancel
     },
     "Cancel"
-  ), /* @__PURE__ */ React8__namespace.createElement(
+  ), /* @__PURE__ */ React9__namespace.createElement(
     "button",
     {
       type: "button",
@@ -1487,13 +1848,13 @@ function DatePicker({
   showIcon = true,
   ...props
 }) {
-  const [isOpen, setIsOpen] = React8__namespace.useState(false);
-  const [selectedMonth, setSelectedMonth] = React8__namespace.useState(
+  const [isOpen, setIsOpen] = React9__namespace.useState(false);
+  const [selectedMonth, setSelectedMonth] = React9__namespace.useState(
     value || /* @__PURE__ */ new Date()
   );
-  const containerRef = React8__namespace.useRef(null);
-  const inputRef = React8__namespace.useRef(null);
-  React8__namespace.useEffect(() => {
+  const inputRef = React9__namespace.useRef(null);
+  const dropdownRef = React9__namespace.useRef(null);
+  React9__namespace.useEffect(() => {
     if (value) {
       setSelectedMonth(value);
     }
@@ -1519,12 +1880,20 @@ function DatePicker({
     if (isDateDisabled && isDateDisabled(date)) return true;
     return false;
   };
-  const closeCalendar = React8__namespace.useCallback(() => {
-    if (!isOpen) return;
+  const closeCalendar = React9__namespace.useCallback(() => {
     setIsOpen(false);
     onBlur?.();
-  }, [isOpen, onBlur]);
-  useOnClickOutside.useOnClickOutside(containerRef, closeCalendar, "pointerdown", true);
+  }, [onBlur]);
+  useOnClickOutside.useOnClickOutside([inputRef, dropdownRef], closeCalendar, void 0, {
+    capture: true
+  });
+  const handleBlur = (event) => {
+    const nextTarget = event?.relatedTarget;
+    const focusStayedInside = !!inputRef.current && inputRef.current.contains(nextTarget) || !!dropdownRef.current && dropdownRef.current.contains(nextTarget);
+    if (!nextTarget || !focusStayedInside) {
+      onBlur?.();
+    }
+  };
   const dayGridStyle = {
     gridTemplateColumns: "repeat(7, minmax(0, 1fr))"
   };
@@ -1562,7 +1931,7 @@ function DatePicker({
     const handleNextMonth = () => {
       setSelectedMonth(new Date(year, month + 1, 1));
     };
-    return /* @__PURE__ */ React8__namespace.createElement("div", { role: "grid", "aria-label": "Calendar", className: "w-[248px] max-w-full" }, /* @__PURE__ */ React8__namespace.createElement("div", { className: "flex items-center justify-between pb-3" }, /* @__PURE__ */ React8__namespace.createElement(
+    return /* @__PURE__ */ React9__namespace.createElement("div", { role: "grid", "aria-label": "Calendar", className: "w-[248px] max-w-full" }, /* @__PURE__ */ React9__namespace.createElement("div", { className: "flex items-center justify-between pb-3" }, /* @__PURE__ */ React9__namespace.createElement(
       "button",
       {
         type: "button",
@@ -1571,7 +1940,7 @@ function DatePicker({
         "aria-label": "Previous month"
       },
       "\u2039"
-    ), /* @__PURE__ */ React8__namespace.createElement("div", { className: "font-medium text-sm" }, `${monthNames[month]} ${year}`), /* @__PURE__ */ React8__namespace.createElement(
+    ), /* @__PURE__ */ React9__namespace.createElement("div", { className: "font-medium text-sm" }, `${monthNames[month]} ${year}`), /* @__PURE__ */ React9__namespace.createElement(
       "button",
       {
         type: "button",
@@ -1580,13 +1949,13 @@ function DatePicker({
         "aria-label": "Next month"
       },
       "\u203A"
-    )), /* @__PURE__ */ React8__namespace.createElement(
+    )), /* @__PURE__ */ React9__namespace.createElement(
       "div",
       {
         className: "grid gap-1 text-xs text-muted-foreground",
         style: dayGridStyle
       },
-      ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React8__namespace.createElement(
+      ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React9__namespace.createElement(
         "div",
         {
           key: day,
@@ -1594,14 +1963,14 @@ function DatePicker({
         },
         day
       ))
-    ), /* @__PURE__ */ React8__namespace.createElement("div", { className: "grid gap-1", style: dayGridStyle }, days.map((date, index) => {
+    ), /* @__PURE__ */ React9__namespace.createElement("div", { className: "grid gap-1", style: dayGridStyle }, days.map((date, index) => {
       if (!date) {
-        return /* @__PURE__ */ React8__namespace.createElement("div", { key: `empty-${index}`, className: "h-8 w-8" });
+        return /* @__PURE__ */ React9__namespace.createElement("div", { key: `empty-${index}`, className: "h-8 w-8" });
       }
       const isSelected = value && date.toDateString() === value.toDateString();
       const isToday = date.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
       const disabled2 = isDisabled(date);
-      return /* @__PURE__ */ React8__namespace.createElement(
+      return /* @__PURE__ */ React9__namespace.createElement(
         "button",
         {
           key: date.toISOString(),
@@ -1622,20 +1991,20 @@ function DatePicker({
     })));
   };
   const combinedClassName = cn("relative", className);
-  return /* @__PURE__ */ React8__namespace.createElement("div", { ref: containerRef, className: combinedClassName }, /* @__PURE__ */ React8__namespace.createElement(
+  return /* @__PURE__ */ React9__namespace.createElement("div", { className: combinedClassName, onBlur: handleBlur }, /* @__PURE__ */ React9__namespace.createElement(
     "input",
     {
       type: "hidden",
       name,
       value: value ? value.toISOString() : ""
     }
-  ), /* @__PURE__ */ React8__namespace.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React8__namespace.createElement(
+  ), /* @__PURE__ */ React9__namespace.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React9__namespace.createElement(
     "span",
     {
       className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none",
       "aria-hidden": "true"
     },
-    /* @__PURE__ */ React8__namespace.createElement(
+    /* @__PURE__ */ React9__namespace.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -1648,9 +2017,9 @@ function DatePicker({
         strokeLinejoin: "round",
         strokeWidth: "2"
       },
-      /* @__PURE__ */ React8__namespace.createElement("path", { d: "M8 2v4m8-4v4m5 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8M3 10h18m-5 10l2 2l4-4" })
+      /* @__PURE__ */ React9__namespace.createElement("path", { d: "M8 2v4m8-4v4m5 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8M3 10h18m-5 10l2 2l4-4" })
     )
-  ), /* @__PURE__ */ React8__namespace.createElement(
+  ), /* @__PURE__ */ React9__namespace.createElement(
     "input",
     {
       ref: inputRef,
@@ -1667,7 +2036,6 @@ function DatePicker({
       ),
       value: displayValue,
       onClick: handleToggle,
-      onBlur,
       disabled,
       required,
       placeholder,
@@ -1676,7 +2044,7 @@ function DatePicker({
       "aria-required": required || props["aria-required"],
       readOnly: true
     }
-  ), clearable && value && !disabled && /* @__PURE__ */ React8__namespace.createElement(
+  ), clearable && value && !disabled && /* @__PURE__ */ React9__namespace.createElement(
     "button",
     {
       type: "button",
@@ -1686,7 +2054,14 @@ function DatePicker({
       tabIndex: -1
     },
     "\u2715"
-  )), isOpen && !disabled && /* @__PURE__ */ React8__namespace.createElement("div", { className: "absolute z-50 top-full mt-1 w-fit rounded-md border border-border bg-popover text-popover-foreground shadow-md p-3" }, renderCalendar()));
+  )), isOpen && !disabled && /* @__PURE__ */ React9__namespace.createElement(
+    "div",
+    {
+      ref: dropdownRef,
+      className: "absolute z-50 top-full mt-1 w-fit rounded-md border border-border bg-popover text-popover-foreground shadow-md p-3"
+    },
+    renderCalendar()
+  ));
 }
 DatePicker.displayName = "DatePicker";
 function normalizeToNativeTime(value) {
@@ -1746,11 +2121,11 @@ function TimePicker({
   showIcon = true,
   ...props
 }) {
-  const inputRef = React8__namespace.useRef(null);
-  const [nativeValue, setNativeValue] = React8__namespace.useState(
+  const inputRef = React9__namespace.useRef(null);
+  const [nativeValue, setNativeValue] = React9__namespace.useState(
     normalizeToNativeTime(value)
   );
-  React8__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     setNativeValue(normalizeToNativeTime(value));
   }, [value]);
   const handleChange = (e) => {
@@ -1766,13 +2141,13 @@ function TimePicker({
   };
   const hasValue = Boolean(value);
   const stepInSeconds = Math.max(1, minuteStep * 60);
-  return /* @__PURE__ */ React8__namespace.createElement("div", { className: cn("relative", className) }, /* @__PURE__ */ React8__namespace.createElement("input", { type: "hidden", name, value }), /* @__PURE__ */ React8__namespace.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React8__namespace.createElement(
+  return /* @__PURE__ */ React9__namespace.createElement("div", { className: cn("relative", className) }, /* @__PURE__ */ React9__namespace.createElement("input", { type: "hidden", name, value }), /* @__PURE__ */ React9__namespace.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React9__namespace.createElement(
     "span",
     {
       className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none",
       "aria-hidden": "true"
     },
-    /* @__PURE__ */ React8__namespace.createElement(
+    /* @__PURE__ */ React9__namespace.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -1785,10 +2160,10 @@ function TimePicker({
         strokeLinejoin: "round",
         strokeWidth: "2"
       },
-      /* @__PURE__ */ React8__namespace.createElement("circle", { cx: "12", cy: "12", r: "10" }),
-      /* @__PURE__ */ React8__namespace.createElement("path", { d: "M12 6v6l4 2" })
+      /* @__PURE__ */ React9__namespace.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ React9__namespace.createElement("path", { d: "M12 6v6l4 2" })
     )
-  ), /* @__PURE__ */ React8__namespace.createElement(
+  ), /* @__PURE__ */ React9__namespace.createElement(
     "input",
     {
       ref: inputRef,
@@ -1816,7 +2191,7 @@ function TimePicker({
       "aria-required": required || props["aria-required"],
       ...props
     }
-  ), clearable && value && !disabled && /* @__PURE__ */ React8__namespace.createElement(
+  ), clearable && value && !disabled && /* @__PURE__ */ React9__namespace.createElement(
     "button",
     {
       type: "button",
@@ -1869,15 +2244,16 @@ function DateRangePicker({
   separator = " - ",
   ...props
 }) {
-  const [isOpen, setIsOpen] = React8__namespace.useState(false);
-  const [selectedMonth, setSelectedMonth] = React8__namespace.useState(
+  const [isOpen, setIsOpen] = React9__namespace.useState(false);
+  const [selectedMonth, setSelectedMonth] = React9__namespace.useState(
     value.start || /* @__PURE__ */ new Date()
   );
-  const [rangeStart, setRangeStart] = React8__namespace.useState(value.start);
-  const [rangeEnd, setRangeEnd] = React8__namespace.useState(value.end);
-  const [hoverDate, setHoverDate] = React8__namespace.useState(null);
-  const containerRef = React8__namespace.useRef(null);
-  React8__namespace.useEffect(() => {
+  const [rangeStart, setRangeStart] = React9__namespace.useState(value.start);
+  const [rangeEnd, setRangeEnd] = React9__namespace.useState(value.end);
+  const [hoverDate, setHoverDate] = React9__namespace.useState(null);
+  const triggerRef = React9__namespace.useRef(null);
+  const dropdownRef = React9__namespace.useRef(null);
+  React9__namespace.useEffect(() => {
     setRangeStart(value.start);
     setRangeEnd(value.end);
     if (value.start) {
@@ -1920,12 +2296,20 @@ function DateRangePicker({
     if (isDateDisabled && isDateDisabled(date)) return true;
     return false;
   };
-  const closeCalendar = React8__namespace.useCallback(() => {
-    if (!isOpen) return;
+  const closeCalendar = React9__namespace.useCallback(() => {
     setIsOpen(false);
     onBlur?.();
-  }, [isOpen, onBlur]);
-  useOnClickOutside.useOnClickOutside(containerRef, closeCalendar, "pointerdown", true);
+  }, [onBlur]);
+  useOnClickOutside.useOnClickOutside([triggerRef, dropdownRef], closeCalendar, void 0, {
+    capture: true
+  });
+  const handleBlur = (event) => {
+    const nextTarget = event?.relatedTarget;
+    const focusStayedInside = !!triggerRef.current && triggerRef.current.contains(nextTarget) || !!dropdownRef.current && dropdownRef.current.contains(nextTarget);
+    if (!nextTarget || !focusStayedInside) {
+      onBlur?.();
+    }
+  };
   const dayGridStyle = {
     gridTemplateColumns: "repeat(7, minmax(0, 1fr))"
   };
@@ -1959,7 +2343,7 @@ function DateRangePicker({
     for (let day = 1; day <= daysInMonth; day++) {
       days.push(new Date(year, month, day));
     }
-    return /* @__PURE__ */ React8__namespace.createElement("div", { className: "w-[240px] max-w-full" }, /* @__PURE__ */ React8__namespace.createElement("div", { className: "flex items-center justify-between pb-3" }, controls?.prev ? /* @__PURE__ */ React8__namespace.createElement(
+    return /* @__PURE__ */ React9__namespace.createElement("div", { className: "w-[240px] max-w-full" }, /* @__PURE__ */ React9__namespace.createElement("div", { className: "flex items-center justify-between pb-3" }, controls?.prev ? /* @__PURE__ */ React9__namespace.createElement(
       "button",
       {
         type: "button",
@@ -1968,7 +2352,7 @@ function DateRangePicker({
         "aria-label": "Previous month"
       },
       "\u2039"
-    ) : /* @__PURE__ */ React8__namespace.createElement("div", { className: "h-8 w-8", "aria-hidden": "true" }), /* @__PURE__ */ React8__namespace.createElement("div", { className: "font-medium text-sm" }, `${monthNames[month]} ${year}`), controls?.next ? /* @__PURE__ */ React8__namespace.createElement(
+    ) : /* @__PURE__ */ React9__namespace.createElement("div", { className: "h-8 w-8", "aria-hidden": "true" }), /* @__PURE__ */ React9__namespace.createElement("div", { className: "font-medium text-sm" }, `${monthNames[month]} ${year}`), controls?.next ? /* @__PURE__ */ React9__namespace.createElement(
       "button",
       {
         type: "button",
@@ -1977,13 +2361,13 @@ function DateRangePicker({
         "aria-label": "Next month"
       },
       "\u203A"
-    ) : /* @__PURE__ */ React8__namespace.createElement("div", { className: "h-8 w-8", "aria-hidden": "true" })), /* @__PURE__ */ React8__namespace.createElement(
+    ) : /* @__PURE__ */ React9__namespace.createElement("div", { className: "h-8 w-8", "aria-hidden": "true" })), /* @__PURE__ */ React9__namespace.createElement(
       "div",
       {
         className: "grid gap-1 text-xs text-muted-foreground",
         style: dayGridStyle
       },
-      ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React8__namespace.createElement(
+      ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React9__namespace.createElement(
         "div",
         {
           key: `${month}-${day}`,
@@ -1991,9 +2375,9 @@ function DateRangePicker({
         },
         day
       ))
-    ), /* @__PURE__ */ React8__namespace.createElement("div", { className: "grid gap-1", style: dayGridStyle }, days.map((date, index) => {
+    ), /* @__PURE__ */ React9__namespace.createElement("div", { className: "grid gap-1", style: dayGridStyle }, days.map((date, index) => {
       if (!date) {
-        return /* @__PURE__ */ React8__namespace.createElement("div", { key: `empty-${month}-${index}`, className: "h-8 w-8" });
+        return /* @__PURE__ */ React9__namespace.createElement("div", { key: `empty-${month}-${index}`, className: "h-8 w-8" });
       }
       const isStart = rangeStart && date.toDateString() === rangeStart.toDateString();
       const isEnd = rangeEnd && date.toDateString() === rangeEnd.toDateString();
@@ -2005,7 +2389,7 @@ function DateRangePicker({
       );
       const isToday = date.toDateString() === (/* @__PURE__ */ new Date()).toDateString();
       const disabled2 = isDisabled(date);
-      return /* @__PURE__ */ React8__namespace.createElement(
+      return /* @__PURE__ */ React9__namespace.createElement(
         "button",
         {
           key: date.toISOString(),
@@ -2030,27 +2414,27 @@ function DateRangePicker({
   };
   const combinedClassName = cn("relative", className);
   const displayValue = rangeStart && rangeEnd ? `${formatDate2(rangeStart, format)}${separator}${formatDate2(rangeEnd, format)}` : rangeStart ? formatDate2(rangeStart, format) : "";
-  return /* @__PURE__ */ React8__namespace.createElement("div", { ref: containerRef, className: combinedClassName }, /* @__PURE__ */ React8__namespace.createElement(
+  return /* @__PURE__ */ React9__namespace.createElement("div", { className: combinedClassName, onBlur: handleBlur }, /* @__PURE__ */ React9__namespace.createElement(
     "input",
     {
       type: "hidden",
       name: `${name}[start]`,
       value: rangeStart ? rangeStart.toISOString() : ""
     }
-  ), /* @__PURE__ */ React8__namespace.createElement(
+  ), /* @__PURE__ */ React9__namespace.createElement(
     "input",
     {
       type: "hidden",
       name: `${name}[end]`,
       value: rangeEnd ? rangeEnd.toISOString() : ""
     }
-  ), /* @__PURE__ */ React8__namespace.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React8__namespace.createElement(
+  ), /* @__PURE__ */ React9__namespace.createElement("div", { className: "relative" }, showIcon && /* @__PURE__ */ React9__namespace.createElement(
     "span",
     {
       className: "absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none",
       "aria-hidden": "true"
     },
-    /* @__PURE__ */ React8__namespace.createElement(
+    /* @__PURE__ */ React9__namespace.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -2063,11 +2447,12 @@ function DateRangePicker({
         strokeLinejoin: "round",
         strokeWidth: "2"
       },
-      /* @__PURE__ */ React8__namespace.createElement("path", { d: "M8 2v4m8-4v4m5 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8M3 10h18m-5 10l2 2l4-4" })
+      /* @__PURE__ */ React9__namespace.createElement("path", { d: "M8 2v4m8-4v4m5 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8M3 10h18m-5 10l2 2l4-4" })
     )
-  ), /* @__PURE__ */ React8__namespace.createElement(
+  ), /* @__PURE__ */ React9__namespace.createElement(
     "input",
     {
+      ref: triggerRef,
       type: "text",
       className: cn(
         "flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-base shadow-sm transition-colors",
@@ -2081,7 +2466,6 @@ function DateRangePicker({
       ),
       value: displayValue,
       onClick: handleToggle,
-      onBlur,
       disabled,
       required,
       placeholder,
@@ -2090,7 +2474,7 @@ function DateRangePicker({
       "aria-required": required || props["aria-required"],
       readOnly: true
     }
-  ), clearable && (rangeStart || rangeEnd) && !disabled && /* @__PURE__ */ React8__namespace.createElement(
+  ), clearable && (rangeStart || rangeEnd) && !disabled && /* @__PURE__ */ React9__namespace.createElement(
     "button",
     {
       type: "button",
@@ -2100,7 +2484,15 @@ function DateRangePicker({
       tabIndex: -1
     },
     "\u2715"
-  )), isOpen && !disabled && /* @__PURE__ */ React8__namespace.createElement("div", { className: "absolute z-50 top-full mt-1 w-fit rounded-md border border-border bg-popover text-popover-foreground shadow-md p-3" }, /* @__PURE__ */ React8__namespace.createElement("div", { role: "grid", "aria-label": "Calendar" }, /* @__PURE__ */ React8__namespace.createElement("div", { className: "grid gap-4", style: monthsGridStyle }, renderMonth(selectedMonth, { prev: true }), renderMonth(addMonths(selectedMonth, 1), { next: true }))), rangeStart && !rangeEnd && /* @__PURE__ */ React8__namespace.createElement("div", { className: "text-xs text-center pt-2 border-t border-border mt-2" }, "Select end date")));
+  )), isOpen && !disabled && /* @__PURE__ */ React9__namespace.createElement(
+    "div",
+    {
+      ref: dropdownRef,
+      className: "absolute z-50 top-full mt-1 w-fit rounded-md border border-border bg-popover text-popover-foreground shadow-md p-3"
+    },
+    /* @__PURE__ */ React9__namespace.createElement("div", { role: "grid", "aria-label": "Calendar" }, /* @__PURE__ */ React9__namespace.createElement("div", { className: "grid gap-4", style: monthsGridStyle }, renderMonth(selectedMonth, { prev: true }), renderMonth(addMonths(selectedMonth, 1), { next: true }))),
+    rangeStart && !rangeEnd && /* @__PURE__ */ React9__namespace.createElement("div", { className: "text-xs text-center pt-2 border-t border-border mt-2" }, "Select end date")
+  ));
 }
 DateRangePicker.displayName = "DateRangePicker";
 function htmlToMarkdown(html) {
@@ -2171,11 +2563,11 @@ function RichTextEditor({
   ],
   ...props
 }) {
-  const [currentMode, setCurrentMode] = React8__namespace.useState(mode);
-  const [content, setContent] = React8__namespace.useState(value);
-  const editorRef = React8__namespace.useRef(null);
-  const textareaRef = React8__namespace.useRef(null);
-  React8__namespace.useEffect(() => {
+  const [currentMode, setCurrentMode] = React9__namespace.useState(mode);
+  const [content, setContent] = React9__namespace.useState(value);
+  const editorRef = React9__namespace.useRef(null);
+  const textareaRef = React9__namespace.useRef(null);
+  React9__namespace.useEffect(() => {
     setContent(value);
     if (currentMode === "wysiwyg" && editorRef.current) {
       editorRef.current.innerHTML = value;
@@ -2263,7 +2655,7 @@ function RichTextEditor({
       }
     }
   };
-  const hasValue = React8__namespace.useMemo(() => {
+  const hasValue = React9__namespace.useMemo(() => {
     if (!content) return false;
     const stripped = content.replace(/<[^>]+>/g, "").trim();
     return stripped.length > 0;
@@ -2280,10 +2672,10 @@ function RichTextEditor({
     maxHeight,
     overflowY: maxHeight ? "auto" : void 0
   };
-  return /* @__PURE__ */ React8__namespace.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React8__namespace.createElement("input", { type: "hidden", name, value: content }), showToolbar && /* @__PURE__ */ React8__namespace.createElement("div", { className: "flex items-center justify-between p-2 border-b border-border bg-muted/50" }, /* @__PURE__ */ React8__namespace.createElement("div", { className: "flex items-center gap-1" }, toolbarButtons.map((buttonName) => {
+  return /* @__PURE__ */ React9__namespace.createElement("div", { className: combinedClassName }, /* @__PURE__ */ React9__namespace.createElement("input", { type: "hidden", name, value: content }), showToolbar && /* @__PURE__ */ React9__namespace.createElement("div", { className: "flex items-center justify-between p-2 border-b border-border bg-muted/50" }, /* @__PURE__ */ React9__namespace.createElement("div", { className: "flex items-center gap-1" }, toolbarButtons.map((buttonName) => {
     const button = toolbarConfig[buttonName];
     if (!button) return null;
-    return /* @__PURE__ */ React8__namespace.createElement(
+    return /* @__PURE__ */ React9__namespace.createElement(
       "button",
       {
         key: buttonName,
@@ -2296,7 +2688,7 @@ function RichTextEditor({
       },
       button.icon
     );
-  })), allowModeSwitch && /* @__PURE__ */ React8__namespace.createElement(
+  })), allowModeSwitch && /* @__PURE__ */ React9__namespace.createElement(
     "button",
     {
       type: "button",
@@ -2307,7 +2699,7 @@ function RichTextEditor({
       "aria-label": `Switch to ${currentMode === "wysiwyg" ? "Markdown" : "WYSIWYG"}`
     },
     currentMode === "wysiwyg" ? "MD" : "WYSIWYG"
-  )), /* @__PURE__ */ React8__namespace.createElement("div", { style: editorStyle }, currentMode === "wysiwyg" ? /* @__PURE__ */ React8__namespace.createElement(
+  )), /* @__PURE__ */ React9__namespace.createElement("div", { style: editorStyle }, currentMode === "wysiwyg" ? /* @__PURE__ */ React9__namespace.createElement(
     "div",
     {
       ref: editorRef,
@@ -2322,7 +2714,7 @@ function RichTextEditor({
       "aria-required": required || props["aria-required"],
       suppressContentEditableWarning: true
     }
-  ) : /* @__PURE__ */ React8__namespace.createElement(
+  ) : /* @__PURE__ */ React9__namespace.createElement(
     "textarea",
     {
       ref: textareaRef,
@@ -2350,6 +2742,7 @@ exports.CheckboxGroup = CheckboxGroup;
 exports.DatePicker = DatePicker;
 exports.DateRangePicker = DateRangePicker;
 exports.FileInput = FileInput;
+exports.MultiSelect = MultiSelect;
 exports.Radio = Radio;
 exports.RichTextEditor = RichTextEditor;
 exports.Select = Select;