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

package/dist/index.umd.js

@@ -44,8 +44,8 @@
   const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40";
   const defaultBorderMixin = "border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40";
   const paperMixin = "bg-white rounded-md dark:bg-surface-950 border border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40";
-  const cardMixin = "bg-white border border-surface-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-surface-950 dark:border-surface-700 dark:border-opacity-40 m-1 -p-1";
-  const cardClickableMixin = "hover:bg-primary-bg dark:hover:bg-primary-bg hover:bg-opacity-20 dark:hover:bg-opacity-20 hover:ring-2 hover:ring-primary cursor-pointer";
+  const cardMixin = "bg-white border border-surface-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-surface-950 dark:border-surface-700 dark:border-opacity-40";
+  const cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 hover:ring-2 hover:ring-primary cursor-pointer";
   const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 dark:bg-opacity-10 ring-1 ring-primary ring-opacity-75";
   function cls(...classes) {
     return tailwindMerge.twMerge(clsx.clsx(classes));
@@ -462,11 +462,12 @@
     };
   };
   function Autocomplete(t0) {
-    const $ = reactCompilerRuntime.c(13);
+    const $ = reactCompilerRuntime.c(14);
     const {
       children,
       open,
-      setOpen
+      setOpen,
+      className
     } = t0;
     const autocompleteRef = React.useRef(null);
     let t1;
@@ -489,50 +490,61 @@
     }
     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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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 $ = reactCompilerRuntime.c(3);
+    const $ = reactCompilerRuntime.c(6);
     const {
       children,
-      onClick
+      onClick,
+      className
     } = t0;
     let t1;
-    if ($[0] !== children || $[1] !== onClick) {
-      t1 = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: t1, onClick, children });
+      $[2] = children;
+      $[3] = onClick;
+      $[4] = t1;
+      $[5] = t2;
+    } else {
+      t2 = $[5];
+    }
+    return t2;
   }
   const getSizeClasses = (size) => {
     switch (size) {
@@ -561,13 +573,14 @@
     }
   };
   const Alert = (t0) => {
-    const $ = reactCompilerRuntime.c(16);
+    const $ = reactCompilerRuntime.c(19);
     const {
       children,
       onDismiss,
       color: t1,
       size: t2,
       action,
+      outerClassName,
       className,
       style
     } = t0;
@@ -575,12 +588,12 @@
     const size = t2 === void 0 ? "medium" : t2;
     let t3;
     let t4;
-    if ($[0] !== className || $[1] !== color || $[2] !== size || $[3] !== style) {
+    if ($[0] !== color || $[1] !== outerClassName || $[2] !== size || $[3] !== style) {
       const classes = getColorClasses(color);
       t3 = style;
-      t4 = cls(getSizeClasses(size), "w-full", "font-medium", "rounded-md flex items-center gap-2", classes, className);
-      $[0] = className;
-      $[1] = color;
+      t4 = cls(getSizeClasses(size), "w-full", "font-medium", "rounded-md flex items-center gap-2", classes, outerClassName);
+      $[0] = color;
+      $[1] = outerClassName;
       $[2] = size;
       $[3] = style;
       $[4] = t3;
@@ -590,38 +603,47 @@
       t4 = $[5];
     }
     let t5;
-    if ($[6] !== children) {
-      t5 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow", children });
-      $[6] = children;
+    if ($[6] !== className) {
+      t5 = cls("flex-grow", className);
+      $[6] = className;
       $[7] = t5;
     } else {
       t5 = $[7];
     }
     let t6;
-    if ($[8] !== onDismiss) {
-      t6 = onDismiss && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "text-surface-accent-400 hover:text-surface-accent-600 dark:text-surface-accent-500 dark:hover:text-surface-accent-400", onClick: onDismiss, children: "×" });
-      $[8] = onDismiss;
-      $[9] = t6;
+    if ($[8] !== children || $[9] !== t5) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t5, children });
+      $[8] = children;
+      $[9] = t5;
+      $[10] = t6;
     } else {
-      t6 = $[9];
+      t6 = $[10];
     }
     let t7;
