@firecms/ui 3.0.0-beta.11 → 3.0.0-beta.13

package/dist/index.umd.js

@@ -624,7 +624,7 @@
     return t7;
   };
   const AvatarInner = (t0, ref) => {
-    const $ = reactCompilerRuntime.c(23);
+    const $ = reactCompilerRuntime.c(25);
     let alt;
     let children;
     let className;
@@ -632,6 +632,7 @@
     let props;
     let src;
     let style;
+    let t1;
     if ($[0] !== t0) {
       ({
         src,
@@ -640,6 +641,7 @@
         className,
         style,
         outerClassName,
+        hover: t1,
         ...props
       } = t0);
       $[0] = t0;
@@ -650,6 +652,7 @@
       $[5] = props;
       $[6] = src;
       $[7] = style;
+      $[8] = t1;
     } else {
       alt = $[1];
       children = $[2];
@@ -658,51 +661,55 @@
       props = $[5];
       src = $[6];
       style = $[7];
+      t1 = $[8];
     }
+    const hover = t1 === void 0 ? true : t1;
     const [isImageError, setIsImageError] = React.useState(false);
-    let t1;
-    if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-      t1 = () => {
+    let t2;
+    if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+      t2 = () => {
         setIsImageError(true);
       };
-      $[8] = t1;
+      $[9] = t2;
     } else {
-      t1 = $[8];
+      t2 = $[9];
     }
-    const handleImageError = t1;
-    let t2;
-    if ($[9] !== outerClassName) {
-      t2 = cls("rounded-full flex items-center justify-center overflow-hidden", "p-1 hover:bg-surface-accent-200 hover:dark:bg-surface-accent-700 w-12 h-12 min-w-12 min-h-12", outerClassName);
-      $[9] = outerClassName;
-      $[10] = t2;
+    const handleImageError = t2;
+    const t3 = hover && "hover:bg-surface-accent-200 hover:dark:bg-surface-accent-700";
+    let t4;
+    if ($[10] !== outerClassName || $[11] !== t3) {
+      t4 = cls("rounded-full flex items-center justify-center overflow-hidden", "p-1 w-12 h-12 min-w-12 min-h-12", t3, outerClassName);
+      $[10] = outerClassName;
+      $[11] = t3;
+      $[12] = t4;
     } else {
-      t2 = $[10];
+      t4 = $[12];
     }
-    let t3;
-    if ($[11] !== alt || $[12] !== children || $[13] !== className || $[14] !== isImageError || $[15] !== src) {
-      t3 = src && !isImageError ? /* @__PURE__ */ jsxRuntime.jsx("img", { className: cls("bg-surface-accent-100 dark:bg-surface-accent-800", "w-full h-full object-cover rounded-full", className), src, alt, onError: handleImageError }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: cls("bg-surface-accent-100 dark:bg-surface-accent-800", "flex items-center justify-center", "w-full h-full py-1.5 text-lg font-medium text-surface-accent-900 dark:text-white rounded-full", className), children });
-      $[11] = alt;
-      $[12] = children;
-      $[13] = className;
-      $[14] = isImageError;
-      $[15] = src;
-      $[16] = t3;
+    let t5;
+    if ($[13] !== alt || $[14] !== children || $[15] !== className || $[16] !== isImageError || $[17] !== src) {
+      t5 = src && !isImageError ? /* @__PURE__ */ jsxRuntime.jsx("img", { className: cls("bg-surface-accent-100 dark:bg-surface-accent-800", "w-full h-full object-cover rounded-full", className), src, alt, onError: handleImageError }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: cls("bg-surface-accent-100 dark:bg-surface-accent-800", "flex items-center justify-center", "w-full h-full py-1.5 text-lg font-medium text-surface-accent-900 dark:text-white rounded-full", className), children });
+      $[13] = alt;
+      $[14] = children;
+      $[15] = className;
+      $[16] = isImageError;
+      $[17] = src;
+      $[18] = t5;
     } else {
-      t3 = $[16];
+      t5 = $[18];
     }
-    let t4;
-    if ($[17] !== props || $[18] !== ref || $[19] !== style || $[20] !== t2 || $[21] !== t3) {
-      t4 = /* @__PURE__ */ jsxRuntime.jsx("button", { ref, style, ...props, className: t2, children: t3 });
-      $[17] = props;
-      $[18] = ref;
-      $[19] = style;
-      $[20] = t2;
-      $[21] = t3;
+    let t6;
+    if ($[19] !== props || $[20] !== ref || $[21] !== style || $[22] !== t4 || $[23] !== t5) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsx("button", { ref, style, ...props, className: t4, children: t5 });
+      $[19] = props;
+      $[20] = ref;
+      $[21] = style;
       $[22] = t4;
+      $[23] = t5;
+      $[24] = t6;
     } else {
-      t4 = $[22];
+      t6 = $[24];
     }
-    return t4;
+    return t6;
   };
   const Avatar = React.forwardRef(AvatarInner);
   const BooleanSwitch = React.forwardRef(function BooleanSwitch2({
@@ -741,13 +748,13 @@
   const BooleanSwitchWithLabel = function BooleanSwitchWithLabel2({
     value,
     position = "end",
+    size = "medium",
     invisible,
     onValueChange,
     error,
     label,
     autoFocus,
     disabled,
-    size,
     className,
     fullWidth = true,
     inputClassName,
@@ -761,7 +768,12 @@
     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 === "smallest",
+      "min-h-[32px]": 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);
@@ -833,20 +845,20 @@
     const t9 = variant === "filled" && color === "secondary" && !disabled;
     const t10 = variant === "filled" && color === "error" && !disabled;
     const t11 = variant === "filled" && color === "text" && !disabled;
-    const t12 = variant === "text" && color === "primary" && !disabled;
-    const t13 = variant === "text" && color === "secondary" && !disabled;
-    const t14 = variant === "text" && color === "error" && !disabled;
-    const t15 = variant === "text" && color === "text" && !disabled;
-    const t16 = variant === "outlined" && color === "primary" && !disabled;
-    const t17 = variant === "outlined" && color === "secondary" && !disabled;
-    const t18 = variant === "outlined" && color === "error" && !disabled;
-    const t19 = variant === "outlined" && color === "text" && !disabled;
-    const t20 = variant === "neutral" && (color === "primary" || color === "text") && !disabled;
-    const t21 = variant === "neutral" && color === "secondary" && !disabled;
-    const t22 = variant === "neutral" && color === "error" && !disabled;
+    const t12 = variant === "filled" && color === "neutral" && !disabled;
+    const t13 = variant === "text" && color === "primary" && !disabled;
+    const t14 = variant === "text" && color === "secondary" && !disabled;
+    const t15 = variant === "text" && color === "error" && !disabled;
+    const t16 = variant === "text" && color === "text" && !disabled;
+    const t17 = variant === "text" && color === "neutral" && !disabled;
+    const t18 = variant === "outlined" && color === "primary" && !disabled;
+    const t19 = variant === "outlined" && color === "secondary" && !disabled;
+    const t20 = variant === "outlined" && color === "error" && !disabled;
+    const t21 = variant === "outlined" && color === "text" && !disabled;
+    const t22 = variant === "outlined" && color === "neutral" && !disabled;
     const t23 = variant === "text" && disabled;
     const t24 = variant === "outlined" && disabled;
-    const t25 = (variant === "filled" || variant === "neutral") && disabled;
+    const t25 = variant === "filled" && disabled;
     let t26;
     let t27;
     let t28;
@@ -862,21 +874,21 @@
           "border border-secondary bg-secondary focus:ring-secondary shadow hover:ring-1 hover:ring-secondary text-white hover:text-white": t9,
           "border border-red-500 bg-red-500 hover:bg-red-500 focus:ring-red-500 shadow hover:ring-1 hover:ring-red-600 text-white hover:text-white": t10,
           "border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 shadow hover:ring-1 hover:ring-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": t11,
-          "border border-transparent text-primary hover:text-primary hover:bg-surface-accent-200 dark:hover:bg-surface-900": t12,
-          "border border-transparent text-secondary hover:text-secondary hover:bg-secondary-bg": t13,
-          "border border-transparent text-red-500 hover:text-red-500 hover:bg-red-500 hover:bg-opacity-10": t14,
-          "border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-surface-accent-200 hover:dark:bg-surface-700": t15,
-          "border border-primary text-primary hover:text-primary hover:bg-primary-bg": t16,
-          "border border-secondary text-secondary hover:text-secondary hover:bg-secondary-bg": t17,
-          "border border-red-500 text-red-500 hover:text-red-500 hover:bg-red-500 hover:text-white": t18,
-          "border border-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:bg-surface-accent-200": t19,
-          "border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-text-primary dark:bg-surface-800 dark:hover:bg-surface-accent-700 dark:text-white": t20,
-          "border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-text-secondary dark:bg-surface-800 dark:hover:bg-surface-accent-700 dark:text-white": t21,
-          "border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-error dark:bg-surface-800 dark:hover:bg-surface-accent-700 dark:text-error": t22,
+          "border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-text-primary dark:bg-surface-800 dark:hover:bg-surface-accent-700 dark:text-text-primary-dark": t12,
+          "border border-transparent text-primary hover:text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800": t13,
+          "border border-transparent text-secondary hover:text-secondary hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800": t14,
+          "border border-transparent text-red-500 hover:text-red-500 hover:bg-red-500 hover:bg-opacity-10": t15,
+          "border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-surface-accent-200 hover:dark:bg-surface-700": t16,
+          "border border-transparent text-text-primary hover:text-text-primary hover:bg-surface-accent-200 dark:text-text-primary-dark dark:hover:bg-surface-accent-700": t17,
+          "border border-primary text-primary hover:text-primary hover:bg-primary-bg": t18,
+          "border border-secondary text-secondary hover:text-secondary hover:bg-secondary-bg": t19,
+          "border border-red-500 text-red-500 hover:text-red-500 hover:bg-red-500 hover:text-white": t20,
+          "border border-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:bg-surface-accent-200": t21,
+          "border border-surface-400 text-text-primary hover:bg-surface-accent-200 dark:border-surface-600 dark:text-text-primary-dark dark:hover:bg-surface-accent-700": t22,
           "text-text-disabled dark:text-text-disabled-dark": disabled,
           "border border-transparent opacity-50": t23,
           "border border-surface-500 opacity-50": t24,
-          "border border-surface-500 bg-surface-500 opacity-50": t25
+          "border border-transparent bg-surface-300 dark:bg-surface-500 opacity-40": t25
         });
         const sizeClasses2 = cls({
           "py-1 px-2": size === "small",
@@ -1162,23 +1174,31 @@
     } = t0;
     const size = t1 === void 0 ? "medium" : t1;
     let sizeClasses2;
-    if (size === "small") {
+    if (size === "smallest") {
       sizeClasses2 = "w-4 h-4";
     } else {
-      if (size === "medium") {
-        sizeClasses2 = "w-8 h-8 m-1";
+      if (size === "small") {
+        sizeClasses2 = "w-6 h-6";
       } else {
-        sizeClasses2 = "w-10 h-10 m-1";
+        if (size === "medium") {
+          sizeClasses2 = "w-8 h-8 m-1";
+        } else {
+          sizeClasses2 = "w-10 h-10 m-1";
+        }
       }
     }
     let borderClasses;
-    if (size === "small") {
+    if (size === "smallest") {
       borderClasses = "border-[3px]";
     } else {
-      if (size === "medium") {
-        borderClasses = "border-4";
+      if (size === "small") {
+        borderClasses = "border-[4px]";
       } else {
-        borderClasses = "border-[6px]";
+        if (size === "medium") {
+          borderClasses = "border-4";
+        } else {
+          borderClasses = "border-[6px]";
+        }
       }
     }
     let t2;
@@ -27328,7 +27348,7 @@
     const t6 = error ? "text-red-500 dark:text-red-400" : "";
     let t7;
     if ($[2] !== className || $[3] !== t3 || $[4] !== t4 || $[5] !== t5 || $[6] !== t6) {
-      t7 = cls("rounded-lg max-w-full w-max h-fit font-regular inline-flex gap-1", "text-ellipsis", t3, t4, t5, t6, className);
+      t7 = cls("rounded-lg max-w-full w-max h-fit font-regular inline-flex gap-1", "text-ellipsis", "items-center", t3, t4, t5, t6, className);
       $[2] = className;
       $[3] = t3;
       $[4] = t4;
@@ -27680,7 +27700,7 @@
     return t15;
   }
   const DateTimeField = (t0) => {
-    const $ = reactCompilerRuntime.c(52);
+    const $ = reactCompilerRuntime.c(57);
     const {
       value,
       label,
@@ -27754,161 +27774,176 @@
     }
     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 === "smallest";
+    const t9 = size === "small";
+    const t10 = size === "medium";
+    const t11 = size === "large";
+    let t12;
+    if ($[6] !== className || $[7] !== t10 || $[8] !== t11 || $[9] !== t6 || $[10] !== t7 || $[11] !== t8 || $[12] !== t9) {
+      t12 = cls("rounded-md relative max-w-full", t6, t7, {
+        "min-h-[28px]": t8,
+        "min-h-[32px]": t9,
+        "min-h-[42px]": t10,
+        "min-h-[64px]": t11
       }, className);
       $[6] = className;
-      $[7] = t6;
-      $[8] = t7;
-      $[9] = t8;
-      $[10] = t9;
-      $[11] = t10;
+      $[7] = t10;
+      $[8] = t11;
+      $[9] = t6;
+      $[10] = t7;
+      $[11] = t8;
+      $[12] = t9;
+      $[13] = t12;
     } else {
-      t10 = $[11];
+      t12 = $[13];
     }
-    let t11;
-    if ($[12] !== disabled) {
-      t11 = () => {
+    let t13;
+    if ($[14] !== disabled) {
+      t13 = () => {
         if (!disabled) {
           inputRef.current?.focus();
         }
       };
-      $[12] = disabled;
-      $[13] = t11;
-    } else {
-      t11 = $[13];
-    }
-    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;
+      $[15] = t13;
     } else {
-      t12 = $[18];
+      t13 = $[15];
     }
-    const t13 = mode === "date_time" ? "datetime-local" : "date";
-    const t14 = valueAsInputValue(value ?? null, mode);
-    let t15;
-    let t16;
-    if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
-      t15 = () => setFocused(true);
-      t16 = () => setFocused(false);
-      $[19] = t15;
-      $[20] = t16;
-    } else {
-      t15 = $[19];
-      t16 = $[20];
-    }
-    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;
+    let t14;
+    if ($[16] !== disabled || $[17] !== error || $[18] !== focused || $[19] !== label) {
+      t14 = 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 });
+      $[16] = disabled;
+      $[17] = error;
+      $[18] = focused;
+      $[19] = label;
+      $[20] = t14;
+    } else {
+      t14 = $[20];
+    }
+    const t15 = mode === "date_time" ? "datetime-local" : "date";
+    const t16 = valueAsInputValue(value ?? null, mode);
+    let t17;
+    let t18;
+    if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+      t17 = () => setFocused(true);
+      t18 = () => setFocused(false);
+      $[21] = t17;
+      $[22] = t18;
+    } else {
+      t17 = $[21];
+      t18 = $[22];
+    }
+    const t19 = clearable ? "pr-14" : "pr-12";
+    const t20 = size === "smallest";
+    const t21 = size === "small";
+    const t22 = size === "medium";
+    const t23 = size === "large";
+    let t24;
+    if ($[23] !== disabled || $[24] !== inputClassName || $[25] !== label || $[26] !== t19 || $[27] !== t20 || $[28] !== t21 || $[29] !== t22 || $[30] !== t23) {
+      t24 = cls("w-full outline-none bg-transparent leading-normal text-base px-3", t19, "rounded-md", {
+        "min-h-[28px]": t20,
+        "min-h-[32px]": t21,
+        "min-h-[42px]": t22,
+        "min-h-[64px]": t23
+      }, 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");
+      $[23] = disabled;
+      $[24] = inputClassName;
+      $[25] = label;
+      $[26] = t19;
+      $[27] = t20;
+      $[28] = t21;
+      $[29] = t22;
+      $[30] = t23;
+      $[31] = t24;
     } else {
-      t21 = $[26];
+      t24 = $[31];
     }
-    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;
+    let t25;
+    if ($[32] !== disabled || $[33] !== handleInputChange || $[34] !== t15 || $[35] !== t16 || $[36] !== t24) {
+      t25 = /* @__PURE__ */ jsxRuntime.jsx("input", { ref: inputRef, type: t15, value: t16, onChange: handleInputChange, onFocus: t17, onBlur: t18, disabled, className: t24 });
+      $[32] = disabled;
+      $[33] = handleInputChange;
+      $[34] = t15;
+      $[35] = t16;
+      $[36] = t24;
+      $[37] = t25;
     } else {
-      t22 = $[32];
+      t25 = $[37];
     }
-    let t23;
-    if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
-      t23 = (e_2) => {
+    let t26;
+    if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
+      t26 = (e_2) => {
         e_2.stopPropagation();
         inputRef.current?.showPicker();
       };
-      $[33] = t23;
+      $[38] = t26;
     } else {
-      t23 = $[33];
+      t26 = $[38];
     }
-    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;
+    let t27;
+    if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
+      t27 = /* @__PURE__ */ jsxRuntime.jsx(IconButton, { onClick: t26, className: "absolute right-3 top-1/2 transform -translate-y-1/2 !text-surface-accent-500", children: /* @__PURE__ */ jsxRuntime.jsx(CalendarMonthIcon, { color: "disabled" }) });
+      $[39] = t27;
     } else {
-      t24 = $[34];
+      t27 = $[39];
     }
-    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;
+    let t28;
+    if ($[40] !== clearable || $[41] !== handleClear || $[42] !== value) {
+      t28 = 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, {}) });
+      $[40] = clearable;
+      $[41] = handleClear;
+      $[42] = value;
+      $[43] = t28;
     } else {
-      t25 = $[38];
+      t28 = $[43];
     }
-    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
+    let t29;
+    if ($[44] !== style || $[45] !== t12 || $[46] !== t13 || $[47] !== t14 || $[48] !== t25 || $[49] !== t28) {
+      t29 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t12, style, onClick: t13, children: [
+        t14,
+        t25,
+        t27,
+        t28
       ] });
-      $[39] = style;
-      $[40] = t10;
-      $[41] = t11;
-      $[42] = t12;
-      $[43] = t22;
-      $[44] = t25;
-      $[45] = t26;
+      $[44] = style;
+      $[45] = t12;
+      $[46] = t13;
+      $[47] = t14;
+      $[48] = t25;
+      $[49] = t28;
+      $[50] = t29;
     } else {
-      t26 = $[45];
+      t29 = $[50];
     }
