@firecms/ui 3.0.0-beta.12 → 3.0.0-beta.14

package/dist/index.es.js

@@ -452,11 +452,12 @@ const useAutoComplete = ({
   };
 };
 function Autocomplete(t0) {
-  const $ = c(13);
+  const $ = c(14);
   const {
     children,
     open,
-    setOpen
+    setOpen,
+    className
   } = t0;
   const autocompleteRef = React__default.useRef(null);
   let t1;
@@ -479,50 +480,61 @@ function Autocomplete(t0) {
   }
   const t4 = open ? paperMixin : "";
   let t5;
-  if ($[4] !== t4) {
-    t5 = cls(t4, "bg-surface-50 dark:bg-surface-900 py-2");
-    $[4] = t4;
-    $[5] = t5;
+  if ($[4] !== className || $[5] !== t4) {
+    t5 = cls(t4, "bg-surface-50 dark:bg-surface-900", className);
+    $[4] = className;
+    $[5] = t4;
+    $[6] = t5;
   } else {
-    t5 = $[5];
+    t5 = $[6];
   }
   let t6;
-  if ($[6] !== children || $[7] !== t5) {
+  if ($[7] !== children || $[8] !== t5) {
     t6 = /* @__PURE__ */ jsx("div", { ref: autocompleteRef, className: t5, children });
-    $[6] = children;
-    $[7] = t5;
-    $[8] = t6;
+    $[7] = children;
+    $[8] = t5;
+    $[9] = t6;
   } else {
-    t6 = $[8];
+    t6 = $[9];
   }
   let t7;
-  if ($[9] !== open || $[10] !== t3 || $[11] !== t6) {
-    t7 = /* @__PURE__ */ jsx(Collapse, { in: open, duration: 50, className: t3, children: t6 });
-    $[9] = open;
-    $[10] = t3;
-    $[11] = t6;
-    $[12] = t7;
+  if ($[10] !== open || $[11] !== t3 || $[12] !== t6) {
+    t7 = /* @__PURE__ */ jsx(Collapse, { in: open, duration: 30, className: t3, children: t6 });
+    $[10] = open;
+    $[11] = t3;
+    $[12] = t6;
+    $[13] = t7;
   } else {
-    t7 = $[12];
+    t7 = $[13];
   }
   return t7;
 }
 function AutocompleteItem(t0) {
-  const $ = c(3);
+  const $ = c(6);
   const {
     children,
-    onClick
+    onClick,
+    className
   } = t0;
   let t1;
-  if ($[0] !== children || $[1] !== onClick) {
-    t1 = /* @__PURE__ */ jsx("div", { className: "flex w-full items-center pr-6 pl-14 h-[48px] cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800", onClick, children });
-    $[0] = children;
-    $[1] = onClick;
-    $[2] = t1;
+  if ($[0] !== className) {
+    t1 = cls("flex w-full items-center h-[48px] cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800", className);
+    $[0] = className;
+    $[1] = t1;
   } else {
-    t1 = $[2];
+    t1 = $[1];
   }
-  return t1;
+  let t2;
+  if ($[2] !== children || $[3] !== onClick || $[4] !== t1) {
+    t2 = /* @__PURE__ */ jsx("div", { className: t1, onClick, children });
+    $[2] = children;
+    $[3] = onClick;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
 }
 const getSizeClasses = (size) => {
   switch (size) {
@@ -738,13 +750,13 @@ const BooleanSwitch = React__default.forwardRef(function BooleanSwitch2({
 const BooleanSwitchWithLabel = function BooleanSwitchWithLabel2({
   value,
   position = "end",
+  size = "medium",
   invisible,
   onValueChange,
   error,
   label,
   autoFocus,
   disabled,
-  size,
   className,
   fullWidth = true,
   inputClassName,
@@ -758,7 +770,12 @@ const BooleanSwitchWithLabel = function BooleanSwitchWithLabel2({
   React__default.useEffect(() => {
   }, []);
   const focus = document.activeElement === refInput?.current || document.activeElement === ref?.current;
-  return /* @__PURE__ */ 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__ */ 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);
@@ -830,20 +847,20 @@ const ButtonInner = React__default.forwardRef((t0, ref) => {
   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;
@@ -859,17 +876,17 @@ const ButtonInner = React__default.forwardRef((t0, ref) => {
         "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: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,
@@ -1262,6 +1279,7 @@ const Icon = React.forwardRef((t0, ref) => {
   if ($[0] !== style || $[1] !== t2) {
     t3 = {
       fontSize: t2,
+      verticalAlign: "middle",
       ...style
     };
     $[0] = style;
@@ -1273,7 +1291,7 @@ const Icon = React.forwardRef((t0, ref) => {
   const t4 = color ? colorClassesMapping[color] : "";
   let t5;
   if ($[3] !== className || $[4] !== t4) {
-    t5 = cls("material-icons", "block", t4, "select-none", className);
+    t5 = cls("material-icons", t4, "select-none", className);
     $[3] = className;
     $[4] = t4;
     $[5] = t5;
@@ -27685,7 +27703,7 @@ function Typography(t0) {
   return t15;
 }
 const DateTimeField = (t0) => {
-  const $ = c(52);
+  const $ = c(57);
   const {
     value,
     label,
@@ -27759,161 +27777,176 @@ const DateTimeField = (t0) => {
   }
   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__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx(IconButton, { onClick: t23, className: "absolute right-3 top-1/2 transform -translate-y-1/2 !text-surface-accent-500", children: /* @__PURE__ */ jsx(CalendarMonthIcon, { color: "disabled" }) });
-    $[34] = t24;
+  let t27;
+  if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
+    t27 = /* @__PURE__ */ jsx(IconButton, { onClick: t26, className: "absolute right-3 top-1/2 transform -translate-y-1/2 !text-surface-accent-500", children: /* @__PURE__ */ jsx(CalendarMonthIcon, { color: "disabled" }) });
+    $[39] = t27;
   } else {
-    t24 = $[34];
+    t27 = $[39];
   }
-  let t25;
-  if ($[35] !== clearable || $[36] !== handleClear || $[37] !== value) {
-    t25 = clearable && value && /* @__PURE__ */ jsx(IconButton, { onClick: handleClear, className: "absolute right-14 top-1/2 transform -translate-y-1/2 text-surface-accent-400 ", children: /* @__PURE__ */ jsx(CloseIcon, {}) });
-    $[35] = clearable;
-    $[36] = handleClear;
-    $[37] = value;
-    $[38] = t25;
+  let t28;
+  if ($[40] !== clearable || $[41] !== handleClear || $[42] !== value) {
+    t28 = clearable && value && /* @__PURE__ */ jsx(IconButton, { onClick: handleClear, className: "absolute right-14 top-1/2 transform -translate-y-1/2 text-surface-accent-400 ", children: /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center m-2", children: [
-      /* @__PURE__ */ jsx(ErrorIcon, { size: "medium", color: "error" }),
+  let t30;
+  if ($[51] !== invalidValue || $[52] !== value) {
+    t30 = invalidValue && /* @__PURE__ */ jsxs("div", { className: "flex items-center m-2", children: [
+      /* @__PURE__ */ jsx(ErrorIcon, { size: "small", color: "error" }),
       /* @__PURE__ */ jsxs("div", { className: "pl-2", children: [
         /* @__PURE__ */ jsx(Typography, { variant: "body2", children: "Invalid date value for this field" }),
         /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+  let t31;
+  if ($[54] !== t29 || $[55] !== t30) {
+    t31 = /* @__PURE__ */ jsxs(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 */
@@ -27962,12 +27995,13 @@ const widthClasses = {
   full: "max-w-full min-w-full w-full"
 };
 const Dialog = (t0) => {
-  const $ = c(36);
+  const $ = c(39);
   const {
     open,
     onOpenChange,
     children,
     className,
+    containerClassName,
     fullWidth: t1,
     fullHeight,
     fullScreen,
@@ -28008,107 +28042,116 @@ const Dialog = (t0) => {
   }
   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__ */ jsx(DialogPrimitive.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__ */ jsx(DialogPrimitive.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__ */ 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__ */ jsx(DialogPrimitive.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__ */ 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__ */ jsx(DialogPrimitive.Portal, { children: /* @__PURE__ */ 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__ */ jsx(DialogPrimitive.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__ */ jsx(DialogPrimitive.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__ */ jsx(DialogPrimitive.Portal, { children: /* @__PURE__ */ 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__ */ jsx(DialogPrimitive.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() {
 }
@@ -28678,7 +28721,7 @@ const Label = React.forwardRef((t0, ref) => {
 });
 Label.displayName = LabelPrimitive.Root.displayName;
 function LoadingButton(t0) {
-  const $ = c(17);
+  const $ = c(18);
   let children;
   let disabled;
   let loading;
@@ -28712,31 +28755,32 @@ function LoadingButton(t0) {
   const t1 = loading || disabled;
   const t2 = props.component;
   let t3;
-  if ($[7] !== loading) {
-    t3 = loading && /* @__PURE__ */ jsx(CircularProgress, { size: "small" });
+  if ($[7] !== loading || $[8] !== props.size) {
+    t3 = loading && /* @__PURE__ */ jsx(CircularProgress, { size: props.size === "small" ? "smallest" : "small" });
     $[7] = loading;
-    $[8] = t3;
+    $[8] = props.size;
+    $[9] = t3;
   } else {
-    t3 = $[8];
+    t3 = $[9];
   }
   const t4 = !loading && startIcon;
   let t5;
-  if ($[9] !== children || $[10] !== onClick || $[11] !== props || $[12] !== t1 || $[13] !== t2 || $[14] !== t3 || $[15] !== t4) {
+  if ($[10] !== children || $[11] !== onClick || $[12] !== props || $[13] !== t1 || $[14] !== t2 || $[15] !== t3 || $[16] !== t4) {
     t5 = /* @__PURE__ */ jsxs(Button, { disabled: t1, onClick, component: t2, ...props, children: [
       t3,
       t4,
       children
     ] });
-    $[9] = children;
-    $[10] = onClick;
-    $[11] = props;
-    $[12] = t1;
-    $[13] = t2;
-    $[14] = t3;
-    $[15] = t4;
-    $[16] = t5;
+    $[10] = children;
+    $[11] = onClick;
+    $[12] = props;
+    $[13] = t1;
+    $[14] = t2;
+    $[15] = t3;
+    $[16] = t4;
+    $[17] = t5;
   } else {
-    t5 = $[16];
+    t5 = $[17];
   }
   return t5;
 }
@@ -28956,7 +29000,7 @@ function MenubarTrigger(t0) {
   } = 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 {
@@ -29623,98 +29667,99 @@ function SelectInputLabel(t0) {
 }
 const MultiSelectContext = React.createContext({});
 const MultiSelect = React.forwardRef((t0, ref) => {
-  const $ = c(98);
+  const $ = c(103);
   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.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.useState(t5);
-  let t6;
+  const [selectedValues, setSelectedValues] = React.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];
   }
-  useEffect(t7, t8);
-  let t9;
+  useEffect(t8, t9);
+  let t10;
   if ($[7] !== children) {
-    t9 = children ? Children.map(children, _temp$1).filter(Boolean) : [];
+    t10 = children ? 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.useEffect(t10, t11);
+  React.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];
       }
@@ -29732,9 +29777,9 @@ const MultiSelect = React.forwardRef((t0, ref) => {
     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 {
@@ -29748,50 +29793,50 @@ const MultiSelect = React.forwardRef((t0, ref) => {
     $[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 {
@@ -29804,60 +29849,76 @@ const MultiSelect = React.forwardRef((t0, ref) => {
     $[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__ */ jsx(SelectInputLabel, { error, children: label }) : label;
+    t19 = typeof label === "string" ? /* @__PURE__ */ 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__ */ 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] !== size || $[57] !== toggleOption || $[58] !== useChips) {
+    t25 = selectedValues.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center w-full", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5 text-start", children: [
         renderValues && renderValues(selectedValues),
         !renderValues && selectedValues.map((value_1) => {
           const childrenProps = 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;
           }
@@ -29867,7 +29928,7 @@ const MultiSelect = React.forwardRef((t0, ref) => {
               event_0.stopPropagation();
               toggleOption(value_1);
             } })
-          ] }, value_1);
+          ] }, String(value_1));
         })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
@@ -29875,185 +29936,186 @@ const MultiSelect = React.forwardRef((t0, ref) => {
           event_1.stopPropagation();
           handleClear();
         } }),
-        /* @__PURE__ */ jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: "small", className: cls("transition", isPopoverOpen ? "rotate-180" : "") }) })
+        /* @__PURE__ */ jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: size === "large" ? "medium" : "small", className: cls("transition", isPopoverOpen ? "rotate-180" : "") }) })
       ] })
     ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full mx-auto", children: [
       /* @__PURE__ */ jsx("span", { className: "text-sm", children: placeholder }),
-      /* @__PURE__ */ jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: "small", className: cls("transition", isPopoverOpen ? "rotate-180" : "") }) })
+      /* @__PURE__ */ jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: size === "large" ? "medium" : "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__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ 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] = size;
+    $[57] = toggleOption;
+    $[58] = useChips;
+    $[59] = t25;
+  } else {
+    t25 = $[59];
   }
   let t26;
-  if ($[61] !== onPopoverOpenChange) {
-    t26 = () => onPopoverOpenChange(false);
-    $[61] = onPopoverOpenChange;
-    $[62] = t26;
+  if ($[60] !== handleTogglePopover || $[61] !== ref || $[62] !== t24 || $[63] !== t25) {
+    t26 = /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { ref, onClick: handleTogglePopover, className: t24, children: t25 }) });
+    $[60] = handleTogglePopover;
+    $[61] = ref;
+    $[62] = t24;
+    $[63] = t25;
+    $[64] = t26;
   } else {
-    t26 = $[62];
+    t26 = $[64];
   }
   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 ($[65] === 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);
+    $[65] = t27;
   } else {
-    t27 = $[63];
+    t27 = $[65];
   }
   let t28;
-  if ($[64] !== handleInputKeyDown) {
-    t28 = /* @__PURE__ */ jsx(Command.Input, { className: t27, placeholder: "Search...", onKeyDown: handleInputKeyDown });
-    $[64] = handleInputKeyDown;
-    $[65] = t28;
+  if ($[66] !== onPopoverOpenChange) {
+    t28 = () => onPopoverOpenChange(false);
+    $[66] = onPopoverOpenChange;
+    $[67] = t28;
   } else {
-    t28 = $[65];
+    t28 = $[67];
   }
   let t29;
-  if ($[66] !== handleClear || $[67] !== selectedValues.length) {
-    t29 = selectedValues.length > 0 && /* @__PURE__ */ 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 ($[68] === Symbol.for("react.memo_cache_sentinel")) {
+    t29 = cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full m-4 flex-grow ");
     $[68] = t29;
   } else {
     t29 = $[68];
   }
   let t30;
-  if ($[69] !== t28 || $[70] !== t29) {
-    t30 = /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
-      t28,
-      t29
-    ] });
-    $[69] = t28;
-    $[70] = t29;
-    $[71] = t30;
+  if ($[69] !== handleInputKeyDown) {
+    t30 = /* @__PURE__ */ jsx(Command.Input, { className: t29, placeholder: "Search...", onKeyDown: handleInputKeyDown });
+    $[69] = handleInputKeyDown;
+    $[70] = t30;
   } else {
-    t30 = $[71];
+    t30 = $[70];
   }
   let t31;
-  if ($[72] === Symbol.for("react.memo_cache_sentinel")) {
-    t31 = /* @__PURE__ */ jsx(Separator, { orientation: "horizontal", className: "my-0" });
-    $[72] = t31;
+  if ($[71] !== handleClear || $[72] !== selectedValues.length) {
+    t31 = selectedValues.length > 0 && /* @__PURE__ */ 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" });
+    $[71] = handleClear;
+    $[72] = selectedValues.length;
+    $[73] = t31;
   } else {
-    t31 = $[72];
+    t31 = $[73];
   }
   let t32;
-  if ($[73] === Symbol.for("react.memo_cache_sentinel")) {
-    t32 = /* @__PURE__ */ jsx(Command.Empty, { className: "px-4 py-2", children: "No results found." });
-    $[73] = t32;
+  if ($[74] !== t30 || $[75] !== t31) {
+    t32 = /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
+      t30,
+      t31
+    ] });
+    $[74] = t30;
+    $[75] = t31;
+    $[76] = t32;
   } else {
-    t32 = $[73];
+    t32 = $[76];
   }
   let t33;
-  if ($[74] !== allValues.length || $[75] !== includeSelectAll || $[76] !== selectedValues.length || $[77] !== toggleAll) {
-    t33 = includeSelectAll && /* @__PURE__ */ jsxs(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 ($[77] === Symbol.for("react.memo_cache_sentinel")) {
+    t33 = /* @__PURE__ */ jsx(Separator, { orientation: "horizontal", className: "my-0" });
+    $[77] = t33;
+  } else {
+    t33 = $[77];
+  }
+  let t34;
+  if ($[78] === Symbol.for("react.memo_cache_sentinel")) {
+    t34 = /* @__PURE__ */ jsx(Command.Empty, { className: "px-4 py-2", children: "No results found." });
+    $[78] = t34;
+  } else {
+    t34 = $[78];
+  }
+  let t35;
+  if ($[79] !== allValues.length || $[80] !== includeSelectAll || $[81] !== selectedValues.length || $[82] !== toggleAll) {
+    t35 = includeSelectAll && /* @__PURE__ */ jsxs(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__ */ jsx(InnerCheckBox, { checked: selectedValues.length === allValues.length }),
       /* @__PURE__ */ 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;
+    $[79] = allValues.length;
+    $[80] = includeSelectAll;
+    $[81] = selectedValues.length;
+    $[82] = toggleAll;
+    $[83] = t35;
   } else {
-    t33 = $[78];
+    t35 = $[83];
   }
-  let t34;
-  if ($[79] !== children || $[80] !== t33) {
-    t34 = /* @__PURE__ */ jsxs(Command.List, { children: [
-      t32,
+  let t36;
+  if ($[84] !== children || $[85] !== t35) {
+    t36 = /* @__PURE__ */ jsxs(Command.List, { children: [
+      t34,
       /* @__PURE__ */ jsxs(Command.Group, { children: [
-        t33,
+        t35,
         children
       ] })
     ] });
-    $[79] = children;
-    $[80] = t33;
-    $[81] = t34;
+    $[84] = children;
+    $[85] = t35;
+    $[86] = t36;
   } else {
-    t34 = $[81];
+    t36 = $[86];
   }
-  let t35;
-  if ($[82] !== t30 || $[83] !== t34) {
-    t35 = /* @__PURE__ */ jsxs(Command, { children: [
-      t30,
-      t31,
-      t34
+  let t37;
+  if ($[87] !== t32 || $[88] !== t36) {
+    t37 = /* @__PURE__ */ jsxs(Command, { children: [
+      t32,
+      t33,
+      t36
     ] });
-    $[82] = t30;
-    $[83] = t34;
-    $[84] = t35;
+    $[87] = t32;
+    $[88] = t36;
+    $[89] = t37;
   } else {
-    t35 = $[84];
+    t37 = $[89];
   }
-  let t36;
-  if ($[85] !== t26 || $[86] !== t35) {
-    t36 = /* @__PURE__ */ jsx(PopoverPrimitive.Content, { className: t25, align: "start", sideOffset: 8, onEscapeKeyDown: t26, children: t35 });
-    $[85] = t26;
-    $[86] = t35;
-    $[87] = t36;
+  let t38;
+  if ($[90] !== t28 || $[91] !== t37) {
+    t38 = /* @__PURE__ */ jsx(PopoverPrimitive.Content, { className: t27, align: "start", sideOffset: 8, onEscapeKeyDown: t28, children: t37 });
+    $[90] = t28;
+    $[91] = t37;
+    $[92] = t38;
   } else {
-    t36 = $[87];
+    t38 = $[92];
   }
-  let t37;
-  if ($[88] !== isPopoverOpen || $[89] !== modalPopover || $[90] !== onPopoverOpenChange || $[91] !== t24 || $[92] !== t36) {
-    t37 = /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open: isPopoverOpen, onOpenChange: onPopoverOpenChange, modal: modalPopover, children: [
-      t24,
-      t36
+  let t39;
+  if ($[93] !== isPopoverOpen || $[94] !== modalPopover || $[95] !== onPopoverOpenChange || $[96] !== t26 || $[97] !== t38) {
+    t39 = /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open: isPopoverOpen, onOpenChange: onPopoverOpenChange, modal: modalPopover, children: [
+      t26,
+      t38
     ] });
-    $[88] = isPopoverOpen;
-    $[89] = modalPopover;
-    $[90] = onPopoverOpenChange;
-    $[91] = t24;
-    $[92] = t36;
-    $[93] = t37;
+    $[93] = isPopoverOpen;
+    $[94] = modalPopover;
+    $[95] = onPopoverOpenChange;
+    $[96] = t26;
+    $[97] = t38;
+    $[98] = t39;
   } else {
-    t37 = $[93];
+    t39 = $[98];
   }
-  let t38;
-  if ($[94] !== t17 || $[95] !== t18 || $[96] !== t37) {
-    t38 = /* @__PURE__ */ jsxs(MultiSelectContext.Provider, { value: t17, children: [
-      t18,
-      t37
+  let t40;
+  if ($[99] !== t18 || $[100] !== t19 || $[101] !== t39) {
+    t40 = /* @__PURE__ */ jsxs(MultiSelectContext.Provider, { value: t18, children: [
+      t19,
+      t39
     ] });
-    $[94] = t17;
-    $[95] = t18;
-    $[96] = t37;
-    $[97] = t38;
+    $[99] = t18;
+    $[100] = t19;
+    $[101] = t39;
+    $[102] = t40;
   } else {
-    t38 = $[97];
+    t40 = $[102];
   }
-  return t38;
+  return t40;
 });
 MultiSelect.displayName = "MultiSelect";
 function MultiSelectItem(t0) {
-  const $ = c(18);
+  const $ = c(20);
   const {
     children,
     value,
@@ -30077,7 +30139,15 @@ function MultiSelectItem(t0) {
   }
   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;
@@ -30086,47 +30156,47 @@ function MultiSelectItem(t0) {
   }
   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__ */ 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__ */ jsxs(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;
 }
@@ -30481,6 +30551,7 @@ const Select = forwardRef(({
   endAdornment,
   invisible,
   children,
+  dataType = "string",
   ...props
 }, ref) => {
   const [openInternal, setOpenInternal] = useState(open ?? false);
@@ -30488,68 +30559,81 @@ const Select = forwardRef(({
     setOpenInternal(open ?? false);
   }, [open]);
   const onValueChangeInternal = useCallback((newValue) => {
-    onValueChange?.(newValue);
+    let typedValue = newValue;
+    if (dataType === "boolean") {
+      if (newValue === "true") typedValue = true;
+      else if (newValue === "false") typedValue = false;
+    } else if (dataType === "number") {
+      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__ */ jsxs(SelectPrimitive.Root, { name, value, open: openInternal, disabled, onValueChange: onValueChangeInternal, onOpenChange: (open_0) => {
+  const stringValue = value !== void 0 ? String(value) : void 0;
+  return /* @__PURE__ */ jsxs(SelectPrimitive.Root, { name, value: stringValue, open: openInternal, disabled, onValueChange: onValueChangeInternal, onOpenChange: (open_0) => {
     onOpenChange?.(open_0);
     setOpenInternal(open_0);
   }, ...props, children: [
     typeof label === "string" ? /* @__PURE__ */ jsx(SelectInputLabel, { error, children: label }) : label,
-    /* @__PURE__ */ 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",
+    /* @__PURE__ */ jsxs("div", { className: cls("select-none rounded-md text-sm", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, "relative flex items-center", className, {
+      "min-h-[28px]": size === "smallest",
+      "min-h-[32px]": size === "small",
       "min-h-[42px]": size === "medium",
       "min-h-[64px]": size === "large",
       "w-fit": !fullWidth,
       "w-full": fullWidth
-    }), children: /* @__PURE__ */ jsx(SelectPrimitive.Trigger, { ref: inputRef, id, asChild: true, children: /* @__PURE__ */ jsxs("div", { className: cls("h-full", padding ? {
-      "px-4": size === "large",
-      "px-3": size === "medium",
-      "px-2": size === "small"
-    } : "", "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-[42px]": size === "medium",
-      "min-h-[64px]": size === "large",
-      "w-full": fullWidth,
-      "w-fit": !fullWidth
-    }, inputClassName), children: [
-      /* @__PURE__ */ jsx("div", { ref, className: cls("flex-grow max-w-full flex flex-row gap-2 items-center", "overflow-visible", {
-        "min-h-[28px]": size === "small",
+    }), children: [
+      /* @__PURE__ */ jsx(SelectPrimitive.Trigger, { ref: inputRef, id, asChild: true, children: /* @__PURE__ */ jsxs("div", { className: cls("h-full", padding ? {
+        "px-4": size === "large",
+        "px-3": size === "medium",
+        "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 === "smallest",
+        "min-h-[32px]": size === "small",
         "min-h-[42px]": size === "medium",
-        "min-h-[64px]": size === "large"
-      }), children: /* @__PURE__ */ jsxs(SelectPrimitive.Value, { onClick: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }, placeholder, className: "w-full", children: [
-        hasValue && value && renderValue ? renderValue(value) : placeholder,
-        hasValue && !renderValue && (() => {
-          const childrenProps = Children.map(children, (child) => {
-            if (React__default.isValidElement(child)) {
-              return child.props;
-            }
-          }).filter(Boolean);
-          const option = childrenProps.find((o) => o.value === value);
-          return option?.children;
-        })()
+        "min-h-[64px]": size === "large",
+        "w-full": fullWidth,
+        "w-fit": !fullWidth
+      }, inputClassName), children: [
+        /* @__PURE__ */ jsx("div", { ref, className: cls("flex-grow max-w-full flex flex-row gap-2 items-center", "overflow-visible", {
+          "min-h-[28px]": size === "smallest",
+          "min-h-[32px]": size === "small",
+          "min-h-[42px]": size === "medium",
+          "min-h-[64px]": size === "large"
+        }), children: /* @__PURE__ */ jsxs(SelectPrimitive.Value, { onClick: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }, placeholder, className: "w-full", children: [
+          hasValue && value !== void 0 && renderValue ? renderValue(value) : placeholder,
+          hasValue && !renderValue && (() => {
+            const childrenProps = Children.map(children, (child) => {
+              if (React__default.isValidElement(child)) {
+                return child.props;
+              }
+            }).filter(Boolean);
+            const option = childrenProps.find((o) => String(o.value) === String(value));
+            return option?.children;
+          })()
+        ] }) }),
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: size === "large" ? "medium" : "small", className: cls("transition", open ? "rotate-180" : "", {
+          "px-2": size === "large",
+          "px-1": size === "medium" || size === "small"
+        }) }) })
       ] }) }),
-      endAdornment && /* @__PURE__ */ jsx("div", { className: cls("h-full flex items-center"), onClick: (e_0) => {
+      endAdornment && /* @__PURE__ */ jsx("div", { className: cls("h-full flex items-center absolute right-0 pr-12"), onClick: (e_0) => {
         e_0.preventDefault();
         e_0.stopPropagation();
-      }, children: endAdornment }),
-      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: "medium", className: cls("transition", open ? "rotate-180" : "", {
-        "px-2": size === "large",
-        "px-1": size === "medium" || size === "small"
-      }) }) })
-    ] }) }) }),
+      }, children: endAdornment })
+    ] }),
     /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(SelectPrimitive.Content, { position, className: cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-900 p-2 rounded-lg", defaultBorderMixin), children: /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { className: "p-1", style: {
       maxHeight: "var(--radix-select-content-available-height)"
     }, children }) }) })
@@ -30564,6 +30648,7 @@ function SelectItem(t0) {
     disabled,
     className
   } = t0;
+  const stringValue = String(value);
   const t1 = disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer";
   let t2;
   if ($[0] !== className || $[1] !== t1) {
@@ -30590,15 +30675,15 @@ function SelectItem(t0) {
     t4 = $[5];
   }
   let t5;
-  if ($[6] !== disabled || $[7] !== t2 || $[8] !== t3 || $[9] !== value) {
-    t5 = /* @__PURE__ */ jsxs(SelectPrimitive.Item, { value, disabled, className: t2, children: [
+  if ($[6] !== disabled || $[7] !== stringValue || $[8] !== t2 || $[9] !== t3) {
+    t5 = /* @__PURE__ */ jsxs(SelectPrimitive.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];
@@ -31274,7 +31359,8 @@ const TextField = forwardRef(({
   type = "text",
   multiline = false,
   invisible,
-  rows,
+  maxRows,
+  minRows,
   disabled,
   error,
   endAdornment,
@@ -31302,18 +31388,24 @@ const TextField = forwardRef(({
       element?.removeEventListener("wheel", handleWheel);
     };
   }, [inputRef, type]);
-  const input = multiline ? /* @__PURE__ */ 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 && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500", inputClassName) }) : /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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",
-    "min-h-[64px]": !invisible && size === "large"
+    "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__ */ 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__ */ 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 })
   ] });
 });