-    if ($[10] !== action || $[11] !== t3 || $[12] !== t4 || $[13] !== t5 || $[14] !== t6) {
-      t7 = /* @__PURE__ */ jsxRuntime.jsxs("div", { style: t3, className: t4, children: [
-        t5,
+    if ($[11] !== onDismiss) {
+      t7 = onDismiss && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "text-surface-accent-400 hover:text-surface-accent-600 dark:text-surface-accent-500 dark:hover:text-surface-accent-400", onClick: onDismiss, children: "×" });
+      $[11] = onDismiss;
+      $[12] = t7;
+    } else {
+      t7 = $[12];
+    }
+    let t8;
+    if ($[13] !== action || $[14] !== t3 || $[15] !== t4 || $[16] !== t6 || $[17] !== t7) {
+      t8 = /* @__PURE__ */ jsxRuntime.jsxs("div", { style: t3, className: t4, children: [
         t6,
+        t7,
         action
       ] });
-      $[10] = action;
-      $[11] = t3;
-      $[12] = t4;
-      $[13] = t5;
-      $[14] = t6;
-      $[15] = t7;
+      $[13] = action;
+      $[14] = t3;
+      $[15] = t4;
+      $[16] = t6;
+      $[17] = t7;
+      $[18] = t8;
     } else {
-      t7 = $[15];
+      t8 = $[18];
     }
-    return t7;
+    return t8;
   };
   const AvatarInner = (t0, ref) => {
     const $ = reactCompilerRuntime.c(25);
@@ -730,18 +752,22 @@
       } else {
         onValueChange?.(!value);
       }
-    }, className: cls(size === "small" ? "w-[38px] h-[22px] min-w-[38px] min-h-[22px]" : "w-[42px] h-[26px] min-w-[42px] min-h-[26px]", "outline-none rounded-full relative shadow-sm", value ? disabled ? "bg-white bg-opacity-54 dark:bg-surface-accent-950 border-surface-accent-100 dark:border-surface-accent-700 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700" : "ring-secondary ring-1 bg-secondary dark:bg-secondary" : "bg-white bg-opacity-54 dark:bg-surface-accent-900 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700", className), ...props, children: [
+    }, className: cls(size === "smallest" ? "w-[34px] h-[18px] min-w-[34px] min-h-[18px]" : size === "small" ? "w-[38px] h-[22px] min-w-[38px] min-h-[22px]" : "w-[42px] h-[26px] min-w-[42px] min-h-[26px]", "outline-none rounded-full relative shadow-sm", value ? disabled ? "bg-white bg-opacity-54 dark:bg-surface-accent-950 border-surface-accent-100 dark:border-surface-accent-700 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700" : "ring-secondary ring-1 bg-secondary dark:bg-secondary" : "bg-white bg-opacity-54 dark:bg-surface-accent-900 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700", className), ...props, children: [
       allowIndeterminate && (value === null || value === void 0) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("block rounded-full transition-transform duration-100 transform will-change-auto", disabled ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600", {
         "w-[21px] h-[10px]": size === "medium" || size === "large",
         "w-[19px] h-[8px]": size === "small",
+        "w-[16px] h-[6px]": size === "smallest",
         "translate-x-[10px]": size === "medium" || size === "large",
-        "translate-x-[9px]": size === "small"
+        "translate-x-[9px]": size === "small",
+        "translate-x-[8px]": size === "smallest"
       }) }, "knob"),
       !(allowIndeterminate && (value === null || value === void 0)) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("block rounded-full transition-transform duration-100 transform will-change-auto", disabled ? "bg-surface-accent-300 dark:bg-surface-accent-700" : value ? "bg-white" : "bg-surface-accent-600 dark:bg-surface-accent-400", {
         "w-[21px] h-[21px]": size === "medium" || size === "large",
         "w-[19px] h-[19px]": size === "small",
+        "w-[16px] h-[16px]": size === "smallest",
         [value ? "translate-x-[19px]" : "translate-x-[3px]"]: size === "medium" || size === "large",
-        [value ? "translate-x-[17px]" : "translate-x-[2px]"]: size === "small"
+        [value ? "translate-x-[17px]" : "translate-x-[2px]"]: size === "small",
+        [value ? "translate-x-[16px]" : "translate-x-[1px]"]: size === "smallest"
       }) }, "knob")
     ] });
   });