-    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" }),
+    let t30;
+    if ($[51] !== invalidValue || $[52] !== value) {
+      t30 = 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)}` })
         ] })
       ] });
-      $[46] = invalidValue;
-      $[47] = value;
-      $[48] = t27;
+      $[51] = invalidValue;
+      $[52] = value;
+      $[53] = t30;
     } else {
-      t27 = $[48];
+      t30 = $[53];
     }
-    let t28;
-    if ($[49] !== t26 || $[50] !== t27) {
-      t28 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    let t31;
+    if ($[54] !== t29 || $[55] !== t30) {
+      t31 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         t5,
-        t26,
-        t27
+        t29,
+        t30
       ] });
-      $[49] = t26;
-      $[50] = t27;
-      $[51] = t28;
+      $[54] = t29;
+      $[55] = t30;
+      $[56] = t31;
     } else {
-      t28 = $[51];
+      t31 = $[56];
     }
-    return t28;
+    return t31;
   };
   const inputStyles = `
     /* Hide the default calendar icon in Chrome, Safari, Edge, Opera */
@@ -27957,12 +27992,13 @@
     full: "max-w-full min-w-full w-full"
   };
   const Dialog = (t0) => {
-    const $ = reactCompilerRuntime.c(36);
+    const $ = reactCompilerRuntime.c(39);
     const {
       open,
       onOpenChange,
       children,
       className,
+      containerClassName,
       fullWidth: t1,
       fullHeight,
       fullScreen,
@@ -28003,107 +28039,116 @@
     }
     React.useEffect(t5, t6);
     const t7 = displayed || open;
-    const t8 = displayed && open ? "opacity-100" : "opacity-0";
-    let t9;
-    if ($[3] !== t8) {
-      t9 = cls("fixed inset-0 transition-opacity z-20 ease-in-out duration-200 bg-black bg-opacity-50 dark:bg-opacity-60 backdrop-blur-sm ", t8, "z-20 fixed top-0 left-0 w-full h-full flex justify-center items-center");
-      $[3] = t8;
-      $[4] = t9;
+    let t8;
+    if ($[3] !== containerClassName) {
+      t8 = cls("fixed inset-0 z-30", containerClassName);
+      $[3] = containerClassName;
+      $[4] = t8;
     } else {
-      t9 = $[4];
+      t8 = $[4];
     }
-    const t10 = displayed ? "auto" : "none";
-    let t11;
-    if ($[5] !== t10) {
-      t11 = {
-        pointerEvents: t10
-      };
-      $[5] = t10;
-      $[6] = t11;
+    const t9 = displayed && open ? "opacity-100" : "opacity-0";
+    let t10;
+    if ($[5] !== t9) {
+      t10 = cls("fixed inset-0 transition-opacity z-20 ease-in-out duration-200 bg-black bg-opacity-50 dark:bg-opacity-60 backdrop-blur-sm ", t9, "z-20 fixed top-0 left-0 w-full h-full flex justify-center items-center");
+      $[5] = t9;
+      $[6] = t10;
     } else {
-      t11 = $[6];
+      t10 = $[6];
     }
+    const t11 = displayed ? "auto" : "none";
     let t12;
-    if ($[7] !== t11 || $[8] !== t9) {
-      t12 = /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Overlay, { className: t9, style: t11 });
+    if ($[7] !== t11) {
+      t12 = {
+        pointerEvents: t11
+      };
       $[7] = t11;
-      $[8] = t9;
-      $[9] = t12;
+      $[8] = t12;
     } else {
-      t12 = $[9];
+      t12 = $[8];
     }
     let t13;
-    if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-      t13 = cls("h-full outline-none flex justify-center items-center z-40 opacity-100 transition-all duration-200 ease-in-out");
-      $[10] = t13;
-    } else {
-      t13 = $[10];
-    }
-    const t14 = fullWidth && !fullScreen ? "w-11/12" : void 0;
-    const t15 = fullHeight && !fullScreen ? "h-full" : void 0;
-    const t16 = fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-xl";
-    const t17 = scrollable && "overflow-y-auto";
-    const t18 = displayed && open ? "opacity-100" : "opacity-0";
-    const t19 = maxWidth && !fullScreen ? widthClasses[maxWidth] : void 0;
-    let t20;
-    if ($[11] !== className || $[12] !== t14 || $[13] !== t15 || $[14] !== t16 || $[15] !== t17 || $[16] !== t18 || $[17] !== t19) {
-      t20 = cls(paperMixin, "z-30", "relative", "outline-none focus:outline-none", t14, t15, "text-surface-accent-900 dark:text-white", "justify-center items-center", t16, "ease-in-out duration-200", t17, t18, t19, className);
-      $[11] = className;
+    if ($[9] !== t10 || $[10] !== t12) {
+      t13 = /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Overlay, { className: t10, style: t12 });
+      $[9] = t10;
+      $[10] = t12;
+      $[11] = t13;
+    } else {
+      t13 = $[11];
+    }
+    let t14;
+    if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+      t14 = cls("h-full outline-none flex justify-center items-center z-40 opacity-100 transition-all duration-200 ease-in-out");
       $[12] = t14;
-      $[13] = t15;
-      $[14] = t16;
-      $[15] = t17;
-      $[16] = t18;
-      $[17] = t19;
-      $[18] = t20;
     } else {
-      t20 = $[18];
+      t14 = $[12];
     }
+    const t15 = fullWidth && !fullScreen ? "w-11/12" : void 0;
+    const t16 = fullHeight && !fullScreen ? "h-full" : void 0;
+    const t17 = fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-xl";
+    const t18 = scrollable && "overflow-y-auto";
+    const t19 = displayed && open ? "opacity-100" : "opacity-0";
+    const t20 = maxWidth && !fullScreen ? widthClasses[maxWidth] : void 0;
     let t21;
-    if ($[19] !== children || $[20] !== t20) {
-      t21 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t20, children });
-      $[19] = children;
-      $[20] = t20;
-      $[21] = t21;
+    if ($[13] !== className || $[14] !== t15 || $[15] !== t16 || $[16] !== t17 || $[17] !== t18 || $[18] !== t19 || $[19] !== t20) {
+      t21 = cls(paperMixin, "z-30", "relative", "outline-none focus:outline-none", t15, t16, "text-surface-accent-900 dark:text-white", "justify-center items-center", t17, "ease-in-out duration-200", t18, t19, t20, className);
+      $[13] = className;
+      $[14] = t15;
+      $[15] = t16;
+      $[16] = t17;
+      $[17] = t18;
+      $[18] = t19;
+      $[19] = t20;
+      $[20] = t21;
     } else {
-      t21 = $[21];
+      t21 = $[20];
     }
     let t22;
