@firecms/ui 3.0.0-canary.211 → 3.0.0-canary.213

package/dist/index.umd.js

@@ -730,7 +730,11 @@
       } else {
         onValueChange?.(!value);
       }
-    }, className: cls(size === "small" ? "w-[38px] h-[22px] min-w-[38px] min-h-[22px]" : "w-[42px] h-[26px] min-w-[42px] min-h-[26px]", "outline-none rounded-full relative shadow-sm", value ? disabled ? "bg-white bg-opacity-54 dark:bg-surface-accent-950 border-surface-accent-100 dark:border-surface-accent-700 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700" : "ring-secondary ring-1 bg-secondary dark:bg-secondary" : "bg-white bg-opacity-54 dark:bg-surface-accent-900 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700", className), ...props, children: [
+    }, className: cls({
+      "min-h-[32px]": size === "small",
+      "min-h-[48px]": size === "medium",
+      "min-h-[64px]": size === "large"
+    }, size === "small" ? "w-[38px] min-w-[38px]" : "w-[42px] min-w-[42px]", "outline-none rounded-full relative shadow-sm", value ? disabled ? "bg-white bg-opacity-54 dark:bg-surface-accent-950 border-surface-accent-100 dark:border-surface-accent-700 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700" : "ring-secondary ring-1 bg-secondary dark:bg-secondary" : "bg-white bg-opacity-54 dark:bg-surface-accent-900 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700", className), ...props, children: [
       allowIndeterminate && (value === null || value === void 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("block rounded-full transition-transform duration-100 transform will-change-auto", disabled ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600", {
         "w-[21px] h-[10px]": size === "medium" || size === "large",
         "w-[19px] h-[8px]": size === "small",
@@ -768,7 +772,11 @@
     React.useEffect(() => {
     }, []);
     const focus = document.activeElement === refInput?.current || document.activeElement === ref?.current;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, onFocus, onBlur, tabIndex: -1, className: cls(!invisible && fieldBackgroundMixin, !invisible && (disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin), disabled ? "cursor-default" : "cursor-pointer", "rounded-md max-w-full justify-between box-border relative inline-flex items-center", !invisible && focus && !disabled ? focusedClasses : "", error ? "text-red-500 dark:text-red-600" : focus && !disabled ? "text-primary" : !disabled ? "text-text-primary dark:text-text-primary-dark" : "text-text-secondary dark:text-text-secondary-dark", size === "small" ? "min-h-[40px]" : size === "medium" ? "min-h-[48px]" : "min-h-[64px]", size === "small" ? "pl-2" : "pl-4", size === "small" ? "pr-4" : "pr-6", position === "end" ? "flex-row-reverse" : "flex-row", fullWidth ? "w-full" : "", className), onClick: disabled ? void 0 : (e) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, onFocus, onBlur, tabIndex: -1, className: cls(!invisible && fieldBackgroundMixin, !invisible && (disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin), disabled ? "cursor-default" : "cursor-pointer", "rounded-md max-w-full justify-between box-border relative inline-flex items-center", !invisible && focus && !disabled ? focusedClasses : "", error ? "text-red-500 dark:text-red-600" : focus && !disabled ? "text-primary" : !disabled ? "text-text-primary dark:text-text-primary-dark" : "text-text-secondary dark:text-text-secondary-dark", {
+      "min-h-[28px]": size === "small",
+      "min-h-[42px]": size === "medium",
+      "min-h-[64px]": size === "large"
+    }, size === "small" ? "pl-2" : "pl-4", size === "small" ? "pr-4" : "pr-6", position === "end" ? "flex-row-reverse" : "flex-row", fullWidth ? "w-full" : "", className), onClick: disabled ? void 0 : (e) => {
       if (props.allowIndeterminate) {
         if (value === null || value === void 0) onValueChange?.(true);
         else if (value) onValueChange?.(false);
@@ -27695,7 +27703,7 @@
     return t15;
   }
   const DateTimeField = (t0) => {
-    const $ = reactCompilerRuntime.c(52);
+    const $ = reactCompilerRuntime.c(55);
     const {
       value,
       label,
@@ -27769,161 +27777,170 @@
     }
     const t6 = !invisible && fieldBackgroundMixin;
     const t7 = disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin;
-    const t8 = size === "medium";
-    const t9 = size === "large";
-    let t10;
-    if ($[6] !== className || $[7] !== t6 || $[8] !== t7 || $[9] !== t8 || $[10] !== t9) {
-      t10 = cls("rounded-md relative max-w-full", t6, t7, {
-        "min-h-[48px]": t8,
-        "min-h-[64px]": t9
+    const t8 = size === "small";
+    const t9 = size === "medium";
+    const t10 = size === "large";
+    let t11;
+    if ($[6] !== className || $[7] !== t10 || $[8] !== t6 || $[9] !== t7 || $[10] !== t8 || $[11] !== t9) {
+      t11 = cls("rounded-md relative max-w-full", t6, t7, {
+        "min-h-[28px]": t8,
+        "min-h-[42px]": t9,
+        "min-h-[64px]": t10
       }, className);
       $[6] = className;
-      $[7] = t6;
-      $[8] = t7;
-      $[9] = t8;
-      $[10] = t9;
-      $[11] = t10;
+      $[7] = t10;
+      $[8] = t6;
+      $[9] = t7;
+      $[10] = t8;
+      $[11] = t9;
+      $[12] = t11;
     } else {
-      t10 = $[11];
+      t11 = $[12];
     }
-    let t11;
-    if ($[12] !== disabled) {
-      t11 = () => {
+    let t12;
+    if ($[13] !== disabled) {
+      t12 = () => {
         if (!disabled) {
           inputRef.current?.focus();
         }
       };
-      $[12] = disabled;
-      $[13] = t11;
+      $[13] = disabled;
+      $[14] = t12;
     } else {
-      t11 = $[13];
+      t12 = $[14];
     }
-    let t12;
-    if ($[14] !== disabled || $[15] !== error || $[16] !== focused || $[17] !== label) {
-      t12 = label && /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { className: cls("absolute top-1 pointer-events-none", !error ? focused ? "text-primary" : "text-text-secondary dark:text-text-secondary-dark" : "text-red-500 dark:text-red-500", disabled ? "opacity-50" : ""), shrink: true, children: label });
-      $[14] = disabled;
-      $[15] = error;
-      $[16] = focused;
-      $[17] = label;
-      $[18] = t12;
-    } else {
-      t12 = $[18];
-    }
-    const t13 = mode === "date_time" ? "datetime-local" : "date";
-    const t14 = valueAsInputValue(value ?? null, mode);
-    let t15;
+    let t13;
+    if ($[15] !== disabled || $[16] !== error || $[17] !== focused || $[18] !== label) {
+      t13 = label && /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { className: cls("absolute top-1 pointer-events-none", !error ? focused ? "text-primary" : "text-text-secondary dark:text-text-secondary-dark" : "text-red-500 dark:text-red-500", disabled ? "opacity-50" : ""), shrink: true, children: label });
+      $[15] = disabled;
+      $[16] = error;
+      $[17] = focused;
+      $[18] = label;
+      $[19] = t13;
+    } else {
+      t13 = $[19];
+    }
+    const t14 = mode === "date_time" ? "datetime-local" : "date";
+    const t15 = valueAsInputValue(value ?? null, mode);
     let t16;
-    if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
-      t15 = () => setFocused(true);
-      t16 = () => setFocused(false);
-      $[19] = t15;
+    let t17;
+    if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+      t16 = () => setFocused(true);
+      t17 = () => setFocused(false);
       $[20] = t16;
+      $[21] = t17;
     } else {
-      t15 = $[19];
       t16 = $[20];
+      t17 = $[21];
     }
-    const t17 = clearable ? "pr-14" : "pr-12";
-    const t18 = size === "medium" ? "min-h-[48px]" : "min-h-[64px]";
-    const t19 = label ? "pt-8 pb-2" : "py-2";
-    const t20 = disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-surface-accent-600 dark:text-surface-accent-500";
-    let t21;
-    if ($[21] !== inputClassName || $[22] !== t17 || $[23] !== t18 || $[24] !== t19 || $[25] !== t20) {
-      t21 = cls("w-full outline-none bg-transparent leading-normal text-base px-3", t17, "rounded-md", t18, t19, inputClassName, t20);
-      $[21] = inputClassName;
-      $[22] = t17;
-      $[23] = t18;
-      $[24] = t19;
-      $[25] = t20;
-      $[26] = t21;
-    } else {
-      t21 = $[26];
-    }
+    const t18 = clearable ? "pr-14" : "pr-12";
+    const t19 = size === "small";
+    const t20 = size === "medium";
+    const t21 = size === "large";
     let t22;
-    if ($[27] !== disabled || $[28] !== handleInputChange || $[29] !== t13 || $[30] !== t14 || $[31] !== t21) {
-      t22 = /* @__PURE__ */ jsxRuntime.jsx("input", { ref: inputRef, type: t13, value: t14, onChange: handleInputChange, onFocus: t15, onBlur: t16, disabled, className: t21 });
-      $[27] = disabled;
-      $[28] = handleInputChange;
-      $[29] = t13;
-      $[30] = t14;
-      $[31] = t21;
-      $[32] = t22;
+    if ($[22] !== disabled || $[23] !== inputClassName || $[24] !== label || $[25] !== t18 || $[26] !== t19 || $[27] !== t20 || $[28] !== t21) {
+      t22 = cls("w-full outline-none bg-transparent leading-normal text-base px-3", t18, "rounded-md", {
+        "min-h-[28px]": t19,
+        "min-h-[42px]": t20,
+        "min-h-[64px]": t21
+      }, label ? "pt-8 pb-2" : "py-2", inputClassName, disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-surface-accent-600 dark:text-surface-accent-500");
+      $[22] = disabled;
+      $[23] = inputClassName;
+      $[24] = label;
+      $[25] = t18;
+      $[26] = t19;
+      $[27] = t20;
+      $[28] = t21;
+      $[29] = t22;
     } else {
-      t22 = $[32];
+      t22 = $[29];
     }
     let t23;
-    if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
-      t23 = (e_2) => {
-        e_2.stopPropagation();
-        inputRef.current?.showPicker();
-      };
-      $[33] = t23;
+    if ($[30] !== disabled || $[31] !== handleInputChange || $[32] !== t14 || $[33] !== t15 || $[34] !== t22) {
+      t23 = /* @__PURE__ */ jsxRuntime.jsx("input", { ref: inputRef, type: t14, value: t15, onChange: handleInputChange, onFocus: t16, onBlur: t17, disabled, className: t22 });
+      $[30] = disabled;
+      $[31] = handleInputChange;
+      $[32] = t14;
+      $[33] = t15;
+      $[34] = t22;
+      $[35] = t23;
     } else {
-      t23 = $[33];
+      t23 = $[35];
     }
     let t24;
-    if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
-      t24 = /* @__PURE__ */ jsxRuntime.jsx(IconButton, { onClick: t23, className: "absolute right-3 top-1/2 transform -translate-y-1/2 !text-surface-accent-500", children: /* @__PURE__ */ jsxRuntime.jsx(CalendarMonthIcon, { color: "disabled" }) });
-      $[34] = t24;
+    if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+      t24 = (e_2) => {
+        e_2.stopPropagation();
+        inputRef.current?.showPicker();
+      };
+      $[36] = t24;
     } else {
-      t24 = $[34];
+      t24 = $[36];
     }
     let t25;
-    if ($[35] !== clearable || $[36] !== handleClear || $[37] !== value) {
-      t25 = clearable && value && /* @__PURE__ */ jsxRuntime.jsx(IconButton, { onClick: handleClear, className: "absolute right-14 top-1/2 transform -translate-y-1/2 text-surface-accent-400 ", children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) });
-      $[35] = clearable;
-      $[36] = handleClear;
-      $[37] = value;
-      $[38] = t25;
+    if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
+      t25 = /* @__PURE__ */ jsxRuntime.jsx(IconButton, { onClick: t24, className: "absolute right-3 top-1/2 transform -translate-y-1/2 !text-surface-accent-500", children: /* @__PURE__ */ jsxRuntime.jsx(CalendarMonthIcon, { color: "disabled" }) });
+      $[37] = t25;
     } else {
-      t25 = $[38];
+      t25 = $[37];
     }
     let t26;
-    if ($[39] !== style || $[40] !== t10 || $[41] !== t11 || $[42] !== t12 || $[43] !== t22 || $[44] !== t25) {
-      t26 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t10, style, onClick: t11, children: [
-        t12,
-        t22,
-        t24,
-        t25
-      ] });
-      $[39] = style;
-      $[40] = t10;
-      $[41] = t11;
-      $[42] = t12;
-      $[43] = t22;
-      $[44] = t25;
-      $[45] = t26;
+    if ($[38] !== clearable || $[39] !== handleClear || $[40] !== value) {
+      t26 = clearable && value && /* @__PURE__ */ jsxRuntime.jsx(IconButton, { onClick: handleClear, className: "absolute right-14 top-1/2 transform -translate-y-1/2 text-surface-accent-400 ", children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {}) });
+      $[38] = clearable;
+      $[39] = handleClear;
+      $[40] = value;
+      $[41] = t26;
     } else {
-      t26 = $[45];
+      t26 = $[41];
     }
     let t27;
-    if ($[46] !== invalidValue || $[47] !== value) {
-      t27 = invalidValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center m-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon, { size: "medium", color: "error" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pl-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", children: "Invalid date value for this field" }),
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", children: `The provided value is: ${JSON.stringify(value)}` })
-        ] })
+    if ($[42] !== style || $[43] !== t11 || $[44] !== t12 || $[45] !== t13 || $[46] !== t23 || $[47] !== t26) {
+      t27 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t11, style, onClick: t12, children: [
+        t13,
+        t23,
+        t25,
+        t26
       ] });
-      $[46] = invalidValue;
-      $[47] = value;
+      $[42] = style;
+      $[43] = t11;
+      $[44] = t12;
+      $[45] = t13;
+      $[46] = t23;
+      $[47] = t26;
       $[48] = t27;
     } else {
       t27 = $[48];
     }
     let t28;
-    if ($[49] !== t26 || $[50] !== t27) {
-      t28 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        t5,
-        t26,
-        t27
+    if ($[49] !== invalidValue || $[50] !== value) {
+      t28 = invalidValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center m-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon, { size: "small", color: "error" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pl-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", children: "Invalid date value for this field" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "body2", children: `The provided value is: ${JSON.stringify(value)}` })
+        ] })
       ] });