@@ -773,7 +799,7 @@
       "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) => {
+    }, size === "small" || size === "smallest" ? "pl-2" : "pl-4", size === "small" || size === "smallest" ? "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);
@@ -783,11 +809,11 @@
       }
     }, children: [
       /* @__PURE__ */ jsxRuntime.jsx(BooleanSwitch, { value, ref: refInput, size, className: cls(invisible && focus ? focusedClasses : "", inputClassName), disabled, ...props }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("flex-grow", position === "end" ? "mr-4" : "ml-4", size === "small" ? "text-sm" : "text-base"), children: label })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("flex-grow", position === "end" ? "mr-4" : "ml-4", size === "small" || size === "smallest" ? "text-sm" : "text-base"), children: label })
     ] });
   };
   const ButtonInner = React.forwardRef((t0, ref) => {
-    const $ = reactCompilerRuntime.c(53);
+    const $ = reactCompilerRuntime.c(55);
     let Component;
     let children;
     let className;
@@ -839,7 +865,7 @@
     const size = t3 === void 0 ? "medium" : t3;
     const startIcon = t4 === void 0 ? null : t4;
     const fullWidth = t5 === void 0 ? false : t5;
-    const color = t6 === void 0 ? "primary" : t6;
+    const color = t6 === void 0 ? "neutral" : t6;
     const t7 = !fullWidth;
     const t8 = variant === "filled" && color === "primary" && !disabled;
     const t9 = variant === "filled" && color === "secondary" && !disabled;
@@ -874,17 +900,17 @@
           "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 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 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 hover:text-text-primary dark:text-text-primary-dark hover: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-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,
+          "border border-surface-300 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,
@@ -954,22 +980,24 @@
     }
     const t31 = props;
     let t32;
-    if ($[44] !== children || $[45] !== disabled || $[46] !== startIcon || $[47] !== t26 || $[48] !== t27 || $[49] !== t28 || $[50] !== t29 || $[51] !== t31) {
-      t32 = /* @__PURE__ */ jsxRuntime.jsxs("button", { ref: t26, type: t27, onClick: t28, className: t29, disabled, ...t31, children: [
+    if ($[44] !== children || $[45] !== disabled || $[46] !== size || $[47] !== startIcon || $[48] !== t26 || $[49] !== t27 || $[50] !== t28 || $[51] !== t29 || $[52] !== t31 || $[53] !== variant) {
+      t32 = /* @__PURE__ */ jsxRuntime.jsxs("button", { ref: t26, type: t27, onClick: t28, className: t29, disabled, "data-variant": variant, "data-size": size, ...t31, children: [
         startIcon,
         children
       ] });
       $[44] = children;
       $[45] = disabled;
-      $[46] = startIcon;
-      $[47] = t26;
-      $[48] = t27;
-      $[49] = t28;
-      $[50] = t29;
-      $[51] = t31;
-      $[52] = t32;
-    } else {
-      t32 = $[52];
+      $[46] = size;
+      $[47] = startIcon;
+      $[48] = t26;
+      $[49] = t27;
+      $[50] = t28;
+      $[51] = t29;
+      $[52] = t31;
+      $[53] = variant;
+      $[54] = t32;
+    } else {
+      t32 = $[54];
     }
     return t32;
   });
@@ -1277,6 +1305,7 @@
     if ($[0] !== style || $[1] !== t2) {
       t3 = {
         fontSize: t2,
+        verticalAlign: "middle",
         ...style
       };
       $[0] = style;
@@ -1288,7 +1317,7 @@
     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;
@@ -27992,7 +28021,7 @@
     full: "max-w-full min-w-full w-full"
   };
   const Dialog = (t0) => {
-    const $ = reactCompilerRuntime.c(39);
+    const $ = reactCompilerRuntime.c(42);
     const {
       open,
       onOpenChange,
@@ -28008,17 +28037,19 @@
       onOpenAutoFocus,
       onEscapeKeyDown,
       onPointerDownOutside,
-      onInteractOutside
+      onInteractOutside,
+      disableInitialFocus: t5
     } = t0;
     const fullWidth = t1 === void 0 ? true : t1;
     const scrollable = t2 === void 0 ? true : t2;
     const maxWidth = t3 === void 0 ? "lg" : t3;
     const modal = t4 === void 0 ? true : t4;
+    const disableInitialFocus = t5 === void 0 ? true : t5;
     const [displayed, setDisplayed] = React.useState(false);
-    let t5;
     let t6;
+    let t7;
     if ($[0] !== open) {
-      t5 = () => {
+      t6 = () => {
         if (!open) {
           const timeout = setTimeout(() => {
             setDisplayed(false);
@@ -28029,126 +28060,140 @@
           return _temp$2;
         }
       };
-      t6 = [open];
+      t7 = [open];
       $[0] = open;
-      $[1] = t5;
-      $[2] = t6;
+      $[1] = t6;
+      $[2] = t7;
     } else {
-      t5 = $[1];
-      t6 = $[2];
+      t6 = $[1];
+      t7 = $[2];
     }
-    React.useEffect(t5, t6);
-    const t7 = displayed || open;
-    let t8;
+    React.useEffect(t6, t7);
+    const t8 = displayed || open;
+    let t9;
     if ($[3] !== containerClassName) {
-      t8 = cls("fixed inset-0 z-30", containerClassName);
+      t9 = cls("fixed inset-0 z-30", containerClassName);
       $[3] = containerClassName;
-      $[4] = t8;
+      $[4] = t9;
     } else {
-      t8 = $[4];
+      t9 = $[4];
     }
-    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;
+    const t10 = displayed && open ? "opacity-100" : "opacity-0";
+    let t11;
+    if ($[5] !== t10) {
+      t11 = 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 ", t10, "z-20 fixed top-0 left-0 w-full h-full flex justify-center items-center");
+      $[5] = t10;
+      $[6] = t11;
     } else {
-      t10 = $[6];
+      t11 = $[6];
     }
-    const t11 = displayed ? "auto" : "none";
-    let t12;
-    if ($[7] !== t11) {
-      t12 = {
-        pointerEvents: t11
+    const t12 = displayed ? "auto" : "none";
+    let t13;
+    if ($[7] !== t12) {
+      t13 = {
+        pointerEvents: t12
       };
-      $[7] = t11;
-      $[8] = t12;
+      $[7] = t12;
+      $[8] = t13;
     } else {
-      t12 = $[8];
+      t13 = $[8];
     }
-    let t13;
-    if ($[9] !== t10 || $[10] !== t12) {
-      t13 = /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Overlay, { className: t10, style: t12 });
-      $[9] = t10;
-      $[10] = t12;
-      $[11] = t13;
+    let t14;
+    if ($[9] !== t11 || $[10] !== t13) {
+      t14 = /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Overlay, { className: t11, style: t13 });
+      $[9] = t11;
+      $[10] = t13;
+      $[11] = t14;
     } else {
-      t13 = $[11];
+      t14 = $[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;
-    } else {
-      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 ($[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;
+    let t15;
+    if ($[12] !== disableInitialFocus || $[13] !== onOpenAutoFocus) {
+      t15 = (e) => {
+        if (disableInitialFocus) {
+          e.preventDefault();
+        }
+        onOpenAutoFocus?.(e);
+      };
+      $[12] = disableInitialFocus;
+      $[13] = onOpenAutoFocus;
       $[14] = t15;
-      $[15] = t16;
-      $[16] = t17;
-      $[17] = t18;
-      $[18] = t19;
-      $[19] = t20;
-      $[20] = t21;
     } else {
-      t21 = $[20];
+      t15 = $[14];
     }
-    let t22;
-    if ($[21] !== children || $[22] !== t21) {
-      t22 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t21, children });
-      $[21] = children;
-      $[22] = t21;
-      $[23] = t22;
+    let t16;
+    if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+      t16 = cls("h-full outline-none flex justify-center items-center z-40 opacity-100 transition-all duration-200 ease-in-out");
+      $[15] = t16;
     } else {
-      t22 = $[23];
+      t16 = $[15];
     }
+    const t17 = fullWidth && !fullScreen ? "w-11/12" : void 0;
+    const t18 = fullHeight && !fullScreen ? "h-full" : void 0;
+    const t19 = fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-xl";
+    const t20 = scrollable && "overflow-y-auto";
+    const t21 = displayed && open ? "opacity-100" : "opacity-0";
+    const t22 = maxWidth && !fullScreen ? widthClasses[maxWidth] : void 0;
     let 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 = $[29];
+    if ($[16] !== className || $[17] !== t17 || $[18] !== t18 || $[19] !== t19 || $[20] !== t20 || $[21] !== t21 || $[22] !== t22) {
+      t23 = cls(paperMixin, "z-30", "relative", "outline-none focus:outline-none", t17, t18, "text-surface-accent-900 dark:text-white", "justify-center items-center", t19, "ease-in-out duration-200", t20, t21, t22, className);
+      $[16] = className;
+      $[17] = t17;
+      $[18] = t18;
+      $[19] = t19;
+      $[20] = t20;
+      $[21] = t21;
+      $[22] = t22;
+      $[23] = t23;
+    } else {
+      t23 = $[23];
     }
     let 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;
+    if ($[24] !== children || $[25] !== t23) {
+      t24 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: t23, children });
+      $[24] = children;
+      $[25] = t23;
+      $[26] = t24;
     } else {
-      t24 = $[33];
+      t24 = $[26];
     }
     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;
+    if ($[27] !== onEscapeKeyDown || $[28] !== onInteractOutside || $[29] !== onPointerDownOutside || $[30] !== t15 || $[31] !== t24) {
+      t25 = /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Content, { onEscapeKeyDown, onOpenAutoFocus: t15, onPointerDownOutside, onInteractOutside, className: t16, children: t24 });
+      $[27] = onEscapeKeyDown;
+      $[28] = onInteractOutside;
+      $[29] = onPointerDownOutside;
+      $[30] = t15;
+      $[31] = t24;
+      $[32] = t25;
     } else {
-      t25 = $[38];
+      t25 = $[32];
     }
-    return t25;
+    let t26;
+    if ($[33] !== t14 || $[34] !== t25 || $[35] !== t9) {
+      t26 = /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: t9, children: [
+        t14,
+        t25
+      ] }) });
+      $[33] = t14;
+      $[34] = t25;
+      $[35] = t9;
+      $[36] = t26;
+    } else {
+      t26 = $[36];
+    }
+    let t27;
+    if ($[37] !== modal || $[38] !== onOpenChange || $[39] !== t26 || $[40] !== t8) {
+      t27 = /* @__PURE__ */ jsxRuntime.jsx(DialogPrimitive__namespace.Root, { open: t8, modal, onOpenChange, children: t26 });
+      $[37] = modal;
+      $[38] = onOpenChange;
+      $[39] = t26;
+      $[40] = t8;
+      $[41] = t27;
+    } else {
+      t27 = $[41];
+    }
+    return t27;
   };
   function _temp$2() {
   }
@@ -28753,7 +28798,7 @@
     const t2 = props.component;
     let t3;
     if ($[7] !== loading) {
-      t3 = loading && /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, { size: "small" });
+      t3 = loading && /* @__PURE__ */ jsxRuntime.jsx(CircularProgress, { size: "smallest" });
       $[7] = loading;
       $[8] = t3;
     } else {
@@ -29663,7 +29708,7 @@
   }
   const MultiSelectContext = React__namespace.createContext({});
   const MultiSelect = React__namespace.forwardRef((t0, ref) => {
-    const $ = reactCompilerRuntime.c(102);
+    const $ = reactCompilerRuntime.c(103);
     const {
       value,
       size: t1,
@@ -29908,7 +29953,7 @@
       t24 = $[48];
     }
     let t25;
-    if ($[49] !== children || $[50] !== handleClear || $[51] !== includeClear || $[52] !== isPopoverOpen || $[53] !== placeholder || $[54] !== renderValues || $[55] !== selectedValues || $[56] !== toggleOption || $[57] !== useChips) {
+    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__ */ 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),
@@ -29932,11 +29977,11 @@
             event_1.stopPropagation();
             handleClear();
           } }),