-    if ($[22] !== onEscapeKeyDown || $[23] !== onInteractOutside || $[24] !== onOpenAutoFocus || $[25] !== onPointerDownOutside || $[26] !== t21) {
-      t22 = /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Content, { onEscapeKeyDown, onOpenAutoFocus, onPointerDownOutside, onInteractOutside, className: t13, children: t21 });
-      $[22] = onEscapeKeyDown;
-      $[23] = onInteractOutside;
-      $[24] = onOpenAutoFocus;
-      $[25] = onPointerDownOutside;
-      $[26] = t21;
-      $[27] = t22;
+    if ($[21] !== children || $[22] !== t21) {
+      t22 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t21, children });
+      $[21] = children;
+      $[22] = t21;
+      $[23] = t22;
     } else {
-      t22 = $[27];
+      t22 = $[23];
     }
     let t23;
-    if ($[28] !== t12 || $[29] !== t22) {
-      t23 = /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "fixed inset-0 z-30", children: [
-        t12,
-        t22
-      ] }) });
-      $[28] = t12;
-      $[29] = t22;
-      $[30] = t23;
+    if ($[24] !== onEscapeKeyDown || $[25] !== onInteractOutside || $[26] !== onOpenAutoFocus || $[27] !== onPointerDownOutside || $[28] !== t22) {
+      t23 = /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Content, { onEscapeKeyDown, onOpenAutoFocus, onPointerDownOutside, onInteractOutside, className: t14, children: t22 });
+      $[24] = onEscapeKeyDown;
+      $[25] = onInteractOutside;
+      $[26] = onOpenAutoFocus;
+      $[27] = onPointerDownOutside;
+      $[28] = t22;
+      $[29] = t23;
     } else {
-      t23 = $[30];
+      t23 = $[29];
     }
     let t24;