-      $[49] = t26;
-      $[50] = t27;
+      $[49] = invalidValue;
+      $[50] = value;
       $[51] = t28;
     } else {
       t28 = $[51];
     }
-    return t28;
+    let t29;
+    if ($[52] !== t27 || $[53] !== t28) {
+      t29 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        t5,
+        t27,
+        t28
+      ] });
+      $[52] = t27;
+      $[53] = t28;
+      $[54] = t29;
+    } else {
+      t29 = $[54];
+    }
+    return t29;
   };
   const inputStyles = `
     /* Hide the default calendar icon in Chrome, Safari, Edge, Opera */
@@ -29633,91 +29650,92 @@
   }
   const MultiSelectContext = React__namespace.createContext({});
   const MultiSelect = React__namespace.forwardRef((t0, ref) => {
-    const $ = reactCompilerRuntime.c(98);
+    const $ = reactCompilerRuntime.c(101);
     const {
       value,
-      size,
+      size: t1,
       label,
       error,
       onValueChange,
       invisible,
       disabled,
       placeholder,
-      modalPopover: t1,
-      includeClear: t2,
-      includeSelectAll: t3,
-      useChips: t4,
+      modalPopover: t2,
+      includeClear: t3,
+      includeSelectAll: t4,
+      useChips: t5,
       className,
       children,
       renderValues,
       open,
       onOpenChange
     } = t0;
-    const modalPopover = t1 === void 0 ? true : t1;
-    const includeClear = t2 === void 0 ? true : t2;
-    const includeSelectAll = t3 === void 0 ? true : t3;
-    const useChips = t4 === void 0 ? true : t4;
+    const size = t1 === void 0 ? "large" : t1;
+    const modalPopover = t2 === void 0 ? true : t2;
+    const includeClear = t3 === void 0 ? true : t3;
+    const includeSelectAll = t4 === void 0 ? true : t4;
+    const useChips = t5 === void 0 ? true : t5;
     const [isPopoverOpen, setIsPopoverOpen] = React__namespace.useState(open ?? false);
-    let t5;
+    let t6;
     if ($[0] !== value) {
-      t5 = value ?? [];
+      t6 = value ?? [];
       $[0] = value;
-      $[1] = t5;
+      $[1] = t6;
     } else {
-      t5 = $[1];
+      t6 = $[1];
     }
-    const [selectedValues, setSelectedValues] = React__namespace.useState(t5);
-    let t6;
+    const [selectedValues, setSelectedValues] = React__namespace.useState(t6);
+    let t7;
     if ($[2] !== onOpenChange) {
-      t6 = (open_0) => {
+      t7 = (open_0) => {
         setIsPopoverOpen(open_0);
         onOpenChange?.(open_0);
       };
       $[2] = onOpenChange;
-      $[3] = t6;
+      $[3] = t7;
     } else {
-      t6 = $[3];
+      t7 = $[3];
     }
-    const onPopoverOpenChange = t6;
-    let t7;
+    const onPopoverOpenChange = t7;
     let t8;
+    let t9;
     if ($[4] !== open) {
-      t7 = () => {
+      t8 = () => {
         setIsPopoverOpen(open ?? false);
       };
-      t8 = [open];
+      t9 = [open];
       $[4] = open;
-      $[5] = t7;
-      $[6] = t8;
+      $[5] = t8;
+      $[6] = t9;
     } else {
-      t7 = $[5];
-      t8 = $[6];
+      t8 = $[5];
+      t9 = $[6];
     }
-    React.useEffect(t7, t8);
-    let t9;
+    React.useEffect(t8, t9);
+    let t10;
     if ($[7] !== children) {
-      t9 = children ? React.Children.map(children, _temp$1).filter(Boolean) : [];
+      t10 = children ? React.Children.map(children, _temp$1).filter(Boolean) : [];
       $[7] = children;
-      $[8] = t9;
+      $[8] = t10;
     } else {
-      t9 = $[8];
+      t10 = $[8];
     }
-    const allValues = t9;
-    let t10;
+    const allValues = t10;
     let t11;
+    let t12;
     if ($[9] !== value) {
-      t10 = () => {
+      t11 = () => {
         setSelectedValues(value ?? []);
       };
-      t11 = [value];
+      t12 = [value];
       $[9] = value;
-      $[10] = t10;
-      $[11] = t11;
+      $[10] = t11;
+      $[11] = t12;
     } else {
-      t10 = $[10];
-      t11 = $[11];
+      t11 = $[10];
+      t12 = $[11];
     }
-    React__namespace.useEffect(t10, t11);
+    React__namespace.useEffect(t11, t12);
     let onItemClick;
     let updateValues;
     if ($[12] !== onValueChange || $[13] !== selectedValues) {
@@ -29742,9 +29760,9 @@
       onItemClick = $[14];
       updateValues = $[15];
     }
-    let t12;
+    let t13;
     if ($[16] !== onPopoverOpenChange || $[17] !== selectedValues || $[18] !== updateValues) {
-      t12 = (event) => {
+      t13 = (event) => {
         if (event.key === "Enter") {
           onPopoverOpenChange(true);
         } else {
@@ -29758,50 +29776,50 @@
       $[16] = onPopoverOpenChange;
       $[17] = selectedValues;
       $[18] = updateValues;
-      $[19] = t12;
+      $[19] = t13;
     } else {
-      t12 = $[19];
+      t13 = $[19];
     }
-    const handleInputKeyDown = t12;
-    let t13;
+    const handleInputKeyDown = t13;
+    let t14;
     if ($[20] !== selectedValues || $[21] !== updateValues) {
-      t13 = (value_0) => {
+      t14 = (value_0) => {
         const newSelectedValues_1 = selectedValues.some((v_2) => String(v_2) === String(value_0)) ? selectedValues.filter((v_1) => String(v_1) !== String(value_0)) : [...selectedValues, value_0];
         updateValues(newSelectedValues_1);
       };
       $[20] = selectedValues;
       $[21] = updateValues;
-      $[22] = t13;
+      $[22] = t14;
     } else {
-      t13 = $[22];
+      t14 = $[22];
     }
-    const toggleOption = t13;
-    let t14;
+    const toggleOption = t14;
+    let t15;
     if ($[23] !== updateValues) {
-      t14 = () => {
+      t15 = () => {
         updateValues([]);
       };
       $[23] = updateValues;
-      $[24] = t14;
+      $[24] = t15;
     } else {
-      t14 = $[24];
+      t15 = $[24];
     }
-    const handleClear = t14;
-    let t15;
+    const handleClear = t15;
+    let t16;
     if ($[25] !== isPopoverOpen || $[26] !== onPopoverOpenChange) {
-      t15 = () => {
+      t16 = () => {
         onPopoverOpenChange(!isPopoverOpen);
       };
       $[25] = isPopoverOpen;
       $[26] = onPopoverOpenChange;
-      $[27] = t15;
+      $[27] = t16;
     } else {
-      t15 = $[27];
+      t16 = $[27];
     }
-    const handleTogglePopover = t15;
-    let t16;
+    const handleTogglePopover = t16;
+    let t17;
     if ($[28] !== allValues || $[29] !== handleClear || $[30] !== onPopoverOpenChange || $[31] !== selectedValues.length || $[32] !== updateValues) {
-      t16 = () => {
+      t17 = () => {
         if (selectedValues.length === allValues.length) {
           handleClear();
         } else {
@@ -29814,55 +29832,68 @@
       $[30] = onPopoverOpenChange;
       $[31] = selectedValues.length;
       $[32] = updateValues;
-      $[33] = t16;
+      $[33] = t17;
     } else {
-      t16 = $[33];
+      t17 = $[33];
     }
-    const toggleAll = t16;
+    const toggleAll = t17;
     useInjectStyles("MultiSelect", `
 [cmdk-group] {
   max-height: 45vh;
   overflow-y: auto;
   // width: 400px;
 } `);
-    let t17;
+    let t18;
     if ($[34] !== onItemClick || $[35] !== selectedValues) {
-      t17 = {
+      t18 = {
         fieldValue: selectedValues,
         onItemClick
       };
       $[34] = onItemClick;
       $[35] = selectedValues;
-      $[36] = t17;
+      $[36] = t18;
     } else {
-      t17 = $[36];
+      t18 = $[36];
     }
-    let t18;
+    let t19;
     if ($[37] !== error || $[38] !== label) {
-      t18 = typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(SelectInputLabel, { error, children: label }) : label;
+      t19 = typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(SelectInputLabel, { error, children: label }) : label;
       $[37] = error;
       $[38] = label;
-      $[39] = t18;
+      $[39] = t19;
     } else {
-      t18 = $[39];
+      t19 = $[39];
     }
-    const t19 = size === "small" ? "min-h-[42px]" : "min-h-[64px]";
-    const t20 = invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin;
-    const t21 = disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin;
-    let t22;
-    if ($[40] !== className || $[41] !== t19 || $[42] !== t20 || $[43] !== t21) {
-      t22 = cls(t19, "py-2", "px-4", "select-none rounded-md text-sm", t20, t21, "relative flex items-center", className);
+    const t20 = size === "small";
+    const t21 = size === "medium";
+    const t22 = size === "large";
+    let t23;
+    if ($[40] !== className || $[41] !== disabled || $[42] !== invisible || $[43] !== size || $[44] !== t20 || $[45] !== t21 || $[46] !== t22) {
+      t23 = cls({
+        "min-h-[28px]": t20,
+        "min-h-[42px]": t21,
+        "min-h-[64px]": t22
+      }, {
+        "py-1": size === "small",
+        "py-2": size === "medium" || size === "large"
+      }, {
+        "px-2": size === "small",
+        "px-4": size === "medium" || size === "large"
+      }, "select-none rounded-md text-sm", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, "relative flex items-center", className);
       $[40] = className;
-      $[41] = t19;
-      $[42] = t20;
-      $[43] = t21;
-      $[44] = t22;
+      $[41] = disabled;
+      $[42] = invisible;
+      $[43] = size;
+      $[44] = t20;
+      $[45] = t21;
+      $[46] = t22;
+      $[47] = t23;
     } else {
-      t22 = $[44];
+      t23 = $[47];
     }
-    let t23;
-    if ($[45] !== children || $[46] !== handleClear || $[47] !== includeClear || $[48] !== isPopoverOpen || $[49] !== placeholder || $[50] !== renderValues || $[51] !== selectedValues || $[52] !== toggleOption || $[53] !== useChips) {
-      t23 = selectedValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center w-full", children: [
+    let t24;
+    if ($[48] !== children || $[49] !== handleClear || $[50] !== includeClear || $[51] !== isPopoverOpen || $[52] !== placeholder || $[53] !== renderValues || $[54] !== selectedValues || $[55] !== toggleOption || $[56] !== useChips) {
+      t24 = selectedValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center w-full", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-1.5 text-start", children: [
           renderValues && renderValues(selectedValues),
           !renderValues && selectedValues.map((value_1) => {
@@ -29891,175 +29922,175 @@
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: placeholder }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsxRuntime.jsx(KeyboardArrowDownIcon, { size: "small", className: cls("transition", isPopoverOpen ? "rotate-180" : "") }) })
       ] });
-      $[45] = children;
-      $[46] = handleClear;
-      $[47] = includeClear;
-      $[48] = isPopoverOpen;
-      $[49] = placeholder;
-      $[50] = renderValues;
-      $[51] = selectedValues;
-      $[52] = toggleOption;
-      $[53] = useChips;
-      $[54] = t23;
-    } else {
-      t23 = $[54];
-    }
-    let t24;
-    if ($[55] !== handleTogglePopover || $[56] !== ref || $[57] !== t22 || $[58] !== t23) {
-      t24 = /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { ref, onClick: handleTogglePopover, className: t22, children: t23 }) });
-      $[55] = handleTogglePopover;
-      $[56] = ref;
-      $[57] = t22;
-      $[58] = t23;
-      $[59] = t24;
-    } else {
-      t24 = $[59];
+      $[48] = children;
+      $[49] = handleClear;
+      $[50] = includeClear;
+      $[51] = isPopoverOpen;
+      $[52] = placeholder;
+      $[53] = renderValues;
+      $[54] = selectedValues;
+      $[55] = toggleOption;
+      $[56] = useChips;
+      $[57] = t24;
+    } else {
+      t24 = $[57];
     }
     let t25;
-    if ($[60] === Symbol.for("react.memo_cache_sentinel")) {
-      t25 = cls("z-50 relative overflow-hidden border bg-white dark:bg-surface-900 rounded-lg w-[400px]", defaultBorderMixin);
-      $[60] = t25;
+    if ($[58] !== handleTogglePopover || $[59] !== ref || $[60] !== t23 || $[61] !== t24) {
+      t25 = /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { ref, onClick: handleTogglePopover, className: t23, children: t24 }) });
+      $[58] = handleTogglePopover;
+      $[59] = ref;
+      $[60] = t23;
+      $[61] = t24;
+      $[62] = t25;
     } else {
-      t25 = $[60];
+      t25 = $[62];
     }
     let t26;
-    if ($[61] !== onPopoverOpenChange) {
-      t26 = () => onPopoverOpenChange(false);
-      $[61] = onPopoverOpenChange;
-      $[62] = t26;
+    if ($[63] === Symbol.for("react.memo_cache_sentinel")) {
+      t26 = cls("z-50 relative overflow-hidden border bg-white dark:bg-surface-900 rounded-lg w-[400px]", defaultBorderMixin);
+      $[63] = t26;
     } else {
-      t26 = $[62];
+      t26 = $[63];
     }
     let t27;
-    if ($[63] === Symbol.for("react.memo_cache_sentinel")) {
-      t27 = cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full m-4 flex-grow ");
-      $[63] = t27;
+    if ($[64] !== onPopoverOpenChange) {
+      t27 = () => onPopoverOpenChange(false);
+      $[64] = onPopoverOpenChange;
+      $[65] = t27;
     } else {
-      t27 = $[63];
+      t27 = $[65];
     }
     let t28;
-    if ($[64] !== handleInputKeyDown) {
-      t28 = /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Input, { className: t27, placeholder: "Search...", onKeyDown: handleInputKeyDown });
-      $[64] = handleInputKeyDown;
-      $[65] = t28;
+    if ($[66] === Symbol.for("react.memo_cache_sentinel")) {
+      t28 = cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full m-4 flex-grow ");
+      $[66] = t28;
     } else {
-      t28 = $[65];
+      t28 = $[66];
     }
     let t29;
-    if ($[66] !== handleClear || $[67] !== selectedValues.length) {
-      t29 = selectedValues.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: handleClear, className: "text-sm justify-center cursor-pointer py-3 px-4 text-text-secondary dark:text-text-secondary-dark", children: "Clear" });
-      $[66] = handleClear;
-      $[67] = selectedValues.length;
+    if ($[67] !== handleInputKeyDown) {
+      t29 = /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Input, { className: t28, placeholder: "Search...", onKeyDown: handleInputKeyDown });
+      $[67] = handleInputKeyDown;
       $[68] = t29;
     } else {
       t29 = $[68];
     }
     let t30;
-    if ($[69] !== t28 || $[70] !== t29) {
-      t30 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center", children: [
-        t28,
-        t29
-      ] });
-      $[69] = t28;
-      $[70] = t29;
+    if ($[69] !== handleClear || $[70] !== selectedValues.length) {
+      t30 = selectedValues.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: handleClear, className: "text-sm justify-center cursor-pointer py-3 px-4 text-text-secondary dark:text-text-secondary-dark", children: "Clear" });
+      $[69] = handleClear;
+      $[70] = selectedValues.length;
       $[71] = t30;
     } else {
       t30 = $[71];
     }
     let t31;
-    if ($[72] === Symbol.for("react.memo_cache_sentinel")) {
-      t31 = /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "horizontal", className: "my-0" });
-      $[72] = t31;
+    if ($[72] !== t29 || $[73] !== t30) {
+      t31 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center", children: [
+        t29,
+        t30
+      ] });
+      $[72] = t29;
+      $[73] = t30;
+      $[74] = t31;
     } else {
-      t31 = $[72];
+      t31 = $[74];
     }
     let t32;
-    if ($[73] === Symbol.for("react.memo_cache_sentinel")) {
-      t32 = /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Empty, { className: "px-4 py-2", children: "No results found." });
-      $[73] = t32;
+    if ($[75] === Symbol.for("react.memo_cache_sentinel")) {
+      t32 = /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "horizontal", className: "my-0" });
+      $[75] = t32;
     } else {
-      t32 = $[73];
+      t32 = $[75];
     }
     let t33;
-    if ($[74] !== allValues.length || $[75] !== includeSelectAll || $[76] !== selectedValues.length || $[77] !== toggleAll) {
-      t33 = includeSelectAll && /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.Item, { onSelect: toggleAll, className: cls("flex flex-row items-center gap-1.5", "cursor-pointer", "m-1", "ring-offset-transparent", "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-offset-2", "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900"), children: [
-        /* @__PURE__ */ jsxRuntime.jsx(InnerCheckBox, { checked: selectedValues.length === allValues.length }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-text-secondary dark:text-text-secondary-dark", children: "(Select All)" })
-      ] }, "all");
-      $[74] = allValues.length;
-      $[75] = includeSelectAll;
-      $[76] = selectedValues.length;
-      $[77] = toggleAll;
-      $[78] = t33;
+    if ($[76] === Symbol.for("react.memo_cache_sentinel")) {
+      t33 = /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Empty, { className: "px-4 py-2", children: "No results found." });
+      $[76] = t33;
     } else {
-      t33 = $[78];
+      t33 = $[76];
     }
     let t34;
-    if ($[79] !== children || $[80] !== t33) {
-      t34 = /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.List, { children: [
-        t32,
-        /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.Group, { children: [
-          t33,
-          children
-        ] })
-      ] });
-      $[79] = children;
-      $[80] = t33;
+    if ($[77] !== allValues.length || $[78] !== includeSelectAll || $[79] !== selectedValues.length || $[80] !== toggleAll) {
+      t34 = includeSelectAll && /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.Item, { onSelect: toggleAll, className: cls("flex flex-row items-center gap-1.5", "cursor-pointer", "m-1", "ring-offset-transparent", "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-offset-2", "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900"), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(InnerCheckBox, { checked: selectedValues.length === allValues.length }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-text-secondary dark:text-text-secondary-dark", children: "(Select All)" })
+      ] }, "all");
+      $[77] = allValues.length;
+      $[78] = includeSelectAll;
+      $[79] = selectedValues.length;
+      $[80] = toggleAll;
       $[81] = t34;
     } else {
       t34 = $[81];
     }
     let t35;
-    if ($[82] !== t30 || $[83] !== t34) {
-      t35 = /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command, { children: [
-        t30,
-        t31,
-        t34
+    if ($[82] !== children || $[83] !== t34) {
+      t35 = /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.List, { children: [
+        t33,
+        /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.Group, { children: [
+          t34,
+          children
+        ] })
       ] });
-      $[82] = t30;
+      $[82] = children;
       $[83] = t34;
       $[84] = t35;
     } else {
       t35 = $[84];
     }
     let t36;
-    if ($[85] !== t26 || $[86] !== t35) {
-      t36 = /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Content, { className: t25, align: "start", sideOffset: 8, onEscapeKeyDown: t26, children: t35 });
-      $[85] = t26;
+    if ($[85] !== t31 || $[86] !== t35) {
+      t36 = /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command, { children: [
+        t31,
+        t32,
+        t35
+      ] });
+      $[85] = t31;
       $[86] = t35;
       $[87] = t36;
     } else {
       t36 = $[87];
     }
     let t37;
-    if ($[88] !== isPopoverOpen || $[89] !== modalPopover || $[90] !== onPopoverOpenChange || $[91] !== t24 || $[92] !== t36) {
-      t37 = /* @__PURE__ */ jsxRuntime.jsxs(PopoverPrimitive__namespace.Root, { open: isPopoverOpen, onOpenChange: onPopoverOpenChange, modal: modalPopover, children: [
-        t24,
-        t36
-      ] });
-      $[88] = isPopoverOpen;
-      $[89] = modalPopover;
-      $[90] = onPopoverOpenChange;
-      $[91] = t24;
-      $[92] = t36;
-      $[93] = t37;
+    if ($[88] !== t27 || $[89] !== t36) {
+      t37 = /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Content, { className: t26, align: "start", sideOffset: 8, onEscapeKeyDown: t27, children: t36 });
+      $[88] = t27;
+      $[89] = t36;
+      $[90] = t37;
     } else {
-      t37 = $[93];
+      t37 = $[90];
     }
     let t38;
-    if ($[94] !== t17 || $[95] !== t18 || $[96] !== t37) {
-      t38 = /* @__PURE__ */ jsxRuntime.jsxs(MultiSelectContext.Provider, { value: t17, children: [
-        t18,
+    if ($[91] !== isPopoverOpen || $[92] !== modalPopover || $[93] !== onPopoverOpenChange || $[94] !== t25 || $[95] !== t37) {
+      t38 = /* @__PURE__ */ jsxRuntime.jsxs(PopoverPrimitive__namespace.Root, { open: isPopoverOpen, onOpenChange: onPopoverOpenChange, modal: modalPopover, children: [
+        t25,
         t37
       ] });
-      $[94] = t17;
-      $[95] = t18;
-      $[96] = t37;
-      $[97] = t38;
+      $[91] = isPopoverOpen;
+      $[92] = modalPopover;
+      $[93] = onPopoverOpenChange;
+      $[94] = t25;
+      $[95] = t37;
+      $[96] = t38;
+    } else {
+      t38 = $[96];
+    }
+    let t39;
+    if ($[97] !== t18 || $[98] !== t19 || $[99] !== t38) {
+      t39 = /* @__PURE__ */ jsxRuntime.jsxs(MultiSelectContext.Provider, { value: t18, children: [
+        t19,
+        t38
+      ] });
+      $[97] = t18;
+      $[98] = t19;
+      $[99] = t38;
+      $[100] = t39;
     } else {
-      t38 = $[97];
+      t39 = $[100];
     }
-    return t38;
+    return t39;
   });
   MultiSelect.displayName = "MultiSelect";
   function MultiSelectItem(t0) {
@@ -31327,7 +31358,11 @@
         element?.removeEventListener("wheel", handleWheel);
       };
     }, [inputRef, type]);
-    const input = multiline ? /* @__PURE__ */ jsxRuntime.jsx(TextareaAutosize, { ...inputProps, ref: inputRef, placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, minRows, maxRows, value: value ?? "", onChange, style: inputStyle, className: cls(invisible ? focusedInvisibleMixin : "", "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-8", disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500", inputClassName) }) : /* @__PURE__ */ jsxRuntime.jsx("input", { ...inputProps, ref: inputRef, disabled, style: inputStyle, className: cls("w-full outline-none bg-transparent leading-normal px-3", "rounded-md", "focused:text-text-primary focused:dark:text-text-primary-dark", invisible ? focusedInvisibleMixin : "", disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, size === "small" ? "min-h-[32px]" : size === "medium" ? "min-h-[48px]" : "min-h-[64px]", label ? size === "large" ? "pt-8 pb-2" : "pt-4 pb-2" : "py-2", endAdornment ? "pr-10" : "pr-3", disabled && "outline-none opacity-50 dark:opacity-50 text-surface-accent-800 dark:text-white", inputClassName), placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, onFocus: () => setFocused(true), onBlur: () => setFocused(false), type, value: type === "number" && Number.isNaN(value) ? "" : value ?? "", onChange });
+    const input = multiline ? /* @__PURE__ */ jsxRuntime.jsx(TextareaAutosize, { ...inputProps, ref: inputRef, placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, minRows, maxRows, value: value ?? "", onChange, style: inputStyle, className: cls(invisible ? focusedInvisibleMixin : "", "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-8", disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500", inputClassName) }) : /* @__PURE__ */ jsxRuntime.jsx("input", { ...inputProps, ref: inputRef, disabled, style: inputStyle, className: cls("w-full outline-none bg-transparent leading-normal px-3", "rounded-md", "focused:text-text-primary focused:dark:text-text-primary-dark", invisible ? focusedInvisibleMixin : "", disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, {
+      "min-h-[28px]": size === "small",
+      "min-h-[42px]": size === "medium",
+      "min-h-[64px]": size === "large"
+    }, label ? size === "large" ? "pt-8 pb-2" : "pt-4 pb-2" : "py-2", endAdornment ? "pr-10" : "pr-3", disabled && "outline-none opacity-50 dark:opacity-50 text-surface-accent-800 dark:text-white", inputClassName), placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, onFocus: () => setFocused(true), onBlur: () => setFocused(false), type, value: type === "number" && Number.isNaN(value) ? "" : value ?? "", onChange });
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cls("rounded-md relative max-w-full", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, error ? "border border-red-500 dark:border-red-600" : "", {
       "min-h-[32px]": !invisible && size === "small",
       "min-h-[48px]": !invisible && size === "medium",