-          /* @__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" : "") }) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsxRuntime.jsx(KeyboardArrowDownIcon, { size: size === "large" ? "medium" : "small", className: cls("transition", isPopoverOpen ? "rotate-180" : "") }) })
         ] })
       ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full mx-auto", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", 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" : "") }) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsxRuntime.jsx(KeyboardArrowDownIcon, { size: size === "large" ? "medium" : "small", className: cls("transition", isPopoverOpen ? "rotate-180" : "") }) })
       ] });
       $[49] = children;
       $[50] = handleClear;
@@ -29945,104 +29990,105 @@
       $[53] = placeholder;
       $[54] = renderValues;
       $[55] = selectedValues;
-      $[56] = toggleOption;
-      $[57] = useChips;
-      $[58] = t25;
+      $[56] = size;
+      $[57] = toggleOption;
+      $[58] = useChips;
+      $[59] = t25;
     } else {
-      t25 = $[58];
+      t25 = $[59];
     }
     let t26;
-    if ($[59] !== handleTogglePopover || $[60] !== ref || $[61] !== t24 || $[62] !== t25) {
+    if ($[60] !== handleTogglePopover || $[61] !== ref || $[62] !== t24 || $[63] !== 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;
+      $[60] = handleTogglePopover;
+      $[61] = ref;
+      $[62] = t24;
+      $[63] = t25;
+      $[64] = t26;
     } else {
-      t26 = $[63];
+      t26 = $[64];
     }
     let t27;
-    if ($[64] === Symbol.for("react.memo_cache_sentinel")) {
+    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);
-      $[64] = t27;
+      $[65] = t27;
     } else {
-      t27 = $[64];
+      t27 = $[65];
     }
     let t28;
-    if ($[65] !== onPopoverOpenChange) {
+    if ($[66] !== onPopoverOpenChange) {
       t28 = () => onPopoverOpenChange(false);
-      $[65] = onPopoverOpenChange;
-      $[66] = t28;
+      $[66] = onPopoverOpenChange;
+      $[67] = t28;
     } else {
-      t28 = $[66];
+      t28 = $[67];
     }
     let t29;
-    if ($[67] === Symbol.for("react.memo_cache_sentinel")) {
+    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 ");
-      $[67] = t29;
+      $[68] = t29;
     } else {
-      t29 = $[67];
+      t29 = $[68];
     }
     let t30;
-    if ($[68] !== handleInputKeyDown) {
+    if ($[69] !== handleInputKeyDown) {
       t30 = /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Input, { className: t29, placeholder: "Search...", onKeyDown: handleInputKeyDown });
-      $[68] = handleInputKeyDown;
-      $[69] = t30;
+      $[69] = handleInputKeyDown;
+      $[70] = t30;
     } else {
-      t30 = $[69];
+      t30 = $[70];
     }
     let t31;
-    if ($[70] !== handleClear || $[71] !== selectedValues.length) {
+    if ($[71] !== handleClear || $[72] !== 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;
+      $[71] = handleClear;
+      $[72] = selectedValues.length;
+      $[73] = t31;
     } else {
-      t31 = $[72];
+      t31 = $[73];
     }
     let t32;
-    if ($[73] !== t30 || $[74] !== t31) {
+    if ($[74] !== t30 || $[75] !== t31) {
       t32 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center", children: [
         t30,
         t31
       ] });
-      $[73] = t30;
-      $[74] = t31;
-      $[75] = t32;
+      $[74] = t30;
+      $[75] = t31;
+      $[76] = t32;
     } else {
-      t32 = $[75];
+      t32 = $[76];
     }
     let t33;
-    if ($[76] === Symbol.for("react.memo_cache_sentinel")) {
+    if ($[77] === Symbol.for("react.memo_cache_sentinel")) {
       t33 = /* @__PURE__ */ jsxRuntime.jsx(Separator, { orientation: "horizontal", className: "my-0" });