-    if ($[31] !== modal || $[32] !== onOpenChange || $[33] !== t23 || $[34] !== t7) {
-      t24 = /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { open: t7, modal, onOpenChange, children: t23 });
-      $[31] = modal;
-      $[32] = onOpenChange;
-      $[33] = t23;
-      $[34] = t7;
-      $[35] = t24;
+    if ($[30] !== t13 || $[31] !== t23 || $[32] !== t8) {
+      t24 = /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t8, children: [
+        t13,
+        t23
+      ] }) });
+      $[30] = t13;
+      $[31] = t23;
+      $[32] = t8;
+      $[33] = t24;
     } else {
-      t24 = $[35];
+      t24 = $[33];
     }
-    return t24;
+    let t25;
+    if ($[34] !== modal || $[35] !== onOpenChange || $[36] !== t24 || $[37] !== t7) {
+      t25 = /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { open: t7, modal, onOpenChange, children: t24 });
+      $[34] = modal;
+      $[35] = onOpenChange;
+      $[36] = t24;
+      $[37] = t7;
+      $[38] = t25;
+    } else {
+      t25 = $[38];
+    }
+    return t25;
   };
   function _temp$2() {
   }
@@ -28161,7 +28206,7 @@
     }
     let t2;
     if ($[2] !== className || $[3] !== includeMargin) {
-      t2 = cls("h-full flex-grow", {
+      t2 = cls("flex-grow", {
         "my-6 mx-6": includeMargin
       }, className);
       $[2] = className;
@@ -28565,7 +28610,7 @@
     }
     let t12;
     if ($[23] !== uploadDescription) {
-      t12 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow h-28 box-border flex flex-col items-center justify-center text-center", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { align: "center", variant: "label", children: uploadDescription }) });
+      t12 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow h-28 box-border flex flex-col items-center justify-center text-center", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { align: "center", variant: "label", className: "flex flex-row gap-2 justify-center", children: uploadDescription }) });
       $[23] = uploadDescription;
       $[24] = t12;
     } else {
@@ -28796,7 +28841,7 @@
     return t7;
   }, equal);
   const Menu = React.forwardRef((t0, ref) => {
-    const $ = reactCompilerRuntime.c(17);
+    const $ = reactCompilerRuntime.c(20);
     const {
       children,
       trigger,
@@ -28805,90 +28850,98 @@
       side,
       align,
       onOpenChange,
-      portalContainer
+      portalContainer,
+      sideOffset: t1,
+      className
     } = t0;
-    let t1;
+    const sideOffset = t1 === void 0 ? 4 : t1;
+    let t2;
     if ($[0] !== ref || $[1] !== trigger) {
-      t1 = /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Trigger, { ref, asChild: true, children: trigger });
+      t2 = /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Trigger, { ref, asChild: true, children: trigger });
       $[0] = ref;
       $[1] = trigger;
-      $[2] = t1;
-    } else {
-      t1 = $[2];
-    }
-    let t2;
-    if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-      t2 = cls(paperMixin, focusedDisabled, "shadow py-2 z-30");
-      $[3] = t2;
+      $[2] = t2;
     } else {
-      t2 = $[3];
+      t2 = $[2];
     }
     let t3;
-    if ($[4] !== align || $[5] !== children || $[6] !== side) {
-      t3 = /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Content, { side, align, className: t2, children });
-      $[4] = align;
-      $[5] = children;
-      $[6] = side;
-      $[7] = t3;
+    if ($[3] !== className) {
+      t3 = cls(paperMixin, focusedDisabled, "shadow py-2 z-30", className);
+      $[3] = className;
+      $[4] = t3;
     } else {
-      t3 = $[7];
+      t3 = $[4];
     }
     let t4;
-    if ($[8] !== portalContainer || $[9] !== t3) {
-      t4 = /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Portal, { container: portalContainer, children: t3 });
-      $[8] = portalContainer;
+    if ($[5] !== align || $[6] !== children || $[7] !== side || $[8] !== sideOffset || $[9] !== t3) {
+      t4 = /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Content, { side, sideOffset, align, className: t3, children });
+      $[5] = align;
+      $[6] = children;
+      $[7] = side;
+      $[8] = sideOffset;
       $[9] = t3;
       $[10] = t4;
     } else {
       t4 = $[10];
     }
     let t5;
-    if ($[11] !== defaultOpen || $[12] !== onOpenChange || $[13] !== open || $[14] !== t1 || $[15] !== t4) {
-      t5 = /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu__namespace.Root, { open, defaultOpen, onOpenChange, children: [
-        t1,
-        t4
+    if ($[11] !== portalContainer || $[12] !== t4) {
+      t5 = /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Portal, { container: portalContainer, children: t4 });
+      $[11] = portalContainer;
+      $[12] = t4;
+      $[13] = t5;
+    } else {
+      t5 = $[13];
+    }
+    let t6;
+    if ($[14] !== defaultOpen || $[15] !== onOpenChange || $[16] !== open || $[17] !== t2 || $[18] !== t5) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu__namespace.Root, { open, defaultOpen, onOpenChange, children: [
+        t2,
+        t5
       ] });
-      $[11] = defaultOpen;
-      $[12] = onOpenChange;
-      $[13] = open;
-      $[14] = t1;
-      $[15] = t4;
-      $[16] = t5;
+      $[14] = defaultOpen;
+      $[15] = onOpenChange;
+      $[16] = open;
+      $[17] = t2;
+      $[18] = t5;
+      $[19] = t6;
     } else {
-      t5 = $[16];
+      t6 = $[19];
     }
-    return t5;
+    return t6;
   });
   Menu.displayName = "Menu";
   function MenuItem(t0) {
-    const $ = reactCompilerRuntime.c(7);
+    const $ = reactCompilerRuntime.c(8);
     const {
       children,
       dense: t1,
-      onClick
+      onClick,
+      className
     } = t0;
     const dense = t1 === void 0 ? false : t1;
     const t2 = onClick && "cursor-pointer";
     const t3 = dense ? "px-3 py-1.5" : "px-4 py-2";
     let t4;
-    if ($[0] !== t2 || $[1] !== t3) {
-      t4 = cls(t2, "rounded-md text-sm font-medium text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-100 dark:hover:bg-surface-accent-900 flex items-center gap-4", t3);
-      $[0] = t2;
-      $[1] = t3;
-      $[2] = t4;
+    if ($[0] !== className || $[1] !== t2 || $[2] !== t3) {
+      t4 = cls(t2, "rounded-md text-sm font-medium text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-100 dark:hover:bg-surface-accent-900 flex items-center gap-4", t3, className);
+      $[0] = className;
+      $[1] = t2;
+      $[2] = t3;
+      $[3] = t4;
     } else {
-      t4 = $[2];
+      t4 = $[3];
     }
     const classNames = t4;
     let t5;
-    if ($[3] !== children || $[4] !== classNames || $[5] !== onClick) {
+    if ($[4] !== children || $[5] !== classNames || $[6] !== onClick) {
       t5 = /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Item, { className: classNames, onClick, children });
-      $[3] = children;
-      $[4] = classNames;
-      $[5] = onClick;
-      $[6] = t5;
+      $[4] = children;
+      $[5] = classNames;
+      $[6] = onClick;
+      $[7] = t5;
     } else {
-      t5 = $[6];
+      t5 = $[7];
     }
     return t5;
   }
@@ -28943,7 +28996,7 @@
     } = t0;
     let t1;
     if ($[0] !== className) {
-      t1 = cls("py-2 px-3 outline-none select-none font-medium leading-none rounded text-text-primary dark:text-text-primary-dark text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-800 data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-800 hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-700 dark:hover:bg-opacity-50", className);
+      t1 = cls("py-2 px-3 outline-none select-none font-medium leading-none rounded text-text-primary dark:text-text-primary-dark text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-800 data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-800 hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800", className);
       $[0] = className;
       $[1] = t1;
     } else {
@@ -29610,98 +29663,99 @@
   }
   const MultiSelectContext = React__namespace.createContext({});
   const MultiSelect = React__namespace.forwardRef((t0, ref) => {
-    const $ = reactCompilerRuntime.c(98);
+    const $ = reactCompilerRuntime.c(102);
     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) {
       onItemClick = function onItemClick2(newValue) {
         let newSelectedValues;
-        if (selectedValues.includes(newValue)) {
-          newSelectedValues = selectedValues.filter((v) => v !== newValue);
+        if (selectedValues.some((v_0) => String(v_0) === String(newValue))) {
+          newSelectedValues = selectedValues.filter((v) => String(v) !== String(newValue));
         } else {
           newSelectedValues = [...selectedValues, newValue];
         }
@@ -29719,9 +29773,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 {
@@ -29735,50 +29789,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) => {
-        const newSelectedValues_1 = selectedValues.includes(value_0) ? selectedValues.filter((v_0) => v_0 !== value_0) : [...selectedValues, 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 {
@@ -29791,60 +29845,76 @@
       $[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 === "smallest";
+    const t21 = size === "small";
+    const t22 = size === "medium";
+    const t23 = size === "large";
+    let t24;
+    if ($[40] !== className || $[41] !== disabled || $[42] !== invisible || $[43] !== size || $[44] !== t20 || $[45] !== t21 || $[46] !== t22 || $[47] !== t23) {
+      t24 = cls({
+        "min-h-[28px]": t20,
+        "min-h-[32px]": t21,
+        "min-h-[42px]": t22,
+        "min-h-[64px]": t23
+      }, {
+        "py-1": size === "small" || size === "smallest",
+        "py-2": size === "medium" || size === "large"
+      }, {
+        "px-2": size === "small" || size === "smallest",
+        "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;
+      $[48] = t24;
     } else {
-      t22 = $[44];
+      t24 = $[48];
     }
-    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 t25;
+    if ($[49] !== children || $[50] !== handleClear || $[51] !== includeClear || $[52] !== isPopoverOpen || $[53] !== placeholder || $[54] !== renderValues || $[55] !== selectedValues || $[56] !== toggleOption || $[57] !== useChips) {
+      t25 = 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) => {
             const childrenProps = React.Children.map(children, _temp2).filter(Boolean);
-            const option = childrenProps.find((o) => o.value === value_1);
+            const option = childrenProps.find((o) => String(o.value) === String(value_1));
             if (!useChips) {
               return option?.children;
             }
@@ -29854,7 +29924,7 @@
                 event_0.stopPropagation();
                 toggleOption(value_1);
               } })
-            ] }, value_1);
+            ] }, String(value_1));
           })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