-      $[76] = t33;
+      $[77] = t33;
     } else {
-      t33 = $[76];
+      t33 = $[77];
     }
     let t34;
-    if ($[77] === Symbol.for("react.memo_cache_sentinel")) {
+    if ($[78] === Symbol.for("react.memo_cache_sentinel")) {
       t34 = /* @__PURE__ */ jsxRuntime.jsx(cmdk.Command.Empty, { className: "px-4 py-2", children: "No results found." });
-      $[77] = t34;
+      $[78] = t34;
     } else {
-      t34 = $[77];
+      t34 = $[78];
     }
     let t35;
-    if ($[78] !== allValues.length || $[79] !== includeSelectAll || $[80] !== selectedValues.length || $[81] !== toggleAll) {
+    if ($[79] !== allValues.length || $[80] !== includeSelectAll || $[81] !== selectedValues.length || $[82] !== 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");
-      $[78] = allValues.length;
-      $[79] = includeSelectAll;
-      $[80] = selectedValues.length;
-      $[81] = toggleAll;
-      $[82] = t35;
+      $[79] = allValues.length;
+      $[80] = includeSelectAll;
+      $[81] = selectedValues.length;
+      $[82] = toggleAll;
+      $[83] = t35;
     } else {
-      t35 = $[82];
+      t35 = $[83];
     }
     let t36;
-    if ($[83] !== children || $[84] !== t35) {
+    if ($[84] !== children || $[85] !== t35) {
       t36 = /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.List, { children: [
         t34,
         /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command.Group, { children: [
@@ -30050,61 +30096,61 @@
           children
         ] })
       ] });
-      $[83] = children;
-      $[84] = t35;
-      $[85] = t36;
+      $[84] = children;
+      $[85] = t35;
+      $[86] = t36;
     } else {
-      t36 = $[85];
+      t36 = $[86];
     }
     let t37;
-    if ($[86] !== t32 || $[87] !== t36) {
+    if ($[87] !== t32 || $[88] !== t36) {
       t37 = /* @__PURE__ */ jsxRuntime.jsxs(cmdk.Command, { children: [
         t32,
         t33,
         t36
       ] });
-      $[86] = t32;
-      $[87] = t36;
-      $[88] = t37;
+      $[87] = t32;
+      $[88] = t36;
+      $[89] = t37;
     } else {
-      t37 = $[88];
+      t37 = $[89];
     }
     let t38;
-    if ($[89] !== t28 || $[90] !== t37) {
+    if ($[90] !== t28 || $[91] !== t37) {
       t38 = /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Content, { className: t27, align: "start", sideOffset: 8, onEscapeKeyDown: t28, children: t37 });
-      $[89] = t28;
-      $[90] = t37;
-      $[91] = t38;
+      $[90] = t28;
+      $[91] = t37;
+      $[92] = t38;
     } else {
-      t38 = $[91];
+      t38 = $[92];
     }
     let t39;
-    if ($[92] !== isPopoverOpen || $[93] !== modalPopover || $[94] !== onPopoverOpenChange || $[95] !== t26 || $[96] !== t38) {
+    if ($[93] !== isPopoverOpen || $[94] !== modalPopover || $[95] !== onPopoverOpenChange || $[96] !== t26 || $[97] !== t38) {
       t39 = /* @__PURE__ */ jsxRuntime.jsxs(PopoverPrimitive__namespace.Root, { open: isPopoverOpen, onOpenChange: onPopoverOpenChange, modal: modalPopover, children: [
         t26,
         t38
       ] });
-      $[92] = isPopoverOpen;
-      $[93] = modalPopover;
-      $[94] = onPopoverOpenChange;
-      $[95] = t26;
-      $[96] = t38;
-      $[97] = t39;
+      $[93] = isPopoverOpen;
+      $[94] = modalPopover;
+      $[95] = onPopoverOpenChange;
+      $[96] = t26;
+      $[97] = t38;
+      $[98] = t39;
     } else {
-      t39 = $[97];
+      t39 = $[98];
     }
     let t40;
-    if ($[98] !== t18 || $[99] !== t19 || $[100] !== t39) {
+    if ($[99] !== t18 || $[100] !== t19 || $[101] !== t39) {
       t40 = /* @__PURE__ */ jsxRuntime.jsxs(MultiSelectContext.Provider, { value: t18, children: [
         t19,
         t39
       ] });
-      $[98] = t18;
-      $[99] = t19;
-      $[100] = t39;
-      $[101] = t40;
+      $[99] = t18;
+      $[100] = t19;
+      $[101] = t39;
+      $[102] = t40;
     } else {
-      t40 = $[101];
+      t40 = $[102];
     }
     return t40;
   });
@@ -30535,6 +30581,7 @@
     onValueChange,
     className,
     inputClassName,
+    viewportClassName,
     placeholder,
     renderValue,
     label,
@@ -30546,6 +30593,7 @@
     endAdornment,
     invisible,
     children,
+    dataType = "string",
     ...props
   }, ref) => {
     const [openInternal, setOpenInternal] = React.useState(open ?? false);
@@ -30554,9 +30602,12 @@
     }, [open]);
     const onValueChangeInternal = React.useCallback((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);
+      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 = {
@@ -30575,55 +30626,57 @@
       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, {
+      /* @__PURE__ */ jsxRuntime.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__ */ 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" || 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",
-        "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", {
+      }), 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" || 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__ */ jsxRuntime.jsxs(SelectPrimitive__namespace.Value, { onClick: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-        }, placeholder, className: "w-full", children: [
-          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) => String(o.value) === String(value));
-            return option?.children;
-          })()
+          "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 === "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 !== 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) => String(o.value) === String(value));
+              return option?.children;
+            })()
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cls("h-full flex items-center"), onClick: (e_0) => {
+        endAdornment && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Icon, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(KeyboardArrowDownIcon, { size: "medium", className: cls("transition", open ? "rotate-180" : "", {
-          "px-2": size === "large",
-          "px-1": size === "medium" || size === "small"
-        }) }) })
-      ] }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Content, { position, className: cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-900 p-2 rounded-lg", defaultBorderMixin), children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Viewport, { className: "p-1", style: {
+        }, children: endAdornment })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Content, { position, className: cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-900 p-2 rounded-lg", defaultBorderMixin), children: /* @__PURE__ */ jsxRuntime.jsx(SelectPrimitive__namespace.Viewport, { className: cls("p-1", viewportClassName), style: {
         maxHeight: "var(--radix-select-content-available-height)"
       }, children }) }) })
     ] });