@@ -29868,179 +29938,179 @@
         /* @__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];
-    }
-    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;
-    } else {
-      t25 = $[60];
+      $[49] = children;
+      $[50] = handleClear;
+      $[51] = includeClear;
+      $[52] = isPopoverOpen;
+      $[53] = placeholder;
+      $[54] = renderValues;
+      $[55] = selectedValues;
+      $[56] = toggleOption;
+      $[57] = useChips;
+      $[58] = t25;
+    } else {
+      t25 = $[58];
     }
     let t26;
-    if ($[61] !== onPopoverOpenChange) {
-      t26 = () => onPopoverOpenChange(false);
-      $[61] = onPopoverOpenChange;
-      $[62] = t26;
+    if ($[59] !== handleTogglePopover || $[60] !== ref || $[61] !== t24 || $[62] !== t25) {
+      t26 = /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { ref, onClick: handleTogglePopover, className: t24, children: t25 }) });
+      $[59] = handleTogglePopover;
+      $[60] = ref;
+      $[61] = t24;
+      $[62] = t25;
+      $[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] === Symbol.for("react.memo_cache_sentinel")) {
+      t27 = cls("z-50 relative overflow-hidden border bg-white dark:bg-surface-900 rounded-lg w-[400px]", defaultBorderMixin);
+      $[64] = t27;
     } else {
-      t27 = $[63];
+      t27 = $[64];
     }
     let t28;
-    if ($[64] !== handleInputKeyDown) {
-      t28 = /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Input, { className: t27, placeholder: "Search...", onKeyDown: handleInputKeyDown });
-      $[64] = handleInputKeyDown;
-      $[65] = t28;
+    if ($[65] !== onPopoverOpenChange) {
+      t28 = () => onPopoverOpenChange(false);
+      $[65] = onPopoverOpenChange;
+      $[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;
-      $[68] = t29;
+    if ($[67] === Symbol.for("react.memo_cache_sentinel")) {
+      t29 = cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full m-4 flex-grow ");
+      $[67] = t29;
     } else {
-      t29 = $[68];
+      t29 = $[67];
     }
     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;
-      $[71] = t30;
+    if ($[68] !== handleInputKeyDown) {
+      t30 = /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Input, { className: t29, placeholder: "Search...", onKeyDown: handleInputKeyDown });
+      $[68] = handleInputKeyDown;
+      $[69] = t30;
     } else {
-      t30 = $[71];
+      t30 = $[69];
     }
     let t31;
-    if ($[72] === Symbol.for("react.memo_cache_sentinel")) {
-      t31 = /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "horizontal", className: "my-0" });
+    if ($[70] !== handleClear || $[71] !== selectedValues.length) {
+      t31 = 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" });
+      $[70] = handleClear;
+      $[71] = selectedValues.length;
       $[72] = t31;
     } else {
       t31 = $[72];
     }
     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 ($[73] !== t30 || $[74] !== t31) {
+      t32 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center", children: [
+        t30,
+        t31
+      ] });
+      $[73] = t30;
+      $[74] = t31;
+      $[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: [
+    if ($[76] === Symbol.for("react.memo_cache_sentinel")) {
+      t33 = /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "horizontal", className: "my-0" });
+      $[76] = t33;
+    } else {
+      t33 = $[76];
+    }
+    let t34;
+    if ($[77] === Symbol.for("react.memo_cache_sentinel")) {
+      t34 = /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Empty, { className: "px-4 py-2", children: "No results found." });
+      $[77] = t34;
+    } else {
+      t34 = $[77];
+    }
+    let t35;
+    if ($[78] !== allValues.length || $[79] !== includeSelectAll || $[80] !== selectedValues.length || $[81] !== toggleAll) {
+      t35 = 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;
+      $[78] = allValues.length;
+      $[79] = includeSelectAll;
+      $[80] = selectedValues.length;
+      $[81] = toggleAll;
+      $[82] = t35;
     } else {
-      t33 = $[78];
+      t35 = $[82];
     }
-    let t34;
-    if ($[79] !== children || $[80] !== t33) {
-      t34 = /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.List, { children: [
-        t32,
+    let t36;
+    if ($[83] !== children || $[84] !== t35) {
+      t36 = /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.List, { children: [
+        t34,
         /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.Group, { children: [
-          t33,
+          t35,
           children
         ] })
       ] });
-      $[79] = children;
-      $[80] = t33;
-      $[81] = t34;
-    } else {
-      t34 = $[81];
-    }
-    let t35;
-    if ($[82] !== t30 || $[83] !== t34) {
-      t35 = /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command, { children: [
-        t30,
-        t31,
-        t34
-      ] });
-      $[82] = t30;
-      $[83] = t34;
+      $[83] = children;
       $[84] = t35;
+      $[85] = t36;
     } 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;
-      $[86] = t35;
-      $[87] = t36;
-    } else {
-      t36 = $[87];
+      t36 = $[85];
     }
     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,
+    if ($[86] !== t32 || $[87] !== t36) {
+      t37 = /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command, { children: [
+        t32,
+        t33,
         t36
       ] });
-      $[88] = isPopoverOpen;
-      $[89] = modalPopover;
-      $[90] = onPopoverOpenChange;
-      $[91] = t24;
-      $[92] = t36;
-      $[93] = t37;
+      $[86] = t32;
+      $[87] = t36;
+      $[88] = t37;
     } else {
-      t37 = $[93];
+      t37 = $[88];
     }
     let t38;
-    if ($[94] !== t17 || $[95] !== t18 || $[96] !== t37) {
-      t38 = /* @__PURE__ */ jsxRuntime.jsxs(MultiSelectContext.Provider, { value: t17, children: [
-        t18,
-        t37
+    if ($[89] !== t28 || $[90] !== t37) {
+      t38 = /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Content, { className: t27, align: "start", sideOffset: 8, onEscapeKeyDown: t28, children: t37 });
+      $[89] = t28;
+      $[90] = t37;
+      $[91] = t38;
+    } else {
+      t38 = $[91];
+    }
+    let t39;
+    if ($[92] !== isPopoverOpen || $[93] !== modalPopover || $[94] !== onPopoverOpenChange || $[95] !== t26 || $[96] !== t38) {
+      t39 = /* @__PURE__ */ jsxRuntime.jsxs(PopoverPrimitive__namespace.Root, { open: isPopoverOpen, onOpenChange: onPopoverOpenChange, modal: modalPopover, children: [
+        t26,
+        t38
       ] });
-      $[94] = t17;
-      $[95] = t18;
-      $[96] = t37;
-      $[97] = t38;
+      $[92] = isPopoverOpen;
+      $[93] = modalPopover;
+      $[94] = onPopoverOpenChange;
+      $[95] = t26;
+      $[96] = t38;
+      $[97] = t39;
+    } else {
+      t39 = $[97];
+    }
+    let t40;
+    if ($[98] !== t18 || $[99] !== t19 || $[100] !== t39) {
+      t40 = /* @__PURE__ */ jsxRuntime.jsxs(MultiSelectContext.Provider, { value: t18, children: [
+        t19,
+        t39
+      ] });
+      $[98] = t18;
+      $[99] = t19;
+      $[100] = t39;
+      $[101] = t40;
     } else {
-      t38 = $[97];
+      t40 = $[101];
     }
-    return t38;
+    return t40;
   });
   MultiSelect.displayName = "MultiSelect";
   function MultiSelectItem(t0) {
-    const $ = reactCompilerRuntime.c(18);
+    const $ = reactCompilerRuntime.c(20);
     const {
       children,
       value,
@@ -30064,7 +30134,15 @@
     }
     let t2;
     if ($[2] !== t1 || $[3] !== value) {
-      t2 = t1.includes(value);
+      let t32;
+      if ($[5] !== value) {
+        t32 = (v) => String(v) === String(value);
+        $[5] = value;
+        $[6] = t32;
+      } else {
+        t32 = $[6];
+      }
+      t2 = t1.some(t32);
       $[2] = t1;
       $[3] = value;
       $[4] = t2;
@@ -30073,47 +30151,47 @@
     }
     const isSelected = t2;
     let t3;
-    if ($[5] !== onItemClick || $[6] !== value) {
+    if ($[7] !== onItemClick || $[8] !== value) {
       t3 = (_) => {
         onItemClick(value);
       };
-      $[5] = onItemClick;
-      $[6] = value;
-      $[7] = t3;
+      $[7] = onItemClick;
+      $[8] = value;
+      $[9] = t3;
     } else {
-      t3 = $[7];
+      t3 = $[9];
     }
     const t4 = isSelected ? "bg-surface-accent-200 dark:bg-surface-accent-950" : "";
     let t5;
-    if ($[8] !== className || $[9] !== t4) {
+    if ($[10] !== className || $[11] !== t4) {
       t5 = cls("flex flex-row items-center gap-1.5", t4, "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", className);
-      $[8] = className;
-      $[9] = t4;
-      $[10] = t5;
+      $[10] = className;
+      $[11] = t4;
+      $[12] = t5;
     } else {
-      t5 = $[10];
+      t5 = $[12];
     }
     let t6;
-    if ($[11] !== isSelected) {
+    if ($[13] !== isSelected) {
       t6 = /* @__PURE__ */ jsxRuntime.jsx(InnerCheckBox, { checked: isSelected });
-      $[11] = isSelected;
-      $[12] = t6;
+      $[13] = isSelected;
+      $[14] = t6;
     } else {
-      t6 = $[12];
+      t6 = $[14];
     }
     let t7;
-    if ($[13] !== children || $[14] !== t3 || $[15] !== t5 || $[16] !== t6) {
+    if ($[15] !== children || $[16] !== t3 || $[17] !== t5 || $[18] !== t6) {
       t7 = /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.Item, { onMouseDown: _temp3, onSelect: t3, className: t5, children: [
         t6,
         children
       ] });
-      $[13] = children;
-      $[14] = t3;
-      $[15] = t5;
-      $[16] = t6;
-      $[17] = t7;
+      $[15] = children;
+      $[16] = t3;
+      $[17] = t5;
+      $[18] = t6;
+      $[19] = t7;
     } else {
-      t7 = $[17];
+      t7 = $[19];
     }
     return t7;
   }
@@ -30359,7 +30437,7 @@
     }
     let t9;
     if ($[10] !== loading) {
-      t9 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute p-0 px-4 h-full pointer-events-none flex items-center justify-center top-0", children: loading ? /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, { size: "small" }) : /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { className: "text-text-disabled dark:text-text-disabled-dark" }) });
+      t9 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute p-0 px-4 h-full pointer-events-none flex items-center justify-center top-0", children: loading ? /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, { size: "smallest" }) : /* @__PURE__ */ jsxRuntime.jsx(SearchIcon, { className: "text-text-disabled dark:text-text-disabled-dark" }) });
       $[10] = loading;
       $[11] = t9;
     } else {
@@ -30475,25 +30553,31 @@
       setOpenInternal(open ?? false);
     }, [open]);
     const onValueChangeInternal = React.useCallback((newValue) => {
-      onValueChange?.(newValue);
+      let typedValue = newValue;
+      if (newValue === "true") typedValue = true;
+      else if (newValue === "false") typedValue = false;
+      else if (!isNaN(Number(newValue)) && newValue.trim() !== "") typedValue = Number(newValue);
+      onValueChange?.(typedValue);
       if (onChange) {
         const event = {
           target: {
             name,
-            value: newValue
+            value: typedValue
           }
         };
         onChange(event);
       }
-    }, [onChange, value, onValueChange]);
+    }, [onChange, onValueChange, name]);
     const hasValue = Array.isArray(value) ? value.length > 0 : value != null && value !== "" && value !== void 0;
-    return /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Root, { name, value, open: openInternal, disabled, onValueChange: onValueChangeInternal, onOpenChange: (open_0) => {
+    const stringValue = value !== void 0 ? String(value) : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Root, { name, value: stringValue, open: openInternal, disabled, onValueChange: onValueChangeInternal, onOpenChange: (open_0) => {
       onOpenChange?.(open_0);
       setOpenInternal(open_0);
     }, ...props, children: [
       typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsx(SelectInputLabel, { error, children: label }) : label,
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("select-none rounded-md text-sm", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, "relative flex items-center", className, {
-        "min-h-[28px]": size === "small",
+        "min-h-[28px]": size === "smallest",
+        "min-h-[32px]": size === "small",
         "min-h-[42px]": size === "medium",
         "min-h-[64px]": size === "large",
         "w-fit": !fullWidth,
@@ -30501,30 +30585,32 @@
       }), children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Trigger, { ref: inputRef, id, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cls("h-full", padding ? {
         "px-4": size === "large",
         "px-3": size === "medium",
-        "px-2": size === "small"
+        "px-2": size === "small" || size === "smallest"
       } : "", "outline-none focus:outline-none", "select-none rounded-md text-sm", error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark", error ? "border border-red-500 dark:border-red-600" : "", disabled ? "text-surface-accent-600 dark:text-surface-accent-400" : "text-surface-accent-800 dark:text-white", "relative flex flex-row items-center", {
-        "min-h-[28px]": size === "small",
+        "min-h-[28px]": size === "smallest",
+        "min-h-[32px]": size === "small",
         "min-h-[42px]": size === "medium",
         "min-h-[64px]": size === "large",
         "w-full": fullWidth,
         "w-fit": !fullWidth
       }, inputClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cls("flex-grow max-w-full flex flex-row gap-2 items-center", "overflow-visible", {
-          "min-h-[28px]": size === "small",
+          "min-h-[28px]": size === "smallest",
+          "min-h-[32px]": size === "small",
           "min-h-[42px]": size === "medium",
           "min-h-[64px]": size === "large"
         }), children: /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Value, { onClick: (e) => {
           e.preventDefault();
           e.stopPropagation();
         }, placeholder, className: "w-full", children: [
-          hasValue && value && renderValue ? renderValue(value) : placeholder,
+          hasValue && value !== void 0 && renderValue ? renderValue(value) : placeholder,
           hasValue && !renderValue && (() => {
             const childrenProps = React.Children.map(children, (child) => {
               if (React.isValidElement(child)) {
                 return child.props;
               }
             }).filter(Boolean);
-            const option = childrenProps.find((o) => o.value === value);
+            const option = childrenProps.find((o) => String(o.value) === String(value));
             return option?.children;
           })()
         ] }) }),
@@ -30551,6 +30637,7 @@
       disabled,
       className
     } = t0;
+    const stringValue = String(value);
     const t1 = disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer";
     let t2;
     if ($[0] !== className || $[1] !== t1) {
@@ -30577,15 +30664,15 @@
       t4 = $[5];
     }
     let t5;
-    if ($[6] !== disabled || $[7] !== t2 || $[8] !== t3 || $[9] !== value) {
-      t5 = /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Item, { value, disabled, className: t2, children: [
+    if ($[6] !== disabled || $[7] !== stringValue || $[8] !== t2 || $[9] !== t3) {
+      t5 = /* @__PURE__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Item, { value: stringValue, disabled, className: t2, children: [
         t3,
         t4
-      ] }, value);
+      ] }, stringValue);
       $[6] = disabled;
-      $[7] = t2;
-      $[8] = t3;
-      $[9] = value;
+      $[7] = stringValue;
+      $[8] = t2;
+      $[9] = t3;
       $[10] = t5;
     } else {
       t5 = $[10];
@@ -30817,13 +30904,15 @@
   });
   Slider.displayName = "Slider";
   const Sheet = (t0) => {
-    const $ = reactCompilerRuntime.c(61);
+    const $ = reactCompilerRuntime.c(66);
     let children;
     let className;
     let onOpenChange;
     let open;
     let overlayClassName;
+    let overlayStyle;
     let props;
+    let style;
     let t1;
     let t2;
     let t3;
@@ -30840,7 +30929,9 @@
         onOpenChange,
         transparent,
         className,
+        style,
         overlayClassName,
+        overlayStyle,
         ...props
       } = t0);
       $[0] = t0;
@@ -30849,24 +30940,28 @@
       $[3] = onOpenChange;
       $[4] = open;
       $[5] = overlayClassName;
-      $[6] = props;
-      $[7] = t1;
-      $[8] = t2;
-      $[9] = t3;
-      $[10] = title;
-      $[11] = transparent;
+      $[6] = overlayStyle;
+      $[7] = props;
+      $[8] = style;
+      $[9] = t1;
+      $[10] = t2;
+      $[11] = t3;
+      $[12] = title;
+      $[13] = transparent;
     } else {
       children = $[1];
       className = $[2];
       onOpenChange = $[3];
       open = $[4];
       overlayClassName = $[5];
-      props = $[6];
-      t1 = $[7];
-      t2 = $[8];
-      t3 = $[9];
-      title = $[10];
-      transparent = $[11];
+      overlayStyle = $[6];
+      props = $[7];
+      style = $[8];
+      t1 = $[9];
+      t2 = $[10];
+      t3 = $[11];
+      title = $[12];
+      transparent = $[13];
     }
     const side = t1 === void 0 ? "right" : t1;
     const modal = t2 === void 0 ? true : t2;
@@ -30874,7 +30969,7 @@
     const [displayed, setDisplayed] = React.useState(false);
     let t4;
     let t5;
-    if ($[12] !== open) {
+    if ($[14] !== open) {
       t4 = () => {
         const timeout = setTimeout(() => {
           setDisplayed(open);
@@ -30882,12 +30977,12 @@
         return () => clearTimeout(timeout);
       };
       t5 = [open];
-      $[12] = open;
-      $[13] = t4;
-      $[14] = t5;
+      $[14] = open;
+      $[15] = t4;
+      $[16] = t5;
     } else {
-      t4 = $[13];
-      t5 = $[14];
+      t4 = $[15];
+      t5 = $[16];
     }
     React.useEffect(t4, t5);
     let T0;
@@ -30901,7 +30996,7 @@
     let t7;
     let t8;
     let t9;
-    if ($[15] !== className || $[16] !== displayed || $[17] !== includeBackgroundOverlay || $[18] !== modal || $[19] !== onOpenChange || $[20] !== open || $[21] !== overlayClassName || $[22] !== props || $[23] !== side || $[24] !== title || $[25] !== transparent) {
+    if ($[17] !== className || $[18] !== displayed || $[19] !== includeBackgroundOverlay || $[20] !== modal || $[21] !== onOpenChange || $[22] !== open || $[23] !== overlayClassName || $[24] !== overlayStyle || $[25] !== props || $[26] !== side || $[27] !== title || $[28] !== transparent) {
       const transformValue = {
         top: "-translate-y-full",
         bottom: "translate-y-full",
@@ -30920,102 +31015,106 @@
       t13 = onOpenChange;
       T1 = DialogPrimitive__namespace.Portal;
       const t142 = title ?? "Sheet";
-      if ($[37] !== t142) {
+      if ($[40] !== t142) {
         t9 = /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Title, { autoFocus: true, tabIndex: 0, children: t142 });
-        $[37] = t142;
-        $[38] = t9;
+        $[40] = t142;
+        $[41] = t9;
       } else {
-        t9 = $[38];
+        t9 = $[41];
       }
-      if ($[39] !== displayed || $[40] !== includeBackgroundOverlay || $[41] !== open || $[42] !== overlayClassName) {
-        t10 = includeBackgroundOverlay && /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Overlay, { className: cls("fixed inset-0 transition-opacity z-20 ease-in-out duration-100 backdrop-blur-sm", "bg-black bg-opacity-50", "dark:bg-surface-900 dark:bg-opacity-60", displayed && open ? "opacity-100" : "opacity-0", overlayClassName), style: {
-          pointerEvents: displayed ? "auto" : "none"
+      if ($[42] !== displayed || $[43] !== includeBackgroundOverlay || $[44] !== open || $[45] !== overlayClassName || $[46] !== overlayStyle) {
+        t10 = includeBackgroundOverlay && /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Overlay, { className: cls("outline-none", "fixed inset-0 transition-opacity z-20 ease-in-out duration-100 backdrop-blur-sm", "bg-black bg-opacity-50", "dark:bg-surface-900 dark:bg-opacity-60", displayed && open ? "opacity-100" : "opacity-0", overlayClassName), style: {
+          pointerEvents: displayed ? "auto" : "none",
+          ...overlayStyle
         } });
-        $[39] = displayed;
-        $[40] = includeBackgroundOverlay;
-        $[41] = open;
-        $[42] = overlayClassName;
-        $[43] = t10;
+        $[42] = displayed;
+        $[43] = includeBackgroundOverlay;
+        $[44] = open;
+        $[45] = overlayClassName;
+        $[46] = overlayStyle;
+        $[47] = t10;
       } else {
-        t10 = $[43];
+        t10 = $[47];
       }
       T0 = DialogPrimitive__namespace.Content;
       t6 = props;
       t7 = _temp;
-      t8 = cls(borderClass[side], defaultBorderMixin, "transform-gpu", "will-change-transform", "text-surface-accent-900 dark:text-white", "fixed transform z-20 transition-all ease-in-out", !displayed ? "duration-150" : "duration-100", "outline-none focus:outline-none", transparent ? "" : "shadow-md bg-white dark:bg-surface-950", side === "top" || side === "bottom" ? "w-full" : "h-full", side === "left" || side === "top" ? "left-0 top-0" : "right-0 bottom-0", displayed && open ? "opacity-100" : "opacity-50", !displayed || !open ? transformValue[side] : "", className);
-      $[15] = className;
-      $[16] = displayed;
-      $[17] = includeBackgroundOverlay;
-      $[18] = modal;
-      $[19] = onOpenChange;
-      $[20] = open;
-      $[21] = overlayClassName;
-      $[22] = props;
-      $[23] = side;
-      $[24] = title;
-      $[25] = transparent;
-      $[26] = T0;
-      $[27] = T1;
-      $[28] = T2;
-      $[29] = t10;
-      $[30] = t11;
-      $[31] = t12;
-      $[32] = t13;
-      $[33] = t6;
-      $[34] = t7;
-      $[35] = t8;
-      $[36] = t9;
-    } else {
-      T0 = $[26];
-      T1 = $[27];
-      T2 = $[28];
-      t10 = $[29];
-      t11 = $[30];
-      t12 = $[31];
-      t13 = $[32];
-      t6 = $[33];
-      t7 = $[34];
-      t8 = $[35];
-      t9 = $[36];
+      t8 = cls("outline-none", borderClass[side], defaultBorderMixin, "transform-gpu", "will-change-transform", "text-surface-accent-900 dark:text-white", "fixed transform z-20 transition-all ease-in-out", !displayed ? "duration-150" : "duration-100", "outline-none focus:outline-none", transparent ? "" : "shadow-md bg-white dark:bg-surface-950", side === "top" || side === "bottom" ? "w-full" : "h-full", side === "left" || side === "top" ? "left-0 top-0" : "right-0 bottom-0", displayed && open ? "opacity-100" : "opacity-50", !displayed || !open ? transformValue[side] : "", className);
+      $[17] = className;
+      $[18] = displayed;
+      $[19] = includeBackgroundOverlay;
+      $[20] = modal;
+      $[21] = onOpenChange;
+      $[22] = open;
+      $[23] = overlayClassName;
+      $[24] = overlayStyle;
+      $[25] = props;
+      $[26] = side;
+      $[27] = title;
+      $[28] = transparent;
+      $[29] = T0;
+      $[30] = T1;
+      $[31] = T2;
+      $[32] = t10;
+      $[33] = t11;
+      $[34] = t12;
+      $[35] = t13;
+      $[36] = t6;
+      $[37] = t7;
+      $[38] = t8;
+      $[39] = t9;
+    } else {
+      T0 = $[29];
+      T1 = $[30];
+      T2 = $[31];
+      t10 = $[32];
+      t11 = $[33];
+      t12 = $[34];
+      t13 = $[35];
+      t6 = $[36];
+      t7 = $[37];
+      t8 = $[38];
+      t9 = $[39];
     }
     let t14;
-    if ($[44] !== T0 || $[45] !== children || $[46] !== t6 || $[47] !== t7 || $[48] !== t8) {
-      t14 = /* @__PURE__ */ jsxRuntime.jsx(T0, { ...t6, onFocusCapture: t7, className: t8, children });
-      $[44] = T0;
-      $[45] = children;
-      $[46] = t6;
-      $[47] = t7;
-      $[48] = t8;
-      $[49] = t14;
-    } else {
-      t14 = $[49];
+    if ($[48] !== T0 || $[49] !== children || $[50] !== style || $[51] !== t6 || $[52] !== t7 || $[53] !== t8) {
+      t14 = /* @__PURE__ */ jsxRuntime.jsx(T0, { ...t6, onFocusCapture: t7, className: t8, style, children });
+      $[48] = T0;
+      $[49] = children;
+      $[50] = style;
+      $[51] = t6;
+      $[52] = t7;
+      $[53] = t8;
+      $[54] = t14;
+    } else {
+      t14 = $[54];
     }
     let t15;
-    if ($[50] !== T1 || $[51] !== t10 || $[52] !== t14 || $[53] !== t9) {
+    if ($[55] !== T1 || $[56] !== t10 || $[57] !== t14 || $[58] !== t9) {
       t15 = /* @__PURE__ */ jsxRuntime.jsxs(T1, { children: [
         t9,
         t10,
         t14
       ] });
-      $[50] = T1;
-      $[51] = t10;
-      $[52] = t14;
-      $[53] = t9;
-      $[54] = t15;
+      $[55] = T1;
+      $[56] = t10;
+      $[57] = t14;
+      $[58] = t9;
+      $[59] = t15;
     } else {
-      t15 = $[54];
+      t15 = $[59];
     }
     let t16;
-    if ($[55] !== T2 || $[56] !== t11 || $[57] !== t12 || $[58] !== t13 || $[59] !== t15) {
+    if ($[60] !== T2 || $[61] !== t11 || $[62] !== t12 || $[63] !== t13 || $[64] !== t15) {
       t16 = /* @__PURE__ */ jsxRuntime.jsx(T2, { open: t11, modal: t12, onOpenChange: t13, children: t15 });
-      $[55] = T2;
-      $[56] = t11;
-      $[57] = t12;
-      $[58] = t13;
-      $[59] = t15;
-      $[60] = t16;
+      $[60] = T2;
+      $[61] = t11;
+      $[62] = t12;
+      $[63] = t13;
+      $[64] = t15;
+      $[65] = t16;
     } else {
-      t16 = $[60];
+      t16 = $[65];
     }
     return t16;
   };
@@ -31217,9 +31316,9 @@
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx("textarea", { "aria-hidden": true, className: cls(props.className, props.shadowClassName), readOnly: true, ref: shadowRef, tabIndex: -1, style: {
+        padding: 0,
         ...styles$1.shadow,
-        ...style,
-        padding: 0
+        ...style
       } })
     ] });
   });
@@ -31242,14 +31341,15 @@
       ref.current = value;
     }
   }
-  function TextField({
+  const TextField = React.forwardRef(({
     value,
     onChange,
     label,
     type = "text",
     multiline = false,
     invisible,
-    rows,
+    maxRows,
+    minRows,
     disabled,
     error,
     endAdornment,
@@ -31262,7 +31362,7 @@
     inputStyle,
     inputRef: inputRefProp,
     ...inputProps
-  }) {
+  }, ref) => {
     const inputRef = inputRefProp ?? React.useRef(null);
     const [focused, setFocused] = React.useState(document.activeElement === inputRef.current);
     const hasValue = value !== void 0 && value !== null && value !== "";
@@ -31272,29 +31372,33 @@
         if (event.target instanceof HTMLElement) event.target.blur();
       };
       const element = "current" in inputRef ? inputRef.current : inputRef;
-      element.addEventListener("wheel", handleWheel);
+      element?.addEventListener("wheel", handleWheel);
       return () => {
-        element.removeEventListener("wheel", handleWheel);
+        element?.removeEventListener("wheel", handleWheel);
       };
     }, [inputRef, type]);
-    const numberInputOnWheelPreventChange = React.useCallback((e) => {
-      e.preventDefault();
-    }, []);
-    const input = multiline ? /* @__PURE__ */ jsxRuntime.jsx(TextareaAutosize, { ...inputProps, ref: inputRef, placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, rows, 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 && "border border-transparent outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500") }) : /* @__PURE__ */ jsxRuntime.jsx("input", { ...inputProps, ref: inputRef, onWheel: type === "number" ? numberInputOnWheelPreventChange : void 0, 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 && "border border-transparent 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: Number.isNaN(value) ? "" : value ?? "", onChange });
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { 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",
-      "min-h-[64px]": !invisible && size === "large"
+    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 === "smallest",
+      "min-h-[32px]": 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-[28px]": size === "smallest",
+      "min-h-[32px]": size === "small",
+      "min-h-[42px]": size === "medium",
+      "min-h-[64px]": size === "large"
     }, className), style, children: [
       label && /* @__PURE__ */ jsxRuntime.jsx(InputLabel, { className: cls("pointer-events-none absolute", size === "large" ? "top-1" : "top-[-1px]", !error ? focused ? "text-primary dark:text-primary" : "text-text-secondary dark:text-text-secondary-dark" : "text-red-500 dark:text-red-600", disabled ? "opacity-50" : ""), shrink: hasValue || focused, children: label }),
       input,
       endAdornment && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("flex flex-row justify-center items-center absolute h-full right-0 top-0", {
         "mr-4": size === "large",
         "mr-3": size === "medium",
-        "mr-2": size === "small"
+        "mr-2": size === "small" || size === "smallest"
       }), children: endAdornment })
     ] });
-  }
+  });
+  TextField.displayName = "TextField";
   const Tooltip = (t0) => {
     const $ = reactCompilerRuntime.c(28);
     const {
@@ -31474,7 +31578,7 @@
     } = t0;
     let t1;
     if ($[0] !== innerClassName) {
-      t1 = cls("flex text-sm font-medium text-center text-surface-accent-800 dark:text-white max-w-full overflow-auto no-scrollbar items-end", innerClassName);
+      t1 = cls("w-max", "flex text-sm font-medium text-center text-surface-accent-800 dark:text-white max-w-full overflow-auto no-scrollbar items-end", innerClassName);
       $[0] = innerClassName;
       $[1] = t1;
     } else {
@@ -31522,7 +31626,7 @@
     }
     let t2;
     if ($[3] !== innerClassName) {
-      t2 = cls("uppercase inline-block p-2 px-4 m-2 rounded", "hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800", innerClassName);
+      t2 = cls("line-clamp-1", "uppercase inline-block p-2 px-4 rounded", "hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800", innerClassName);
       $[3] = innerClassName;
       $[4] = t2;
     } else {